Créer sa première page web de A à Z en HTML/CSS : Le guide complet en 30 minutes

1. La répartition des rôles : HTML, CSS et JavaScript

Pour bien construire un site, comprenez l'analogie de la construction d'une maison :

• HTML (HyperText Markup Language) : C'est le gros œuvre, la charpente et les murs. Il définit le contenu et la structure (titres, paragraphes, images, boutons).
• CSS (Cascading Style Sheets) : C'est la peinture, la décoration intérieure et la disposition des meubles. Il gère les couleurs, les polices de caractères, les espacements et le responsive design.
• JavaScript : C'est le système domotique (lumières automatiques, alarme). Il apporte la logique dynamique et l'interactivité.

2. Étape 1 : Poser la structure dans `index.html`

Ouvrez VS Code, créez un dossier nommé mon_site, puis créez un fichier index.html. Saisissez la structure fondamentale suivante :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Premier Portfolio | Code & Molécules</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="carte-profil">
        <div class="avatar">👨‍💻</div>
        <h1>Alexandre V.</h1>
        <p class="titre-job">Apprenti Développeur Python & Web</p>
        <p class="bio">
            Bienvenue sur ma première page web ! Passionné par le code, les sciences et l'automatisation.
        </p>
        <div class="actions">
            <a href="#" class="btn-primaire">Voir mes projets</a>
            <a href="#" class="btn-secondaire">Me contacter</a>
        </div>
    </main>
</body>
</html>

3. Étape 2 : Habiller la page avec `style.css`

Dans le même dossier, créez le fichier style.css. Nous allons réinitialiser les marges par défaut, ajouter une jolie palette de couleurs douces, centrer notre carte au milieu de l'écran avec Flexbox et styliser les boutons.

/* Réinitialisation et variables */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background-color: #fbfaf8;
    color: #242b26;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* La carte principale */
.carte-profil {
    background-color: #ffffff;
    border: 1px solid #e2dad1;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.avatar {
    font-size: 3rem;
    margin-bottom: 1rem;
}

h1 {
    font-size: 1.5rem;
    color: #242b26;
    margin-bottom: 0.25rem;
}

.titre-job {
    color: #7a6b5a;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.bio {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #5d6a60;
    margin-bottom: 1.5rem;
}

/* Les boutons */
.actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-primaire {
    background-color: #5d6a60;
    color: #fbfaf8;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
    transition: background 0.2s ease;
}

.btn-primaire:hover {
    background-color: #4d5950;
}

.btn-secondaire {
    background-color: #e2dad1;
    color: #242b26;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
}

4. Étape 3 : Tester dans votre navigateur et inspecter le code

Pour visualiser votre travail, double-cliquez simplement sur le fichier index.html depuis votre explorateur de fichiers : il s'ouvrira directement dans Google Chrome, Firefox ou Edge !

Faites un clic droit sur n'importe quel élément et choisissez Inspecter pour ouvrir les Chrome DevTools. Vous pourrez modifier le CSS en direct et voir les changements se répercuter immédiatement !