Frontend Mentor | Responsive "Single price grid component" using SCSS, BEM coding challenge solution

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

Why don't you try grid layout for body element instead of using flex

You are using Flexbox which wants three lines to center the componet but if we use Grid for layout then one line of code is minimized.

For this demonstration we are using the css Grid to center the component

body {
    display: grid;
    place-items: center;
}

Now your component has been properly centered with just 2 lines of code

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

Roma• 230

@roma-nikolaichuk

Posted over 1 year ago

@0xAbdulKhalid Yes, I know, thanks!

Shaxboz• 1,230

@shakhboz-shukhrat

Posted over 1 year ago

Hello there👋! Congratulations on completing this challenge! There doesn't appear to be any obvious problems with the code. However, there are some suggested improvements:

Use double quotes consistently for HTML attributes: In the link tag, the href attribute uses double quotes while the rel and type attributes use single quotes. It's better to be consistent and use double quotes for all attributes.
Add alt attributes to image links: The link tag with the favicon image doesn't have an alt attribute. It's recommended to add one to improve accessibility.
Use semantic HTML: The section and article elements are used correctly to structure the content, but it might be more appropriate to use header and footer elements instead of h2 and p for the headings and attribution text respectively.

Here is the revised code with the suggested improvements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" alt="Site favicon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">
    <title>Frontend Mentor | Single Price Grid Component</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>
  <body>
    <main>
      <section class="single-price-grid">
        <header class="single-price-grid__join">
          <h1 class="single-price-grid__join-title">Join our community</h1>
          <h2 class="single-price-grid__join-subtitle">30-day, hassle-free money back guarantee</h2>
          <p class="single-price-grid__join-text">Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills.</p>
        </header>

        <article class="single-price-grid__subscription">
          <h2 class="single-price-grid__subscription-subtitle">Monthly Subscription</h2>

          <div class="single-price-grid__price">
            <span class="single-price-grid__amount">$29</span>
            <span class="single-price-grid__period">per month</span>
          </div>

          <p class="single-price-grid__subscription-text">Full access for less than $1 a day</p>

          <button class="single-price-grid__signup-btn" type="button">Sign Up</button>
        </article>

        <article class="single-price-grid__why-choose-us">
          <h2 class="single-price-grid__why-choose-us-subtitle\">Why Us</h2>

          <ul class="single-price-grid__list">
            <li class="single-price-grid__item">Tutorials by industry experts</li>
            <li class="single-price-grid__item">Peer & expert code review</li>
            <li class="single-price-grid__item">Coding exercises</li>
            <li class="single-price-grid__item">Access to our GitHub repos</li>
            <li class="single-price-grid__item">Community forum</li>
            <li class="single-price-grid__item">Flashcard decks</li>
            <li class="single-price-grid__item">New videos every week</li>
          </ul>
        </article>

        <footer>
          <p class="attribution">Challenge by <a href="https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc" target="_blank">Frontend Mentor</a>. 
            Coded by <a href="https://github.com/roma-nikolaichuk/single-price-grid-component" target="_blank">Roman Nikolaichuk</a>.
          </p>
        </footer>
      </section>
    </main>
  </body>
</html>

Anyway, your solution is great. Hope you will find this helpful. Happy coding!

Marked as helpful

Roma• 230

@roma-nikolaichuk

Posted over 1 year ago

@Trueboss Yes, thanks!

Responsive "Single price grid component" using SCSS, BEM

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community