All solutions

In this challenge, I removed input style with appearance: none, using just label for rating instead since you can click respective label to select that radio button.

My question is: How to eliminate the difference(a blue dot for checked radio button) of appearance: none between Chrome and Firefox? Here's the screenshots about this issue Chrome Firefox

What's your solution to this challenge? Do you style the input without completely removing the default styles? Any advice/comments are welcomed🙏

(updated: the blue dot issue would be solved by setting input outline: none, thanks to @SutonToch)

Any comments are welcomed!

I try my best to pixel perfect it under 1440 x 800 and do some trade-off(just center some stuff and adjust grid columns actually) for bigger screen size since I don't wanna enlarge the hero image.

I would love to know more about how to layout with grid.

Looking for any comments or sharing of your solution!

References: Client-side form validation

Which is better, using explicit grid container width with repeat(3, 1fr) or using repeat(3, 20rem)? Or both of these is not good?

Any comments are welcomed!

1. How to name color variables? primary, neutral, cornflower, blue, ...?
2. When to use %? I use rem/em in most cases and px for margin/padding
3. I put everything in figcaption, is that right? Because I think all of the information is about the picture, so they are all caption.
4. Is there too much explicit width? including max-width and max-height
5. Better ways to write HTML & CSS: semantics, too many div?, class usage, CSS code refactoring

Any comments are welcomed! Thanks for reading this submission

Can I improve the semantics, a11y or CSScode structure?

Any comment is welcomed!

1. How can I improve the html structure (semantics) ?
2. How to center the main element vertically besides using the fixed value (i.e. I use margin: 12em auto)? Maybe with percentage/vh or using position as I think hard-coded value is not good
3. Should I use flexbox in this example?
4. Should I implement BEM/OOCSS or Sass from now on for better organization?

Thanks for reading. Any advice would be greatly appreciated!