campus icon

FICTIZIA — Formación de alto rendimiento en diseño, tecnología y arte digital

(+34) 91 172 33 13 info@fictizia.com Plaza de España 12, Madrid

tecnologías de desarrollo

Máster en desarrollo Frontend con HTML5, CSS, JavaScript y React

Aprende todo lo necesario para desarrollar cualquier interfaz y disponer de uno de los perfiles más demandados. También en remoto: asiste a tu clase en tiempo real desde casa.

tecnologías de desarrollo

Máster en desarrollo Frontend con HTML5, CSS, JavaScript y React

  • HTML5
  • CSS
  • JS
  • React
  • Testing
  • frontend
  • maquetación
  • responsive
  • flexbox
  • gridcss
  • animación
  • programación
  • aplicaciones_SPA
  • UI_DEV
  • SEO_on_Page
  • Accesibilidad
  • Componentes
  • MVC
  • Git
  • AJAX
  • TDD
  • testing
Duración 5 meses
Coste 3.500 €
en pago único
Aplazado 3.900 €
en 3 cuotas antes del fin del máster
Modalidad de la formación Tú eliges: presencial en nuestro campus de Plaza de España o en remoto en tiempo real desde tu casa. #fictiziaentucasa
Dirigido a Personas con interés en trabajar en el sector del desarrollo interactivo.
Requisitos No es necesario que tengas conocimientos previos sobre la materia.
Bonificable Esta es una formación bonificable por FUNDAE (Fundación Estatal para la formación en el empleo). Si eres trabajador/a por cuenta ajena tu empresa puede bonificar tu formación. Además Fictizia puede gestionar todo el papeleo si tu empresa así lo prefiere.
Próximas ediciones
5 de octubre de 2020 PRESENCIAL Lunes, miércoles y viernes de 19:00 a 22:00
5 de octubre de 2020 EN REMOTO Lunes, miércoles y viernes de 19:00 a 22:00

Enfoque y objetivos

Aprende en el Máster en desarrollo Frontend con HTML5, CSS, JavaScript y React las técnicas profesionales de desarrollo Frontend más actuales que se aplican en la producción de cualquier web o App responsive a medida con HTML5 y CSS, a programar con JavaScript el comportamiento de los elementos de la interfaz de tu web y a desarrollar aplicaciones SPA basadas en MVC con React, la librería de JavaScript que facilita enormemente el desarrollo eficiente de interfaces de usuario fácilmente mantenibles.

Los asistentes a este máster aprenden todo sobre la semántica implícita en HTML5, técnicas de SEO on site y las técnicas profesionales más actuales aplicadas en producción para crear layouts responsive a medida por complejos que sean y a animar con CSS tanto microinteracciones como piezas publicitarias multidispositivo, el desarrollo con JavaScript nativo y adquieran las capacidades necesarias para crear profesionalmente sitios web a medida de las necesidades de cada proyecto y todos los detalles de la librería de JavaScript React.js para desarrollar interfaces eficientes y fácilmente gestionables y testeables de una forma eminentemente práctica.

Profesorado del máster

El equipo de profesores de Fictizia está formado por expertos profesionales en activo y con una larga y rica trayectoria profesional que les capacita para reconocer las necesidades reales de un sector tan cambiante y exigente y cumplir el objetivo de Fictizia de ofrecer una formación que responda a la realidad del mundo laboral más exigente. Cada integrante del profesorado de Fictizia es un/a gran especialista en su campo que además comparte sus conocimientos, sus enorme experiencia, sus tropiezos, sus aciertos y la pasión por su trabajo en nuestras aulas.

Fran Valdesoiro

Fran Valdesoiro

Desarrollador Frontend en Intelygenz. Apasionado de las tecnologías JavaScript y especialista en React, tiene experiencia tanto con React-native como Vue-native. Fran es un enamorado de la tecnología, la enseñanza y de investigar el funcionamiento de la mente y cómo adquirimos nuevos conocimientos, inquietudes que le llevaron a adentrarse en nuevas tecnologías desarrollando también aplicaciones de realidad aumentada y virtual (AR y VR) con Unity y a jugar con herramientas de memorización o mnemotecnia. Además, es colaborador de diversas comunidades tecnológicas como OSW (Open Source Weekends) y participa activamente en HackMadrid 27%, comunidad dedicada a la Ciberseguridad.

Alejandro Mur

Alejandro Mur

UI developer especializado en el desarrollo semántico y accesible siguiendo estándares web con HTML + CSS (SASS) + JS. Muy centrado en la arquitectura CSS. Maneja con soltura varias metodologías de trabajo según el tipo de proyecto (BEM, ITCSS o Utility Classes). Gran apasionado de las microinteracciones y de animar las interfaces en general siempre que la animación aporte valor al usuario. Defensor del enfoque Mobile First y de la importancia de mejorar la performance de cada proyecto. A lo largo de sus más de 14 años de trayectoria profesional en el desarrollo Frontend, Alejandro ha trabajado para clientes como Fundación Telefónica, Páginas Amarillas, L’oreal, Casa Real, IE Business School, Sanitas, Wi Zink, Enaire o BP.

