Submitted over 1 year ago

pricing-card-frontend-mentor-challenge

Rafa-Ol-Dev• 30

@Rafa-Ol-Dev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted over 1 year 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

Rafa-Ol-Dev• 30

@Rafa-Ol-Dev

Posted over 1 year ago

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

Hassia Issah• 50,670

@Hassiai

Posted over 1 year 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

Rafa-Ol-Dev• 30

@Rafa-Ol-Dev

Posted over 1 year ago

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

Please log in to post a comment

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