Submitted 10 months ago
Interactive-rating-component using HTML, vanilla CSS and JS
@shalomkerry
Design comparison
SolutionDesign
Solution retrospective
getting the interactivity was the difficult part. It took sometime but I managed. Would be nice to get your comments on how you handle buttons.
Community feedback
- @BlackpachamamePosted 10 months ago
Greetings! you have done a great job š
š Some accessibility and semantics recommendations for your HTML
- To improve the semantics of your HTML, you can change your
<div class="ratingbox">
to a<main class="ratingbox">
and the<div class="attribution">
to a<footer class="attribution">
š Some suggestions
- This looks too small, you can barely see what the content says
- Instead of using
position
to center your content in the center of the screen, you can use theflexbox
properties in thebody
:
body { background: #141519; font-family: 'Overpass'; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; /* Separate the main from the footer */ }
Marked as helpful1@shalomkerryPosted 10 months ago@Blackpachamame thank you for your suggestions. On the screenshots its makes it really small when I go diretly to the site tho it function well. I am gonna use the body to center it and see if their are changes with the screen shots
1 - To improve the semantics of your HTML, you can change your
Please log in to post a comment
Log in with GitHubJoin 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