- Cours pratique
- Informatique
Formation Maîtriser HTML5, CSS3, JavaScript et Ajax
Tirer pleinement profit des nouveautés apportées par les dernières versions dont CSS Grid
- Durée
- 5 jours
- Niveau
- Fondamental
- Modalités
- Présentiel / Distanciel
Description de la formation HTML5 CSS3
La formation HTML5 est destinée aux développeurs et intégrateurs souhaitant mettre à jour leurs connaissances pour créer des sites Internet performants et robustes utilisant les technologies de pointe du web apportées par les nouvelles spécifications. Ce cours s'adresse aussi aux débutants qui veulent commencer directement par les bonnes pratiques.
Les développements seront adaptés aux différents supports (responsive design) et permettront aussi de créer des applications (mobiles, tablettes, etc.). Au cours de 5 jours de formation, nous aborderons ensemble les nouveautés vastes et puissantes apportées conjointement par le HTML5, le CSS3, le puissant module CSS Grid et les nouvelles versions de JavaScript et AJAX.
Objectifs pédagogiques
- Utiliser dès maintenant les nouveautés du web, en restant rétro-compatible
- Tirer partie des nouveautés et ainsi alléger les besoins en JavaScript
- Faire de la vidéo, du son et des animations, sans Flash
- Faire du graphisme avancé et certaines images, sans Photoshop
- Créer des mises en page avec les CSS Grid
- Améliorer son référencement dans les moteurs de recherche
- Adapter l'affichage des versions mobile / tablette (responsive design)
- Proposer des services géolocalisés
- Faciliter la communication entre le serveur et le navigateur
- Proposer des applications hors ligne (mobile, tablette).
Objectifs opérationnels
Objectif opérationnel :
Mettre en œuvre les nouveautés de HTML5, CSS3, CSS Grid et les nouvelles versions de JavaScript et AJAX lors du développement et l'intégration de sites et applications web.
Programme
Contenu du cours, module par module
18 modules
- HTML5, standards et (rétro-)compatibilité
- Navigateurs et outils de travail
- HTML5 vs Flash
- Applications HTML5 vs applications natives
- Sémantique, référencement et accessibilité en HTML5
- DOCTYPE, encodage, règles de syntaxe
- Les nouvelles balises sémantiques
- Relations, micro-formats et micro-données
- Vue d’ensemble des formulaires nouvelle génération
- Les nouveaux éléments : progress, meter, datalist, keygen, output
- Nouveaux types de champs : tel, url, email, search, number, etc.
- Nouveaux attributs : autofocus, placeholder, form, required, etc.
- Validation par le navigateur : required, pattern, formnovalidate
- Suggestions automatiques
- Exemple récapitulatif
- Mode strict et chargement asynchrone
- DOM Level 3 : agir sur la page
- Gestion dynamique des évènements
- Debug et détection du support du HTML5
- JSON et initiation au modèle objet
- Initiation à jQuery
- Codecs et formats (H264/MP4, OGG/theora, WebM/VP8)
- Compatibilité et navigateurs
- Les outils de conversion (rapide)
- Savoir utiliser les services existants : Dailymotion, Youtube, Viemo
- Les balises video, audio
- Proposer plusieurs sources dans plusieurs formats
- Pré-requis (type MIME et .htaccess)
- Les attributs : controls, preload, autoplay, poster
- Test de téléchargement d’une vidéo selon plusieurs formats depuis plusieurs navigateurs
- Traitements en JavaScript
- Les pseudo-classes et pseudo-éléments
- Les sélecteurs d’attributs (^, $, *)
- Exemple d’application de style « intelligente » combinant les nouveautés
- Les positionnements (absolu, fixe, naturel)
- Mise en page avec float
- Mise en page avec Flex : box-sizing, border box, etc.
- Système de grid
- Disposition en colonnes
- Régions et exclusions
- Limites et apports des frameworks (bootstrap, etc.)
- Limites des tableaux et apports des CSS Grid
- Positionnement explicite et implicite des objets sur une grille CSS
- Alignement des boîtes avec les grilles CSS
- Utiliser les lignes ou les zones de la grille ?
- Complémentarité Flexbox et Grid
- Compatibilité avec les anciens navigateurs
- Polices de caractères personnalisées
- Couleurs avancées et dégradés
- Ombres et opacité
- Bordures et arrière-plans avancés
- Problèmes techniques posés par l’hétérogénéité (PC, téléphone, tablette)
- Solutions apportées par le Responsive Design
- Pré-requis pour faire du Responsive Design
- Media-queries : s'adapter à la résolution d'écran et à l'orientation
- Viewport
- Déterminer la valeur d’une propriété CSS (calc)
- Positionnement colonnes, tailles fluides et media queries
- Disposition adaptative des grilles CSS (grid-template-areas)
- Etat des lieux
- La détection des capacités des navigateurs
- Recommandations
- Quels outils pour développer et debugguer ?
- Les outils pour améliorer la productivité et la rapidité de codage
- Les outils d’une bonne veille technique
- Les méthodes de codage moderne pour un code maintenable
- Les tendances à venir
- XMLHttpRequest 2
- Fichiers joints et progression
- Requêtes cross-domain
- AJAX avec historique
- Navigation par ancres
- Communication entre onglets
- Obtenir et suivre la position de l'utilisateur
- Images vectorielles
- Création dynamique d'images en JavaScript
- Attributs data- personnalisés
- localStorage et sessionStorage
- manifest.
- indexedDB : base de données locale
- SPDY : le HTTP accéléré
- Server-sent events
- Websockets : communication permanente
- Initiation à node.js
- Webworkers: scripts simultanés et partagés
- Page Visibility API
- Battery API
- Navigation Timing AP
Travaux pratiques
Utilisation des nouvelles balises HTML5 et des nouveautés graphiques du CSS3, intégration d'une vidéo sans Flash, exemple de responsive design, animation sans Flash, tests des nouveautés JavaScript, exemple de la géolocalisation avec Google Maps, mise en place de la structure d'une application, chevauchement d’éléments avec les CSS Grid, etc.
Programme mis à jour le 15/12/2025
Public concerné
Cette formation HTML5 est destinée aux développeurs web ainsi qu'aux intégrateurs HTML.
Prérequis
Des connaissances générales du web et des bases en HTML, CSS et JavaScript sont nécessaires pour suivre ce cours.
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,8/5
23 avis
« Mon avis sur le contenu du stage : "Tous les concepts ont été balayé. On a une vraie vue d'ensemble de ce qui est possible et de l'évolution des langages" Mon avis sur le formateur : "L'animateur maîtrise bien son sujet et aborde les choses avec beaucoup d'exemples" Mon avis sur la salle de formation : "J'ai fait une formation à distance. J'arrivais à suivre sans pb le poste du formateur, par contre pour se connecter dans sur la machine distante pour faire les TP, cela coupait régulièrement. Du coup j'ai travaillé sur mon poste directement. Cela n'a pas été gênant pour cette formation mais pourrait l'être pour d'autres" Ce que j'ai le plus apprécié : "Les supports de cours, tous les exemples pratiques qui sont fournis et qui peuvent servir de référence plus tard" Ce que j'ai le moins apprécié : "Quelques déconnexions sur la machine TP (LogMeIn). Par contre pour suivre la salle du formateur à distance c'était efficace. " »
LM « Mon avis sur le contenu du stage : "j'ai surtout apprécie que l'on soit un petit groupe, on pouvait facilement solliciter le formateur qui a toujours été disponible. Nous avons vu beaucoup de choses en peu de temps, du coup je ne m'estime pas au point, il faut que je pratique beaucoup à la maison pour assimiler les choses vues en cours." Mon avis sur le formateur : "Thierry est à l'écoute et répond aux questions des stagiaires. Il est disponible, cool et professionnel à la fois" »
BENSLIMANE Slimane « Mon avis sur le contenu du stage : "Formation trop intense ! Beaucoup de chapitres, d'informations à appréhender en peu de temps surtout pour une débutante Manque de temps pour s'exercer pour retenir les concepts et syntaxes" Mon avis sur le formateur : "Très bon professeur, à l'écoute, disponible qui a rendu cette formation dense dynamique et agréable !" Ce que j'ai le plus apprécié : "Le professeur" Ce que j'ai le moins apprécié : "La distance impacte la spontanéité" »
FRIANT ZoéMINISTÈRE DE L'EDUCATION NATIONALE
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
- Maîtriser JavaScriptRéf. IJSO4 joursIntermédiaireProchaine session : 12 oct.2 490 €
- Next.js : L'essentiel du framework Next.jsRéf. NXJS3 joursFondamentalProchaine session : 2 déc.2 090 €
- Node.js : Développer des Web Services en JavaScript Réf. INOJ3 joursFondamentalProchaine session : 14 oct.2 090 €
- Nuxt.JS : Architecture, Performances et DéploiementRéf. NUXT3 joursIntermédiaire2 090 €