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 cars columns

@metallicatzach

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


first one. feedback needed please. thank you.

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

  • To properly center the container.

  • USING FLEXBOX

body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
  • USING GRID
body{
min-height: 100vh;
display: grid;
place-items: center;
}

➨ Use Semantics for the proper design of your code.

<body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>

➨ Use background:transparent; on hovering.

button:hover{   
background:transparent;
}

➨ Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

link.

I hope you find this helpful.

Happy coding😄

0

@Oluwalolope

Posted

Hey 👋,

Great work with your challenge it looks really good. I have a few suggestions for you.

  • Don't leave the <alt> text-empty: It is highly recommended not to leave the alt text blank because it isn't considered best practice. If a person with visual impairments is going through your site, such person will need assistance like a screen reader. The screen reader reads out the alt text of the image. It is basically a description of your image and It is very important.

  • Use Media Queries to make your website responsive: Your site looks amazing on desktop or screens with larger displays. But it doesn't really look great on phones. That is where media queries come in🦸‍♂️🦸‍♂️🦸‍♂️. It is used as a tool to make sites responsive. Right now your site has a fixed dimensioning irrespective of the screen size but with a media query it will be more interested in the screen size. Kindly check here for further clarification Media Queries.

Once again Congratulations 🎊 on completing your first frontend mentor challenge. I really look forward to see your next challenge submission 🔥. I hope you found this helpful😄. Goodluck👍

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