Day 16 - 17 of Coding

[Lomanu4]

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:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Live Demo:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

GitHub Repo:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

• 
  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

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

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);
}

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!

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.