Projet HTML et CSS —- Comment créer un clone YouTube You Tube Dans ce tutoriel, nous allons créer un clone YouTube étape par étape. Vous apprendrez a créer des mises en page et a ajouter du contenu a ces mises en page. lest important de diviser les choses en morceaux plus petits pour faciliter la construction de nos projets. Nous devons donc diviser ce clone de YouTube en unités plus petites que nous construirons étape par étape. Répartition du clone de YouTube Nous allons construire le clone de YouTube en plusieurs étapesLen-téte contient trois sections (gauche, centre et droite). La section de gauche contient le logo et le menu, le centre contient le champ de recherche et une icdne, et la droite contient les icones de navigation. Les icénes sont basées sur des éléments similaires, ce qui signifie que nous concevons un élément diicéne, puis le copions, le collons et le modifions pour créer les autres. Le corps principal contient deux sections (barre latérale et contenu). Les liens de navigation dans la barre latérale sont également similaires, ils ne constituent donc qu'une seule chose. La méme chose arrive aux vidéos de la section contenu. Ainsi, notre clone YouTube a un en-téte, une barre principale, une barre latérale, un contenu, une carte vidéo, un lien de navigation et une icéne de navigation comme unités principales. C'est la répartition des étapes de la page Web que nous voulons créer. 1) Disposition du clone YouTube La premigre chose que nous devons faire est de créer la structure de mise en page du clone YouTube avec HTML. Nous ferons cela avec le code ci-dessous : styles/icone_conf.css" rel="stylesheet" /> cl CSS File >

.

.

.

