Frontend Mentor - Results summary component

Welcome! 👋

Thanks for checking out this front-end coding challenge.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

To do this challenge, you need a basic understanding of HTML and CSS.

The challenge

Your challenge is to build out this results summary component 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.

We provide the data for the results in a local data.json file. So you can use that to add the results and total score dynamically if you choose.

Your users should be able to:

• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Easy steps to install TailwindCSS

1. Go to the folder where you extracted it.
2. Open it in VS code and open the terminal.
3. Run $ npm install -D tailwindcss command ( to create your tailwind dependencies ).
4. Followed by $ npx tailwindcss init ( to create your tailwind.config.js file ).
5. Now go to your "tailwind.config.js" file and within "[ ]" of the content write the path to your html inside double qoutes ( here it's in my root folder so the path is "./*.{html,js}" ).
6. Then create a css file ( named 'input.css' here ) in the src folder.
7. And now finally, run the command $ npx tailwindcss -i ./src/input.css -o ./src/output.css --watch ( here output.css is the file that will have all the css you will use in your project ).

• Now you can finally start writing tailwindcss in your html!! 😌