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

Responsive design using CSS grid

@gfontorbe

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I got a comment on my previous submission on bad use of HTML semantic. I would like to have an opinion on my use of HTML semantic on this submission.

Community feedback

P
Grace 27,950

@grace-snow

Posted

Hi

The semantics is nearly there but still needs a few small changes.

I recommend

  • changing the first heading to h1- you need a h1 on every page, and as all this content 'belongs' to that first heading subject, the other headings should be one level down from the first heading.
  • changing the button to an anchor tag - this would trigger navigation not an action like a form submission so should be a link not button
  • most important of all, the why us content needs to be a list. It is not a load of separate paragraphs.

On styling the preview above looks good but content is being cut off for me on mobile. I'll add a screenshot to slack for you so you can see what I see

I hope this is helpful ☺

0

@gfontorbe

Posted

@grace-snow This is indeed very helpful. Thanks for your help! I guess I have many automatisms to acquire, didn't even think of using a list for the Why US content ...

I will reply to you on Slack regarding the cropping.

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