- Cours pratique
- Informatique
Formation HTML5, CSS3, Responsive - Création de pages web
Créer des sites web dynamiques et responsives avec HTML5, CSS3 et CSS Grid

- Durée
- 3 jours
- Niveau
- Fondamental
- Modalités
- Présentiel / Distanciel
Description de la formation HTML CSS
Cette formation HTML CSS est destinée à toute personne souhaitant maîtriser la conception de sites Internet et d’applications web modernes tirant parti de toutes les nouvelles spécifications et technologies apportées par le Web d’aujourd’hui.
Le HTML est un langage texte qui permet de décrire le contenu d’une page web grâce à des balises (structure du document, données, images, formulaire, programme, etc.) Les feuilles de style CSS permettent d’en définir la présentation. L’idée de fond est de ne pas mélanger les données et leur visualisation pour faciliter la mise en place d’un site et son évolution.
Indépendamment de la complexité des architectures, les langages HTML et CSS demeurent des standards depuis des années. Les nouvelles versions du HTML5 et du CSS3 ont encore renforcé cette hégémonie en étendant leurs possibilités pour prendre en compte les équipements mobiles, le référencement, le dessin vectoriel, la vidéo, le rendu 3D, les animations, etc. Bref, il devient maintenant possible de proposer des applications clients/serveurs et des pages web attractives grâce à l’utilisation conjointe de HTML5 et CSS3.
Lors de cette formation, vous comprendrez, dans un premier temps, comment les navigateurs échangent avec les serveurs web, puis comment créer des sites web dynamiques et modernes en utilisant les possibilités du HTML et du CSS que vous compléterez avec les apports des nouveautés proposées par le HTML5 et le CSS3.
Leur utilisation vous sera présentée sous un angle professionnel avec notamment le souci de répondre à la question "Comment faire de la mise en page Web avec les technologies et les outils modernes du moment ?". Ce qui vous le verrez n'est pas complexe si on se limite à la simple présentation des technologies.
De même, nous vous aiderons à préparer votre veille technologique post-formation et à analyser avec recul les tendances du moment. Nous vous présenterons une série d’outils et méthodologies visant à professionnaliser vos développements, être plus efficace et gagner en productivité. Vous apprendrez également à pallier les problèmes redondants de rétrocompatibilité afin de concevoir des sites et des applications nativement compatibles dans le plus grand nombre de navigateurs.

