Dans ce tutoriel, tu vas reproduire la page de connexion Facebook en HTML, CSS et Bootstrap, puis la transformer en vrai mini-site : inscription, mot de passe oublié, création de Page et « À propos ». Un excellent exercice pour maîtriser la mise en page Flexbox, les formulaires et le responsive design.

Niveau : débutantDurée : ~1 h 30HTML · CSS · Bootstrap 5Code source gratuit
Clone de la page de connexion Facebook en HTML, CSS et Bootstrap avec logo et formulaire
Le résultat final : la page de connexion reproduite en HTML, CSS et Bootstrap
Logo GitHubTélécharger le code source du projet sur GitHub
⚠️
Projet à but pédagogique

Ce clone sert uniquement à apprendre l’intégration web. Il ne réalise aucune authentification et ne doit jamais être mis en ligne pour imiter Facebook ou collecter des identifiants.

Ce que tu vas construire : une page de connexion Facebook complète

L’objectif n’est pas de copier Facebook, mais de t’entraîner en recréant la page de connexion Facebook, une interface que tout le monde connaît. Comme tu as le modèle sous les yeux, tu peux comparer ton résultat pixel par pixel et progresser vite.

🔐 Page de connexionLayout en deux colonnes : branding à gauche, carte formulaire à droite.
🧭 Mini-parcoursInscription, mot de passe oublié, création de Page et « À propos ».
🎨 Un seul style.cssUne charte graphique commune partagée par toutes les pages.
📱 100 % responsivePassage automatique en une colonne sur mobile.

Prérequis

  • Les bases de HTML (balises, formulaires) et de CSS (sélecteurs, Flexbox)
  • Un éditeur de code comme Visual Studio Code
  • Un navigateur récent pour tester le rendu (et ses outils de développement)
  • Aucune installation de Bootstrap : il est chargé via son CDN officiel
💡
Tu débutes en HTML/CSS ?

Commence par le tutoriel créer une carte de profil moderne en HTML et CSS : il pose toutes les bases utilisées ici.

Arborescence du projet

Avant d’écrire la moindre ligne, organise ton projet. Une structure claire rend les liens entre les pages beaucoup plus simples à gérer :

facebook/ ├── index.html # page de connexion ├── style.css # styles globaux (layout, formulaire, footer, responsive) ├── assets/ # images (bannière « À propos »…) └── pages/ ├── register.html # inscription ├── forgot-password.html # mot de passe oublié ├── pages.html # créer une Page └── about.html # à propos

Étape 1 : créer la page de connexion Facebook (index.html)

La page principale reprend la mise en page bien connue : le logo et le slogan à gauche, une carte blanche contenant le formulaire à droite, et un pied de page complet en bas.

La structure HTML à mettre en place

  • Un conteneur principal .container qui centre le contenu
  • Une section .left-section pour le branding (logo + slogan)
  • Une section .right-section pour la carte du formulaire
  • Un vrai <form> avec les champs e-mail/téléphone et mot de passe, un bouton « Se connecter », un lien « Mot de passe oublié ? », un séparateur et un bouton « Créer un compte »
  • Des liens qui pointent vers tes pages internes : pages/register.html, pages/forgot-password.html, pages/pages.html
ℹ️
Accessibilité et SEO

Associe chaque champ à un <label> (même visuellement masqué), utilise les bons types (type="email", type="password") et l’attribut autocomplete. Ton formulaire sera plus accessible et plus agréable sur mobile.

Voici le code complet de index.html. Bootstrap est importé dans la balise <head> via le CDN :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook - Connectez-vous ou inscrivez-vous</title>
    <link rel="stylesheet" href="style.css">
    <!-- Favicon Facebook -->
    <link rel="icon" href="https://static.xx.fbcdn.net/rsrc.php/yb/r/hLRJ1GG_y0J.ico">
