TASK #1

Estimated Time: ~1 hour

Level: VERY EASY

Pagination

Key Points:

  • Button, Button Disabled
  • Hover
  • Border Radius
  • Padding and Margin
Click Here
TASK #2

Estimated Time: 2-4 hours

Level: EASY

Latest Customer List

Key Points:

  • Flex, Align Items: Center, Justify Content: Center, Min Height: 100vh (on The Center of Screen)
  • Image, Border Radius, Object Cover
  • Font Weight
  • Box Shadow
Click Here
TASK #3

Estimated Time: 4-8 hours

Level: MEDIUM

Forgot Password Form

Key Points:

  • Flex, Align Items: Center, Justify Content: Center, Min Height: 100vh (on The Center of Screen)
  • Flex, Flex Direction: Row
  • Border Radius
  • Text Input & Placeholder
  • Hover & Focus on Button
Click Here
TASK #4

Estimated Time: 8-12 hours

Level: HARD

Cooking Recipe

Key Points:

  • Grid for Main Layout
  • Flex for inside of the detail cookies recipe
  • Animation Hover on Some Parts
  • Border Radius
  • Responsive, need to be good at any screen / device
Click Here
TASK #5

Estimated Time: 1 day

Level: HARD

Pricing Plan

Key Points:

  • Flex or Grid on Main Layout (can choose)
  • Hover on Button
  • Background Image: Linear Gradient
  • Border Radius
  • Font Weight, Font Size, Line Weight
  • Responsive, need to be good at any screen / device
Click Here
TASK #6

Estimated Time: 1-2 hours

Level: VERY EASY

Display Inline, Inline Block or Block?

Key Points:

  • Display: Inline, Inline Block, Block
  • Width & Height
  • Margin
  • Color
  • Background Color
Click Here
TASK #7

Estimated Time: 1-3 hours

Level: EASY

Heading, Paragraph, Span, Text-Decoration, Text Align

Key Points:

  • Heading (in here using H2 and H6, feel free to try other headings)
  • Paragraph
    <p></p>
  • Span
    <span></span>
  • Bold
  • Italic
  • Text Align: Start, Center, End
  • Text Decoration Line: Underline, Line Through, Overline
  • Text Decoration Style: Dashed, Wavy (can learn others too)
  • Line Breaks 
    <br />
  • Background Color
  • Color
  • Padding/Margin
Click Here
TASK #8

Estimated Time: 6-10 hours

Level: EASY - MEDIUM

Understanding Spacing (Padding & Margin) and Border Width

Key Points:

  • Padding (Top, Right, Bottom, Left)
  • Margin (Top, Right, Bottom, Left)
  • Border Width
  • Border Color
  • Margin Left & Margin Right Auto
Click Here
TASK #9

Estimated Time: 4-8 hours

Level: EASY - MEDIUM

Basic Input Form

Key Points:

  • Input type text
  • Input type email
  • Input type password
  • Input type number
  • Input type file
  • Input select - option
  • Input type radio
  • Input type checkbox
  • Textarea
  • Button
Click Here