Blog Card preview

Community feedback

• 

  Aakash Verma•9,520

  @skyv26

  Posted 7 months ago

  Hey @patilVikrant,

  😊 Great job working on the blog preview card! Here's a quick review and some suggestions to make your code cleaner and more modular. 💡

  1. External CSS: Currently, you have inline CSS inside the `` section. To make your project more scalable and easier to maintain, I recommend moving your CSS to an external stylesheet. This approach helps in reusing styles across multiple pages and keeps your HTML file cleaner.

     • Create a new file called styles.css.

     • Move all the CSS from your `` section, link the CSS file like this:

       <link rel="stylesheet" href="./styles.css">
       

  2. Semantic HTML: To make your HTML more accessible and semantically meaningful, try using HTML5 semantic tags such as <article>, <section>, and <header>.

     • Replace <div id="card"> with <article class="card">. The <article> tag is perfect for content that can stand alone, like blog posts.
     • Similarly, use <section> for grouping the card's content inside.
     • Use <header> for the header content like the title or the author's name.

     Here's an example of how you can structure it:

     <article class="card">
       <header>
         <div id="card-img-container">
           <img src="./assets/images/illustration-article.svg" alt="Blog Illustration">
         </div>
       </header>
       <section id="card-text">
         <h3>Learning</h3>
         <p id="published-date">Published 21 Dec 2023</p>
         <h2>HTML & CSS foundations</h2>
         <p id="info-text">These languages are the backbone of every website, defining structure, content, and presentation.</p>
         <p id="author-details"><img src="./assets/images/image-avatar.webp" alt="Author's Avatar">Greg Hooper</p>
       </section>
     </article>
     

  3. DRY (Don't Repeat Yourself): You have a lot of repeated styles for the #card element inside the media queries. You can simplify it by creating a class for the card and using percentage widths instead. Here’s how:

     • Create a .card class in your CSS and remove the #card styles inside each media query.
     • Instead of adjusting the width in each query, just use a fluid width (vw), and it will automatically adjust based on the viewport size.

     For example:

     .card {
       background-color: #fff;
       padding: 1rem;
       border-radius: 1rem;
       border: 1px solid hsl(0, 0%, 7%);
       box-shadow: 7px 7px 0 0 hsl(0, 0%, 7%);
       transition: all ease-in-out 0.3s;
     }
     
     .card:hover {
       box-shadow: 14px 14px 0 0 hsl(0, 0%, 7%);
     }
     
     @media (max-width: 1245px) {
       .card {
         width: 30vw;
       }
     }
     
     @media (max-width: 1035px) {
       .card {
         width: 35vw;
       }
     }
     

  4. HTML Structure: Also, it’s a good practice to include alt text for images to improve accessibility. You already did that for the avatar image, but make sure you do it for the other image as well. 👍

  These small adjustments will make your code easier to maintain, more accessible, and more modular. Keep it up, and feel free to reach out if you need more help! 🚀

  11

  Marked as helpful