Meet Landing Page (Responsive Layout Flexbox, Grid, and Media Queries)
Design comparison
Solution retrospective
- Taking the time to dig into the design specs and translate them into CSS custom variables
- Using a mobile first approach and applying media queries for tablet and desktop layouts
- Keeping code D.R.Y.
- A few challenges with image display based on layout.
- Need to be better about avoiding fixed dimensions and inside use dynamic metrics
- General peer review and suggestions for improvement and/or experimenting
Community feedback
- @MarenOelixtownPosted about 1 month ago
Congrats Max, your responsive design makes a good impression and you are very close to the original.
I have noticed a few things that might be worth looking at:
-
For this use case, I would recommend using a-tags for the buttons. For download: Using the a-tag with the download attribute will instruct the browser to download the linked resource as a file. The other is just a link to a part of the page. šButton vs Linkš
-
The picture-element could be useful for the hero-image. You can address the desktop media-query directly in the html without css. Using the picture-element and the srcset attribute also has performance advantages. It ensures that only the necessary images are loaded depending on the screen size. šW3 š šMDN š
-
In your features__content-part is the heading structure unfavourable. You have mixed headings with <h2> and <h3>, but there is no clear hierarchy. If a profile name is in <h3>, there should be a higher-level heading in <h2> first. This article explains the use of the hgroup-element, which I think also fits quite well here. šHTML structure š
I hope it inspires you...all the best! š
Marked as helpful0@maxkdavisPosted about 1 month ago@MarenOelixtown - Appreciate you taking the time to provide thoughtful feedback. Thanks for the resources...I'm digging into them already :)
Best
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