Submitted 24 days ago

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

Max•210

@maxkdavis

Preview site View code

This is a solution for...Meet landing page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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.

What challenges did you encounter, and how did you overcome them?

A few challenges with image display based on layout.
Need to be better about avoiding fixed dimensions and inside use dynamic metrics

What specific areas of your project would you like help with?

General peer review and suggestions for improvement and/or experimenting

Community feedback

Maren Ehlers•200
@MarenOelixtownPosted 21 days 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 helpful
0
Max•210
@maxkdavisPosted 20 days 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

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