landing page css

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 8 months ago

  HTML:

  • Headings should always be in order, so you would never start with a <h2>. Also, "Learning" is not a heading but a <p>.

  • Use the <time> element for the date. like this:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

  • As this is a blog card, add a link inside the heading.

  • The profile image needs a short, descriptive alt text, like "Headshot of Gary Hooper".

  • Change "Gary Hooper" to a <p>.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • On main, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove the width on the card.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

  • The text in .card-description has low contrast, so I would change it to black for better readability.

  1
• 

  lij110397•230

  @lij110397Posted 8 months ago

  • I like the name standard of the class. It gives lots of meanings and the code is neat.

  <div class="card">
  <h2 class="card-category">Learning</h2>
  <div class="card-author">
  <h3 class="card-author-name">Greg Hooper</h3>
  

  • The box shadow of the card is different from the design.

  box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 1); 
  

  The third parameter should be changed to 0, which control the blur range.

  0