FRONT-END DEVELOPMENT

Desarrollo Web
HTML, CSS & JS

Domina la semántica, el diseño en cascada y la lógica interactiva para crear páginas corporativas responsivas.

NIVEL 1: ESTRUCTURA Y SEMÁNTICA (HTML5)

Módulo 1: Arquitectura y Esqueleto

Configurar el entorno y construir la estructura ósea, entendiendo la semántica para navegadores.

  • Archivo maestro index.html y anatomía de etiquetas.
  • Estructura obligatoria: <!DOCTYPE>, <head>, <body>.
  • Etiquetas semánticas: <header>, <main>, <footer>.
Teoría Práctica Eval

Módulo 2: Jerarquía de Contenido

Insertar texto, hipervínculos y multimedia respetando la accesibilidad y la jerarquía SEO.

  • Titulares SEO <h1> a <h6> y Párrafos.
  • Listas y Enlaces: <ul>, <a href="">.
  • Multimedia: <img src="" alt=""> y optimización.
  • Contenedores genéricos: <section> y <div>.
Teoría Práctica Eval
NIVEL 2: DISEÑO ESTÉTICO Y RETÍCULAS (CSS3)

Módulo 3: La Cascada de Estilos

Separar la estructura del diseño estético, aprendiendo a pintar elementos de forma global.

  • Vinculación externa .css y anatomía de reglas.
  • Selectores: Etiqueta, Clase .class e ID #id.
  • Regla de Cascada y Especificidad CSS.
  • Propiedades visuales: Color, tipografía y fondos.
Teoría Práctica Eval

Módulo 4: El Modelo de Caja

Posicionar elementos horizontalmente, dominando los espacios interiores y exteriores (Layout).

  • Box Model: width, height, border.
  • Espaciado: margin exterior vs padding interior.
  • La propiedad display (block, inline, none).
  • Flexbox básico: justify-content y align-items.
Teoría Práctica Eval
NIVEL 3: INTERACTIVIDAD Y LANZAMIENTO (JS)

Módulo 5: Dinamismo y Lógica

Introducir interactividad. Cómo JS lee y manipula el HTML ante las acciones del usuario.

  • Microinteracciones CSS: :hover y transition.
  • El DOM y JS: document.querySelector.
  • Eventos: addEventListener('click').
  • Lógica de UI States: classList.toggle.
Teoría Práctica Eval

Módulo 6: Diseño Responsivo

Asegurar que la web se adapte inteligentemente a celulares y pulir para el lanzamiento final.

  • Etiqueta vital: <meta name="viewport">.
  • Media Queries: @media (max-width: 768px).
  • Metodología Mobile First vs Desktop First.
  • Auditoría QA y ruteo absoluto vs relativo.
Teoría Práctica Eval