Niveau : Moyen — Durée estimée : 90 min — 10 exercices avec corrections détaillées
Rappel des notions clés
Le développement web repose sur trois piliers fondamentaux. Le HTML structure le contenu de ta page à l'aide de balises sémantiques. Le CSS s'occupe de la présentation (mise en page, couleurs, typographies) en utilisant des sélecteurs pour cibler les éléments. Enfin, le JavaScript apporte l'interactivité en manipulant le Document Object Model (DOM).
Pour les formulaires, il est crucial de comprendre l'utilisation des balises form, input, label et select. Chaque champ doit posséder un attribut "name" pour que les données soient identifiables lors de l'envoi vers un serveur. La validation côté client, bien que non suffisante pour la sécurité, améliore grandement l'expérience utilisateur.
En CSS, la maîtrise de Flexbox et Grid est aujourd'hui indispensable pour créer des designs responsifs qui s'adaptent à tous les écrans. En JavaScript, l'écoute d'événements comme "click" ou "submit" permet de déclencher des fonctions spécifiques en réponse aux actions de l'utilisateur.
Structure de base : <form action="url" method="POST"> | Sélecteur CSS : .ma-classe { property: value; } | JS Event : element.addEventListener('event', callback);
Exercices — Niveau Facile
Exercice 1 : Crée la structure HTML d'un formulaire de contact comprenant : un champ texte pour le nom, un champ email, une liste déroulante pour le sujet (Demande, Support, Autre) et un bouton d'envoi. N'oublie pas les labels.
Correction :
Pour structurer ce formulaire, on utilise la balise <form>. Chaque champ de saisie doit être associé à un <label> via l'attribut "for" correspondant à l'id de l'input.
<form> <label for="nom">Nom :</label> <input type="text" id="nom" name="user_nom"> <label for="email">Email :</label> <input type="email" id="email" name="user_email"> <label for="sujet">Sujet :</label> <select id="sujet" name="sujet"> <option value="demande">Demande</option> <option value="support">Support</option> <option value="autre">Autre</option> </select> <button type="submit">Envoyer</button> </form>
Résultat : Un formulaire sémantiquement correct et accessible.
Exercice 2 : En CSS, comment centrerais-tu horizontalement et verticalement un div portant la classe "box" à l'intérieur d'un conteneur parent ?
Correction :
La méthode la plus moderne et simple est d'utiliser Flexbox sur le parent.
.parent { display: flex; justify-content: center; align-items: center; height: 100vh; }
Justify-content gère l'axe principal (horizontal par défaut) et align-items l'axe secondaire (vertical). Le div .box sera parfaitement centré.
Exercice 3 : Écris une fonction JavaScript qui change la couleur de fond d'un paragraphe (id="monTexte") en rouge lorsqu'on clique sur un bouton (id="monBouton").
Correction :
Il faut d'abord sélectionner les éléments du DOM, puis ajouter un écouteur d'événement.
const btn = document.getElementById('monBouton'); const txt = document.getElementById('monTexte'); btn.addEventListener('click', () => { txt.style.backgroundColor = 'red'; });
L'action est déclenchée par l'événement click.
Exercices — Niveau Moyen
Exercice 4 : CSS Flexbox. Tu as 3 éléments dans un conteneur. Comment faire pour que le premier et le dernier soient aux extrémités et le deuxième au centre exact ?
Correction :
On utilise la propriété justify-content sur le conteneur parent défini en display: flex.
.container { display: flex; justify-content: space-between; }
Space-between répartit l'espace libre entre les éléments, plaçant les extrémités contre les bords.
Exercice 5 : Validation de formulaire en JS. Empêche l'envoi d'un formulaire (id="inscription") si le mot de passe (id="pass") contient moins de 8 caractères.
Correction :
On intercepte l'événement "submit" et on utilise preventDefault().
const form = document.getElementById('inscription'); form.addEventListener('submit', (e) => { const pass = document.getElementById('pass').value; if (pass.length < 8) { e.preventDefault(); alert('Trop court !'); }});
L'envoi est stoppé si la condition n'est pas remplie.
Exercice 6 : Utilise CSS Grid pour créer une mise en page simple : un header en haut, une zone de contenu à gauche (70%) et une sidebar à droite (30%), et un footer en bas.
Correction :
On définit les grid-template-areas sur le parent.
.parent { display: grid; grid-template-columns: 7fr 3fr; grid-template-areas: "header header" "main side" "footer footer"; } header { grid-area: header; } main { grid-area: main; } aside { grid-area: side; } footer { grid-area: footer; }
C'est la méthode la plus lisible pour des layouts complexes.
Exercices — Niveau Difficile
Exercice 7 : Crée un script JS qui récupère les données d'une API (URL fictive : https://api.exemple.com/users) et affiche la liste des noms des utilisateurs dans une balise <ul>.
Correction :
On utilise l'API Fetch avec des promesses ou async/await.
async function getUsers() { const response = await fetch('https://api.exemple.com/users'); const users = await response.json(); const ul = document.querySelector('ul'); users.forEach(user => { const li = document.createElement('li'); li.textContent = user.name; ul.appendChild(li); });} getUsers();
On transforme la réponse en JSON puis on boucle pour créer les éléments HTML.
Exercice 8 : Explique et cod'un système de "Dark Mode" simple : au clic sur un bouton, on ajoute une classe "dark-theme" au body. En CSS, prévois le changement de couleur de fond et de texte.
Correction :
JS : document.getElementById('toggle').addEventListener('click', () => { document.body.classList.toggle('dark-theme'); });
CSS : body { background: white; color: black; } body.dark-theme { background: black; color: white; }
La méthode classList.toggle est idéale pour basculer entre deux états.
Exercice 9 : Manipulation de tableaux complexes. Tu as un tableau d'objets (produits avec nom et prix). Utilise .filter() et .reduce() pour calculer le prix total des produits coûtant plus de 50€.
Correction :
const total = produits.filter(p => p.prix > 50).reduce((acc, p) => acc + p.prix, 0);
On filtre d'abord pour ne garder que les produits chers, puis on somme leurs prix.
Exercice 10 : Crée une animation CSS où un carré passe de gauche à droite de l'écran en changeant de couleur au milieu du trajet.
Correction :
On utilise les @keyframes.
@keyframes move { 0% { left: 0; background: blue; } 50% { background: red; } 100% { left: 100%; background: blue; } } .carre { position: absolute; animation: move 4s infinite; }
L'animation boucle indéfiniment grâce au mot-clé infinite.
Bilan et conseils
Ce qu'il faut retenir : La structure HTML doit toujours être sémantique. Le CSS doit rester organisé (utilise des variables !). En JS, privilégie les méthodes modernes (ES6+) comme Fetch, async/await et les méthodes de tableaux. Entraîne-toi à séparer tes fichiers pour garder un code propre et maintenable.
Comment ORBITECH Peut T'aider
ORBITECH AI Academy met à ta disposition des outils concrets pour réviser plus efficacement et progresser à ton rythme.
- Générateur de Quiz : crée des quiz personnalisés pour tester tes connaissances et identifier tes lacunes.
- Générateur d'Exercices : crée des exercices d'entraînement adaptés à ton niveau avec corrections détaillées.
- Générateur de Résumés : transforme tes cours en fiches de révision claires et structurées.
- Générateur de Mind Maps : visualise et organise tes idées avec des cartes mentales générées automatiquement.
Tous ces outils sont disponibles sur ta plateforme ORBITECH. Connecte-toi et explore ceux qui correspondent le mieux à tes besoins !