Skip to content
Submitted over 2 years ago

single-price-grid-component-master

Abdu-rahman•20
@abdurahmanjabiin
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

hi, my second challenge still learning grid layout.

if 'css reset' resets all the styling in the browser does that means there is no point of using h1 to h6 in html for title and header and etc?

any feedback is welcome thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Ahmed Hany•220
    @ahmedhanyh

    The point of using heading elements <h1> through <h6> is to give semantic meaning to the text so that screen reader users can understand the structure and importance of that text, and to also make it easier for them to navigate the page. Don't use the heading elements <h1> through <h6> for their default styles applied by the user agent stylesheet, use them to make the site more accessible. Watch this video to learn more and also read this part of this lesson (and take a look at other lessons that focus on semantic HTML from the same course).

  • Hassia Issah•50,390
    @Hassiai

    Replace <h3> and <h4> with <h2> to fix the accessibility issue.

    To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. instead of giving .container a margin value

    Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

    Hope am helpful HAPPY CODING

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