@FluffyKas
Posted
Hiya,
Lovely solution. It's nice to see that you used radio inputs for the rating, I think that makes the most sense for this ^^
There's a few things you might want to double-check though:
-
You forgot to set the button's font-family, so it's using the browser's default right now.
-
I'd consider removing the alt text of the images. They're decorative only, and their alt text don't add much to the content.
-
You could align your component vertically as well (at the moment it's not, you're just using a margin-top).
-
Instead of using multiple media queries to set widths in %, you could just set it once with max-width. For this, I'd recommend not using %, but rem perhaps. Using % for setting widths in itself isn't a good idea.
-
I'd argue if it's a good idea to use sections for everything. Even your button is wrapped in a section. While in itself it's not super harmful, it's the same as adding extra divs to your code, even when that's not needed. Semantically speaking, you may as well use divs here, it wouldn't make a difference.
As an alternative, you could:
- use form and fieldset for the radio inputs
- remove the extra section that wraps the button, there's no need to wrap it in anything
- remove the section that wraps the images, there's no need to wrap them in anything either
- remove the section that wraps the title and paragraph, you're not applying any styles to this either (or the ones you applying, like the flexbox isn't needed), therefore it's unnecessary
Happy coding ^^
Marked as helpful
@catherineisonline
Posted
@FluffyKas Thank you for the feedback!