1. Cursos
  2. Tecnología
  3. Desarrollo Web
  4. Sitio web desde cero: de PSD a HTML5, Bootstrap 4 y Extract

Sitio web desde cero: de PSD a HTML5, Bootstrap 4 y Extract

Pasaremos de un archivo PSD a HTML5 utilizando el editor Brackets y su poderoso componente Extract para agilizar el trabajo y el tiempo de entrega.

Sitio web desde cero: de PSD a HTML5, Bootstrap 4 y Extract
Comparte este curso

Descripción del curso

Pasaremos un archivo PSD a HTML5 utilizando el editor Brackets y su poderoso componente Extract para agilizar el trabajo y el tiempo de entrega. 

Requisitos para seguir el curso a la perfección: 

Tener un amplio conocimiento del lenguaje de marcado html5, saber como aplicar estilos, con los diferentes selectores de CSS, conocer la sintaxis básica de Javascript, y saber como utilizar la librería de jQuery, todo esto de un 40 a 60% del conocimiento. 

En caso de no tener noción o conocimiento por debajo del 20% de estos lenguajes, por favor mira el vídeo de Introducción y Requisitos para más información.

Contenido del curso

Introducción

31:38
  • Introducción y Requisitos04:40AVANCE
  • ¿Cuál es el editor de código que necesito?06:49AVANCE
  • Conociendo el Editor Brackets13:07
  • Instalando Plugins en el editor Brackets07:02

Bootstrap 4

03:59:30
  • Introducción03:44
  • Descargando archivos para analizar Bootstrap 403:30
  • ¿Qué es Mobile First Web Design?04:36
  • Comprendiendo las rejillas ( grid )27:53
  • Estructurando utilizando container, filas y rejillas24:58
  • Ocultando columnas dependiendo del dispositivo17:20
  • Tipografía07:21
  • Imágenes08:17
  • Buttons11:53
  • Forms10:59
  • Tablas10:12
  • Componentes ( Tabs, dropdowns, alerts )23:32
  • Componentes parte 2 ( navbar, breadcrumb, etc )16:32
  • Ventana Modal con video de youtube, imagenes e información17:24
  • Scrollspy ( Seguimiento al menú navbar )05:30
  • Tooltips08:15
  • Popover con imágenes y vídeos de youtube16:20
  • Collapse ( Acordeón )10:04
  • Carousel11:10

Preparando archivos y demás

19:50
  • Analizando el PSD a utilizar01:47
  • Archivos Base y Configurando Extract de Brackets08:04
  • Extract Brackets PSD09:59

Empezando a codificar. Manos a la obra!

04:17:09
  • Header22:17
  • Cuerpo parte 118:31
  • Cuerpo parte 215:31
  • Parte central 119:57
  • Parte central 217:11
  • Zona team18:32
  • Zona contácto20:30
  • Formulario17:43
  • Footer05:56
  • Corrigiendo perspectiva del responsive23:18
  • Corriendo menú para el responsive05:45
  • Animando el Scroll y añadiendo Scrollspy15:26
  • Añadiendo deslizador de Imágenes ( Slider header )20:11
  • Reparando animación Scroll menú07:28
  • Agregando ScrollTop animado11:12
  • Animando revelamiento de los elementos17:41

Valoraciones

4.8/5
4 Valoraciones
  • 5 ESTRELLAS
    75%
  • 4 ESTRELLAS
    25%
  • 3 ESTRELLAS
    0%
  • 2 ESTRELLAS
    0%
  • 1 ESTRELLAS
    0%
  • Francisco Porrata
    Francisco
      Porrata
    Incluir valoración media (en números)

  • Carlos Murillo Blanco
    Carlos
      Murillo Blanco
    Incluir valoración media (en números)

  • Carlos alfredo montás caminero
    Carlos alfredo
      montás caminero
    Incluir valoración media (en números)

  • Katherine Andrea Martinez Medina
    Katherine Andrea
      Martinez Medina
    Incluir valoración media (en números)

¿Por qué pagar por un curso cuando puedes tenerlos todos?

Prueba la Suscripción ahora
O quiero saber más
Apúntate POR 50€
GRATIS con la Suscripción
|Pago aplazado