🌐 Atelier Neocities — Crée ton site web en 9 jours !

🤔 C'est quoi Neocities ?

🏠 Un hébergeur gratuit

Neocities stocke les fichiers de ton site et les rend accessibles à tout le monde via internet.

✏️ Un éditeur intégré

Tu peux créer et modifier tes fichiers directement dans ton navigateur, sans installer de logiciel.

🌍 Une communauté

Des milliers de sites persos, créatifs, bizarres, magnifiques. Tu peux explorer, t'inspirer, te faire des contacts.

💚 Une philosophie

Neocities croit qu'internet devrait appartenir aux gens, pas aux grandes plateformes. Ton site, tes règles.

👉 Visite neocities.org pour voir des exemples

JOUR 1

Comprendre le web (version simple)

⏱️ 20-30 minutes

📌 L'essentiel à comprendre

Un site web, c'est un dossier avec des fichiers. Ces fichiers sont stockés sur un ordinateur connecté à internet 24h/24 (un "serveur"). Quand quelqu'un tape l'adresse de ton site, son navigateur va chercher ces fichiers et les affiche.

Les fichiers principaux :

HTML — Le contenu : texte, structure, liens. C'est le squelette.
CSS — L'apparence : couleurs, mise en page, polices. C'est l'habillage.

Ce n'est pas vraiment de la "programmation" — c'est plutôt de la rédaction avec des conventions. Tu décris ce que tu veux voir apparaître, et le navigateur l'interprète.

🔍 Exercice : regarder sous le capot

Avant de créer, observons comment c'est fait. Ouvre n'importe quel site web, puis :

Clic droit n'importe où sur la page
Clique sur "Afficher le code source"

Ce que tu vois, c'est le HTML de la page. Repère les mots entre < > — ce sont des "balises". Ça peut sembler cryptique, mais tu vas vite reconnaître les motifs.

💡 Conseil

Commence par des sites simples. Les gros sites (Facebook, Amazon) ont un code illisible car optimisé par des machines. Essaie sur des sites Neocities — leur code est souvent écrit par des humains comme toi.

🎯

Mission du jour

Regarde le code source de 3 sites différents. Note ce qui t'intrigue, ce que tu reconnais, ce qui te semble bizarre. Partage tes observations avec ton équipe.

J'ai regardé le code d'un premier site
J'ai regardé le code d'un deuxième site
J'ai regardé le code d'un troisième site
J'ai noté mes observations
J'ai partagé avec mon équipe

JOUR 2

Créer son compte Neocities

⏱️ 15-20 minutes

📝 Étapes pour s'inscrire

Va sur neocities.org
Clique sur le gros bouton "Create Your Own Free Website"
Choisis un nom d'utilisateur — ce sera ton adresse : tonnom.neocities.org
Entre ton email et un mot de passe
Valide — c'est fait !

💡 Choisis bien ton nom

C'est modifiable plus tard mais c'est un peu pénible. Évite les trucs trop longs ou difficiles à retenir.

🎉 Ton site existe déjà !

Une fois inscrit, Neocities t'a créé un site de démarrage. Il est déjà en ligne. Tape ton adresse dans un navigateur :

https://tonpseudo.neocities.org

Tu vois une page d'accueil par défaut. Tout ce qu'on va faire maintenant, c'est la personnaliser.

✏️ Première modification

Dans ton tableau de bord Neocities, clique sur index.html pour l'ouvrir dans l'éditeur.

Trouve cette ligne :

Dans index.html

<h1>Welcome to my website!</h1>

Change le texte par ce que tu veux :

Ta modification

<h1>Bienvenue chez moi !</h1>

Clique sur Save. Retourne sur ton site et rafraîchis la page (F5). Ta modification est en ligne, visible par le monde entier.

🎯

Mission du jour

Crée ton compte, fais une modification visible, et partage l'adresse de ton site avec ton équipe.

J'ai créé mon compte Neocities
J'ai visité mon site en ligne
J'ai modifié le titre de la page
J'ai vérifié que c'est visible
J'ai partagé mon URL avec l'équipe

JOUR 3

Écrire sa première page (de zéro)

⏱️ 30-45 minutes

🧹 On efface tout et on recommence

Le template de Neocities c'est bien, mais tu apprendras mieux en construisant depuis zéro.

Ouvre index.html, sélectionne tout (Ctrl+A) et supprime tout. Puis copie-colle ceci :

index.html — Structure minimale

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon site</title>
</head>
<body>

  <h1>Bonjour le monde !</h1>
  <p>Ceci est mon premier site web.</p>

</body>
</html>

