Recommended
More Related Content
What's hot
What's hot (20)
Similar to Le Wagon - Build your Landing Page in 2 hours
Similar to Le Wagon - Build your Landing Page in 2 hours (20)
Recently uploaded
Recently uploaded (20)
Le Wagon - Build your Landing Page in 2 hours
- 1. Build your landing-page in 2 hours @SandrineAy
- 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
- 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
- 43. Font size & spacing
- 44. Font color
- 45. Font decoration
- 46. Font alignment
- 47. Font weight
- 48. 3. CSS for Fonts & Colors
- 49. Div & Box model Real-life…
- 50. Div & Box model …is made of div
- 51. Box model - content
- 52. Box model - margins
- 53. Box model - border
- 54. Box model - border h2 { border: 1px solid green; border: 2px dashed #FF530D; }
- 55. Box model - radius
- 56. Box model - radius
- 57. Box model - shadow
- 58. 4. Wrap with div
- 59. id & class
- 60. how do you resize the logo only?
- 61. how do you resize the logo only?
- 62. how do you style staff pictures only?
- 63. how do you style staff pictures only?
- 64. id or class?
- 65. Combine
- 66. Combine
- 67. Combine
- 68. 5. Name your tags
- 69. Fontawesome You don’t want .png or .jpg files You want a font of icons
- 70. 6. Fontawesome
- 72. 7. Let’s setup
- 73. Semantic scheme
- 74. Text classes
- 75. Button classes
- 76. List classes
- 77. Image classes
- 78. Your turn “text-center” on your paragraphs “list-inline” on your social list “btn btn-primary” for your subscribe button
- 79. Grid system
- 80. Responsive
- 81. Mobile first
- 82. How does it work?
- 83. Container always start with a container
- 84. Rows then insert rows First row
- 85. Rows then insert rows First row Second row
- 86. Rows First row Second row Third row
- 87. How do we fill rows?
- 89. Media xs: Extra small devices (Phones < 768px) sm: Small devices (Tablets > 768px) md: Medium devices (> 992px) lg: Large devices (Desktops > 1200px)
- 90. Example - 2 cols
- 91. 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
- 92. 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>
- 93. Return on new line
- 95. 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>
- 96. 8. The grid