Single Price Grid Component using HTML and CSS Flexbox

Community feedback

• 

  Shahin NJ•1,190

  @SJ-Nosrat

  Posted almost 4 years ago

  Hi devbev, Congratulations on the above solution! Really wonderful to see that you've come so far after just a week!

  With regards to your question here are some suggestions to help out with future builds, as follows:

  1. Always build from a Mobile first approach; that is build the mobile version of the design first than move to larger screen sizes. Hence: Mobile ---> Desktop. This is because webpages are also viewed on mobile screen (so accommodating is good too).

  So following the above suggestion: First structure your HTML code (taking semantic HTML into consideration), then inspect your code in your devtools for smaller screen sizes, you'll notice that the default browser styles will layout your HTML code nicely within the mobile screen size. Then you can go ahead and add either margin or padding styles and build that way gradually adding styles. As you move to larger screen sizes you can then add:

   @media (min-width: 768px) {
     /* YOUR CODE HERE */
  }
  

  In the above code: 768px is targeting screen sizes that have a width of said size; like iPads etc. Here is a YouTube video by Kevin Powell on media queries.

  2. Also add the following lines of code to your stylesheets:

  * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;   /* This code block gives you a clean slate to apply your custom styles */
  }
  
   html {
     height: 100%;
  }
  
  body {
     min-height: 100vh;
  }
  

  The other styles are explained here: Freecodecamp article by David Gray.

  3. Try and start using semantic HTML, that is use **HTML 5 ** elements that conveys meaning to your webpage structure, that way you aid in screen readers to have better accessibility. Here is the article about Semantic Article by MDN. That's why the report generated 3 Accessibility Issues.

  4. Try adding the following CSS code to your #container id.

  #container {
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      border-radius: 5px;
      overflow: hidden;
      /* add the below code */
      max-width: 1440px; 
  }
  

  max-width: 1440px; doesn't allow for your design to expand beyond 1440px since most of FrontEndMentor's design are build for those widths; it also gives a cleaner looks (my opinion) with whitespace on either side of the main content on much larger screen sizes.

  5. Try to refactor the below code to using <ul>, my suggestion follows:

  <div class="whyus">
              <h1>Why US</h1> 
  
              <h4>Tutorials by industry experts</h4>
  
              <h4>Peer & expert code review</h4>
  
              <h4>Coding excercises</h4>
  
              <h4>Access to our Github repos</h4>
              
              <h4>Community forum</h4>
  
              <h4>Flashcard decks</h4>
  
              <h4>New videos every week</h4>
  </div>
  

  Do the below instead:

  <div class="whyus">
              <h2>Why US</h2>
             <ul>
                <li>Tutorials by industry experts</li>
                <li>Peer & expert code review</li>
                <li>Coding excercises</li>
            </ul>
  </div>
  

  Then you add the following styles to your CSS:

   .whyus > ul {
     list-style-type: none; /* removes the bullets */
  }
  

  I've used CSS combinators you can read it here: MDN article on combinators.

  I hope the above helps you, and best of luck on your coding journey!!!

  11
• 

  Saif Narpali•590

  @SaifN97

  Posted almost 4 years ago

  Hey devbev! Good work on this one!

  I'll suggest look more into using the correct units instead of using px for everything.. I struggled on this too but learning about rem, em and percentages helped me big time!

  Have fun coding! Cheers!

  01