Curso de Desarrollo Web con HTML5, CSS3 y Bootstrap

Bienvenido al Curso completo de HTML5, CSS3 y Bootstrap 5. Este curso está diseñado para personas que nunca han creado una página web y quieren aprender desde cero hasta ser capaces de maquetar sitios web modernos, accesibles y adaptables a cualquier dispositivo.

¿Qué vas a aprender?

Al finalizar este curso serás capaz de:

  • Comprender cómo funciona la web: navegadores, servidores, HTTP y URLs
  • Escribir documentos HTML5 correctos, semánticos y accesibles
  • Trabajar con textos, enlaces, imágenes, audio, vídeo, tablas y formularios
  • Dar estilo a tus páginas con CSS3: selectores, cascada, colores, tipografías y unidades
  • Dominar el modelo de cajas y el posicionamiento
  • Maquetar diseños complejos con Flexbox y CSS Grid
  • Crear webs responsive con mobile first, media queries y container queries
  • Animar interfaces con transiciones, transformaciones y animaciones
  • Aprovechar el CSS moderno: variables, anidamiento, :has(), clamp(), capas de cascada
  • Desarrollar interfaces rápidamente con Bootstrap 5.3: rejilla, utilidades y componentes
  • Personalizar Bootstrap con variables CSS, Sass y modo oscuro
  • Construir y publicar un proyecto web completo

Estructura del curso

El curso se divide en 19 módulos organizados de forma progresiva:

Bloque 1: HTML5 (Módulos 00-06)

Módulo Tema Descripción
00 Introducción al desarrollo web Cómo funciona la web, cliente-servidor, HTTP, papel de HTML, CSS y JavaScript
01 Entorno de trabajo VS Code, extensiones, Live Server, DevTools del navegador, organización de proyectos
02 Fundamentos de HTML Estructura del documento, etiquetas, atributos, textos, listas y enlaces
03 Imágenes y multimedia img, picture, figure, formatos, audio, vídeo, iframe y SVG
04 Tablas Estructura, encabezados, combinación de celdas, accesibilidad de tablas
05 Formularios Controles, tipos de input HTML5, validación nativa, accesibilidad
06 HTML5 semántico header, nav, main, article, section, aside, footer, accesibilidad, ARIA y SEO

Bloque 2: CSS3 (Módulos 07-14)

Módulo Tema Descripción
07 Fundamentos de CSS Sintaxis, formas de incluir CSS, selectores, cascada, especificidad y herencia
08 Texto, color y unidades Tipografía, Google Fonts, colores, fondos, degradados, unidades y variables CSS
09 Modelo de cajas y posicionamiento box-sizing, margin, padding, border, display, position, overflow y z-index
10 Flexbox Contenedor e ítems flex, ejes, alineación, crecimiento y patrones de maquetación
11 CSS Grid Rejillas, fr, repeat, minmax, áreas con nombre, subgrid y layouts completos
12 Diseño responsive Viewport, mobile first, media queries, container queries, imágenes y tipografía fluida
13 Transiciones y animaciones transition, transform, @keyframes, animation y accesibilidad del movimiento
14 CSS moderno Anidamiento, :has(), :is(), :where(), @layer, clamp(), propiedades lógicas, color-mix()

Bloque 3: Bootstrap 5 (Módulos 15-17)

Módulo Tema Descripción
15 Bootstrap: fundamentos Instalación (CDN y npm), contenedores, sistema de rejilla y utilidades
16 Bootstrap: componentes Navbar, cards, botones, alertas, modales, carrusel, acordeón, formularios
17 Bootstrap: personalización Variables CSS, Sass, modo oscuro, Bootstrap Icons y buenas prácticas

Bloque 4: Proyecto (Módulo 18)

Módulo Tema Descripción
18 Proyecto final Sitio web completo con HTML5, CSS3 y Bootstrap, publicado en GitHub Pages

Requisitos

  • Ningún conocimiento previo de programación
  • Un ordenador con Windows, macOS o Linux
  • Un navegador moderno (Chrome, Firefox o Edge)
  • Visual Studio Code (gratuito)

Convenciones utilizadas

A lo largo del curso encontrarás estos indicadores:

📘 Concepto: Explicación teórica de un concepto importante.

💻 Ejemplo: Código de ejemplo que puedes copiar y ejecutar.

✏️ Ejercicio: Práctica para que resuelvas por tu cuenta.

⚠️ Importante: Información crucial que debes recordar.

💡 Consejo: Trucos y buenas prácticas profesionales.

Table of contents