Blog-card-preview-challenge

Community feedback

• 

  Aakash Verma•9,520

  @skyv26

  Posted 7 months ago

  Hey @CalebM7!

  Great job on the structure and styling! Let's go over a couple of small improvements that can make your code cleaner and more maintainable. 😄

  1. DRY Principle - Repeated Code for Widths 🎯

  You’ve got width: 300px; repeated multiple times for .card, .article-pic, .course-description, and .instructor-pic. Instead of repeating this value, let’s store it in a variable or apply it globally for a cleaner approach. 📏

  Solution:

  :root {
    --card-width: 300px;
  }
  
  .card, .article-pic, .course-description, .instructor-pic {
    width: var(--card-width);
  }
  

  Now we’re following the DRY principle! If you want to change the width, it’s easier and cleaner. 🧹

  ---

  2. Card Height and Flexbox 🌱

  Currently, you’re setting min-height: 350px; directly on the .card, which may lead to issues with varying content. Let's leave the height of the card flexible and let the inner elements control it, making the design more responsive.

  Solution:

  .card {
    background-color: #fff;
    width: var(--card-width);
    border-radius: 20px;
    padding: 18px;
    border: 1px solid #000;
    box-shadow: 8px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Allows content to naturally adjust height */
  }
  

  This way, you allow the card to grow with the content, while keeping it neat! 😌

  ---

  3. Minor Touch – Margin for .course-title 🎨

  You’re setting margin-top: 15px; inside .course-title > p. To keep the styling consistent, you could place this directly on .course-title so it’s easier to manage the overall spacing.

  Solution:

  .course-title {
    margin-top: 15px;
  }
  
  .course-title > p {
    font-size: 22px;
    font-weight: 800;
    transition: all 0.3s ease-in-out;
  }
  

  That will streamline the margin control for the .course-title element, while keeping things tidy! ✨

  ---

  Summary 🎉

  1. Use DRY principle by creating reusable CSS variables for repeated values like width.
  2. Let content decide card height by removing fixed height and allowing the inner content to control the card's size.
  3. Minor refactor to make your code cleaner by managing margins globally instead of applying them to child elements.

  Keep up the awesome work! You're doing great! 🚀

  00

  Marked as helpful
• 

  Teodor Jenkler•4,040

  @TedJenkler

  Posted 7 months ago

  Hi @CalebM7,

  I read the previous feedback and wanted to add a few more points:

  Width Management: It’s more efficient to define the width in one place and make other items either 100% width or leave them natural. The less CSS you write, the better. While using variables is beneficial, over-engineering with too many variables isn’t necessary. Reserve variables for animations, colors, and, in some cases, consistent padding or margins if you're following a style guide.

  Min-Height vs. Height: Using min-height is generally advantageous, as long as you account for the smallest breakpoint (typically 320px). Avoid using height whenever possible; instead, use min-height to ensure elements have a minimum height when needed without being too rigid.

  Div Usage: It looks like you’re overusing <div> elements. This solution can be streamlined with Flexbox, using gap, margin, and fewer containers. My tip is to always aim for minimal <div> usage. In larger projects, excessive nesting can quickly make your code unmanageable. If you’d like an example, I can provide one, but I highly recommend watching a Flexbox tutorial or reading the documentation. Then, try redoing this project to solidify your understanding through trial and error.

  Happy New Year and good luck with your continued learning!

  00