</head>
<body>
    <!-- Conteneur principal : divisé en deux parties comme sur le vrai Facebook -->
    <div class="container-login">
        <!-- PARTIE GAUCHE : Le branding et le pitch marketing de Facebook -->
        <div class="left-panel">
            <!-- Le logo iconique en bleu Facebook -->
            <h1 class="facebook-logo">facebook</h1>

            <!-- Le slogan qui explique ce qu'est Facebook -->
            <p class="tagline">
                Facebook vous permet de rester en contact et de partager votre vie avec votre entourage.
            </p>
        </div>

        <!-- PARTIE DROITE : Le formulaire de connexion blanc bien propre -->
        <div class="right-panel">
            <!-- Formulaire de connexion -->
            <form class="login-form">
                <!-- Champ email/téléphone -->
                <input
                    type="text"
                    class="input-field"
                    placeholder="Adresse e-mail ou numéro de tél."
                    required
                >

                <!-- Champ mot de passe -->
                <input
                    type="password"
                    class="input-field"
                    placeholder="Mot de passe"
                    required
                >

                <!-- Bouton de connexion en gros et bien bleu -->
                <button type="submit" class="btn-login">Se connecter</button>

                <!-- Lien mot de passe oublié, bien centré -->
                <a href="pages/forgot-password.html" class="forgot-link">Mot de passe oublié ?</a>

                <!-- Ligne de séparation -->
                <div class="separator"></div>

                <!-- Bouton de création de compte en vert -->
                <a href="pages/register.html" class="btn-create-account">Créer nouveau compte</a>
            </form>

            <!-- Petit texte pour créer une page (entreprises, célébrités, etc.) -->
            <div class="create-page">
                <a href="pages/pages.html"><strong>Créer une Page</strong></a> pour une célébrité, un groupe ou une entreprise.
            </div>
        </div>
    </div>

    <!-- Footer avec les liens légaux et autres -->
    <footer class="footer">
        <div class="footer-content">
            <!-- Sélecteur de langue -->
            <div class="language-selector">
                <a href="#" class="active">Français (France)</a>
                <a href="#">English (US)</a>
                <a href="#">Español</a>
                <a href="#">Deutsch</a>
                <a href="#">Português (Brasil)</a>
                <a href="#">Nederlands</a>
                <a href="#">Italiano</a>
                <a href="#">日本語</a>
                <a href="#">한국어</a>
                <a href="#">中文(简体)</a>
                <button class="more-languages">+</button>
            </div>

            <!-- Ligne de séparation -->
            <div class="separator-footer"></div>

            <!-- Liens du footer -->
            <div class="footer-links">
                <a href="#">Inscription</a>
                <a href="pages/about.html">À propos</a>
                <a href="#">Messenger</a>
                <a href="#">Facebook Lite</a>
                <a href="#">Vidéo</a>
                <a href="#">Lieux</a>
                <a href="#">Jeux</a>
                <a href="#">Marketplace</a>
                <a href="#">Meta Pay</a>
                <a href="#">Meta Store</a>
                <a href="#">Meta Quest</a>
                <a href="#">Instagram</a>
                <a href="#">Threads</a>
                <a href="#">Collecte de fonds</a>
                <a href="#">Services</a>
                <a href="#">Centre d'information sur les élections</a>
                <a href="#">Politique de confidentialité</a>
                <a href="#">Centre de confidentialité</a>
                <a href="#">Groupes</a>
                <a href="#">Conditions générales</a>
                <a href="#">Publicité</a>
                <a href="#">Créer une publicité</a>
                <a href="#">Créer une Page</a>
                <a href="#">Développeurs</a>
                <a href="#">Carrières</a>
                <a href="#">Cookies</a>
                <a href="#">Choix publicitaires</a>
            </div>

            <!-- Copyright Meta -->
            <div class="copyright">
                Meta © 2025
            </div>
        </div>
    </footer>
</body>
</html>
index.html

Étape 2 : centraliser le style dans style.css

Toutes les pages importent le même fichier style.css. Résultat : une seule charte graphique, et une modification se répercute partout. Organise ton fichier en sections commentées :

1. BaseFond gris clair, police système, centrage vertical et horizontal.
2. LayoutConteneur à largeur max, Flexbox en 2 colonnes, espacements avec gap.
3. BrandingGrand logo bleu et slogan, tailles adaptées au desktop.
4. Carte formulaireFond blanc, ombre, coins arrondis, états :focus-visible, boutons bleu et vert.
5. FooterLangues, liens et copyright, dans un style discret.
6. ResponsiveMedia query : une colonne sur mobile, logo et carte centrés.
/* ==============================================
   RESET ET BASE
   On commence par mettre tout à plat
   ============================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Le body prend toute la hauteur de l'écran */
