DEV Community

Edward Chia
Edward Chia

Posted on • Edited on

Day 16 - 17 of Coding: Designing stats preview card

For the past 2 days, I dove deeper into CSS fundamentals while working on another HTML & CSS practice project.

It wasn’t just about writing code — I focused on applying best practices from design systems and debugging mistakes that forced me to rethink my approach.

🛠️ What I Coded:

Image description

Image description

Live Demo: Link
GitHub Repo: Link

*Design file from FrontendMentor. Design only, no sample code provided.

  • Initially tried applying a background image on an <img> element — which doesn’t work! Realized that background images should target <div>s or elements capable of rendering background layers.

  • Practiced defining global CSS variables inside :root for things like font sizes, spacing, and color tokens. It may be overkill for a small project like this one, but it’s solid prep for larger, component-driven layouts.

  • Used media queries and modular spacing to ensure the layout was responsive and adaptable.

🎓 What I Studied:

To improve my CSS design foundation, I watched The Easy Way to Design Top Tier Websites by Sajid and summarized key takeaways:

✅ Key Concepts: (I wasn't able to apply all of them, but I will try to keep these in mind with future designs for improvement.):

  1. Functionality > Layout:
    Start with the purpose of the page, not the number of sections or buttons. Focus on core functionality.

  2. Design Minimalism:
    Less is more. Fewer elements make a website more scannable — favor Z-pattern layouts.

  3. Spacing Strategy:
    Start with generous spacing and adjust down. Most beginners (like me) underestimate how much space UI needs.

  4. Design System Building Blocks:
    Set up consistent type scales, color schemes, spacing units, and basic components:

:root {
  /* Spacing */
  --margin-xs: 0.5rem;
  --margin-m: 1rem;
  --margin-l: 1.5rem;

  /* Colors */
  --gray10: hsl(0, 0%, 10%);
  --gray90: hsl(0, 0%, 90%);

  /* Typography */
  --ff: 'Inter', sans-serif;
  --h1: bold 4rem var(--ff);
  --p: 1rem var(--ff);
  --small: 0.75rem var(--ff);
}

:root {
  /* Spacing */
  --margin-xs: 0.5rem;
  --margin-m: 1rem;
  --margin-l: 1.5rem;

  /* Colors */
  --gray10: hsl(0, 0%, 10%);
  --gray90: hsl(0, 0%, 90%);

  /* Typography */
  --ff: 'Inter', sans-serif;
  --h1: bold 4rem var(--ff);
  --p: 1rem var(--ff);
  --small: 0.75rem var(--ff);
}
Enter fullscreen mode Exit fullscreen mode

  1. Hierarchy Through Contrast:
    Use color, size, and shadow intentionally to guide attention. Not everything needs to "pop" — instead, de-emphasize the less important.

  2. Avoid Centered Text:
    Left-justified text improves readability.

  3. Use Cards for Depth:
    Soft box-shadows and spacing can give visual lift to otherwise bland sections like form elements or lists.

💡 Reflections:

CSS is definitely a rabbit hole, but each little iteration helps. The real win was learning how to design smarter, not harder — and code with scalability in mind.

On to the next design!

Top comments (0)