notifications Notificaciones

Marcar todas como leídas

Ver más

Suscríbete al plan premium y obtén acceso a éste y todos nuestros cursos.

Ir a la suscripción
Frontend 2016

Curso de Desarrollo Web Frontend 2016

Vídeos en el curso

76

Duración total

8h 23m

Temario

Introducción

1.- Presentación del curso

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 6m 10s

2.- Programas a utilizar

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 2m 55s

3.- Servidor local

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 8m 35s

4.- Cómo funciona la web

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 9m 6s

5.- Introducción a HTML

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 13m 24s

6.- Introducción a CSS

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 12m 33s

7.- Configurando nuestro proyecto

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 10m 17s

8.- HTML5 Boilerplate

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 13m 32s

Sección portada

9.- Mostrar vídeo

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 11m 3s

10.- Centrar vídeo

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 6m 28s

11.- Poster y límites de tamaño

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 5m 14s

12.- Centrar contenido verticalmente

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 7m 24s

13.- Trabajando con z-index

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 17s

14.- Google Fonts

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 6m 19s

15.- Colocar logo y menú

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 9m 46s

16.- Bootstrap

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 9m 51s

17.- Programación en HAML

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 3m 41s

18.- Terminando navegación, transiciones y hover

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 5m 13s

19.- Trabajando con Position

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 6m 2s

Sticky Navigation

20.- Sticky Navigation

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 1m 35s

21.- Marcado de la navegación

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 43s

22.- Ocultar navegación inicial e importar jQuery

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 8m 12s

23.- Monitorear el scroll

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 9m 24s

24.- Scroll al final de la pantalla

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 58s

25.- Monitorear navegación en scroll

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 8m 13s

26.- Animar entrada del menú

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 22s

Menú con imágenes

27.- Mostrar imágenes del menú

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 6m 31s

28.- Trabajando con imágenes de fondo

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 19s

29.- Efecto screen overlay

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 5m 13s

30.- Mostrar y centrar info del producto

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 5m 45s

31.- Centrar menú card

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 5m 32s

Slider

32.- Slider de imágenes

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 0m 38s

33.- Marcado del slider

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 5m 42s

34.- Estilos para el slider

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 8m 45s

35.- Mover la galería con javaScript

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 8m 11s

36.- Reiniciar transición del slider

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 7m 13s

Formulario de contacto

37.- Card

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 12m 13s

38.- Marcado del formulario

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 10m 4s

39.- Estilos del formulario

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 11s

40.- Enviar correo de contacto

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 3m 49s

41.- Preparar AJAX y formulario JSON

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 7m 37s

42.- Enviar AJAX

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 6m 17s

43.- Formulario a pasos, inicio

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 11m 2s

44.- Estilos formulario a pasos

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 5m 40s

45.- Mover formulario con javaScript

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 13m 2s

46.- Controles formulario

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 5m 5s

47.- Funcionalidad controles

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 18m 21s

48.- Finalizar formulario a pasos

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 11m 3s

Mapa

49.- Colocar mapa

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 10m 59s

50.- CSS para el mapa

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 1m 48s

51.- Obtener localización del usuario

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 5m 12s

52.- Calcular distancia

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 8m 34s

53.- String templates

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 3m 41s

54.- Colocar marcador

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 1m 15s

Offline

55.- Offline apps

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 0m 47s

56.- Vista offline

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 7m 25s

57.- Estilos vista offline

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 5m 26s

58.- Qué son los service workers

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 9m 53s

59.- Guardar en cache

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 35s

60.- Fetch

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 8m 24s

61.- Evitar cache del navegador

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 49s

62.- Mostrar vista offline

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 25s

63.- Limpiar cache y detalles

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 10m 57s

Responsive Design

64.- Introducción al bloque

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 34s

65.- Menú responsivo

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 6m 21s

66.- Desplegar y ocultar menú

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 3m 31s

67.- Intercambiar icono menú

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 1m 46s

68.- Responsive step-form

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 6m 8s

69.- Height Media queries

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 3m 11s

70.- Links navegación

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 48s

71.- Mejorar sticky navigation

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 2m 19s

72.- Obtener hora del día

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 3m 43s

Deploy

73.- Concatenar archivos

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 5m 27s

74.- Deploy a Heroku Parte 1

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 3m 6s

75.- Deploy a Heroku Parte 2

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 6m 6s

76.- Detalles finales (vídeo final)

Clock grey 946fdd16a5e03167cf2684dd0e2d34aaa1277b59557f5272c118397cc9ba1484 4m 26s