El programa de contenidos

  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. Terminología, estructura y sintaxis de HTML5
  4. La semántica como factor decisivo
  5. Elementos de bloque y elementos en línea
  6. Etiquetas y atributos de HTML5
  7. Principios de desarrollo basado en mejora progresiva
  8. Fundamentos de CSS
    • Aplicando estilos CSS al HTML
      • Inline
      • Interno
      • Externo
    • La cascada de CSS
    • Reglas de especificidad
    • Valores por defecto (user agent) y Reset
    • Selectores
    • Modelos de caja
  9. Enlaces
    • Creando hipervínculos. La esencia de la web
    • Anclas
    • Vínculos de correo (mailto)
  10. Imágenes
    • El atributo «alt». Optimizando accesibilidad, SEO y usabilidad
    • Haciendo responsive las imágenes
    • El atributo «src-set»
  11. Atributos HTML
  12. Semántica y SEO on Site
  13. Selectores CSS más comunes
  14. Selectores CSS avanzados (de niveles 2, 3 y 4)
  15. Jerarquía en selectores CSS
  16. Propiedades CSS para formato de textos
  17. Carga de tipografías desde servidor de terceros (como Google Fonts)
  18. Carga de tipografías en CSS con «@font-face»
  19. Los modelos de caja
    • Componentes (ancho, alto, padding, borde y margen)
    • Modelo de caja Clásico o «content-box»
    • Modelo de caja «border-box»
  20. La propiedad CSS «display»
  21. Visibilidad de las etiquetas
  22. Controlando el desbordamiento con «overflow»
  23. Responsive. La presentación de contenidos se adapta
    • Estructuras flexibles
    • Media Queries
    • Contenidos que se adaptan
  24. 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 CSS
    • Definiendo el área del fondo con «background-clip»
    • Particularidades del fondo de la etiqueta «body»
  25. Elementos flotantes. El uso del «float» hoy
  26. Definiendo columnas con CSS
  27. Dominando la propiedad «position». Ubicando elementos elementos con CSS
  28. Pseudoelementos «::before» y «::after»
  29. Elementos flotantes. El uso del «float» hoy
  30. 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»
      • Permitiendo más de una ristra de hijos con «flex-wrap»
      • La forma corta «flex-flow»
      • Alineación y distribución de los hijos sobre el eje principal con «justify-content»
      • Alineación y distribución de los hijos sobre el eje cruzado con «align-items» y «align-content»
    • Propiedades CSS Flexbox para los flex items
      • Alineación sobre el eje cruzado de un elemento concreto con «align-self»
      • Cambiando el orden de los elementos con «order»
      • Tamaño base con «flex-basis»
      • Definiendo límites de adaptación con «flex-grow» y «flex-shrink»
      • La forma corta «flex»
  31. Grid (CSS Grid Layout)
    • Fundamentos de CSS Grid
    • Jugando con fracciones. La unidad fr
    • 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»
    • «auto-fit» y «auto-fill»
    • Grid Areas
    • Grid Lines
    • Alineación
    • Reordenación
    • Anidación
    • Flexbox y/o CSS Grid
      • Diseños de una dimensión VS dos dimensiones
      • Complementando Flexbox y Grid
  32. Transiciones CSS
  33. Transformaciones CSS
  34. 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
  35. Maquetando estructuras
    • Estructura con contenidos de ancho fijo y centrado
    • Estructuras con columnas de ancho fijo
    • Estructuras con columnas de ancho flexible (adaptativo)
    • Estructuras de ancho flexible con contenido de ancho fijo y centrado
    • Estructura en cuadrícula
    • Cards
    • Estructuras responsive
  36. 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ú offCanvas
  37. Unidades CSS: Absolutas VS Relativas
    • px
    • em y rem
    • vw y vh
    • %
  38. Responsive. Un mundo donde estructura y contenidos se adaptan
    • Estructuras flexibles
    • Media Queries
    • Contenidos que se adaptan
  39. Preprocesado de CSS con SASS
  40. Filtros CSS
  41. Sombras de caja y de texto con CSS
  42. Fundamentos de frameworks CSS
    • Bootstrap
    • Materialize
  43. Atributos data-
  44. Vídeo con HTML5
    • Atributos
    • Formatos de vídeo
    • Guerra de codecs
    • Añadiendo subtítulos
    • Haciendo responsive un vídeo HTML5
  45. Audio con HTML5
  46. Incrustando otras webs en una página. El «iframe»
    • Incrustando videoplayers de Youtube, Vimeo…
    • Incrustando Google Maps
    • Haciendo responsive los iframes
  47. SVG inline
    • Introducción a los elementos y atributos de SVG
    • Modificando 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. Formularios
    • Elementos de formulario
    • Soporte a etiquetas HTML5
    • Estilando elementos de formulario con CSS
  49. Fundamentos de Accesibilidad web
    • Cuidando la accesibilidad
    • Semántica
    • Principios de Accesibilidad
    • Guidelines de Accesibilidad
  50. Control de versiones con Git y GitHub
  51. JavaScript
    • JavaScript hoy
    • Lógica y abstracción aplicada a la programación
    • Introducción a algoritmia y pseudocódigo
    • Flujo de trabajo eficiente
    • Depurando código
    • Variables en JS
      • var
      • let
      • const
      • Global Scope y Block Scope
    • Condicionales
    • Tipos de dato
      • Booleanos
      • Strings
        • Concatenación, length, index y chartAt
      • Números
      • Arrays
        • length, pop y push, map
      • null y undefined
      • Funciones
        • Self-invoke
        • Closure
      • Objetos (Object Literals)
    • Hoisting
    • Gestionando el DOM con JavaScript
      • Primeras interacciones: prompt, alert y confirm
      • Agregar elementos
      • Eliminar elementos
      • Modificar Atributos y contenido
      • Modificando el CSS con JS
    • Gestionando eventos
      • Eventos de ratón
      • Eventos de teclado
      • Eventos de formulario
      • Eventos de navegador
    • Bucles e iteraciones
      • while
      • for
    • Prototipos y herencia
  52. Asincronía (HTTP Requests)
    • Interacciones con el servidor
      • POST
      • GET
      • PUT
      • PATCH
      • DELETE
  53. React + Redux
    • El paradigma MVC y frameworks JS
    • Desarrollo eficaz de interfaces con React
    • Webs estáticas con React
      • Introducción a JSX
      • Renderizando elementos
      • Componentes y propiedades
      • El estado y el ciclo de vida
      • Gestionando eventos en React
      • Renderizado condicional
      • CSS in JS
    • Añadiendo complejidad para mejorar la interfaz
      • Modularidad. Partiendo el código
      • El Contexto
      • Gestión de errores
      • Creando referencias a elementos DOM
      • Fragmentos
      • Componentes de primer orden
      • Integración con otras librerías
      • JSX en profundidad
      • Mejorando el rendimiento
      • Portales
      • Comparación de árboles virtuales
      • Modo estricto
      • Comprobación dinámica de tipos (PropTypes)
      • Componentes no controlados
      • Hooks
      • React.Suspense
      • React.Lazy
      • Accesibilidad
    • Librerías imprescindibles
      • React-Router
    • Redux. Gestión del estado global y la inmutabilidad
      • Motivaciones
      • Principios básicos de Redux
      • Middlewares
      • Redux-form
      • Redux-thunk
      • Redux-observable
  54. TDD (Test-Driven Development)
    • Jest y el testeo de aplicaciones web
    • Principios del Test Driven Development (TDD)
    • Configuración del entorno de testeo
    • CSS Testing con PhantomCSS
    • Test Unitarios con Jest y Enzyme
    • Test Funcionales (End to End) con Cypress
    • Cobertura de Código con Coverall
  55. Preparación de entrevistas y empleabilidad

