Blog Preview Card using html and css

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 5 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your solution is really impressive!

  I've got a couple of ideas (about how to use HTML better) that could make it even stronger:

  📌 First: Think about using <main> to wrap your main content instead of <div>.

  Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

  📌 Second: Consider using <h1> for your main title instead of <div>.

  It's more than just text size — it's about structuring your content effectively:

  • The <h1> to <h6> tags are used to define HTML headings.
  • <h1> is for the most important heading.
  • <h6> is for the least important heading.
  • Stick to just one <h1> per page – it should be the main title for the whole page.
  • And don't skip heading levels – start with <h1>, then use <h2>, and so on.

  These tweaks might not change how your page looks, but they'll make your HTML code clearer and help with SEO and accessibility.

  Hope that's helpful!

  Keep up the great work!

  1

  ---

  

  Vasavi Dwivedi•80

  @vvvasaviiPosted 5 months ago

  @danielmrz-dev thanks a bunch! I'll do just that next time onwards

  0
• 

  Osiel Hernández•190

  @xXOsielXxPosted 5 months ago

  @vvvasavii Hi, congratulations for passing the challenge!

  Your web page is very similar to the design and, you setted the active states, nice! However, I like to give you some suggestions...

  • Card: You setted a padding of 21px to the left of the .preview-card, but... Why not set a padding: 21px for all sides of the container? Just, look at the design.

  • Image: You are embedding the image using a svg tag, this isn't incorrect but, I think the idea is linking the image with a <img> tag like this: <img class="illustration" src="assets/images/illustration-article.svg" alt="Illustration">, then you can add styles to it like this:

  .illustration {
      width: 100%;
      border-radius: 8px;
  }
  

  • Naming conventions: Your classes with long names had names like "Learningtext", but that is less readable that using other conventions like this:
    • camelCase: "learningText" (I use this one for JS code)
    • snake_case: "learning_text"
    • kebab-case: "learning-text" (I use this one for HTML and CSS code)

  That's all. Hope this can help you.

  Have a nice day and... Happy coding!

  0

  ---

  

  Vasavi Dwivedi•80

  @vvvasaviiPosted 5 months ago

  @xXOsielXx thank you sm for the detailed feedback, i really appreciate it a lot! And also, about the padding in the 'card' are you talking about the container in the frame class? Because i have given a padding of 24px on all sides. Again, thanks a lot :)

  0

  

  Osiel Hernández•190

  @xXOsielXxPosted 5 months ago

  @vvvasavii Yes, I mean your .frame. I see that you improved your code. Good job!

  0
• 

  Simone-cpu-debug•120

  @Simone-cpu-debugPosted 5 months ago

  next time when you build a card, try to not give a fixed width, or if you use it, give it a max-width too. but try to play with max-width as it's more responsive. and also, add some semantic html, like give the img a class of "card_image" and all the texts a class of "card_text", it will be easier and safer imo

  0

  ---

  

  Vasavi Dwivedi•80

  @vvvasaviiPosted 5 months ago

  @Simone-cpu-debug ohh, thanks, I'll keep that in mind for sure

  0