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

Only basic CSS, using Flexbox

Ozan GOKDEMIR• 50

@ozangokdemir

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


Hi I'm Ozan,

It's my first exercice to use what I recently learned about HTML/CSS. I'm trying to get good habits starting now, for example by trying to use SMACSS methodology.

I'm pretty satisfied with the result I get, but I didn't manage to stick my footer line to the bottom of my box without moving it when resizing my window in landscape mode...

I will take any advice on this, every remark you can do will help me !

Thank you

Community feedback

Raymart Pamplona• 16,140

@pikapikamart

Posted

Hey, great work on this one. The layout both desktop and mobile is good and it responds and scales very well on screen changes.

Also, great that you adopting certain methodologies, although I don't know what is SMACSS but hey, if you got it, that's really great.

Some suggestions would be:

  • Always have a h1 element on a webpage. On this one, the h1 would only be a screen reader text. It might seem new to you, but this is intended for screen reader users. The h1 element would look like:
<h1 class="sr-only">Frontendmentor car collections examples</h1>

The sr-only class is just a css stylings, you can search some up in google. This h1 would be the first text element inside the main.

  • Avoid using height: 100% or height: 100vh on an element. This will make the element's height limited to the viewport's height. On your body and main remove those css styling. That is a bad practice. Instead, on your main element. Add these:
align-items: center; # centers the content vertically
min-height: 100vh; # makes sure it have necessary height and will expand
  • On the section elements, you don't need to use transform on those element. Let the main flex container centers them properly, just add padding to a certain parent element.
  • An a tag doesn't have a type attribute. Remove those, button element and input have those.

Overall, it looks good. Great work again.

Marked as helpful

1

Ozan GOKDEMIR• 50

@ozangokdemir

Posted

@pikamart Your feedback is very clear and complete, so thank you for the time you spent on writing it. I will take all your suggestions in consideration and update my work according to your advices.

Thanks again for your kind help !

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