Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2 hour landing pages
Search
Ignacio
June 14, 2019
Programming
0
310
2 hour landing pages
How to build a landing page in 2 hours
Ignacio
June 14, 2019
Tweet
Share
More Decks by Ignacio
See All by Ignacio
Build MVP's without code
ignacioaal
0
300
Programación para marketing
ignacioaal
0
320
API's para principiantes
ignacioaal
0
320
Other Decks in Programming
See All in Programming
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
10
5.6k
Ruby Pattern Matching
bkuhlmann
0
920
Hanami and htmx
bkuhlmann
0
190
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
100
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.6k
Ruby GitHub Packages
bkuhlmann
0
620
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Git Lint
bkuhlmann
4
740
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
1
180
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
450
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Visualization
eitanlees
135
14k
Infographics Made Easy
chrislema
237
18k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Clear Off the Table
cherdarchuk
83
310k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Music & Morning Musume
bryan
41
5.6k
Code Reviewing Like a Champion
maltzj
513
39k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
It's Worth the Effort
3n
180
27k
Transcript
Le Wagon 10.04.2019 35 ciudades Presentes en #1 worldwide Bootcamp
5000+ Graduados 100+ MM USD Capital levantado por graduados
HTML y CSS básico Para crear una landing page en
2 horas Le Wagon HTML CSS
Ignacio Alonso Le Wagon Codia.co / / / DKBZ www.ignacio.al
Le Wagon
Roadmap Le Wagon 07.02.2019 Teoría Demos y Live-code Tu turno!
Una buena landing page Le Wagon definida Meta Propuesta Diseño
clara limpio llama a la acción …es la puerta a nuevos clientes CTA preciso
No necesitas hacerlo Otras soluciones desde cero Le Wagon
Legos Le Wagon
CSS Librerías de Le Wagon no re-inventes la rueda…
Setup para comenzar a programar Le Wagon lewagon.github.io/landing
HTML Define la estructura del contenido en la página Le
Wagon
Etiquetas (Tags) Siguen una sintaxis específica Le Wagon
Le Wagon 07.02.2019 Contenido de diferentes tipos Se define con
etiquetas (tags) Estructura <html>, <head>, <body> Contenido textual <h1>, <h2>, <h..>,<p> Imágenes <img> Hypervinculo <a>
Le Wagon 07.02.2019 Jerarquía de información etiquetas de headings y
párrafo Titulo 1 Titulo 2 Titulo 3 Paragrafo <h1> <h2> <h3> <p> …hasta <h6>
Le Wagon 07.02.2019 Hipervínculos
Le Wagon 07.02.2019 Head y body
None
Le Wagon 07.02.2019 head: invisible para el usuario importante para
los robots
Contenido Agreguemos Le Wagon 07.02.2019
CSS Define la apariencia de la página Le Wagon 07.02.2019
Le Wagon 07.02.2019 CSS
Le Wagon 07.02.2019 Primera etapa =
Le Wagon 07.02.2019 Sintaxis de CSS
Le Wagon 07.02.2019 Un ejemplo
Le Wagon 07.02.2019 Colores
Le Wagon 07.02.2019 Le Wagon 04.02.2019 Color de texto ≠
color de fondo
Le Wagon 07.02.2019 Color de fondo ≠ imagen de fondo
Le Wagon 07.02.2019 Tipografía: familia
Le Wagon 07.02.2019 Tipografía: familia
Le Wagon 07.02.2019 Tipografía: familia
Le Wagon 07.02.2019 Tipografía: tamaño y espaciado
Le Wagon 07.02.2019 Tipografía: alineación
Le Wagon 07.02.2019 Tipografía: “decoración”
Le Wagon 07.02.2019 Google Fonts
Box Model La base del diseño web Le Wagon 07.02.2019
Le Wagon 07.02.2019 <div>[…]</div>
Le Wagon 07.02.2019 Todo está hecho de <divs>!
Le Wagon 07.02.2019 - Contenido Box model
Le Wagon 07.02.2019 - Margen Box model
Le Wagon 07.02.2019 - bordes Box model
Le Wagon 07.02.2019 - bordes Box model
Le Wagon 07.02.2019 - radius Box model
Le Wagon 07.02.2019 - shadow Box model
¿Cómo ajustas solamente el logo? id (#) y clase (.)
Le Wagon
¿Cómo ajustas solamente el logo? id (#) y clase (.)
Le Wagon
¿Cómo ajustas solamente las <img>? id (#) y clase (.)
Le Wagon
¿Cómo ajustas solamente las <img>? id (#) y clase (.)
Le Wagon
¿id o clase? Le Wagon
¡Combina! Le Wagon
¡Combina! Le Wagon
¡Combina! Le Wagon
Fontawesome No queremos archivos .jpg o .png, queremos fuentes o
iconos Le Wagon 07.02.2019
Bootstrap 4 Le Wagon 07.02.2019
Instala Bootstrap Le Wagon 07.02.2019 https://lewagon.github.io/landing/
Esquema semántico Le Wagon 07.02.2019
Clases para tu texto Le Wagon 07.02.2019
Clases para tus botones Le Wagon 07.02.2019
Clases para tus listas Le Wagon 07.02.2019
Clases para tus imágenes Le Wagon 07.02.2019
Le Wagon 07.02.2019 Tu turno! “text-center” a tus párrafos “list-inline”
a tus links sociales “btn btn-primary” a tu CTA
Sistema de Grid Le Wagon 07.02.2019
Responsivo Le Wagon 07.02.2019
Mobile first Le Wagon 07.02.2019
¿Cómo funciona? Le Wagon 07.02.2019
Container Le Wagon 07.02.2019 Siempre comienza con un contenedor
Rows Le Wagon 07.02.2019 Después inserta “Rows”
Rows Le Wagon 07.02.2019 Después inserta “Rows”
Rows Le Wagon 07.02.2019
¿Cómo llenamos las “rows”? Le Wagon 07.02.2019
Cols Le Wagon 07.02.2019
Media Le Wagon 07.02.2019
2 cols Le Wagon 07.02.2019
Thank you. Le Wagon 04.02.2019 www.ignacio.al www.lewagon.com/mexico
Le Wagon 04.02.2019 30 Sept - Fulltime 9 semanas Fechas
siguientes: 1 Oct - Part-time 24 semanas (noches y sábados)