Salut les amis ! Aujourd’hui, je vais vous montrer comment créer une petite interface inspirée de YouTube, avec une barre de navigation, une sidebar (ou barre latérale), et une grille de vidéos pour afficher du contenu recommandé.
On va se concentrer sur deux fichiers : un fichier HTML pour la structure (index.html) et un fichier CSS pour le style (style.css). Je vous expliquerai chaque section pour que vous puissiez facilement adapter et personnaliser l’interface selon vos envies !
Prêt(e)s ? C’est parti !
Objectif du Projet (YouTube)
L’objectif est de créer un clone statique de YouTube (sans backend), mais avec une structure réaliste et propre :
- Une home complète avec :
- header fixe (menu, logo, recherche, actions)
- sidebar à gauche (navigation)
- grille responsive de vidéos (cards type YouTube)
- Une page secondaire : Historique
- Une charte graphique cohérente sur toutes les pages via
style.css - Un mini flux de navigation : Home → Historique → retour
Arborescence du projet
Ton dossier youtube/ est organisé ainsi :
youtube/index.html: home (header + sidebar + grid vidéos)youtube/style.css: style global (header/sidebar/grid/responsive)youtube/pages/history.html: page “Historique”youtube/assets/: miniatures, avatars, icônes, etc.
Prérequis
- HTML/CSS (flex + grid)
- Notions UI : spacing, alignements, hover
- VS Code + navigateur
Étape 1 : Construire youtube/index.html (Home)
UI attendu (ce que tu dois voir)
- Header fixe
- bouton menu (burger)
- logo YouTube
- barre de recherche au centre (input + bouton)
- zone actions à droite (icônes + bouton “Se connecter”)
- Sidebar à gauche
- liste de liens (Accueil, Shorts, Abonnements…)
- séparateurs entre sections
- bloc “Connectez-vous” (prompt) comme sur YouTube
- Contenu principal
-une grille de vidéos (cards)
-chaque card contient :
- miniature (ratio 16:9)
- durée en bas à droite
- avatar chaîne
- titre vidéo + nom chaîne + vues + date
Structure HTML recommandée (logique de code)
<header class="header">
divise en :.header-left(burger + logo).header-center(search).header-right(icônes + bouton connexion)
<div class="main-container">
divise en :<aside class="sidebar">(navigation)<main class="content">(grille vidéos)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<link rel="stylesheet" href="style.css">
<!-- Favicon YouTube -->
<link rel="icon" href="https://www.youtube.com/s/desktop/d743f786/img/favicon_32x32.png">
</head>
<body>
<!-- En-tête fixe avec le logo, la recherche et les boutons -->
<header class="header">
<div class="header-left">
<!-- Bouton menu hamburger -->
<button class="icon-btn menu-btn">
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
</button>
<!-- Logo YouTube -->
<a href="index.html" class="logo">
<svg viewBox="0 0 90 20" width="90" height="20">
<g>
<path fill="#FF0000" d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 0 14.285 0 14.285 0C14.285 0 5.35042 0 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C0 5.35042 0 10 0 10C0 10 0 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z"/>
<path fill="#FFFFFF" d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z"/>
</g>
<text x="34" y="16" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#000000">YouTube</text>
</svg>
</a>
</div>
<!-- Barre de recherche au centre -->
<div class="header-center">
<div class="search-box">
<input type="text" placeholder="Rechercher" class="search-input">
<button class="search-btn">
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</button>
</div>
<button class="icon-btn voice-btn">
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M12 15c1.66 0 2.99-1.34 2.99-3L15 6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 15 6.7 12H5c0 3.42 2.72 6.23 6 6.72V22h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/>
</svg>
</button>
</div>
<!-- Boutons à droite -->
<div class="header-right">
<button class="icon-btn">
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
</svg>
</button>
<button class="icon-btn">
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
</svg>
</button>
<button class="btn-signin">
<svg viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M12 6v6l4 2"/>
</svg>
Se connecter
</button>
</div>
</header>
<!-- Conteneur principal avec sidebar et contenu -->
<div class="main-container">
<!-- Barre latérale de navigation -->
<aside class="sidebar">
<nav class="nav-section">
<a href="#" class="nav-item active">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
<span>Accueil</span>
</a>
<a href="#" class="nav-item">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"/></svg>
<span>Shorts</span>
</a>
<a href="#" class="nav-item">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>
<span>Abonnements</span>
</a>
</nav>
<div class="nav-divider"></div>
<nav class="nav-section">
<a href="#" class="nav-item">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
<span>Vous</span>
</a>
<a href="pages/history.html" class="nav-item">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>
<span>Historique</span>
</a>
</nav>
<div class="nav-divider"></div>
<div class="signin-prompt">
<p>Connectez-vous pour aimer des vidéos, commenter et vous abonner.</p>
<button class="btn-signin-sidebar">
<svg viewBox="0 0 24 24" width="20" height="20">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M12 6v6l4 2"/>
</svg>
Se connecter
</button>
</div>
<div class="nav-divider"></div>
<nav class="nav-section">
<h3 class="nav-title">Explorer</h3>
<a href="#" class="nav-item">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
<span>Tendances</span>
</a>
<a href="#" class="nav-item">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
<span>Musique</span>
</a>
<a href="#" class="nav-item">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/></svg>
<span>Jeux vidéo</span>
</a>
<a href="#" class="nav-item">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
<span>Sport</span>
</a>
</nav>
</aside>
<!-- Contenu principal : grille de vidéos -->
<main class="main-content">
<div class="videos-grid">
<!-- Vidéo 1 -->
<div class="video-card">
<div class="thumbnail photo" style="background-image: url('assets/images/youtube-desktop.jpg');">
<span class="thumbnail-icon">🐧</span>
<span class="video-duration">12:34</span>
</div>
<div class="video-info">
<div class="channel-avatar" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">L</div>
<div class="video-details">
<h3 class="video-title">Introduction à Linux pour débutants</h3>
<p class="video-meta">TechLinux • 1,2 M de vues • il y a 2 jours</p>
</div>
</div>
</div>
<!-- Vidéo 2 -->
<div class="video-card">
<div class="thumbnail photo" style="background-image: url('assets/images/youtube-laptop.jpg');">
<span class="thumbnail-icon">🎨</span>
<span class="video-duration">8:15</span>
</div>
<div class="video-info">
<div class="channel-avatar" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">D</div>
<div class="video-details">
<h3 class="video-title">Design moderne avec CSS Grid</h3>
<p class="video-meta">DesignPro • 856 K de vues • il y a 1 semaine</p>
</div>
</div>
</div>
<!-- Vidéo 3 -->
<div class="video-card">
<div class="thumbnail photo" style="background-image: url('assets/images/apps-grid.jpg');">
<span class="thumbnail-icon">⚛️</span>
<span class="video-duration">15:42</span>
</div>
<div class="video-info">
<div class="channel-avatar" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">R</div>
<div class="video-details">
<h3 class="video-title">React JS - Les hooks expliqués simplement</h3>
<p class="video-meta">CodeAcademy • 2,4 M de vues • il y a 3 jours</p>
</div>
</div>
</div>
<!-- Vidéo 4 -->
<div class="video-card">
<div class="thumbnail photo" style="background-image: url('assets/images/streaming-tv-remote.jpg');">
<span class="thumbnail-icon">🎮</span>
<span class="video-duration">22:11</span>
</div>
<div class="video-info">
<div class="channel-avatar" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">G</div>
<div class="video-details">
<h3 class="video-title">Les meilleurs jeux de 2025 à ne pas manquer</h3>
<p class="video-meta">GamerZone • 3,1 M de vues • il y a 5 jours</p>
</div>
</div>
</div>
<!-- Vidéo 5 -->
<div class="video-card">
<div class="thumbnail photo" style="background-image: url('assets/images/cameras.jpg');">
<span class="thumbnail-icon">🍳</span>
<span class="video-duration">10:28</span>
</div>
<div class="video-info">
<div class="channel-avatar" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">C</div>
<div class="video-details">
<h3 class="video-title">Recette rapide : Pâtes carbonara authentiques</h3>
<p class="video-meta">Chef en Herbe • 678 K de vues • il y a 1 jour</p>
</div>
</div>
</div>
<!-- Vidéo 6 -->
<div class="video-card">
<div class="thumbnail photo" style="background-image: url('assets/images/laptop-coffee.jpg');">
<span class="thumbnail-icon">🚀</span>
<span class="video-duration">18:55</span>
</div>
<div class="video-info">
<div class="channel-avatar" style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);">S</div>
<div class="video-details">
<h3 class="video-title">SpaceX : Le prochain lancement vers Mars</h3>
<p class="video-meta">ScienceActu • 1,9 M de vues • il y a 4 jours</p>
</div>
</div>
</div>
<!-- Vidéo 7 -->
<div class="video-card">
<div class="thumbnail photo" style="background-image: url('assets/images/subscribe-phone.jpg');">
<span class="thumbnail-icon">🏋️</span>
<span class="video-duration">14:20</span>
</div>
<div class="video-info">
<div class="channel-avatar" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">F</div>
<div class="video-details">
<h3 class="video-title">Programme fitness 30 jours pour débutants</h3>
<p class="video-meta">FitLife • 945 K de vues • il y a 6 jours</p>
</div>
</div>
</div>
<!-- Vidéo 8 -->
<div class="video-card">
<div class="thumbnail photo" style="background-image: url('assets/images/architecture-roof.jpg');">
<span class="thumbnail-icon">📱</span>
<span class="video-duration">9:33</span>
</div>
<div class="video-info">
<div class="channel-avatar" style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);">T</div>
<div class="video-details">
<h3 class="video-title">iPhone 16 vs Samsung S25 - Comparaison complète</h3>
<p class="video-meta">TechReview • 2,7 M de vues • il y a 2 jours</p>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Explications du code HTML
- Header : C’est la barre de navigation principale en haut de la page, avec des boutons de navigation, une zone de recherche et un bouton de connexion.
- Sidebar (aside) : C’est notre barre latérale qui reste fixée sur le côté gauche. Elle contient les différents liens de navigation comme « Accueil », « Shorts », « Abonnements », et des boutons pour accéder aux tendances, musiques, etc.
- Main Content : Cette section centrale affiche nos vidéos recommandées dans une grille. Ici, chaque vidéo est représentée par une card (ou carte) qui contient une image de prévisualisation et un peu d’info comme le titre et le nombre de vues. Vous pouvez bien sur les remplacer par des liens vers vos vidéos ou images.
Étape 2 : Créer les cards vidéos (grille réaliste)
Rendu attendu
Une card YouTube ressemble à ça :
- thumbnail (image) avec une durée par-dessus
- en dessous :
- avatar rond
- bloc texte (titre + meta)
Points importants côté UI
- meta plus discret (gris)
- miniature cohérente : toutes les images doivent garder la même hauteur/ratio
- titres limités (2 lignes max visuellement)
Étape 3 : Ajouter le style global dans youtube/style.css
Là, tu gagnes tout : c’est ton fichier maître pour toutes les pages.
Organisation conseillée dans ton CSS
- Base
- reset léger (margin/padding/box-sizing)
- police (system font)
- couleurs (fond, texte, gris)
- Header
- fixe en haut (
position: fixed) - hauteur stable
- alignement des 3 zones
- style input recherche + bouton
- hover sur icônes
- Sidebar
- largeur stable
- items cliquables (hover)
- sections + séparateurs (
hrou border) - bloc “Se connecter” (style carte légère)
- Grille vidéos
.videos-gridendisplay: grid- colonnes auto-adaptatives (
repeat(auto-fill, minmax(...))) - cards avec espacement propre
- thumbnail en
aspect-ratio: 16/9 - duration badge (fond noir semi-transparent)
- Responsive
- tablette : sidebar réduit / masqué partiellement
- mobile :
- recherche simplifiée
- sidebar masquée (ou en mode mini)
- grid en 1 colonne ou 2 selon largeur
/* ==============================================
RESET ET BASE
YouTube a un design épuré et moderne
============================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", "Arial", sans-serif;
background-color: #f9f9f9;
color: #030303;
}
/* ==============================================
HEADER (Navigation en haut - toujours visible)
============================================== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
z-index: 2000;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
/* Section gauche avec menu et logo */
.header-left {
display: flex;
align-items: center;
gap: 16px;
}
/* Boutons icônes du header */
.icon-btn {
background: transparent;
border: none;
padding: 8px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.icon-btn:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.icon-btn svg {
fill: #030303;
}
/* Le logo YouTube */
.logo {
display: flex;
align-items: center;
text-decoration: none;
}
/* Section centrale avec la recherche */
.header-center {
flex: 0 1 728px;
display: flex;
align-items: center;
gap: 8px;
}
/* Barre de recherche */
.search-box {
flex: 1;
display: flex;
height: 40px;
border: 1px solid #ccc;
border-radius: 40px;
overflow: hidden;
}
.search-input {
flex: 1;
border: none;
outline: none;
padding: 0 16px;
font-size: 16px;
}
.search-input::placeholder {
color: #888;
}
/* Bouton de recherche */
.search-btn {
width: 64px;
border: none;
background-color: #f8f8f8;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #d3d3d3;
transition: background-color 0.2s;
}
.search-btn:hover {
background-color: #f0f0f0;
}
.search-btn svg {
fill: #030303;
}
/* Bouton micro pour recherche vocale */
.voice-btn {
flex-shrink: 0;
}
/* Section droite avec les actions utilisateur */
.header-right {
display: flex;
align-items: center;
gap: 8px;
}
/* Bouton "Se connecter" */
.btn-signin {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid #065fd4;
background: transparent;
color: #065fd4;
border-radius: 18px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
.btn-signin:hover {
background-color: #def1ff;
}
.btn-signin svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
}
/* ==============================================
LAYOUT PRINCIPAL
Sidebar fixe à gauche + contenu scrollable
============================================== */
.main-container {
display: flex;
padding-top: 56px; /* Espace pour le header fixe */
}
/* ==============================================
SIDEBAR (Navigation latérale)
============================================== */
.sidebar {
position: fixed;
left: 0;
top: 56px;
width: 240px;
height: calc(100vh - 56px);
background-color: #ffffff;
overflow-y: auto;
padding: 12px 0;
z-index: 1000;
}
/* Sections de navigation dans la sidebar */
.nav-section {
padding: 8px 0;
}
/* Titre de section dans la sidebar */
.nav-title {
font-size: 14px;
font-weight: 500;
color: #0f0f0f;
padding: 8px 24px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Items de navigation */
.nav-item {
display: flex;
align-items: center;
gap: 24px;
padding: 10px 24px;
color: #0f0f0f;
text-decoration: none;
font-size: 14px;
font-weight: 400;
transition: background-color 0.2s;
cursor: pointer;
}
.nav-item:hover {
background-color: #f2f2f2;
}
.nav-item.active {
background-color: #f2f2f2;
font-weight: 500;
}
.nav-item svg {
width: 24px;
height: 24px;
fill: #0f0f0f;
}
/* Ligne de séparation dans la sidebar */
.nav-divider {
height: 1px;
background-color: #e5e5e5;
margin: 12px 0;
}
/* Prompt de connexion dans la sidebar */
.signin-prompt {
padding: 16px 24px;
}
.signin-prompt p {
font-size: 14px;
line-height: 1.4;
color: #0f0f0f;
margin-bottom: 16px;
}
.btn-signin-sidebar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid #065fd4;
background: transparent;
color: #065fd4;
border-radius: 18px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
.btn-signin-sidebar:hover {
background-color: #def1ff;
}
.btn-signin-sidebar svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
}
/* ==============================================
CONTENU PRINCIPAL (Grille de vidéos)
============================================== */
.main-content {
margin-left: 240px; /* Espace pour la sidebar */
flex: 1;
padding: 24px;
}
/* Grille de vidéos - responsive avec CSS Grid */
.videos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
/* ==============================================
CARTE VIDÉO
Chaque vidéo est dans une carte
============================================== */
.video-card {
cursor: pointer;
transition: transform 0.2s;
}
.video-card:hover {
transform: scale(1.02);
}
/* Thumbnail de la vidéo (image de prévisualisation) */
.thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16/9;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.thumbnail.photo {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: #e9ecef;
}
.thumbnail.photo .thumbnail-icon {
display: none;
}
/* Icône dans le thumbnail (emoji pour remplacer l'image) */
.thumbnail-icon {
font-size: 72px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
/* Durée de la vidéo en bas à droite du thumbnail */
.video-duration {
position: absolute;
bottom: 8px;
right: 8px;
background-color: rgba(0, 0, 0, 0.8);
color: #ffffff;
padding: 3px 4px;
border-radius: 2px;
font-size: 12px;
font-weight: 500;
}
/* Informations de la vidéo sous le thumbnail */
.video-info {
display: flex;
gap: 12px;
}
/* Avatar de la chaîne (petit cercle coloré) */
.channel-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 16px;
flex-shrink: 0;
}
/* Détails de la vidéo (titre et meta) */
.video-details {
flex: 1;
}
/* Titre de la vidéo */
.video-title {
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: #0f0f0f;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2; /* Limite à 2 lignes */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Meta informations (chaîne, vues, date) */
.video-meta {
font-size: 12px;
color: #606060;
line-height: 1.4;
}
/* ==============================================
RESPONSIVE DESIGN
Adaptation pour différentes tailles d'écran
============================================== */
/* Tablettes et petits écrans */
@media (max-width: 1024px) {
.sidebar {
width: 72px;
}
.main-content {
margin-left: 72px;
}
/* Cache le texte des items de navigation, garde juste les icônes */
.nav-item span {
display: none;
}
.nav-item {
justify-content: center;
padding: 16px;
}
.nav-title,
.signin-prompt,
.nav-divider {
display: none;
}
.videos-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
/* Smartphones */
@media (max-width: 768px) {
.sidebar {
display: none; /* Cache complètement la sidebar */
}
.main-content {
margin-left: 0;
padding: 16px;
}
.header-center {
flex: 1;
}
.videos-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.search-box {
max-width: none;
}
.voice-btn {
display: none;
}
}
/* Très petits écrans */
@media (max-width: 480px) {
.header {
padding: 0 8px;
}
.header-left {
gap: 8px;
}
.logo svg {
width: 75px;
}
.btn-signin {
padding: 6px 10px;
font-size: 13px;
}
.video-title {
font-size: 13px;
}
.video-meta {
font-size: 11px;
}
}
Points “YouTube-like” à retenir
aspect-ratio: 16/9pour les miniatures (résultat pro)- hover subtil (pas trop agressif)
- séparation claire entre layout (header/sidebar/content)
- hiérarchie typographique (titre > chaîne > meta)
Explications du CSS
- body : On ajoute une marge en haut pour éviter que le contenu chevauche la barre de navigation.
- header : On le fixe en haut avec une position
fixed, ce qui permet qu’il reste visible même lorsqu’on fait défiler la page. - .main-container : Cette classe utilise
display: flex;pour organiser notre contenu principal et la sidebar en ligne. - .sidebar : Elle est fixée à gauche et prend toute la hauteur de la fenêtre (moins l’espace occupé par le header).
- .main-content : Cette classe laisse un espace à gauche pour la sidebar et occupe tout l’espace restant.
- Card : Les cartes sont stylisées pour afficher une image en haut, suivie du titre et de la description de la vidéo. Cela ressemble à l’interface de YouTube !
Étape 4 : Créer youtube/pages/history.html (Historique)
Objectif de cette page
Simuler la page Historique, comme sur YouTube.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Historique - YouTube</title>
<link rel="stylesheet" href="../style.css">
<link rel="icon" href="https://www.youtube.com/s/desktop/d743f786/img/favicon_32x32.png">
<style>
.history-container {
margin-left: 240px;
padding: 24px;
padding-top: 80px;
}
.history-header {
margin-bottom: 24px;
}
.history-header h1 {
font-size: 24px;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 8px;
}
.history-controls {
display: flex;
gap: 16px;
margin-bottom: 24px;
}
.filter-chip {
padding: 8px 16px;
background-color: #f2f2f2;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s;
}
.filter-chip:hover {
background-color: #e5e5e5;
}
.filter-chip.active {
background-color: #0f0f0f;
color: #ffffff;
}
.history-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.history-item {
display: flex;
gap: 16px;
padding: 8px;
border-radius: 8px;
transition: background-color 0.2s;
cursor: pointer;
}
.history-item:hover {
background-color: #f2f2f2;
}
.history-thumbnail {
width: 168px;
aspect-ratio: 16/9;
border-radius: 8px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}
.history-details {
flex: 1;
}
.history-title {
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: #0f0f0f;
margin-bottom: 4px;
}
.history-meta {
font-size: 12px;
color: #606060;
line-height: 1.4;
}
.empty-state {
text-align: center;
padding: 60px 20px;
}
.empty-icon {
font-size: 80px;
margin-bottom: 20px;
}
.empty-state h2 {
font-size: 20px;
color: #0f0f0f;
margin-bottom: 8px;
}
.empty-state p {
font-size: 14px;
color: #606060;
}
.back-link {
display: inline-block;
margin-bottom: 24px;
padding: 10px 16px;
background-color: #065fd4;
color: white;
text-decoration: none;
border-radius: 18px;
font-size: 14px;
font-weight: 500;
transition: background-color 0.2s;
}
.back-link:hover {
background-color: #0046a5;
}
</style>
</head>
<body>
<!-- Réutilisation du header de la page principale -->
<header class="header">
<div class="header-left">
<button class="icon-btn menu-btn">
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
</button>
<a href="../index.html" class="logo">
<svg viewBox="0 0 90 20" width="90" height="20">
<g>
<path fill="#FF0000" d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 0 14.285 0 14.285 0C14.285 0 5.35042 0 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C0 5.35042 0 10 0 10C0 10 0 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z"/>
<path fill="#FFFFFF" d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z"/>
</g>
<text x="34" y="16" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#000000">YouTube</text>
</svg>
</a>
</div>
<div class="header-center">
<div class="search-box">
<input type="text" placeholder="Rechercher" class="search-input">
<button class="search-btn">
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</button>
</div>
</div>
<div class="header-right">
<button class="btn-signin">
<svg viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M12 6v6l4 2"/>
</svg>
Se connecter
</button>
</div>
</header>
<!-- Contenu principal -->
<div class="history-container">
<a href="../index.html" class="back-link">← Retour à l'accueil</a>
<div class="history-header">
<h1>Historique des vidéos regardées</h1>
</div>
<!-- Filtres -->
<div class="history-controls">
<button class="filter-chip active">Tout</button>
<button class="filter-chip">Aujourd'hui</button>
<button class="filter-chip">Cette semaine</button>
<button class="filter-chip">Ce mois-ci</button>
</div>
<!-- État vide - affiché quand l'utilisateur n'est pas connecté -->
<div class="empty-state">
<div class="empty-icon">📺</div>
<h2>Votre historique de visionnage est vide</h2>
<p>Connectez-vous pour voir votre historique de vidéos regardées</p>
<br>
<button class="btn-signin" style="margin: 0 auto;">
<svg viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M12 6v6l4 2"/>
</svg>
Se connecter
</button>
</div>
<!-- Liste d'historique (commentée car l'utilisateur n'est pas connecté) -->
<!--
<div class="history-list">
<div class="history-item">
<div class="history-thumbnail" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
🎮
</div>
<div class="history-details">
<div class="history-title">Top 10 des jeux les plus attendus de 2025</div>
<div class="history-meta">GamerZone • 2,5 M de vues • Regardée il y a 2 heures</div>
</div>
</div>
</div>
-->
</div>
</body>
</html>
UI attendu
- même header que la home (identique)
- contenu central :
- un titre “Historique”
- un empty state si “non connecté”
- icône
- message
- bouton “Se connecter”
- un lien “Retour à l’accueil”
Côté code : super important
- la page doit importer
../style.css - tu réutilises les mêmes classes (header, container, content) pour cohérence
- tu peux mettre une liste d’historique commentée (comme tu l’as décrit) :
- pratique pour tester rapidement un état “avec contenu”
Étape 5 : Navigation interne
Pour un mini-parcours crédible :
- Dans la sidebar : lien vers
pages/history.html - Dans
history.html: bouton/lien retour vers../index.html
Là, ton projet devient un “mini-site” et pas juste une page isolée. Je te laisse le soin de créer l’ensemble des pages possible et de fixer les liens afin d’assurer une bonne navigation dans ton mini app Youtube.
Résultat final
Tu obtiens :
- un clone YouTube statique crédible
- une structure de projet propre
- un style centralisé
- une page “Historique” qui enrichit le projet
- un projet parfait pour GitHub / portfolio
Idées d’amélioration
- Mode “mini sidebar” (icônes seulement) sur tablette
- Ajout d’une page “Abonnements”
- Ajout d’un menu burger mobile (sidebar qui apparaît/disparaît)
- Ajout de chips “catégories” (Tous, Musique, Gaming, etc.) au-dessus de la grille
- Ajout de skeleton loading (UI chargement)
Voilà c’est fait ! Vous avez maintenant une belle interface qui imite la disposition de YouTube, avec une barre de navigation, une sidebar, et un espace pour afficher des vidéos recommandées. N’hésitez pas à personnaliser les styles ou à ajouter de nouvelles fonctionnalités pour rendre votre interface encore plus cool !
Amusez-vous bien et n’hésitez pas à poser vos questions si vous avez besoin d’aide !
