Empecé a aprender HTML y CSS, todo parecía sencillo: etiquetas, estilos, fuentes añadidas... Pero de repente todo se estropea: las sangrías se mueven, el botón no se pulsa, el encabezado salta hacia fuera. ¿Te suena? 😅
Aquí Los 10 errores más comunesque cometen los principiantes en el diseño, y consejos sobre cómo evitarlos.
❌ Error 1: Sangría sin sistema
Las sangrías se colocan "a ojo", con diferentes margin y padding, en píxeles. El resultado es el caos.
Cómo evitar: utiliza box-sizing: border-box y una cuadrícula de sangría (por ejemplo, múltiplos de 8px).
❌ Error 2: No se han restablecido los estilos del navegador
En cada navegador h1, ul, body se ven diferentes.
Cómo evitar: conecta normalize.css o usa Tailwind CSS desde cero.
❌ Error 3: Anidamiento profundo sin estructura
div en div en div y nadie entiende dónde está cada cosa.
Cómo evitar: construye una estructura lógica, usa etiquetas y metodologías semánticas (por ejemplo, BEM).
❌ Error 4: Uso de <br> para sangrías
Poner varios <br> no es un diseño.
Cómo evitar: controla las sangrías a través de CSS: margin y padding.
❌ Error 5: Todo el diseño en px
El sitio no se escala en diferentes pantallas.
Cómo evitar: utilice rem, %, clamp() — son más flexibles y adaptables.
❌ Error 6: Ignorar la adaptabilidad
Todo se rompe en el teléfono, la fuente es demasiado pequeña, los bloques no caben.
Cómo evitar: diseñar según el principio mobile first, conecte las solicitudes @media.
❌ Error 7: No se utiliza DevTools
Los principiantes tienen miedo de abrir el inspector del navegador, pero no deberían.
Cómo evitar: utiliza DevTools para analizar, depurar y editar estilos en vivo.
❌ Error 8: Estilos dispersos
CSS en todas partes: en style="", en <head>, en diferentes archivos.
Cómo evitar: mantenga los estilos centralizados, no abuse de !important.
❌ Error 9: Problemas de accesibilidad (a11y)
No hay alt en las imágenes, los botones son div.
Cómo evitar: sigue la semántica, añade atributos alt, usa las etiquetas correctas.
❌ Error 10: Cambio temprano a JavaScript
Primero necesitas dominar HTML y CSS.
Cómo evitar: primero estudia flex, grid, position, adaptabilidad, luego pasa a JS.
🧠 ¿Y qué pasa al final?
Error | Cómo evitar |
|---|---|
Sangría aleatoria | Utiliza la cuadrícula + |
Los estilos no se han restablecido | Conectar reset/normalize |
Anidamiento profundo | Semántica + BEM |
| Utiliza CSS |
Solo | Añade |
No hay adaptabilidad | Mobile first, |
DevTools ignorado | Utilizar para depurar |
Estilos dispersos | CSS centralizado |
No disponible |
|
JavaScript temprano | Primero HTML+CSS |
¿Quieres aprender a diseñar sin dolores de cabeza ni confusiones? la aplicación «Kodik» pasas por el diseño desde cero: desde bloques y Flexbox hasta adaptabilidad y componentes. Sin agua, solo práctica 💻
Sitio web de Kodika - https://itcodik.com/