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

2 hour landing pages

2 hour landing pages

How to build a landing page in 2 hours

Ignacio

June 14, 2019
Tweet

More Decks by Ignacio

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  6. No necesitas hacerlo
    Otras soluciones
    desde cero
    Le Wagon

    View full-size slide

  7. Legos
    Le Wagon

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    , ,
    Contenido textual

    , , ,
    Imágenes


    Hypervinculo


    View full-size 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 full-size slide

  14. Le Wagon 07.02.2019
    Hipervínculos

    View full-size slide

  15. Le Wagon 07.02.2019
    Head y body

    View full-size slide

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

    View full-size slide

  17. Contenido
    Agreguemos
    Le Wagon 07.02.2019

    View full-size slide

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

    View full-size slide

  19. Le Wagon 07.02.2019
    CSS

    View full-size slide

  20. Le Wagon 07.02.2019
    Primera etapa
    =

    View full-size slide

  21. Le Wagon 07.02.2019
    Sintaxis de CSS

    View full-size slide

  22. Le Wagon 07.02.2019
    Un ejemplo

    View full-size slide

  23. Le Wagon 07.02.2019
    Colores

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Le Wagon 07.02.2019
    Tipografía: familia

    View full-size slide

  27. Le Wagon 07.02.2019
    Tipografía: familia

    View full-size slide

  28. Le Wagon 07.02.2019
    Tipografía: familia

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Le Wagon 07.02.2019
    Google Fonts

    View full-size slide

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

    View full-size slide

  34. Le Wagon 07.02.2019
    […]

    View full-size slide

  35. Le Wagon 07.02.2019
    Todo está hecho de !

    View full-size slide

  36. Le Wagon 07.02.2019
    - Contenido
    Box model

    View full-size slide

  37. Le Wagon 07.02.2019
    - Margen
    Box model

    View full-size slide

  38. Le Wagon 07.02.2019
    - bordes
    Box model

    View full-size slide

  39. Le Wagon 07.02.2019
    - bordes
    Box model

    View full-size slide

  40. Le Wagon 07.02.2019
    - radius
    Box model

    View full-size slide

  41. Le Wagon 07.02.2019
    - shadow
    Box model

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. ¿id o clase?
    Le Wagon

    View full-size slide

  47. ¡Combina!
    Le Wagon

    View full-size slide

  48. ¡Combina!
    Le Wagon

    View full-size slide

  49. ¡Combina!
    Le Wagon

    View full-size slide

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

    View full-size slide

  51. Bootstrap 4
    Le Wagon 07.02.2019

    View full-size slide

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

    View full-size slide

  53. Esquema semántico
    Le Wagon 07.02.2019

    View full-size slide

  54. Clases para tu texto
    Le Wagon 07.02.2019

    View full-size slide

  55. Clases para tus botones
    Le Wagon 07.02.2019

    View full-size slide

  56. Clases para tus listas
    Le Wagon 07.02.2019

    View full-size slide

  57. Clases para tus imágenes
    Le Wagon 07.02.2019

    View full-size slide

  58. 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 full-size slide

  59. Sistema de Grid
    Le Wagon 07.02.2019

    View full-size slide

  60. Responsivo
    Le Wagon 07.02.2019

    View full-size slide

  61. Mobile first
    Le Wagon 07.02.2019

    View full-size slide

  62. ¿Cómo funciona?
    Le Wagon 07.02.2019

    View full-size slide

  63. Container
    Le Wagon 07.02.2019
    Siempre comienza con
    un contenedor

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. Rows
    Le Wagon 07.02.2019

    View full-size slide

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

    View full-size slide

  68. Cols
    Le Wagon 07.02.2019

    View full-size slide

  69. Media
    Le Wagon 07.02.2019

    View full-size slide

  70. 2 cols
    Le Wagon 07.02.2019

    View full-size slide

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

    View full-size slide

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

    View full-size slide