Checkout Page

Challenge: Create a checkout page following the design. You don’t need to use JS in this challenge but use correct input types and validation. Don’t look at the existing solution. Fulfill user stories below:

  • User story: I can see a page following the given design
  • User story: I can input email, phone, full name, address, city, country, and postal code
  • User story: I can input the number of items
  • User story: I can select at least 3 countries from the dropdown
  • User story: When I click submit button or press enter, I can see a warning if validation fails
  • User story: When I click submit button or press enter, I can see a successful alert if validation succeeds


Once you completed, submit your solutions by providing URLs for both GitHub repository and live app on any hosting platform (5 Free Hosting Platform) and explain briefly what you have done.

As long as you fulfill all the user stories, you can give your personal touches by adding transition, using your own images, changing colors,...

Remember to put your name on the footer to prevent other from submitting your solutions.

You can check others’ solutions and give them feedbacks.

How to start

  1. Read the challenge's details
  2. Start the challenge and download the resources
  3. Check designs on Figma
  4. Have fun coding!!