Skip to content
Submitted almost 2 years ago

pricing-card-frontend-mentor-challenge

Rafa-Ol-Dev•30
@Rafa-Ol-Dev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,160
    @MelvinAguilarPosted almost 2 years ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    Metadata 🗃️:

    • The lang attribute is used to declare the language of the webpage. Add the lang attribute to the <html> tag with the value en.

    • The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta tag to the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

      You can check your solution on a mobile device to see how your solution is distorted by not using this tag. ⚠️

    HTML 🏷️:

    • Wrap the page's whole main content in the <main> tag.
    • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source 📘

    CSS 🎨:

    • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.
    body {
    /* padding: 20px; */
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
    2
    Rafa-Ol-Dev•30
    @Rafa-Ol-DevPosted almost 2 years ago

    @MelvinAguilar Thanks a lot for your suggestions ,they were really helpful!

    0
  • Hassia Issah•50,670
    @HassiaiPosted almost 2 years ago

    Replace <div class="card"> with the main tag, <h2> with <h1> and <h4> with <h2> to fix the accessibility issues. click here for more on web-accessibility and semantic html

    Give the body a background-color. Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

    To center .card on the page using flexbox or grid, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

    To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

    To center .container on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    1
    Rafa-Ol-Dev•30
    @Rafa-Ol-DevPosted almost 2 years ago

    @Hassiai Thank you very much for your suggestions. They were extremelly useful!

    1

Please log in to post a comment

Log in with GitHub

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