Programmation : HTML / CSS

Public visé

• Débutants qui souhaitent apprendre à créer leurs premières pages web
• Webdesigners, graphistes et chargés de communication qui veulent intégrer eux-mêmes leurs maquettes
• Étudiants et professionnels en reconversion vers le développement web

Prérequis

• Aucune connaissance préalable en développement n'est nécessaire. Le parcours part de la première balise et monte progressivement jusqu'au niveau confirmé. Une pratique courante de l'outil
• informatique suffit.
• Prérequis techniques :
• Navigateur web : Google Chrome recommandé

Objectifs pédagogiques

• Structurer une page web en HTML : balises, titres, listes, liens, images et éléments sémantiques
• Mettre en forme une page avec le CSS : sélecteurs, typographie, couleurs, fonds et dégradés
• Maîtriser le modèle des boîtes et le positionnement des éléments dans une page
• Créer des formulaires, des tableaux et intégrer des médias audio et vidéo
• Rendre un site responsive avec Flexbox, les grilles CSS et les media queries, et optimiser son référencement

Contenu de la formation

① Langages HTML/CSS ➜ Cas pratique 1 ➜ Cas pratique 2 ➜ Introduction au cours HTML et CSS ➜ Les bases du HTML ➜ Les bases du CSS ➜ Mise en forme de textes en CSS ➜ Je construis mon site web 1/3 ➜ Cas pratique 1 ➜ Cas pratique 2 ➜ Cas pratique 3 ➜ Le modèle des boîtes ➜ Position et affichage des éléments ➜ Création de tableaux HTML ➜ Insertion de médias en HTML ➜ Fonds, dégradés et ombres CSS ➜ Sélecteurs CSS complexes ➜ Formulaires HTML ➜ Je construis mon site web 2/3 ➜ Cas pratique 1 ➜ Cas pratique 2 ➜ Transitions, animations et transformations CSS ➜ Modèle des boîtes flexibles - Flexbox CSS ➜ Responsive design CSS ➜ Sémantique et éléments HTML structurants ➜ Modèle des grilles CSS ➜ Évolution et futur du CSS ➜ Je construis mon site web 3/3 ➜ HTML : Le guide des balises ➜ HTML : Création avancée ➜ CSS : Pour aller plus loin ➜ Comprendre et optimiser le référencement (SEO) ② HTML/CSS - Niveau Débutant ➜ Présentation du cours ➜ Pourquoi apprendre à coder ? ➜ Définitions et rôles ➜ Versions HTML et CSS ➜ Travail en local et en production ➜ L'éditeur de texte ➜ Eléments, balises et attributs ➜ Structure d'une page HTML ➜ Création d'une page HTML ➜ Indentation et commentaires HTML ➜ Titres et paragraphes en HTML ➜ Espaces et retours à la ligne en HTML ➜ Les niveaux d'importance des textes ➜ Les listes en HTML ➜ Liens internes et externes en HTML ➜ Autres types de liens HTML ➜ Insérer des images en HTML ➜ Validation et compatibilité du code ③ HTML/CSS - Niveau Intermédiaire ➜ Sélecteurs et propriétés CSS ➜ Où écrire le CSS ➜ Les commentaires en CSS ➜ Les sélecteurs CSS simples ➜ Les attributs id et class ➜ L'héritage en CSS ➜ Les types block et inline ➜ Les éléments HTML div et span ➜ La propriété CSS font family ➜ Autres propriété CSS de type font ➜ Couleur et opacité en CSS ➜ Propriétés CSS de type text ➜ Gestion des espaces en CSS ➜ Le modèle des boîtes ➜ Largeur et hauteur en CSS ➜ Les bordures en CSS ➜ Padding et margin en CSS ➜ Les ombres des boîtes ➜ La propriété CSS display ➜ Les propriétés position et z index ➜ Les propriétés float et clear ➜ L'alignement en CSS ➜ La couleur de fond ➜ Images de fond et gestion du fond ➜ Dégradés linéaires ➜ Dégradés radiaux ➜ Créer un tableau simple ➜ Créer un tableau structuré ➜ Opérations sur les tableaux ➜ Opérations sur les images ➜ Insérer de l'audio en HTML ➜ Insérer des vidéos en HTML ➜ Intégration de média et sémantique ④ HTML/CSS - Niveau Confirmé ➜ Notations CSS short hand et long hand ➜ Sélecteurs CSS complexes ➜ Pseudo classes CSS ➜ Pseudo éléments CSS ➜ Les sprites en CSS ➜ Les transitions CSS ➜ Les animations CSS ➜ Présentation des formulaires ➜ Créer un formulaire HTML simple ➜ Types d'input et listes d'options ➜ Les attributs des formulaires ➜ Organiser et mettre en forme un formulaire ➜ Introduction au responsive design ➜ Meta viewport et valeurs CSS relatives ➜ Media queries CSS ➜ Création d'un site personnel (site cv) 1/4 ➜ Création d'un site personnel (site cv) 2/4 ➜ Création d'un site personnel (site cv) 3/4 ➜ Création d'un site personnel (site cv) 4/4 ➜ Conclusion ⑤ Évaluation des acquis ➜ Testez ce que vous avez retenu