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, Grid, Flex, responsive(hopefully)

@DarkCityTreno

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Wanna keep working on mobile-first, and really wanna improve grid since I'm only starting to learn it. I hope this project ended up not too terrible. Always appreciate any sort of feedback!

Community feedback

@DylandeBruijn

Posted

@DarkCityTreno

Hiya! 👋

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it. Very happy to see you making a lot of progress!

Things I like about your solution 🎉

  • Use of semantic HTML elements
  • Clear descriptive CSS classes
  • Use of CSS custom properties
  • Responsive

I have only one suggestion to be honest. You have some overflow issues on smaller viewports because of the fixed width on your heading. You can fix that by changing it to max-width:

.heading h2 {
    font-weight: 200;
    margin-bottom: 1rem;
    max-width: 25ch;
}

I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! 🌟

Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

Happy coding! 😎

Marked as helpful

1

@DarkCityTreno

Posted

@DylandeBruijn Oof that's my bad. As per usual thank you for your feedback friend! Fixed ^_^

1

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