Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Le Wagon - 2h Landing

18 212 vues

Publié le

Code your landing page from scratch with HTML / CSS Bootstrap, and a lot of design tools.

Publié dans : Technologie
  • Soyez le premier à commenter

Le Wagon - 2h Landing

  1. 1. 2h-landing @bpapillard
  2. 2. Landing page Clear proposition value Clean design Call-to-Action 
 CRM first milestone
  3. 3. Landing page tools
  4. 4. Let’s build it from scratch http://lewagon.github.io/landing
  5. 5. Coding language
  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. Linking stylesheets
  35. 35. CSS syntax
  36. 36. CSS vocabulary Use the good keywords on Google
  37. 37. CSS example
  38. 38. Colors h2 { color: orange; color: #FF530D; color: rgb(255, 83, 13); color: rgba(255, 83, 13, 1.0); }
  39. 39. RGB tips
  40. 40. Text vs. Background
  41. 41. Background images
  42. 42. Font family
  43. 43. Font family
  44. 44. Font family
  45. 45. Font size & spacing
  46. 46. Font color
  47. 47. Font decoration
  48. 48. Font alignment
  49. 49. Font weight
  50. 50. 3. CSS for Fonts & Colors
  51. 51. Div & Box model Real-life…
  52. 52. Div & Box model …is made of div
  53. 53. Box model - content
  54. 54. Box model - margins
  55. 55. Box model - border
  56. 56. Box model - border h2 { border: 1px solid green; border: 2px dashed #FF530D; }
  57. 57. Box model - radius
  58. 58. Box model - radius
  59. 59. Box model - shadow
  60. 60. 4. Wrap with div
  61. 61. id & class
  62. 62. how do you resize the logo only?
  63. 63. how do you resize the logo only?
  64. 64. how do you style staff pictures only?
  65. 65. how do you style staff pictures only?
  66. 66. id or class?
  67. 67. Combine
  68. 68. Combine
  69. 69. Combine
  70. 70. 5. Name your tags
  71. 71. Fontawesome You don’t want .png or .jpg files
 You want a font of icons
  72. 72. 6. Fontawesome
  73. 73. 7. Let’s setup
  74. 74. Semantic scheme
  75. 75. Text classes
  76. 76. Button classes
  77. 77. List classes
  78. 78. Image classes
  79. 79. Your turn “text-center” on your paragraphs “list-inline” on your social list “btn btn-primary” for your subscribe button
  80. 80. Grid system
  81. 81. Responsive
  82. 82. Mobile first
  83. 83. How does it work?
  84. 84. Container always start with a container
  85. 85. Rows then insert rows
  86. 86. Rows then insert rows
  87. 87. Rows
  88. 88. How do we fill rows?
  89. 89. Cols the elementary block
  90. 90. Media xs: Extra small devices (Phones < 768px) sm: Small devices (Tablets > 768px) md: Medium devices (> 992px) lg: Large devices (Desktops > 1200px)
  91. 91. Example - 2 cols
  92. 92. 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
  93. 93. 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>
  94. 94. Return on new line
  95. 95. Responsive example
  96. 96. 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>
  97. 97. 8. The grid
  98. 98. Go further lewagon.com/london
  99. 99. Thank you!

×