Cursos

Presencial en Madrid

60 horas.

Convocatoria Abierta

6% de descuento si te matriculas un mes antes del inicio

900 €/curso

Calcula tu préstamo

  • Obtendrás una base profesional para desarrollar cualquier proyecto web mediante la programación con tecnologías HTML5.

    También aprenderás todas las técnicas de maquetación para mejorar y facilitar la experiencia del usuario con undiseño organizado y accesible mediante CSS y siguiendo los estándares W3C. 
  • Objetivos

    Ser capaz de realizar Front-end y aprender distintas técnicas de maquetación con W3C de forma profesional y experta.
  • Requisitos

    No se necesita ningún requisito previo.

    • “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





    • Organización de archivos del Front-end de un proyecto web

    • Maquetación web según estándares W3C

    • Terminología, estructura y sintaxis de HTML5

    • Etiquetas y atributos de HTML5

    • La semántica como factor decisivo

    • Principios de desarrollo basado en mejora progresiva

    • Fundamentos de CSS

      • Separando formato de contenido

      • Cargando CSS en un archivo HTML

      • Sintaxis de las reglas CSS



    • Selectores CSS comunes

    • Selectores CSS avanzados (de niveles 2, 3 y 4)

    • Pseudoelementos CSS «::before» y «::after»

    • Jerarquía de selectores CSS

    • Usando la cascada de CSS

    • Propiedades CSS para formato de textos

    • Carga de tipografías en CSS con «@font-face» y desde servidor de terceros (Google Fonts…)

    • Los modelos de caja

      • Componentes (ancho, alto, padding, borde y margen)

      • Modelo de caja Clásico o «content-box»

      • Modelo de caja «border-box»



    • La propiedad CSS «display»

    • Elementos flotantes. El uso del «float» hoy

    • Visibilidad de las etiquetas

    • Controlando el desbordamiento con «overflow»

    • La propiedad «position». Ubicando elementos con CSS

    • Responsive. La presentación de contenidos se adapta

      • Estructuras flexibles

      • Media Queries

      • Contenidos que se adaptan



    • Imágenes en HTML

      • El atributo «alt». Optimizando accesibilidad, SEO y usabilidad

      • Haciendo responsive las imágenes

      • El atributo «srcset»



    • Enlaces. La etiqueta «a»

      • Creando hipervínculos. La esencia de la web

      • Anclas

      • Vínculos de correo (mailto)



    • Estructuras de lista

      • Listas ordenadas

      • Listas desordenadas

      • Listas de definición



    • 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



    • Unidades de medida

      • Unidades px

      • Unidades %

      • Unidades em

      • Unidades rem

      • Unidades vw

      • Unidades vh

      • Unidades ch



    • Bordes

    • Sombras de caja y de texto con CSS

    • Filtros CSS

    • Fondos con CSS

    • Colores de fondo

    • Definiendo el área del fondo con «background-clip»

    • 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



    • Particularidades del fondo de la etiqueta «body»

    • Modos de fusión de imagen y color mediante «background-blend-mode»

    • Tablas. Tabulando datos

    • Columnas con CSS

    • Transformaciones CSS. Escalando, rotando, sesgando y trasladando etiquetas

    • Transiciones CSS. Animando los cambios en las propiedades

    • 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



    • Maquetando patrones de estructura

      • 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



    • Flexbox

      • 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»





    • Video HTML5

      • Atributos

      • Formatos de vídeo

      • Guerra de codecs

      • Haciendo responsive los vídeos



    • Audio HTML5

    • Incrustando otras webs dentro de nuestra página. «iframe»

      • Incrustando videoplayer de youTube, Vimeo…

      • Incrustando Google Map

      • Haciendo responsive los iframes



    • Formularios HTML5

      • Elementos de formulario

      • Soporte a etiquetas HTML5

      • Estilando elementos de formulario con CSS



    • Atributos data- de HTML5

    • 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



    • Etiquetas Meta

    • Técnicas de SEO on site

    • Integración de capa social

      • Twitter cards

      • Facebook Open Graph

      • Integración de botones «Me gusta» y «Retweet»



    • Desarrollo de interactividad con jQuery

      • Introducción a la integración de jQuery

      • Modificación y animación de propiedades CSS

      • Control de la visibilidad de los elementos

      • Eventos

      • Integración de plugins jQuery




  • Convocatorias

    Convocatoria Abierta
  • ¡Consulta promociones y descuentos!

    Formación bonificable por la Fundación Tripartita, organismo gestor de los fondos dedicados a formación continua para los trabajadores. A través de esta fundación estatal, todas las empresas pueden beneficiarse de ayudas económicas a los distintos planes de formación a sus empleados que quieran llevar a cabo y que se hacen efectivas mediante bonificaciones en las cotizaciones a la Seguridad Social.

    Fictizia Empresas incluye, entre los servicios que ofrece, la gestión de los trámites con la Fundación Estatal para la bonificación de sus programas de formación a medida.
  •  

    Ángel Corral AriasÁngel Corral. Digital Product Designer y Desarrollador Front-end con más de 10 años de experiencia. Desde hace 9 años compagina con la docencia su trabajo para clientes como LG, Qbicom, MBO, Cohética digital, el Sindicato de Petróleo y Gas argentino, el Dpto. de infografía de El Mundo o jDownloader. Es además coautor de dos guías prácticas editadas por Anaya Multimedia y está certificado como Adobe Certified Expert.
  • Lugares

    Madrid
  • Metodología

    Teórico-práctica. Cada día de clase, las horas lectivas se componen de exposiciones de los contenidos teóricos del curso por parte del profesor intercaladas con ejercicios prácticos desarrollados entre este y los alumnos. 
 

¿Te interesa el curso?
Pide que te informen sobre Curso de Maquetación web con HTML5 y CSS3

Al pulsar el botón "Infórmate" he leído y acepto el Aviso legal de Avanza en tu carrera.

Validando datos

También podemos ofrecerte otras alternativas similares a este curso
Ir arriba