Dans ce didacticiel, je suppose que vous comprenez comment utiliser les balises meta HTML et comment lier un fichier CSS. Si ce n’est pas le cas, vous pouvez en apprendre davantage a leur sujet dans la vidéo que j'ai ajoutée ci-dessus. Mais vous n’avez pas besoin de les comprendre pour ce que nous apprenons dans cette legon, alors continuez a lire. Nous avons une balise d’en-téte pour créer la section d'en-téte du clone YouTube. Nous ajouterons ultérieurement le logo YouTube, le champ de recherche et d'autres icénes de navigation a l'en-téte. ll existe également la section principale qui contient la barre latérale et le contenu. La barre latérale contiendra des liens de navigation tandis que le contenu contiendra des vidéos. Voila donc pour la structure avec juste du HTML. Attendez ! Notre code n'est pas trés beau aprés son exécution. Eh bien, nous allons résoudre ce probleme avec CSS. Ajoutons done du CSS pour vraiment créer une mise en page YouTube. 2) CSS pour le clone YouTube Etape 1 : Réinitialiser les styles HTML par défaut margin: @ padding: @: box-sizing: border-box Llastérisque * est un sélecteur CSS qui sélectionne toutes les balises HTML de notre page. Nous définissons leur marge et leur remplissage sur 0. Nous définissons ensuite leur taille de boite sur border-box. Pourquoi fait-on cela ?Nous voulons que la largeur ou la hauteur, la bordure, la marge et le remplissage totalisent la longueur totale. C'est ce que je veux dire : en CSS, si une boite a une largeur de 100 px et un remplissage de 10 px, la largeur de la boite sera de 110 px. Mais nous ne voulons pas cela — nous voulons que tout soit 4 100 pixels. La largeur doit toujours étre de 100 px, y compris la marge de 10 px, au lieu de 110 px. C'est ce que box-sizing: border-box fait. Remarque : lorsque vous lutiliserez, vous commencerez a mieux comprendre son fonctionnement — mais pour l'instant, je voulais juste donner un aperu auquel un debutant peut rapidement siidentifier. Etape 2 : Définir la famille de polices body { font-family: 'Roboto!, sans-serif, Nous sélectionnons la balise body et définissons sa famille de polices sur Roboto et utilisons sans-serif comme solution de secours au cas oll Roboto ne serait pas disponible. Etape 3 : Styliser I'en-téte [header section*/ header { display: Flex justify-content: space-between align-items: center height: 6epx padding: 15px Le header nom de la classe est utilisé pour sélectionner a la section d'en-téte de notre site Web afin que nous puissions y ajouter des styles. Nous définissons sa propriété d'affichage sur flex pour en créer une mise en page, puis nous pouvons facilement la diviser en sections. Nous le diviserons en sections plus tard. Justify-content: space-between signifie que nous voulons que le contenu de Ien-téte ait un espace entre eux une fois qu'il y en a plusieurs. align-items: center permet de déplacer tout le contenu de l'en-téte vers le centre gauche de votre écran. C'est ce qu'on appelle l'alignement vertical. Nous avons finalement defini le height de header a 60px et son remplissage a 15px. Etape 5 : Définir la hauteur de la section principalemain { height: cale(1eevh - 7px), display: flex; background-color: #f9F9f9 Nous définissons la propriété height de la balise main sur cale( 100vh - 70px)... Qu'est-ce que cela signifie ? V signifie a viewport, qui est la partie visible de 'éeran d'une fenétre sans défilement. «h» signifie hauteur, et nous pouvons également utiliser « w » qui signifie largeur — longueur horizontale, En bref, 100vh signifie la hauteur totale visible dans un navigateur sans défilement. Et nous utilisons cale (100vh - 70px) pour exécuter un calcul qui soustrait 70px de 100vh. Nous définissons sa propriété d'affichage sur flex pour en créer une mise en page. Enfin, nous définissons sa couleur de fond #9f99fqui est une sorte d'argent ou de cendre. Etape 6 : Masquer la barre de défilement /* Sidebar */ side-bar { height: 106% width: 17%; background-color: white overflow-y: hidden Le height .side-bar est défini a 100 % de son parent. Cela signifie qu'il aura la méme. hauteur que son parent. Sa largeur est définie sur 17 % de son parent et sa couleur darriére-plan est définie sur blanc. Hé ! Qu’est-ce que overflow-y: hidden? Lorsque Twitter charge 10 tweets a la fois, vous ne pouvez pas tout voir en méme temps et vous devez faire défiler, n'est-ce pas ? Dans ce cas, nous masquons la barre de défilement. Merci ! Etape 7 : Ajoutez des requétes multimédias pour plus de réactivité @media (max-width: 768px} \de-bar display: none; Nous utilisons cette requéte multimédia pour rendre un site Web réactif sur mobile, tablettes et ordinateur de bureau. Lorsque le clone YouTube est sur un appareil dont"'écran est inférieur ou égal & 768px (comme un mobile et une tablette), la barre latérale disparaitra. De plus, max-width : 768px signifie que 'écran d'un appareil peut étre inférieur ou égal 4 768px. Tras bien, nous avons construit la mise en page de notre clone YouTube. Ci-dessous le résultat... 3) Comment ajouter du contenu a la section d'en- téte Dans cette partie, nous allons expliquer comment diviser un élément en sections et ajouter du contenu a la section d'en-téte. En bref, nous divisons la section d'en-téte du clone YouTube en trois sections : gauche, centre et droite. Et chacune des sections contient des balises. Commengons ! Etape 1: Ajouter les enfants et petits-enfants a l'en-téte Ici, nous ajouterons simplement des balises HTML a la section d’en-téte du clone YouTube. C'est exactement ce que nous ferons avec le code ci-dessous : header: div class="logo left’ i id="menu” class="material-icons">menusearchvideocamappsnotificationsaccount_circle—> div class="nav' a class="nav-link active’ i class="material-icons">homeAccueil > Ensuite, nous devons d’abord styliser la barre de navigation, qui est le wrapper de tous les liens : nav width: 100% display: Flex flex-direction: column; margin-bottom: 15px margin-top: 15px La seule chose que je vais expliquer ici est la direction flexible, Cela détermine si nous voulons que les enfants apparaissent dans une colonne (verticale) ou une ligne (horizontale). Dans ce cas, nous optons pour un affichage vertical. Ensuite, stylisons le lien de navigation ci-dessus avec CSS comme indiqué ci- dessous : nav-link display: flex, align-items: center: padding: 12px 25pxnav-link span margin-left: 15px: nav-link:hover { background: #e5e5e5, cursor: pointer; active { background: #eSeses; Oups - il n'y a rien a expliquer ici car j'ai déja expliqué de nombreux concepts similaires ! Bon, parlons-en .home:hover. Les styles qu'll contient ne seront appliqués que chaque fois que nous déplacerons notre curseur sur le lien de navigation d'accueil. C'est ga. Hé, attends. Nous avons de nombreux liens dans la barre latérale, alors comment allons-nous les créer ? Eh bien, nous faisons simplement ce que tous les developpeurs aiment : copier-coller, puis modifier comme ci-dessous : div class="side-bar’’ div class="nav -a class="nav-link active’ i class=" material-icons">homeHonelocal_fire_department: ‘span>TendancessubscriptionsAbonnenents Aprés avoir collé trois liens, nous souhaitons les transformer en catégories distinctes en utilisant la balise hr pour créer une ligne qui les sépare de la catégorie ‘suivante. Maintenant, stylisons la balise hr. hr height: 1px: background-color: #eSeSes: border: none; Ensuite, nous ajouterons le code restant aprés la balise hr comme ci-dessous history Historiqueplay_arrow Mes Videos watch_laterA regarder plutardthumb_upVideos aimées a’ ale