Responsive landing page using CSS

Community feedback

• 

  P

  Grant Ramsay•280

  @seapaganPosted over 2 years ago

  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

  Marked as helpful

  0

  ---

  

  Gvantsa•210

  @iragvantsaPosted over 2 years ago

  @seapagan Thanks a lot. I was so glad that someone checked it. Your comment are so helpful.

  1

  

  P

  Grant Ramsay•280

  @seapaganPosted over 2 years ago

  @iragvantsa, you are very welcome :)

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾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!

  Marked as helpful

  0

  ---

  

  Gvantsa•210

  @iragvantsaPosted over 2 years ago

  @correlucas Thank you so much, it really means a lot to me. I will change it and try to consider the advice for the next challenges.

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @iragvantsa You're welcome Gvantsa, happy to hear that.

  0