O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Le Wagon Tokyo | Build your Landing Page in 2 hours

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 103 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Le Wagon Tokyo | Build your Landing Page in 2 hours (20)

Anúncio

Mais recentes (20)

Le Wagon Tokyo | Build your Landing Page in 2 hours

  1. 1. 2h-landing page github.com/yann.klein info.lewagon.com/tokyo-landing-page Register to the workshop resource👇
  2. 2. Landing page Clear value proposition Clean design Call-to-Action CRM first milestone
  3. 3. Landing page tools
  4. 4. Let’s build it from scratch info.lewagon.com/tokyo-landing-page First step: Register!
  5. 5. Coding language Next Workshop in May/June We’ll keep you posted!
  6. 6. CSS libraries
  7. 7. Workshop outline Theoretical intros Basic concepts to understand Live-code demos We code, you don’t :) Your turn Take your time & have fun
  8. 8. Setup
  9. 9. 1. Let’s set up
  10. 10. Front-end languages
  11. 11. Structure Structure your content
  12. 12. Design Design your content
  13. 13. Animation Animate your content
  14. 14. HTML Without structure, no design
  15. 15. Different contents
  16. 16. Tag them
  17. 17. Browser apply defaults
  18. 18. Over-ride with CSS
  19. 19. Skeleton <!DOCTYPE html> <!-- end of file -->
  20. 20. Skeleton <!DOCTYPE html> <html> <!-- html code --> </html> <!-- end of file -->
  21. 21. Head & body <!DOCTYPE html> <html> <head> <!-- Intelligence (meta-data) --> </head> <body> <!-- Stuff to display--> </body> </html> <!-- end of file -->
  22. 22. Title & utf-8 <!DOCTYPE html> <html> <head> </head> <body> <!-- Stuff to display--> </body> </html> <!-- end of file --> <title>Landing</title> <meta charset="utf-8">
  23. 23. Head & google <head> <title>Le Wagon - Apprendre..</title> <meta name=“description" content=“Le Wagon est la…”> </head>
  24. 24. <head> <meta property=“og:title” content=“le Wagon - The..”> <meta property=“og:image” content=“facebook-card.jpg”> <meta property=“og:description” content=“Le Wagon is the…”> <head> Head & Facebook
  25. 25. Core syntax
  26. 26. Syntax example <a href=“http://lewagon.org” target=“_blank”> Le Wagon </a>
 Le Wagon What is the tag name? What is the content? What are the two attributes?
  27. 27. HTML - titles <h1>[...]</h1> <h2>[...]</h2> <h3>[...]</h3> <h4>[...]</h4> <h5>[...]</h5> <h6>[...]</h6>

  28. 28. HTML - paragraph <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.Veritatis laboriosam autem at ab omnis iure quis </p>
  29. 29. HTML - emphasize <p> You can emphasise <em>some words</em>, and even <strong>more if needed</strong> </p>
  30. 30. HTML - list <h2>Shopping list</h2> <ul> <li>Milk</li> <li> Butter </li> </ul> <h2>World Cup 2014</h2> <ol> <li>Germany</li> <li>Argentina</li> </ol>
  31. 31. HTML - image <img src=“logo.png” alt=“Le Wagon logo”>
  32. 32. 2. Let’s add HTML content
  33. 33. CSS Web without CSS ? Let’s find a page and cut its head!
  34. 34. Design tips First the Fonts and Colors
  35. 35. Linking stylesheets
  36. 36. CSS syntax
  37. 37. CSS vocabulary Use the good keywords on Google
  38. 38. CSS example
  39. 39. Colors h2 { color: orange; color: #FF530D; color: rgb(255, 83, 13); color: rgba(255, 83, 13, 1.0); }
  40. 40. RGB tips h2 { color: rgba(255, 255, 255, 1.0); }
  41. 41. Text vs. Background
  42. 42. Background images
  43. 43. Font family font-weight
  44. 44. Font family font-weight
  45. 45. Font family font-weight
  46. 46. Font size & spacing
  47. 47. Font color font-weight
  48. 48. Font decoration font-weight
  49. 49. Font alignment font-weight
  50. 50. Font weight
  51. 51. 3. CSS for Fonts & Colors
  52. 52. Div & Box model Real-life…
  53. 53. Div & Box model …is made of div Div Div Div Div Div
  54. 54. Box model - content
  55. 55. Box model - margins
  56. 56. Box model - border
  57. 57. Box model - border h2 { border: 1px solid green; border: 2px dashed #FF530D; }
  58. 58. Box model - radius
  59. 59. Box model - radius
  60. 60. Box model - shadow
  61. 61. 4. Wrap with div
  62. 62. id & class
  63. 63. how do you resize the logo only?
  64. 64. how do you resize the logo only?
  65. 65. how do you style staff pictures only?
  66. 66. how do you style staff pictures only?
  67. 67. id or class?
  68. 68. Combine
  69. 69. Combine
  70. 70. Combine
  71. 71. 5. Name your tags
  72. 72. Fontawesome You don’t want .png or .jpg files You want a font of icons
  73. 73. 6. Fontawesome
  74. 74. 7. Let’s setup
  75. 75. Semantic scheme
  76. 76. Text classes
  77. 77. Button classes
  78. 78. List classes
  79. 79. Image classes
  80. 80. Your turn “text-center” on your paragraphs “list-inline” on your social list “btn btn-primary” for your subscribe button
  81. 81. Grid system
  82. 82. Responsive A grid of cards has different layouts depending on the device!
  83. 83. Mobile first
  84. 84. How does it work?
  85. 85. Container always start with a container
  86. 86. Rows then insert rows
  87. 87. Rows then insert rows
  88. 88. Rows
  89. 89. Rows 12 12 12
  90. 90. Cols 12 12 12 3 3 3 3 6 6 col-12
  91. 91. How do we fill rows?
  92. 92. Cols the elementary block
  93. 93. Media col-12: Small devices (Mobiles > 576px) col-md-6: Medium devices (Tablet > 768px) col-lg-3: Large devices (Laptop > 992px) col-xl-: Extra large devices ( Desktop > 1200px)
  94. 94. Example - 2 cols
  95. 95. Example - 2 cols <div class=“container”> <div class=“row”> <div class=“col-6”></div> <div class=“col-6”></div> </div> </div> .col-6 will apply on larger screens
  96. 96. What happens? <div class=“container”> <div class=“row”> <div class=“col-6”></div> <div class=“col-6”></div> <div class=“col-6”></div> </div> </div>
  97. 97. Return on new line
  98. 98. Responsive example
  99. 99. Responsive example <div class=“container”> <div class=“row”> <div class=“col-6 col-md-3”></div> <div class=“col-6 col-md-3”></div> <div class=“col-6 col-md-3”></div> <div class=“col-6 col-md-3”></div> </div> </div>
  100. 100. 8. The grid
  101. 101. Go further yann.klein@lewagon.org lewagon.com/tokyo
  102. 102. Thank you!

×