Dans ce défi, tu vas recréer la page Google en HTML et CSS, c’est-à-dire sa page d’accueil : la barre de navigation, le logo, la barre de recherche, les boutons et le pied de page. On se concentre uniquement sur le design, sans fonction de recherche. Un exercice parfait pour maîtriser le centrage avec Flexbox et le positionnement en CSS.

Niveau : débutantDurée : ~40 minHTML · CSSCode source gratuit
Page d'accueil de Google recréée en HTML et CSS avec logo, barre de recherche et boutons
Le résultat final : la page d’accueil de Google reproduite en HTML et CSS
Logo GitHubTélécharger le code source du projet sur GitHub
⚠️
Projet à but pédagogique

Cette reproduction sert uniquement à t’entraîner à l’intégration web. Elle n’effectue aucune recherche et ne doit pas être mise en ligne pour imiter Google.

Ce que tu vas construire : la page Google en HTML et CSS

Reproduire la page Google en HTML et CSS, une page que tout le monde connaît, est l’un des meilleurs moyens de progresser : tu as le modèle sous les yeux et tu peux comparer ton résultat pixel par pixel. La page d’accueil de Google est idéale pour débuter, car elle est simple mais demande un centrage et un positionnement précis.

🧭 Barre de navigationLiens à gauche et à droite, bouton « Connexion ».
🔍 Barre de rechercheChamp arrondi avec icônes de loupe et de micro.
🔘 Boutons« Recherche Google » et « J’ai de la chance » avec effet de survol.
🌍 Langues et footerLiens de langue et pied de page minimaliste.

Prérequis

  • Les bases de HTML et de CSS
  • Un éditeur de code comme Visual Studio Code
  • Un navigateur récent pour afficher le résultat
💡
Pour bien démarrer

Si tu veux réviser les bases avant de te lancer, suis le tutoriel créer une carte de profil moderne en HTML et CSS.

Arborescence du projet

google/ ├── index.html # structure de la page └── style.css # mise en forme

Étape 1 : créer la structure HTML de la page d’accueil de Google

Commence par la structure : la barre de navigation en haut, le logo, la barre de recherche, les boutons, les liens de langue et un pied de page minimaliste. Crée un fichier index.html et colle ce code :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google - Accueil</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Navigation en haut de la page -->
    <header>
        <div class="top-left">
            <a href="#">À propos</a>
            <a href="#">Google Store</a>
        </div>
        <div class="top-right">
            <a href="#">Gmail</a>
            <a href="#">Images</a>
            <div class="dots">⋮⋮⋮</div>
            <button class="signin-button">Connexion</button>
        </div>
    </header>

    <!-- Contenu principal -->
    <main class="container">
        <!-- Logo Google -->
        <div class="logo">
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">
        </div>
        
        <!-- Barre de recherche -->
        <div class="search-bar">
            <input type="text" placeholder="Recherche Google">
            <span class="search-icons">
                <img src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Search_Icon.svg" alt="Search Icon">
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Google_mic.svg" alt="Mic Icon">
            </span>
        </div>
        
        <!-- Boutons de recherche -->
        <div class="buttons">
            <button>Recherche Google</button>
            <button>J'ai de la chance</button>
        </div>

        <!-- Liens linguistiques sous la barre de recherche -->
        <div class="language-options">
            <p>Google disponible en : 
                <a href="#">Nederlands</a> 
                <a href="#">Deutsch</a> 
                <a href="#">English</a>
            </p>
        </div>
    </main>
    
    <!-- Footer -->
    <footer>
        <p>Belgique</p>
    </footer>
</body>
</html>
index.html

Ce que contient ce code

  • DOCTYPE et balises meta : <!DOCTYPE html> déclare du HTML5, charset="UTF-8" gère les accents et la balise viewport prépare l’affichage mobile
  • Header : les liens « À propos » et « Google Store » à gauche, « Gmail », « Images », le menu et le bouton « Connexion » à droite
  • Logo : l’image du logo, centrée au-dessus de la recherche
  • Barre de recherche : un champ texte accompagné des icônes de loupe et de micro
  • Boutons : « Recherche Google » et « J’ai de la chance »
  • Langues et footer : les liens de changement de langue et l’indication du pays

