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

3 column preview card

@ribeiroLevi

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


I am having a realy bad time trying to match the resolution of my version to the resolution of the design. any tips?

Community feedback

@MatejBumbera

Posted

Hi, I don't have the answer to your question, but I have some tips regarding your solution. First of all, congratulations on your solution! You did a great job in matching it to the design. Now to the tips:

  • I noticed some repetition in your code, mainly defining flexbox and its properties to both the container class and space id (+ assigning the same id to more elements is a bad practice).
  • You could use semantic HTML in your code. That means using tags like <main>, <section>, <header>, <footer> etc. instead of <div> tags. They are more descriptive so your code is more clear and it helps assistive technologies and search engines. You can study it more here: https://www.w3schools.com/html/html5_semantic_elements.asp
  • The website doesn't change in response to smaller web screen (for example on mobile phone). You could do this by using media queries, or in your case, you could use flex-wrap: wrap; declaration in a container rule and don't define the flexbox container width, define only flex items width. What happens is that when the items don't fit on the screen, they move on to the next line.

But overall, good job and keep coding! I hope you find my review helpful :D

0
Patriarch 50

@patriarchpamyeipyeng

Posted

I can 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