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

Single price grid component with Flexbox

@DadoVeliki

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would appreciate the feedback :)

Community feedback

@zenab12

Posted

Hey, You did amazing work congratulations for completing this challenge

to fix accessibility issues and make code more readable :

  • use main and wrap inside it div.container so all page content should be contained by landmarks

  • Go down orderly when you are using the headings <h1> down to <h2> down to <h3> and so on . so remove div.donji as the browser can see the ordering of heading an instead it you can use this to use semantic tags and classes name to make code more readable

<main>
      <header>
        <h1>  Join our community </h1>
        <h2>  30-day, hassle-free money back guarantee </h2>
        <p> 
          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>
        <div class="price">
           <h3> Monthly Subscription </h3>
          <p>  $29  <span>per month</span></p>
          <p>  Full access for less than $1 a day</p>
          <button class="register">   Sign Up </button>
        </div>

        <div class="whyus">
           <h3>  Why Us </h3>
           <ul>
             
               <li>  Tutorials by industry experts </li>
               <li>  Peer & expert code review </li>
               <li>  Coding exercises </li>
               <li>  Access to our GitHub repos </li>
               <li>  Community forum </li>
               <li>  Flashcard decks </li>
               <li>  New videos every week </li>
           </ul>
        </div>
    </main>
  • don't use <br> to separate sentence vertically in div.desno but these text are items of list so it is recommendable to use unordered list and style it instead using <p> and <br> as this
       <ul>
               <li>  Tutorials by industry experts </li>
               <li>  Peer & expert code review </li>
               <li>  Coding exercises </li>
               <li>  Access to our GitHub repos </li>
               <li>  Community forum </li>
               <li>  Flashcard decks </li>
               <li>  New videos every week </li>
        </ul>
  • don't give section or div specific height that will damage the responsivity in mobile and will make scroll if width of screen small or height of the div large than screen height view so remove height and use min-height instead .

Regardless You did amazing I hope this is useful to you... Keep coding👍

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