Étape 2 : styliser la page avec le CSS

Le fichier style.css donne à ta page d’accueil de Google son apparence fidèle à l’original. Crée-le à côté de index.html :

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    justify-content: center;
}

/* Header navigation */
header {
    position: absolute;
    top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 14px;
    color: #5f6368;
}

header a {
    color: #5f6368;
    text-decoration: none;
    margin: 0 10px;
}

header .signin-button {
    padding: 5px 15px;
    color: white;
    background-color: #1a73e8;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

header .top-right {
    display: flex;
    align-items: center;
}

header .dots {
    font-size: 24px;
    margin-right: 10px;
    cursor: pointer;
}

.container {
    text-align: center;
    margin-top: 100px;
}

.logo img {
    width: 272px;
    height: auto;
    margin-bottom: 20px;
}

.search-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.search-bar input {
    width: 500px;
    padding: 10px 20px;
    border: 1px solid #dcdcdc;
    border-radius: 24px;
    font-size: 16px;
    outline: none;
}

.search-icons {
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-icons img {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.buttons {
    margin-top: 20px;
}

.buttons button {
    padding: 10px 20px;
    margin: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    background-color: #f2f2f2;
    font-size: 14px;
    cursor: pointer;
    color: #3c4043;
}

.buttons button:hover {
    background-color: #e8e8e8;
}

.language-options {
    margin-top: 20px;
    font-size: 14px;
    color: #5f6368;
}

.language-options a {
    color: #1a0dab;
    text-decoration: none;
    margin: 0 5px;
}

footer {
    position: absolute;
    bottom: 10px;
    font-size: 12px;
    color: #70757a;
}
style.css

Les points clés du CSS

Reset globalLe sélecteur * supprime les marges et espacements par défaut.
Centrage FlexboxLe body centre tout le contenu, verticalement et horizontalement.
Header en absoluLa navigation est fixée en haut avec position: absolute.
Barre de rechercheCoins arrondis et position: relative pour placer les icônes.
BoutonsStyle minimaliste avec un changement de fond au survol.
FooterUn pied de page discret en bas de la page.
ℹ️
Pourquoi position: absolute ?

Le header est retiré du flux normal de la page : il reste collé en haut sans perturber le centrage du logo et de la recherche réalisé par Flexbox.

Étape 3 : tester et comparer avec l’original

  • Ouvre index.html dans ton navigateur
  • Ouvre la vraie page de Google dans un autre onglet et compare les espacements, les tailles et les couleurs
  • Utilise l’inspecteur des outils de développement (F12) pour ajuster les marges au pixel près
Logo GitHubTélécharger le code source du projet sur GitHub

Aller plus loin

Rendre la page responsive

Le CSS de base est pensé pour un écran d’ordinateur. Ajoute cette media query à la fin de style.css pour que ta page d’accueil de Google s’adapte aux mobiles :

@media (max-width: 600px) {
  header .top-left {
    display: none;
  }

  .logo img {
    width: 200px;
  }

  .search-bar input {
    width: 90vw;
  }

  .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
style.css

D’autres idées pour continuer :

FAQ : questions fréquentes

Faut-il connaître JavaScript pour ce projet ?

Non. La page d’accueil de Google est entièrement réalisée en HTML et CSS. Le JavaScript ne serait utile que pour ajouter des interactions, comme des suggestions de recherche.

Pourquoi mon logo n’est-il pas centré ?

Vérifie que le body utilise display: flex, flex-direction: column et align-items: center, et que l’image du logo n’a pas de marge qui la décale.

Le logo et les icônes ne s’affichent pas, que faire ?

Les images sont chargées depuis Internet. Vérifie ta connexion, ou télécharge-les dans un dossier images/ de ton projet et modifie les chemins dans index.html.

Puis-je mettre cette page dans mon portfolio ?

Oui, c’est un bon exercice d’intégration à montrer. Précise simplement qu’il s’agit d’une reproduction à but pédagogique.

Bravo, ta page Google en HTML et CSS est terminée ! Tu maîtrises maintenant le centrage avec Flexbox et le positionnement absolu. Une question ? 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 *