Design comparison
Solution retrospective
A straightforward component that required minimal markup and styles. I've enjoyed working on these smaller projects to focus on fundamentals and be reminded that there's value in keeping solutions simple and easy to understand.
What challenges did you encounter, and how did you overcome them?Even with this simple component I initially added more markup than was necessary. It felt good tearing things down to the studs.
Community feedback
- @JYLNPosted 3 months ago
I think your solution is great! I completely understand your statement regarding overcomplicating the markup (I do it a lot too), it's fairly easy to do but good on you for reviewing and refactoring upon that.
I also like the simplicity of how your CSS file is laid out with the variables, reset, and base styles. I especially enjoy the comments of your variables containing the sizes of your intrinsic units in pixels. It shows you paid close attention to detail regarding the design spec.
Great work!
Marked as helpful0 - @MarioBatalhaPosted 3 months ago
You should reduce the line of comments in css file because its not a good practise to have comments for block of code or line code that is auto explanatory.
0 - @MarioBatalhaPosted 3 months ago
Auto-close tags that isn't mandatory to have a close tag to improve the acessibility e.g: <Link rel="icon" href="" />
Headings should follow a logical order without skipping levels (e.g., don’t jump from <h1> to <h4>). Proper nesting helps screen readers and search engines understand the structure of the content.
You don't have any h1 and you skipped to h2.
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