Curso de Desarrollo Web desde cero con HTML, CSS y Bootstrap

UNIDAD 1: Estructura de una página web. Texto, listas y enlaces. (15 lecciones)

Abordaremos la estructura de las páginas web a través de HTML, cubriendo los elementos y atributos esenciales, el marcado estructural y semántico para presentar y enfatizar el contenido, así como los diversos tipos de listas y la estructura de enlaces y directorios web.

🎬 1. ACCESO DE PRUEBA: La Estructura de una Página Web: Fundamentos y Mejores Prácticas. 11m 02s
🎬 2. ACCESO DE PRUEBA: HTML describe estructura de las páginas, elementos para hacerlo y atributos de los mismos 17m 48s
🎬 3. Body, Head y Title (Cuerpo, Cabecera y pie de una página HTML) 08m 59s
🎬 4. Introducción al Marcado Estructural y Semántico 21m 45s
🎬 5. Marcado Semántico: Introducción y Conceptos Básicos (Parte 1)17m 44s
🎬 6. Marcado Semántico: Introducción y Conceptos Básicos (Parte 2) 07m 07s
🎬 7. Trabajo Práctico de Aplicación 16m 04s
🎬 8. Explorando las Listas: Fundamentos y Tipos (Parte 1) 19m 39s
🎬 9. Explorando las Listas: Fundamentos y Tipos (Parte 2) 11m 34s
🎬 10. Explorando las Listas Anidadas: Estructura y Usos 23m 30s
🎬 11. Dominando la Estructura Web: Enlaces, Directorios, URL y URL Relativa 17m 58s
🎬 12. Explorando los Enlaces Web: Tipos de Enlaces y Enlaces hacia una misma página (Parte 1) 21m 07s
🎬 13. Explorando los Enlaces Web: Tipos de Enlaces y Enlaces hacia una misma página (Parte 2) 16m 28
🎬 14. Explorando los enlaces web: Enlaces hacia Páginas Externas 16m 52s
🎬 15. Resumen de Listas y Enlaces 01m 51s

UNIDAD 2: Imágenes, Tablas y Formularios (13 lecciones)

En esta unidad se cubren elementos clave de HTML: cómo incorporar y ajustar imágenes con atributos ‘src’, ‘alt’ y ‘title’; la creación y manejo de tablas, incluyendo su estructura y expansión de filas y columnas; y la configuración de formularios, desde su estructura hasta el manejo de controles de texto, selección y envío de información, destacando el uso de controles ocultos..

🎬 1. Eligiendo Imágenes para tu Sitio Web: Características y Consideraciones 23m 31s
🎬 2. Insertar & Redimensionar Imágenes 13m 08s
🎬 3. Ubicación & Alineación de las imágenes 16m 10s
🎬 4. Figure y Figcaption en HTML5: Ampliando tus Opciones de Diseño Web 10m 32s
🎬 5. Tablas HTML: Elementos y Partes de una Tabla 18m 38s
🎬 6. Creación de Tablas HTML: Fundamentos y Mejores Prácticas 17m 55s
🎬 7. Resumen de Elemento HTML- Tablas 02m 14s
🎬 8. Atributos y Propiedades en los Formularios HTML: Mejorando la Experiencia del Usuario 21m 37s
🎬 9. Explorando los Controles de Texto en Formularios HTML 20m 38s
🎬 10. Controles de Selección en Formularios HTML: Mejorando la Interacción del Usuario 13m 38s
🎬 11. Creación de un Formulario de Registro HTML: Capturando Datos de Usuario 18m 48s
🎬 12. Explorando los Nuevos Controles HTML5 para Formularios 09m 28s
🎬 13. Botones ‘Upload’ y ‘Con Imágenes’ en Formularios HTML: Interacción Avanzada y Visual 11m 58s

UNIDAD 3: Etiquetas extras. Agrupamiento de elementos ( 6 lecciones)

Exploraremos aspectos avanzados de HTML: evolución y Doctypes, uso de comentarios, diferencia entre elementos de bloque e in-line, agrupación efectiva de texto y elementos, incorporación de Iframes y relevancia de Meta información para la optimización de búsqueda y descripción de la página.

🎬 1. Doctypes, Atributos Globales y Comentarios en HTML – Parte 1 17m 40s
🎬 2. Doctypes, Atributos Globales y Comentarios en HTML – Parte 2 20m 54s
🎬 3. Atributos Globales de una página 09m 56s
🎬 4.Elementos en bloque y en línea 10m 31s
🎬 5. Agrupamiento de Elementos en HTML: Uso de Div y Span 12m 55s
🎬 6. Incorporación de Datos y Marcos iFrame en HTML: Definiendo Información de Página 07m 27s

UNIDAD 4: Introducción a CSS. Color, Textos y Cajas (21 lecciones)

