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

HTML5 CSS3

RTX3070 490

@RTX3070

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


Feedbacks are welcome! : )

Community feedback

@benjoquilario

Posted

Hi RTX3070, great job on finishing this one, it looks good and response rather well.

some suggestion to improve your code.

  • Heading(h1-h6) levels should only increase by one, because you use h5 heading, it gives you a warning, use h3 instead you cannot use h5 without h3 and h4.
  • Your h1 tag should be at the top of the page content (above any other heading tags in the page code).
  • I think you put media queries early, use the min-width: 1025px or 768px instead.

Overall you did well, hope it helps

cheers, benjo

Marked as helpful

1

@MikeBish13

Posted

The screenshot you've taken looks pretty accurate compared to the final design, so great job on that!

However, you should consider 'responsive layouts' and how the page looks on different screen sizes. From what I can tell, the full page 'grid' layout only shows at a screen size of 1400, and then reverts back to the mobile layout at screen sizes below that. Have a think about a suitable 'break point' to implement into your project and rememeber -- not everyone views a page on a full-screen!

Hope that helps and keep up the good work!

Marked as helpful

1

RTX3070 490

@RTX3070

Posted

@MikeBish13 Hi Mike, you're right but in the style-guide file only two media queries are supplied (375px, 1440px) so to be consistent in the challenge I sticked with that : )

0

@MikeBish13

Posted

@RTX3070 The briefs give you the screen sizes at which the page should absolutely look like the design provided for that specific point, but then it's up to you to determine how they should look between those values. That's where you need to start making judgements yourself about what looks and feels best for the user -- it takes a little experience but you'll become an expert in no time!!

Marked as helpful

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