WebCode — Apprends à créer des sites web

infoDéfinition

C'est quoi
un site web ?

Un site web est un ensemble de pages accessibles sur Internet grâce à un navigateur comme Chrome ou Firefox. Il peut contenir du texte, des images, des vidéos, des exercices ou des jeux interactifs.

Le mot « web » vient de l'anglais et signifie « toile », comme une toile d'araignée. Le Web relie des milliards de pages dans le monde entier.

history

Tim Berners-Lee — physicien au CERN, Genève
Premier site créé en 1990, public en 1991 · info.cern.ch

info.cern.ch — Premier site (1991)

<title>World Wide Web</title>

</head><body>

<p>Share information everywhere.</p>

<a href="next.html">Learn more</a>

</body></html>

routeMéthodologie

Comment créer
un site web ?

Créer un site ça se fait étape par étape. Voici les grandes phases pour passer de l'idée à la mise en ligne.

lightbulb

Trouver une idée

On choisit le sujet du site : formation, jeu, musique, sport… puis on réfléchit au contenu : textes, images, vidéos, exercices, informations.

SujetAudienceContenuObjectif

view_quilt

Organiser le site

Avant de coder on prépare les pages : accueil, cours, contact, espace utilisateur, niveaux de difficulté. Ça rend le site plus clair et plus facile à utiliser.

AccueilCoursContactNiveaux

integration_instructions

Coder le site

HTML structure, CSS décore, JavaScript ajoute l'interactivité, Python gère le serveur et les comptes utilisateurs.

HTMLCSSJavaScriptPython

rocket_launch

Tester et mettre en ligne

On vérifie que les pages fonctionnent, que les liens marchent, que le site s'affiche bien sur téléphone et ordinateur. Puis on publie avec un hébergement et un nom de domaine.

TestsMobileHébergementDomaine

folder_openOrganisation

La structure
du projet WebCode.

Un site web c'est un dossier organisé. Clique sur un fichier pour voir son code. Clique ensuite sur une ligne pour comprendre ce qu'elle fait.

descriptionindex.html

folder_openhtml/chevron_right

descriptionindex.html

folder_opencss/chevron_right

descriptionstyle.css

folder_openjavascript/chevron_right

descriptionjavascript.js

folder_openpython/chevron_right

descriptionpython.py

homePage d'accueil

WebCode/index.html

La porte d'entrée du site. Chargé automatiquement quand un visiteur tape l'adresse.

check_circleToujours nommé index.html

check_circleContient html, head, body

check_circleLie le CSS et le JS

Rendu navigateur

🌐 WebCode
Apprends à créer des sites
Commencer →

lightbulbClique sur une ligne de code pour voir l'explication !

descriptionPage HTML

html/index.html

Page de cours HTML avec des exemples de toutes les balises : titres, texte, images, liens, listes.

check_circleh1 → h6 : les niveaux de titres

check_circlep, strong, em : le texte

check_circlea, img, ul, ol : liens et listes

Rendu navigateur

Cours HTML
• Titre h1 : grand et important
• Paragraphe : texte normal
• a href : lien cliquable

lightbulbChaque balise dit au navigateur comment afficher le contenu.

paletteFeuille de style

css/style.css

Décore et habille le HTML. Sans lui la page serait du texte brut sur fond blanc.

check_circleVariables : --couleur

check_circleSélecteurs : h1 { }

check_circleHover, animations, Flexbox

Avant / Après

Sans CSS

Titre basique...

Avec CSS ✨

Titre stylé

lightbulbClique sur une règle pour voir ce qu'elle change !

boltInteractivité

javascript/javascript.js

Rend la page interactive : réagit aux clics, modifie le contenu sans recharger.

check_circleVariables, fonctions, conditions

check_circleaddEventListener : écoute les clics

check_circletextContent : modifie le HTML

Ce que JS peut faire

Clic !→ Score : 1

Score : 42 pts

lightbulbJS s'exécute dans le navigateur, pas sur un serveur.

dnsServeur back-end

python/python.py

Tourne sur le serveur. Gère les comptes, bases de données, envoie des données au navigateur.

