I started learning HTML and CSS — everything seemed simple: tags, styles, fonts added... But suddenly everything breaks: the indents go, the button does not click, the header jumps out. Sounds familiar? 😅
Here 10 most common mistakesthat beginners make in layout — and tips on how to prevent them.
❌ Mistake 1: Indents without a system
Indents are set "by eye", with different margin and padding, in pixels. The result is chaos.
How to avoid: use box-sizing: border-box and the indentation grid (for example, a multiple of 8px).
❌ Error 2: Browser styles not reset
In each browser h1, ul, body look different.
How to avoid: connect normalize.css or use Tailwind CSS from scratch.
❌ Mistake 3: Deep nesting without structure
div in div in div — and no one understands where what is.
How to avoid: build a logical structure, use semantic tags and methodologies (for example, BEM).
❌ Mistake 4: Using <br> for indentation
Putting several <br> is not a layout.
How to avoid: manage indents via CSS: margin and padding.
❌ Mistake 5: All layout in px
The site does not scale on different screens.
How to avoid: use rem, %, clamp() — they are more flexible and adaptive.
❌ Mistake 6: Ignoring adaptability
Everything breaks on the phone, the font is too small, the blocks do not fit.
How to avoid: layout according to the principle mobile first, connect @media requests.
❌ Mistake 7: Not using DevTools
Beginners are afraid to open the browser inspector, but they shouldn't be.
How to avoid: use DevTools for analysis, debugging, and "live" editing of styles.
❌ Mistake 8: Scattered styles
CSS is everywhere: in style="", in <head>, in different files.
How to avoid: keep styles centralized, do not abuse !important.
❌ Mistake 9: Accessibility issues (a11y)
There is no alt for images, buttons are div.
How to avoid: follow the semantics, add alt attributes, use the correct tags.
❌ Mistake 10: Early transition to JavaScript
First, you need to be confident in HTML and CSS.
How to avoid: first study flex, grid, position, adaptability, then move on to JS.
🧠 And what's the result?
Error | How to avoid |
|---|---|
Random indents | Use the grid + |
Styles not reset | Enable reset/normalize |
Deep nesting | Semantics + BEM |
| Use CSS |
Only | Add |
No adaptability | Mobile first, |
DevTools is ignored | Use for debugging |
Scattered styles | Centralized CSS |
No availability |
|
Early JavaScript | First HTML+CSS |
Want to learn layout without headaches and confusion? in the "Kodik" application you go through the layout from scratch: from blocks and Flexbox to adaptability and components. No water — just practice 💻
Kodik website - https://itcodik.com/