Créez votre premier site Web avec du HTML, du CSS et du JavaScript

1. Bienvenue !: Dans ce cours pour les débutants absolus, je vais vous montrer comment commencer avec HTML, CSS et JavaScript en créant cette page produit simple, belle et réactive, site Web. Ne vous inquiétez pas si vous n'avez pas d'expérience avec le développement web, car nous allons passer en revue absolument tout étape par étape. Donc, nous allons commencer par installer l'éditeur de texte que nous allons utiliser pour créer notre site Web, qui est VS Code, que vous voyez sur la gauche ici. Et puis nous allons juste travailler sur HTML. Nous allons créer cette page Web en utilisant simplement HTML. Et à ce stade va ressembler à quelque chose comme ça. Pas très jolie. Et puis on va passer au CSS. Nous allons utiliser la magie de CSS et transformer cette page en quelque chose comme ça. Nous allons également utiliser CSS pour le rendre réactif afin que la mise en page change sur mobile. Donc, cette page Web semble bon pour tous ceux qui regardent obtenir quel que soit leur appareil. Une fois que nous avons fini avec CSS, nous allons passer à JavaScript, et nous allons juste ajouter un peu de JavaScript pour faire apparaître cette bannière de cookies après environ deux secondes et la faire disparaître lorsque l'utilisateur clique sur sur ce bouton de fermeture. Et puis à la fin, nous allons ajouter quelques touches finales, comme ajouter une deuxième page. Cette page À propos que vous voyez ici. 2. Installer et configurer VSCode: Commençons par installer l' éditeur de texte que nous allons utiliser pour créer ce site Web, qui est Visual Studio Code ou VS code, comme il est généralement connu. Donc, vous voulez juste aller à Google et rechercher VS Code. Et vous voulez sauter à ce point de code Visual Studio.com site. Et vous voulez télécharger ceci pour votre plate-forme et l'installer. Ok, donc c'est fini de télécharger le zip. Donc je vais juste ouvrir ça sur une simulation. J' ai juste besoin de faire glisser cela dans mon dossier d'applications. Ou si vous êtes sous Windows et que vous devrez peut-être exécuter un programme d'installation. Eh bien, je vais juste faire glisser ce code Visual Studio dans mon dossier d'applications. Je devrais maintenant pouvoir lancer ça. Donc, je vais juste aller à Applications. Lancez Visual Studio Code, cliquez sur Ouvrir et vous devriez voir quelque chose comme ceci. Maintenant, avec VS Code, nous pouvons installer des extensions qui nous aident dans notre développement. Il y a une extension dont nous allons avoir besoin dans cette vidéo, qui est l'extension Live Server, qui nous aidera à lancer notre site Web dans le navigateur et voir les modifications que nous apporterons à notre site Web en temps réel. Donc, vous voulez juste cliquer sur ce bouton d'extensions sur la gauche ici. Ou si vous ne voyez pas cela, vous pouvez aller à Afficher les extensions. Je vais juste cliquer sur ce bouton. Et vous voulez rechercher Live Server. Hé, répondez au premier point des communistes. Et vous voulez juste cliquer sur ce bouton Installer. Et c'est maintenant installé. Et s'il vous demande de redémarrer VS Code, puis fermez simplement qui sont redémarrés. 3. Créer une page et lancer dans le navigateur: Ok, j'ai lu qu'il est installé sur les configurations, alors créons notre première page HTML. Nous allons donc avoir besoin d'un endroit pour stocker ce site. On va avoir besoin d'un dossier. Je vais donc créer un dossier sur mon bureau. Et vous pouvez créer un dossier où vous voulez. Il n'a pas besoin d'être sur le bureau ou je vais le créer sur le bureau. Et je vais le nommer HTML, CSS, JavaScript, bases de tiret. Et vous n'avez pas besoin d'utiliser ce nom. Vous pouvez utiliser n'importe quel nom que vous voulez. Et maintenant, nous voulons juste faire glisser ce dossier dans le code VS. Donc, je vais juste obtenir du code VS à nouveau et puis faire glisser ce dossier dedans. Et il est maintenant ouvert maintenant plier virus. Et ces cheveux sont là où tous nos dossiers seront vus. Alors créons notre premier fichier HTML. Donc, vous voulez juste faire un clic droit dans cet espace ici. En passant, si vous ne voyez pas ce panneau de l'explorateur et allez simplement dans l' Explorateur de vues et il devrait l'afficher pour vous. Nous voulons faire un clic droit et cliquer sur Nouveau fichier. Et nous allons appeler ce fichier index.html. Et ce nom de fichier n'a pas besoin de se terminer par point HTML car cela indique au navigateur qu'il s'agit d'un fichier HTML. Et je vous recommande d'utiliser le nom index.html parce que lorsque vous visitez un site Web tel que co dot Visual Studio.com barre oblique, puis la première page Web qu'il va chercher, index.html, ok, donc nous pouvons voir qu'il est déjà ouvert ce fichier forêt index.html. On peut le voir ici. Nous pouvons voir index.html dans ce haut. Je vais juste fermer cet onglet de bienvenue. Notre code VS nous permet d'échafauder page HTML initiale et d'ajouter toutes les balises de base dont nous avons besoin. Donc, vous voulez juste taper Doc et vous devriez voir cette abréviation Emmet pop-up sur ADA est une extension qui est intégrée dans VS Code, ce qui nous aide à écrire HTML et CSS plus rapidement. Eh bien, une fois que vous voyez cette petite popup, appuyez sur Entrée. Il échafaudage un suivi de page HTML initial. Je vais vous expliquer ce qui se passe ici dans une minute. Mais pour l'instant, nous voulons simplement enregistrer ceci en allant dans Fichier Enregistrer, ou vous pouvez utiliser le raccourci clavier que vous voyez ici. Donc, je vais juste utiliser ce raccourci clavier pour enregistrer ceci. Et maintenant, lançons cette page Web en utilisant l'extension Live Server que nous avons installée auparavant. Pour ce faire, vous voulez simplement aller à la palette de commandes Afficher. Ou vous pouvez utiliser ce raccourci clavier que vous voyez ici. Et cela va lancer la palette de commandes où nous pouvons lancer toutes les commandes disponibles dans le code VS, y compris les commandes de toutes les extensions que nous avons installées. Et tu veux juste chercher la vie. Et vous pouvez voir cette option ici ouvrir avec le serveur en direct. Donc, je vais juste cliquer sur cela et il est maintenant ouvert notre page HTML dans le navigateur. On ne voit rien sur la page. Je vais vous expliquer pourquoi c'est un peu. 4. Qu'est-ce que le HTML ?: Eh bien, tout d'abord, qu'est-ce que HTML ? Html signifie Hypertext Markup Language. Html n'est pas un langage de programmation tel que JavaScript, donc nous ne pouvons pas utiliser la logique en HTML comme si cette chose est vraie, alors faites-le, ou si cette autre chose est vraie, alors faites cela est purement un langage de présentation qui dit le navigateur quels éléments doivent être affichés sur la page. Et par éléments, je veux dire des choses comme les en-têtes, les paragraphes, les tableaux, les images, les listes, toujours voler que HTML ne dit pas non plus au navigateur à quoi ces éléments devraient ressembler. C' est ce que CSS est l'automne, que nous allons voir plus tard à la fin de cette section HTML de la vidéo, notre page Web va ressembler à quelque chose comme ça. Et tu peux dire que c'est plutôt moche. Donc, tout ce que le HTML fait est de dire au navigateur quels éléments devraient être sur la page, tels que ces en-têtes de ce paragraphe, sur cette image. Mais il ne dit pas au navigateur à quoi ces éléments devraient ressembler. Il les crache juste sur la page en utilisant le style par défaut du navigateur pour ces éléments. Donc HTML est composé de balises, et nous pouvons déjà voir quelques balises sur la page ici. Je vais juste rendre ça un peu plus petit. Et en fait, je vais juste cacher cette barre latérale. Vous allez donc simplement dans Afficher l'apparence, cliquez sur Afficher la barre latérale, ou utilisez le raccourci clavier. Alors ça va cacher la barre latérale pour qu'on ait plus d'espace. Donc, la plupart des balises sont composées d'un pat d' une balise d'ouverture et d'une balise de fermeture telle que cette balise de titre que nous pouvons voir ici. Donc, la balise d'ouverture est juste constituée d'un crochet d'angle gauche, puis le nom de la balise qu'un crochet d'angle droit. Et puis la balise de fermeture est composée d'un crochet d'angle gauche, puis d'une barre oblique avant, puis du nom de la balise, puis d'un crochet à angle droit de fermeture. Nous avons également des balises à fermeture automatique, comme ce métatag que vous pouvez voir ici. Vous pouvez voir que cette balise n'a pas de balise de fermeture. Je vais juste expliquer ce que sont ces tags. Et juste pour le rendre un peu plus clair ce qui se passe, je vais juste placer mon curseur après cette balise corporelle de fermeture ici. Cliquez avec le bouton gauche de la souris et faites glisser jusqu'au début de cette balise de tête, appuyez sur Tab pour indenter cela. Donc, cette balise HTML indique simplement au navigateur qu'il s'agit d'une page HTML. Nous pouvons voir la balise de fermeture pour ce doute, Hey, sur cette balise HTML doit être la balise racine sur notre page. Toutes les autres balises devraient entrer dans ces deux balises. 5. Tête (HTML): Cette balise de tête est pour ajouter des balises qui donnent au navigateur des informations sur notre page. Par exemple, cette balise de titre indique au navigateur quel titre doit être affiché en haut dans le navigateur ici. Ainsi, vous pouvez voir à l'intérieur de cette balise de titre, nous pouvons voir le document Word, et c'est ce que nous voyons ici dans cet onglet document. Et donc si nous changeons ce texte à l'intérieur de cette balise en, disons orange, et nous l'enregistrons, nous pouvons le voir changer en orange dans le navigateur. Cependant, les balises qui sont à l'intérieur de cette balise de tête et qui ne sont pas affichées sur la page, elles ne donnent que des informations sur le navigateur telles que le titre de la page. Ce metatag ici, il indique juste au navigateur quel jeu de caractères utiliser, et nous n'avons pas vraiment besoin de s'inquiéter à ce sujet trop. Cet autre métatag est essentiellement juste de dire au navigateur comment rendre cette page dans le navigateur. Et on n'a pas trop à s'inquiéter de ça. Mais c'est essentiellement dire au navigateur de définir la largeur de notre page à la largeur de l'appareil, et aussi de ne pas zoomer ou sortir de la page. Définissez simplement le zoom initial ou l'échelle initiale sur un. Nous pouvons également ajouter d'autres balises Meta ici, comme un métatag pour fournir une description de notre page Web pour les moteurs de recherche. Ou un métatag pour fournir une liste de mots-clés pour les moteurs de recherche. 6. Balises et éléments du corps (HTML): Eh bien, si nous voulons créer une balise ou un élément qui apparaît réellement sur la page, alors nous devons le mettre à l'intérieur des balises body. Donc, tous les éléments que nous disons réellement sur la page iront à l'intérieur de ces balises de corps. Je vais donc rapidement couvrir certains des tags que nous ne pouvons pas entendre. Donc, le premier type de balises sur lequel nous pouvons ajouter nos balises de titre, le titre le plus important est la balise H1. Donc, si nous avions juste un support à angle gauche, puis un support à angle droit de fermeture. Et vous pouvez voir qu'il a automatiquement ajouté la balise de fermeture, mais si elle a un audit, il suffit de taper ceci. Donc support d'angle gauche, barre oblique avant un, support à angle droit. Et donc nous pouvons jouer du texte de titre à l'intérieur de cette balise. Donc, c'est un titre. Sauvegardez ça. Et nous pouvons voir ce titre sur la page. Nous avons également H2, H3, H4, H5 et H6. Donc, je vais juste les ajouter aussi. Et en passant, un raccourci pour ajouter des balises HTML est juste de taper le nom de la balise telle que H2. Et vous devriez voir cette abréviation chose apparaître et vous pouvez simplement appuyer sur Tab ou Entrée sur le virus supérieur. Donc, je vais juste mettre un message là-dedans. Beaucoup de H3 et H4, H5 et H6. Sauvegardez ça. Et nous pouvons dire tous ces titres sur la page. Et vous pouvez voir que par défaut, le texte devient plus petit pour chaque niveau de titre. Nous avons également une balise de paragraphe pour ajouter des paragraphes. Donc, c'est juste une balise p, donc vous venez de taper PE, appuyez sur Tab sur beaucoup, une balise de paragraphe sur un moyen rapide d'ajouter du texte fictif dans VS Code est juste en tapant lorem. Et vous pouvez voir que je suis une abréviation. Je vais juste taper sur entrer un tas de textos. Donc je vais sauver ça. Disons que nous avons un paragraphe ici et que nous avons aussi quelques éléments de liste différents pour afficher des listes. Donc, tout d'abord, nous avons une liste non ordonnée. Et si vous tapez simplement UL pour les listes non ordonnées et appuyez sur Entrée et à l'intérieur que vous voulez ajouter un élément de liste LI et vous pouvez y mettre du texte. Je vais juste ajouter un autre allié dans un texte, puis un autre allié, sauvegardez ça. Et vous pouvez voir une liste avec des puces. Arrête. Nous avons également une liste ordonnée qui numérotera les articles en commençant par un. Donc, je vais juste ajouter une nouvelle ligne ici et sélectionner cet élément UL et le copier avec Command et dire, ou pourrait être contrôlé et dire sur votre appareil, puis collez-le ici. Je vais juste changer cette balise d'ouverture et de fermeture en OL au lieu d'UL et enregistrer cela. Et vous pouvez voir que cette liste a numéroté les éléments. Ces éléments sont tous ce qu'on appelle des éléments de niveau bloc. Les éléments de niveau bloc seront toujours placés sur une nouvelle ligne. Ainsi, vous pouvez voir tous ces éléments sont placés sur une nouvelle ligne, puis non placés les uns les autres de gauche à droite, ils sont juste empilés l'un après l'autre. Ce sont donc des éléments de bloc, mais nous avons aussi des éléments en ligne qui ne seront pas placés sur une nouvelle ligne, comme la balise forte, qui rendra le texte en gras. Donc, si je entoure ce mot ici dans des balises fortes, ceci, je vais juste double-cliquer sur ce mot, puis le faire glisser au milieu de ces balises et enregistrer cela. Et nous pouvons voir que ce mot est audacieux. Ce qui ne place pas ce texte sur une nouvelle ligne car il s' agit d'une balise en ligne ou d'un élément en ligne. Et nous avons aussi la balise E M, qui est un élément en ligne. Donc, si je fais simplement glisser ce mot dans ces balises AN et l'enregistrer, vous voyez que cela donne le style italique du texte. Il y a aussi un tas d'autres éléments que nous pouvons utiliser, comme des tables sur les entrées sur je ne vais pas entrer dans le centre commercial maintenant. Eh bien, ce sont quelques-unes des principales. 7. Éléments sémantiques / structurels (HTML): Ce sont donc quelques-uns des éléments que nous voyons réellement sur la page. Mais nous avons aussi des éléments sémantiques ou structurels que nous ne voyons pas réellement sur la page, mais qui donnent les différentes sections de notre page. Ce qui signifie qu'ils aident également les moteurs de recherche à comprendre la structure de notre page également. Donc, je vais juste supprimer toutes ces balises que nous avons ajoutées dans la balise body. Donc, juste pour démontrer certains de ces éléments sémantiques ou structurels, nous avons un élément d'en-tête, qui est où vous pourriez placer vos sites Web avaient un, nous avons un élément de pied de page où vous pourriez placer la photo. Nous avons un élément de section que vous pourriez utiliser pour entourer une section de blog. Par exemple, dans cette section, parler, vous pouvez avoir une balise d'article dans laquelle vous afficheriez chaque article de blog dans l'un de ceux-ci. Nous avons également assez d'élément où vous pourriez ajouter un peu de navigation. Nous avons un élément de côté où vous pourriez placer une barre latérale. Et si nous avons une section de notre page qui ne rentre vraiment dans aucune de ces balises sémantiques. Et nous pouvons juste utiliser une balise div. Je vais juste sauver ça. Et vous pouvez voir que nous ne voyons maintenant absolument rien sur la page parce que ces balises n'ajoutent vraiment rien à la page. Ils nous permettent juste de structurer notre page d'une manière logique qui nous aide, en tant que développeurs, à comprendre ce qui se passe, sur la page, et aussi aider les moteurs de recherche sur le référencement, optimisation des moteurs de recherche ainsi. Il y a aussi un tas d'autres balises que nous pouvons utiliser pour. Je vais juste les couvrir pour l'instant. 8. En-tête (HTML): Commençons à classer le code HTML pour notre en-tête. Et si je viens de sauter à la page finie, donc nous allons juste avoir un en-tête très simple avec un grand fond, un logo sur la gauche, et quelques éléments de navigation sur la droite, que nous allons lier aux deux différents pages. Il est donc logique de mettre un en-tête dans un élément d'en-tête. Donc je vais juste revenir à notre page Web. Je vais supprimer tous ces éléments. En dehors de l'élément d'en-tête. Je vais juste placer mon curseur entre ces deux balises ici. Et donc je vais placer tous nos éléments d'en-tête ici. Et pour l'instant, nous n'allons pas ajouter ce logo. Nous allons juste ajouter une balise H1, une balise de titre avec le nom de notre site Web à l'intérieur. C' est une bonne idée d'avoir le nom de votre site Web ou de votre entreprise dans l'en-tête, car les moteurs de recherche supposeront qu'il s'agit du nom de votre site Web ou du nom de votre entreprise. Donc, nous allons juste ajouter la balise H1 en tapant H un et en appuyant sur Entrée ou onglet. Et nous allons juste mettre le nom de notre site web. Et je vais juste appeler ce site orange. Et je vais sauver ça. Et nous pouvons maintenant voir ce titre sur la page. Maintenant, nous allons ajouter ces éléments de navigation. Nous mettons généralement des éléments de navigation dans une balise de navigation. Donc, après cette balise H1, je vais ajouter une nouvelle ligne et ajouter un élément nav. Donc, nous allons taper assez entrer une nouvelle ligne et nous allons placer nos éléments de navigation ici. Je fais généralement cela dans une liste non ordonnée. Donc, je vais ajouter une balise UL à l'intérieur de cela. Je vais ajouter des balises LI. Nous allons juste copier ces balises LI, les coller sur la diapositive suivante. Nous devons donc, nous pouvons ajouter des liens vers notre page en utilisant la balise ou les leucocytes. Donc je vais placer mon curseur dans ces premières balises LI, taper un hit Entrée, et il est ajouté sur un virus archétype. Nous mettons le texte que nous voulons afficher dans ce lien à l'intérieur de ces architectes. Donc je vais juste mettre à la maison dans ces étiquettes et appuyer sur Sauvegarder. Et nous pouvons voir un lien là-bas. Donc, je vais juste copier cette balise d'ancrage, coller à l'intérieur du deuxième allié, changer le texte à environ parce que ce sera un lien vers notre page à propos, et je vais enregistrer cela. Et je vais aussi entourer ces textes orange d'une étiquette d'ancrage. Une façon d'entourer rapidement certains textes et une balise est de sélectionner les textes, lancer la palette de commandes en choisissant Afficher et palette de commandes ou en utilisant le type de raccourci clavier dans l'enveloppe. Et nous pouvons utiliser ce wrap avec la commande d'abréviation que je vais tirer que par frappe une réponse, puis taper le nom de la balise que nous voulons envelopper, qui est une balise sur Entrée à nouveau. Et il est maintenant enveloppé ce texte dans un archétype. Beaucoup de balises ont des attributs, et c'est un attribut ici, cet attribut href haine. La structure d'un attribut est généralement le nom de l'attribut, puis est égal, puis quelques marques vocales. Mais il place généralement la valeur à l'intérieur de ces marques vocales. Et cet attribut href haine indique au navigateur quel chemin ce lien doit aller. Et pour l'instant, je vais juste définir tous ces attributs H ref pour aller à la racine de notre application. Donc, à la page d'accueil sur la racine de notre site Web est toujours barre oblique en avant. Donc je vais juste mettre en avant une barre oblique dans chacun de ces et sauver ça. Et si nous cliquons maintenant sur ces liens, ils prennent tous va à la page d'accueil. Et vous pouvez également voir dans la barre d'adresse, nous ne voyons plus barre oblique index.html ici. Parce que, comme je l'ai mentionné précédemment, lorsque vous appuyez sur le site Web sans spécifier une page particulière telle que la barre oblique sur le point HTML, il cherchera toujours index.html en premier, c'est pourquoi il charge cette page dans le navigateur. Ok, Enfin, ajoutons simplement une autre balise après notre en-tête, qui ajoutera une ligne horizontale sur la page juste pour diviser les choses un peu pour nous. Donc, après cet en-tête, je vais ajouter une nouvelle ligne sur une autre nouvelle ligne. Et nous allons ajouter une règle de type R haineux ou horizontale. Je vais appuyer sur Sauvegarder ça. Nous pouvons maintenant voir une ligne à travers la page et je vais juste utiliser ces RH pour diviser les différentes sections de notre page afin que nous puissions voir ce qui se passe avant commencer à rendre notre site web joli avec CSS, mais nous vont masquer ces règles horizontales plus tard en utilisant CSS. 9. Produit (HTML): Ok, ajoutons du HTML pour notre produit maintenant. Donc je vais juste aller à la page finie. Nous avons donc une liste de produits ici. Donc, il est probablement logique de tirer tous ces produits dans un élément de section, puis de verser chaque produit individuel dans un élément d'article. Dans ces éléments d'article, nous pouvons placer tous ces éléments. Donc, je vais probablement avoir du sens d'utiliser le titre H1 pour cette rubrique ici, titre H2 pour cette rubrique de prix, puis un paragraphe pour ce texte ici, puis un élément nav pour ces éléments de navigation ici avec un élément UL à l'intérieur de cela, avec des alliés sur certains liens, tout comme nous l'avons fait pour notre navigation d'en-tête. Et puis nous allons avoir besoin d'un élément image pour cette image. Donc je vais revenir à la page. Après cela, hé Char, nous allons ajouter un élément de section. Je vais placer tous ces produits à l'intérieur de l'élément de section, et je vais placer chaque produit individuel à l'intérieur sur l'élément de l'article. Donc beaucoup que, donc pour ce texte ici, nous pourrions probablement utiliser le titre H1. Alors ajoutons un H1 ici et je vais juste arrêter ces textes. Le nouvel Olmec. Incroyable. On s'arrête et je vais mettre ce prix à l'intérieur de H2. Donc, je vais ajouter une nouvelle ligne sur H2. Tirera de 20069 $9, beaucoup de nouvelle ligne et ajouter une balise de paragraphe pour ces textes. Juste pour ajouter un peu de Lorem Ipsum, je vais juste taper lorem et appuyer sur Entrée, et je vais sauver ça. Voyons voir à quoi ça ressemble. Ok, ça a l'air bien, alors ajoutons nos éléments de navigation. Donc, je vais juste copier cet élément nav de notre en-tête, collez-le après ce paragraphe. Et en passant, si vous avez besoin de changer l'indentation sur quoi que ce soit, vous pouvez simplement sélectionner du HTML et appuyer sur Tab pour le retirer vers la droite, Maj et Tab pour le déplacer vers la gauche. Je vais juste changer le texte dans ces liens pour acheter. En savoir plus. Donc, ce que ce petit symbole de crochet à angle droit, nous ne pouvons pas simplement taper dans la lumière que parce que cela va confondre le navigateur parce que nos balises sont composées de crochets à angle gauche et à angle droit. Donc, nous pouvons utiliser des entités HTML pour cracher des symboles tels que celui-ci sur crache ce symbole supérieur que nous pouvons commencer et, puis GT pour plus de et puis un point-virgule. Alors je vais sauver ça. Voyons voir à quoi ça ressemble. Ouais, ça a l'air plutôt bien. Et nous ne voulons probablement pas que ces liens aillent sur notre page d'accueil. Je ne sais pas où je vais aller les liens. Ils sont juste temporairement, nous pouvons juste mettre un hachage dans cet attribut H ref, nous allons juste les faire lien vers n'importe quelle page sur laquelle l'utilisateur est actuellement. Donc je vais juste sauver ça. Maintenant, nous avons juste besoin de cette image de produit ici. Donc, pour obtenir une image gratuitement, je vais aller sur un site appelé pixabay.com. Je ne veux pas chercher l'iMac. Faites défiler vers le bas C' est l'image que j'utilise ici, donc je vais cliquer dessus. Cliquez sur Télécharger, téléchargez à nouveau. Je vais prendre cette case et cliquer sur Télécharger. Et il a téléchargé notre image. Donc, nous voulons ajouter cela quelque part dans le dossier où se trouve notre projet. Je suis de retour au VS Code. Afficher à nouveau la barre latérale en allant dans Afficher et les parents affichent la barre latérale. Ou vous pouvez utiliser le raccourci clavier. Et je vous recommande vivement de connaître tous les raccourcis clavier de votre plateforme car vous serez en mesure de travailler beaucoup plus rapidement. Eh bien, je vais juste montrer cette barre latérale. C' est notre dossier ici. Donc, je vais juste faire un clic droit et créer un nouveau dossier en choisissant ce nouvel élément de dossier, et j'appellerai ce dossier assets. Je placerai tous nos actifs, tels que les images, CSS et JavaScript dans ce dossier. Donc, je vais cliquer avec le bouton droit sur ce dossier assets. Je vais créer un autre dossier. Et je vais appeler ce dossier IMG pour l'image. Nous placerons notre dossier dans le dossier des images. Donc, je vais juste faire glisser l'image est téléchargé et déposer dans ce dossier d'image. Par défaut, le code VS fait ce genre de chose ennuyeux où il joint vos dossiers ensemble, qui me rend difficile de placer cette image dans le dossier image est actuellement juste à l'intérieur du dossier assets. Donc, si nous allons à la page des paramètres en allant les paramètres des préférences ou en utilisant le raccourci clavier. Et nous recherchons des compacts ou des dossiers compacts. Nous pouvons voir cette option de dossiers compacts pour votre propre bien qu'il va maintenant séparer tous nos dossiers sur les dossiers enfants, ce qui est beaucoup mieux. Donc, nous allons fermer cela et il semble qu'il l'a placé dans ce dossier d'image. Donc, c'est bon. Donc je vais fermer ça. Je vais cacher la barre latérale. Et plaçons cette image après cet élément nav. Et nous le faisons en utilisant la balise image ou la balise IMG. Donc, je vais taper IMG, appuyer sur Entrée dans cet attribut source ici nous plaçons juste le chemin vers l'image que nous voulons afficher, aucun. Si je viens d'ouvrir à nouveau la barre latérale, notre image sera dans le chemin slash assets image slash. Et puis le nom du dossier sur le renard. Je vais juste renommer ce fichier ici. Je vais cliquer avec le bouton droit et le renommer en Olmec, ai obtenu PNG, appuyez sur Entrée, et je suis de retour à cette balise d'image et à cet attribut source. Nous pouvons juste définir ceci pour slash assets slash IMG slash oem, OK, point PNG. Je vais enregistrer cela et voir l'image sur la page est assez grande en ce moment, mais nous allons résoudre dans une seconde cet attribut tout. Nous pouvons jouer un texte alternatif ici, juste au cas où le navigateur est incapable de charger l'image, disons que l'image est supprimée ou quelque chose, alors nous pouvons afficher du texte comme une sauvegarde. Donc, je vais juste taper o MAC et cet attribut, enregistrez cela. Donc, si je change cet attribut source en un chemin incorrect, en changeant cela à tous les points MUX PNG. On peut dire des textes alternatifs ici. Au lieu de l'image. Je vais juste le changer pour le bon chemin. Sauve ça. Et il est normalement préférable de styliser les choses en utilisant CSS. Nous allons juste pour l'instant arrêter cette image étant si ridiculement énorme, je vais juste ajouter un attribut width à cette image, qui nous permettra de spécifier une largeur pour elle. Je vais régler ça à 400, ce qui signifie 400 pixels. Alors je vais sauver ça. Ça a l'air un peu mieux maintenant. Ok, donc c'est toute la maquette de nos produits. Il suffit de laisser les produits là pour l'instant, bien que nous ajouterons d'autres produits plus tard. 10. Bas de page (HTML): Donc maintenant, nous avons juste besoin d'ajouter cette fosse. Donc nous avons juste une photo très simple ici avec une bordure en haut, un peu de texte. Il est donc logique de mettre cela dans un élément de pied de page. Donc, après cet élément de section, va ajouter une nouvelle ligne, nous allons ajouter une autre page sont juste deux choses séparées un peu. Nous allons ajouter un quatrième élément. Et je vais juste mettre un SMS ici, vais juste mettre mon nom, Dani Connell, un symbole de copyright. Et un peu comme nous l'avons fait avec le symbole plus grand que avant, pour ajouter un symbole de copyright que nous pouvons faire et copier puis point-virgule. Et puis je vais juste mettre l'année 2021 en cours et sauver ça. Nous avons maintenant une fosse simple. 11. Qu'est-ce que le CSS ?: Ok, donc nous en avons assez fini avec HTML pour l'instant. Nous avons ajouté notre en-tête. Les produits sont fossa. Ça n'a pas l'air très joli. Alors ajoutons un peu de CSS pour rendre cette page belle et la changer de ceci en ceci. Eh bien, tout d'abord, qu'est-ce que CSS ? Eh bien, CSS signifie feuilles de style en cascade et ne vous inquiétez pas trop pour le nom pour l'instant. Mais fondamentalement, CSS nous permet de sélectionner un élément qui est sur la page ou un tas d'éléments qui sont sur la page. Et donnez-lui des propriétés de style, telles que la couleur d'arrière-plan, le texte, couleur, la largeur, la hauteur, la taille de la police, etc. 12. Styles et polices de base (CSS): La façon la plus simple de commencer à ajouter CSS est simplement d'étudier une balise de style à notre tête. Donc je vais juste le faire maintenant après la balise de titre. Donc, vous voulez juste ajouter une balise de style d'ouverture et de fermeture comme ça. Nous pouvons mettre tous nos CSS. Donc CSS est constitué d'une liste de règles. Sur chaque règle se compose d'un sélecteur qui indique au navigateur quels éléments nous voulons sélectionner, quels éléments nous voulons ajouter des styles. Une série de propriétés qui disent au navigateur comment sur l'élément ou comment le tas d'éléments devrait ressembler. Donc, ne sommes pas un réel qui ajoute un peu de style à notre tag body, qui est fondamentalement la balise qui entoure toute la page. Donc, pour cette règle, le sélecteur va juste être corps, donc cette scie a été sélectionnée. Et puis nous voulons juste ajouter des accolades doubles comme ça ici. Nous pouvons placer nos propriétés dans les cheveux. Nous avons des tonnes de propriétés différentes comme cola, fond, couleur, taille de police, largeur, hauteur. Je ne vais pas les couvrir tous dans cette vidéo, mais nous allons en couvrir quelques-unes des plus importantes. Donc, la couleur du texte sur une page est actuellement noire partout, ce qui semble un peu trop sombre. Alors faisons tout ce texte une couleur gris foncé à la place. Et nous pouvons utiliser la propriété de couleur pour le faire. Donc, à l'intérieur de ces accolades, on peut juste commencer la couleur. Nous pouvons maintenant assigner un cola. Et il y a plusieurs façons de le faire. Nous pouvons ajouter le nom d'une couleur telle que le bleu. Au fait, nous voulons terminer chaque propriété avec un point-virgule comme celui-ci. Alors je vais sauver ça. Vous pouvez maintenant voir que tout le texte est bleu. Et alors pourquoi tout le texte de la page est-il bleu lorsque nous avons seulement ajouté un style à la balise body. Eh bien, c'est parce que les styles que nous ajoutons deux éléments vont en cascade vers les éléments enfants. Parce que chaque élément de notre page est un enfant de corps, alors chaque élément a également hérité de cette propriété cola. Cependant, si l'un de ces éléments enfants a sa propre propriété de couleur, qui est différente de celle-ci, alors cette propriété remplacera ce style qui est en cascade. Donc, par exemple, si nous stylisons les tags p en ajoutant payez le sélecteur et nous définissons la couleur au rouge. Je vais sauver ça. Nous disons que le paragraphe est maintenant rouge, alors que les en-têtes sont toujours bleus, car ces styles descendent de la balise body en cascade vers ces en-têtes. Et ils sont également en cascade jusqu'à ce paragraphe, mais nous avons juste écrasé cela en ajoutant une propriété color à l'élément paragraphe. Plus précisément, je vais juste supprimer cette règle de paragraphe pour l'instant. Enregistrez cela et revenez à cette propriété de couleur. Nous pouvons donc utiliser le nom d'une couleur telle que le bleu ou le rouge. Il y a un tas de noms de colonnes différents que nous pouvons utiliser, et nous pouvons également utiliser le code de couleur hexadécimal, tel que harsh 000, 000, 000, 0, qui est le code de couleur hexadécimal pour le noir ou qui avait dur FF, FF, FF, FF, FF. Et c'est la couleur pour le blanc. Ainsi, vous pouvez voir notre texte disparaît parce que notre arrière-plan est blanc. Et nous pouvons également utiliser des codes de couleur RVB. Donc, si je supprime ceci et ajoute RVB puis des parenthèses, alors nous pouvons ajouter un nombre pour le composant rouge, suivi d'une virgule, puis un nombre pour le composant vert suivi d'une virgule, puis un nombre pour le composant. Donc, nous mettons ceci à 0 rouge, 0 vert, et 0 bleu, ce qui est fondamentalement noir sur ces numéros vont à 55. Donc si je change tout ça à 55, sauf ça. Le texte est maintenant pourquoi ? Eh bien, je vais utiliser un code de couleur hexadécimal pour ça. Donc, je vais enlever ça. Je vais mettre ça trop dur. Et puis six 3s, qui est une couleur gris assez foncé, qui n'est pas tout à fait noir. Donc, qui semble assez agréable maintenant, sur notre corps a aussi un peu d'espace tout autour du bord. Vous pouvez voir que cette règle horizontale que nous avons ajoutée ne va pas tout à fait au bord de la page, ne sont pas non plus aucun de ce texte. Et c'est parce que le navigateur à un style par défaut à la plupart des éléments, nous pouvons utiliser Chrome DevTools pour voir ce qui se passe ici. Donc, ouvrez Chrome DevTools, vous voulez juste aller à View Developer Tools ou vous pouvez utiliser le raccourci clavier ici. Et cela ouvrira des outils de développement. Une chose que nous pouvons faire dans les outils de développement est d' inspecter tous les différents éléments de la page. Nous pouvons voir quel style est ajouté à eux et nous pouvons également ajuster le style. Donc, si je clique sur la balise body, nous pouvons voir notre propriété de couleur que nous avons ajoutée auparavant. On peut changer ça d'ici si on veut voir à quoi ça ressemble. Oups, il y a trop de 6. Donc, nous pouvons jouer avec notre style dans ce aussi. Mais de toute façon, vous pouvez voir ici il dit feuille de style agent utilisateur et nous pouvons voir est l'ajout d'une marge de huit pixels au corps. Donc, ce style vient du navigateur lui-même, de Chrome. Sur chaque navigateur a des styles par défaut légèrement différents pour différents éléments. Mais de toute façon, je veux me débarrasser de cette marge qui est ajoutée. Et si nous survolons l'élément body, nous pouvons voir cette bordure orange autour de la page. Je ne suis pas la bordure orange est la marge qui est ajoutée. Donc, je veux définir la marge à 0. Donc, si nous cliquons ici après cette propriété de couleur, nous pouvons ajouter une propriété de marge et la définir à 0. Et nous voyons toute cette marge disparaître. Et maintenant, nous devons ajouter ce style à notre feuille de style. Donc, je vais copier cette propriété de marge, coller après cette propriété de couleur, et l'enregistrer. Et cette marge est maintenant supprimée définitivement. Cette formule que nous utilisons n'est pas très agréable. Donc je vais remplacer ça par une forme fantaisie. Et nous pouvons trouver des tonnes de polices fantaisie gratuites sur le site Google Fonts. Donc, je vais juste sur Google. Polices Google. Ne voyez pas le site Web de Google Fonts. Je vais utiliser cette police Roboto, qui est l'une des polices les plus populaires. Donc le moment, je vais cliquer dessus. Nous devons choisir ces fichiers que nous voulons et nous allons juste avoir besoin de réguliers. Donc je vais cliquer sur les goulets d'étranglement communistes pour le habituel. Et nous allons avoir besoin d'audacieux aussi. Et si nous venons avec du style à côté de la police en gras ? Et si nous regardons sur la droite, nous donne du code pour implémenter cette police dans notre page Web. Donc, il nous donne quelques balises de lien ici. Celles-ci doivent entrer. Donc, quand une copie de ces balises de lien, et je vais les coller au-dessus de cette balise de style dans notre tête sur enregistrer cela. Et cela nous donne aussi une règle CSS, mais nous devons ajouter, et cela va aller dans notre CSS. Donc, je vais copier ceci et nous allons l'ajouter au corps sélectionné ici. Donc je vais coller ça là-dedans. Et si nous gardons ça, nous avons maintenant un bien meilleur plaisir. Et je veux aussi cacher ces RH, ces règles horizontales. Pour sélectionner ceux que nous pouvons simplement taper dans un pot de haine ou des accolades doubles afin que vous les masquiez. Nous pouvons utiliser la propriété display. Nous voulons définir cela pour ne pas sauver cela. Ces règles horizontales ont maintenant disparu. Ce que nous avons fait ici est de définir une sorte de styles de base pour toute la page. Donc, je vais ajouter un commentaire au-dessus de ceux-ci pour étiqueter ces styles comme nos styles de base. Et donc ajoutez un commentaire, allez juste ajouter une nouvelle ligne en haut pour ajouter un commentaire en CSS, nous venons de commencer barre oblique et astérisque avant, puis nous le fermons avec un astérisque, barre oblique avant. On peut mettre tout ce qu'on veut dans cette commune. Donc je vais juste mettre des styles de base. Ce n'est qu'un commentaire, donc cela ne fait rien de notre CSS. C' est juste un commentaire qui sera complètement ignoré par le navigateur. Nous utilisons simplement ceci pour étiqueter notre CSS sur, le diviser en un certain nombre de sections différentes. 13. En-tête - Couleur d'arrière-plan (CSS): Ajoutons maintenant quelques styles pour notre en-tête. Donc on veut que ça ressemble à ça. Nous voulions donc avoir un fond gris foncé et nous voulons qu'un titre ou un logo soit sur la gauche. Éléments de navigation à placer sur la droite. Donc, après nos styles de base ici, je vais à Un autre commentaire qui est en fait un raccourci que nous pouvons utiliser pour ajouter un commentaire qui sur un Mac est Command forward Slash sur un laboratoire qui commenter les forums sur Windows, je pense que le raccourci est Contrôle et barre oblique. Et si vous voulez voir tous les raccourcis clavier, maintenant donnez-moi les raccourcis clavier VS Code. Et je vais juste cliquer sur ce lien de liaison de touches de code Visual Studio. Et puis sur la droite ici a sauté vers le bas à la référence des raccourcis clavier. Et vous pouvez voir toutes les différentes plateformes ici. Donc, si vous voulez voir les shortcodes de fenêtre cliquez sur Windows, et vous pouvez voir une belle petite feuille de triche ici. Donc, si l'un des raccourcis que j'utilise fonctionne sur Windows et que vous êtes sur Windows, puis trouvez juste le raccourci clavier correct ici. Ok, donc nous allons ajouter quelques styles pour l'en-tête. Donc, je vais mettre l'en-tête de mot dans ce commentaire sur une nouvelle ligne. Et donc nous voulons styler cet élément d'en-tête qui a cette cravate orange, tous ces liens de navigation. Nous pourrions simplement utiliser l'en-tête pour notre sélecteur comme celui-ci et commencer à ajouter des styles. Cependant, plus tard, nous pourrions avoir d'autres éléments d'en-tête dans notre page ou dans notre site. Par exemple, vous pouvez avoir un en-tête de produit ou quelque chose comme ça. Et si nous utilisons simplement l'élément d'en-tête sélectionne comme ceci, il stylisera chaque élément d'en-tête unique qui se trouve dans notre site Web. Et pour le moment, nous voulons seulement styler cet en-tête. Donc, ce que nous pouvons faire pour être plus spécifique avec nos sélecteurs est en ajoutant une classe à un élément, puis en utilisant cette classe comme sélecteur. Donc je vais aller à cet élément d'en-tête ici, juste avant le support d'angle de fermeture. Je vais ajouter un espace, puis je vais ajouter un attribut appelé classe. Je vais définir la valeur de cet en-tête deux pour utiliser un sélecteur de classe. Dans notre CSS, nous pouvons simplement faire point, puis le nom de la classe et le nom de l'en-tête des classes. Donc, nous voulons juste faire l'en-tête, et nous ne sélectionnons maintenant que cet élément spécifique. Ok, donc on veut que ça ait une belle couleur de fond sombre comme ça. Et nous pourrions le faire avec la propriété de couleur d'arrière-plan. Donc, à l'intérieur de cette sélection, donc je vais juste ajouter une couleur d'arrière-plan. passant, dans VS Code, vous pouvez voir cette IntelliSense, qui vous aide à voir quelles propriétés sont disponibles, sont rapidement, les ajouter à la page, et il ajoute également le deux-points, la forêt point-virgule. Je vais mettre ça à la même couleur que celle que nous avons utilisée sur notre corps de texte. Tellement dur. 3, 3, 3, 3, 3, 3, parce que tous ces nombres sont les mêmes, nous pourrions réellement le montrer à trois, 3 de la légèreté. Je vais aussi le changer ici. Je vais sauver ça. Et nous pouvons maintenant voir cette couleur de fond gris sur notre en-tête. 14. En-tête - Positionnement du logo et des navires (CSS): Je suis actuellement en tête des éléments de navigation empilés les uns sur les autres, mais nous voulons que le titre soit sur la gauche, la navigation soit sur la droite, comme vous pouvez le voir dans la page finie ici. Et nous pouvons le faire en utilisant la propriété display sur un en-tête. Donc, je vais ajouter une propriété appelée display, et nous voulons définir ceci sur flex. Cette propriété flex transformera cet élément en une ligne avec tous ses éléments enfants directs. Donc celui-ci et cet élément nav affiché côte à côte dans cette ligne. Ainsi, vous pouvez voir ce titre et ces éléments de navigation. Et maintenant côte à côte, cependant, nous ne voulons pas ces éléments juste à côté de l'autre comme ceci. Nous voulons que les objets de navigation soient juste ici. Donc, pour ce faire, nous pouvons utiliser la propriété de contenu justification et nous pouvons définir cela à un tas de choses différentes telles que le centre pour placer ces éléments au centre de la corde. Ou nous pouvons le dire pour fléchir et forcer tous les éléments enfants sur la droite. Ce qu'on veut faire, c'est étaler nos objets sur toute cette rangée. Donc, essentiellement, nous voulons mettre de l'espace entre les éléments. Pour ce faire, nous pouvons mettre ça à l'espace entre, et je vais sauver ça. Et nous pouvons maintenant voir notre titre est terminé sur la gauche, sur nos articles de navigation sont sur la droite. 15. En-tête - Styles de texte: Alors ajoutons un peu de style à ces liens dans notre en-tête car ils ont actuellement cette horrible couleur pourpre. Et encore une fois, c'est le style par défaut qui vient du navigateur. Et si vous avez votre Chrome DevTools ouvert et que vous cliquez sur ce petit bouton ici. Nous pouvons cliquer sur un élément pour voir ce qui se passe. Donc, si nous faisons défiler ici, nous ne pouvons pas réellement voir cette couleur pourpre n'importe où, mais elle est ajoutée par le navigateur. Et si nous allons à cet onglet calculé, nous pouvons le voir ici, cette couleur pourpre. Donc, je vais mettre la couleur de ces jambes à une belle couleur gris clair. Donc, nous voulons sélectionner tous ces balises qui sont dans cet en-tête. Pour ce faire, nous pouvons juste à nouveau notre en-tête. Et puis après cela un, parce que nous voulons sélectionner les balises a qui sont à l'intérieur de l'en-tête. Donc, c'est essentiellement dire simplement sélectionner toutes les balises qui sont à l'intérieur de ce parent avec une classe d'en-tête. Donc, je vais définir la propriété de couleur sur une couleur gris clair. Donc je vais utiliser Chut CCC. Je vais sauver ça. Et ça a l'air un peu mieux. Et je veux aussi me débarrasser de ces soulignements. Et nous pourrions le faire avec la propriété de décoration de texte. Donc, je vais mettre la décoration du texte sur NADH. Nous voyons ceux sur les lignes disparaissent. Nous allons également réduire la taille de la police sur ceux-ci. Je pourrais le faire avec la propriété de taille de tiret de police. Il y a un certain nombre de différents types de valeurs que nous ne pouvons pas, nous ne pouvons pas les valeurs de pixel telles que 14 pixels, ce qui va fondamentalement définir la hauteur du texte à 14 pixels. Nous pouvons également utiliser les rems sur les EMS. Je ne vais pas m'en mêler trop maintenant. Donc nous avons des rems, nous avons des atomes. Mais le plus simple à comprendre est les pixels. Donc, je vais juste utiliser des pixels dans cette vidéo. Je vais définir la taille de la police à 14 pixels, et je vais l'enregistrer. 16. En-tête - Effets et animation de relève: J' aimerais aussi que ces liens changent de couleur quand nous survolons, ce moment, ils restent les mêmes. Et il est préférable que la couleur change de sorte que l'utilisateur sache qu'il peut être cliqué sur ceux-ci pour styliser un élément qui est en cours de survol. On peut utiliser un pseudo sélecteur. Donc, ce que nous pouvons faire est à nouveau, j'ai eu un, un, mais maintenant nous voulons ajouter un deux-points, puis passer le curseur comme notre sélecteur. Donc, cela est fondamentalement dire à ces styles à tous les balises qui sont dans l'élément qui a une classe d'en-tête qui sont actuellement en cours de survol. Donc ces styles que nous ajoutons, Hey, nous ne serons ajoutés que lorsque nous survolons réellement un élément. Donc, quand nous survolons l'élément, je veux changer la couleur. Donc je vais changer la couleur en blanc, et je vais sauver ça. Et si je survole ces éléments, on peut les voir changer en blanc quand on les survole. Nous pouvons également ajouter un peu d'animation à cela, sorte que la couleur ne change pas soudainement. livre passe progressivement du gris clair au blanc à l'aide de la propriété de transition. Et nous voulons ajouter cette propriété de transition à l'élément lui-même plutôt que le pseudo-sélecteur. Donc, nous allons ajouter cela ici où nous sélectionnons la balise a dans l'en-tête. Nous voulons donc ajouter une propriété de transition. Nous pouvons spécifier une propriété CSS que nous voulons animer. Et nous voulons animer la propriété de couleur. Donc on peut juste commencer la couleur ici. Et puis nous pouvons ajouter une durée pour cette animation. Donc, si je mets ceci à un en 1 seconde, je vais enregistrer cela et passer le curseur sur l'un de ces liens. Nous pouvons dire qu'il passe très lentement du gris au blanc lorsque nous survolons. Eh bien, c'est un peu trop long. Donc je vais changer ça à zéro 0,3 seconde. Je vais sauver ça. Nous obtenons maintenant une belle petite animation subtile quand nous survolons ces liens. 17. En-tête - Styles Nav: Ok, améliorons le style de cette liste de navigation ici. Actuellement, ces éléments sont empilés les uns sur les autres. Doit parce que les éléments LI bloquent les éléments par défaut, ce qui stockera ce que nous voulons qu'ils aillent côte à côte comme ceci. Et encore une fois, nous pouvons utiliser la propriété display flex pour ce faire. Donc je vais revenir à cette page. Je vais ajouter un nouveau sélecteur. Ce que nous voulons faire est de définir cette URL pour afficher flex afin que les éléments à l'intérieur soient placés côte à côte dans une rangée au lieu de stock. Donc, le sélecteur, donc encore une fois, nous voulons ajouter en-tête. Nous voulons sélectionner l'élément nav, puis l'élément UL à l'intérieur de cela. Nous voulons définir ceci pour afficher, flex. Sauve ça. Et nous pouvons voir que ces éléments sont maintenant empilés côte à côte. Nous avons encore quelques points sur ces éléments de liste comme ces puces, vous pouvez voir là, nous pouvons voir une balle couvrant le mot maison là-bas. Et pour se débarrasser de cela, nous pouvons définir une propriété appelée list-style à pas. Je vais sauver ça et on voit cette petite balle disparaître maintenant. 18. En-tête - Marge et rembourrage: Par défaut, les URL ont une marge et un remplissage ajoutés. Si nous survolons l'élément ici, nous pouvons voir la marge en orange en haut et en bas. Et on peut voir le rembourrage sur la gauche dans cette couleur verte. Donc, je vais aussi définir la marge à 0 et le remplissage à 0 aussi. En passant, la marge est essentiellement l'espacement qui va autour de l'extérieur d'un élément. Et le rembourrage est l'espacement qui va à l'intérieur de l'élément. Juste pour démontrer que je vais juste ajouter une propriété de bordure aux balises a dans l'en-tête. Donc je vais régler la bordure de deux pixels, blanc massif. Sauve ça. Et nous pouvons voir une petite bordure autour de chacune de ces balises un maintenant, donc si je mets un remplissage de 10 pixels, vous pouvez voir qu'il est ajouté 10 pixels autour de l'intérieur de l' élément parce que la bordure que nous avons ajoutée est à l'extérieur de l'élément. Et nous pouvons voir que l'espace a été ajouté à l'intérieur de l'élément. Mais si je change cette règle en marge de dix pixels, au lieu de padding et d'enregistrer cela, vous pouvez voir qu'il est maintenant ajouté cet espace autour de l'extérieur de l'élément. C' est donc la différence entre marge et rembourrage. Je vais juste me débarrasser de cette règle de marge et de cette règle de frontière et sauver ça. Cette balise d'en-tête que nous utilisons ici va également avoir une marge par défaut. Et nous pouvons voir la marge en orange en haut et en bas de l'élément là. Donc, je vais aussi cibler ceci et définir la marge et le remplissage à 0. Donc je vais mettre cette règle ici. Donc en-tête H1, parce que ce titre est dans un élément H1, nous allons définir ceci sur marge 0, padding 0. Maintenant que nous avons supprimé tout le rembourrage et la marge autour de ces éléments, je vais en-tête est un peu petit. On n'avait pas de rembourrage sur le bord. Alors ajoutons un peu de remplissage à l'en-tête. Donc, je vais cibler l'élément d'en-tête sur une propriété padding. Et si nous voulons définir le remplissage dans toutes les directions autour de l'élément, nous pouvons simplement ajouter une seule valeur de pixel comme celle-ci. Donc dix pixels, je vais sauver ça. Donc, cela va ajouter 10 pixels de remplissage à gauche, 10 pixels en haut, 10 pixels à droite et 10 pixels en bas. Mais nous pouvons également spécifier toutes ces directions de rembourrage individuellement. Donc, si je mets cela à 10 pixels, 20 pixels, 30 pixels et 40 pixels, eh bien cela va faire est notre 10 pixels de remplissage vers le haut, 20 pixels vers la droite, les pixels pour le bas et 40 pixels vers la gauche. Donc, il va dans le sens des aiguilles d'une montre en commençant par le haut. Donc, en haut, à droite, en bas et à gauche sur Marge fonctionne de la même manière. Ou si nous voulons juste définir la marge verticale avec une valeur sur la marge horizontale ou le remplissage avec une valeur, alors nous pouvons simplement spécifier deux valeurs. Donc, si nous définissons cela à 10 pixels et 20 pixels, cela va ajouter des graisses. Je vais juste sauver ça. Cela va ajouter 10 pixels en haut et en bas et 20 pixels à gauche et à droite. Je suis content de cette quantité de rembourrage maintenant, au fait, je suis zoomé sur la page ici. Ainsi, sur un Mac, si vous souhaitez effectuer un zoom avant ou arrière, vous pouvez utiliser la commande plus pour effectuer un zoom avant ou Commande moins pour effectuer un zoom arrière. Donc je vais juste zoomer à 100 pour cent pour qu'on puisse voir à quoi ça va vraiment ressembler. Ok, ça a l'air plutôt bien. Nous avons besoin d'un peu d'espace entre ces éléments de navigation. Donc, je vais juste faire défiler jusqu'à ces styles UL. Après celui-ci, je vais cibler les balises a qui sont dans cette UL, cette liste non ordonnée. Donc point en-tête nav UL. Et je vais juste ajouter une marge à gauche. Et pour ce faire, nous pouvons utiliser la propriété de tiret de marge gauche. Et nous allons régler ça à 50 pixels. Sauve ça. Et nous pouvons dire est ajouté 50 pixels à la gauche de chacun de ces liens. Nous avons donc maintenant un peu d'espace entre nos liens. 19. En-tête - Constrain le contenu: Ok, Donc cet en-tête est assez joli maintenant à cette taille, si je ferme les DevTools et étire ça, vous pouvez dire sur un écran très large, nous avons notre titre juste ici, sur nos liens juste là, ce qui n'a pas l'air trop beau. Nous devons donc limiter le contenu de cet en-tête à une largeur particulière au milieu de l'écran. Ok, donc je vais régler un cours réutilisable pour ça. Je vais donc ajouter une autre section de styles entre nos styles de base et nos styles d'en-tête. Donc, quand j'ajoute un commentaire ici, et je vais appeler cela réutilisables. Ou tu pourrais l'appeler générique ou quelque chose comme ça. Je vais mettre en place une classe appelée contrainte pour contraindre le contenu. Au milieu de la page. Je vais donner à cette classe une largeur maximale avec la propriété max width. Et nous allons définir ceci à 960 pixels, qui est une sorte de largeur maximale standard pour les pages Web ou pour le contenu des pages Web. Donc je vais sauver ça. Je vais sauter à notre en-tête dans le HTML. Je vais entourer tout ce qui est à l'intérieur de l'en-tête avec un div, avec une classe de contrainte. Le div est juste un élément que nous pouvons utiliser quand quelque chose que nous ajoutons à la page, il ne rentre pas parfaitement dans quelque chose comme l'en-tête, section ou l'article ou quelque chose comme ça. Donc, vous voyez beaucoup de dibs sur les pages Web. Donc, nous allons remplacer tout ce qui est à l'intérieur de l'en-tête, à l'intérieur de cette div. En passant, je viens de sélectionner tout Alt inutilisé sur ouvert vers le bas pour le déplacer vers le haut dans ce div pour votre raccourci pourrait être différent sur Windows. Donc je vais sauver ça. Cela a un peu mal de masse parce que nous avions ces éléments d'en-tête pour afficher flex, qui changeait cela en une rangée et faisait afficher tous ses éléments enfants directs côte à côte le long de la corde. Mais maintenant que nous avons ajouté cette div, c'est maintenant l'élément enfant direct de l'en-tête. Donc, nous avons maintenant en fait besoin d'ajouter la règle flex d'affichage à cette div au lieu de l'en-tête, car c'est maintenant l'élément que nous voulons être une ligne. Ce sont les éléments que nous voulons afficher côte à côte. Donc je vais juste remonter à nos styles. Après que ce point ait une règle, je vais juste pointer contrainte. Nous allons déplacer cette règle flexible d'affichage et cela justifie la règle de contenu vers le bas. Alors on va les appeler, les coller ici. Je vais enregistrer que les éléments sont maintenant affichés correctement, bien qu'à cause de cette classe de contrainte, nous avons ajouté ce contenu dans notre en-tête a maintenant une largeur maximale de 960 pixels. Donc, si je viens de cliquer avec le bouton droit de la souris et cliquez sur Inspecter, étirez un peu le navigateur, et passez le curseur sur les éléments contraints. Vous pouvez voir cette petite chose déroulante que vous là-bas, qui dit que c'est 960 pixels de large. Cependant, nous voulons que cela soit au centre de l'en-tête et pas sur la gauche comme ça. Donc, pour ce faire, nous pouvons simplement revenir à cette classe de contrainte. Nous pouvons définir la propriété de marge. Je vais mettre ça à 0 en haut et en bas. Eh bien, nous allons le définir sur aussi à gauche et à droite et définir ceci sur auto, forcera cet élément, ces éléments de contrainte à être au centre. Donc je vais sauver ça. Maintenant, si j'étire cela, vous pouvez voir tout le contenu de notre en-tête est au centre de la page. Ok, donc je vais juste ajuster notre CSS un peu ici. Nous allons réutiliser cette classe de contraintes plus tard pour garder tout le contenu de notre produit ici au centre également. Donc, ce remplissage que nous avons ajouté à l'en-tête ici, je vais le déplacer vers cette classe de contrainte, parce que quoi que vous utilisiez ces éléments de contrainte dans les classes, vous avez généralement besoin d'un peu de remplissage sur ces éléments. Alors que faisons-nous cela en mettant dans ce sélecteur de contrainte, et je vais sauver cela. Tout est toujours exactement le même. 20. En-tête - Ajouter un logo: Ok, donc maintenant je veux juste remplacer ce titre orange par un logo comme cet orange que vous pouvez voir là-bas. Donc je vais sauter sur un site appelé Icône finder.com. Je vais chercher de l'orange. On va faire défiler vers le bas pour que je puisse trouver quelque chose qui ressemble à de beaux artefacts. Je vais faire défiler vers le haut. Changer cette option ici pour libérer, sorte que nous ne voyons que les icônes libres. Cette orange a l'air plutôt sympa. Donc je vais cliquer dessus. Je vais choisir 64 pixels parce que nous n'avons pas besoin que ce soit trop grand. On va télécharger ça. Je vais ouvrir la barre latérale dans VS Code, faites glisser cette icône dans notre dossier d'image. Je vais renommer ça en orange point PNG. Donc, je vais cliquer avec le bouton droit sur Renommer et point orange PNG. Placons cette image dans notre en-tête au lieu de ce titre. Donc je vais juste cacher la barre latérale à nouveau. Passez à cette rubrique qui contient le texte orange. Laissez ce texte ici. Cette taxe orange parce que c'est le titre de notre site web. C' est donc une bonne idée à des fins de référencement de laisser ce texte ici, mais nous pouvons le cacher plus tard avec CSS. Donc je vais juste briser ces éléments sur deux nouvelles lignes comme ça. Et je vais diviser le texte à l'intérieur de ceci, une étiquette sur de nouvelles lignes aussi. Ce que je vais faire est d'envelopper ce texte dans une balise span, qui est juste une sorte d'élément en ligne générique que nous pouvons utiliser. Donc je vais juste tirer la pellicule avec l'abréviation commandée. Enveloppez ça dans une travée et je sauverai ça. Et vous pouvez dire que je ne l'ai pas fait, cette balise span n'a rien changé ici parce que c'est un élément en ligne, est fondamentalement comme la version en ligne d'un div. Il n'ajoute aucun style particulier ou quoi que ce soit, nous donne juste un moyen de cibler une partie particulière de notre contenu, puis de le styliser. Donc je vais sauter à des styles. Et après cet en-tête H1, stylisez l'en-tête point H1. Et puis je vais cibler cet endroit. Alors frayons ici. Il suffit de définir cela pour n'afficher aucun. Sauve ça. Nous pouvons dire que le texte est maintenant disparu, bien qu'il soit toujours sur la page pour le référencement, pour les moteurs de recherche et d'autres choses comme ça. Donc, après cela, je vais ajouter une balise d'image en tapant dans l'onglet IMG hit sur. Notre image va être slash assets slash image slash slash point orange PNG. Donc, dans l'attribut source va ajouter des actifs barre oblique IMG barre oblique point orange PNG dans l'attribut alt ou simplement ajouter orange. Sauve ça. Nous pouvons maintenant voir l'orange sur la page. Cependant, il a l'air un peu grand. Donc, je vais juste ajouter un attribut width à cette image. Et en fait, utilisons CSS pour le faire. C' est la façon la plus correcte de le faire. Donc, voici où nous ciblons cet endroit est dans le H1. Donc, ajoutons une règle après cet en-tête de point H1 et ensuite moi et j Je vais définir la largeur à, disons 30 pixels, et je vais enregistrer cela. Cette image est maintenant de 30 pixels. Cette image a rendu notre en-tête un peu plus grand. Et bien que l'image soit le centre vertical de cet en-tête, ces éléments sur la gauche, je ne suis pas tout à fait au centre. Nous pouvons corriger cela en ajoutant une propriété flex à notre élément flex, qui est cet élément de contrainte qui est ici, qui est à l'intérieur de l'en-tête. Donc, dans ce sélecteur de contrainte d'en-tête, nous pouvons ajouter une nouvelle propriété appelée aligner les éléments. Et si nous mettons cela à censurer, sauf cela, nous pouvons maintenant voir que tous ces éléments dans notre en-tête maintenant au centre vertical. Ok, donc je pense que nous avons fini avec cet en-tête pour l'instant en termes de CSS. 21. Produit - Texte et image côté à côté (CSS): Ajoutons un peu de style à la liste des produits maintenant, si je reviens à la page finie, ce que nous voulons faire est d'améliorer les styles de tous les titres. Éliminez certains styles pour les boutons. Et nous voulons utiliser à nouveau display flex pour afficher tous ces trucs techniques sur la gauche, sur l'image, sur la droite. Et nous voulons également limiter le contenu au milieu de la page, comme nous l'avons fait avec nos éléments d'en-tête. Donc je vais juste revenir à notre page. Et la première chose qu'on veut faire, c'est se contenter. Et nous pouvons utiliser cette classe de contrainte que nous avons ajoutée auparavant. Section réutilisable. Nous pouvons utiliser cette classe sur cet élément de section parce que tous nos articles de produits vont être dans cet élément. Donc on peut juste parler de classe à cette section. Donc, la classe est égale à la contrainte. Sauvegardez ça. Et maintenant, tout le contenu du produit est limité au milieu de la page à une largeur maximale de 960 pixels. Et en passant, la raison pour laquelle nous avons utilisé max-width dans cette classe au lieu de juste la largeur, est parce que si la fenêtre devient plus petite que 960 pixels, que le div va diminuer, mais il n'aura pas plus grand, un plus large, je devrait dire, 960 pixels. Ok, donc nous avons limité notre contenu. Maintenant, nous voulons utiliser display flex pour afficher tout ce texte sur la gauche, sur l'image à droite. Donc je vais sauter à la maquette pour cet article. Et si nous définissons cet article pour afficher flex, qu'il fera tous ses enfants directs être affichés côte à côte dans une rangée. Et nous ne voulons pas que les étiquettes H1 et H2 et paragraphe soient côte à côte de gauche à droite, nous voulons juste tous les textes de ces boutons sur la gauche, sur l'image, sur la droite. Donc, à l'intérieur de cet article, je vais ajouter un div et nous allons lui donner une classe de produits, de textes de tiret, de baignoire. Je placerai tout le contenu du texte sur ces liens de navigation dans cette div. Et puis je vais aussi entourer cette image dans un div. Et nous allons donner à cela une classe de produits, image de tiret, déplacer l'image vers le haut dans cette div. Je vais sauver ça. Et nous voulons maintenant définir cet élément d'article pour afficher flex, qui transformera cet élément en une ligne et affichera ce div avec notre texte sur cette div avec notre image côte à côte. Donc d'abord, je vais juste ajouter un cours à cet article. Je vais juste appeler ça produit. Et nous allons ajouter du CSS à cet élément. Alors ajoutons une nouvelle section de CSS avec un commentaire, et je vais juste mettre le produit là. Nous voulons donc cibler la classe de produits. Si nous l'avons pour cet élément d'article, nous voulons définir ceci pour afficher, flex, enregistrer cela. Et nous pouvons maintenant voir que tous les trucs technologiques sont terminés sur la gauche et l'image est terminée sur la droite. Juste pour vous assurer que les deux concepts de textes sur l'image sont centrés verticalement, nous pouvons à nouveau utiliser la propriété align items. Donc, définissez que pour le capteur devrait être aligné éléments. Donc, je dois me concentrer. Et nous pouvons voir le texte sur l'image sont tous deux centrés verticalement. 22. Produit - Bord, rembourrage et positionnement (CSS): Je ne veux pas afficher une petite bordure entre chaque produit. Donc, je vais ajouter une propriété de fond de bordure, qui ajoutera une bordure juste en bas de cet élément de produit. Je vais définir ceci sur un pixel, qui signifie fondamentalement que la bordure aura un pixel d'épaisseur. Donc deux solides, ce qui signifie qu'il y aura une bordure solide parce que nous pouvons aussi mettre ça en pointillé. Quelques autres différentes. Ce que nous utilisons habituellement solide. Donc, un pixel solide, puis nous spécifions la couleur. Et je vais le mettre à la CCC. Sauvegardez ça. Nous avons maintenant cette petite frontière. Et je pense que nous pourrions le faire un peu de rembourrage en haut et en bas de chaque produit ou que nous avons un bel écart entre le contenu à la frontière. Donc, je vais également ajouter une propriété de remplissage ici, presque en haut et en bas rembourrage, disons un 100 pixels et le remplissage gauche et droit à seulement 0. Donc je vais sauver ça. Nous avons maintenant un peu d'espace en haut et le bas sont en ce moment ce texte sur la gauche, sur cette image sur la droite, je ne suis pas 5050. Le TextContent est légèrement plus large que le concept d'image. Ce qui doit être 5050. Donc, ce que nous pouvons faire est de cibler la fois le texte du produit div sur l'image du produit et d'autres propriétés à ceux-ci. Et si nous voulons cibler différents sélecteurs à la fois, nous pouvons le faire comme ça. Donc, nous voulons cibler les textes du produit DIV, Permettez-moi juste d'ajouter une virgule, puis d'ajouter notre deuxième sélecteur pour l'image du produit div. Donc point-produit texte virgule puis adopter produits image tiret. Nous pouvons utiliser la propriété flex pour dire à ces éléments comment, pourquoi ils devraient être dans cette corde de flux et s'ils devraient croître ou se rétrécir. Donc, la propriété flex a trois valeurs. La première propriété détermine la largeur de base de l'élément et nous voulons le définir à 50 pour cent. La deuxième valeur détermine si cet élément doit croître. Et je ne veux pas que ces éléments grandissent sur eux pour rester 5050. Donc je vais mettre 0. Et puis la troisième valeur détermine si cet élément doit rétrécir, et je ne veux pas qu'il rétrécit. Donc encore une fois, nous allons définir cela sur 0 au point-virgule, sauf qu'il s'agit maintenant de 5050. Je ne veux pas m'assurer que cette image occupe toute la place de cette moitié de cette rangée. Donc je vais juste cibler cette image. Donc beaucoup d'autres sélecteurs ici. Donc, je veux cibler l'image de produit point div, et puis je veux cibler l'image à l'intérieur, qui est cette image ici. Nous voulons définir la largeur à 100, puis l'enregistrer pour nous assurer que cette image remplit toujours l'espace disponible dans ce 50% de la ligne que cette div est occupée. 23. Produit - Styles de texte (CSS): Ok, donc maintenant améliorons les styles de nos textes ici, ces deux en-têtes de ce paragraphe. Donc, après ce sélecteur, je vais cibler cette balise chaude de page. Donc, je vais adopter le texte du produit, un parce que nous voulons cibler celui qui est dans cette div avec une classe de texte de produit. Je vais définir la taille de la police à 48 pixels. Rendons ça beau et grand. Sauve ça. Nous allons réduire la marge en dessous de ce titre de l'autel. Je vais donc définir la marge inférieure à 25 pixels. Sauve ça. Et cela rapproche un peu ce cap du premier réglage. Maintenant, je vais changer la taille de police de ce deuxième titre. Donc beaucoup de nouveaux produits sélectifs, textes néerlandais que H2, parce que c'est un H2 et nous allons définir la taille de police à 21 pixels et sauver ce dernier petit peu plus petit. Maintenant, je ne veux pas définir la taille de cette taille de police de paragraphe à la même taille que le deuxième titre. Donc autorisé les textes de tiret de produit, puis payer cause ceci est une balise de paragraphe, balise p. Encore une fois, définissez la taille de police à 21 pixels et enregistrez cela. Et nous pouvons faire avec un peu plus d'espace entre les lignes de ce paragraphe. Et nous pouvons le faire avec la propriété de hauteur de ligne. Donc, si nous mettons ceci à un, sauvez-le, ce sera fondamentalement pas d'espace entre les lignes. Donc, je vais augmenter ceci à 1.4 et sauver ça. Et regardons juste un peu plus facile à lire avec ce petit peu de hauteur de ligne. Ok, appelons un peu ces liens de navigation. Nous allons faire défiler la classe maquette jusqu'à cet élément nav. Nous appelons ce tableau de bord de produit assez. Sauve ça. Je vais utiliser cette classe pour styliser un peu ces liens. Donc, beaucoup de sélectionner à la fois l'image du produit. Parce qu'en général, vous essayez de garder vos styles dans l'ordre des éléments qui sont sur votre page. Donc autorisé le sélecteur ici. Nous allons donc cibler les produits. Je vais cibler l'UL à l'intérieur, la liste non ordonnée. Débarrassons-nous de ces balles. Je vais définir la propriété de style de liste sur NADH et enregistrer cela. Je vais supprimer la marge par défaut et le remplissage et la marge et le remplissage à 0 pour rendre ces alliés à l'intérieur de l'affichage UL côte à côte, je vais définir cette URL pour afficher flex aussi. Donc beaucoup. Affichez Flex et dites que ces éléments sont maintenant côte à côte. J' ai juste un peu de marge à droite de chacun de ces lacs. Nous allons donc cibler l'élément de navigation du produit, l'URL, puis la balise a à l'intérieur de cela. Parce que vous pouvez voir que nous avons ces étiquettes dans chacun de ces alliés. Vous pouvez également ajouter la marge à l'élément LI si vous le souhaitez. Je vais l'ajouter à la balise a. On va juste mettre ça à la marge ? Réglez cela sur 20 pixels, enregistrez cela. Nous avons maintenant un peu d'espace entre ces liens. 24. Boutons (CSS): Ok, ajoutons un peu de style pour nos boîtes maintenant rendre celles-ci belles. J' ai donc sauté à la page finie. Nous avons ces beaux styles de boutons. Nous avons une boîte orange autour d'un bouton blanc avec quelques bons effets de vol stationnaire, animations. Et il est logique d'ajouter ces classes d'une manière réutilisable car il suffit de recharger la page plus tard. Nous allons ajouter ces cookies avec j, et nous avons le même bouton de style ici aussi. Donc je vais revenir à notre page. Nous allons ajouter une classe à chacune de ces balises a, ces balises d'ancrage de bouton. Et en passant, j'ai fait une sélection multiple là en plaçant mon curseur et en maintenant la touche Alt enfoncée et en cliquant à nouveau. Cela nous permet de taper à deux endroits en même temps. Et le court devis peut être différent sur votre plateforme. Alors vérifiez la feuille de triche. Ok, alors ajoutons un peu de style pour ce cours Boltzmann. Cela va être réutilisable, donc nous le mettons dans notre section réutilisables. Donc, bouton point. Pour l'instant, je vais juste rendre ces deux boutons orange par celui-ci, mais nous allons en créer un orange sur un blanc plus tard. Nous voulons donc définir une couleur d'arrière-plan. Donc, je vais ajouter une propriété de couleur d'arrière-plan, et je vais définir ceci sur dur E F6 900. Je vais sauver ça. Et en passant, vous pouvez utiliser ce petit sélecteur de couleurs si vous voulez choisir une couleur différente. Je veux que la couleur du texte dans ces bouteilles soit blanche. Donc, je vais définir la propriété de couleur sur blanc, sauvegardez ça. Et je ne veux pas supprimer ces soulignements. Donc, comme on l'a fait avant, je vais mettre la décoration de texte pour ne pas enlever ces soulignements. On va ajouter un peu de rembourrage à ces boutons. Donc, beaucoup de propriété de rembourrage et a permis huit pixels de rembourrage en haut et en bas, 16 pixels de rembourrage à gauche et à droite, nous avons maintenant un rembourrage iceberg. Je ne veux pas ajouter des bords arrondis. Ces boutons, vous pouvez voir ici. Et nous pouvons le faire avec la propriété border-rayon. Donc, nous voulons définir le rayon de la frontière. Réglons-le à 20 pixels. Sauvegardez ça. Et nous avons maintenant ces beaux bords arrondis. Je veux avoir des boutons orange et des boutons blancs, pas seulement des boutons orange. Donc on en a une orange, la blanche. Donc, ce que nous pourrions faire est que nous pourrions avoir nos styles de boutons de base sur cette classe de boutons. Et puis nous pourrions avoir quelques classes supplémentaires pour changer les couleurs sur les différents boutons. Donc, en plus de cette classe osseuse sans espace sur la face inférieure, une autre classe à elle, je vais ajouter une classe de bouton pointillé orange, et ajouter sur ce bouton En savoir plus que nous voulons être blanc. Beaucoup de classe de tableau de bord, blanc. Sauvegardez ça, et je reviendrai beaucoup aux styles de boutons. Le sélecteur orange Watson, et nous allons déplacer notre couleur d'arrière-plan, propriétés de couleur vers le bas dans ce sélecteur. Et si je sauvegarde cela, nous ne voyons maintenant que ces couleurs sur ce bouton sur la gauche, qui a le bouton classe orange. Nous allons ajouter un sélectif pour le Watson blanc. Watson a écrasé la tache blanche et ça va être blanc. Donc, je vais définir la couleur de fond sur blanc. Je vais définir la couleur à la même couleur orange que nous avons en arrière-plan de ce bouton. Donc, je vais copier ce code couleur et le coller là. Et ça a l'air plutôt bien maintenant. Donc, nous avons maintenant juste besoin de quelques effets de survol sur ces boutons. Donc, après le sélecteur orange Watson, nous allons ajouter un pseudo sélecteur de survol. Donc met l'industrie du côlon orange planer, planer dessus. Nous allons changer légèrement la couleur de fond. Je vais juste copier ce code couleur, le coller ici. Et puis je vais voir si je peux utiliser ce sélecteur pour sélectionner une couleur orange plus claire. Donc je vais juste déplacer le truc, la liste des frais généraux, un peu orange clair et voyons à quoi ça ressemble. Ouais, ça a l'air plutôt bien. Ajoutons bientôt une couleur de vol stationnaire pour notre tableau blanc. Donc, après le bouton blanc sélecteur va ajouter le bouton de tiret y, deux-points hover. Je vais définir la couleur de fond. Je vais juste lui donner une couleur gris clair. Donc, je vais juste utiliser un code couleur commentaires avant, qui est trois e. Elle est presque blanche, mais pas tout à fait. Et ça a l'air assez bien. Nous voulons ajouter des transitions à ces survolants comme nous l'avons fait sur nos liens dans l'en-tête. Donc, nous pouvons simplement utiliser cette classe de bouton, qui est sur ces deux boutons à la propriété de transition. Et nous voulons faire la transition de la propriété de couleur d'arrière-plan. Donc, avec cette couleur de fond. Et encore une fois, nous ferons cette transition à zéro 0,3 seconde. Sauvegardez ça. Nous avons maintenant un bon effet de vol stationnaire sur chacun de ces boutons. Ces boutons ont l'air un peu près du paragraphe là-bas. Donc je vais juste ajouter un peu de marge au sommet de cet élément de navigation. Donc, nous allons trouver le sélecteur CSS pour cela. Donc, nous n'avons pas de sélecteur pour le nav de produit directement. Donc je vais ajouter ça ici. Produit tiret assez, marge supérieure ou a été essayé 20 pixels, peut-être 30 pixels. Ouais, ça a l'air un peu mieux. Maintenant, j'ai un peu d'espace entre les éléments de navigation, Ce texte, et nous avons beaucoup de textes ici dans ce paragraphe. Donc, je vais juste supprimer un peu de ce texte. Et par défaut, le texte dans votre éditeur dans VSCode, nous allons juste continuer à passer à droite comme ça sur une ligne. Mais nous pouvons rendre le texte enveloppé sur plusieurs lignes si nous allons à Afficher, puis bascule le retour au texte, ou vous pouvez utiliser le raccourci clavier. Et la taxe dans ce paragraphe est maintenant tout enveloppant. Donc je vais juste me débarrasser d'un peu de ce texte, peut-être autant. Je vais sauver ça. Ça a l'air un peu mieux maintenant. 25. Ajouter plus de produits (HTML et CSS): Ok, notre produit, ça a l'air plutôt sympa maintenant. Alors ajoutons quelques produits à notre page. Donc, je vais sélectionner tout l'élément de l'article et le copier. Collez un autre après, puis un autre. Encore une fois. Je vais sauver ça. Et nous pouvons maintenant voir trois produits sur la page. Je vais changer ce deuxième produit, deux produits différents avec une image différente. Donc je vais revenir sur le site pixabay et je vais chercher un MacBook. On peut trouver une belle photo d'un MacBook. Celle-ci a l'air plutôt bien. Donc, quand je clique sur cela, téléchargez que je vais ouvrir ma barre latérale, faites glisser cette image dans notre dossier image. Dans le dossier assets. Je vais renommer ce fichier en overbook point PNG. Ensuite, je vais fermer cette image et cacher la page de la barre latérale à l'écran. Donc je vais changer le produit intermédiaire. Donc, l'article du milieu, je vais changer l'attribut source sur cette image à l'image que nous venons de télécharger, qui est la barre oblique d'actif 0 point de livre PNG. Et je vais changer l'ancien texte à 0 livre aussi. Dites que nous pouvons voir cette image là-bas. Et je vais juste changer le texte ici pour le nouveau OH, livre. Et celui-ci, je vais juste changer incroyable en incroyable. Je vais sauver ça. Donc, nous avons maintenant deux produits différents pour être bons si nous pouvions inverser la commande sur certains de ces produits afin que l'image soit sur la gauche et le texte est sur la droite. Une façon de le faire est juste en échangeant ces deux divs. Donc, échanger l'image du produit et le texte div comme ceci, et nous pourrions le faire de cette façon. Ce que nous pourrions réellement faire avec CSS. Donc on va juste annuler ça et les remettre là où ils étaient. Sauve ça. Et nous utilisons CSS pour le faire à la place. Donc ce que nous allons faire est sur ce produit intermédiaire, sur cette étiquette d'article avec une classe supplémentaire appelée products reverse. Et nous allons utiliser cette classe pour inverser les éléments de cette ligne flexible. Donc, l'image est sur la gauche, sur le texte est sur la droite. Donc je vais revenir à notre CSS. Après ce sélecteur de produit, je vais ajouter des produits à point inverse pour inverser l'ordre des articles. Cette ligne flexible, nous pouvons simplement ajouter une propriété de direction flexible et définir ceci sur ligne tiret inverse. Et je vais sauver ça. Nous pouvons dire que ces deux éléments dans cette ligne flexible de maintenant commutés. L' espacement entre ces produits est assez agréable. Je pense que nous avons un peu trop d'espace en haut du premier produit ici, il y a un peu trop d'espace entre le concept ici sur l'en-tête, mais je veux quand même garder le rembourrage qui est en haut de tous les autres articles. Alors, comment pouvons-nous faire ça ? On peut utiliser un autre pseudo-sélecteur, qui est le premier sélecteur d'enfant. Donc, cet article est ici le premier enfant de cet élément de section. Nous pouvons utiliser le premier pseudo-sélecteur enfant pour sélectionner uniquement cet article, ce premier article. Donc je vais revenir aux styles. Après ce sélecteur de produit, je vais adopter des produits, puis un deux-points, puis un premier tiret enfant. Donc, cela ne sélectionnera que le premier enfant, qui a une classe de produit. Donc juste ce produit ici. Sur ce premier produit, je vais juste réduire le rembourrage supérieur. Donc, je vais mettre le bureau de mise. Essayons 20 pixels, sauvegardez ça. Et ça a l'air un peu mieux maintenant. Et je veux aussi lire cette bordure du dernier produit de la liste. Donc, le dernier enfant, et nous avons aussi un dernier pseudo-sélecteur d'enfant que nous pouvons utiliser pour le faire. Donc, je vais juste dupliquer ce premier sélecteur d'enfant en maintenant Alt et Maj enfoncés et en appuyant à nouveau sur Windows, raccourci peut être différent. Je vais changer ça en dernier enfant et je vais juste enlever la frontière de ce dernier enfant. Donc je vais mettre le tableau de bord en bas pour hocher la tête. Je vais sauver ça. Et nous pouvons maintenant voir cette frontière disparaître sur le dernier produit, mais nous pouvons toujours voir la frontière au bas des deux autres produits. Ok, donc je suis satisfait de cette liste de produits maintenant. Je pense que ça a l'air plutôt bon. 26. Footer (CSS): Alors finissons par coiffer cette fosse. Ça va être très simple. Si je regarde la page finie, nous avons juste une bordure tout le long du haut et un peu de rembourrage autour d'elle. Donc la première chose que nous voulons faire est de restreindre le concept des spots une cause. Vous pouvez voir ce texte est juste sur la gauche ici. Donc ce qu'on va faire, c'est qu'on va sauter au balisage pour la fosse, qui est là. Et je veux que cette photo ait une bordure tout au long de la photo. Mais vous pouvez voir ici. Je veux donc que cette frontière dépasse notre zone restreinte de gauche à droite. Donc, nous ne voulons pas ajouter de contrainte à la fosse. Nous voulons plutôt ajouter un div à l'intérieur de cette eau, mettre ce contenu à l'intérieur de cette div, puis ajouter la classe de contrainte à cette div. Donc beaucoup de div avec une classe de contrainte. Et nous allons ouvrir ce contenu à cela et enregistrer cela. Retournez à la page. Ce contenu est maintenant contraint. C' est conforme à l'autre contenu. Ajoutons un peu de style à cette eau. Et encore une fois, nous ne voulons pas cibler l'élément pied de page parce que vous pourriez avoir d'autres forces sur notre site Web. Alors ajoutons une classe d'eau à ce pied de page, et nous allons utiliser cette classe à la place. Alors je vais passer à nos styles. Beaucoup de nouveaux commentaires qui dit photo. Et nous allons cibler le pied de page. Et je vais juste ajouter une bordure d'un pixel solide. Et nous allons utiliser cette couleur gris clair si dur CCC. Et sauf ça, nous pouvons maintenant voir cette frontière. J' aurais juste besoin d'ajouter un peu de rembourrage aussi bien. Il en va de même pour la propriété de padding. Je suis autorisé à 20 pixels de rembourrage en haut et en bas, puis à 0 à gauche et à droite. Sauve ça. Cette photo a maintenant un peu de rembourrage autour d'elle. 27. Déplacez CSS dans un fichier de séparation (CSS): Ok, donc nous avons fini avec CSS pour l'instant, bien que nous allons ajouter un peu plus tard. Mais nous avons fini de coiffer notre page et ça a l'air plutôt sympa, mais nous avons beaucoup de style. Voici notre page HTML. C' est assez long et rend notre page HTML un peu désordonnée. Ce n'est généralement pas la façon dont nous ajoutons des styles à une page Web dans une balise de style comme ça, ce que nous faisons habituellement est de mettre notre CSS dans un fichier séparé. Et il y a beaucoup de raisons à le faire. Il maintient notre projet organisé. Et aussi si nous gardons notre style en ligne, la page HTML comme celle-ci, alors lorsque nous créons plus de pages, par exemple, plus tard, nous allons créer une page à propos. Ensuite, chaque fois que nous voulons changer les styles, nous devrions changer les styles dans cette balise de style la fois sur la page index.html et sur la page about ainsi, ce qui serait juste un cauchemar. Donc, nous allons déplacer tous ces CSS dans un fichier séparé. Donc je vais montrer la barre latérale. À l'intérieur du dossier assets, je vais créer un nouveau dossier appelé CSS. Ensuite, à l'intérieur de cela, lorsque je crée un nouveau fichier appelé styles.css, et vous n'avez pas besoin d'utiliser ce nom. Ce fichier doit se terminer par point CSS. Je vais sauter en arrière. Index.html copiera tout à l'intérieur de cette balise de style. Donc, je vais sélectionner tout cela en maintenant la touche Maj enfoncée et en cliquant sur le bas. Et en fait, je vais citer beaucoup, et je vais supprimer cette balise de style. Sauve ça. Notre page a encore l'air terrible. Mais ne vous inquiétez pas car nous allons le coller dans ce fichier style.css. Je vais juste mettre ça en retrait vers la gauche en maintenant la touche Maj enfoncée sur le dessus. Je vais enregistrer cela, revenez à index.html. Maintenant, nous devons tirer ce fichier CSS dans cette page HTML, qui va cacher la barre latérale. Nous pouvons le faire en ajoutant une balise de lien à notre tête. Et si je commence juste à taper le lien et que j'appuie sur Entrée, il ajoutera automatiquement une forêt de lien de feuille de style. Donc, il tire dans un fichier CSS. Nous voulons juste ajouter une balise de lien à la tête de cet attribut rel et le définir feuille de style afin que le navigateur sache qu' il s'agit d'une feuille de style. Laissez-moi juste vouloir définir cet attribut href déteste le chemin de notre fichier CSS. Et notre fichier CSS est dot slash assets slash css style.css. Et si je garde ça, nous devrions voir un peigne de site web, beau encore, ce qu'il fait. 28. C'est quoi JavaScript ?: Ok, passons à JavaScript maintenant. Donc, si HTML indique au navigateur quels éléments afficher sur la page, et CSS indique au navigateur comment ces éléments devraient ressembler et ce que le flip est, JavaScript tombe ? Eh bien, javascript est un langage de script qui nous permet de faire des choses réellement se produire sur notre page, comme montrer un élément ou cacher un élément, ou charger du contenu dans une partie particulière de la page. On peut l'utiliser pour créer des carousels, galeries d'images animées, et des trucs comme ça. Et cela nous permet également d'écouter les commentaires de l'utilisateur, de y répondre, par exemple lorsque l'utilisateur clique sur un bouton ou lorsque l'utilisateur fait défiler la page, ou si l'utilisateur drogue dans l'élément ou quelque chose comme ça. Donc, une chose simple que nous pouvons faire avec JavaScript sur cette page est d'afficher une bannière de cookies en bas de la page. Après quelques secondes, on pourrait ajouter un bouton à cette bannière. Et puis lorsque l'utilisateur clique sur ce bouton, nous pouvons ensuite masquer la bannière avec JavaScript. 29. Ajouter un tag de script (JS): Le moyen le plus rapide de JavaScript à votre page est d' ajouter simplement une balise de script à votre fichier HTML. Et nous pouvons ajouter une balise de script soit dans la tête ou dans le corps. Cependant, tout dans votre page HTML se chargera de haut en bas. Donc, si vous avez un très gros fichier JavaScript qui est chargé dans votre tête, alors le navigateur attendra que ce fichier JavaScript se charge avant de commencer à charger tous les éléments de votre page. Donc, placer JavaScripts dans votre tête peut réellement empêcher les éléments sur votre page de se charger. Une pratique courante est donc de placer vos balises de script en bas de vos balises de corps. Alors ajoutons une balise de script juste en bas de notre corps. Donc, nous avons juste besoin d'ajouter une balise de script comme celle-ci, ouverture et la fermeture de la balise. Et nous pouvons placer tout notre JavaScript ici. 30. Attendre à Wait (JS): Avant de commencer à lancer JavaScript, affichant des choses sur la page, nous voulons nous assurer que toute notre page a été chargée. Et nous pourrions le faire en ajoutant un écouteur d'événement à notre document, à notre page. Donc, à l'intérieur de la balise de script, nous voulons d'abord contacter le document, et nous le faisons simplement en le tapant dans le document. Ensuite, nous voulons ajouter un écouteur d'événement au document. Et pour ce faire, nous lançons une méthode appelée Art event auditeur. Par cet écouteur d'événement sur vous devez vous assurer de mettre en majuscule le a et le L. Et puis nous ajoutons des parenthèses comme ceci. Cette méthode attend deux paramètres et nous séparons les paramètres par des virgules. Et le premier paramètre est l'événement que nous voulons écouter. Nous devons mettre les mêmes citations. Vous pouvez utiliser des guillemets simples ou des guillemets doubles sur l'événement que nous voulons écouter est le contenu DOM chargé. Event sur DOM signifie simplement Document Object Model, ce qui signifie essentiellement simplement votre page HTML sur tous les éléments. Donc, nous voulons déclencher du code après que cet événement a été déclenché par le navigateur. Donc, nous ajoutons un deuxième paramètre ici en ajoutant une virgule. Je vais juste étirer ça un peu. Et ce que nous voulons faire ici, c'est déclencher une fonction. Donc, nous ajoutons une fonction, puis des parenthèses, puis un espace, puis deux accolades bouclées alignées. Et puis avec votre curseur à l'intérieur de ces accolades doubles vient de frapper l'éditeur. Nous pouvons maintenant déclencher du code à l'intérieur de cette fonction après que cet événement chargé de contenu DOM a été déclenché. Donc, fondamentalement, après que tout sur notre page a été chargé, juste pour m'assurer que cela fonctionne, je vais juste ouvrir un journal de console. Ce sont des journaux de l'utilisateur ne voit pas ce que nous pouvons voir dans notre navigateur, dans nos DevTools. Et c'est juste un moyen très pratique pour nous de savoir si les choses fonctionnent et notre JavaScript. Donc, pour déclencher un journal, nous avons juste via le journal de points de console et nous allons juste déconnecter du texte ici. Donc, nous voulons mettre quelques guillemets entre ces parenthèses. Et vous pouvez utiliser des guillemets simples ou des guillemets doubles. Et je vais juste me déconnecter. Dom l'est, je suis prêt et je le sauverai. Et si nous revenons au navigateur et ouvrons nos outils de développement, nous rechargeons la page. Nous pouvons voir dans notre console ici, DOM est prêt. Et si vous ne pouvez pas voir cette console alors qu'il pourrait juste avoir besoin d'appuyer sur la touche Echap. Vous pouvez l'encercler avec la touche Echap comme ça. 31. Bannière de cookies - HTML: Ok, donc avant d'ajouter un peu plus de JavaScript ici pour afficher une bannière de cookies, va avoir besoin de créer réellement un cookie utilisé HTML et CSS d'abord. Donc, nous allons ajouter du HTML pour nos cookies été, donc après, quoi, Je vais ajouter un élément de section avec une classe de cookies, de manière néerlandaise, Je vais placer nos cookies mais notre contenu ici, et je vais juste ajouter H1 titre sur. Je vais juste mettre les textos. Ce site utilise des cookies, puis beaucoup de paragraphe avec du texte à l'intérieur. C' est vraiment ennuyeux, inutile. Bannière Cookies. Sauvegardez ça. Je vais faire défiler vers le bas. Et nous pouvons voir ça en bas maintenant. Et nous allons également avoir besoin d'un bouton sur lequel l'utilisateur peut cliquer pour fermer cette bannière. Nous avons déjà mis en place des cours pour les personnes. Cette classe de bouton sur le bas, classe orange pour un bouton orange. Donc je vais revenir à cette bannière, Ladd un, un tag. Et je vais définir le brouillon de haine pour juste hacher parce que ce bouton ne va pas lier nulle part. Ça va juste déclencher du JavaScript. Nous devons ajouter ces classes. Donc beaucoup de verre d'eau et une classe de bouton néerlandais, orange. On va juste mettre les textos, les vêtements à l'intérieur de cette étiquette. Et je dirai qu'on peut voir ce bouton de fermeture là. 32. Bannière de cookies - CSS: Et la première chose que nous voulons faire est de restreindre le contenu qui se trouve à l'intérieur de ce panneau parce qu'il va de droite à gauche comme ça. Donc, nous allons coller un div à l'intérieur de ces cookies partie avec notre classe contrainte, que nous avons utilisé pour contraindre le concept. Et je vais déplacer tout le reste à l'intérieur de cette div et sauver ça. Ce contenu est maintenant contraint. Alors ajoutons un peu de style à cette bannière de cookies. Donc, nous pouvons utiliser cette classe de bannière de cookies pour ajouter un peu de style. Donc, je vais sauter au bas de style.css a permis une nouvelle section ici avec un commentaire qui dit cookies bannière ciblera la classe de bannière cookies. Je vais lui donner un fond gris foncé comme un en-tête. Définissez donc la couleur d'arrière-plan sur la même couleur. Elle 333. Dites qu'il a maintenant un fond gris. Cependant, nous ne pouvons pas voir le texte maintenant, alors donnons au texte une couleur claire. Donc beaucoup de propriété de couleur, et je vais définir ceci sur d, d, d, Donc une couleur gris clair parce que cette rubrique sur ce paragraphe à l'intérieur, ces cookies ont été un élément, cette propriété de couleur sur laquelle nous sommes assis cette section bonus cookies est en cascade maintenant aux éléments à l'intérieur. Ok, donc je vais ajouter un peu de rembourrage de cette façon. Nous allons donc ajouter une propriété de remplissage, beaucoup de 30 pixels de remplissage en haut et en bas sur 0, rembourrage à gauche et à droite. Sauvegardez ça. Et nous avons maintenant un peu d'espace en haut et en bas. En ce moment, cette bannière est en bas de notre page. Donc, si on est en haut de notre page, on ne le voit pas. Nous voulons donc qu'il soit fixé au bas de la page, peu importe où nous sommes dans ce document. Donc, même si on est au sommet, on devrait pouvoir voir cette bannière ici. Nous pouvons le faire en utilisant la propriété position. Donc, je vais ajouter une propriété de position à la clé. Et nous voulons régler ça sur corrigé. Et je vais sauver ça. Nous comptons maintenant voir la bannière sur la page parce que nous devons dire au navigateur où cet élément doit être fixé à. Donc, nous voulons qu'il soit fixé au fond. Donc, nous pouvons utiliser la propriété bottom, définissez cela à 0 parce que nous voulons fixer cet élément à 0 pixels du bas. Donc fondamentalement juste en bas. Donc, sauf cela, nous pouvons maintenant voir que cette bannière est fixée au bas. Cependant, il ne prend plus toute la largeur de la page. Parce que lorsque nous faisons un élément fixe, par défaut, il prendra juste la taille du contenu qui est à l'intérieur. Nous devons donc maintenant définir explicitement la largeur de cet élément. Je peux le faire avec la propriété width. Nous voulons définir la largeur à 100 pour cent. On va sauver ça. Prend maintenant toute la largeur de la page. Nous avons un peu plus d'espace en haut de cette bannière qu'en bas. Et c'est probablement parce que cette direction ici. Donc la marge supérieure sur elle. Donc, je vais juste cliquer avec le bouton droit de la souris sur ce titre et nous pouvons cliquer sur Inspecter. Donc, vous sautez directement à cet élément dans notre inspecteur d'éléments dans les DevTools. Et nous pouvons voir ici que la feuille de style de l'agent utilisateur ajoute une marge supérieure et une marge inférieure à cette rubrique. Donc, je vais juste ajouter une nouvelle règle ici pour cibler pas H1. Donc les cookies ont été un H1 et nous allons juste définir la marge supérieure 200. Nous avons maintenant une quantité égale d'espace en haut et en bas. Et je veux que ce bouton soit sur la droite ici plutôt que sous les textes. Et encore une fois, nous pouvons utiliser display flex pour le faire. Donc, je vais juste sauter à notre balisage sur index.html. Donc nous voulons ce texte, ce H1 et ce P. Donc vous serez sur la gauche est un tag pour être sur la droite. Donc, ce que nous pourrions faire est de définir cette contrainte si pour afficher flex, puis placer nos textes dans un jour, puis placer ce bouton et un div. Et puis nous devrions avoir un div avec le texte sur la gauche. Je veux Div avec le Watson sur la droite. Donc, je vais juste entourer le texte dans un div avec une classe de cookies, été un sext ou déplacer celui sur le stock P dans sélectif et beaucoup d'autres div avec une classe de cookies bouton Dash. Et on placera notre bouton à l'intérieur de ça, et je le sauverai. Et maintenant, nous voulons définir cette div avec la classe de contrainte pour afficher flex, mais seulement quand il est à l'intérieur de cette section avec une classe de cookies mère. Donc, sautez à style.css, faites défiler vers le bas. Donc beaucoup de nouvelles règles ici. Donc nous voulons faire des cookies, peintre hollandais, et je pourrais vouloir cibler cette classe de contrainte. Alors ne contraint pas. Et nous voulons définir ceci pour afficher flex. Sauvegardez ça. Et nous pouvons maintenant voir le texte sur la gauche, sur les bateaux et sur la droite. Mais nous voulons ajouter de l'espace entre tous les éléments qui sont dans cette ligne flexible. Donc, comme nous l'avons fait plus tôt, nous pouvons utiliser la propriété de contenu justification et nous installer à l'espace entre. Je vais sauver ça. Et maintenant, le bouton est sur la droite. Et maintenant nous avons un peu plus d'espace au bas de ce binaire que nous avons le haut. Et je pense que c'est parce que ce paragraphe ajoute une marge inférieure, va juste faire un clic droit sur ce paragraphe, cliquez sur Inspecter. Et oui, il a une certaine marge en bas qui est ajoutée par la feuille de style de l'agent utilisateur. Donc, après cette page, un style ciblera la balise de paragraphe dans cette section de bannière de cookies et définira la marge inférieure à 0. Sauvegardez ça. Et ça a l'air plutôt gentil maintenant. 33. Cacher une bannière de cookies avec CSS: instant, cette bannière est toujours affichée sur la page, mais nous ne voulons pas toujours l'afficher sur la page. Nous voulons qu'il soit caché par défaut, puis affiché sur la page après quelques secondes. Donc, ce que nous pourrions faire est d'utiliser CSS pour pousser cet élément du bas de la page afin que nous ne puissions pas le voir. Et puis nous pourrions utiliser notre JavaScript pour ajouter une classe à l'élément après quelques secondes. Et nous pourrions utiliser cette classe CSS pour tirer la bannière sur la page. Donc, tout d'abord, poussons simplement cet élément du bas de la page en utilisant CSS par défaut. Et nous pourrions le faire en utilisant la propriété transform, qui est une propriété qui nous permet de déplacer des éléments autour, a changé leur largeur et leur hauteur et des choses comme ça. Donc, je vais ajouter une propriété appelée transform et appuyez sur Entrée. Et nous pourrions faire un certain nombre de choses différentes avec transform, nous pouvons faire pivoter des éléments et mettre à l'échelle des éléments vers le bas des éléments biaisés, où nous allons utiliser cette propriété translate y, qui nous permettra de changer la position verticale, la position y de l'élément. Donc, nous allons utiliser cette propriété translate y. Et si je mets juste 50 pour cent ici et que je garde ça, vous pouvez voir qu'il a poussé la bannière à mi-chemin en bas de l'écran. Donc nous ne pouvons voir que la moitié de la bannière, mais nous allons la repousser jusqu'au bout. Donc on va changer ça à 100 pour cent. Et je vais sauver ça. Et nous ne pouvons plus voir la bannière. 34. Créer un cours pour afficher une bannière de cookies: Donc, ce que nous allons faire maintenant est de configurer une classe CSS, qui ramène la bannière sur la page. Et puis plus tard, nous allons utiliser JavaScript pour ajouter la classe arrière à l'élément après quelques secondes, ceux qui affichent la bannière sur la page. Donc, après le sélecteur de balance de Cauchy, je vais ajouter des cookies tiret, bannière que je vais ajouter ombre sombre. Donc, nous ciblons essentiellement l'élément de bannière des cookies quand il a ajouté une classe de show, ce qui n'est pas par défaut, mais nous allons ajouter cette classe avec JavaScript. Et ce que nous voulons faire, c'est changer à nouveau cette propriété de transformation. Donc je vais copier ça et le coller ici. Et nous voulons définir cette Translate Y à 0%, ce qui le ramènera entièrement sur la page. Alors je vais sauver ça. Et si j'ouvre mes outils de développement, trouvez ces cookies élément bannière, qui est ici. Et puis si je clique sur ce truc CLS ici, nous pouvons réellement ajouter une classe et voir ce qui se passe. Donc notre classe s'appelle Show. Donc, nous allons taper en show et nous pouvons maintenant voir la bannière sur la page. Si nous supprimons cette classe. Et vous pouvez voir que la classe a été ajoutée ici aussi. Si nous supprimons la classe, alors la bannière est à nouveau cachée en bas. Ce serait bien si cela était animé tel qu'il apparaît et disparaissait sur et hors de la page. Donc, comme nous l'avons fait plus tôt, nous pouvons utiliser la propriété de transition pour le faire. Donc, dans notre bannière de cookies select, je vais ajouter une propriété de transition. La propriété que nous voulons animer est la propriété transform. Donc nous allons transformer ça. Nous voulons ajouter une durée. Donc je vais ajouter 0,3 seconde et mon point-virgule, et je vais sauver ça. Donc maintenant, si nous choisissons nos cookies par l'élément dans l'onglet éléments ici, cliquez sur classe. Au show class, nous disons, nous avons maintenant une belle animation quand elle apparaît. Et si nous supprimons la classe, nous avons une belle animation à nouveau quand elle disparaît. Donc maintenant, tout ce que nous devons faire est d'utiliser JavaScript pour ajouter cette classe show à la bannière des cookies après quelques secondes. 35. Maîtriser Banner dans une variable JavaScript (JS): Ok, Utilisons JavaScript pour augmenter cette classe de spectacle aux cookies par l'élément après quelques secondes. Donc, nous allons revenir à notre JavaScript dans index.html, qui est ici. Et nous allons nous débarrasser de ce journal de console parce que nous n'avons pas vraiment besoin de ça. Avant de pouvoir faire quelque chose avec ces cookies palette, nous devons y avoir accès. Et nous pouvons le faire en lançant la requête sélectionne une méthode sur le document. Donc, ce que nous pouvons faire est de document point, requête , Select, puis parenthèses, puis guillemets. Et puis nous pouvons passer un sélecteur dans ces citations. De même que les sélecteurs que nous utilisons dans notre CSS. Donc, si nous voulons récupérer les cookies, qui a une classe de cookies Power BI, nous pouvons simplement utiliser l'équilibre des cookies points. Donc, dans ces citations, nous pouvons juste commencer les cookies à points, le beurre de tiret. Et cela va saisir l'élément de bona cookies afin que nous puissions réellement faire quelque chose avec elle. Mais d'abord, nous devons mettre cela dans une variable. Et je suis qu'est-ce qu'une variable ? Fondamentalement, c'est juste un petit bloc de données avec un nom. Et nous pouvons bloquer toutes sortes de différents types de données dans une variable. La façon dont nous mettons en place une variable est que nous utilisons simplement le mot let et ensuite nous entrons un nom pour notre variable. Disons qu'on voulait stocker l'âge de quelqu'un. On pourrait appeler cet âge variable. Et nous pouvons définir cela égal à un nombre tel que 30. Et nous pourrions également stocker du texte ou une chaîne dans une variable. Disons qu'on voulait stocker le nom de quelqu'un. On pourrait faire « Let's name ». Ensuite, nous voulons utiliser des guillemets si nous faisons une chaîne. Donc Dani, et nous pourrions également stocker des valeurs booléennes, vraies et fausses valeurs dans une variable. Donc, nous pourrions vouloir faire quelque chose comme, allons, est abonné par l'utilisateur. Et nous pouvons définir que c'est vrai ou nous pourrions le mettre à faux. Mais dans ce cas, nous voulons juste stocker cet élément de document dans une variable. Donc je vais juste me débarrasser de tout ça. Je vais bloquer ça dans une variable. Donc nous appellerons ça les cookies bada. Salut, ces cookies. Mais notre élément sera maintenant dans ce cookie est d'une variable où nous pouvons faire des choses avec. Avant de faire des trucs avec ça, nous voulons nous assurer qu'il existe. Parce que si nous avons essayé de déclencher du code sur cet élément et qu'il n'existe pas sur la page, alors cela déclenchera une erreur. Donc, nous pouvons utiliser une instruction if pour le faire. Donc, ce que nous pouvons faire est de taper f, puis parenthèses. Et puis dans les parenthèses, nous pouvons simplement ajouter des cookies a été un. Donc, en d'autres termes, s'il y a quelque chose dans cette variable, donc si cet élément a été trouvé sur la page, alors nous pourrions faire quelque chose. Pour l'instant, je vais juste me déconnecter. Donc, je vais utiliser console.log et juste déconnecter Barna existe. Et si nous voulions déclencher du code, si la bannière n'existe pas, nous pourrions ajouter d'autres après cela si l'instruction double accolades dedans, nous pouvons simplement déconnecter console.log, mais un n'existe pas. Je vais sauver ça. Et nous pouvons maintenant voir dans notre console ici, Banner existe ou si je supprime simplement ces cookies élément de section bannière de la page et puis l'enregistrer. Nous voyons maintenant, mais n'existe pas, être verrouillé. Donc, un endroit que les cookies bannière retour sur la page et enregistrer cela. Je ne vais pas vraiment avoir besoin de cette autre déclaration. 36. Afficher la bannière de cookies après 2 secondes (JS): Donc, si les cookies, mais il existe, alors nous voulons ajouter la classe de show à cet élément de manière cookies après quelques secondes. Afin de peser quelques secondes, nous pouvons utiliser la méthode setTimeout. Donc, je vais juste supprimer ce journal de la console et je vais juste taper ensemble. Nous pouvons dire dans notre IntelliSense ici nous setTimeout fonction. Donc, je vais répondre à ce sujet, sur beaucoup. Cette fonction setTimeout suit. Cette fonction attend deux paramètres. Le premier paramètre est une fonction. Donc, c'est juste une façon différente d'écrire une fonction, ce qui est un peu différent de la façon dont nous avons écrit cette fonction. Ce type de fonction est appelé une fonction de flèche, mais nous pourrions également changer cela pour fonctionner des accolades doubles et ensuite se débarrasser de cette flèche. Donc, cela fonctionnerait aussi, eh bien, je vais juste changer l'endroit en une fonction de flèche afin que nous puissions trouver du code dans cette fonction après la fin du délai d'expiration. Ce second paramètre ici est un nombre qui est le temps que nous devrions attendre en millisecondes. Donc si on voulait attendre cinq secondes, on pourrait mettre 5000 ici. Donc je vais changer ce délai à 5000. Je vais sortir quelques textos pour l'instant. La minuterie est terminée. Si nous sauvegardons ceci et rechargeons la page, attendez quelques secondes, alors nous pouvons dire que le minuteur a fini d'être verrouillé. Je vais juste réduire ce temps à deux secondes. 2000, hey, Arafat, mettons ce 2000 dans une variable. Donc, après ce cookie est une variable, autre variable appelée cookies, mais un retard, début ou égal à 2000. Et maintenant, nous pouvons juste utiliser cette variable ici au lieu de coder en dur le nombre. Donc, je vais copier ce nom de variable, coller cela ici. Et maintenant, si nous revenons à ce code plus tard, ce sera vraiment facile pour nous de changer le délai si nous le voulons. Mais de toute façon, une fois ce délai terminé, nous voulons ajouter la classe show, nous avons mis en place, la bannière des cookies, ceux qui montrent la pâte sur la page. Et nous avons accès à l'élément de bannière cookies ici. Donc je vais me débarrasser de ce journal de console. Et ce que nous pouvons faire est cookies bannière, et nous voulons accéder à la liste de classe sur ces produits de cookies, nous pouvons faire liste de classe points. Et en fait, je vais juste me déconnecter pour que vous puissiez voir ce qui se passe ici. Donc, je vais ajouter console.log, puis entourer cette bannière de cookies liste de points entre parenthèses et enregistrer cela. Et si nous attendons quelques secondes, nous pouvons voir ces listes de jetons DOM être déconnectées. Et si nous cliquons sur cette petite flèche pour l'ouvrir, ce que nous voyons ici est un tableau. Et un tableau nous permet essentiellement de stocker plusieurs variables dans un élément de données. Donc, si je saute à cette bannière de cookies et qu' on avait un autre côté de classe nouvelle classe pointillée. Et nous sauvegardons ça et rechargeons. Vous pouvez voir cela être déconnecté à nouveau. Maintenant, nous avons deux éléments dans ce tableau, les cookies de notre nouvelle classe. Donc, je vais juste lire cette nouvelle classe et sauver ça. Retournez à notre JavaScript. Et je vais supprimer ce journal de console. Donc nous avons accès à la liste des classes de cette pâte à cookies. Maintenant, nous voulons ajouter une classe à elle. Je veux ajouter cette classe show que nous configurons. Donc, nous pouvons maintenant décider point, ajouter, puis parenthèses. Et puis entre guillemets, nous pouvons ajouter la classe que nous voulons ajouter et nous voulons ajouter le show de classe. Donc je vais sauver ce rechargement. Et si nous attendons quelques secondes, nous pouvons voir notre en appariant. Et si nous regardons dans l'inspecteur d'éléments ici, nous pouvons voir que la classe show a été ajoutée. 37. Réalisez notre logique en fonctions (JS): Cependant, c'est une bonne idée de diviser notre logique en fonctions. Et une fonction est juste un bloc de code que nous pouvons donner un nom. Et vous voulez généralement que chaque fonction ait un seul but. Donc, après cette déclaration si ici, je vais ajouter une fonction. Nous le faisons en tapant simplement la fonction, et ensuite nous pouvons donner un nom à la fonction. On pourrait l'appeler bannière de spectacle. Ensuite, nous ajoutons des parenthèses, puis des accolades doubles. Et puis nous pourrions mettre le code de notre fonction dans ces accolades. Donc je vais juste couper cette ligne où nous avons ajouté la classe. Je vais le coller dans cette fonction à la place. Ce que nous pouvons faire maintenant sur ce délai défini, sur ce premier paramètre, nous pouvons simplement sélectionner l'ensemble de cette fonction. Donc les deux accolades doubles, la flèche et ces deux parenthèses. Et nous pouvons simplement supprimer cela, et nous pouvons simplement taper le nom de cette fonction à la place. Donc, il va maintenant déclencher cette fonction une fois le délai d'expiration terminé. Donc, nous pouvons juste taper la bannière show. Hey, sauvegardons que NCBI fonctionne toujours, rechargez la page. Et pourtant, ça marche toujours. Je vais juste ajouter quelques commentaires ici pour briser un peu notre code. Nous pouvons utiliser le même raccourci clavier pour ajouter un commentaire en JavaScript, qui sur un Mac c'est la commande et la barre oblique. Et je vais juste étiqueter ce truc en haut parce que c'est là qu'on initialise des choses et qu'on accède à nos éléments. Et puis beaucoup de commentaires au-dessus de nos fonctions, qui dit juste des fonctions. En passant, nous pouvons également ajouter des commentaires au HTML. Nous voulions donc ajouter un commentaire au-dessus de cette bannière de cookies. Nous pouvons simplement utiliser la commande de raccourci et barre oblique avant ou je pense que c'est Contrôle et barre oblique avant sur Windows, alors nous pouvons simplement taper un commentaire ici, comme les cookies bannière. 38. Maîtriser le bouton dans une variable JavaScript (JS): Ok, donc nous voulons cacher ce panneau lorsque l'utilisateur clique sur ce bouton de fermeture. Donc, lorsque l'utilisateur clique sur ce fermé, et nous voulons essentiellement supprimer la classe show, vous pouvez voir ici à partir de ces cookies achetés, qui va ensuite s' accoupler avec la bio retour en bas de la page. Nous pouvons donc le faire en ajoutant un gestionnaire de clic à ce bouton. abord, vous devez avoir accès à ce bouton, tout comme nous l'avons fait lorsque nous avons eu accès à la bannière des cookies en utilisant la requête sélectionne une méthode. Donc, après cette ligne, je vais ajouter, nous allons, appelons ça des cookies sur le bouton Fermer. Loi égale au sélecteur de requête de document et entre parenthèses et guillemets à l'intérieur. Et nous avons donc besoin d'un sélecteur pour sélectionner ce bouton de fermeture. Et nous ne pouvons pas simplement utiliser ce bateau ou la classe parce que ce sélecteur de requête va simplement sélectionner le premier élément qui autant que le sélecteur que nous mettons ici. Donc si nous mettons juste point Watson ici, alors il sélectionnerait effectivement ce bas, qui est le premier élément Watson sur notre page, cette Bible. Nous devons donc être plus précis que cela. Et nous avons cette div autour de la classe de cookies Appleton charter, Barbara Watson. Donc ce qu'on pourrait faire pour notre sélecteur, c'est des cookies à points, manière Watson, puis un espace, et ensuite Watson. Donc, en d'autres termes, il va sélectionner l'élément qui a une classe de bouton qui est à l'intérieur de l'élément qui a une classe de cookies mais un bouton. Donc je vais sauver ça. Et nous allons installer un gestionnaire de clics sur cette bouteille. Donc, je vais ajouter une nouvelle section après cette instruction if, et je vais juste appeler ces événements. Et je suis d'abord nous voulons vérifier que ce bouton de fermeture existe comme nous l'avons fait avec les cookies de manière. Donc, si les cookies étaient un Watson proche. 39. Masquer la bannière de cookies sur Bouton Click (JS): Et si elle existe et que nous voulons y ajouter un gestionnaire de clics. Et nous pouvons le faire en ajoutant un écouteur d'événement au bouton de fermeture en utilisant cette méthode addEventListener que nous avons utilisée auparavant. Donc, ce que nous pouvons faire est les cookies été un bouton fermer point ajouter écouteur d'événement, puis parenthèses. Maintenant, cette fois, nous voulons ajouter l'écouteur d'événement click. Donc, nous allons ajouter des guillemets là, puis cliquez sur Suivre le second paramètre. Nous avons besoin d'une fonction. Donc, nous pourrions ajouter une fonction comme celle-ci directement ici et ajouter du code ici. Mais il est probablement mauvais de déclencher une fonction séparée afin que nous puissions garder toute notre logique bien séparée en différentes fonctions. Donc, je veux sélectionner toute cette fonction que je l'ai achetée et à la place déclenchera une fonction appelée close Watson cliqué. Et je, en fait, appelons-le cookies, été un bouton de fermeture cliqué pour le rendre un peu plus spécifique. Et puis je vais copier ça et nous allons créer cette fonction ici. Beaucoup de cette fonction. Donc, lorsque vous démarrez la fonction, puis coller dans les cookies par mon bouton Fermer clique sur les parenthèses. Pour l'instant, nous allons simplement déconnecter quelques textes. Donc, le bouton de fermeture console.log a été cliqué pour vous assurer que cela fonctionne. Donc je vais sauver ça. Attendez que le bulletin de vote apparaisse. Cliquez sur le bouton Fermer. Et nous pouvons dire que le bouton Fermer a été cliqué. Donc ça marche. Si nous sommes en bas au bas de la page et nous cliquons sur ce bouton de fermeture saute nez vers le haut. Et c'est parce que quand on clique dessus, ce qui est une référence H est trop dur. Nous pouvons utiliser le hachage pour sauter à diverses ancres sur notre page. Je ne vais pas entrer dans ça maintenant. Que faire si nous ne spécifions pas un nom pour une ANCA, alors il va juste sauter pose en haut de la page. Donc, ce que nous devons faire dans ce gestionnaire de clic est empêcher le comportement par défaut de ce bouton lorsque nous cliquons dessus, qui est de suivre le lien qui est affecté à cette eau. Dans ce cas est le hachage. Donc, quand nous nous sommes assis si EventListener comme ceci, comme un écouteur d'événement de clic, cela retournera ce qui est connu comme un objet d'événement, que nous pouvons transmettre à la fonction que nous lançons. Je ne vais pas trop entrer dans l'objet d'événement. Maintenant, ce que nous pouvons transmettre cela en mettant juste un nom de variable dans ces parenthèses et vous pouvez l'appeler comme vous voulez. Donc, vous pouvez l'appeler événement ou vous pouvez simplement l'appeler un. Je vais juste l'appeler a. Et maintenant que nous avons accès à cet objet événement qui a été retourné par cet addEventListener quand le bouton a été cliqué, nous pouvons déclencher une méthode sur ce pour empêcher le comportement par défaut du clic sur ce bouton. Donc, nous avons juste besoin d'ajouter un point de prévention par défaut, puis des parenthèses. Et je vais sauver ça. Espérons que maintenant, si nous cliquons sur ce bouton, il ne saute plus en haut de la page, mais nous voyons toujours notre journal être déconnecté. bouton Fermer a été cliqué. Ok, Donc une fois que le bouton de fermeture a été cliqué, nous voulons alors activer une autre fonction qui va ensuite cacher la bannière des cookies. Donc, lançons une fonction appelée masquer les bannières publicitaires pour déclencher une fonction d'ailleurs, nous pouvons simplement taper le nom de la fonction, puis des parenthèses comme ça. Donc, créons cette fonction ici. Donc fonction cacher bannière, parenthèses, accolades doubles. Alors, qu'est-ce qu'on doit faire pour cacher cette bannière ? Eh bien, nous avons juste besoin d'en retirer cette classe de spectacle. Tellement comme nous l'avons fait dans ce spectacle a été une fonction. Nous pouvons simplement faire des cookies bannière parce que rappelez-vous que nous avons accès aux cookies par l'élément avec ce cookie spot une variable. Et puis nous voulons accéder à la liste des classes. Et cette fois, nous voulons déclencher la méthode remove au lieu de la méthode add. Donc, nous voulons juste supprimer les parenthèses et les guillemets à l'intérieur des parenthèses, puis montrer parce que nous voulons supprimer la classe appelée show. Donc je vais sauver ça. Donc nous disons le lien que je répare. Après quelques secondes, cliquez sur le bouton et nous voyons la bannière disparaître. 40. Déplacez JS dans un fichier de séparation (JS): Ok, donc nous avons fini avec JavaScript maintenant. Et je suis comme si nous avons déplacé notre CSS dans un fichier séparé. C' est une bonne idée de déplacer notre JavaScript dans un fichier séparé. Parce que si nous partons, je vais JavaScripts dans cette balise de script et nous créons de nouvelles pages, ce que nous allons faire dans un peu que si nous voulons apporter des modifications à notre JavaScript, nous devrions apporter des modifications à plusieurs fichiers HTML différents. Il est donc logique d'avoir tout sur JavaScript dans un seul fichier afin que nous n'ayons besoin de le changer qu'une seule fois. Donc, je vais ouvrir la barre latérale de l'Explorateur. Et à l'intérieur du dossier assets, je vais créer un nouveau dossier appelé JS pour JavaScript. Je vais cliquer avec le bouton droit de la souris pour créer un nouveau fichier là-dedans. Et nous pourrions appeler ce doc global js. Et vous pouvez l'appeler ce que vous voulez, mais cela doit se terminer par dot js. Et il est ouvert fichier pour les lignes. Donc, je vais revenir à index.html. Et je vais appeler tout le code qui est à l'intérieur de cette balise de script. Sauvegardez cela, passez à ce fichier global dot js que nous avons créé. Je vais le coller ici. Je vais enregistrer cela et puis revenir à index.html. Je vais juste supprimer la nouvelle ligne de cette balise de script. Donc nous avons juste arrêté les balises de script d'ouverture et de fermeture comme ça. Et ce que nous pouvons faire est simplement d'ajouter un attribut source aux scripts, puis de répondre au chemin d'accès à notre fichier JavaScript. Donc, cela va être des actifs slash slash js slash global ab.js. Donc je vais sauver ça et voyons si ça marche encore. Donc je vais recharger la page. Nous voyons toujours une bannière payer et si nous cliquons, elle, disparaît toujours. 41. CSS réactif (CSS): Ok, Donc cette page Web est super maintenant sur le bureau, mais il y a quelques touches de finition. Donc, je veux ajouter une deuxième page, une page à propos, que nous pouvons obtenir en cliquant sur ce lien dans l'en-tête. Eh bien, tout d'abord, je veux rendre cette page web réactive. J' ai l'air bien sur mobile. Parce que si nous ouvrons nos Chrome DevTools, cliquez sur cette petite icône d'appareils ici. Nous pouvons choisir dans cette liste déroulante, un appareil mobile. Je viens de choisir l'iPhone 6, 7, 8 plus. Cela nous montrera à quoi ressemble cette page sur mobile. Sur la tête, il semble bien sur la bannière des cookies, semble bien. La quatrième cellule a l'air bien. Eh bien, ces produits n'ont pas l'air très bon parce que le texte est trop grand pour mobile. Et nous avons tout le texte écrasé à gauche comme ça. Et nous avons cette petite image écrasée sur la droite. Donc, ce serait mieux si nous pouvions réduire la taille du texte pour mobile en stock, la section de texte sur le dessus de l'image et étirer les textes sur toute la largeur de l'appareil. Et aussi étirer l'image sur toute la largeur de l'appareil. Et nous pourrions également faire de réduire un peu l'espace entre les produits aussi. Donc je vais juste vous montrer la page finie ici. Et vous pouvez voir que j'ai réduit tous les textes et nous avons maintenant la section texte empilée au-dessus de l'image, étirant l'image afin qu'elle soit beaucoup plus grande et nous avons également réduit l'espacement au-dessus et au-dessous de chaque produit. Cela semble beaucoup mieux sur mobile. 42. Questions médiatiques expliquées (CSS): Alors, comment pouvons-nous ajouter différents styles pour les appareils mobiles ? Ce que nous pouvons faire avec les requêtes des médias. Donc je vais revenir à la page. Je vais juste sortir de la vue mobile pour l'instant. Et nous allons sauter au fichier CSS style.css. Et puis au bas de ceci, je vais ajouter une requête multimédia. Donc, beaucoup de commentaires ici qui dit juste des requêtes des médias. Et j'ajouterai une requête multimédia. Sur une requête média nous permet juste d'ajouter quelques règles CSS. Seulement pour les appareils sont des navigateurs d'une largeur particulière. Nous avons donc eu une requête média en ajoutant des médias. Ensuite, nous ajoutons quelques parenthèses, doubles accolades. Et à l'intérieur de ces parenthèses, nous pouvons mettre une règle qui indique au navigateur quel écran taille les règles que nous mettons ici doivent être appliquées. Et nous pouvons utiliser soit min-width ou max width. Donc, si je pensais que l'homme, la largeur du tiret, puis un deux-points , et je peux spécifier une valeur de pixel. Donc, si je mets cela à, disons, 500 pixels que toutes les règles que nous mettons ici ne seront appliquées à la page que si le navigateur est plus large que 500 pixels. Donc, à l'intérieur de ces accolades doubles, nous pouvons simplement ajouter des règles CSS comme d'habitude. Donc, si nous voulions cibler la balise body, si vous ajoutez simplement un sélecteur body, définissons simplement la couleur d'arrière-plan sur rouge. Je vais sauver ça. Et nous pouvons voir que l'arrière-plan est devenu rouge. Si je réduit la taille du navigateur à moins de 500 pixels, alors il change à pourquoi Encore une fois, car il ne va ajouter cette règle que si le navigateur est de 500 pixels ou plus. Nous pouvons également utiliser max-width au lieu de min-width. Donc, si je change ceci à la largeur maximale et l'sauvegarde, alors maintenant les règles que nous spécifions à l'intérieur de cette requête de média ne seront appliquées à la page que si le navigateur est de 500 pixels ou moins. Nous sommes donc actuellement plus larges que 500 pixels. Maintenant, vous pouvez dire ouvrir le haut, nous sommes à environ 130 pixels. Si nous descendons, voir ci-dessous 500 pixels, alors nous voyons la couleur de fond rouge. 43. Ajouter une requête de médias et des styles mobiles (CSS): Donc, je vais ajouter une requête multimédia qui cible les appareils qui sont aussi larges qu'une tablette typique en mode portrait. Ainsi, une largeur typique pour une tablette en mode portrait, comme l'iPad est de 768 pixels. Donc, je vais définir ceci sur une largeur maximale de 768 pixels. Sauve ça. Je vais juste étirer ça un peu. Donc, si nous cliquons sur le bouton de l'appareil, nous choisissons iPad. Nous pouvons dire que cette règle est appliquée. Nous allons donc ajouter ici quelques règles qui seront appliquées sur les appareils qui sont aussi larges ou moins. Mais nous ne voulons pas définir le corps sur une couleur de fond rouge. Alors débarrassons-nous de cette règle et sauvegardons ça. En fait, cette mise en page semble assez bonne sur un iPod par cela. Donc, je vais juste cibler tous les appareils qui sont plus petits que ça. Je vais donc changer ce MUX avec 2767 pixels. Sauve ça. Nous passerons à l'un des appareils mobiles tels que l'iPhone 6, 7, 8 Plus. Ajoutons donc quelques règles pour améliorer cette mise en page. Donc, chacun de nos produits est dans une étiquette d'article avec une classe de produits. Et si nous regardons le CSS pour la classe des produits, qui est Hey, nous avons cet ensemble pour afficher flex, ce qui est ce qui rend ses éléments enfants directs affichés dans une rangée côte à côte. Donc, le taux nous voulons cibler le div du produit et définir la propriété d'affichage à quelqu'un d'autre. Et nous allons le définir pour bloquer, ce qui empêchera l'élément produit d'être rangée et le transformera simplement en un élément bloc normal. Donc, je vais sauter à la requête des médias. Et nous voulons cibler les éléments du produit. Et nous voulons juste définir l'affichage pour bloquer. Et je vais sauver ça. Et nous pouvons maintenant voir le texte sur l'image sont empilés les uns sur les autres. Et je veux aussi réduire la taille du texte un peu de ces en-têtes sur ce paragraphe. Donc, après ce produit sera notre point produit H1, parce que cette rubrique est dans un haut, nous allons réduire la taille de la police. Donc, définissez la taille de la police à 34 pixels et enregistrez cela, et cela semble mieux. Je vais également réduire la taille de police de ce H2 aussi. Donc beaucoup de points produit. H2 définira la taille de la police à 16 pixels. Enregistrez cela, et je vais également réduire le paragraphe à 16 pixels. Donc, nous allons faire des points produits, payer la taille de la police 16 pixels, enregistrer cela. Et nous avons un petit problème avec nos bateaux et dire que d'être coauteur le fond. Et c'est parce que ce sont huit câlins. Et par défaut, les balises sont des éléments en ligne. Et les éléments en ligne seront parfois des clips comme celui-ci s'ils entourent des éléments ou que les éléments parents sont trop petits. Et nous pouvons corriger cela en définissant simplement ces deux blocs en ligne au lieu d'éclairer. Donc, je vais revenir à notre produit CSS. Nous avons nos produits nav. Ici. Nous ciblons ces liens ici, produit maintenant VLA. Donc je vais juste mettre ces deux-là. En fait, changeons simplement la classe de bouton afin que nous ne voyions ce problème nulle part ailleurs sans polluants. Alors je vais à notre section réutilisable sur notre bouton. Et nous allons juste définir ceci pour afficher inline-block, Enregistrer que ces boutons ne sont plus en cours. Les clips sont les Basu. Ok, donc je veux aussi réduire le rembourrage sur ces produits parce que cet espace est un peu trop grand pour le soldat mobile. Retour à notre requête média. Dans notre produit sélectionne beaucoup de propriété de mise et le rembourrage est actuellement réglé à un 100 pixels sur le dessus et 0 sur le côté. Donc, réduisons cela à 30 pixels sur le haut et 0 sur le côté. Et nous avons maintenant un espace plus raisonnable entre chaque produit, mais nous avons encore beaucoup d'espace en haut du premier produit. Parce que si nous revenons à notre CSS initial, nous utilisons ce premier pseudo-sélecteur enfant pour ajouter du remplissage au premier produit de la liste, et c'est actuellement réglé sur 20 pixels. Donc je vais juste copier cette règle. Collera ci-dessous, sont productifs dans la requête média. Et nous allons réduire ça à 0. Et je vais sauver ça. Et nous avons maintenant un peu moins d'espace en haut des produits de bureau. Ok, donc je suis heureux avec ça maintenant je pense que ça a l'air plutôt bon sur mobile. Il semble toujours bien sur le bureau aussi. 44. Ajouter une page à la page à propos (HTML et CSS): Ok, la dernière chose que je veux faire est d'ajouter une deuxième page à ce site. Donc, une page A propos à laquelle nous pouvons accéder en cliquant sur ce lien dans l'en-tête. Donc, je vais sauter à index.html, sauter à l'en-tête. Voici notre lien À propos qui se trouve dans l'en-tête. Je veux changer le brouillon de haine pour fondre sur le point HTML. Et ça va être notre page à propos. Donc je vais sauver ça. On va ouvrir la barre latérale. Ensuite, je vais faire un clic droit sur le fichier index.html. Cliquez sur Copier. Et je fais un clic droit et clique sur Coller. Et puis je vais renommer ce fichier est juste créé à environ point HTML. Si nous cliquons sur le lien à propos, nous pouvons voir dans la barre du navigateur, nous sommes maintenant sur A propos du point HTML. Nous sommes actuellement cette page est exactement la même que notre page d'accueil. Donc, passons à propos du point HTML. Ça va cacher la barre latérale. Je vais juste supprimer tout à l'intérieur de cet élément de section avec une classe de contrainte qui a actuellement tous ces produits. Donc, je vais juste sélectionner tout à l'intérieur, supprimer ça. Et au lieu de cela, je vais ajouter un article avec une classe de coût conceptuel. Ce sera une page de contenu. Je vais coller un peu de contenu là-dedans. Donc un autre, et je vais juste mettre de l'orange là-dedans. Beaucoup de balises de paragraphe avec quelques Lorem Ipsum. Il suffit d'activer l'habillage de mot en allant à Afficher bascule l'habillage de mot. Je vais juste copier ce paragraphe. Collez un peu plus dans. Peut-être qu'en bas, nous pourrions avoir un de ces boutons blancs qui renvoie à la page d'accueil. Donc, beaucoup, une, une balise avec une classe de bouton, une classe de Watson, pointillé blanc entrer dans l'attribut chaleur href. On veut juste rentrer à la maison. Donc, pour ce faire, nous pouvons simplement aller à la barre oblique du chemin vers l'avant. Et puis pour les textes dans le livre et je vais juste mettre rentrer à la maison. Et je vais sauver ça. Et nous avons maintenant About page peut revenir à la page d'accueil. Cependant, ce texte est un peu trop petit et donc je pourrais juste détourner les textiles des produits vers le haut. Donc je vais revenir à style.css, sauter à nos produits, textiles. Donc, nous voici les textes de produits H1, H2, et payer. Nous venons de créer un article avec une classe de contenu ici. Donc, ce que nous pourrions faire ici est d'ajouter un sélecteur supplémentaire à chacune de ces règles. Donc, ainsi que les textes de produits h, Eh bien, nous pourrions ajouter un contenu un. Et puis sur celui-ci, nous pourrions faire point page de contenu deux. Et puis concept de point virgule pour voler ces styles ou revenir à la page À propos. Sauvegardez ça. Et nous avons maintenant un bon gros texte. Cependant, nous allons également devoir mettre à jour nos requêtes média parce que ce texte est un peu trop volumineux pour un mobile. Donc, je vais sauter à notre requête médiatique. Et encore une fois détourner ces styles ici. Donc, après ce produit H1, nous allons commencer le contenu de point H1. Et puis sur cette console à un point page deux. Et puis sur ce paiement de contenu à un point dira que le texte semble beau et petit et mobile. Génial et grand sur le bureau. 45. Ajouter un doctype (HTML): Il y a une chose importante que j'ai oublié de faire au début de cette vidéo, qui est d'ajouter une déclaration DOCTYPE en haut de nos pages HTML. Donc, si vous ouvrez juste index.html en haut de ce fichier, nous devons ajouter un doctype. Doctype indique au navigateur quel type de page HTML il s'agit, où en utilisant HTML5 ici. Nous devons donc ajouter HTML5 doctype en haut de chacune de nos pages. Donc, pour ce faire, nous ajoutons juste le crochet d'angle gauche, puis le point d'exclamation et le DOCTYPE en majuscules, puis un espace, puis HTML en minuscules, puis un crochet d'angle de fermeture. Et je vais sauver ça. Je vais également copier ceci et ouvrir environ aucun HTML et l'ajouter en haut de ce fichier ainsi et enregistrer cela. Et cela a causé un léger problème avec notre en-tête. Nous avons plus d'espace au fond de notre tête et à l'extérieur. Et c'est parce que nous avons cette image ici. Par défaut en HTML5, les images sont des éléments en ligne qui ont un peu d'espace en bas d'elles. Donc, nous pouvons corriger cela en définissant cette image sur un élément de bloc avec la propriété d'affichage. Donc, si vous allez simplement à Assets, css, style.css, faites défiler vers le bas jusqu'aux styles d'en-tête et vous pouvez voir où cibler cette image ici, où nous définissons sa largeur. Et nous voulons juste ajouter une nouvelle règle ici, afficher le début de ne pas bloquer, et je vais le sauvegarder. L' en-tête est maintenant corrigé.