HTML y CSS son los dos lenguajes que forman la base visual de cualquier página web que ves en internet.
¿Sabías que más del 70% de los empleos de tecnología en México piden conocimientos de HTML o CSS? No importa si quieres ser diseñador, desarrollador o emprendedor digital. Estas dos herramientas son tu punto de partida.
El sitio que visitas todos los días ya usa HTML y CSS
Cuando entras a Mercado Libre para buscar un celular, estás viendo HTML y CSS en acción. Cada título, cada botón, cada imagen tiene un código detrás. Ese código es exactamente lo que vas a aprender aquí.
Piensa en HTML como la estructura de una casa. Es la armadura, las paredes y las ventanas. CSS es la decoración: los colores de la pintura, los muebles y las cortinas.
Sin HTML, no hay contenido. Sin CSS, el contenido se ve aburrido y desorganizado. Juntos, crean experiencias visuales que millones de personas usan cada día.
La historia de Sofía y su primer trabajo en línea
Sofía tenía 24 años y trabajaba como cajera en una tienda de Liverpool en la Ciudad de México. Ganaba $9,500 al mes y quería crecer, pero no sabía por dónde empezar.
Una amiga le dijo que aprender HTML y CSS podría abrirle puertas. Sofía no creía que fuera para ella. Pensaba que programar era solo para gente con carrera de ingeniería.
Decidió intentarlo de todas formas. En tres meses, aprendió a hacer páginas web básicas. Consiguió su primer proyecto freelance: una página para una tienda de ropa en Monterrey. Le pagaron $3,500 por ese trabajo.
Hoy Sofía trabaja de forma remota como desarrolladora junior para una agencia digital. Gana $18,000 al mes y sigue aprendiendo. Todo empezó exactamente donde tú estás ahora.
¿Qué es HTML exactamente?
HTML significa HyperText Markup Language, o Lenguaje de Marcado de Hipertexto. No te preocupes por el nombre técnico. En palabras simples, HTML es el lenguaje que le dice al navegador qué mostrar en pantalla.
Cada elemento de HTML se escribe con etiquetas. Una etiqueta es una instrucción dentro de corchetes angulares, como esta: <p>. La mayoría de las etiquetas tienen una de apertura y una de cierre. Por ejemplo:
<p>Hola, soy una empresa mexicana.</p>
Esa instrucción le dice al navegador: "muestra este texto como un párrafo". Así de directo es HTML. Le das instrucciones, y el navegador las sigue.
Con HTML puedes mostrar textos, imágenes, videos, formularios, botones y mucho más. Es el vocabulario básico de la web.
¿Qué es CSS exactamente?
CSS significa Cascading Style Sheets, u Hojas de Estilo en Cascada. Si HTML es el esqueleto, CSS es la piel y la ropa.
Con CSS decides cómo se ve todo. Puedes cambiar el color de un texto, el tamaño de una imagen o la posición de un botón. También puedes hacer que tu página se vea diferente en una computadora que en un celular.
CSS funciona con reglas. Una regla le dice al navegador: "este elemento, con estas propiedades". Por ejemplo:
p {
color: green;
font-size: 16px;
}
Esa instrucción dice: "todos los párrafos deben tener texto verde y un tamaño de 16 píxeles". Simple y poderoso.
La historia de don Ramón y su negocio de carnitas
Don Ramón lleva 15 años vendiendo carnitas en Tlaquepaque, Jalisco. Siempre tuvo clientes de la colonia, pero quería llegar a más gente. Su hijo Andrés, de 19 años, le propuso crear una página web.
Andrés había visto un curso de HTML y CSS en línea. Sin experiencia previa, aprendió lo básico en un mes. Creó una página sencilla con el menú, los precios, el horario y una foto del negocio.
La página le costó cero pesos. Solo tiempo y ganas de aprender. En las primeras semanas, varios clientes nuevos llegaron diciendo que los habían encontrado en internet.
Hoy don Ramón recibe pedidos por WhatsApp de personas que vieron su página. Andrés ya está haciendo páginas para otros negocios del mercado. Una habilidad básica puede cambiar una historia entera.
¿Por qué aprender HTML y CSS en México vale tanto?
El mercado digital en México crece cada año. Empresas como FEMSA, Bimbo y cientos de negocios medianos buscan personas que sepan crear y mantener páginas web. No siempre necesitan expertos con años de experiencia.
Un desarrollador web junior en México puede ganar entre $12,000 y $22,000 al mes. Un freelance con proyectos propios puede ganar más, dependiendo de cuántos clientes tenga. Las habilidades digitales tienen una demanda altísima y la competencia es menor que en otros países.
Además, puedes trabajar desde cualquier lugar. Una computadora y conexión a internet son suficientes. Muchas personas en México combinan su trabajo principal con proyectos digitales para incrementar sus ingresos.
Qué vas a aprender en este curso
Este curso te lleva de cero a tu primera página publicada en internet. No necesitas saber programación. No necesitas una carrera universitaria. Solo necesitas ganas de aprender y un poco de tiempo cada semana.
Lección a lección vas a aprender a estructurar contenido con HTML, a darle estilo con CSS, a organizar imágenes y texto, y a hacer páginas que se vean bien en celular y en computadora.
Al final del curso, tendrás una página web real publicada en internet. Podrás mostrarla en tu portafolio, a un cliente potencial o a un empleador. Ese resultado concreto es lo que importa.
Lo que necesitas para empezar
Solo necesitas tres cosas: una computadora con internet, un editor de texto gratuito y muchas ganas. No se necesita software de pago. No se necesita experiencia previa.
El editor más popular para principiantes se llama Visual Studio Code. Es gratuito y fácil de instalar. En la próxima lección te explicamos cómo configurarlo en minutos.
Los navegadores más comunes, como Chrome o Firefox, también son tu herramienta de trabajo. Son gratuitos y ya los tienes instalados.
Antes de continuar, recuerda esto
Aprender HTML y CSS no es difícil. Es un proceso. Cada lección te da una pieza nueva del rompecabezas.
No te compares con personas que llevan años programando. Compárate con quien eras ayer. Si hoy aprendiste algo que ayer no sabías, ya estás avanzando.
Sofía empezó desde cero. Andrés también. Tú puedes hacer lo mismo. La única diferencia entre quien aprende y quien no aprende es dar el primer paso.
Ya lo diste. Sigamos.