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 site

@samirhembrom

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 all, this is my second challenge, I would like to know if my code is efficient enough and whether I can use a different approach to solve this challenge. I went for mobile view first and then went for bigger screen. I used flexbox to align the card components.

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Samir, nice work on this challenge! You've done an excellent job, and your solution looks very similar to the design! Here are some thoughts after taking a look at your code:

  • You're only using h2 headings in this project. I'd say the top one would be a h1 for this challenge. You could then use span elements inside to style the text differently.
  • You're using br tags after the paragraphs in the cards. You don't need to do this because paragraph elements display block by default.
  • For the images inside the cards, I'd leave the alt values empty. This means screen reader software would skip those images. In this instance, that's a good thing, as you're repeating the same content as each card heading.
  • Your CSS looks good. I'd recommend revising your breakpoint, though. At the moment, you're using min-width: 376px. While it's great that you're using min-width, try looking at your project at 377px or any other mobile screen size up to the tablet ranges. You'll see the content looks very squashed.

I hope those tips help! Keep up the great work 👍

1

@samirhembrom

Posted

@mattstuddert Thank you for the feedback, I have to brushup on breakpoint, and I need to keep a note on when to use which HTML elements. I used br for giving a slight gap between the image and paragraph.

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