Learn HTML/CSS

Learn the fundamentals of web design with our HTML and CSS tutorials. Build landing pages, apps, websites, and more, with animations and other advanced effects.

Getting started with HTML/CSS

  • Design and Code Your First Website in 9 Easy-to-Understand Steps

    Design and Code Your First Website in 9 Easy-to-Understand Steps

    Nathan Umoh
  • HTML & CSS for Beginners (MEGA Free Course!)

    HTML & CSS for Beginners (MEGA Free Course!)

    Adi Purdila
  • All HTML/CSS tutorials:

    1. Cómo crear un efecto de escala de grises a color durante el desplazamiento (con CSS y JavaScript)

      Cómo crear un efecto de escala de grises a color durante el desplazamiento (con CSS y JavaScript)

      Tutorial Intermediate

      En este nuevo tutorial, empezaremos con algunas imágenes en escala de grises y aprenderemos a revelar suavemente sus variantes de color al desplazarnos. Para...

    2. Cómo crear un simple componente de interruptor de conmutación con el truco checkbox de CSS

      Cómo crear un simple componente de interruptor de conmutación con el truco checkbox de CSS

      Tutorial Beginner

      En este breve tutorial, aprenderemos a crear un componente de interruptor usando únicamente CSS y aprovechando la «técnica con el truco checkbox de CSS»....

    3. Las 20 mejores plantillas HTML5 para juegos  de 2017

      Las 20 mejores plantillas HTML5 para juegos  de 2017

      Tutorial Beginner

      En los últimos años, hemos visto que HTML5 ha sido utilizado para crear muchas grandes soluciones en línea. ¡También hemos visto que ha sido usado para crear...

    4. Consejo Rápido: Cómo crear un simple efecto de apilamiento al colocar el puntero (hover) con CSS

      Consejo Rápido: Cómo crear un simple efecto de apilamiento al colocar el puntero (hover) con CSS

      Tutorial Beginner

      Un patrón de diseño que se ve comúnmente es el de un contenedor de tarjetas con otras tarjetas debajo, lo que resulta en un efecto de apilamiento de...

    5. Cómo crear una presentación de diapositivas simple a pantalla completa con solo JavaScript

      Cómo crear una presentación de diapositivas simple a pantalla completa con solo JavaScript

      Tutorial Intermediate

      En este tutorial aprenderás a crear una presentación de diapositivas a pantalla completa con JavaScript simple. Para crearla, usaremos varios trucos de...

    6. Cómo evitar las solicitudes automáticas de favicon (consejo rápido para el rendimiento en la web)

      Cómo evitar las solicitudes automáticas de favicon (consejo rápido para el rendimiento en la web)

      Tutorial Beginner

      La mayoría de los navegadores web hacen una solicitud automática de favicon cada vez que cargan una página. No notarás esto si tu sitio tiene un favicon,...

    7. Cómo agregar una página o una entrada en WordPress

      Cómo agregar una página o una entrada en WordPress

      Tutorial Intermediate

      En este tutorial, te mostraré cómo agregar una entrada y cómo crear una página en WordPress. Te explicaré la diferencia entre las entradas y las páginas, y...

    8. Cómo agregar CSS personalizado a tu sitio de WordPress

      Cómo agregar CSS personalizado a tu sitio de WordPress

      Tutorial Beginner

      El ecosistema de WordPress es enorme, por lo que puede ser un desafío encontrar el tema perfecto que se ajuste a tu marca en todos los aspectos. Un buen...

    9. Consejos CSS para una mejor accesibilidad al color y al contraste

      Consejos CSS para una mejor accesibilidad al color y al contraste

      Tutorial Beginner

      La accesibilidad del color es una parte importante de la accesibilidad visual. Las personas con diversos tipos de discapacidades visuales, como daltonismo y...

    10. Cómo usar Pa11y: Realizando pruebas de la accesibilidad web mediante la línea de comandos

      Cómo usar Pa11y: Realizando pruebas de la accesibilidad web mediante la línea de comandos

      Tutorial Beginner

      El mundo está en un punto donde es imperativo diseñar para todos, y la web es una parte importante de ello. Como tal, los desarrolladores y diseñadores...

    11. Cómo analizar CSS utilizando Stylelint

      Cómo analizar CSS utilizando Stylelint

      Tutorial Beginner

      Un linter es, según Wikipedia: «Una herramienta que analiza el código fuente para señalar errores de programación, fallos, errores de estilo y...

    12. Cómo crear un formulario SVG responsivo hecho a mano

      Cómo crear un formulario SVG responsivo hecho a mano

      Tutorial Intermediate

      En tutoriales anteriores, te he enseñado cómo crear un formulario responsivo con flexbox además de cómo estilizar los elementos de un formulario. Hoy...