How to build a landing page in 2 hours
Le Wagon 10.04.201935 ciudadesPresentes en#1 worldwideBootcamp5000+Graduados100+ MM USDCapital levantadopor graduados
View Slide
HTML y CSS básicoPara crear una landing page en 2 horasLe WagonHTML CSS
Ignacio AlonsoLe WagonCodia.co / / / DKBZwww.ignacio.alLe Wagon
RoadmapLe Wagon 07.02.2019TeoríaDemos y Live-codeTu turno!
Una buena landing pageLe WagondefinidaMetaPropuestaDiseñoclaralimpiollama a la acción…es la puerta a nuevos clientesCTA preciso
No necesitas hacerloOtras solucionesdesde ceroLe Wagon
LegosLe Wagon
CSSLibrerías deLe Wagonno re-inventes la rueda…
Setuppara comenzar a programarLe Wagonlewagon.github.io/landing
HTMLDefine la estructura delcontenido en la páginaLe Wagon
Etiquetas (Tags)Siguen una sintaxis específicaLe Wagon
Le Wagon 07.02.2019Contenido de diferentes tiposSe define con etiquetas (tags)Estructura, , Contenido textual , , ,Imágenes Hypervinculo
Le Wagon 07.02.2019Jerarquía de informaciónetiquetas de headings y párrafoTitulo 1Titulo 2 Titulo 3Paragrafo…hasta
Le Wagon 07.02.2019Hipervínculos
Le Wagon 07.02.2019Head y body
Le Wagon 07.02.2019head: invisible para el usuarioimportante para los robots
ContenidoAgreguemosLe Wagon 07.02.2019
CSSDefine la apariencia de lapáginaLe Wagon 07.02.2019
Le Wagon 07.02.2019CSS
Le Wagon 07.02.2019Primera etapa=
Le Wagon 07.02.2019Sintaxis de CSS
Le Wagon 07.02.2019Un ejemplo
Le Wagon 07.02.2019Colores
Le Wagon 07.02.2019Le Wagon 04.02.2019Color de texto ≠ color de fondo
Le Wagon 07.02.2019Color de fondo ≠ imagen de fondo
Le Wagon 07.02.2019Tipografía: familia
Le Wagon 07.02.2019Tipografía: tamaño y espaciado
Le Wagon 07.02.2019Tipografía: alineación
Le Wagon 07.02.2019Tipografía: “decoración”
Le Wagon 07.02.2019Google Fonts
Box ModelLa base del diseño webLe Wagon 07.02.2019
Le Wagon 07.02.2019[…]
Le Wagon 07.02.2019Todo está hecho de !
Le Wagon 07.02.2019- ContenidoBox model
Le Wagon 07.02.2019- MargenBox model
Le Wagon 07.02.2019- bordesBox model
Le Wagon 07.02.2019- radiusBox model
Le Wagon 07.02.2019- shadowBox model
¿Cómo ajustassolamente el logo?id (#) y clase (.)Le Wagon
¿Cómo ajustassolamente las ?id (#) y clase (.)Le Wagon
¿id o clase?Le Wagon
¡Combina!Le Wagon
FontawesomeNo queremos archivos .jpg o.png, queremos fuentes oiconosLe Wagon 07.02.2019
Bootstrap 4Le Wagon 07.02.2019
Instala BootstrapLe Wagon 07.02.2019https://lewagon.github.io/landing/
Esquema semánticoLe Wagon 07.02.2019
Clases para tu textoLe Wagon 07.02.2019
Clases para tus botonesLe Wagon 07.02.2019
Clases para tus listasLe Wagon 07.02.2019
Clases para tus imágenesLe Wagon 07.02.2019
Le Wagon 07.02.2019Tu turno!“text-center” a tus párrafos“list-inline” a tus links sociales“btn btn-primary” a tu CTA
Sistema de GridLe Wagon 07.02.2019
ResponsivoLe Wagon 07.02.2019
Mobile firstLe Wagon 07.02.2019
¿Cómo funciona?Le Wagon 07.02.2019
ContainerLe Wagon 07.02.2019Siempre comienza conun contenedor
RowsLe Wagon 07.02.2019Después inserta “Rows”
RowsLe Wagon 07.02.2019
¿Cómo llenamos las “rows”?Le Wagon 07.02.2019
ColsLe Wagon 07.02.2019
MediaLe Wagon 07.02.2019
2 colsLe Wagon 07.02.2019
Thank you.Le Wagon 04.02.2019www.ignacio.alwww.lewagon.com/mexico
Le Wagon 04.02.201930 Sept - Fulltime 9 semanasFechas siguientes:1 Oct - Part-time 24 semanas(noches y sábados)