3 jours pour apprendre les bases d'HTML et CSS, organisés en 12 portions de 2h dont au moins un TP de validation
- Web et Internet
Mot-clés: Client/Serveur, Adresse IP, URL, Protocoles, Domaines, Phishing, w3c, navigateurs
Exercice: Placer les mots-clés sur une carte
TP: Créer un espace FTP, Ouvrir un fichier texte local avec son navigateur - HTML Définition
Mot-clés: Balises et Balises auto-fermantes (Textes, Titres, Liens, Images, Listes), Attributs, Commentaires, Block vs Inline, Hierarchie, Format (espaces)
Exercice: Recréer un corps humain avec une liste de balises : head, body, eye, nose, hair, hand, finger (thumb attribute), fingergroup, foot,
TP: Chercher dans la source des sites internets connus, Baliser une page de recette de cuisine textuelle, compléter pour rendre la page valide - CSS Définition
Mot-clés: Règles, Sélecteurs, Propriétés (mise en forme du texte), Valeurs
Exercice: style le corps humain avec des sélecteurs et des propriétés
TP: Mettre en forme la page de recette de cuisine en utilisant les sélecteurs d'élément uniquement, introduction des classes - JS Définition
Mot-clés: function, variable, tableaux, querySelector, Exercice: https://jgthms.com/javascript-in-14-minutes/
TP: Ajouter des boutons de partage sur notre recette de cuisine
- CSS Sélecteurs
Mot-clés: Sélecteurs (id, classe, attributs, pseudo-classes), Spécificité
Exercice de groupe: http://davidshariff.com/quiz/ Exercice: Trouver le bon sélecteur (https://flukeout.github.io/) , la règle qui aura la priorité (http://css-fun.surge.sh/) - CSS Box-model
- CSS Flexbox
- HTML Sémantique
Mot-clés: Figures, Vidéos, Structures (Nav, Header, Footer, Main), Sémantique - CSS Responsive
- CSS Outils
Mot-clés: Sass, BEM
- HTML interactif
Mot-clés: Tables, Formulaires (https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-2/) - JavaScript patterns
- CSS Positions et Flotants