Blog preview card with Sass

Community feedback

• 

  George Pap.•50

  @GeorgePapalazaridisPosted about 2 months ago

  Hi George,

  Amazing job on completing the Blog Preview Card Component Challenge! I can see the effort and thought you’ve put into this project, and it really shows. Here's some feedback to help you fine-tune your work even further:

  ---

  What I Loved:

  1. File Organization:

     • Your file structure is clean and well-organized. Using SCSS partials for globals and reusables demonstrates great foresight—it shows you're thinking about scalability and maintainability.

  2. Responsive Design:

     • The responsiveness works beautifully! The way the layout adjusts at different breakpoints feels smooth, and you’ve handled font scaling and padding changes thoughtfully.
     • I particularly like how you’ve maintained a consistent design from mobile to desktop without losing balance.

  3. Challenge Requirements:

     • You’ve implemented the challenge prerequisites, like using the Figtree font, box-shadow, and border-radius, in a way that feels seamless and enhances the design. Even though these were requirements, you executed them with care, making the card visually appealing.

  ---

  Suggestions for Improvement:

  1. Accessibility:

     • While the project is mostly accessible, the alt attributes on your images could be more descriptive. For example:

       <img
         class="header-container_img"
         src="./assets/images/illustration-article.svg"
         alt="Illustration about HTML and CSS foundations"
       />
       

       This small tweak ensures better support for screen readers and improves inclusivity.

  2. Semantic HTML:

     • The div wrapping the entire blog card (blog-preview-card) could be replaced with a more meaningful semantic tag like <article> or <main> to better reflect the content’s purpose. For example:

       <main class="blog-preview-card">
         ...
       </main>
       

       Using semantic tags helps screen readers and improves overall code readability.

     • Additionally, using a <button> or <span> instead of a div for the "Learning" section would enhance semantics. If this element is interactive, a <button> would be more appropriate.

  3. CSS Optimization:

     • Switching from fixed units like px to relative units like rem or em could improve scalability. For example:

       font-size: 1.25rem; /* instead of font-size: 20px */
       

       This will make your design even more adaptable to user settings.

  4. Footer Styling:

     • Currently, the footer-container is positioned absolutely at the bottom, which might cause layout issues if the content grows taller than expected. You could try using flexbox on the parent container to create a more flexible layout. Something like this:

       .blog-preview-card {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
         justify-content: space-between;
       }
       

  5. Mobile-first Approach:

     • While your breakpoints are solid, starting with mobile-first styles and adding larger breakpoints as you go would make your CSS more efficient and easier to manage.

  ---

  Final Thoughts:

  You’ve done an outstanding job! The design is clean, responsive, and visually appealing. The SCSS structure makes it easy to maintain and extend, and your work on responsiveness is commendable.

  With just a few tweaks—like enhancing accessibility, improving semantic structure, and refining footer behavior—you’ll have a truly polished solution. Keep up the great work, and I’m excited to see more of your projects in the future!

  Best regards,
  GP

  0