Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-first design using flexbox

Dragosh Gheceanuโ€ข 140

@dragoshcode

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey, I'd be happy to hear what I did wrong in my design, especially about the media query part, I don't know how to improve it, it's messed up a bit. Thank you

Community feedback

Raymart Pamplonaโ€ข 16,140

@pikapikamart

Posted

Hey, awesome work on this one. Layout in desktop seems fine, the responsiveness could be better since right now, the container shifts based on the text-wrapping right. The mobile layout could use some more width.

Grishmita already said some useful feedback, just going to give some suggestions as well.

  • Always have a main element to wrap the main content of the page. The .container selector could have used main instead of div. This way, contents are inside a landmark element.
  • Avoid using height: 100vh on a large container like your .container selector. This limits the element's height based on the screen. Use min-height: 100vh instead, this takes full height as well but allows the element to expand if needed.
  • For this one , I would put the .attribution inside the footer tag, so your markup should look like:
<main />
<footer />
  • Avoid using multiple h1 on a page. Use only at least 1 h1, change those into h2. But in a page, you need an h1 for this one, you will make the h1 a screen-reader only text by having an sr-only stylings. This means, the text will be hidden visually but visible for screen-readers. The h1 text-content should describe what is the content of the main is all about. Have a look at Grace's solution on this one inspect it and see how she used the h1 and copy as well the styling applied on it, you will used that a lot.
  • Each car icons could use aria-hidden="true" attribute so that the image will be visible for all tech.
  • Lastly, just those that I mentioned at the beginning, the responsiveness and mobile layout.

Aside from those, great work again on this one.

Marked as helpful

1

Dragosh Gheceanuโ€ข 140

@dragoshcode

Posted

@pikamart thank you so much for this code review ๐Ÿ’› took down the notes โœ

0
Grishmitaโ€ข 105

@Grishmita

Posted

I am not an expert but i have recently finished this challenge while. coding for frontend make sure to code the solution close to the given challenge as possible 1)padding 2) giving height to your div 3) regarding media query just understand whats the meaning of min-width and max-width after that there is a online media query breakpoint generator which are very cool and very helpful . From that website you can surely learn about media query

Marked as helpful

1

Dragosh Gheceanuโ€ข 140

@dragoshcode

Posted

@Grishmita Thank you so much! This website is awesome.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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