Formation HTML5 / CSS3 : réussir sa prise en main

Situer HTML, CSS et JavaScript dans l’environnement de production Web

• Identifier le rôle respectif de HTML, CSS et JavaScript dans la création d’une page Web
• Comprendre la séparation entre structure des contenus, présentation graphique et comportements interactifs
• Décrire l’organisation des fichiers d’un site Web
• Comprendre les principes du Responsive Web Design et d’une approche adaptée aux différentes tailles d’écran
• Identifier les premiers enjeux d’accessibilité liés à la structure, à la lisibilité et aux contenus
• Découvrir le rôle d’un éditeur de code et prendre en main Visual Studio Code
• Utiliser les outils de développement du navigateur pour observer la structure HTML et les styles CSS d’une page

Structurer une page HTML

• Comprendre la structure générale d’un document HTML
• Hiérarchiser un contenu avec les titres, paragraphes et listes
• Distinguer la structure sémantique du rendu graphique d’un texte
• Utiliser les principales balises de structure comme header, nav, main, section, article et footer
• Comprendre le rôle de div lorsqu’aucune balise sémantique spécifique n’est adaptée
• Ajouter des images, liens et contenus multimédias
• Utiliser les principaux attributs comme class, id, href, src et alt
• Structurer un tableau simple
• Découvrir la structure d’un formulaire et les éléments form, label et input
• Appliquer les premières bonnes pratiques d’accessibilité : hiérarchie des titres, textes alternatifs, intitulés de liens et libellés de formulaires
• Configurer la balise viewport pour permettre un affichage adapté sur les appareils mobiles

Mettre en forme une page et construire une mise en page responsive avec CSS

• Créer une feuille de styles CSS et la relier au document HTML
• Comprendre la syntaxe d’une règle CSS
• Utiliser les sélecteurs d’éléments, de classes et d’identifiants
• Découvrir les principales pseudo-classes utiles aux interactions comme hover et focus
• Comprendre le modèle de boîte : contenu, marges internes, bordures et marges externes
• Mettre en forme textes, couleurs, fonds et éléments graphiques
• Gérer les polices et la hiérarchie typographique
• Utiliser l’inspecteur du navigateur pour tester et corriger les styles
• Organiser les éléments d’une interface avec Flexbox
• Découvrir CSS Grid pour construire des mises en page en lignes et colonnes
• Utiliser des dimensions et espacements adaptés à une mise en page flexible
• Créer des points de rupture avec les Media Queries
• Adapter la présentation à plusieurs tailles d’écran selon une logique responsive

Ajouter des effets visuels et comprendre le rôle de JavaScript dans l’interactivité

• Utiliser les pseudo-classes pour créer des changements d’état simples
• Ajouter des ombres, coins arrondis et autres effets CSS
• Créer des transitions entre plusieurs états
• Utiliser les transformations CSS pour produire des effets visuels simples
• Distinguer une interaction pouvant être réalisée en HTML/CSS d’un comportement nécessitant JavaScript
• Comprendre comment un fichier JavaScript est relié à une page HTML
• Intégrer et tester un script fourni (sans entrer dans l’apprentissage du langage JavaScript)
• Veiller à conserver des interactions lisibles et accessibles au clavier

Publier, tester et corriger une page Web

• Distinguer les rôles du navigateur, du client, du serveur, du nom de domaine et de l’hébergement
• Identifier les principaux fichiers nécessaires à la publication d’un site
• Comprendre les différents modes de mise en ligne selon l’hébergement
• Publier les fichiers par FTP ou à l’aide de l’outil de déploiement proposé par l’hébergeur
• Contrôler les chemins des fichiers, images, feuilles de styles et scripts
• Tester l’affichage sur plusieurs dimensions d’écran
• Repérer et corriger les principales erreurs à l’aide des outils de développement du navigateur
• Vérifier la structure HTML et les styles CSS avant diffusion
• Contrôler le fonctionnement de la page après sa publication