Sauvegarde et regarde le résultat. Simple, mais c'est le tien.

🔬 C'est quoi tout ça ?

<!DOCTYPE html> — Dit au navigateur : "ceci est du HTML moderne"
<html lang="fr"> — Début du document, en français
<head> — Infos "invisibles" sur la page (titre, encodage...)
<meta charset="UTF-8"> — Pour que les accents s'affichent bien
<title> — Le titre dans l'onglet du navigateur
<body> — Le contenu visible de ta page
<h1> — Un titre principal (h = heading)
<p> — Un paragraphe

Tu remarques le motif ? Une balise s'ouvre (<p>) et se ferme (</p>). Le contenu est entre les deux.

✍️ Ajoute ton contenu

Entre <body> et </body>, remplace le contenu par le tien :

Exemple de contenu

<h1>Salut, moi c'est [ton prénom] !</h1>
<p>Bienvenue sur mon site. Je l'ai créé pour apprendre comment le web fonctionne.</p>

<h2>Ce que j'aime</h2>
<p>La musique, les balades, le fromage, et les chats.</p>

<h2>Pourquoi ce site</h2>
<p>Parce que c'est quand même chouette d'avoir son coin à soi sur internet.</p>

💡 h1, h2, h3...

h1 = titre principal (un seul par page). h2 = sous-titre. h3 = sous-sous-titre. Jusqu'à h6.

🎯

Mission du jour

Remplace le contenu par le tien. Minimum : un titre, 3 paragraphes, 2 sous-titres. Le sujet est libre.

J'ai remplacé par la structure minimale
J'ai écrit mon propre titre (h1)
J'ai écrit au moins 3 paragraphes
J'ai créé au moins 2 sous-titres (h2)
J'ai sauvegardé et vérifié

JOUR 4

Structurer avec HTML

⏱️ 30-40 minutes

📋 Les listes

Deux types : à puces et numérotées.

Liste à puces

<ul>
  <li>Premier truc</li>
  <li>Deuxième truc</li>
  <li>Troisième truc</li>
</ul>

Liste numérotée

<ol>
  <li>Première étape</li>
  <li>Deuxième étape</li>
  <li>Troisième étape</li>
</ol>

ul = unordered list. ol = ordered list. li = list item.

🔗 Les liens

Un lien se crée avec la balise <a> :

Lien vers un autre site

<a href="https://fr.wikipedia.org">Aller sur Wikipédia</a>

href = l'adresse de destination. Le texte entre les balises, c'est ce qu'on clique.

💡 Nouvel onglet

Pour ouvrir dans un nouvel onglet : <a href="..." target="_blank">

💪 Mise en forme du texte

Balises de mise en forme

<strong>Texte en gras</strong>
<em>Texte en italique</em>
<mark>Texte surligné</mark>

<!-- Saut de ligne -->
Première ligne<br>
Deuxième ligne

<!-- Trait horizontal -->
<hr>

🎯

Mission du jour

Enrichis ta page avec : une liste, deux liens vers des sites que tu aimes, un peu de mise en forme.

J'ai ajouté une liste
J'ai créé au moins 2 liens
J'ai utilisé gras ou italique
J'ai vérifié que mes liens fonctionnent
J'ai partagé ma progression

JOUR 5

Styliser avec CSS

⏱️ 40-50 minutes

🎨 HTML vs CSS

Ton site fonctionne mais il est visuellement... basique. Normal : HTML c'est le contenu, pas l'apparence.

Pour l'apparence, on utilise CSS. Le principe : tu sélectionnes un élément, et tu lui appliques des styles.

📝 Où écrire le CSS ?

Pour commencer, on va l'écrire directement dans le HTML, dans une balise <style>.

Ajoute ceci dans ton <head>, avant </head> :

CSS de base

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #fffaf5;
    color: #333;
    max-width: 700px;
    margin: 0 auto;
    padding: 30px;
    line-height: 1.7;
  }

  h1 {
    color: #ff6b35;
  }

  h2 {
    color: #7c4dff;
  }

  a {
    color: #2196f3;
  }
</style>

Sauvegarde et regarde. C'est déjà plus sympa, non ?

🧪 La syntaxe CSS

Structure d'une règle CSS

sélecteur {
  propriété: valeur;
  autre-propriété: autre-valeur;
}

Sélecteur — À quoi ça s'applique (body, h1, p, a...)
Propriété — Ce qu'on change (color, font-size, background...)
Valeur — La valeur qu'on donne (red, 20px, #ff6600...)

🎨 Propriétés utiles

Quelques propriétés à connaître

