Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Le Wagon Tokyo | Build your Landing Page in 2 hours
Ähnlich wie Le Wagon Tokyo | Build your Landing Page in 2 hours (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Le Wagon Tokyo | Build your Landing Page in 2 hours
- 1. 2h-landing page github.com/yann.klein info.lewagon.com/tokyo-landing-page Register to the workshop resource👇
- 2. Landing page Clear value proposition Clean design Call-to-Action CRM first milestone
- 4. Let’s build it from scratch info.lewagon.com/tokyo-landing-page First step: Register!
- 5. Coding language Next Workshop in May/June We’ll keep you posted!
- 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!
- 34. Design tips First the Fonts and Colors
- 36. CSS syntax
- 37. CSS vocabulary Use the good keywords on Google
- 38. CSS example
- 39. Colors h2 { color: orange; color: #FF530D; color: rgb(255, 83, 13); color: rgba(255, 83, 13, 1.0); }
- 40. RGB tips h2 { color: rgba(255, 255, 255, 1.0); }
- 46. Font size & spacing
- 50. Font weight
- 51. 3. CSS for Fonts & Colors
- 52. Div & Box model Real-life…
- 53. Div & Box model …is made of div Div Div Div Div Div
- 54. Box model - content
- 55. Box model - margins
- 56. Box model - border
- 57. Box model - border h2 { border: 1px solid green; border: 2px dashed #FF530D; }
- 58. Box model - radius
- 59. Box model - radius
- 60. Box model - shadow
- 61. 4. Wrap with div
- 62. id & class
- 63. how do you resize the logo only?
- 64. how do you resize the logo only?
- 65. how do you style staff pictures only?
- 66. how do you style staff pictures only?
- 67. id or class?
- 68. Combine
- 69. Combine
- 70. Combine
- 71. 5. Name your tags
- 72. Fontawesome You don’t want .png or .jpg files You want a font of icons
- 73. 6. Fontawesome
- 75. 7. Let’s setup
- 76. Semantic scheme
- 77. Text classes
- 78. Button classes
- 79. List classes
- 80. Image classes
- 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 A grid of cards has different layouts depending on the device!
- 84. Mobile first
- 85. How does it work?
- 86. Container always start with a container
- 89. Rows
- 90. Rows 12 12 12
- 91. Cols 12 12 12 3 3 3 3 6 6 col-12
- 92. How do we fill rows?
- 94. 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)
- 95. Example - 2 cols
- 96. 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
- 97. 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>
- 98. Return on new line
- 100. 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>
- 101. 8. The grid
- 103. Thank you!