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

Four card feature section - The first website I made alone

Johnny416 20

@Johnny416

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


Hi! I've been learning HTML & CSS for around a month now, however I only did projects in a code-along way. I thought I would give "solo coding" a try. I would appreciate any feedback! Thanks in advance and have a nice day everyone!

Community feedback

@Senatrius

Posted

Hello, and welcome to Frontend Mentor :) Made a good decision coming here, you'll learn a lot more a lot faster than you would have just by watching some videos.

Now, onto the review.

  1. Looking at the report, it's a good idea to align all the images using CSS instead of aligning it directly in HTML. Whether you use position: absolute or display: flex or something else is up to you. You've got a few options.
  2. To make the website more responsive, you should add another media query at width of 880px, as currently the text wraps and the icon goes outside the container and only fixes itself at width of 425px. Reducing the margin between text and icon in the cards might work as well as switching to a single column layout a bit sooner.
  3. Just to make it a little nicer, add some margin to the bottom of the container like how you have it at the top.
  4. Code quality in general looks pretty good to me, easy enough to read and understand, can't see anything particularly wrong there.

Keep up the good work and keep coding :)

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