Mettez la main à la pâte avec des exercices interactifs pour consolider vos acquis.
PHASE 1.4 : EXERCICES PRATIQUES
Évaluation Complète
📋 PARTIE 1 : QUESTIONS DE COURS (Réponse Libre - 30 pts)
Section A : Histoire du Web (10 questions)
1.
Qui a inventé le World Wide Web et en quelle année ?
2.
Quel a été le premier navigateur graphique et qui l'a créé ?
3.
Pourquoi le projet "Phoenix" a-t-il été renommé "Firefox" ?
4.
Quelle a été l'innovation majeure de Google Chrome lors de son lancement en 2008 ?
5.
Quelle est la date de sortie de Firefox 1.0 ?
6.
Pourquoi Microsoft a-t-il abandonné son moteur Chakra pour adopter Chromium ?
7.
Qui a créé Deno et pourquoi ?
8.
Quelle est la différence entre Netscape Navigator et Internet Explorer dans les années 90 ?
9.
En quelle année Apple Safari a-t-il été lancé et quel moteur utilise-t-il ?
10.
Qu'est-ce que le projet Mozilla et pourquoi a-t-il été créé ?
Section B : Architecture du Web (10 questions)
1.
Explique le modèle Client-Serveur avec une analogie concrète.
2.
Quelle est la différence entre HTTP et HTTPS ?
3.
Quels sont les codes de statut HTTP des familles 2xx, 3xx, 4xx et 5xx ? Donne un exemple pour chaque.
4.
Comment fonctionne la résolution DNS ? Détaille chaque étape.
5.
Qu'est-ce qu'un CDN et à quoi sert-il ?
6.
Quelle est la différence entre TCP et UDP ?
7.
Qu'est-ce que le TTFB (Time To First Byte) et pourquoi est-il important ?
8.
Explique le "3-way handshake" de TCP.
9.
Quelle est la différence entre HTTP/1.1 et HTTP/2 ?
10.
Qu'est-ce que QUIC et en quoi améliore-t-il HTTP ?
Section C : Technologies du Web (10 questions)
1.
Cite 5 balises sémantiques HTML5 et explique leur rôle.
2.
Quelle est la différence entre localStorage et sessionStorage ?
3.
À quoi servent les Service Workers ?
4.
Quelle est la différence entre display: flex et display: grid ?
5.
Explique le concept de "Mobile-First" avec les Media Queries.
6.
Quelle est la différence entre em et rem en CSS ?
7.
Que sont les Web Workers et quand les utiliser ?
8.
Explique la différence entre let, const et var en JavaScript.
9.
Qu'est-ce que CORS et pourquoi est-ce important ?
10.
Cite les 3 Core Web Vitals et leurs objectifs.
🎯 PARTIE 2 : QCM (Choix Multiples - 30 pts)
Sélectionnez la bonne réponse pour chaque question.
Section A : Histoire du Web (10 questions)
1. En quelle année le World Wide Web a-t-il été inventé ?
2. Qui a créé le premier navigateur graphique (Mosaic) ?
3. Quel était le nom du projet qui a précédé Firefox ?
4. En quelle année Google Chrome a-t-il été lancé ?
5. Quel moteur JavaScript utilise Google Chrome ?
6. Qui a créé JavaScript ?
7. En quelle année Microsoft Edge est-il passé à Chromium ?
8. Quel est le moteur JavaScript de Safari ?
9. Qui a créé Node.js ?
10. En quelle année Bun 1.0 est-il sorti ?
Section B : Architecture Web (10 questions)
1. Que signifie HTTP ?
2. Quel code HTTP signifie "Not Found" ?
3. Quelle est la méthode HTTP idempotente ?
4. Que fait un CDN ?
5. Quel protocole est utilisé pour la résolution DNS ?
🛠️ PARTIE 3 : EXERCICES PRATIQUES (40 pts)
Exercice 1 : Structure HTML (1h - 10 pts)
ObjectifCréez une page HTML sémantique.
Consignes :
-
Créez une page HTML avec un
<header>contenant le titre et une navigation. -
Un
<main>avec un<article>(titre, date, contenu). -
Un
<aside>avec des liens associés. -
Un
<footer>avec copyright. - Utilisez des balises sémantiques appropriées.
-
Ajoutez des images avec
<figure>et<figcaption>. - Créez un formulaire de contact avec validation HTML5.
Voir la Correction ▼
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Article</title>
</head>
<body>
<header>
<h1>Mon Blog</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">À propos</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>HTML5 : La révolution du Web</h2>
<p>Publié le <time datetime="2026-07-29">29 juillet 2026</time></p>
</header>
<section>
<h3>Les nouvelles balises sémantiques</h3>
<p>HTML5 a introduit de nombreuses balises...</p>
<figure>
<img src="html5.png" alt="Logo HTML5">
<figcaption>Logo officiel de HTML5</figcaption>
</figure>
</section>
<section>
<h3>Les APIs avancées</h3>
<p>HTML5 propose de nombreuses APIs...</p>
</section>
<footer>
<p>Catégorie : <a href="#">Technologie</a></p>
</footer>
</article>
<aside>
<h3>Articles récents</h3>
<ul>
<li><a href="#">CSS3 : Le style moderne</a></li>
<li><a href="#">JavaScript : Le langage du Web</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 - Mon Blog</p>
</footer>
</body>
</html>
Exercice 2 : CSS & Responsive (2h - 10 pts)
ObjectifCréez une page responsive avec CSS moderne.
Consignes :
- Stylisez la page de l'exercice 1 avec une palette de couleurs (variables CSS).
- Utilisez Flexbox pour la navigation et CSS Grid pour la mise en page.
- Rendez la page responsive avec des Media Queries.
- Ajoutez des animations au survol des liens.
- Créez un mode sombre automatique.
Voir la Correction ▼
/* Variables */
:root {
--color-primary: #3498db;
--color-secondary: #2c3e50;
--color-background: #f8f9fa;
--color-text: #2c3e50;
--color-link: #3498db;
--font-family: 'Inter', system-ui, sans-serif;
--spacing-large: 2rem;
--spacing-medium: 1rem;
--shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Mode sombre */
@media (prefers-color-scheme: dark) {
:root {
--color-background: #1a1a2e;
--color-text: #e0e0e0;
--color-primary: #6c5ce7;
--color-link: #6c5ce7;
--shadow: 0 2px 8px rgba(255,255,255,0.05);
}
}
Exercice 3 : JavaScript & DOM (2h - 10 pts)
Todo ListCréez une application interactive avec JavaScript.
Consignes :
- Créez une liste de tâches (Todo List) avec ajout, suppression et marquage "complétée".
- Compteur de tâches restantes.
- Utilisez localStorage pour persister les tâches.
Exercice 4 : API & Fetch (2h - 10 pts)
API RESTInteragissez avec une API REST.
Consignes :
- Utilisez l'API publique JSONPlaceholder.
- Récupérez et affichez les utilisateurs.
- Ajoutez un formulaire pour créer un nouvel utilisateur.
💡 PARTIE 4 : CONSEILS & BONNES PRATIQUES
4.1 Conseils pour Apprendre
1. Pratique quotidienne (30 min minimum)
- Code tous les jours, même 30 minutes.
- Reproduis des sites existants.
- Résous des katas sur Codewars/LeetCode.
2. Projets personnels
- Commence par un portfolio.
- Fais un blog technique.
- Crée une application utilitaire (todo list, météo, etc.).
3. Lecture de code
- Lis le code des projets open-source.
- Comprends les patterns utilisés.
- Analyse les bonnes pratiques.
4. Documentation
- Lis la documentation officielle (MDN, Node.js docs).
- N'hésite pas à consulter les spécifications.
4.2 Erreurs Courantes à Éviter
HTML/CSS
<div class="header">...</div>
<span class="title">...</span>
<div onclick="..." />
<header>...</header>
<h1>...</h1>
<button onclick="...">...</button>
CSS
* { margin: 0; } /* Trop agressif */
.class { font-size: 14px; }
* { margin: 0; padding: 0; box-sizing: border-box; }
.class { font-size: 1rem; }
JavaScript
var x = 10;
if (x == 10)
console.log("Hello " + name);
const x = 10;
if (x === 10)
console.log(`Hello ${name}`);
4.3 Outils Recommandés
| Outil | Rôle | Alternative |
|---|---|---|
| VS Code | Éditeur de code | Cursor, WebStorm |
| Chrome DevTools | Debugging | Firefox DevTools |
| Postman | Test API | Insomnia, Hoppscotch |
| Git | Versioning | GitHub Desktop |
| ESLint | Linter | Prettier |
| Vite | Bundler | Webpack, Parcel |
4.4 Ressources d'Apprentissage
Documentation
- MDN Web Docs
- W3C Specifications
- WHATWG Living Standard
Cours
- FreeCodeCamp
- The Odin Project
- Scrimba
Pratique
- Codewars
- LeetCode
- Frontend Mentor
📊 BARÈME D'ÉVALUATION
Répartition des points
- Questions de Cours (30 × 1) 30 pts
- QCM (30 × 1) 30 pts
- Exercice 1 (Structure HTML) 10 pts
- Exercice 2 (CSS & Responsive) 10 pts
- Exercice 3 (JS & DOM) 10 pts
- Exercice 4 (API & Fetch) 10 pts
- Total 100 pts