EONRaider/Interactive-Rating-Component

Solution for the NFT Interactive Rating Component challenge on frontendmentor.io

Frontend Mentor - Interactive Rating Component solution

This is a solution to the Interactive Rating Component. Frontend Mentor challenges help you improve your coding skills by building realistic interactive-rating-components.

Table of contents

• Overview
  • Links
  • Screenshot
• Try it out!
  • Run with Node.js
  • Run with Docker
• My process
  • Built with
  • What I learned

Overview

Links

• Check the Live Site
• My Solution on Frontend Mentor

Screenshot

Try it out!

Run with Node.js

The app will be available at http://127.0.0.1:4000/

npm install && npm start

Run with Docker

The app will be available at http://127.0.0.1:3000/

docker run -d -p 3000:3000 eonraider/interactive-rating-component

My process

1. I started with the markup on index.html, complying with HTML5 semantic tags and standards as much as possible.
2. The styling provided by the interactive-rating-component briefing was implemented first, followed by the classes I came up with on the markup.
3. I used Figma to acquire all the right dimensions involved in the layout and implemented them in the appropriate CSS classes.
4. The CSS Cube methodology was used when coding the stylesheet and some of the conventions from BEM were used when naming classes.

Built with

• Semantic HTML5 markup
• Cube CSS methodology

What I learned

• This project offered yet another great opportunity to manipulate images with the SVG format using CSS.