Download to read offline
![HTML - titles <h1>[...]</h1> <h2>[...]</h2> <h3>[...]</h3> <h4>[...]</h4> <h5>[...]</h5> <h6>[...]</h6>](https://image.slidesharecdn.com/codersonsiteweb-190718113307/75/Coder-son-site-web-23-2048.jpg)
Coder son site web
- 1. e Build your ownweb page
- 2. Let’s build itfrom scratch
- 3.
- 4. Course outline Theoretical intros Basicconcepts to understand Live-code demos I code, you don’t :) Then, it’s your turn Take your time & have fun !
- 5.
- 6.
- 7.
- 8. S tructure Structure yourcontent
- 9.
- 10. A nimation Animate yourcontent
- 11. H T ML Withoutstructure, no design
- 12.
- 13.
- 14.
- 15. Skeleton <!DOCTYPE html> <!-- endof file -->
- 16. Skeleton <!DOCTYPE html> <html> <!-- htmlcode --> </html> <!-- end of file -->
- 17. Head & body <!DOCTYPEhtml> <html> <head> <!-- Intelligence (meta-data) --> </head> <body> <!-- Stuff to display--> </body> </html> <!-- end of file -->
- 18. Title & utf-8 <!DOCTYPEhtml> <html> <head> <title>Landing</title> <meta charset="utf-8"> </head> <body> <!-- Stuff to display--> </body> </html> <!-- end of file -->
- 19. Head & google <head> <title>RJ’sblog-...</title> <meta name=“description" content=“Project I have..”> </head>
- 20. <head> <meta property=“og:title” content=“(French)JavaScript.”> <metaproperty=“og:image” content=“javascript-card.jpg”> <meta property=“og:description” content=“Project…”> <head> Head & Facebook
- 21.
- 22. Syntax example <a href=https://rajohnson-andry.tk/design/target=“_blank”> Design </a> Design What is the tag name? What is the content? What are the two attributes?
- 23.
- 24. HTML - paragraph <p> Loremipsum dolor sit amet, consectetur adipisicing elit.Veritatis laboriosam autem at ab omnis iure quis </p>
- 25. HTML - emphasize Youcan emphasise <em>some words</em>, an d eve n <strong>more if needed</strong> <p> </p>
- 26. 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>
- 27. HTML - image <imgsrc=“logo.png” alt=“workshop logo”>
- 28. 2. Let’s addHTML content
- 29. C SS Web withoutC SS ? Let’s find a page and cut its head!
- 30.
- 31. C S Ssyntax
- 32. C S Svocabulary Use the good keywords on Google
- 33. C S Sexample
- 34. C olors h2 { color:orange; color:#FF530D; color: rgb(255, 83, 13); color: rgba(255, 83, 13, 1.0); }
- 35. R G Btips
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. Font size &spacing
- 42.
- 43.
- 44.
- 45.
- 46. 3. CSS forFonts & Colors
- 47. Div & Boxmodel Real-life…
- 48. Div & Boxmodel …is made of div
- 49. Box model -content
- 50. Box model -margins
- 51. Box model -border
- 52. Box model -border h2 { border: 1px solid green; border: 2px dashed #FF530D; }
- 53. Box model -radius
- 54. Box model -radius
- 55. Box model -shadow
- 56. 4. Wrap withdiv
- 57.
- 58. How do youresize the logo only?
- 59. How do youresize the logo only?
- 60. How do youstyle staff pictures only?
- 61. How do youstyle staff pictures only?
- 62.
- 63.
- 64.
- 65.
- 66. 5. Name yourtags
- 67. Fontawesome You don’t want.png or .jpg files You want a font of icons
- 68.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76. Your turn “text-center” onyour paragraphs “list-inline” on your social list “btn btn-primary” for your subscribe button
- 77.
- 78.
- 79.
- 80. How does itwork?
- 81. Container always start witha container
- 82.
- 83.
- 84.
- 85. How do wefill rows?
- 86. C ols the elementaryblock
- 87. Media xs: Extra smalldevices (Phones < 768px) sm: Small devices (Tablets > 768px) md: Medium devices (> 992px) lg: Large devices (Desktops > 1200px)
- 88. Example - 2cols
- 89. 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
- 90. 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>
- 91. Return on newline
- 92.
- 93. 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>
- 94.
- 95.