Responsive page using Flexbox and media queries.

Community feedback

• 

  somaye beiranvand•220

  @somaye-beiranvandPosted almost 2 years ago

  Hello kiran

  nice job

  just a small suggession

  If you used grid for the layout of cards instead of flex it would be much more easier to make it responsive

  Here is my solution by grid for this challenge , If you like to take a look:

  four-card-feature-section-master using flexbox & grid

  Marked as helpful

  1

  ---

  

  Kiran kumar•120

  @kiran1095Posted almost 2 years ago

  @somaye-beiranvand Thanks somaye, I will follow your advice. I want to learn more about when to use flexbox and Grid, so I will be greatful if you can provide me insight or examples on it, so it will make me better in understanding and designing layouts.

  1

  

  somaye beiranvand•220

  @somaye-beiranvandPosted almost 2 years ago

  @kiran1095

  you can master them by practicing, reading other's code to get idea how to use them and studying

  some user's here write profasioanl codes you can see their projects:

  elaineleung

  catherineisonline

  DavidMorgade

  if you see fame wall you can find more excellent programmers

  here are some amazing games to learn grid and flexbox:

  fun flexbox and grid games

  Marked as helpful

  1
• 

  Dusan Brankov•860

  @dusan-bPosted almost 2 years ago

  Hi Kiran,

  I just looked at your code and I like your approach building a semantic HTML structure.It's an important part of making a webpage accessible.

  Regarding your question about responsiveness, it is much easier to create the mobile layout first, as the desktop layout is usually more complex and requires additional style rules. So, for wider screens, it's a good approach to add media queries with min-width.

  Back to your code, I noticed that you have used the <label> element for the headings. This element is most commonly used to describe the purpose of <input> elements, like "Name", "Email address", "Phone number" etc. For page headings, though, you should use <h1> - <h6> elements, whereby <h1> describes the most important content of the page.

  I took the <header> part from your page to give you an example:

  <header>
    <hgroup>
      <h1 class="heading_1">Reliable, efficient delivery</h1>
      <p class="heading_2">Powered by Technology</p>
    <hgroup>
    <p>
      Our Artificial Intelligence powered tools use millions of project data
      points to ensure that your project is successful
    </p>
  </header>
  

  Also, I noticed that you use rem units for the font sizes, which is great. This way you allow the user to fit the size of the text content regarding the user's browser settings. However, this will have no effect, when you set a font size in px on body in CSS. A good rule of thumb is to always use rem for font sizes and em for media queries.

  Here are some useful articles that will may give you a better understanding about units in web development:

  • REM vs EM – The Great Debate
  • The Surprising Truth About Pixels and Accessibility

  But overall, your code looks pretty good. Keep up the good work, and happy coding :).

  Marked as helpful

  1

  ---

  

  Kiran kumar•120

  @kiran1095Posted almost 2 years ago

  @dusan-b , Thanks Dusan. Your review is very helpful for me and I will follow your advice. Thanks and will be very greatful if you can guide me all the way as I will be designing more, to get better and better.

  1