Audiophile e-commerce website


This huge e-commerce challenge will provide an incredible test for your front-end skills. Once you're done, you'll have an amazing project to add to your portfolio!

challenge

Brief

Your challenge is to build out this tip calculator app and get it looking
as close to the design as possible.

You can use any tools you like to help you complete the challenge.
So if you've got something you'd like to practice, feel free to give
it a go.

Your users should be able to:

  1. View the optimal layout for the app depending on their device's
    screen size
  2. See hover states for all interactive elements on the page
  3. Calculate the correct tip and total cost of the bill per person

Download the project and go through the README.md file. This will
provide further details about the project and help you get set up.

Want some support on the challenge? Join our Slack community
and ask questions in the help channel.

Getting started

  1. Download the starter code
  2. Set up the project with version control (e.g. Git)
  3. Read the README.md file and have a look around the project
  4. Set up your project/file architecture however you want
  5. Start coding!

Ideas to test yourself

Write your styles using a pre-processor, such as Sass, Less or Stylus

Practice working in a team by building with friends

Train your eye for detail by getting your solution as close to the design as you can

Try estimating the time it will take for you to build the project. Then see if the time taken matches up to your estimate. Project estimations are a skill that is often overlooked, but is important for professional developers

Let's work together