beRajeevKumar / Rating_Card

Interactive Rating Card Component: A Frontend Mentor project to practice HTML, CSS, JS skills.

Home Page:https://ratingcard-rajeev.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Frontend Mentor - Interactive rating component solution

This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The Challenge

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
  • Select and submit a number rating
  • See the "Thank you" card state after submitting a rating

Solution Screenshot

Solution Screenshot

Useful Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Responsive design
  • Desktop-first workflow

What I learned

By the end of this Project, I learn about how to build Interactive components using HTML, CSS, and JavaScript. I also learn about how to use CSS variables and how to use them in different ways. I also learn about how to use Flexbox and Grid in a better way. I also learn about how to use JavaScript to make the component interactive.

Continued development

I will continue to work on this project to make it more interactive and responsive. I will also work on the JavaScript part to make it more interactive and user-friendly. I will also work on the design part to make it more attractive and user-friendly.

Useful Resources

  • Resource 01 - This is an amazing articles which helped me finally understand HTML.
  • Resource 02 - This is an amazing articles which helped me finally understand CSS.

I'd recommend to everyone to checkout these amazing official HTML & CSS resources.

Author

Acknowledgments

I would like to thank Frontend Mentor for providing such an amazing platform to practice my coding skills. I would also like to thank the community for providing feedback on my projects and helping me improve my coding skills.


Happy Coding 👨‍💻

About

Interactive Rating Card Component: A Frontend Mentor project to practice HTML, CSS, JS skills.

https://ratingcard-rajeev.netlify.app/

License:MIT License


Languages

Language:CSS 43.4%Language:HTML 43.2%Language:JavaScript 13.4%