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

Implementation of the pricing card challenge

Praanshuu 90

@Praanshuu

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@R3ygoski

Posted

Hello @Praanshuu, congratulations on completing another project. It turned out very well, although it's misaligned, it's clear that it's well done.

To align it to the center, you can use this snippet in your CSS:

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

This will perfectly center the card.

I'd like to make some suggestions regarding your HTML. It's well structured, but it lacks some semantics, which is important not only for SEO but also for accessibility. Here are some parts that could be improved:

  • <div Id="card">: This could be replaced with <main>, as it contains all the main content of your page.
  • <div Id="top">: This could be replaced with <header>, as it contains the introductory part of your page.
  • <div Id="bottom">: This could be replaced with <article>, as it's independent from the rest of the content and is also self-explanatory.

Another tip, regarding accessibility, is to avoid skipping heading levels, as this can cause some accessibility issues. It's always correct to start with an <h1> and progress downwards. So, changing your heading tags to <h1>, <h2>, and <h3> will make your page more accessible. W3School - Heading

Once again, congratulations. If you have any questions, please feel free to ask, and I'll do my best to help.

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