Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2 hour landing pages

Ignacio
June 14, 2019
Programming
0
240

2 hour landing pages

How to build a landing page in 2 hours

Ignacio

June 14, 2019
Tweet

More Decks by Ignacio

See All by Ignacio
Build MVP's without code
ignacioaal
0
250
Programación para marketing
ignacioaal
0
260
API's para principiantes
ignacioaal
0
250

Other Decks in Programming

See All in Programming
DIY Your Touchpad Experience: Building Your Own Gestures
iberianpig
1
1.2k
多様なプロトコルと 駆動モデルをサポートするIoTゲートウェイの開発と運用の知見
takesinoda
0
170
サーバーサイド開発にありがたい GitHub Copilot / ChatGPT
masatoshiitoh
0
500
フロントエンドエンジニアの友人と“型”で話がすれ違った原因 YUMEMI.grow合同LT会in横浜 @Kaito-Dogi
doggy
1
360
M5Stack用の指紋認証デバイスを試す
ufoo68
0
110
読みやすいコードの書き方 第 2 回 / Code readability: Session 2 (ver. 2, Ja)
munetoshi
0
220
良い開発生産性を目指せば採用もうまくいく
rinchsan
1
380
次なるルーターパッケージ選定のしざまと決め手について
yuzuy
2
210
The Angular Renaissance: Architectures with Modern Angular
manfredsteyer
PRO
1
290
AWS CDKのあるあるお悩みに答えたい
tmokmss
5
1.3k
Code readability: Session 1 (ver. 2, En)
munetoshi
0
150
LINEBotCourse.pdf
maguroalternative
0
110

Featured

See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
23
1.8k
Statistics for Hackers
jakevdp
787
210k
Code Review Best Practice
trishagee
53
12k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.7k
What's in a price? How to price your products and services
michaelherold
234
10k
Ruby is Unlike a Banana
tanoku
93
9.7k
Building Applications with DynamoDB
mza
86
5.1k
Side Projects
sachag
450
38k
Build your cross-platform service in a week with App Engine
jlugia
222
17k
BBQ
matthewcrist
75
8.2k
Bootstrapping a Software Product
garrettdimon
PRO
299
110k