body {
    font-family: Helvetica, Arial, sans-serif;
    /* Ce gris très clair est la couleur signature du fond de Facebook */
    background-color: #f0f2f5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ==============================================
   CONTENEUR PRINCIPAL
   La page de connexion est divisée en deux : gauche (branding) et droite (formulaire)
   ============================================== */
.container-login {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    padding: 100px 20px;
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ==============================================
   PANNEAU GAUCHE
   Le logo Facebook et le slogan marketing
   ============================================== */
.left-panel {
    max-width: 580px;
}

/* Le logo "facebook" en minuscules avec la police et couleur iconiques */
.facebook-logo {
    font-size: 60px;
    font-weight: bold;
    /* Le bleu Facebook, reconnaissable entre mille */
    color: #1877f2;
    margin-bottom: 16px;
    letter-spacing: -2px;
}

/* Le slogan qui explique ce qu'est Facebook */
.tagline {
    font-size: 28px;
    color: #1c1e21;
    line-height: 32px;
    font-weight: normal;
}

/* ==============================================
   PANNEAU DROIT
   Le formulaire de connexion dans une carte blanche
   ============================================== */
.right-panel {
    width: 100%;
    max-width: 396px;
}

/* Le formulaire lui-même - carte blanche avec ombre */
.login-form {
    background-color: #ffffff;
    border-radius: 8px;
    /* Ombre douce pour donner de la profondeur */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
    padding: 24px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Les champs de saisie (email et mot de passe) */
.input-field {
    width: 100%;
    padding: 14px 16px;
    font-size: 17px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s;
}

/* Bordure bleue quand on clique dans un champ */
.input-field:focus {
    border-color: #1877f2;
    /* Petite ombre bleue pour accentuer le focus */
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2);
}

/* Placeholder gris clair */
.input-field::placeholder {
    color: #8a8d91;
}

/* ==============================================
   BOUTONS
   Le bouton bleu "Se connecter" et le vert "Créer nouveau compte"
   ============================================== */

/* Bouton de connexion - grand et bien bleu */
.btn-login {
    width: 100%;
    padding: 14px 16px;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    background-color: #1877f2;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 6px;
}

.btn-login:hover {
    background-color: #166fe5;
}

.btn-login:active {
    background-color: #1464d4;
}

/* Lien "Mot de passe oublié ?" */
.forgot-link {
    text-align: center;
    color: #1877f2;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 0;
}

.forgot-link:hover {
    text-decoration: underline;
}

/* Ligne de séparation horizontale */
.separator {
    border-top: 1px solid #dadde1;
    margin: 20px 0;
}

/* Bouton "Créer nouveau compte" - le vert iconique de Facebook */
.btn-create-account {
    display: inline-block;
    padding: 14px 16px;
    font-size: 17px;
    font-weight: bold;
    color: #ffffff;
    background-color: #42b72a;
    border: none;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
    align-self: center;
}

.btn-create-account:hover {
    background-color: #36a420;
}

.btn-create-account:active {
    background-color: #2e8b18;
}

/* Texte sous le formulaire pour créer une Page */
.create-page {
    text-align: center;
    font-size: 14px;
    color: #1c1e21;
    margin-top: 28px;
}

.create-page a {
    color: #1c1e21;
    text-decoration: none;
}

.create-page a:hover {
    text-decoration: underline;
}

/* ==============================================
   FOOTER
   Tout en bas avec les liens de langue et légaux
   ============================================== */
.footer {
    background-color: #ffffff;
    padding: 20px 0;
    border-top: 1px solid #dadde1;
}

.footer-content {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Sélecteur de langue */
.language-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 8px;
    align-items: center;
}

.language-selector a {
    font-size: 12px;
    color: #8a8d91;
    text-decoration: none;
}

.language-selector a:hover {
    text-decoration: underline;
}

.language-selector a.active {
    color: #1c1e21;
    font-weight: 600;
}

/* Bouton "+" pour afficher plus de langues */
.more-languages {
    background-color: #f5f6f7;
    border: 1px solid #ccd0d5;
    color: #4b4f56;
    font-size: 16px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.more-languages:hover {
    background-color: #ebedf0;
}

/* Ligne de séparation dans le footer */
.separator-footer {
    border-top: 1px solid #dddfe2;
    margin: 12px 0;
}

/* Liens du footer (tous les petits liens en bas) */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 16px;
}

.footer-links a {
    font-size: 12px;
    color: #8a8d91;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Copyright Meta en tout petit */
.copyright {
    font-size: 11px;
    color: #8a8d91;
    margin-top: 20px;
}

/* ==============================================
   RESPONSIVE DESIGN
   Adaptation pour tablettes et mobiles
   ============================================== */

/* Tablettes et écrans moyens */
@media (max-width: 992px) {
    .container-login {
        flex-direction: column;
        gap: 40px;
        padding: 60px 20px;
    }

    .left-panel {
        text-align: center;
        max-width: 100%;
    }

    .facebook-logo {
        font-size: 50px;
    }

    .tagline {
        font-size: 24px;
        line-height: 28px;
    }

    .right-panel {
        max-width: 450px;
    }
}

/* Smartphones */
@media (max-width: 576px) {
    .container-login {
        padding: 40px 16px;
    }

    .facebook-logo {
        font-size: 40px;
    }

    .tagline {
        font-size: 20px;
        line-height: 24px;
    }

    .login-form {
        padding: 20px 12px 24px;
    }

    .input-field {
        font-size: 16px;
        padding: 12px 14px;
    }

    .btn-login {
        font-size: 18px;
        padding: 12px 14px;
    }

    .btn-create-account {
        font-size: 16px;
        padding: 12px 14px;
    }

    .footer-content {
        padding: 0 16px;
    }

    .language-selector {
        gap: 8px 12px;
    }

    .footer-links {
        gap: 6px 10px;
    }
}
style.css
💡
Astuce

Utilise des variables CSS (--fb-blue, --fb-green…) en haut du fichier : changer une couleur ne prendra plus qu’une seconde.

Étape 3 : ajouter les pages secondaires

Pour transformer une simple page en vrai mini-site, ajoute quatre pages dans le dossier pages/. Chacune importe la feuille de style avec <link rel="stylesheet" href="../style.css">.

1. register.html : l’inscription

Une carte centrée avec les champs prénom, nom, e-mail, mot de passe, date de naissance et genre, puis un bouton principal « S’inscrire » et un lien de retour.

Page d'inscription du clone Facebook avec formulaire de création de compte
La page d’inscription (register.html)

2. forgot-password.html : le mot de passe oublié

Une carte simple avec un seul champ (e-mail ou téléphone) et deux boutons : « Rechercher » et « Annuler ».

Page mot de passe oublié du clone Facebook avec champ e-mail et boutons
La page de récupération du mot de passe (forgot-password.html)

3. pages.html : créer une Page

Une page plus « marketing » : titres accrocheurs, avantages présentés en cartes ou en colonnes, et un appel à l’action bien visible.

Page Créer une Page du clone Facebook avec sections et appel à l'action
La page « Créer une Page » (pages.html)

4. about.html : à propos

Une bannière en haut de page (hero) avec un léger voile sombre créé grâce au pseudo-élément ::after, puis le contenu texte, les liens et les sections.

Page À propos du clone Facebook avec bannière hero et sections de contenu
La page « À propos » (about.html) avec sa bannière
💡
Astuce

Place l’image de la bannière dans assets/ et applique-la via une classe .about-hero avec background-size: cover.

Étape 4 : soigner la navigation et la cohérence

Pour que ta page de connexion Facebook ressemble à un vrai site, vérifie ces points :

  • Chaque page secondaire possède un lien Retour vers ../index.html
  • Le style est identique partout : même carte, mêmes boutons, mêmes polices
  • Les chemins sont corrects : pages/… depuis index.html, et ../index.html depuis les pages
  • Le rendu est testé sur mobile grâce au mode responsive des outils de développement

Le résultat

  • Formulaire de connexion : l’utilisateur saisit son e-mail ou téléphone et son mot de passe
  • Mot de passe oublié : redirige vers la page de récupération (fictive)
  • Créer un compte : ouvre la page d’inscription
  • Navigation : toutes les pages sont reliées entre elles
Logo GitHubTélécharger le code source du projet sur GitHub

Aller plus loin

Ta page de connexion Facebook est prête. Pour la rendre fonctionnelle, il faut la connecter à un back-end qui vérifie les identifiants dans une base de données. Voici quelques pistes :

FAQ : questions fréquentes

Ce clone de la page Facebook permet-il de se connecter ?

Non. C’est un projet front-end purement pédagogique : le formulaire n’envoie aucune donnée. Pour une vraie authentification, il faut un back-end (PHP, Node.js, Python…) et une base de données.

Faut-il connaître Bootstrap pour suivre ce tutoriel ?

Non. Il suffit de connaître les bases de HTML et CSS. Bootstrap est chargé via un CDN et on l’utilise surtout pour la grille et quelques composants ; tout le reste est expliqué dans le CSS.

Comment rendre la page de connexion responsive ?

On utilise Flexbox en deux colonnes sur ordinateur, puis une media query qui passe la mise en page en une seule colonne et centre le logo et la carte sur mobile.

Puis-je utiliser ce projet dans mon portfolio ?

Oui, c’est un excellent exercice d’intégration à montrer. Précise simplement qu’il s’agit d’une reproduction à but pédagogique et ne le mets jamais en ligne pour collecter des identifiants.

Tu as maintenant une page de connexion Facebook complète et responsive, et surtout une méthode réutilisable pour reproduire n’importe quelle page web. Si tu as une question ou une amélioration à proposer, laisse un commentaire ci-dessous !

Tags:

Comments

No comments yet. Why don’t you start the discussion?

Laisser un commentaire

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