Créer Son Premier Site Web : Guide Complet du Débutant

9 mars 2026 Alex Moreau

Par Alex Moreau — 9 mars 2026

Pourquoi créer un site web en 2026 ?

Que ce soit pour un portfolio, un blog, une landing page ou une vitrine professionnelle, savoir créer un site web est une compétence précieuse. Et bonne nouvelle : c’est plus facile que jamais.

Ce guide vous accompagne pas à pas, de zéro à un site fonctionnel en ligne, sans prérequis techniques.

Les 3 piliers d’un site web

Tout site repose sur 3 technologies :

  1. HTML (structure) : Le squelette — titres, paragraphes, images, liens
  2. CSS (style) : L’apparence — couleurs, polices, mise en page
  3. JavaScript (interactivité) : Le comportement — animations, formulaires, dynamisme

Analogie : HTML = les murs d’une maison, CSS = la peinture et déco, JavaScript = l’électricité et la plomberie.

Étape 1 : Votre première page HTML (15 min)

Installation : juste un éditeur de texte

Téléchargez Visual Studio Code (gratuit). C’est l’éditeur utilisé par 70% des développeurs.

Créer votre premier fichier HTML

  1. Créez un dossier mon-site sur votre bureau
  2. Ouvrez ce dossier dans VS Code
  3. Créez un fichier index.html
  4. Copiez 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 Premier Site</title>
</head>
<body>
    <h1>Bienvenue sur mon site</h1>
    <p>Ceci est mon premier paragraphe en HTML.</p>
    
    <h2>À propos de moi</h2>
    <p>Je suis en train d'apprendre le développement web.</p>
    
    <h2>Mes centres d'intérêt</h2>
    <ul>
        <li>Programmation</li>
        <li>Design</li>
        <li>Photographie</li>
    </ul>
    
    <a href="https://github.com/votre-pseudo">Mon profil GitHub</a>
</body>
</html>

Visualiser : Faites clic-droit sur le fichier → « Ouvrir avec Live Server » (extension VS Code) OU double-clic sur le fichier (s’ouvre dans votre navigateur).

Comprendre la structure HTML

  • <h1> à <h6> : Titres (h1 = le plus important)
  • <p> : Paragraphe
  • <ul> + <li> : Liste à puces
  • <a href="..."> : Lien hypertexte
  • <img src="..." alt="..."> : Image
  • <div> : Conteneur générique (pour grouper)

Étape 2 : Styliser avec CSS (30 min)

HTML seul = site moche des années 90. Ajoutons du style !

Créer votre feuille de style

  1. Créez un fichier style.css dans le même dossier
  2. Liez-le dans votre HTML (ajoutez dans <head>) :
<link rel="stylesheet" href="style.css">

Exemple de CSS moderne

/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    padding: 20px;
}

/* Container principal */
.container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Titres */
h1 {
    color: #2c3e50;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

h2 {
    color: #34495e;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* Liens */
a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* Listes */
ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

li {
    margin-bottom: 8px;
}

Modifiez votre HTML pour utiliser un conteneur :

<body>
    <div class="container">
        <!-- Tout votre contenu ici -->
    </div>
</body>

Concepts CSS essentiels

Propriété Usage Exemple
color Couleur du texte color: #333;
background-color Couleur de fond background-color: white;
font-size Taille de police font-size: 18px;
margin Espace extérieur margin: 20px;
padding Espace intérieur padding: 10px;
border Bordure border: 1px solid black;
border-radius Coins arrondis border-radius: 10px;

Étape 3 : Rendre votre site responsive (mobile-friendly)

60% du trafic web vient de mobiles. Votre site DOIT s’adapter.

La méthode simple : Flexbox

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #2c3e50;
    color: white;
}

.nav {
    display: flex;
    gap: 20px;
}

/* Sur mobile (écrans < 768px) */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
    }
    
    .nav {
        flex-direction: column;
        gap: 10px;
    }
}

Meta viewport (obligatoire)

Déjà présent dans notre template :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Étape 4 : Ajouter de l'interactivité avec JavaScript (optionnel mais fun)

Exemple : bouton cliquable

Ajoutez dans votre HTML :

<button id="monBouton">Cliquez-moi !</button>
<p id="message"></p>

