Skip to content
Submitted over 2 years ago

Interactive rating - Javascript, CSS, HTML. No frameworks

Javier Tamez•20
@ProwlingLynx
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Challenge #02 complete! ^.^

It's refreshing having to build something with a clear finish line. I'm happy I watched Kevin Powell's YT channel and the recommendation to this site. Hope everyone is having a nice day.

I'm avoiding using frameworks for the first three challenges mostly to help myself learn better habits. I can appreciate how much easier react makes things.

Somethings I had problems with were planning for the mobile implementation, CSS development, and CSS testing.

The questions I'm asking are such:

  • What is a good approach to plan for mobile views? I personally built for desktop without planning for mobile. This lead to adding more classes and lots of media queries.

  • What is a good rule of thumb for committing CSS work? When I work with JS I feel confident in committing after creating new functions, updating a feature, or debugging something. When it comes to CSS I don't have that instinct yet.

  • Somewhat related to the previous. Are there better ways to test CSS than observing their behavior via chrome tools? This one might be worded a bit weirdly. I find it a bit awkward having to observe the changes and then mouse the element to confirm changes. In JS I can use jest to test functions or HTML, but I'm not sure where to look for CSS testing.

Thanks to everyone reading this :]

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Joshua Hellard•545
    @jhellard

    Generally most people do a 'Mobile First' approach, styling out the page for mobile viewports and then adding breakpoints when scaling up as needed. Some frameworks have preset breakpoints you could look at to get some ideas of what to use.

    Not sure if it's the best practice but I'll generally get my full page looking good and committing that CSS, with a commit message of like 'Mobile design completed'. Of course, you never catch everything the first time so I'll add minor updates to design with future commits as a side-note.

    Testing CSS can be tedious, you can edit the CSS properties in dev tools and get it right then change it in your editor once you get your desired effect.

    I hope I could provide some insight :) Keep on coding!

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord