O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

2h landing page

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 98 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a 2h landing page (20)

Anúncio

Mais recentes (20)

Anúncio

2h landing page

  1. 1. Andry RAJONHSON @RajonhsonAndry @Andryjohn
  2. 2. Landing page Clear proposition value Clean design Call-to-Action CRM first milestone
  3. 3. Let’s build it from scratch https://codedot.tk//javascript/beginner/introduction/2019/11/1 7/workshop-landing/html
  4. 4. Coding language
  5. 5. CSS libraries
  6. 6. Workshop outline Theoretical intros Basic concepts tounderstand Live-code demos Wecode, you don’t :) Your turn Take your time &havefun
  7. 7. Setup
  8. 8. 1.Let’s set up
  9. 9. Front-end languages
  10. 10. Structure Structure yourcontent
  11. 11. Design Design yourcontent
  12. 12. Animation Animate yourcontent
  13. 13. HTML Withoutstructure, nodesign
  14. 14. Different contents
  15. 15. Tag them
  16. 16. Browser apply defaults
  17. 17. Over-ride with CSS
  18. 18. Skeleton <!DOCTYPE html> <!-- end of file -->
  19. 19. Skeleton <!DOCTYPE html> <html> <!-- html code --> </html> <!-- end of file -->
  20. 20. Head & body <!DOCTYPE html> <html> <head> <!-- Intelligence (meta-data) --> </head> <body> <!-- Stuff to display--> </body> </html> <!-- end of file -->
  21. 21. Title & utf-8 <!DOCTYPE html> <html> <head> <title>Landing</title> <meta charset="utf-8"> </head> <body> <!-- Stuff to display--> </body> </html> <!-- end of file -->
  22. 22. Head & google <head> <title>Codedot - Apprendre..</title> <meta name=“description" content=“Apprendre à…”> </head>
  23. 23. Core syntax
  24. 24. Syntax example <a href=“http://codedot.tk” target=“_blank”> Codedot </a> Codedot Whatis thetag name? Whatis the content? Whatarethetwo attributes?
  25. 25. HTML - titles <h1>[...]</h1> <h2>[...]</h2> <h3>[...]</h3> <h4>[...]</h4> <h5>[...]</h5> <h6>[...]</h6>
  26. 26. HTML - paragraph <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.Veritatis laboriosam autem at ab omnis iure quis </p>
  27. 27. HTML - emphasize <p> You can emphasise <em>some words</em>, and even <strong>more if needed</strong> </p>
  28. 28. 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>
  29. 29. HTML - image <img src=“logo.png” alt=“Codedot logo”>
  30. 30. 2. Let’s add HTML content
  31. 31. CSS Webwithout CSS ? Let’sfindapage andcut its head!
  32. 32. Linking stylesheets
  33. 33. CSS syntax
  34. 34. CSS vocabulary Use thegood keywords onGoogle
  35. 35. CSS example
  36. 36. Colors h2 { color: orange; color: #FF530D; color: rgb(255, 83, 13); color: rgba(255, 83, 13, 1.0); }
  37. 37. RGB tips
  38. 38. Text vs. Background
  39. 39. Background images
  40. 40. Font family
  41. 41. Font family
  42. 42. Font family
  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 …ismadeofdiv
  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. howdo youresize thelogo only?
  61. 61. howdo youresize thelogo only?
  62. 62. howdo youstylestaffpicturesonly?
  63. 63. howdo youstylestaffpicturesonly?
  64. 64. id or class?
  65. 65. Combine
  66. 66. Combine
  67. 67. Combine
  68. 68. 5. Name your tags
  69. 69. Fontawesome Youdon’t want .pngor .jpg files Youwant afontof 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 yourparagraphs “list-inline” on yoursocial list “btn btn-primary” for yoursubscribe button
  78. 78. Grid system
  79. 79. Responsive
  80. 80. Mobile first
  81. 81. How does it work?
  82. 82. Container alwaysstartwitha container
  83. 83. Rows theninsertrows
  84. 84. Rows theninsertrows
  85. 85. Rows
  86. 86. How do we fill rows?
  87. 87. Cols theelementary block
  88. 88. Media xs:Extrasmalldevices (Phones <768px) sm:Smalldevices (Tablets >768px) md: Mediumdevices (>992px) lg: Largedevices (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 https://codedot.tk/
  97. 97. Thank you!

×