Pourquoi devriez-vous y participer ?
HTML5 et CSS3 sont les technologies fondamentales du développement web front-end. Cette formation offre une compréhension approfondie de ces langages, permettant de créer des sites web modernes, accessibles et adaptés à tous les supports. Elle est idéale pour ceux qui souhaitent se lancer dans le développement web ou renforcer leurs compétences en conception de pages web.
À qui s'adresse la formation ?
Cette formation est destinée aux :
- Étudiants en informatique ou en design web
- Toute personne souhaitant créer ou maintenir des sites web
- Designers souhaitant comprendre les aspects techniques de la création de sites web
- Développeurs débutants souhaitant acquérir des bases solides en développement web
- Professionnels de l'informatique souhaitant se spécialiser dans le développement front-end
Prérequis
Aucune expérience préalable en développement web n’est requise. Une connaissance de base de l’utilisation d’un ordinateur et d’un éditeur de texte est suffisante.
Objectifs d’apprentissage
À l’issue de la formation, vous serez capable de :
- Développer des formulaires interactifs et ergonomiques
- Créer des mises en page adaptatives grâce aux media queries
- Appliquer des styles CSS3 pour améliorer l’apparence d’un site
- Structurer une page web en utilisant les balises HTML5 appropriées
- Intégrer des éléments multimédias tels que des images, vidéos et polices d’icônes
Contenu de la formation
Première section
- Pour commencer, présentation du cours
Deuxième section
Dans l’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
Troisième section
Puis, HTML, sémantique et structure
- Objectifs du module
- Introduction
- Démonstration –Utilisation de CanIUse
- Démonstration – Exploration d’un site avec les outils des navigateur
- Généralités du langage HTML5
- Doctype
- 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
Quatrième section
Ensuite, 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
Cinquième section
Suivant cela, 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
Sixième section
La navigation
- Objectifs du module
- Liens
- Démonstration – Les liens
- Fil d’Ariane
- Listes
- Démonstration – Listes
- TP à réaliser
- Correction du TP
- Conclusion
Septième section
Par la suite, 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
Huitième section
Par la suite, 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
Neuvième section
Ensuite, 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
Dixième section
Après cela, 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
Onzième section
Ensuite, 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
Douzième section
Pour finir, ré 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, 2 et 3
Approche pédagogique
La formation combine théorie et pratique, avec des démonstrations suivies d’exercices concrets. Chaque module est accompagné de travaux pratiques permettant d’appliquer immédiatement les concepts appris.
