Formation Développement Web - Niveau 3 : Approfondissement & projets professionnels

Activités préparatoires

Un test de positionnement : il permet d'évaluer vos compétences en début de formation.

Pour les formations à distance :

• Une formation de prise en main à notre outil de classe à distance.
• Présentation des ressources pédagogiques qui seront utilisées pendant la formation.

Comprendre et maîtriser les éléments

• Différencier un élément de bloc (div, section, p) d’un élément en ligne (span, a, strong).
• Choisir l’élément pertinent en fonction du contenu pour améliorer la sémantique et l’accessibilité.

Maîtriser les attributs avancés

• Utiliser des attributs booléens (checked, disabled, required).
• Exploiter l’attribut target d’un lien pour contrôler l’ouverture (_blank, _self, etc.).

Structurer des données complexes

• Regrouper les cellules d’un tableau avec thead, tbody, tfoot, et utiliser colspan / rowspan.

Concevoir des formulaires optimisés

• Choisir le type d’entrée pertinent (email, number, date, password, etc.).
• Sélectionner l’élément
  adapté en fonction du contexte et des besoins.

Boucles et itérations avancées

• Revoir les boucles classiques (for, while) et leurs limites.
• Découvrir et utiliser les boucles avancées :
  • for...in pour parcourir les propriétés d’un objet.
  • for...of pour parcourir les valeurs d’un tableau ou d’un objet itérable.
  • forEach pour simplifier l’itération sur les tableaux.
• Exercice pratique : parcourir un tableau d’objets pour afficher des données formatées dans la page.

Utiliser les variables spéciales

• Découvrir la variable this et son usage dans différents contextes (fonctions, objets, événements).
• Comprendre et utiliser arguments pour gérer des fonctions avec un nombre de paramètres variable.
• Découvrir les objets spéciaux du navigateur : window, document.
• Exercice pratique : créer une fonction qui accepte un nombre illimité d’arguments et calcule leur somme.

Manipuler des objets complexes

• Créer et affecter des objets complexes avec des propriétés imbriquées.
• Accéder et modifier des propriétés imbriquées (obj.adresse.rue).
• Ajouter et supprimer des propriétés dynamiquement.
• Bonnes pratiques : gérer les cas où une propriété n’existe pas (?., ??).
• Exercice pratique : créer un objet “utilisateur” avec coordonnées, préférences et historique, puis afficher certaines infos dans la page.

Mettre à jour et remplacer des éléments DOM

• Différence entre modifier un élément et remplacer un élément complet.
• Méthodes pratiques :
  • replaceChild() pour remplacer un élément existant.
  • outerHTML pour remplacer directement via une chaîne HTML.
• Exercice pratique : bouton permettant de remplacer une image ou un bloc texte dans une page.

Transformer et styliser le texte

• Modifier l’affichage d’un texte : majuscules, minuscules, capitalisation (text-transform).
• Exercice : créer des titres uniformisés et visuellement impactants.

Explorer les sélecteurs avancés

• Utiliser et modifier un sélecteur avancé :
  • Sélecteurs de classes multiples (.btn.primary).
  • Sélecteurs d’attributs (input[type="email"]).
  • Sélecteurs combinés (div > p, ul li:first-child).
• Exercice pratique : cibler précisément des éléments dans une page complexe.

Comprendre la cascade et la priorité

• Utiliser les règles de priorité (ordre de lecture, héritage).
• Comprendre la spécificité des sélecteurs :
  • Importance (!important).
  • Inline vs. interne vs. externe.
  • Sélecteurs de balise, classe, ID.
• Cas pratique : résoudre un conflit de style entre plusieurs règles CSS.

Travailler avec plusieurs feuilles de style

• Importer des règles de style avec @import.
• Organiser une architecture CSS modulable (reset, thèmes, styles globaux).
• Exercice pratique : séparer une feuille de style principale et une feuille spécifique “mobile”.

Utiliser les pseudo-éléments pour enrichir l’affichage

• Découvrir ::before et ::after.
• Ajouter du contenu décoratif ou fonctionnel sans modifier le HTML.
• Cas pratique : insérer automatiquement des icônes ou des guillemets stylisés autour d’un texte.

Aligner et distribuer l’espace entre éléments

• Utiliser Flexbox pour aligner et répartir l’espace entre items dans un conteneur.
• Propriétés clés : justify-content, align-items, gap.
• Exercice pratique : créer un bandeau de navigation centré et espacé harmonieusement.

Construire et valider un formulaire complet

• Créer un formulaire HTML avec différents champs (input, select, textarea, button).
• Appliquer des styles CSS personnalisés pour améliorer l’expérience utilisateur :
  • Alignement et espacement.
  • Bordures et couleurs.
  • Styles au focus et au survol.
• Ajouter une validation en JavaScript :
  • Vérifier les champs obligatoires.
  • Contrôler la saisie (emails, nombres, mots de passe).
  • Afficher des messages d’erreur personnalisés.
• Exercice pratique : créer un formulaire d’inscription stylisé et validé côté client.

Déboguer avec le navigateur

• Lire et comprendre une trace de pile d’exception dans la console.
• Identifier l’origine d’une erreur à partir d’une ligne de code et d’un fichier.
• Utiliser les outils de développement du navigateur (Chrome DevTools, Firefox Developer Tools).
  • Onglet Console pour tester des hypothèses.
  • Onglet Sources pour explorer le code et poser des points d’arrêt.
• Exercice pratique : corriger un script erroné en se basant uniquement sur la trace d’erreur.

Travailler avec des bibliothèques tierces et l’accessibilité

• Identifier les informations pertinentes dans la documentation d’une bibliothèque (installation, API, exemples).
• Savoir trouver la bonne ressource (docs officielles, MDN, W3C).
• Comprendre la notion d’accessibilité web (WAI-ARIA, labels, contrastes, navigation clavier).
• Intégrer des bonnes pratiques d’accessibilité dans un composant.
• Exercice pratique : utiliser une bibliothèque tierce (ex. une lib de datepicker), lire sa documentation et l’adapter pour la rendre accessible.

Passage de la certification TOSA® en ligne

asbéo est centre agréé TOSA
Reconnue dans toute l'Europe, la certification TOSA® atteste d'un niveau de compétences sur le logiciel étudié. Elle délivre un score sur 1000 exploitable sur un CV.