Overall useful links

Typography

1. Fonts: https://fonts.google.com/
2. TypeScale: https://type-scale.com/

Colors

1. Open Colors: https://yeun.github.io/open-color/
2. TailWind CSS Colors: https://tailwindcss.com/docs/customizing-colors
3. ColorHunt Colors: https://colorhunt.co/
4. FLat UI Colors: https://flatuicolors.com/
5. Tints and Shades generator: https://maketintsandshades.com/

Images and Illustrations

1. Unsplash: https://unsplash.com/
2. Pexels: https://www.pexels.com/
3. DrawKit: https://drawkit.com/
4. unDraw: https://undraw.co/
5. Squoosh: https://squoosh.app/

Icons

1. Phosphor icons: https://phosphoricons.com/
2. Ionicons: https://ionic.io/ionicons
3. Icons 8: https://icons8.com/
4. Heroicons: https://heroicons.com/

Shadows

1. Box Shadow generator: https://cssgenerator.org/box-shadow-css-generator.html
2. Box Shadow: https://www.cssmatic.com/box-shadow

UX Design

1. Landbook: https://land-book.com/
2. OnePageLove: https://onepagelove.com/inspiration
3. Awwwards: https://www.awwwards.com/

Challenges

Section 5

1. Covered
   1. Introduction to Web Design
   2. Overview of Web Design and Web Personalities
      1. Very clear information about web design principles, web personalties
      2. Gives a glance of different web personalities to follow while designing a website
   3. #1 Typography
      1. Rules
      2. Implementation
         1. Choose font type face
         2. Choose font size
         3. Apply line-height and letter-spacing
   4. #2 Colors
      1. Rules
      2. Implementation
         1. Our project is related to health
         2. Find the base color
         3. Use Open Colors tool to pick the pallette
         4. Find the tints and shades of the color
         5. Find the grey color for text
         6. Apply text color to the body
         7. Check the contrast ratios
   5. #3 Images and Illustrations
      1. Rules
      2. Technical details
         1. Scale factor
         2. Compress images
         3. Multiple images together should have same dimensions
   6. #4 Icons
      1. Rules
      2. Implementation
         1. Use SVG icons
         2. Use stoke property to change the color of SVG icons
   7. #5 Shadows
      1. Rules
      2. Implementation
         1. Blur radius
         2. Spread radius
         3. inset property
   8. #6 Border Radius
      1. Rules
      2. Implementation
   9. #7 WhiteSpaces
      1. Rules
      2. Implementation
   10. #8 Visual Hierarchy
   11. Rules
   12. Implementation
   13. #9 UX Design
   14. Rules
   15. Implementation

Section 6

1. Covered
   1. Intro
   2. #10 Elements and Components
      1. Building Accordion component
      2. Building Carousel component
         1. First create styles on the small and simpler elements, then use them as a whole to build the layout.
      3. Building Table component
      4. Building Pagination component
   3. Section components
      1. Navigation
      2. Hero
      3. Footers
      4. CTA Button
      5. Feature rows
   4. Layout patterns
      1. Row of boxes/cards
      2. GRID of boxes/cards
      3. Z-Pattern
      4. F-Pattern
      5. Single column
      6. Sidebar
      7. Multi column/Magazine
      8. Asymmetry/Experimental
   5. Building a Hero Section 1.