Es un curso totalmente práctico y desde cero donde no necesitas conocimientos previos. Aprenderás a crear sitios Web responsivos, que se vean bien en cualquier dispositivo y tamaño de pantalla. Si quieres aprender HTML, CSS y FLEXBOX, ¡Este es tu lugar indicado!
-
Conociendo HTML
- Sesión # 1
- 1.1. Introducción a HTML
- 1.2. Material Adicional de HTML
- 1.3. Descargar Visual Studio Code
- 1.4. Descargar Google Chrome
- 1.5. Instalar Visual Studio Code
- 1.6. Creando mi primer archivo HTML
- 1.7. Ejecutando un HTML
- 1.8. Estructura de un archivo HTML
- 1.9. Etiquetas: BODY, HEAD, TITLE y META
- 1.10. Etiquetas: H y P
- 1.11. Cuestionario # 1
- 1.12. Espacios en HTML
- 1.13. Entidades HTML (parte 1)
- 1.14. Entidades HTML (parte 2)
- 1.15. Entidades HTML Comunes
- 1.16. ¿Tienes preguntas?
- 1.17. Semántica vs Estilo (parte 1)
- 1.18. Semántica vs Estilo (parte 2)
- 1.19. Etiquetas de Línea y Etiquetas de Bloque
- 1.20. Mi Primer Proyecto Web
- 1.21. Etiquetas UL, OL, LI
- 1.22. Imágenes de Soporte
- 1.23. Imágenes
- 1.24. Etiqueta A
- 1.25. ¿Qué te parece el curso hasta ahora?
- 1.26. Redimensionando Imágenes
- 1.27. ¡Generemos una gran comunidad!
- 1.28. Material de la Semana # 1
- 1.29. Práctica # 1
- 1.30. Práctica # 1 – HTML
-
Conociendo CSS
- Sesión # 2
- 2.1. Atributos
- 2.2. Generando el Ejercicio # 2 (parte 1)
- 2.3. Generando el Ejercicio # 2 (parte 2)
- 2.4. Atributos Start y Reversed
- 2.5. Introducción a CSS
- 2.6. Selectores por Etiqueta
- 2.7. Propiedad Color
- 2.8. Atributos y Selectores ID y Class
- 2.9. Propiedad Font-style
- 2.10. Propiedad Font-weight
- 2.11. Propiedad Text-decoration
- 2.12. Propiedad Font-family
- 2.13. Ayúdate a Ti Mismo
- Revisando Documentación
- 2.14. Unidades en CSS
- 2.15. Usando Font-size con EM y REM
- 2.16. Border, Margin y Padding
- 2.17. Usando Border, Margin y Padding (Parte 1)
- 2.18. Usando Border, Margin y Padding (Parte 2)
- Cuestionario # 2
- Archivos – Proyecto # 2
- 2.19. Proyecto # 2
- 2.20. Link, Text-align y Background-color
- 2.21. Border-radius
- 2.22. Selectores Descendientes y Directos Descendientes
- 2.23. Estilizando Listas: List-style-type
- 2.24. Selector Hover
- ¿Qué te parece CSS?
- 2.25. Práctica # 2
- Práctica # 2 – CSS Básico
-
Conociendo más de HTML y CSS
- Sesión # 3
- 3.1. Tablas en HTML
- 3.2. Creando mi primera Tabla HTML
- 3.3. Estilizando mi primera Tabla HTML
- Recursos Adicionales – Mi Segunda Tabla
- 3.4. Mi segunda tabla HTML, etiquetas colgroup y col
- Recursos Adiconales – Rowspan y Colspan
- 3.5. Atributos rowspan y colspan
- 3.6. Selector nth-child
- Material Adicional de la Documentación (Tablas HTML)
- Práctica – Tablas
- Recursos Adicionales – Imágenes de Fondo
- 3.7. Imágenes de Fondo (background-image)
- 3.8. Propiedad Background-repeat
- 3.9. Propiedad Background-size
- 3.10. Propiedad Background-position
- 3.11. Colocando más Imágenes de Fondo
- Material Necesario para la Práctica # 3
- 3.12. Proyecto # 3: Una Página con Música y Video
- 3.13. Añadiendo Video al Proyecto
- 3.14. Añadiendo Audio al Proyecto
- 3.15. Estilizando mi Proyecto # 3
- Documentación de Etiquetas Audio y Video
- 3.16. Etiquetas de Bloque y de Línea
- 3.17. Utilizando la Propiedad Display
- 3.18. Propiedad Position
- Material Necesario para el Proyecto # 4
- 3.19. Creando mi Proyecto # 4 (Parte 1)
- 3.20. Creando mi Proyecto # 4 (Parte 2)
- 3.21. Utilizando position: static
- 3.22. Utilizando position: relative
- 3.23. Utilizando position: absolute
- 3.24. Utilizando position: fixed
- 3.25. Utilizando position: sticky
- 3.26. Estilizando mi Proyecto # 4 (Parte 1)
- 3.27. Estilizando mi Proyecto # 4 (Parte 2)
- 3.28. Estilizando mi Proyecto # 4 (Parte 3)
- Descarga el Proyecto # 4
- 3.29. Práctica # 4
- Práctica # 4
-
Páginas Responsivas y Flexbox
- Sesión # 4
- 4.1. Media Queries en CSS
- 4.2. Aplicando Media Queries – Parte 1
- 4.3. Aplicando Media Queries – Parte 2
- 4.4. Flexbox
- Material Adicional: Código base del ejercicio Flexbox
- 4.5. ¡Jugando con Flexbox!
- 4.6. Propiedades del Container: flex-direction
- 4.7. Propiedades del Container: flex-wrap
- 4.8. Propiedades del Container: flex-flow
- 4.9. Propiedades del Container: justify-content
- 4.10: Propiedades del Container: align-items
- 4.11. Propiedades del Container: align-content
- 4.12. Propiedades de los Items: order
- 4.13. Propiedades de los Items: flex-grow y flex-shrink
- 4.14. Propiedades de los Items: flex-basis y flex
- 4.15. Propiedades de los Items: align-self
- Material Adicional: Ejercicio Flexbox Terminado
- Documentación de Flexbox
- Archivos base del Proyecto # 5
- 4.16. Proyecto # 5 – Interfaz de Play Store
- 4.17. Estilizando el Header de mi Proyecto # 5
- 4.18. Estilizando el Section de mi Proyecto # 5 (Parte 1)
- 4.19. Estilizando el Section de mi Proyecto # 5 (Parte 2)
- 4.20. Estilizando el Main de mi Proyecto # 5 (Parte 1)
- 4.21. Propiedades CSS overflow y box-shadow
- 4.22. Estilizando el Main de mi Proyecto # 5 (Parte 2)
- 4.23. Usando un tipo de letra de Google Fonts
- 4.24. Descargando un tipo de letra de Google Fonts
- 4.25. Usando Media Queries en mi Proyecto # 5
- Descarga el Proyecto # 5 Completado
- Práctica # 5: Juguemos con Flexbox y Ranas
- Material adicional: Archivos Base del Proyecto # 6
- 4.26. Proyecto # 6: Mi Web Personal
- 4.27. Estilizando el Header del Proyecto # 6
- 4.28. Estilizando el Aside del Proyecto # 6
- 4.29. Estilizando el Main del Proyecto # 6 (Parte 1)
- 4.30. Estilizando el Main del Proyecto # 6 (Parte 2)
- 4.31. Estilizando el Section del Proyecto # 6
- 4.32. Estilizando el Footer del Proyecto # 6 (Parte 1)
- 4.33. Estilizando el Footer del Proyecto # 6 (Parte 2)
- 4.34. Usando Media Queries en el Proyecto # 6
- Material adicional: Proyecto # 6 Finalizado
- Documentación Adicional CSS
- Práctica # 6: ¡Hagamos una página Web Responsiva!
-
¡Practiquemos!
- Sesión # 5
- 5.1. Descargando Animate.css
- Material Adicional: Archivos de Animate.css
- 5.2. Usando Animate.css en el Proyecto # 6
- Material adicional: Proyecto # 6 Finalizado con Animaciones
- 5.3. Creando el Proyecto # 7 – Los Wireframes de la Tienda de Robótica
- 5.4. Material Adicional: Eligiendo los Colores del Proyecto # 7
- Material Adicional: HTML del Proyecto # 7
- 5.5. Comprendiendo el HTML del Proyecto # 7
- Material Adicional: Lorem Ipsum
- 5.6. Cambiando el tipo de letra del Proyecto # 7
- 5.7. Estilizando el Header del Proyecto # 7 (Parte 1)
- 5.8. Estilizando el Header del Proyexto # 7 (Parte 2)
- 5.9. Estilizando el Header del Proyexto # 7 (Parte 3)
- 5.10. Estilizando el Banner del Proyecto # 7 (Parte 1)
- 5.11. Estilizando el Banner del Proyecto # 7 (Parte 2)
- 5.12. Estilizando el Banner del Proyecto # 7 (Parte 3)
- 5.13. Estilizando el Section “Cualidades” del Proyecto # 7 (Parte 1)
- 5.14. Estilizando el Section “Cualidades” del Proyecto # 7 (Parte 2)
- 5.15. Estilizando el Main del Proyecto # 7 (Parte 1)
- 5.16. Estilizando el Main del Proyecto # 7 (Parte 2)
- 5.17. Estilizando el Main del Proyecto # 7 (Parte 3)
- 5.18 Estilizando el Footer del Proyecto # 7 (Parte 1)
- 5.19. Estilizando el Footer del Proyecto # 7 (Parte 2)
- 5.20. Utilizando Media Queries en el Proyecto # 7 (Parte 1)
- 5.21. Utilizando Media Queries en el Proyecto # 7 (Parte 2)
- Material Adicional: Proyecto # 7 Terminado
- 5.22. Consideraciones Finales y Trabajo Final
- PROYECTO FINAL
- Sesión # 6
- Study Jam 2 ( Parte 1)
- Study Jam 2 (Parte 2)
-
Material Adicional
- Descarga la base del Proyecto Extra # 1
- 1. Iniciando el Proyecto Extra # 1
- 2. Construyendo el Header del Proyecto Extra # 1
- 3. Utilizando medidas vh y vw en el Header del Proyecto Extra # 1
- 4. Botón “me gusta” de facebook en el Proyecto Extra # 1
- Documentación de Facebook para desarrolladores
- 5. Incluir un mapa de Google Map al Proyecto Extra # 1 – Parte 1
- 6. Incluir un mapa de Google Map al Proyecto Extra # 1 – Parte 2
- 7. Desarrollando un Carrusel Básico en Proyecto Extra # 1 – Parte 1
- 8. Desarrollando un Carrusel Básico en Proyecto Extra # 1 – Parte 2
- 9. Desarrollando un Carrusel Básico en Proyecto Extra # 1 – Parte 3
- Lista de Etiquetas HTML Avanzadas
