index.html
Le contenu
Le HTML décrit la structure : titres, paragraphes, boutons et sections.
Laboratoire personnel
Apprendre en construisant.
Un petit espace pour découvrir Codex, comprendre Git et publier votre premier site sans perdre le fil.
Progression du parcours
0 %
Commencez par explorer les fichiers du projet.
Module 01 · 5 minutes
Comprendre les fichiers d’un site web
Un site simple sépare son contenu, son apparence et son comportement. Cette séparation permet de modifier une partie sans devoir tout reconstruire.
styles.css
L’apparence
Le CSS règle les couleurs, les espacements, les tailles et l’affichage mobile.
app.js
Le comportement
JavaScript réagit aux actions : clics, progression, thème et sauvegarde locale.
Exemple concret
Que se passe-t-il lorsque vous cochez une étape ?
index.htmlfournit la case à cocher.app.jsdétecte le clic et calcule le pourcentage.styles.csscolore la carte et anime la barre.
Module 02 · 8 minutes
Enregistrer son travail avec Git
Git conserve l’historique du projet sur votre ordinateur. Il permet de voir les changements, de préparer précisément ce qui sera enregistré et de revenir à un point de contrôle.
git diff
Observer
Affiche les lignes modifiées depuis le dernier point de contrôle.
git add
Préparer
Place les changements choisis dans l’index, la zone de préparation du prochain commit.
git commit
Enregistrer
Crée un point de contrôle local avec un message décrivant le changement.
Flux de travail
Du fichier modifié au commit
git statusindique l’état des fichiers.git diffpermet de relire les modifications.git add index.htmlprépare le fichier choisi.git commit -m "Ajoute le cours"crée le point de contrôle.
Module 03 · 8 minutes
Partager le projet avec GitHub
Git fonctionne en local. GitHub héberge une copie distante du dépôt afin de le sauvegarder, le partager et collaborer. Les deux outils sont liés, mais ne sont pas la même chose.
local
Votre ordinateur
Les fichiers, l’index et les commits existent d’abord dans votre dépôt local.
origin
Le dépôt distant
Ce nom désigne généralement l’adresse du dépôt GitHub connecté au projet.
git push
L’envoi
Transmet les commits locaux au dépôt distant après vérification.
Première publication
Relier puis envoyer
- Créer un dépôt vide sur GitHub et choisir s’il sera public ou privé.
git remote add origin ADRESSErelie les deux dépôts.git push -u origin mainenvoie la branche principale.- Vérifier sur GitHub que les fichiers attendus sont présents.
Module 04 · 7 minutes
Déployer le site avec Vercel
Un déploiement transforme les fichiers du dépôt en site accessible sur le Web. Vercel peut surveiller le dépôt GitHub et produire automatiquement une nouvelle version après chaque envoi.
import
Connecter
Vercel importe le dépôt GitHub et détecte ici un site statique sans compilation.
preview
Vérifier
Une prévisualisation permet de tester une modification avant la version principale.
production
Publier
La branche principale alimente généralement l’adresse publique du site.
Chaîne de déploiement
Du code local au site public
- Vous modifiez et testez le site localement.
- Vous créez un commit Git puis le poussez sur GitHub.
- Vercel détecte le nouveau commit et construit le déploiement.
- Vous vérifiez l’adresse produite avant de la partager.
Parcours terminé
Vous avez relié toute la chaîne.
Vous savez maintenant distinguer les fichiers du site, un commit Git, un dépôt GitHub et un déploiement Vercel.
Noter ce que j’ai apprisPrendre ses repères
Codex et les fichiers
Demandez à Codex d'expliquer la structure, puis ouvrez les mêmes fichiers dans VS Code.
Créer un point de contrôle
Git en local
Modifiez un détail, observez le diff, préparez les fichiers et créez votre premier commit.
Partager le projet
GitHub
Créez un dépôt distant, vérifiez ce qui sera public, puis poussez votre branche principale.
Mettre en ligne
Vercel
Connectez le dépôt GitHub et observez comment chaque changement validé produit un nouveau déploiement.
Aide-mémoire
Quatre commandes pour commencer
Journal de bord
Ce que j'ai appris
Ces notes restent dans ce navigateur et ne sont jamais envoyées sur un serveur.
Prêt