Responsive page using Flexbox and media queries.

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

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 :).