Programa de estudios

1. «Bienvenidos al mundo del desarrollo web»
   • Tecnologías de desarrollo Front-end
   • Sitios web estáticos VS sitios web dinámicos
   • El Front-end como parte de una cadena de montaje no lineal
   • Front-end + Back-end. Pipeline en un sitio dinámico
   • Fundamentos y tecnologías de Back-end
2. Cómo funciona un navegador
3. Organización de archivos del Front end de un proyecto web
4. Terminología, estructura y sintaxis de HTML5
5. Etiquetas y atributos de HTML5
6. La semántica como factor decisivo
7. Principios de desarrollo basado en mejora progresiva
8. Fundamentos de CSS
   • Separando formato de contenido
   • Cargando CSS en un archivo HTML
   • Sintaxis de las reglas CSS
   • Especificidad
   • La cascada de CSS
9. Selectores CSS más comunes
10. Selectores CSS avanzados (de niveles 2, 3 y 4)
11. Pseudoelementos CSS «::before» y «::after»
12. Jerarquía de selectores CSS
13. Propiedades CSS para formato de textos
14. Carga de tipografías desde servidor de terceros (como Google Fonts)
15. Carga de tipografías en CSS con «@font-face»
16. Los modelos de caja
    • Componentes (ancho, alto, padding, borde y margen)
    • Modelo de caja Clásico o «content-box»
    • Modelo de caja «border-box»
17. La propiedad CSS «display»
18. Visibilidad de las etiquetas
19. Controlando el desbordamiento con «overflow»
20. La propiedad «position». Ubicando elementos con CSS
21. Responsive. La presentación de contenidos se adapta
    • Estructuras flexibles
    • Media Queries
    • Contenidos que se adaptan
22. Imágenes en HTML
    • El atributo «alt». Optimizando accesibilidad, SEO y usabilidad
    • Haciendo responsive las imágenes
    • El atributo «srcset»
23. Elementos flotantes. El uso del «float» hoy
24. Enlaces. La etiqueta «a»
    • Creando hipervínculos. La esencia de la web
    • Anclas
    • Vínculos de correo (mailto)
25. Estructuras de lista
    • Listas ordenadas
    • Listas desordenadas
    • Listas de descripción
26. Construyendo menús
    • Menús en columna
    • Barras de navegación
    • Dropdowns (desplegables) con CSS
    • Menús responsive
    • Menús responsive con patrón «botón hamburguesa»
    • Menús offCanvas
27. Unidades de medida
    • Unidades px
    • Unidades %
    • Unidades em
    • Unidades rem
    • Unidades vw
    • Unidades vh
    • Unidades ch
28. Bordes
29. Maquetando estructuras
    • Estructura con contenidos de ancho fijo y centrado
    • Estructuras con columnas de ancho fijo
    • Estructuras con columnas de ancho flexible (adaptativo)
    • Estructura de ancho flexible con contenido de ancho fijo y centrado
    • Estructura en cuadrícula
    • Cards
    • Estructuras responsive
30. Sombras de caja y de texto con CSS
31. Filtros CSS
32. Fondos con CSS
    • Color de fondo
    • Imágenes de fondo
      • Cambiando el tamaño de la imagen de fondo
      • Ajustando el tamaño de la imagen de fondo con «cover» y «contain»
      • Patrones de fondo
    • Degradados de fondo con CSS3
      • Degradados lineales
      • Degradados radiales
      • Degradados en repetición
    • Definiendo el área del fondo con «background-clip»
    • Particularidades del fondo de la etiqueta «body»
33. Modos de fusión de imagen y color mediante «background-blend-mode»
34. Tablas. Tabulando datos
35. Columnas con CSS
36. Transformaciones CSS. Escalando, rotando, sesgando y trasladando etiquetas
37. Transiciones CSS. Animando los cambios en las propiedades
38. Animaciones CSS
    • Propiedades de animación
    • Keyframes
    • Aceleraciones
    • Animaciones anidadas
    • Animaciones en bucle
    • Animaciones de entrada
    • Animaciones por pasos
    • Best Practices de rendimiento en animación de propiedades CSS
    • Aplicando principios de animación a la UI con CSS
    • La animación como elemento que mejora la UX
39. Flexbox (CSS Flexible Box Layout)
    • Sistema de ejes principal y cruzado
    • Propiedades CSS Flexbox para el elemento contenedor
      • Convirtiendo en elemento Flexbox con «display: flex» e «inline-flex»
      • Intercambiando los ejes con «flex-direction»
      • Envolviendo a los hijos con «flex-wrap»
      • La forma corta «flex-flow»
      • Colocando a los hijos sobre el eje principal con «justify-content»
      • Colocando a los hijos sobre el eje cruzado con «align-items» y «align-content»
    • Propiedades CSS Flexbox para los elementos contenidos
      • Alineación en el eje cruzado de un elemento concreto con «self-align»
      • Cambiando el orden de los elementos con «order»
      • Tamaño base con «flex-basis»
      • Límites de adaptación con «flex-grow» y «flex-shrink»
      • La forma corta «flex»
40. Grid (CSS Grid Layout)
    • Fundamentos de CSS Grid
    • Jugando con fracciones. La unidad fr
    • Grids implícitos y explícitos
    • El algoritmo de colocación automática de CSS Grid: grid-auto-flow
    • Definiendo el tamaño de las pistas en CSS Grid
    • La función «repeat»
    • Definiendo tamaños de elementos grid
    • Colocando elementos grid
    • «auto-fit» y «auto-fill»
    • Grids responsive con minmax()
    • Grid Areas
    • Grid Lines
    • Alineación
    • Reordenación
    • Anidación
    • Flexbox y/o CSS Grid
      • Diferencias
      • Diseños de una dimensión VS dos dimensiones
      • Complementando Flexbox y Grid
41. Vídeo con HTML5
    • Atributos
    • Formatos de vídeo
    • Guerra de codecs
    • Añadiendo subtítulos
    • Haciendo responsive un vídeo HTML5
42. Audio con HTML5
43. Incrustando otras webs dentro de nuestra página. «iframe»
    • Incrustando videoplayers de Youtube, Vimeo…
    • Incrustando Google Maps
    • Haciendo responsive los iframes
44. Formularios HTML5
    • Elementos de formulario
    • Soporte a etiquetas HTML5
    • Estilando elementos de formulario con CSS
45. Fundamentos de librerías de componentes web
    • Bootstrap
    • Foundation
    • Otras (UIKit, Skeleton, SemanticUI…)
46. Atributos data- de HTML5
47. SVG inline
    • Introducción a los elementos y atributos de SVG
    • Modificando los atributos SVG con CSS
    • Usando símbolos e instancias SVG en HTML para usar set de iconos eficientemente
    • Optimización de SVG
    • Fallbacks a PNG
48. Fundamentos de preprocesado de CSS con SASS
49. Etiquetas Meta
50. Técnicas de SEO on site
51. Etiquetas meta para integración con redes sociales
    • Twitter cards
    • Facebook Open Graph