Un método reflejo del día a día en la profesión

La metodología de la formación de Fictizia es teórico–práctica. En cada sesión formativa tu profesor/a irá avanzando en el desarrollo de la formación contigo y tus compañeros/as estudiantes mediante ejercicios prácticos que van involucrando progresivamente nuevos contenidos teóricos del programa de estudios. Todos los ejercicios se han diseñado específicamente como reflejo de las técnicas, procesos y situaciones reales más habituales y representativas que el alumno/a se va a encontrar después en su día a día de trabajo y de otras posibles situaciones menos comunes para que también aprendas a desenvolverte con criterio ante cualquier necesidad.

Asimismo, con esta formación el/la estudiante no solo se instruye en la mera ejecución de técnicas con el único fin de producir o ejecutar lo que le piden, también aprende los fundamentos teóricos y críticos tan importantes y que le permitirán tomar decisiones basadas en criterios objetivos y analíticos de forma autónoma.

Las opiniones de los alumnos son la mejor garantía.

Las experiencias y vivencias y los resultados que han obtenido las personas que han estudiado en FICTIZIA son la prueba más evidente del éxito de nuestra forma de entender la formación y de nuestro método educativo. También son nuestro mayor orgullo :) ¡Gracias!

He realizado este Máster y que decir, el profesor un profesional de 10; grupos reducidos, lo cual se agradece, ya que el profesor puede dedicar el tiempo necesario a cada alumno; que el horario sea 2 días en semana para mi es un plus, ya que, aunque se «tarde» más en hacer, puedes compatibilizarlo con tu día a día y además así puedes asimilar la materia dada y poder realizar los trabajos, ya que al estar trabajando por las mañanas, personalmente, no disponía de mucho tiempo. 100 % recomendable para todo aquel que quiera introducirse y/o perfeccionar en el mundo front-end.

