Meet Landing Page (Responsive Layout Flexbox, Grid, and Media Queries)

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
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MarenOelixtown
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 helpful -
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