Objectifs pédagogiques
À l'issue de cette formation HTML CSS, vous aurez acquis les connaissances et compétences nécessaires pour :
- Savoir structurer un site ou une application web à l’aide du balisage HTML5
- Savoir mettre en forme une page HTML5 en y intégrant des feuilles de style CSS3
- Savoir optimiser son code et mettre en œuvre la compatibilité avec les différents navigateurs
- Être capable d’intégrer des pages « responsive » dans ses développements
- Être capable d’intégrer des images, des animations vectorielles et du son au sein de ses développements
Objectifs opérationnels
Objectif opérationnel :
Savoir créer un site ou une application web dynamique, moderne et responsive en utilisant le langage HTML5 et les feuilles de style CSS3.
Programme
Contenu du cours, module par module
13 modules
- Fonctionnement d’un échange entre navigateur et serveur
- Les protocoles http et https
- Les navigateurs web
- Présentation des différents langages web
- Les logiciels pour coder et mettre en ligne
- L’inspecteur de code
- Ressources web utiles
- Qu’est-ce que le HTML et quel est son rôle
- Que sont les balises ?
- Structure de base d’un document (Doctype, head, body)
- Comment écrire son premier document HTML
- Les balises principales (liens, images, tableaux, blocs, paragraphes, listes…)
- Hiérarchie et imbrication des éléments, parents / enfants, tabulations
- Nouvelles normes HTML5 d’écriture
Travaux pratiques
L’objectif est de réussir à écrire les bases nécessaires au HTML et d’expérimenter les balises indispensables et leur imbrication.
Création d’une base réutilisable
Afin de gagner du temps, création d’une base HTML qui servira de base à tous les prochains projets
- Qu’est-ce que le CSS ?
- HTML, CSS : le fond/ la forme
- Rôle du CSS
- Lier une feuille de style à une page HTML
- Arborescence de projets web, structure des dossiers standards
- Principe de base : sélecteurs, propriétés, valeur
- Principales propriétés CSS
- Mise en forme du texte, paragraphes et caractères
- Nommer ses styles : classes, identifiants
- Les sélecteurs CSS
- Quelques sélecteurs CSS avancés
- Nouvelles propriétés CSS3
- Nouvelles syntaxes CSS3
- Pseudo classes
- Préfixes et compatibilité
Travaux pratiques
Créer une première feuille de style et l’ajouter
Ajouter des styles sur des textes, caractères, blocs et autres balises…
- Les blocs et divisions
- Le modèle de boite CSS
- Positionnement (statique, absolu, fixe)
- Principaux modes de positionnement :
- Principe de positionnement
- Protection des conteneurs
- Positionnement gauche/droite des images
- Positionnement de blocs
- Structurer une page en colonnes
- Principe moderne
- Compatibilité des navigateurs
- Bases et box-sizing
- Les conteneurs et les éléments
- Possibilités de positionnement
- Structurer une page simple avec des colonnes
- Comparatif Float / Flex
- Grille simple de mise en page Float et Flex
Travaux pratiques
Création d’une grille simple de structure par colonne en float et en flex
Création de modèles simples de pages par sections et colonnes
- Éléments et fonctionnement d’un formulaire
- Méthodes d’envoi et traitement
- Les champs de formulaire
- Nouveaux types de champs HTML5
Travaux pratiques
Création d’un formulaire complet avec mise en forme de sections, libellés, différents types de champs et mise en page ergonomique
- Polices de caractères personnalisées
- Couleurs avancées et dégradés
- Ombres et opacité
- Bordures et arrière-plans avancés
- Tester la compatibilité du navigateur
- Comment connaître la compatibilité d’une technologie
- Contrôler la compatibilité des technologies (canIuse)
- Écriture de code avec auto complétion avec Emmet
- Outils d’analyse de performance avec Google Speed
- Optimisation des images
- Qu’est-ce qu’un CDN
- Faire de la veille : bénéfices, outils
- Normaliser les styles de base avec Normalize.css
- Une base saine avec HTML5 Boilerplate
- Approche de twitter Bootstrap et Foundation
Travaux pratiques
Création de blocs de présentation flexibles afin de bien comprendre la puissance des grilles CSS par rapport aux tableaux traditionnels
- Introduction au RWD, enjeux, état des lieux
- Principe de base
- Mise en place des bases code
- Un design fluide
- Les media queries
- Créer une grille responsive
- Conception de structure fluide
- Coupures avec les media queries et les breakpoints
- Tests sur navigateurs et mobile en temps réel
Travaux pratiques
Utilisation du système de grille précédemment crée pour la création d’une page web complète structurée
Vers une page responsive
Adaptation de cette page pour du design fluide
Ajout des media queries pour une page responsive
Tests sur différents navigateurs, périphériques et résolutions
Animations et transformations
- Transformations de base (rotation, translation, etc.)
- Transformations 3D (perspective)
- Transitions : changement progressif d'un style
- Animations autonomes
Vectoriel
- Utilisation d’images vectorielles SVG
Nouvelles balises audio/video
- Balise audio et options
- Balises vidéo et options
- Formats pris en charge
Techniques
- Notation BEM
- CSS Orienté Objet
- Code maintenable
Travaux pratiques
Création de transitions et animations et insertion dans la page
- Transfert des fichiers via FTP
- Configuration de son hébergement
Travaux pratiques
Mise en ligne de la page web
Application Web
Intégration d’une mini application web en mode plein écran afin de voir les différences de codage HTML/CSS par rapport à une page standard
Rendre son application responsive
Programme mis à jour le 12/06/2025
Public concerné
Ce cours HTML CSS s’adresse principalement aux nouveaux développeurs souhaitant acquérir les bases nécessaires pour concevoir et développer des sites ou des applications web modernes et dynamiques. Ces développeurs, juniors, disposent d’une connaissance pratique du web, des grands principes du balisage et d’une notion du code source sans pour autant avoir développé un site ou une application professionnelle par eux-mêmes.
La formation intéressera également les chefs de projet web devant coordonner des développeurs et graphistes pour mieux comprendre la participation de chacun au sein de la conception d’un site ou d’une application web. Ces mêmes chefs de projet peuvent aussi suivre cette formation pour acquérir des pistes de réflexion sur les optimisations possibles en termes de performances (technique, SEO, vitesse d’affichage), de procédés de tests ou de veille globale.

