Curso de Desarrollo Web desde cero con HTML, CSS Y BOOTSTRAP
Con este curso de desarrollo web con HTML y CSS, aprenderás a crear páginas web estructuradas y atractivas, estarás preparado para construir sitios web profesionales utilizando las herramientas aprendidas.
Objetivo
El objetivo del curso es proporcionar una sólida base en desarrollo web utilizando HTML, CSS y Bootstrap, preparando a los estudiantes para la creación de sitios web de alta calidad y responsive.
Salida laboral
Los alumnos que hayan completado todas las clases dictadas de este curso podrán trabajar como: Desarrolladores Front-End, UX/UI, Full-Stack, WordPress, Bootstrap, Diseñadores Web, Especialistas en accesibilidad web, Freelancers, o Educadores en desarrollo web. .
Destinatarios y requisitos
El curso esta diseñado para personas con un interés en el diseño web, desde principiantes hasta profesionales de IT y diseñadores gráficos.
Los participantes necesitan tener conocimientos básicos de informática, acceso a una computadora y estar dispuestos a dedicar tiempo para la práctica. Un nivel básico de inglés técnico es beneficioso debido a la prevalencia de recursos de aprendizaje en inglés.
Descripción
En este curso integral de desarrollo web con HTML y CSS, aprenderás los fundamentos para crear páginas web estructuradas y atractivas. Aprenderás cómo utilizar HTML para describir la estructura de una página y cómo aplicar estilos utilizando CSS. Aprenderás a trabajar con texto, listas y enlaces, así como a incorporar imágenes, crear tablas y formularios interactivos. También explorarás técnicas de posicionamiento y diseño de páginas web. A lo largo del curso, adquirirás las habilidades necesarias para construir y personalizar sitios web de manera efectiva y profesional.
Programa del Curso
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. La Estructura de una Página Web: Fundamentos y Mejores Prácticas. 11m 02s
🎬 2. 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
Certificado
Al finalizar el curso accederás al Diploma y Certificado Analítico con código QR para que pueda ser valido online.
Preguntas Frecuentes
Testimonios
Mariana Esposito
EXELENTE FORMA DE PASAR EL TIEMPO ADQUIRIENDO CONOCIMIENTOS QUE SON UTILES EN NUESTRA VIDA, MUCHA ALEGRIA DE HABER LLEGADO AL FINAL DE ESTE CURSO. GRACIAS A LA TUTORA SIEMPRE MUY AMABLE Y ATENTA , ESTE FUE UN VERDADERO PLACER PARA MI, GRACIAS…😀
Cintia Troncoso
Excelente capacitacion!! recomendable totalmente. buen acompañamiento y contenido muy completo! gracias
Paula Alonso
Excelente curso y sobretodo excelente la calidad de los profesores, siempre dispuestos a responder todas las consultas.
Franco De los Santos
Muy buena la dedicación y los devoluciones de los trabajos realizados por parte de los tutores!!
Eliana Carranza
Agradezco a la coach tutora que me acompañó en el proceso de formación de coaching, recomiendo al Instituto Loopian y al curso. Gracias?
Gabriela Torres
Excelente atención, excelente material de estudio. Feliz de seguir adquiriendo nuevos aprendizajes.
Laura Bulique
en primer lugar les quiero agradecer todo lo q hicieron x mi me ayudaron me enseñaron un montón de cosas me cuidarnos me siento feliz y muy agradecida gracias gracias gracias
Jaque Wunderlich
Excelente instituto,muy profesional y confiable .