Initiation aux bases du développement web : HTML / CSS / JavaScript Mise en pratique en développant un site internet moderne en 30 minutes de type Facebook

1. Apprendre à créer
un site web
moderne
en 30’
Oui oui, en 30 min !
Jeudi 23/01 à 12h15
VillageByCA - Sophia Antipolis
Rue Claude Daunesse

2. HTML5 CSS3 Javascript
Fond Forme Interactions

3. HTML5
Hypertext Markup Language
<h1>Bienvenue chez nous</h1>
<div class=‘mla-box’>Bienvenue chez nous</div>
<img src=‘/images/logo.png’ alt=‘mon logo’ />
<a href=‘blog.html’> Mon blog </a>

4. HTML5
Hypertext Markup Language
<div>
<a href=‘accueil.html’>
<img src=‘/images/logo.png’/>
</a>
</div>
Autant d’imbrication de balises HTML que l’on veut.

5. HTML5
Hypertext Markup Language

6. Block
<article> <aside> <div> <figure> <footer>
<form> <h1>-<h6> <header> <hr> <li> <main>
<nav> <ol> <p> <section> <table> <ul>
Inline
<a> <b> <br> <button> <i> <img> <input>
<label> <select> <small> <span> <strong>
<sub> <sup> <textarea>
HTML5
2 types of elements

7. HTML5
Normal flow

8. CSS3
Cascading Style Sheets
Autant de feuilles de styles que l’on veut :
Mobile, Impression, …

9. CSS3
Box model
padding: 16px;
margin: 16px;
border: 16px solid #e6e6e6;
Sens des aiguilles du montre en partant du haut :
Margin: haut droite bas gauche
Exple: margin: 16px 0 8px 16px;

10. CSS3
Latest layout
Flexbox layout
1-dimensional : Row or Column
Easy alignment
Order management
Grid layout
2-dimensional : row and column
Easy alignment
row & column gap

11. CSS3
Positions
position: fixed;
right: 10px; top: 50px;
position: relative;
position: absolute;
left: 0; top: 0;
Absolute
Fixed
Relative

12. CSS3
Colors types
color: red;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: #FF0000;

13. CSS3
Media query - Responsive
@media only screen and (max-width: 480px) {...}
@media only screen and (min-width: 481px) {…}

14. Javascript
programming language
Programmer des interactions, des boucles, des
calculs, …

15. Browser
Inspecter

16. On se fait
un site web
en 30’ ?
Oui oui, en 30 min !

17. https://www.krokrodeal.com/meetup
Pour voir le résultat
sur votre mobile

18. HTML5 CSS3 Javascript
Bootstrap Jquery
Vues
Templates

19. Pour aller plus loin
Quelques outils
https://www.google.com/chrome/
https://www.pixelmator.com/
Navigateur
Images
https://www.sublimetext.com/3Editeur de texte

20. Pour aller plus loin
Quelques ressources
https://fontawesome.com/
https://codepen.io/
https://coolors.co/
Icônes
HTML / CSS snippets
Palette couleurs
https://fonts.google.com/Polices
https://www.istockphoto.com/Photos

21. Pour aller plus loin
Quelques ressources
https://github.com/krokrodeal/web30minutes/
Code source
https://www.slideshare.net/vbernard
Présentation

22. Merci
A vous de jouer !
Valéry BERNARD
valery.bernard@mylittleadventure.com
06.17.21.52.81

23. Vitesse de chargement
Quelques chiffres
Pour Amazon, quand son temps de chargement
augmente de 100 ms, soit 0.1 seconde, c’est une perte de
1% des ventes, ce qui aurait représenté en 2016 une perte
de 1.360 milliards d’euros.
Pour Shopzilla, quand celui-ci passe son temps de
chargement de 7 à 2 secondes, c’est un gain de 7 à 12%
de chiffre d’affaires en plus.
Etam, communiquait en 2015 un gain de 20% de son
taux de conversion suite à une baisse du temps moyen
de chargement de ses pages de 0.7 secondes.