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 master cards

@elsayedelbauomy

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 are you most proud of, and what would you do differently next time?

i'm proud of how easy the projects been with frontend mentor

What challenges did you encounter, and how did you overcome them?

the flexbox challinge i overcome them by alot of eferorts and elzero courses

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

if you see i want advice please give it to me

Community feedback

@R3ygoski

Posted

Hello @elsayedelbauomy, congratulations on your project, it almost resembles the proposed design.

I have some tips regarding your HTML, specifically about semantics. Firstly, I'd like to mention that semantics are crucial for improving the accessibility of your page.

Starting with <div class="top">, it could be a <header>, as this part serves as the introductory content of your page.

Also, concerning the four <div class="box">, it would be more appropriate to use them as <article>, as the content within them is self-explanatory.

Lastly, instead of using <span>, you could have used <p>.

Now, a suggestion regarding CSS. In your .box selector, you could add a box-shadow, which would add a shadow to it, creating more contrast with the background and making it resemble more of a card.

Again, congratulations on your project, keep practicing and improving. If you have any doubts about what I said, please comment below and I'll try to help as best as possible.

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