Por razones laborales tomé la decisión de cambiar de rumbo profesional y decidí lanzarme al mundo del desarrollo web. Elegí Fictizia por sus grupos reducidos y por su master en front-end, cuyo programa me pareció de los más completos del mercado. Después de 5 meses puedo decir que no me he equivocado. El programa ha sido muy completo y al día de todas las novedades de este mundo, que no son pocas, de hecho algunas de ellas no estaban en programa y las hemos tocado. El profesor impecable, muy cercano, perfeccionista al máximo, imprescindible en este mundo del desarrollo web, y que ha hecho las clases muy amenas, lo cual se agradece siempre. Las clases son eminentemente prácticas y al ser grupos reducidos las exprimes al máximo. La muestra de lo contento que he terminado es que actualmente estoy realizando el curso de JavaScript para desarrolladores web como continuación del Master, esta vez con otro crack como profe, como todo el equipo de Fictizia.

Daniel Helguera Campillo

Mi experiencia fue completamente satisfactoria. El temario era muy completo y estaba actualizado. Además, profundizaba en los aspectos interesantes del mismo. Cabe destacar que éramos pocos alumnos en el aula, por lo que gozábamos de una atención personalizada. El material también resultó ser de mucha calidad, así como nuestro profesor. Era un experto en lo que impartía y un apasionado, muy atento. Como consejo personal me gustaría decir que, aunque el máster solo se imparta dos días a la semana, está bien tomárselo como si las tareas fueran diarias y trabajar el resto de la semana. De esta manera se aprovecha el máster al 100%

Jose María Velázquez

Estoy muy contento con el Máster de HTML, CSS, JavaScript y React que he hecho en Fictizia. Profesores competentes, que no han tenido ningún problema a la hora de adaptar sus contenidos para clases online ante el obligado confinamiento por el que hemos pasado este 2020. ENORME volumen de contenidos. Merece totalmente la pena.

Sobresaliente escuela. La formación que ofrecen en HTML, CSS y JavaScript es de 10. Terminas sus cursos con las herramientas para trabajar y sabiendo que cada euro ha valido la pena. Y eso a un precio muy ajustado.

Julio Martínez Frontend Developer

Las mejores empresas contratan a nuestros alumnos

Al finalizar la formación, el/la estudiante recibe su titulación de Fictizia y tiene acceso al grupo privado de Fictizia en LinkedIn, Fictizia Alumni, donde se publican todas las ofertas de empleo y prácticas de las muchas empresas con las que tenemos acuerdos de colaboración.

La calidad de la formación que reciben las personas que se forman en FICTIZIA se refleja en el nivel de las empresas que las contratan. Es un orgullo que las mejores compañías confíen en las capacidades de nuestros alumnos y es la mejor prueba de la efectividad de la formación que ofrecemos.

  • Alumnos Fictizia en Google
  • Alumnos Fictizia en El Ranchito
  • Alumnos Fictizia en Ogilvy
  • Alumnos Fictizia en BBVA Next
  • Alumnos Fictizia en Lola Mullenlowe
  • Alumnos Fictizia en Ánima-Kitchent
  • Alumnos Fictizia en Atresmedia
  • Alumnos Fictizia en BQ
  • Alumnos Fictizia en DDB
  • Alumnos Fictizia en Mach
  • Alumnos Fictizia en Byte London
  • Alumnos Fictizia en indra
  • Alumnos Fictizia en The Cocktail
  • Alumnos Fictizia en *SCPF
  • Alumnos Fictizia en Ediciones SM
  • Alumnos Fictizia en Paradigma digital
  • Alumnos Fictizia en Panda Security
  • Alumnos Fictizia en Exit Consultores Audiovisuales
  • Alumnos Fictizia en Mediaset
  • Alumnos Fictizia en Everis
  • Alumnos Fictizia en JWT
  • Alumnos Fictizia en Lalivingston
  • Alumnos Fictizia en Kairos DS
  • Alumnos Fictizia en Twin Pines
  • Alumnos Fictizia en LUCA data driven solutions
  • Alumnos Fictizia en Redbility
  • Alumnos Fictizia en LeChuck
  • Alumnos Fictizia en Liquid Squad
  • Alumnos Fictizia en Social Mood
  • Alumnos Fictizia en Warner Bros International tV Production