![HTML - titles
<h1>[...]</h1>
<h2>[...]</h2>
<h3>[...]</h3>
<h4>[...]</h4>
<h5>[...]</h5>
<h6>[...]</h6>](https://image.slidesharecdn.com/2h-landing-191121152118/85/2h-landing-page-25-320.jpg)
More Related Content
2h landing page
- 1.
- 2. Landing page Clear propositionvalue Clean design Call-to-Action CRM first milestone
- 3. Let’s build itfrom scratch https://codedot.tk//javascript/beginner/introduction/2019/11/1 7/workshop-landing/html
- 4.
- 5.
- 6. Workshop outline Theoretical intros Basicconcepts tounderstand Live-code demos Wecode, you don’t :) Your turn Take your time &havefun
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. Skeleton <!DOCTYPE html> <!-- endof file -->
- 19. Skeleton <!DOCTYPE html> <html> <!-- htmlcode --> </html> <!-- end of file -->
- 20. Head & body <!DOCTYPEhtml> <html> <head> <!-- Intelligence (meta-data) --> </head> <body> <!-- Stuff to display--> </body> </html> <!-- end of file -->
- 21. Title & utf-8 <!DOCTYPEhtml> <html> <head> <title>Landing</title> <meta charset="utf-8"> </head> <body> <!-- Stuff to display--> </body> </html> <!-- end of file -->
- 22. Head & google <head> <title>Codedot- Apprendre..</title> <meta name=“description" content=“Apprendre à…”> </head>
- 23.
- 24. Syntax example <a href=“http://codedot.tk”target=“_blank”> Codedot </a> Codedot Whatis thetag name? Whatis the content? Whatarethetwo attributes?
- 25.
- 26. HTML - paragraph <p> Loremipsum dolor sit amet, consectetur adipisicing elit.Veritatis laboriosam autem at ab omnis iure quis </p>
- 27. HTML - emphasize <p> Youcan emphasise <em>some words</em>, and even <strong>more if needed</strong> </p>
- 28. HTML - list <h2>Shoppinglist</h2> <ul> <li>Milk</li> <li> Butter </li> </ul> <h2>World Cup 2014</h2> <ol> <li>Germany</li> <li>Argentina</li> </ol>
- 29. HTML - image <imgsrc=“logo.png” alt=“Codedot logo”>
- 30. 2. Let’s addHTML content
- 31. CSS Webwithout CSS ? Let’sfindapageandcut its head!
- 32.
- 33.
- 34. CSS vocabulary Use thegoodkeywords onGoogle
- 35.
- 36. Colors h2 { color: orange; color:#FF530D; color: rgb(255, 83, 13); color: rgba(255, 83, 13, 1.0); }
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. Font size &spacing
- 44.
- 45.
- 46.
- 47.
- 48. 3. CSS forFonts & Colors
- 49.
- 50.
- 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 withdiv
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68. 5. Name yourtags
- 69. Fontawesome Youdon’t want .pngor.jpg files Youwant afontof icons
- 70.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78. Your turn “text-center” onyourparagraphs “list-inline” on yoursocial list “btn btn-primary” for yoursubscribe button
- 79.
- 80.
- 81.
- 82. How does itwork?
- 83.
- 84.
- 85.
- 86.
- 87. How do wefill rows?
- 88.
- 89. Media xs:Extrasmalldevices (Phones <768px) sm:Smalldevices(Tablets >768px) md: Mediumdevices (>992px) lg: Largedevices (Desktops >1200px)
- 90. Example - 2cols
- 91. Example - 2cols <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”> <divclass=“row”> <div class=“col-xs-6”></div> <div class=“col-xs-6”></div> <div class=“col-xs-6”></div> </div> </div>
- 93. Return on newline
- 94.
- 95. Responsive example <div class=“container”> <divclass=“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.
- 97.
- 98.