Transcript

  1. Le Wagon 10.04.2019
    35 ciudades
    Presentes en
    #1 worldwide
    Bootcamp
    5000+
    Graduados
    100+ MM USD
    Capital levantado
    por graduados

    View Slide

  2. HTML y CSS básico
    Para crear una landing page en 2 horas
    Le Wagon
    HTML CSS

    View Slide

  3. Ignacio Alonso
    Le Wagon
    Codia.co / / / DKBZ
    www.ignacio.al
    Le Wagon

    View Slide

  4. Roadmap
    Le Wagon 07.02.2019
    Teoría
    Demos y Live-code
    Tu turno!

    View Slide

  5. 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

    View Slide

  6. No necesitas hacerlo
    Otras soluciones
    desde cero
    Le Wagon

    View Slide

  7. Legos
    Le Wagon

    View Slide

  8. CSS
    Librerías de
    Le Wagon
    no re-inventes la rueda…

    View Slide

  9. Setup
    para comenzar a programar
    Le Wagon
    lewagon.github.io/landing

    View Slide

  10. HTML
    Define la estructura del
    contenido en la página
    Le Wagon

    View Slide

  11. Etiquetas (Tags)
    Siguen una sintaxis específica
    Le Wagon

    View Slide

  12. Le Wagon 07.02.2019
    Contenido de diferentes tipos
    Se define con etiquetas (tags)
    Estructura

    , ,
    Contenido textual

    , , ,
    Imágenes


    Hypervinculo


    View Slide

  13. Le Wagon 07.02.2019
    Jerarquía de información
    etiquetas de headings y párrafo
    Titulo 1

    Titulo 2

    Titulo 3

    Paragrafo




    …hasta

    View Slide

  14. Le Wagon 07.02.2019
    Hipervínculos

    View Slide

  15. Le Wagon 07.02.2019
    Head y body

    View Slide

  16. View Slide

  17. Le Wagon 07.02.2019
    head: invisible para el usuario
    importante para los robots

    View Slide

  18. Contenido
    Agreguemos
    Le Wagon 07.02.2019

    View Slide

  19. CSS
    Define la apariencia de la
    página
    Le Wagon 07.02.2019

    View Slide

  20. Le Wagon 07.02.2019
    CSS

    View Slide

  21. Le Wagon 07.02.2019
    Primera etapa
    =

    View Slide

  22. Le Wagon 07.02.2019
    Sintaxis de CSS

    View Slide

  23. Le Wagon 07.02.2019
    Un ejemplo

    View Slide

  24. Le Wagon 07.02.2019
    Colores

    View Slide

  25. Le Wagon 07.02.2019
    Le Wagon 04.02.2019
    Color de texto ≠ color de fondo

    View Slide

  26. Le Wagon 07.02.2019
    Color de fondo ≠ imagen de fondo

    View Slide

  27. Le Wagon 07.02.2019
    Tipografía: familia

    View Slide

  28. Le Wagon 07.02.2019
    Tipografía: familia

    View Slide

  29. Le Wagon 07.02.2019
    Tipografía: familia

    View Slide

  30. Le Wagon 07.02.2019
    Tipografía: tamaño y espaciado

    View Slide

  31. Le Wagon 07.02.2019
    Tipografía: alineación

    View Slide

  32. Le Wagon 07.02.2019
    Tipografía: “decoración”

    View Slide

  33. Le Wagon 07.02.2019
    Google Fonts

    View Slide

  34. Box Model
    La base del diseño web
    Le Wagon 07.02.2019

    View Slide

  35. Le Wagon 07.02.2019
    […]

    View Slide

  36. Le Wagon 07.02.2019
    Todo está hecho de !

    View Slide

  37. Le Wagon 07.02.2019
    - Contenido
    Box model

    View Slide

  38. Le Wagon 07.02.2019
    - Margen
    Box model

    View Slide

  39. Le Wagon 07.02.2019
    - bordes
    Box model

    View Slide

  40. Le Wagon 07.02.2019
    - bordes
    Box model

    View Slide

  41. Le Wagon 07.02.2019
    - radius
    Box model

    View Slide

  42. Le Wagon 07.02.2019
    - shadow
    Box model

    View Slide

  43. ¿Cómo ajustas
    solamente el logo?
    id (#) y clase (.)
    Le Wagon

    View Slide

  44. ¿Cómo ajustas
    solamente el logo?
    id (#) y clase (.)
    Le Wagon

    View Slide

  45. ¿Cómo ajustas
    solamente las ?
    id (#) y clase (.)
    Le Wagon

    View Slide

  46. ¿Cómo ajustas
    solamente las ?
    id (#) y clase (.)
    Le Wagon

    View Slide

  47. ¿id o clase?
    Le Wagon

    View Slide

  48. ¡Combina!
    Le Wagon

    View Slide

  49. ¡Combina!
    Le Wagon

    View Slide

  50. ¡Combina!
    Le Wagon

    View Slide

  51. Fontawesome
    No queremos archivos .jpg o
    .png, queremos fuentes o
    iconos
    Le Wagon 07.02.2019

    View Slide

  52. Bootstrap 4
    Le Wagon 07.02.2019

    View Slide

  53. Instala Bootstrap
    Le Wagon 07.02.2019
    https://lewagon.github.io/landing/

    View Slide

  54. Esquema semántico
    Le Wagon 07.02.2019

    View Slide

  55. Clases para tu texto
    Le Wagon 07.02.2019

    View Slide

  56. Clases para tus botones
    Le Wagon 07.02.2019

    View Slide

  57. Clases para tus listas
    Le Wagon 07.02.2019

    View Slide

  58. Clases para tus imágenes
    Le Wagon 07.02.2019

    View Slide

  59. 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

    View Slide

  60. Sistema de Grid
    Le Wagon 07.02.2019

    View Slide

  61. Responsivo
    Le Wagon 07.02.2019

    View Slide

  62. Mobile first
    Le Wagon 07.02.2019

    View Slide

  63. ¿Cómo funciona?
    Le Wagon 07.02.2019

    View Slide

  64. Container
    Le Wagon 07.02.2019
    Siempre comienza con
    un contenedor

    View Slide

  65. Rows
    Le Wagon 07.02.2019
    Después inserta “Rows”

    View Slide

  66. Rows
    Le Wagon 07.02.2019
    Después inserta “Rows”

    View Slide

  67. Rows
    Le Wagon 07.02.2019

    View Slide

  68. ¿Cómo llenamos las “rows”?
    Le Wagon 07.02.2019

    View Slide

  69. Cols
    Le Wagon 07.02.2019

    View Slide

  70. Media
    Le Wagon 07.02.2019

    View Slide

  71. 2 cols
    Le Wagon 07.02.2019

    View Slide

  72. Thank you.
    Le Wagon 04.02.2019
    www.ignacio.al
    www.lewagon.com/mexico

    View Slide

  73. Le Wagon 04.02.2019
    30 Sept - Fulltime 9 semanas
    Fechas siguientes:
    1 Oct - Part-time 24 semanas
    (noches y sábados)

    View Slide