blog-review-card

Community feedback

• 

  Victor Feitosa Garcia•230

  @VFGarciaDevPosted 7 months ago

  1. General suggestion (HTML & CSS):

  • don't skip lines or leave it blank, it gives a bad visual feedback for other coders. Search for semantic/clean code/organization. For example:

  <div class="container-2">
     <p class="content">Puslished 21 Dec 2023</p>
     <h1>HTML & CSS foundations</h1>
     <p>These languages are the backbone of every website, defining structure, content, and presentation.</p>
  </div>
  

  2 . HTML suggestions:

  • the "active-states challenge" is supposed to be a link that you can click, so you should add the tag <a> within the <h1>, like that:

  <h1><a href="#">HTML & CSS foundations</a></h1>
  

  • never forget to add a text in the 'alt' from every 'img' for accessibility (text that shows if the image doesn't load) 3 . CSS suggestions:
  • (this one is personal, but a lot of coders use) you can create another ".css" file specific for reset styles for better semantic, but remember to put above the main style.css (You can also create a folder just to css files)

  // HTML //
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  // CSS reset.css//
  *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
  }
  

  • card/container sizing: You should use, for example, "max-height" or "min-height" instead of just "height" for better responsivity. Furthermore, you should also use (%, rem) instead of px [otherwise, it can be a big problem por small screens]
  • try to get more used with (%, rem) with almost everything(font-size, height/width, margin/padding), it's much better for responsivity.
  • the attribute ":hover", you should use "color" instead of "background-color" to look like the challenge

  I hope I can help you with any of that suggestions. I'm open to clarify any doubt and you are welcome to text me

  Marked as helpful

  0
• 

  Harsh Kumar Dwivedi•740

  @Harsh-Kumar-DwivediPosted 7 months ago

  Hi @HansKevin,

  Nice Work !

  I would suggest following:-

  1.Prefer replacing <section> with <main> element and <div class="attribution"> with <footer> element.

  2.Try giving classes more descriptive and meaningful names.

  3.Understanding of flexbox would be highly useful.

  4.Consider adjusting margin between the paragraph and the author.

  5.Consider modifying following:-

  Now:-

  h1:hover {
      background-color: hsl(47, 88%, 63%);
  }
  

  After Change:-

  .container:hover h1 {
      color: hsl(47, 88%, 63%);
  }
  

  6.Check font-face rules, They need to be corrected.

  7.Box shadow of the card is not growing on the active states, try adding it too.

  Hope these suggestions are helpful !

  Happy Coding !

  1