test
Objectif de la série
Former un débutant complet jusqu’à la création d’un mini-site vitrine dynamique (front + back léger), puis d’un petit projet type blog/portfolio en PHP (sans framework), et enfin poser les bases pour WordPress.
Structure globale (5 parcours emboîtés)
Parcours 0 — Mise en place & bases Web (2 tutos)
Parcours 1 — HTML (6 tutos)
Parcours 2 — CSS (8 tutos)
Parcours 3 — JavaScript (10 tutos)
Parcours 4 — PHP + MySQL (12 tutos)
Parcours 5 — Bonus WordPress (4 tutos d’intro, optionnel)
Chaque tuto inclut : objectifs, prérequis, durée, ressources, pas-à-pas, exercice, correction, quiz.
Parcours 0 — Mise en place & bases Web (2)
Installer son environnement
Contenu : VS Code, extensions, navigateurs, emmet, live server, Git en 10 min.
Exercice : créer un dossier de projet structuré.
Comprendre le Web
HTTP/HTTPS, client/serveur, DNS, hébergement (o2switch), fichiers statiques vs dynamiques, chemin relatifs/absolus.
Exercice : schéma « du clic à la page ». Quiz.
Parcours 1 — HTML (6)
Votre première page HTML : structure, doctype, head/body, encodage, titres, paragraphes, listes.
Liens & images : balises a, img, attributs alt/title, chemins.
Mise en forme sémantique : strong/em, blockquote/code, abbr, time.
Structure sémantique moderne : header/nav/main/section/article/aside/footer.
Tableaux & médias : table, thead/tbody, figure/figcaption, audio/vidéo.
Formulaires (base) : input, textarea, select, label, attributs requis, validations HTML5.
Mini‑projet HTML : une page « CV » + une page « Contact ».
Parcours 2 — CSS (8)
Brancher le CSS & sélecteurs : reset, héritage, spécificité, cascade.
Couleurs, unités, typographies : rem/em, variables CSS, @font-face, Google Fonts.
Box model & layout : margin/padding/border, display, overflow.
Flexbox : concepts + grille de cartes.
Grid : mise en page du site (header, sidebar, content, footer).
Responsive design : media queries, images responsives, mobile-first.
Animations & transitions : hover, keyframes, micro-interactions.
Accessibilité & bonnes pratiques : contrastes, focus, lecture d’écran.
Mini‑projet CSS : maquette « Site vitrine Apéro Club » (couleurs #ECB13B, #EDE2C8).
Parcours 3 — JavaScript (10)
JS en douceur : où placer le script, console, variables, types.
Conditions, boucles, fonctions : exercices courts.
DOM 101 : querySelector, événements, classes, attributs, dataset.
Formulaires + validation côté client : messages d’erreur accessibles.
Fetch & APIs : requêtes GET/POST, JSON, erreurs, CORS (théorie simple).
LocalStorage & state : enregistrer des préférences.
Modules & organisation : fichiers, import/export.
Outillage moderne (optionnel) : npm, scripts, bundler léger (Vite), ESBuild.
Accessibilité & perf côté front : focus management, debounce, images.
Testing léger (optionnel) : concepts, tests unitaires simples.
Mini‑projet JS : « To‑do list + filtre + persistance ». Puis ajout d’un petit appel d’API publique.