check_circleCôté serveur (invisible pour l'utilisateur)

check_circleGère les bases de données

check_circleEnvoie du JSON au front-end

Front vs Back

🖥 Front (visible) : HTML+CSS+JS

🖧 Back (serveur) : Python

lightbulbPython communique avec le navigateur via HTTP.

codeLes langages

Les 4 langages
du développement web.

Clique sur une carte pour voir comment le langage fonctionne avec des exemples de code détaillés.

HTML

Structure du site

HTML est le squelette de chaque page web. Titres, paragraphes, images, liens, boutons — tout passe par HTML.

index.html

<h1>Bienvenue !</h1>
<p>J'apprends à coder.</p>

open_in_newVoir les exemples

CSS

Design & couleurs

CSS décore le HTML. Couleurs, tailles, polices, espacements et animations — tout le style vient du CSS.

style.css

h1 { color: #a78bfa; }
p  { font-size: 1rem; }

open_in_newVoir les exemples

JavaScript

Interactivité

JavaScript rend les pages dynamiques : quiz, menus, animations, modifications en temps réel sans recharger.

script.js

function saluer() {
  alert("Bonjour !");
}

open_in_newVoir les exemples

Python

Serveur & données

Python gère le côté serveur. Comptes utilisateurs, bases de données, tout ce qui tourne en arrière-plan.

app.py

def accueil():
  return "Bienvenue !"

open_in_newVoir les exemples

auto_awesomeIntelligence artificielle

L'IA aide
les développeurs.

Aujourd'hui on peut utiliser des IA pour aider à programmer : expliquer du code, corriger des erreurs, créer des pages entières ou proposer des idées de design.

check_circleCréer des pages HTML

check_circleGénérer du CSS

check_circleÉcrire du JavaScript

check_circleCorriger les bugs

check_circleExpliquer le code

check_circleApprendre plus vite

warning

Il est important de comprendre le fonctionnement du code et de ne pas seulement copier les réponses. L'IA aide, elle ne remplace pas la compréhension.

Outils connus

ChatGPT

Explique, écrit et corrige du code dans tous les langages

Claude Code

Crée des pages HTML, explique chaque ligne, améliore les sites

Cursor

Propose du code automatiquement pendant qu'on programme

GitHub Copilot

Suggère des lignes de code directement dans l'éditeur

Gemini

Aide à concevoir, coder et déboguer des applications web

Et bien d'autres…

De nouveaux outils IA apparaissent chaque mois

cloud_uploadPublication

Mettre ton site
en ligne gratuitement.

Ton site codé ? Publie-le en quelques minutes avec ces outils 100% gratuits.

bolt

Vercel Recommandé

En ligne en 2 minutes

expand_more

Le plus simple. Glisse ton dossier et c'est en ligne sur ton-site.vercel.app.

1Crée un compte sur vercel.com

2Clique Add New → Project

3Glisse-dépose ton dossier

4✓ Ton site est en ligne !

vercel.com open_in_new

hub

GitHub Pages

Gratuit avec GitHub

expand_more

Parfait si tu utilises GitHub. Ton site sur pseudo.github.io.

1Crée un repo sur github.com

2Upload tes fichiers HTML/CSS/JS

3Settings → Pages → Branch : main

4✓ Save → publié !

pages.github.com open_in_new

water

Netlify

Glisser-déposer

expand_more

Simple comme Vercel. Glisse ton dossier, lien sur ton-site.netlify.app.

1Va sur netlify.com → Sign up

2Glisse ton dossier dans la zone

3Lien généré automatiquement

4✓ Partage le lien !

netlify.com open_in_new

Comparatif rapide

Vercel

✅ Gratuit

⭐⭐⭐ Facilité

🚫 Sans GitHub

👶 Débutants

GitHub

✅ Gratuit

⭐⭐ Facilité

✅ Avec GitHub

👨‍💻 Devs

Netlify

✅ Gratuit

⭐⭐⭐ Facilité

🚫 Sans GitHub

📝 Formulaires

personMon projet

Présentation
de mon site.

J'ai voulu créer un site pour aider les personnes qui veulent apprendre à coder. Mon objectif est de rendre le codage simple et accessible à tous.

menu_book

Des cours

HTML, CSS, JS, Python expliqués clairement

edit_note

Des exercices

Pratiquer avec des exemples concrets

layers

Plusieurs niveaux

Débutant, intermédiaire, avancé

groups

Pour tous

Élèves, étudiants, curieux de tout âge

Comment j'ai créé ce site

Choisir une idée

Un site d'apprentissage du code, accessible à tous

Organiser les pages

Accueil, cours, exercices, niveaux de difficulté

HTML & CSS pour le design

Structure et mise en page des sections

JavaScript pour l'interactivité

Quiz, animations, menus dynamiques

L'IA pour m'aider

ChatGPT, Claude Code, Cursor pour créer et corriger

Tests & mise en ligne

Vérification sur tous les appareils, puis Vercel

Créer un site web,
de l'idée au code.

C'est quoi
un site web ?

Comment créer
un site web ?

Trouver une idée

Organiser le site

Coder le site

Tester et mettre en ligne

La structure
du projet WebCode.

folderWebCode/

Les 4 langages
du développement web.

L'IA aide
les développeurs.

Mettre ton site
en ligne gratuitement.

Vercel Recommandé

GitHub Pages

Netlify

Vercel

GitHub

Netlify

Présentation
de mon site.

Des cours

Des exercices

Plusieurs niveaux

Pour tous

Créer un site,
c'est possible pour tous.

Créer un site web,de l'idée au code.

C'est quoiun site web ?

Comment créerun site web ?

Trouver une idée

Organiser le site

Coder le site

Tester et mettre en ligne

La structuredu projet WebCode.

folderWebCode/

Les 4 langagesdu développement web.

L'IA aideles développeurs.

Mettre ton siteen ligne gratuitement.

Vercel Recommandé

GitHub Pages

Netlify

Vercel

GitHub

Netlify

Présentationde mon site.

Des cours

Des exercices

Plusieurs niveaux

Pour tous

Créer un site,c'est possible pour tous.

Créer un site web,
de l'idée au code.

C'est quoi
un site web ?

Comment créer
un site web ?

La structure
du projet WebCode.

Les 4 langages
du développement web.

L'IA aide
les développeurs.

Mettre ton site
en ligne gratuitement.

Présentation
de mon site.

Créer un site,
c'est possible pour tous.