Puedes comenzar HTML y CSS con una computadora modesta, un editor de texto y un navegador. El objetivo inicial no es memorizar todas las etiquetas ni lograr un diseño perfecto: es construir una página pequeña, entender por qué funciona y mejorarla en ciclos cortos.
HTML describe el contenido y su estructura. CSS decide cómo se presenta. Se aprenden juntos, pero en ese orden: primero crea una estructura que tenga sentido incluso sin estilos; luego usa CSS para organizar el espacio, la tipografía, el color y la adaptación a pantallas distintas.
Qué son HTML y CSS
HTML significa HyperText Markup Language. Un documento HTML es un árbol de elementos: encabezados, párrafos, enlaces, imágenes, listas y regiones de la página. El estándar HTML de WHATWG muestra que las etiquetas deben anidarse sin superponerse y que cada elemento tiene un significado definido.
CSS significa Cascading Style Sheets. Selecciona elementos del documento y les aplica reglas visuales. No sustituye el significado del HTML: un texto grande creado con CSS no se convierte automáticamente en encabezado. La estructura correcta sigue siendo importante para navegación, mantenimiento y accesibilidad.
MDN resume la separación: HTML aporta estructura, CSS presentación y JavaScript comportamiento. Para tu primera página solo necesitas los dos primeros.
Qué necesitas para empezar
Prepara una carpeta llamada mi-primera-web con dos archivos:
mi-primera-web/
├── index.html
└── styles.css
Puedes usar el editor de texto que ya tengas o instalar uno orientado a código. Lo importante es guardar texto plano con extensiones correctas, no un documento enriquecido como .docx. También necesitas un navegador moderno para abrir index.html y sus herramientas de desarrollo para inspeccionar errores.
No necesitas un servidor, una base de datos, un framework, JavaScript ni una cuenta de pago. Trabajar localmente reduce distracciones y te deja ver la relación directa entre el archivo y el resultado.
Tu primer ejercicio con HTML
Copia este documento en index.html:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi primera página</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Hola, soy Ana</h1>
<p>Estoy aprendiendo desarrollo web desde Panamá.</p>
</header>
<main>
<section aria-labelledby="sobre-mi">
<h2 id="sobre-mi">Sobre mí</h2>
<p>Me interesa crear páginas claras y accesibles.</p>
</section>
<section aria-labelledby="proyectos">
<h2 id="proyectos">Proyectos</h2>
<ul>
<li>Una página personal</li>
<li>El menú de un negocio ficticio</li>
</ul>
</section>
</main>
<footer>
<p>Creado como ejercicio de HTML y CSS.</p>
</footer>
</body>
</html>
Ábrelo en el navegador. Antes de añadir estilos, comprueba:
- el título aparece en la pestaña;
- existe un solo
h1que describe la página; - cada sección tiene un
h2; - la lista tiene dos elementos;
- el idioma del documento es
es; - el enlace a
styles.cssno altera nada todavía porque el archivo está vacío.
Los encabezados no son solo tamaños. W3C WAI explica que comunican la organización del contenido y permiten navegar por la página. Usar h1, h2 y h3 por jerarquía, no por apariencia, es una buena práctica desde el primer proyecto.
Añade CSS y observa cada cambio
Guarda esto en styles.css:
:root {
color-scheme: light;
font-family: system-ui, sans-serif;
line-height: 1.6;
color: #172033;
background: #f4f7fb;
}
body {
max-width: 48rem;
margin: 0 auto;
padding: 1.25rem;
}
header,
section,
footer {
background: #ffffff;
border-radius: 0.75rem;
padding: 1.25rem;
margin-block: 1rem;
}
h1,
h2 {
line-height: 1.2;
}
h1 {
color: #5b21b6;
}
@media (min-width: 48rem) {
body {
padding: 2rem;
}
}
Actualiza el navegador. Luego cambia una sola regla cada vez:
- modifica el color de
h1; - aumenta o reduce el
max-width; - elimina temporalmente el fondo de
section; - cambia el espaciado y observa qué propiedad lo controla;
- abre las herramientas del navegador e inspecciona una sección.
Este método enseña causa y efecto. Si pegas veinte bloques sin probarlos, será difícil saber cuál resolvió o creó un problema.
Cómo depurar cuando “no funciona”
La mayoría de los primeros errores son pequeños. Revisa en este orden:
- ¿Guardaste el archivo? El navegador no ve cambios que siguen solo en el editor.
- ¿La ruta coincide?
styles.cssyStyles.csspueden tratarse como nombres distintos al publicar. - ¿Cerraste etiquetas y llaves? Busca elementos anidados incorrectamente y reglas CSS incompletas.
- ¿El selector apunta al elemento correcto?
.tarjetaselecciona una clase;tarjetabuscaría una etiqueta. - ¿Otra regla gana por cascada? Las herramientas de desarrollo muestran declaraciones tachadas y el archivo de origen.
- ¿El HTML tiene sentido sin CSS? Si el orden ya es confuso, no intentes corregirlo solo con posiciones visuales.
Mantén una versión que funciona antes de cada cambio grande. Si algo se rompe, vuelve al último paso y aplica la modificación en partes.
Ruta práctica de 30 días
Treinta días no garantizan dominio; son una estructura flexible para practicar con continuidad. Ajusta el ritmo a tu horario.
Días 1–7: estructura
- documentos,
headybody; - títulos, párrafos, listas y enlaces;
- imágenes con texto alternativo útil;
header,nav,main,sectionyfooter;- formularios básicos y etiquetas asociadas;
- un ejercicio breve cada día.
Resultado esperado: una página comprensible sin CSS.
Días 8–14: presentación
- selectores, clases y cascada;
- color, tipografía y unidades;
- modelo de caja: margen, borde y relleno;
- ancho máximo y flujo normal;
- estados de enlaces y foco visible;
- contraste y lectura.
Resultado esperado: la misma página con un sistema visual coherente.
Días 15–21: diseño adaptable
- enfoque mobile first;
- Flexbox para una dimensión;
- Grid para distribuciones de filas y columnas;
- imágenes que no desbordan;
- consultas de medios basadas en el contenido;
- pruebas con teclado y diferentes anchos.
Resultado esperado: la página funciona en ventana estrecha y amplia sin scroll horizontal.
Días 22–30: proyecto y revisión
- elige un problema pequeño;
- dibuja la jerarquía de contenido;
- implementa HTML antes del detalle visual;
- añade CSS por componentes;
- prueba enlaces, títulos, contraste y foco;
- pide a otra persona que use la página;
- corrige y documenta lo aprendido.
Resultado esperado: un proyecto terminado y explicable, no una carpeta de ejemplos inconexos.
Proyecto inicial: página personal adaptable
Construye una página personal sin publicar datos sensibles. Puede incluir una presentación, habilidades que estás practicando, dos proyectos ficticios y un medio de contacto controlado. Evita colocar dirección, documento de identidad o teléfono personal si publicarás la página.
Define criterios de aceptación:
- se entiende el propósito al leer el
h1; - funciona sin CSS y mantiene un orden lógico;
- tiene navegación por teclado visible;
- las imágenes informativas tienen
alt; - no hay texto ilegible por contraste;
- se adapta a 320 px de ancho sin desbordarse;
- todos los enlaces tienen un propósito claro;
- HTML y CSS están en archivos separados;
- puedes explicar cada regla que conservaste.
Toma una captura de la primera versión y otra de la final. Escribe tres decisiones y un problema resuelto. Esa explicación muestra mejor tu aprendizaje que afirmar que “dominas HTML y CSS”.
Errores frecuentes al comenzar
Aprender etiquetas sin construir
La memoria mejora cuando una etiqueta resuelve una necesidad real. Aprende las necesarias para el proyecto y consulta la documentación cuando surja otra.
Diseñar todo con div
Un div es útil cuando no existe un elemento más significativo, pero no reemplaza automáticamente nav, main, button, ul o encabezados. Primero expresa el significado.
Buscar perfección visual demasiado pronto
Comienza con jerarquía, legibilidad y espaciado. Animaciones, sombras y efectos pueden esperar. Un diseño sencillo y consistente es una mejor base.
Copiar sin verificar
Es válido estudiar ejemplos, pero cambia una parte, predice el resultado y compruébalo. Si no puedes explicar el código, todavía no forma parte de tu conocimiento operativo.
Ignorar accesibilidad hasta el final
La accesibilidad no es una capa decorativa. Idioma, estructura, etiquetas, texto alternativo, teclado y contraste se deciden desde el inicio.
Cómo practicar y construir un portafolio desde Panamá
No necesitas afirmar experiencia laboral antes de tenerla. Un portafolio inicial puede reunir tres proyectos ficticios claramente rotulados:
- página informativa para una actividad comunitaria;
- menú adaptable para un café imaginario;
- ficha de un servicio con formulario sin backend.
Para cada uno, documenta objetivo, audiencia, boceto, decisiones, pruebas y mejoras. Si luego quieres explorar servicios profesionales, revisa los primeros pasos para trabajar como desarrollador web freelance en Panamá, pero evita ofrecer trabajo que todavía no puedas entregar con calidad.
¿Autodidacta o capacitación?
Aprender por tu cuenta funciona si puedes organizar el contenido, practicar con regularidad y resolver bloqueos mediante documentación. El acompañamiento puede ser útil si necesitas secuencia, retroalimentación sobre tu código, fechas de entrega o un proyecto guiado.
Antes de elegir una opción, pregunta:
- ¿el temario separa HTML, CSS y JavaScript con claridad?;
- ¿incluye ejercicios y un proyecto revisado?;
- ¿explica accesibilidad y diseño adaptable?;
- ¿quién revisa el código y con qué criterios?;
- ¿qué conocimientos previos exige?;
- ¿qué horario, modalidad, costo y política están vigentes?;
La guía sobre cómo elegir un curso de HTML y CSS en Panamá desarrolla esa comparación. Verifica cualquier oferta directamente; esta página no promete que Crezendo tenga un taller, cupo o calendario activo.
Qué aprender después
Cuando puedas construir y explicar una página adaptable:
- aprende Git para registrar cambios y trabajar con versiones;
- estudia JavaScript para comportamiento e interacción;
- practica formularios, solicitudes HTTP y manejo de errores;
- profundiza en accesibilidad y rendimiento;
- evalúa un framework solo cuando entiendas el problema que resuelve.
TypeScript viene después de JavaScript, no antes de tu primer HTML. Cuando tengas esa base, consulta TypeScript para principiantes.
Tu siguiente paso
Hoy puedes crear la carpeta, escribir el HTML, enlazar el CSS y completar una mejora visible. Guarda una nota con lo que entendiste y la próxima pregunta. Esa rutina produce evidencia real de progreso.
Si prefieres orientación para estructurar tu ruta o quieres consultar si Crezendo tiene una opción de capacitación adecuada, contacta a Crezendo con tu nivel actual, objetivo y disponibilidad. La conversación sirve para confirmar alternativas vigentes; no reserva automáticamente un cupo ni garantiza un resultado laboral.
