Frontend Mentor - Interactive rating component solution

This is a solution to the Seventh challenge from Frontend Mentor. Frontend Mentor challenges is helping me improve my coding skills by building realistic projects. The challenge: Interactive rating component challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

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

Screenshot

• Desktop Screen:
  

• Mobile Screen
  

Links

• Solution URL: Interactive rating component solution

• Live Site URL: Challeng Webpage

My process

• I started on the Html file, adding the semantic elements and the divs;
• In this project I didn't use the variables, because It doesn't work on some browsers.
• I tried to style the elements on CSS using classes instead of the html elements, so I chose the properly class names;
• The project is mobile first (screen: 375px);
• I had used Flexbox to position the elements on the screen;
• Then I styled the elements from the top to the bottom;
• Add the responsiveness to the desktop screens (1440px);

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile First
• Some JavaScript code

What I learned

• I've practiced how to code using the mobile first concept
• How to use the background-position to position the images on the background
• I've tried to use more specific classes for the stylisting
• How to use forEach for method to iterate over the classes elements

Continued development

• Practice more the flexbox tools
• Learn how to code Utility Firts CSS;
• Practice more the JS fundamentals

Author

• Frontend Mentor - @MonicaDalosto
• Github - @MonicaDalosto