Responsive landing page using CSS

Hello @iragvantsa, great work on this challenge 🥳

If you notice, you have a few Accessibility issues showing up in the report. Using Semantic HTML is becoming increasingly important these days to help screen-reader software and other accessibility tools.

Using a main tag around your main content is one way you can help - I'd replace the div on line 20 with a <main> tag like so :

<main class="grid-container">

Remember to change the closing tag too!

Also, H1, H2 etc. are Semantic choices, and should NOT be chosen based on the physical size or look - they can all be styled to any size or look you want. So there should be one and only one H1 tag, then the next MUST be an H2 (as many as you need) and so on. I'd replace the H4 with an H3 and adjust the styling to suit, then re-run the report and see how many errors are cleared.

In this case, there is really no position for an H1, so I'd probably live with the last errors.

See here and here for some discussion on Semantic HTML

👾Hello Gvantsa, congratulations for your solution!

You did everything right, the layout and the component design is just perfect!

I have 3 tips for you:

1.Wrap the quote using blockquote instead of a simple <p> to improve the semantics.

2.You need to use a media query to change the grid layout to 1 column. To do that, by what I saw in your css code, you'll have to reset all the grid properties for each card and set the media query with this reset declaring grid-template-column: 1fr;.

3.If you want to keep this grid simple, there's no need to use grid-row, grid-end and etc. You display two columns in the purple and black grid using grid-row: span 2; thats solve it easy, same thing to the vertical card with grid-column: span 2;

Hope it helps, happy coding!