En esta unidad nos introducimos en CSS, cubriendo su funcionamiento con bloques contenedores, estilización de colores y texto, dimensionamiento y estilos de cajas, y aspectos avanzados de CSS3, como sombras de cajas y esquinas redondeadas.

🎬 1. Principios de CSS: Declaración, Selección, Aplicación en Bloques y Herencia 19m 02s
🎬 2. Declaración de Reglas CSS 15 min 37s
🎬 3. Reglas CSS Herencia 07m 23s
🎬 4. Selector Universal y Clases de Estilo en CSS: Definiendo Estilos para Bloques con un Identificador ID. 24m 44s
🎬 5. Estilos para Contenedores -div- y clases en CSS. 11m 22s
🎬 6. Definiendo color según reglas CSS. 05m 30s
🎬 7. Definiendo Colores para elementos HTML. 14m 15s
🎬 8. Nuevas propiedades CSS3: Explorando la Opacidad. 03m 04s
🎬 9. Definiendo la opacidad de un elemento HTML. 04m 48s
🎬 10. Tipo y Tamaño de Letra. 04m 25s
🎬 11. Definiendo estilos para la letra en una página web. 09m 13s
🎬 12. Importando tipos de letra de GOOGLE (Google Fonts). 04m 22s
🎬 13. Propiedades en el Tipo de Letra: Espaciado, Alineación y Estilos para la Primera Línea y Primera Letra. 05m 22s
🎬 14. Estilos para letras. 09m 52s
🎬 15. Pseudoclases Parte 1. 11m 16s
🎬 16. Pseudoclases Parte 2. 04m 30s
🎬 17. El Elemento Contenedor (div): Trabajando con Cajas. 02m 38s
🎬 18. Propiedades de los Elementos Contenedores (div): Estilizando Cajas. 06m 36s
🎬 19. Bordes, Ancho, Estilos y Colores en los Elementos Contenedores (div): Personalizando Cajas Parte 1. 23m 23s
🎬 20. Bordes, Ancho, Estilos y Colores en los El09m 22s
🎬 21. Márgenes y Espaciado en los Elementos Contenedores (div): Gestión del Espacio entre Cajas. 10m 47s

UNIDAD 5: Estilos de listas, tablas y formularios. Layout e imágenes (34 lecciones)

Abordaremos el estilizado y posicionamiento de listas, tablas, formularios e imágenes en CSS, y explora conceptos de disposición de elementos, incluyendo el diseño multicolumna y la alineación de imágenes.

🎬 1. Presentación, Estilos para las listas. 13m 43s
🎬 2. Estilando y Posicionando punteros de lista. 15 min 49s
🎬 3. Definiendo estilos de listas en una línea. 05m 17s
🎬 4. Propiedades CSS para Tablas: Diseño de Tablas HTML. 16m 58s
🎬 5. Definiendo Estilos para Tablas. 22m 21s
🎬 6. Propiedades para celdas vacías de una tabla. 07m 13s
🎬 7. Espaciado entre celdas de una tabla. 08m 01s
🎬 8. Estilos para formularios HTML. 22m 51s
🎬 9. Estilos para botones de un formulario. 05m 27s
🎬 10. Pseudoclases aplicadas en botones. 04m 07s
🎬 11. Estilos para controles agrupados. 09m 15s
🎬 12. Posicionando Elementos. 08m 10s
🎬 13. Posición Relativa & Abosulta de elementos. Tipos de posicionamiento. 07m 57s
🎬 14. Desplazamiento y fluido de elementos. 10m 23s
🎬 15. Posicionamiento de Elementos: Solapamiento y Desplazamiento Parte 1. 19m 24s
🎬 16. Posicionamiento de Elementos: Solapamiento y Desplazamiento Parte 2. 16m 18s
🎬 17. Posicionamiento de Elementos con Float. 17m 03s
🎬 18. Propiedad Clear. 07m 34s
🎬 19. Contenedor de Elementos flotantes. 22m 00s
🎬 20. Diseño en Multi Columnas. 08m 15s
🎬 21. Tipos de Diseño de Anchura: Diseño Fijo y Diseño Líquido. 16m 47s
🎬 22. Creación de Sitio Web con anchura fija Parte 1. 17m 05s
🎬 23. Creación de Sitio Web con anchura fija Parte 2. 18m 49s
🎬 24. Creación de un sitio web con diseño líquido. 21m 51s
🎬 25. Creación de una Sitio Web Parte 1. 20m 39s
🎬 26. Creación de una Sitio Web Parte 2. 22m 26s
🎬 27. Creación de una Sitio Web Parte 3. 23m 50s
🎬 28. Creación de una Sitio Web Parte 4. 18m 29s
🎬 29. Reglas de Estilo, Tamaño y Alineación de Imágenes. 21m 06s
🎬 30. Centrado usando CSS. 07m 33s
🎬 31. Imágenes de Fondo. 20m 26s
🎬 32. Imágenes de fondo, posicionamiento y porcentajes. 09m 42s
🎬 33. Gradiente. 09m 00s
🎬 34. Galería de Fotos. 27m 22s

