Quick Start : créer un site web en 15 minutes chrono
Lancez votre premier site web en ligne en moins de 15 minutes, sans aucune connaissance préalable. Action immédiate garantie.
Vous voulez voir votre premier site web en ligne aujourd'hui ? Suivez ce guide express. Pas de théorie, que de l'action ! En 15 minutes chrono, votre site sera accessible sur Internet.
Prérequis (3 minutes)
Téléchargez et installez :
- ✅ Visual Studio Code : code.visualstudio.com
- ✅ Compte GitHub : github.com (gratuit)
Action 1 : Créer les fichiers (4 minutes)
Créez un dossier mon-site sur votre bureau. Ouvrez-le avec VS Code (Fichier > Ouvrir le dossier).
Créez index.html
Nouveau fichier > Copiez-collez ce code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Site Web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Bienvenue sur mon site !</h1>
<p>Je viens de créer mon premier site web.</p>
</header>
<main>
<section>
<h2>À propos</h2>
<p>Ce site est en ligne grâce à GitHub Pages !</p>
</section>
</main>
<footer>
<p>© 2025 - Mon Site</p>
</footer>
</body>
</html>Créez style.css
Nouveau fichier > Copiez-collez ce code :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.6;
color: #333;
}
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 4rem 2rem;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
main {
max-width: 800px;
margin: 3rem auto;
padding: 0 2rem;
}
section {
margin-bottom: 2rem;
}
h2 {
color: #667eea;
margin-bottom: 1rem;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 2rem;
margin-top: 3rem;
}Sauvegardez les deux fichiers (Ctrl+S ou Cmd+S).
Action 2 : Mettre en ligne avec GitHub Pages (8 minutes)
1. Créer un repository GitHub
- Connectez-vous sur github.com
- Cliquez sur le bouton vert "New"
- Nom du repository :
mon-site - Cochez "Public"
- Cliquez sur "Create repository"
2. Uploader vos fichiers
- Sur la page du repository, cliquez "uploading an existing file"
- Glissez-déposez
index.htmletstyle.css - Cliquez "Commit changes"
3. Activer GitHub Pages
- Allez dans Settings (onglet en haut)
- Menu de gauche > Pages
- Source : sélectionnez "main" branch
- Cliquez "Save"
Attendez 1-2 minutes, puis rafraîchissez. Votre URL apparaît : https://votre-nom.github.io/mon-site
🎉 Félicitations !
Votre site est maintenant en ligne et accessible partout dans le monde ! Partagez l'URL à vos amis.
Et maintenant ?
Vous avez créé votre premier site en mode express. Maintenant, si vous voulez vraiment comprendre ce que vous avez fait et aller plus loin :
- 📚 Apprenez HTML5 en profondeur : Consultez notre guide complet HTML5
- 🎨 Maîtrisez CSS3 : Découvrez notre tutoriel CSS3
- ⚡ Ajoutez de l'interactivité : Avec JavaScript (article à venir)
- 🚀 Frameworks modernes : Angular ou React
Astuces pour modifier votre site
Pour mettre à jour votre site :
- Modifiez vos fichiers localement dans VS Code
- Retournez sur GitHub > votre repository
- Cliquez sur le fichier à modifier
- Cliquez sur l'icône crayon (Edit)
- Copiez-collez votre nouveau code
- Cliquez "Commit changes"
Votre site sera mis à jour automatiquement en 1-2 minutes !
Alternatives à GitHub Pages
D'autres plateformes gratuites pour héberger votre site :
- Netlify : Déploiement drag & drop ultra simple
- Vercel : Performant et rapide
- Cloudflare Pages : CDN mondial inclus
Toutes offrent un plan gratuit et un déploiement en quelques clics.
Conclusion
En moins de 15 minutes, vous avez créé et déployé votre premier site web. C'est le début d'une grande aventure dans le développement web ! Maintenant, prenez le temps d'apprendre les fondamentaux avec nos guides détaillés, et construisez des projets de plus en plus ambitieux. Bienvenue dans le monde du web ! 🚀