Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Le Wagon - Build your Landing Page in 2 hours

230 visualizaciones

Publicado el

Learn basics of HTML and CSS and build your first landing page from scratch!

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Le Wagon - Build your Landing Page in 2 hours

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

×