UNIDAD 6: Bootstrap. Sistema de Grillas. Contenedores y Alineamiento. (8 lecciones)

Descubre Bootstrap: grillas, contenedores y alineamiento. Aprende a crear diseños flexibles y alineados vertical y horizontalmente con facilidad. Potencia tus habilidades en desarrollo web con Bootstrap..

🎬 1. Bootstrap, Instalación y Contenedor principal. 15m 46s
🎬 2. Sistema de Grillas en Bootstrap. 08 min 17s
🎬 3. Sistema de Grillas BTS. 15m 45s
🎬 4. Múltiples Reglas a las columnas de una fila. 13m 24s
🎬 5. Contenedores: Ancho Fijo y Ancho Fluido. Columnas de Ancho Automático. 15m 02s
🎬 6. Alineación Vertical & Horizontal. 22m 30s
🎬 7. Varias líneas en una misma fila. 06m 24s
🎬 8. Anidamiento de Columnas. 23m 02s

UNIDAD 7: Tablas, formularios y Tipografía en Bootstrap (18 lecciones)

En esta unidad se cubre el uso de Bootstrap para estilizar tablas y formularios, y manipular tipografía, incluyendo listas, citas, código, y control de alineación y transformación de texto..

🎬 1. Tablas en BTS: Estilos de la Cabecera de la Tabla. 13m 40s
🎬 2. Estilos de Filas y Celdas: Creando Tablas Responsivas. 13 min 37s
🎬 3. Introducción a formularios. 17m 48s
🎬 4.Formularios y controles. 17m 04s
🎬 5. Controles Input y Formulario Horizontal. 16m 40s
🎬 6. Formularios de diseño complejo. 24m 01s
🎬 7. Controles de Formulario: Texto de Ayuda, Tamaño, Rango y Deshabilitación Parte 1. 15m 16s
🎬 8. Controles de Formulario: Texto de Ayuda, Tamaño, Rango y Deshabilitación Parte 2. 18m 43s
🎬 9. Controles de Formulario: Texto de Ayuda, Tamaño, Rango y Deshabilitación Parte 3. 11m 53s
🎬 10. Botones: Creación y Botones Contextuales. 14m 10s
🎬 11. Muestreo de Datos en Tablas con Botones Contextuales. 21m 01s
🎬 12. rupo de Botones. 19m 12s
🎬 13. Introducción a la Tipografía. 05m 21s
🎬 14. Títulos y listas en BTS Parte 1. 23m 41s
🎬 15. Títulos y listas en BTS Parte 2. 15m 12s
🎬 16. Títulos y listas en BTS Parte 3. 10m 53s
🎬 17. Alineación de Texto.

UNIDAD 8: Componentes en Bootstrap: Cards, Jumbotron, Alerts, Modal, Navbar (9 lecciones)

Esta unidad se centra en los componentes de Bootstrap: Jumbotron, Cards, Alerts, Modals y Navbar, equipando a los estudiantes con habilidades para construir interfaces web atractivas y funcionales.

🎬 1. Introducción a Tarjetas. 06m 42s
🎬 2. Partes de una Tarjeta. 23 min 42s
🎬 3. Imágenes y Pestañas en Tarjetas. 19m 55s
🎬 4. Tarjetas Agrupadas. 06m 32s
🎬 5. Ventanas Alert. 22m 43s
🎬 6. Ventanas Emergentes Modal. 17m 25s
🎬 7. Tamaño y Alineación de Ventanas Emergentes. 12m 10s
🎬 8. Modal Diálogos Múltiples. 19m 05s
🎬 9. Barra de Navegación. 21m 11s

UNIDAD 9: Componentes en Bootstrap: Paginación, Barra de Progreso, Paginación, Lista desplegable, Acordión. (9 lecciones)

Se cubren componentes avanzados de Bootstrap como Carousel, Paginación, Barra de Progreso, Listas desplegables, y Collapse/Accordion, potenciando la creación de páginas web interactivas y organizadas.

🎬 1. Componentes de Bootstrap y Carrousel. 04m 35s
🎬 2. Carrousel Parte 1. 15 min 52s
🎬 3. Carrousel Parte 2. 17m 31s
🎬 4. Paginación. 08m 17s
🎬 5. Barra de Progreso y Barra de Progreso Compuesta. 14m 27s
🎬 6. Componente DropDown. 10m 22s
🎬 7. DropDown con formulario. 13m 52s
🎬 8. Componente Collapse y Collapse Múlitiple. 18m 57s
🎬 9. Componente Accordion. 19m 35s