Blog preview card

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted about 1 month ago

  Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

  • These <div> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.

          <div class="card-header">
            <div class="yellow-btn">
              <span>Learning</span>
            </div>
  

  • Overusing <div> tags, known as "divitis," leads to cluttered code, poor semantics, and reduced performance. Instead, use appropriate semantic elements (like <header>, <section>, etc.) to improve readability, accessibility, and SEO. Keep HTML clean and minimal to ensure maintainability, scalability, and better CSS structure.

  • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

  • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

  • Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like 1.5 for flexibility. Avoid using fixed units like px or %, as they don't adapt well to changes in font size or layout.

  I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  0