More Related Content
What's hot
What's hot (20)
Similar to Le Wagon Tokyo - 2 hours landing page
Similar to Le Wagon Tokyo - 2 hours landing page (20)
Recently uploaded
Recently uploaded (20)
Le Wagon Tokyo - 2 hours landing page
- 2. Landing page Clear proposition value Clean design Call-to-Action CRM first milestone
- 4. Let’s build it from scratch http://lewagon.github.io/landing
- 6. CSS libraries Bootstrap Material Design
- 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. Setup
- 9. 1. Let’s set up
- 14. HTML Without structure, no design
- 16. Tag them
- 19. Skeleton <!DOCTYPE html> <!-- end of file -->
- 20. Skeleton <!DOCTYPE html> <html> <!-- html code --> </html> <!-- end of file -->
- 21. Head & body <!DOCTYPE html> <html> <head> <!-- Intelligence (meta-data) --> </head> <body> <!-- Stuff to display--> </body> </html> <!-- end of file -->
- 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. Head & google <head> <title>Le Wagon - Apprendre..</title> <meta name=“description" content=“Le Wagon est la…”> </head>
- 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. Core syntax
- 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?
- 28. HTML - paragraph <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.Veritatis laboriosam autem at ab omnis iure quis </p>
- 29. HTML - emphasize <p> You can emphasise <em>some words</em>, and even <strong>more if needed</strong> </p>
- 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. HTML - image <img src=“logo.png” alt=“Le Wagon logo”>
- 32. 2. Let’s add HTML content
- 33. CSS Web without CSS ? Let’s find a page and cut its head!
- 35. CSS syntax
- 36. CSS vocabulary Use the good keywords on Google
- 37. CSS example
- 38. Colors h2 { color: orange; color: #FF530D; color: rgb(255, 83, 13); color: rgba(255, 83, 13, 1.0); }
- 39. RGB tips
- 42. Font family
- 43. Font family
- 44. Font family
- 45. Font size & spacing
- 46. Font color
- 47. Font decoration
- 48. Font alignment
- 49. Font weight
- 50. 3. CSS for Fonts & Colors
- 51. Div & Box model Real-life…
- 52. Div & Box model …is made of div
- 53. Box model - content
- 54. Box model - margins
- 55. Box model - border
- 56. Box model - border h2 { border: 1px solid green; border: 2px dashed #FF530D; }
- 57. Box model - radius
- 58. Box model - radius
- 59. Box model - shadow
- 60. 4. Wrap with div
- 61. id & class
- 62. how do you resize the logo only?
- 63. how do you resize the logo only?
- 64. how do you style staff pictures only?
- 65. how do you style staff pictures only?
- 66. id or class?
- 67. Combine
- 68. Combine
- 69. Combine
- 70. 5. Name your tags
- 71. Fontawesome You don’t want .png or .jpg files You want a font of icons
- 72. 6. Fontawesome
- 74. 7. Let’s setup
- 75. Semantic scheme
- 76. Text classes
- 77. Button classes
- 78. List classes
- 79. Image classes
- 80. Bootstrap naming convention Component dash design “text-center”, “list-inline”, “btn btn-primary”
- 81. Your turn “text-center” on your paragraphs “list-inline” on your social list “btn btn-primary” for your subscribe button
- 82. Grid system
- 83. Responsive
- 84. Mobile first
- 85. How does it work?
- 86. Container always start with a container
- 89. Rows
- 90. How do we fill rows?
- 92. Media xs: Extra small devices (Phones < 768px) sm: Small devices (Tablets > 768px) md: Medium devices (> 992px) lg: Large devices (Desktops > 1200px)
- 93. Example - 2 cols
- 94. Example - 2 cols <div class=“container”> <div class=“row”> <div class=“col-xs-6”></div> <div class=“col-xs-6”></div> </div> </div> .col-xs-6 will apply on larger screens
- 95. What happens? <div class=“container”> <div class=“row”> <div class=“col-xs-6”></div> <div class=“col-xs-6”></div> <div class=“col-xs-6”></div> </div> </div>
- 96. Return on new line
- 98. Responsive example <div class=“container”> <div class=“row”> <div class=“col-xs-6 col-sm-3”></div> <div class=“col-xs-6 col-sm-3”></div> <div class=“col-xs-6 col-sm-3”></div> <div class=“col-xs-6 col-sm-3”></div> </div> </div>
- 99. 8. The grid