/* Couleurs */
color: #333;                /* Texte */
background-color: #fff;     /* Fond */

/* Texte */
font-family: Georgia, serif;
font-size: 18px;
font-weight: bold;
text-align: center;

/* Espacement */
margin: 20px;              /* Extérieur */
padding: 15px;             /* Intérieur */

/* Bordures */
border: 2px solid #ccc;
border-radius: 10px;       /* Coins arrondis */

🎯

Mission du jour

Ajoute du CSS à ta page. Change au minimum : la police, les couleurs (fond et texte), et le style des titres.

J'ai ajouté une balise <style>
J'ai changé la police
J'ai changé les couleurs
J'ai stylé mes titres
J'ai expérimenté d'autres propriétés

JOUR 6

Ajouter des images

⏱️ 30-40 minutes

📤 Uploader une image

Va sur ton tableau de bord Neocities
Clique sur Upload
Sélectionne une image depuis ton ordi
Elle apparaît dans ta liste de fichiers

⚠️ Formats acceptés

JPG, PNG, GIF, SVG. Évite les images trop lourdes (+ de 1 Mo) — ça ralentit le chargement.

🖼️ Afficher l'image

Balise image

src — Le nom du fichier image
alt — Une description (important pour l'accessibilité)

Et en CSS, pour que l'image ne déborde pas :

CSS pour les images

img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

🎯

Mission du jour

Ajoute au moins 2 images à ton site. Vérifie qu'elles ont toutes un texte alt.

J'ai uploadé une image
Je l'ai affichée sur ma page
J'ai ajouté une 2e image
Toutes mes images ont un alt
J'ai stylé mes images en CSS

JOUR 7

Créer plusieurs pages

⏱️ 30-40 minutes

📄 Un site = plusieurs pages

Jusqu'ici tu as une seule page. Mais un site, c'est souvent : accueil, à propos, contact, etc.

Chaque page = un fichier HTML séparé.

Sur ton tableau de bord, clique sur New File
Nomme-le apropos.html
Copie la structure de base (doctype, html, head, body)
Ajoute ton contenu

🔗 Relier les pages

Liens entre pages

<!-- Dans index.html -->
<a href="apropos.html">À propos</a>

<!-- Dans apropos.html -->
<a href="index.html">Retour à l'accueil</a>

🧭 Un menu de navigation

Menu à mettre sur chaque page

<nav>
  <a href="index.html">Accueil</a> •
  <a href="apropos.html">À propos</a> •
  <a href="contact.html">Contact</a>
</nav>

Copie ce menu en haut de chaque page, dans le <body>.

🎯

Mission du jour

Crée au moins 2 pages supplémentaires et un menu de navigation qui les relie.

J'ai créé une page "À propos"
J'ai créé une autre page
J'ai un menu de navigation
Le menu est sur toutes les pages
Tous les liens fonctionnent

JOUR 8

Peaufiner le tout

⏱️ 45-60 minutes

🎨 CSS dans un fichier séparé

Problème actuel : ton CSS est copié dans chaque page. Si tu veux changer une couleur, tu dois modifier chaque fichier.

Solution : un fichier CSS unique.

Crée un fichier style.css
Copie tout ton CSS dedans (sans les balises <style>)
Dans chaque page HTML, remplace la balise <style> par :

Dans le head de chaque page

Maintenant, une modif dans style.css s'applique partout !

🦶 Ajouter un pied de page

Footer (avant </body>)

<footer>
  <p>Site créé par [Ton nom] • 2026</p>
  <p>Hébergé gratuitement sur <a href="https://neocities.org">Neocities</a></p>
</footer>

🎯

Mission du jour

Crée un fichier CSS séparé, stylise ta navigation, ajoute un footer, et peaufine l'ensemble.

J'ai créé style.css
Je l'ai lié à toutes mes pages
Ma navigation est stylée
J'ai un footer
Je suis content·e du résultat

Crée ton site web avec Neocities !

🎯 Ce que tu vas accomplir

🤔 C'est quoi Neocities ?

🏠 Un hébergeur gratuit

✏️ Un éditeur intégré

🌍 Une communauté

💚 Une philosophie

Comprendre le web (version simple)

Mission du jour

Créer son compte Neocities

Mission du jour

Écrire sa première page (de zéro)

Mission du jour

Structurer avec HTML

Mission du jour

Styliser avec CSS

Mission du jour

Ajouter des images

Mission du jour

Créer plusieurs pages

Mission du jour

Peaufiner le tout

Mission du jour

Publier et fêter ça ! 🎉

🏆 Tu l'as fait !

Mission finale