Desarrollo Web Frontend: HTML, CSS, Grid, Flexbox y BEM 2026
Crea sitios web modernos con HTML y CSS: Domina CSS Flexbox, CSS Grid y BEM. Crea diseños responsivos y optimiza con BEM
Lo que serás capaz de hacer
Aprende a maquetar sitios web modernos con estándares profesionales. No solo escribas código, ¡escribe arquitectura escalable! ¿Quieres iniciarte en el mundo del Desarrollo Web pero te sientes abrumado por tanta información? ¿Sabes algo de HTML y CSS pero tus estilos se vuelven un desastre cuando el proyecto crece? Este no es otro curso básico de HTML. Este es un programa completo de formación Frontend diseñado para llevarte desde la primera etiqueta hasta la creación de sitios web complejos, responsivos y, lo más importante, bien estructurados . Aprenderás no solo la sintaxis, sino la lógica detrás del diseño web moderno. Nos enfocaremos en las herramientas que usan los profesionales hoy en día: Flexbox para alineaciones unidimensionales, CSS Grid para maquetaciones complejas en 2D, y la metodología BEM (Block Element Modifier) para mantener tu código CSS limpio, reutilizable y escalable. ¿Qué hace único a este curso? Muchos cursos te enseñan a "que las cosas se vean bien". Aquí te enseñamos a que las cosas se vean bien y que el código por detrás sea impecable , preparándote para trabajar en equipo o dar el salto a frameworks como React, Vue o Tailwind CSS en el futuro. Contenido destacado: HTML5 Semántico: Estructura tus webs para que sean accesibles y amigables con el SEO (Google). CSS3 a Fondo: Modelo de caja, especificidad, cascada y selectores avanzados. Maquetación Moderna: Olvida los floats. Domina Flexbox y CSS Grid para crear cualquier diseño que imagines. Responsive Design: Aprende a usar Media Queries para que tus sitios se adapten a móviles, tablets y monitores grandes. Metodología BEM: Aprende el estándar de la industria para nombrar clases. Nunca más tendrás conflictos de estilos en tus proyectos. Proyectos Prácticos: Pondremos todo en práctica creando sitios web reales desde cero. Este curso es para ti si: Eres principiante y quieres aprender desarrollo web de la forma correcta. Ya conoces algo de CSS pero luchas para centrar elementos o crear columnas. Quieres preparar una base sólida antes de aprender JavaScript o Frameworks. Inscríbete ahora y construye los cimientos sólidos que tu carrera como desarrollador necesita. ¡Nos vemos en el código!
- Lenguaje HTML y CSS
- Estructurarás sitios web robustos y optimizados para SEO utilizando las etiquetas semánticas modernas de HTML5.
- Dominarás los pilares de CSS3 (el modelo de caja, la cascada y la especificidad) para dejar de "pelear" con tus estilos y entender por qué las cosas se ven como
- Construirás cualquier layout moderno que imagines, combinando la potencia bidimensional de CSS Grid con la flexibilidad unidimensional de Flexbox.
- Crearás experiencias 100% Responsivas (Responsive Design) que se adaptan de forma fluida a dispositivos móviles, tablets y pantallas de escritorio.
- Escribirás CSS limpio, escalable y mantenible utilizando la Metodología BEM, el estándar de la industria para trabajar en proyectos grandes y en equipo.
Temario
UNIDAD 1 - Introducción · 3 leccionesUNIDAD 1 - Introducción
UNIDAD 1 - Introducción
- Presentación del curso
- Como tomar el curso
- Sobre preguntas y respuestas
UNIDAD 2 - Primeros pasos en la Web · 7 leccionesUNIDAD 2 - Primeros pasos en la Web
UNIDAD 2 - Primeros pasos en la Web
- Introducción
- ¿Qué es la Web?
- ¿Cómo Funciona la Web?
- Instalación de Visual Studio Code
- Crea tu primer sitio web
- Las tecnologías principal de la Web
- Resumen
UNIDAD 3 - Introducción a HTML · 11 leccionesUNIDAD 3 - Introducción a HTML
UNIDAD 3 - Introducción a HTML
- Introducción
- De que se encarga HTML
- ¿Qué son las etiquetas?
- Encabesados y párrafos
- Imáges y elemenos unicos
- ¿Qué es un atributo?
- Etiquetas de texto
- Vínculos
- Etiquetas de Listas
- Estructura base de HTML
- Resumen
UNIDAD 4 - Estructura de una página · 13 leccionesUNIDAD 4 - Estructura de una página
UNIDAD 4 - Estructura de una página
- Introducción
- Semántica de HTML
- Contenedor de elementos
- Etiquetas de citas
- Formularios
- Tipos de input
- Validación de formulario
- Etiquetas de selección y lista de datos
- Etiquetas de detalles
- Metadatos
- Metadatos para Open Graph
- Favicon
- Resumen
UNIDAD 5 - Etiquetas multimedia · 6 leccionesUNIDAD 5 - Etiquetas multimedia
UNIDAD 5 - Etiquetas multimedia
- Introducción
- Imagenes
- Etiquetas de videos
- Etiquetas de audio
- Videos y páginas extenas
- Resumen
UNIDAD 6 - Introducción a CSS · 17 leccionesUNIDAD 6 - Introducción a CSS
UNIDAD 6 - Introducción a CSS
- Introducción
- Primeros estilos
- Selectores de elementos
- Estilos de texto
- Herencia en CSS
- Colores
- Pseudo-clase
- Pseudoelementos
- Selectores combinados
- Cascada
- Especifidad
- Unidadesd de medida
- Tipos de elementos
- Modelo de caja-P1
- Modelo de caja-P2
- Finalizando el proyecto
- Resumen
UNIDAD 7 - Posicionamiento de elementos - Clon de Google · 11 leccionesUNIDAD 7 - Posicionamiento de elementos - Clon de Google
UNIDAD 7 - Posicionamiento de elementos - Clon de Google
- Introducción
- Variables en CSS
- Flotación CSS
- Desbordamiento
- Flujo de escritura
- Posicionamiento
- Orden de apilamiento (z-index)
- Terminando la estructura de Google-clone
- Estilos de footer
- Estilos de contenido principal
- Resumen
UNIDAD 8 - CSS Flexbox - Clon de Yahoo! · 15 leccionesUNIDAD 8 - CSS Flexbox - Clon de Yahoo!
UNIDAD 8 - CSS Flexbox - Clon de Yahoo!
- Introducción
- ¿Qué es Flexbox?
- Contenedor flexible
- Flujos combinados
- Alineamiento del contenido
- Alineamiento de los elementos
- Control de espacio de los elementos
- Ordenes y márgenes
- Recursos sobre flexbox
- Estructura Yahoo!
- Encabezado Yahoo!
- Estilos main
- Sección de tendencias
- Pie de página de Yahoo
- Resumen
UNIDAD 9 - Portafolio Perosonal - Proyecto completo desde cero con Flexbox · 18 leccionesUNIDAD 9 - Portafolio Perosonal - Proyecto completo desde cero con Flexbox
UNIDAD 9 - Portafolio Perosonal - Proyecto completo desde cero con Flexbox
- Presentación del proyecto
- Primeros pasos con el Proyecto
- Configuraciones iniciales
- Menu de navegación
- Estructura de home
- Estilos de Home
- Estilos de redes sociales
- Estrucutura de Acerca de
- Animación del imagen
- Estilos de Acerca de y Habilidades
- Estructura de servicios
- Estilos de servicios
- Estructura de portafolio
- Estilos de portafolio
- Estructura contacto
- Estilos contacto
- Pie de página
- Resumen
UNIDAD 10 - CSS Grid · 12 leccionesUNIDAD 10 - CSS Grid
UNIDAD 10 - CSS Grid
- Introducción
- ¿Qué es CSS Grid?
- Filas y Columnas
- Mas sobre Filas y Columnas
- Conbinar filas y columnas
- Flujos automáticos
- Área de cuadricula
- Alinear cuadricula
- Alinear elementos dentro de cuadricula
- Uso de minmax()
- Materiales sobre CSS Grid
- Resumen
UNIDAD 11 - CAFETERIA - Proyecto completo desde cero con Grid · 17 leccionesUNIDAD 11 - CAFETERIA - Proyecto completo desde cero con Grid
UNIDAD 11 - CAFETERIA - Proyecto completo desde cero con Grid
- Presentación del proyecto
- Cofiguación inicial
- Utilidades
- Estructura de encabezado
- Estilos de encabezado
- Estilos de bienvenida
- Sección de productos más vendidos
- Sección de nuevos productos
- Estructura de sección de menú
- Estilos de sección de menú
- Sección de galería de imágenes
- Estructura de sección de localización
- Estilos de sección de localización
- Estructura de footer
- Uso de Grid Areas
- Estilos de Footer
- Resumen
UNIDAD 12 - Responsive Web Design · 13 leccionesUNIDAD 12 - Responsive Web Design
UNIDAD 12 - Responsive Web Design
- Introducción
- ¿Qué es Responsive Web Design?
- Herramientas de desarrollo para RWD
- Creando Media Queries
- Operadores de comparación para Media Queries
- Snippet para Media Queries
- Tamaños Estándar para Media Queries
- Configuración inicial para la Práctica
- Estilos de Header
- Estilos de Botones Gradiente
- Agregar media queries
- Optimizando imágenes de diferentes tamaños y extenciones
- Resumen
UNIDAD 13 - Desktop First para proyectos de Portafolio y Cafetería · 8 leccionesUNIDAD 13 - Desktop First para proyectos de Portafolio y Cafetería
UNIDAD 13 - Desktop First para proyectos de Portafolio y Cafetería
- Introducción
- Menù de navegación de portafolio
- Home y About
- Terminanado Portafolio
- Empezando cafetería
- Nuevo producto de Cafetería
- Terminando cafetería
- Resumen
UNIDAD 14 - Landing Page LogiProX - Proyecto completo desde cero con MobileFirst · 15 leccionesUNIDAD 14 - Landing Page LogiProX - Proyecto completo desde cero con MobileFirst
UNIDAD 14 - Landing Page LogiProX - Proyecto completo desde cero con MobileFirst
- Presentación del proyecto
- Recursos para el Proyecto
- CSS Normalize
- Estilos Iniciales
- Estructura de Navbar
- Estructura de contenido de Header
- Estilos de Navbar
- Menú resposive
- Estilos de Header
- Sección de características
- Sección de Acerca de
- Estructura de sección de productos
- Estilos de sección de productos
- Estructura de sección de Boletín y Footer
- Terminando el proyecto
UNIDAD 15 - Fundamentos de BEM - Proyecto completo usando BEM · 23 leccionesUNIDAD 15 - Fundamentos de BEM - Proyecto completo usando BEM
UNIDAD 15 - Fundamentos de BEM - Proyecto completo usando BEM
- Introducción y Presentación
- ¿Qué es BEM?
- Configuración Inicial
- Bloques y Elementos
- Estructura de archivos con BEM
- Empezadando con CSS
- Estilos de Navbar
- Utilidades usando BEM
- Modificadores y animación del botón de Menú
- Estructura de Intro con BEM
- Estilos de Intro
- Estructura de Estadísticas
- Estilos de estadísticas
- Sección de educación
- Estructura de cursos
- Estilos de cursos
- Estructura de planes
- Estilos de planes parte 1
- Estilos de planes parte 2
- Estructura de testimoniales
- Estilos testimoniales
- Estructura footer
- Estilos footer
UNIDAD 16 - Despliegue de Aplicaciones en Netlify · 5 leccionesUNIDAD 16 - Despliegue de Aplicaciones en Netlify
UNIDAD 16 - Despliegue de Aplicaciones en Netlify
- Introducción
- Herramientas necesarias
- Despliegue manual a Netlify
- Subir proyecto a GitHub
- Conectar GitHub con Netlify
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
16 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Alex Roel.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 16 unidades · 194 lecciones · 60 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Alex Roel; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
