Design comparison
Solution retrospective
Which areas of your code are you unsure of?
Not sure about the H2 tags used for the last section titles. Neither sure about having 2 <ul><li>, one for Desktop and other for Mobile
Community feedback
- @jairovgPosted over 1 year ago
Hi Carlos, congrats on your solution; here are some comments that might help you to improve it:
Accessibility and semantics
- Here is your heading map:
1 - The Bright Future of Web 3.0? 2 - New 3 - Hydrogen VS Electric Cars 3 - The Downsides of AI Artistry 3 - Is VC Funding Drying Up? 2 - Reviving Retro PCs 2 - Top 10 Laptops of 2022 2 - The Growth of Gaming
- Even the
New
title has a correct hierarchy, this is the text the assistive technology will read out loud; I would consider an enhanced title with a part for screen readers only like"New articles"
or"New posts"
. - The three elements of the
.top-news
should beh3
each of them and thesection.top-news
element misses its heading to enhance the assistive technologies experience. You may use a.sr-only
class so it may be visually hidden. - The same section uses an ordered list to display its
articles
, however, you're using a span to enumerate the items. - The images in the same
.top-news
section are being treated as decorative images as they have an emptyalt
attribute. I'm wondering if they don't add any value to the related content. - I used to recommend the size hack you're using to override the base font size for simple calculations, but not anymore. I invite you to read this interesting blog post named Should I change the default HTML font-size to 62.5%? which explains the cons behind this hack and an approach to calculate the
font-size
using sass functions.
Styles
- It's better to use colour tokens based on their semantic use rather than their colour names. It's better for future refactors or a theme feature, in which case it's even better to use CSS variables.
- Try to not use deep nesting in your sass rules and not to make them dependent on other elements or it will be difficult to reuse some of your components. Instead, think about them as independent components.
- The images of the
.top-news
section are stretching at some breakpoints.
Others
- You're using two
nav
for the.header-nav
duplicating all its children. It should be created as a single component changing its appearance usingcss
only.
I hope you find it useful. I'm happy to look at your solution if you make other changes.
Marked as helpful0 - @Adel-HarratPosted over 1 year ago
Congrats on completing this challenge π
I typically utilize a JavaScript array to store links, which I then employ for both mobile and desktop applications, particularly when working with ReactJS.
Happy coding π
0
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