Inicia sesión o crea una cuenta gratuita para ingresar al curso.

Curso de controles y efectos Frontend

Aprende a aplicar tus conocimientos en HTML, CSS y javaScript para crear las tendencias modernas de desarrollo frontend, como animaciones Material Design, sliders, menús, controles, ordenamiento con Drag&Drop, autocompletado con AJAX y muchísimo más. En este curso consolidarás tus conocimientos en tecnologías frontend, aprenderás mejores prácticas y crearás elementos que podrás reciclar en todos tus proyectos web.

4.6/5.0

10614 Estudiantes

Profesor:

Uriel Hernández

CTO

Este curso incluye:

Certificado de finalización
8h 9m
horas de contenido
Recursos descargables

Inicia sesión o crea una cuenta gratuita para ingresar al curso.

Crear Cuenta

¿Ya tienes cuenta? Inicia sesión

Este curso incluye:

Certificado de finalización
8h 9m
horas de contenido
Recursos descargables

Temario

Módulo 1 | 1 clases

Introducción

Clase 1

1.- Presentación del curso

Módulo 2 | 3 clases

Controles con CSS

Clase 1

Hero Images

Clase 2

Sombras realistas

Clase 3

Viñetas personalizadas para listas

Módulo 3 | 5 clases

Slider

Clase 1

1.- Marcado (HTML)

Clase 2

2.- Ancho infinito

Clase 3

3.- Movimiento automático

Clase 4

4.- Controles del slider e indicadores

Clase 5

5.- Mover por controles

Módulo 4 | 2 clases

Navegación sticky

Clase 1

1.- Preparar página

Clase 2

2.- Efecto sticky

Módulo 5 | 5 clases

Menú hamburguesa

Clase 1

1.- Marcado (HTML)

Clase 2

2.- Iconos animados con transformicons

Clase 3

3.- Abrir y cerrar menú

Clase 4

4.- Menú lateral

Clase 5

5.- Resolver bug overflow

Módulo 6 | 2 clases

Video e imágenes

Clase 1

Previsualización de subida de imágenes

Clase 2

Reproducir video al llegar al viewport

Módulo 7 | 2 clases

Navegación por tabs

Clase 1

1.- Estructura y diseño

Clase 2

2.- Mover tabs e indicador

Módulo 8 | 3 clases

Autocompletado

Clase 1

1.- Marcado y peticiones AJAX

Clase 2

2.- Datalist para ofrecer opciones

Clase 3

3.- Autocompletado con peticiones optimizadas

Módulo 9 | 5 clases

Ordenamiento con Drag&Drop

Clase 1

1.- Marcado, DragStart y DragEnd

Clase 2

2.- Arrastrar elemento y quitar fantasma de referencia

Clase 3

3.- Detectar si el mouse pasa sobre un elemento

Clase 4

4.- Referencia visual de dónde se colocará el elemento

Clase 5

5.- Reordenar elemento

Módulo 10 | 2 clases

Animaciones

Clase 1

Animaciones con CSS

Clase 2

Filtro de elementos animado

Módulo 11 | 4 clases

MaterialDesign de Google

Clase 1

Input MaterialDesign

Clase 2

Coreografía de entrada de elementos 1/2

Clase 3

Coreografía de entrada de elementos 2/2

Clase 4

Efecto ripple de MaterialDesign

Módulo 12 | 2 clases

Otros controles

Clase 1

Acordeón

Clase 2

Efecto Me Gusta

Módulo 13 | 3 clases

Calendario

Clase 1

Construir tabla y obtener días de todos los meses

Clase 2

Botones de control del calendario

Clase 3

Seleccionar y obtener fecha

Módulo 14 | 2 clases

Efectos con texto

Clase 1

Efecto de entrada con letras aleatorias

Clase 2

Entrada de animación por letras

Módulo 15 | 4 clases

Nuevos efectos

Clase 1

Resaltar con desenfoque

Clase 2

Efecto Instagram Stories

Clase 3

Slider con elementos apilados

Clase 4

Animaciones con Sprites en CSS

Módulo 16 | 4 clases

Gratutios y demostraciones

Clase 1

Encuadrar Imágenes con 10 líneas de código

Clase 2

Sombras con degradado en CSS

Clase 3

Colorear SVG con degradados

Clase 4

Líneas decorativas para títulos

Módulo 17 | 11 clases

Dark Mode

Clase 1

Presentación del bloque

Clase 2

Maquetación y alineado

Clase 3

Colores con custom properties

Clase 4

Tips para seleccionar colores

Clase 5

prefers-color-scheme

Clase 6

Control toggle

Clase 7

Interactividad dark y light

Clase 8

Leer con JavaScript si usamos dark o light

Clase 9

Guardar y leer datos desde LocalStorage

Clase 10

Detalles de mejora del código

Clase 11

Iconos SVG

Valoraciones

4.6

2767.0 Valoraciones

3 (0.1%)

12 (0.4%)

93 (3.4%)

988 (35.7%)

1671 (60.4%)

Profesor

Uriel Hernández

CTO

Desarrollador Web con más de 7 años de experiencia. He trabajado con Ruby, JavaScript, Go en distintos proyectos en producción. Me apasiona la creación de productos y soy un fanático de la web.

Preguntas frecuentes

¿Cuándo empieza el curso?

Los cursos de Código Facilito son 100% online On-demand lo que significa que están grabados y los puedes empezar cuando quieras y a tu propio ritmo.
¿Cómo funciona la membresía premium?

Al suscribirte tendrás acceso ilimitado a todos los cursos de Código Facilito. En tu cuenta podrás agregar cursos, ver cualquier video, tener seguimiento de tus cursos y en los cursos que lo indican: presentar un examen al final y obtener un certificado digital. Además tendrás acceso exclusivo a clases premium semanales que son en vivo donde puedes hacer preguntas al instructor.

Cada mes agregamos nuevos contenidos, actualizando cursos existentes y cursos completamente nuevos.

La membresía se actualiza de manera recurrente y puedes cancelar en cualquier momento desde tu cuenta en un par de clics.
¿Qué puedo aprender en Código Facilito?

Nos especializamos en programación: desde lo básico hasta lo pro. Frontend, HTML5, CSS, JavaScript, backend con Python, Rails y mucho más. Puedes explorar nuestro catálogo completo aquí.
Tengo otra pregunta, ¿dónde los contacto?

Te atendemos con gusto en [email protected]