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

2 hour landing pages

2e67f934ca75ac0e7440f08f0d74002f?s=47 Ignacio
June 14, 2019
Programming
0
88

2 hour landing pages

How to build a landing page in 2 hours

2e67f934ca75ac0e7440f08f0d74002f?s=128

Ignacio

June 14, 2019
Tweet

More Decks by Ignacio

See All by Ignacio
2e67f934ca75ac0e7440f08f0d74002f?s=48 ignacioaal
0
98
2e67f934ca75ac0e7440f08f0d74002f?s=48 ignacioaal
0
120
2e67f934ca75ac0e7440f08f0d74002f?s=48 ignacioaal
0
110

Other Decks in Programming

See All in Programming
6aaaf03c4f5c681d89c3078bd6070a6f?s=48 rumi_yamaguchi
0
1.5k
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
190
Dc8d7b0277a1646d6842105241e8bef5?s=48 peacock0803sz
0
330
F74146bada61d15a5e652919815bd355?s=48 satoki
0
310
7988692211244373f0e84a922a1f4f78?s=48 inabajunmr
0
9.3k
0ed400174f90a4bcee05f3455597932f?s=48 ohbarye
3
360
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
130
E65d5a0c854f5433a69859ec0cd4d5bb?s=48 massa142
0
320
1eecfce54b4f902784d046328935efd4?s=48 makoto_inoue
0
150
Ee4cc84c4dedde009c013c6d5f1a2e84?s=48 tatchnicolas
2
2.3k
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
140
265bcbb56e831266de7a9f9281aab57a?s=48 appleboy
0
150

Featured

See All Featured
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
29
5.1k
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.4k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.2k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
21
1.1k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
58k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.1k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
25
1.2k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
496
110k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
760
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
293
110k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k

Transcript

  1. Le Wagon 10.04.2019 35 ciudades Presentes en #1 worldwide Bootcamp

    5000+ Graduados 100+ MM USD Capital levantado por graduados

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

    2 horas Le Wagon HTML CSS

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

    Le Wagon

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

  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

  6. No necesitas hacerlo Otras soluciones desde cero Le Wagon

  7. Legos Le Wagon

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

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

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

    Wagon

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

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

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

  14. Le Wagon 07.02.2019 Hipervínculos

  15. Le Wagon 07.02.2019 Head y body

  16. None

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

    los robots

  18. Contenido Agreguemos Le Wagon 07.02.2019

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

  20. Le Wagon 07.02.2019 CSS

  21. Le Wagon 07.02.2019 Primera etapa =

  22. Le Wagon 07.02.2019 Sintaxis de CSS

  23. Le Wagon 07.02.2019 Un ejemplo

  24. Le Wagon 07.02.2019 Colores

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

    color de fondo

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

  27. Le Wagon 07.02.2019 Tipografía: familia

  28. Le Wagon 07.02.2019 Tipografía: familia

  29. Le Wagon 07.02.2019 Tipografía: familia

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

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

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

  33. Le Wagon 07.02.2019 Google Fonts

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

  35. Le Wagon 07.02.2019 <div>[…]</div>

  36. Le Wagon 07.02.2019 Todo está hecho de <divs>!

  37. Le Wagon 07.02.2019 - Contenido Box model

  38. Le Wagon 07.02.2019 - Margen Box model

  39. Le Wagon 07.02.2019 - bordes Box model

  40. Le Wagon 07.02.2019 - bordes Box model

  41. Le Wagon 07.02.2019 - radius Box model

  42. Le Wagon 07.02.2019 - shadow Box model

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

    Le Wagon

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

    Le Wagon

  45. ¿Cómo ajustas solamente las <img>? id (#) y clase (.)

    Le Wagon

  46. ¿Cómo ajustas solamente las <img>? id (#) y clase (.)

    Le Wagon

  47. ¿id o clase? Le Wagon

  48. ¡Combina! Le Wagon

  49. ¡Combina! Le Wagon

  50. ¡Combina! Le Wagon

  51. Fontawesome No queremos archivos .jpg o .png, queremos fuentes o

    iconos Le Wagon 07.02.2019

  52. Bootstrap 4 Le Wagon 07.02.2019

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

  54. Esquema semántico Le Wagon 07.02.2019

  55. Clases para tu texto Le Wagon 07.02.2019

  56. Clases para tus botones Le Wagon 07.02.2019

  57. Clases para tus listas Le Wagon 07.02.2019

  58. Clases para tus imágenes Le Wagon 07.02.2019

  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

  60. Sistema de Grid Le Wagon 07.02.2019

  61. Responsivo Le Wagon 07.02.2019

  62. Mobile first Le Wagon 07.02.2019

  63. ¿Cómo funciona? Le Wagon 07.02.2019

  64. Container Le Wagon 07.02.2019 Siempre comienza con un contenedor

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

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

  67. Rows Le Wagon 07.02.2019

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

  69. Cols Le Wagon 07.02.2019

  70. Media Le Wagon 07.02.2019

  71. 2 cols Le Wagon 07.02.2019

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

  73. Le Wagon 04.02.2019 30 Sept - Fulltime 9 semanas Fechas

    siguientes: 1 Oct - Part-time 24 semanas (noches y sábados)