Le développement web client avec HTML5 et CSS3

Présentation du cours

Introduction

• Objectifs du module
• Préambule
• Internet
• Web
• Démonstration - Premier site web
• Évolution du Web
• Définitions
• Outils
• Démonstration - Installation de Visual Studio Code
• Conclusion

HTML, sémantique et structure

• Objectifs du module
• Introduction
• Démonstration - Utilisation de CanIUse
• Démonstration - Exploration d'un site avec les outils des navigateurs
• Généralités du langage HTML5
• Doctype
• Balise
• Balise
• Démonstration - Structure de base
• Balise
• Démonstration - Eléments structurants du body
• Texte - Partie 1
• Démonstration - Titres
• Texte - Partie 2
• Démonstration - Paragraphes
• Texte - Partie 3
• Démonstration - Mise en valeur du texte
• Tableau
• Démonstration - Tableaux
• Maquettage
• TP à réaliser
• Correction du TP
• Conclusion

Le contenu multimédia

• Objectifs du module
• La balise
• Les polices d'icônes
• Les contenus audio et vidéo
• TP à réaliser
• Correction du TP
• Conclusion

Les bases du CSS

• Objectifs du module
• Introduction
• Mise en place externe du CSS
• Démonstration - Mise en place externe
• Mise en place interne du CSS
• Démonstration - Mise en place interne
• Mise en place inline
• Démonstration - Mise en place inline
• Recommandations
• Syntaxe CSS
• Sélecteurs
• Démonstration - Sélecteurs
• Convention de nommage
• TP à réaliser
• Propriétés CSS
• TP à réaliser
• Cascade et spécificité
• Démonstration - Spécificité
• TP à réaliser
• Héritage
• Démonstration - Héritage
• TP à réaliser
• Correction du TP
• Conclusion

La navigation

• Objectifs du module
• Liens
• Démonstration - Les liens
• Fil d'Ariane
• Listes
• Démonstration - Listes
• TP à réaliser
• Correction du TP
• Conclusion

Les unités de mesure

• Objectifs du module
• Types d'unités
• Unités absolues
• Unités relatives
• Fonctions
• Bon usage des unités
• Démonstration - Les unités
• TP à réaliser
• Correction du TP
• Conclusion

Le positionnement des éléments

• Objectifs du module
• Introduction
• Float
• Démonstration - Float
• Display
• Démonstration - Display
• Position
• Démonstration - Position
• Flex
• Démonstration - Flex
• TP à réaliser
• Correction du TP
• Conclusion

La responsivité

• Objectifs du module
• Introduction
• Tailles d'écran
• Comment procéder ?
• Média Queries
• Démonstration - Media Queries
• TP à réaliser
• Correction du TP1
• Correction du TP2
• Conclusion

Les formulaires

• Objectifs du module
• Introduction
• Champ texte
• Champ nombre
• Champ date et heure
• Champ choix
• Boutons
• Ergonomie
• Démonstration - Formulaires
• Sécurité
• TP à réaliser
• Correction du TP
• Conclusion

Framework CSS

• Objectifs du module
• Introduction
• Minification
• TP à réaliser
• Bootstrap
• Démonstration - Bootstrap (partie 1)
• Démonstration - Bootstrap (partie 2)
• Démonstration - Bootstrap (partie 3)
• TP à réaliser
• Correction du TP
• Conclusion

Préprocesseurs SASS

• Objectifs du module
• Introduction
• Installation
• Utilisation
• Variables
• Démonstration - Variables
• Modules et Partials
• Démonstration - Partials
• Mixins
• Démonstration - Mixins
• Héritage
• Démonstration - Héritage
• Opérateurs
• Conditions
• Boucles
• Démonstration - Opérateurs, boucles et conditions
• Fonctions
• Démonstration - Fonctions
• TP à réaliser
• Correction du TP - Partie 1
• Correction du TP - Partie 2
• Correction du TP - Partie 3
• Conclusion