Recommended
More Related Content
What's hot
What's hot (20)
Similar to Coder son site web
Similar to Coder son site web (20)
More from AndryRajohnson
Recently uploaded
Recently uploaded (20)
Coder son site web
- 1. e Build your own web page
- 2. Let’s build it from scratch
- 4. Course outline Theoretical intros Basic concepts to understand Live-code demos I code, you don’t :) Then, it’s your turn Take your time & have fun !
- 5. Setup
- 8. S tructure Structure your content
- 10. A nimation Animate your content
- 11. H T ML Without structure, no design
- 14. Over-ride with C S S
- 15. Skeleton <!DOCTYPE html> <!-- end of file -->
- 16. Skeleton <!DOCTYPE html> <html> <!-- html code --> </html> <!-- end of file -->
- 17. Head & body <!DOCTYPE html> <html> <head> <!-- Intelligence (meta-data) --> </head> <body> <!-- Stuff to display--> </body> </html> <!-- end of file -->
- 18. Title & utf-8 <!DOCTYPE html> <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’s blog-...</title> <meta name=“description" content=“Project I have..”> </head>
- 20. <head> <meta property=“og:title” content=“(French)JavaScript.”> <meta property=“og:image” content=“javascript-card.jpg”> <meta property=“og:description” content=“Project…”> <head> Head & Facebook
- 21. Core syntax
- 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?
- 24. HTML - paragraph <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.Veritatis laboriosam autem at ab omnis iure quis </p>
- 25. HTML - emphasize You can emphasise <em>some words</em>, an d eve n <strong>more if needed</strong> <p> </p>
- 26. 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>
- 27. HTML - image <img src=“logo.png” alt=“workshop logo”>
- 28. 2. Let’s add HTML content
- 29. C SS Web without C SS ? Let’s find a page and cut its head!
- 31. C S S syntax
- 32. C S S vocabulary Use the good keywords on Google
- 33. C S S example
- 34. C olors h2 { color: orange; color:#FF530D; color: rgb(255, 83, 13); color: rgba(255, 83, 13, 1.0); }
- 35. R G B tips
- 38. Font family
- 39. Font family
- 40. Font family
- 41. Font size & spacing
- 42. Font color
- 43. Font decoration
- 44. Font alignment
- 45. Font weight
- 46. 3. CSS for Fonts & Colors
- 47. Div & Box model Real-life…
- 48. Div & Box model …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 with div
- 57. id & class
- 58. How do you resize the logo only?
- 59. How do you resize the logo only?
- 60. How do you style staff pictures only?
- 61. How do you style staff pictures only?
- 62. id or class?
- 63. Combine
- 64. Combine
- 65. Combine
- 66. 5. Name your tags
- 67. Fontawesome You don’t want .png or .jpg files You want a font of icons
- 68. 6. Fontawesome
- 70. 7. Let’s setup
- 71. Semantic scheme
- 72. Text classes
- 73. Button classes
- 74. List classes
- 75. Image classes
- 76. Your turn “text-center” on your paragraphs “list-inline” on your social list “btn btn-primary” for your subscribe button
- 77. Grid system
- 78. Responsive
- 79. Mobile first
- 80. How does it work?
- 81. Container always start with a container
- 84. Rows
- 85. How do we fill rows?
- 86. C ols the elementary block
- 87. Media xs: Extra small devices (Phones < 768px) sm: Small devices (Tablets > 768px) md: Medium devices (> 992px) lg: Large devices (Desktops > 1200px)
- 88. Example - 2 cols
- 89. 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
- 90. 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>
- 91. Return on new line
- 93. 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>
- 94. Go further
- 95. Thank you!