Curso de controles y efectos Frontend

4.6/5.0

14126 Estudiantes

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

14126

Profesor:

Uriel Hernández

Este curso incluye:

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

Empezar curso

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

4304.0 Valoraciones

5 (0.1%)

17 (0.4%)

144 (3.3%)

1547 (35.9%)

2591 (60.2%)

Profesor:

Uriel Hernández

CTO de Código Facilito

Desarrollador Web con más de 12 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 ayuda@codigofacilito.com

Desbloquea todo el contenido con Premium

Las membresías incluyen:

Acceso inmediato a todos los cursos y Bootcamp Replays
Certificados al completar cualquier curso o ruta
Nuevo contenido publicado cada semana
Rutas de aprendizaje para especializarte como desarrollador
Cancela tu suscripción desde tu perfil en un par de clicks

Ahorra 7 meses

Premium Anual

$10USD/mes

Pago anual de $194 $120

Elegir plan

Premium Mensual

$26USD/mes

Pago por mes

Elegir plan

Pagos seguros con tarjeta de crédito o débito, Paypal, y BTC:

"En Código Facilito crean una comunidad sana, con cursos increíbles y tutores de gran nivel. Y no solo lo digo yo, lo dicen otros 700 mil usuarios de la plataforma. Gracias, Código Facilito, mi admiración y apoyo, siempre."

Natsumi Angel

Engineer Manager en CLARA