Skip to content

Latest commit

 

History

History
123 lines (106 loc) · 3.21 KB

README.md

File metadata and controls

123 lines (106 loc) · 3.21 KB
Raw

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.