Le Wagon - 2h Landing
•
69 j'aime•29,125 vues
The document provides an outline for building a landing page, including setting up the structure with HTML, styling with CSS, and making it responsive using a grid system. It discusses topics like adding titles, paragraphs, and images with HTML tags, using CSS for fonts, colors, box model, and more. It also covers concepts like ids, classes, grid columns, and media queries for responsiveness on different devices. The workshop aims to help participants build a landing page from scratch covering all the essential technical aspects.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (11)
Similaire à Le Wagon - 2h Landing
Similaire à Le Wagon - 2h Landing (20)
Dernier
Dernier (20)
Le Wagon - 2h Landing
- 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
- 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. Your turn “text-center” on your paragraphs “list-inline” on your social list “btn btn-primary” for your subscribe button
- 81. Grid system
- 82. Responsive
- 83. Mobile first
- 84. How does it work?
- 85. Container always start with a container
- 88. Rows
- 89. How do we fill rows?
- 91. Media xs: Extra small devices (Phones < 768px) sm: Small devices (Tablets > 768px) md: Medium devices (> 992px) lg: Large devices (Desktops > 1200px)
- 92. Example - 2 cols
- 93. 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
- 94. 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>
- 95. Return on new line
- 97. 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>
- 98. 8. The grid
- 100. Thank you!