Prérequis
Les participants à cette formation HTML CSS doivent posséder une connaissance pratique du web, initiée à travers des travaux d’étude ou nourrie par une curiosité personnelle. Aucun strict prérequis de programmation n’est cependant demandé.
Des notions d’ergonomie et de responsive design sont souhaitables afin d’orienter vos premiers projets de développement conformément aux bonnes pratiques du Web.
J’évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Faire le testFinancement
Cette formation peut être prise en charge par votre entreprise, seule ou avec l’appui de son opérateur de compétences. Nous fournissons le devis et les pièces attendues par l’OPCO.
4,7/5
38 avis
« Mon avis sur le contenu du stage : "La formation réponds tout à fait a mes attentes et j'ai même appris bien plus que ce je pensais apprendre au départ !! Le niveau technique augmente graduellement au fur et a mesure ce qui est très bien ! Beaucoup de TP, ce qui est une bonne chose et même des TP que l'on peut s'approprier en construisant notre propre site web :)" Mon avis sur le formateur : "Le formateur maîtrise son sujet et c'est un plaisir de l'écouter parler. Le formateur est très bon pédagogue, les notions parfois un peu complexes sont expliquées avec des mots simples et mis en images à l'aide des nombreuses références web et littéraires. Le formateur s'assure de notre assimilation continuellement en recueillant notre feedback, il est à l’écoute de nos interrogations et y réponds rapidement. Le formateur maîtrise le scénario du stage, on sait en permanence où on en est et ou l'on va." Ce que j'ai le plus apprécié : "Convivialité respectueuse et bonne ambiance de travail dans notre petit groupe de stagiaires + formateur" Ce que j'ai le moins apprécié : "ras" »
LIETART SébastienSOPRA STERIA GROUP SA « Mon avis sur le contenu du stage : "Globalement cours tres bien construite. Pour moi pour les exercices il manquait du temps pour que je fasse mes propres erreurs et trop do copier/coller au debut. Mais je comprends qu'il y a une contrainte de temps donc c'est bien d'avoir access aux exercices par la suite. " Mon avis sur le formateur : "Tres bon animateur avec une bonne pedagogie et des connaisances technique.J'aurais peut etre appreciee de passer plus de temps sur les examples et les cas d'utilisation. J'ai bien aimer faire les tests en live avec lui, pour regarder les resultats. " Ce que j'ai le plus apprécié : "bien gerer le groupe en partie en distancielle et aussi avec les personnes dans le salle" Ce que j'ai le moins apprécié : "j'ai du mal a me concentrer pour les exercices quand j'ai du bruit, et dans une cours virtuelle c'est normale que l'instructeur parle aux autres. Donc pas facile de concilier mais avec les exercices a faire en dehors du cours c'est une bonne compromis" »
MILLS JustineCIE IBM FRANCE « Mon avis sur le contenu du stage : "Formation parfaite pour les chefs de projet web, product owners, UX designers, rédacteurs web et autres référenceurs, qui ont besoin de connaître l'étendue du possible offerte par HTML5, CSS, Bootstrap, GIT, etc, mais aussi pour connaître les bonnes pratiques nécessaires au travail en équipe avec des développeurs. Je recommande !" Mon avis sur le formateur : "Thierry est à l'écoute, pédagogue, il s'adapte en fonction des interlocuteurs et réoriente les exercices en fonction de nos questionnements. Grand merci !" Mon avis sur la salle de formation : "Adobe connect et logmein fonctionnent mais avaient tendance à couper (pas toujours en même temps ce qui signifie que ce n'était pas un problème de connexion au réseau)" Ce que j'ai le plus apprécié : "FOAD possible" Ce que j'ai le moins apprécié : "ràs" »
GD
Les avis figurant ci-dessus sont issus des fiches d’évaluation que remplissent les participants à la fin de la formation. Ils sont ensuite publiés automatiquement si les personnes ont explicitement accepté que nous les diffusions.
Formations liées
- HTMX & Alpine.js : Développement web moderne sans complexitéRéf. HTAL3 joursIntermédiaireProchaine session : 18 nov.2 090 €
- JavaScript, les fondamentauxRéf. IJDH3 joursIntermédiaireProchaine session : 12 oct.2 090 €
- JavaScript, programmation avancéeRéf. IJDA3 joursAvancéProchaine session : 26 oct.2 090 €
- JQuery : Développer en Javascript avec jQueryRéf. IJFJ2 joursIntermédiaire