Frontend Mentor | Front-end coding challenges using a real-life workflow

Desktop design

Tablet design

Mobile design

Tip calculator app

This small app is perfect for anyone starting to get to grips with JavaScript.
The calculator functionality will be a nice test!

ASSETS PROVIDED

✘ Sketch and Figma design file access - Unlock access with PRO

✓ JPEG design files for mobile & desktop layouts

✓ Style guide for fonts, colors, etc

✓ Optimized image assets

✓ README file to help you get started

✓ HTML file with pre-written content

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:

View the optimal layout for the app depending on their device's
screen size
See hover states for all interactive elements on the page
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

Download the starter code
Set up the project with version control (e.g. Git)
Read the README.md file and have a look around the project
Set up your project/file architecture however you want
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