Formation Développement Web - Niveau 2 : Approfondissez vos compétences en création de sites et applications

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.

Approfondir la structure d’une page web

• Identifier les structures d’éléments HTML (section, article, aside, nav).
• Utiliser des éléments vides (br, hr, img, input).
• Définir le DOCTYPE d’un document et comprendre son rôle.

Organiser l’information avec précision

• Identifier les niveaux de titres (h1 à h6) et leurs usages.
• Utiliser les attributs complexes d’un tableau (rowspan, colspan, thead, tbody, tfoot).

Enrichir le contenu multimédia

• Ajouter une vidéo à une page (video, formats, attributs controls, autoplay, loop).

Structurer des formulaires accessibles

• Ajouter des intitulés (label) à chaque champ de saisie.
• Relier correctement les champs et leurs labels pour améliorer l’accessibilité.

Approfondir la manipulation des variables

• Utiliser les opérateurs d’affectation (+=, -=, *=, /=, %=, **=).
• Comprendre et appliquer la comparaison stricte (===, !==) pour éviter les erreurs de type.

Construire des logiques conditionnelles avancées

• Configurer des décisions conditionnelles complexes avec combinaisons de if, opérateurs logiques et conditions imbriquées.
• Études de cas : gestion de formulaires, scénarios multi-options.

Travailler avec les données et cas particuliers

• Gérer les propriétés indéfinies dans les objets (undefined, null, opérateur ?. et ??).
• Bonnes pratiques pour éviter les erreurs d’exécution.

Interagir avec la page web

• Ajouter dynamiquement un élément dans le DOM (createElement, appendChild, insertBefore).
• Exemple pratique : créer une liste interactive à partir d’un tableau JavaScript.

Maîtriser les échanges de données avec JSON

• Sérialiser un objet en JSON (JSON.stringify).
• Désérialiser du JSON en objet JavaScript (JSON.parse).
• Exemple pratique : stocker et lire des données dans le localStorage.

Maîtriser les unités de mesure

• Différencier les unités de distance :
  • Absolues : px, cm, in.
  • Relatives : %, em, rem, vh, vw.
• Bonnes pratiques : choisir la bonne unité pour un design responsive.

Travailler avec les couleurs

• Différencier les unités de couleur :
  • Nom de couleur (red, blue).
  • Hexadécimal (#ff0000).
  • RGB et RGBA (rgb(255,0,0), transparence incluse).
  • HSL et HSLA (hsl(120, 100%, 50%)).
• Exemple pratique : créer une palette cohérente pour un site.

Styliser les polices

• Changer le style de police (font-style: italic;).
• Modifier la graisse de police (font-weight: bold; ou valeurs numériques).
• Exercice : différencier les titres et sous-titres par style et poids.

Créer des effets interactifs

• Changer le style d’un élément au survol (:hover).
• Appliquer un changement de couleur, soulignement, agrandissement.
• Exemple pratique : transformer un bouton sobre en bouton interactif au passage de la souris.

Positionner les éléments avec précision

• Définir le positionnement relatif et absolu (position: relative;, position: absolute;).
• Comprendre les différences et les cas d’usage.
• Manipuler les propriétés top, right, bottom, left.
• Exemple pratique : placer une image ou un bouton dans un coin spécifique d’une page.

Identifier les bons outils HTML et CSS

• Associer une balise HTML pertinente en fonction du contenu (titre, paragraphe, image, bouton…).
• Choisir la propriété CSS adaptée pour obtenir l’effet visuel recherché (ex. display, flex, grid, border, background).
• Bonnes pratiques d’intégration : utiliser le bon couple sémantique HTML + style CSS pour optimiser accessibilité et maintenance.
• Exercice pratique : analyser une maquette et décider quelles balises et propriétés CSS utiliser.

Implémenter une mise en page concrète : le jeu de cartes

• Partir d’une structure HTML donnée (balises de base fournies).
  • Utiliser CSS pour créer la mise en page d’un jeu de cartes :
  • Gérer les dimensions (width, height).
  • Styliser les bordures et ombres (border, box-shadow).
  • Placer les cartes dans une grille ou un flexbox.
  • Gérer l’espacement (margin, padding, gap).
• Ajouter des effets visuels (fond, coins arrondis, survol).
• Exercice pratique : transformer un HTML brut en une grille de cartes attrayante et responsive.

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.