Skip to content
Submitted about 2 years ago

Interactive rating - Javascript, CSS, HTML. No frameworks

Javier Tamez•20
@ProwlingLynx
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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 :]

Community feedback

  • Joshua Hellard•545
    @jhellardPosted about 2 years ago

    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
    1
    Javier Tamez•20
    @ProwlingLynxPosted about 2 years ago

    @jhellard Hey Joshua! Thanks for stopping by.

    That makes sense. I found it was a touch more difficult to scale down.

    Like wise for the commits. Still getting used to making webpages.

    I didn't think that was an option :O I've only used it to adjust view port and see what wasn't there.

    Thanks for the tips!

    0

Please log in to post a comment

Log in with GitHub

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