Créez script.js :

document.getElementById('monBouton').addEventListener('click', function() {
    document.getElementById('message').textContent = '🎉 Bravo, vous avez cliqué !';
});

Liez le script avant </body> :

<script src="script.js"></script>

Étape 5 : Héberger votre site gratuitement

Option 1 : GitHub Pages (recommandée)

  1. Créez un compte GitHub
  2. Créez un nouveau repository public nommé votre-pseudo.github.io
  3. Uploadez vos fichiers (index.html, style.css, etc.)
  4. Activez GitHub Pages dans Settings → Pages
  5. Votre site sera accessible à https://votre-pseudo.github.io

Option 2 : Netlify (drag & drop)

  1. Créez un compte sur Netlify
  2. Glissez-déposez votre dossier dans l'interface
  3. Site déployé instantanément avec HTTPS
  4. URL type : random-name-123.netlify.app

Option 3 : Vercel

Même principe que Netlify, optimisé pour Next.js mais fonctionne avec HTML pur.

Les pièges à éviter

  1. Oublier le <!DOCTYPE html> → Affichage bizarre sur certains navigateurs
  2. Noms de fichiers avec espaces ou accents → Renommez en mon-fichier.html (pas Mon Fichier.html)
  3. Chemins relatifs cassés → Si votre CSS ne charge pas, vérifiez href="style.css" (pas href="/style.css")
  4. Oublier la balise de fermeture → Chaque <div> doit avoir son </div>
  5. CSS en ligne dans le HTML → OK pour tester, mais externalisez dans un .css séparé

Aller plus loin : frameworks et outils modernes

Une fois les bases maîtrisées, explorez :

Frameworks CSS (design prêt à l'emploi)

  • Tailwind CSS : Classes utilitaires (moderne, tendance 2026)
  • Bootstrap : Composants préfaits (rapide pour prototyper)
  • Bulma : Flexbox pur, simple et léger

Générateurs de sites statiques

  • Astro : Ultra-rapide, multi-frameworks
  • Hugo : Blazing fast, idéal pour blogs
  • Eleventy (11ty) : Simple, flexible, JavaScript

Frameworks JavaScript (apps complexes)

  • React : Le plus populaire
  • Vue.js : Plus simple à apprendre
  • Svelte : Performances maximales

Ressources pour progresser

Tutoriels interactifs

  • freeCodeCamp (en) : Curriculum complet HTML/CSS/JS
  • MDN Web Docs (en/fr) : La documentation de référence
  • OpenClassrooms (fr) : Parcours structurés
  • Grafikart (fr) : Vidéos YouTube excellentes

Défis pratiques

  • Frontend Mentor : Designs réels à reproduire
  • 100 Days CSS : Challenges quotidiens
  • CSSBattle : Reproduire des visuels en CSS minimal

Checklist : votre site est-il prêt ?

Avant de partager votre site, vérifiez :

  • ✅ Fonctionne sur mobile (testez avec les DevTools Chrome, mode responsive)
  • ✅ Toutes les images chargent (pas de liens cassés)
  • ✅ Liens fonctionnels (testez chaque <a>)
  • ✅ Pas de fautes d'orthographe
  • ✅ Temps de chargement < 3 secondes (testez avec PageSpeed Insights)
  • ✅ Balise <title> descriptive
  • ✅ Favicon présent (icône dans l'onglet)

Conclusion : votre feuille de route

Semaine 1 : HTML de base (structure, balises essentielles)

Semaine 2 : CSS (couleurs, fonts, layout simple)

Semaine 3 : Responsive design (Flexbox, media queries)

Semaine 4 : JavaScript de base (interactivité simple)

Semaine 5+ : Projet personnel (portfolio, blog, landing page)

Le web development est un marathon. Commencez simple, pratiquez quotidiennement, et surtout : amusez-vous ! Chaque site que vous créez renforce vos compétences.

Pro tip : Clonez des sites que vous aimez (pour apprendre, pas publier). Inspectez leur code avec DevTools Chrome (F12). C'est comme ça qu'on apprend vraiment.

Ne manquez rien

Recevez nos meilleurs articles directement dans votre boite mail.

S'abonner
Catégories : Programmation

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *