Créez 3 projets avec HTML et CSS !

1. Bienvenue et ce que nous allons construire.: Bienvenue pour apprendre HTML et CSS en construisant trois projets. m'appelle Chris, et je suis excité d'être votre instructeur pour ce cours. Je vous guiderai à travers le processus, étape par étape, de construire des projets de site Web gratuits et réels, chacun s'appuyant sur ce que vous avez appris dans le dernier. Ce sera un moyen amusant et pratique pour tous ceux qui cherchent à apprendre à construire des sites Web. Tout d'abord, nous commencerons par créer un site Web basé sur les recettes. Ce sera un site web statique, nous allons vous présenter les bases du HTML et du CSS. Vous apprendrez comment créer la structure de fichier et de dossier de base, comment créer une page d'index de base. Ensuite, comment créer toutes les sections du site Web, telles que l'en-tête, la section corps et le pied de page. Nous utiliserons ensuite CSS pour styliser un site web ainsi pour la mise en page et le positionnement de tous les éléments, tels que le positionnement des images et aussi le texte, et l'ajout des images d'arrière-plan. Nous passerons ensuite à un site Web collégial, qui sera le deuxième projet. Ce sera un site Web entièrement réactif, qui signifie que le site aura fière allure sur les smartphones, ce qui signifie que le site aura fière allure sur les smartphones, tablettes ou ordinateurs, et répondra à la taille de l'écran sur lequel il est visualisé. Si vous réduisez le navigateur vers le bas, vous verrez que les deux divs, qui sont côte à côte, seront empilés l'un sur l' autre pour rendre le projet meilleur sur les petits appareils, et toutes les zones, telles que le logo et la navigation, tout répond à regarder en arrière sur un appareil de taille différente. Élargissons le navigateur de sauvegarde. Vous découvrirez également de nouveaux concepts, tels que les requêtes multimédias et les points d'arrêt, style de téléphone mobile, et même quelques techniques avancées plus modernes, comme la CSS Flexbox. Project 3 est un site web basé sur un hôtel, qui vous présentera le cadre bootstrap populaire des berceaux de Twitter. Maintenant, nous avons une bonne compréhension de la façon de créer des sites Web à partir de zéro après la construction des deux premiers projets. L' introduction du framework bootstrap accélérera vraiment votre temps de développement et vous permettra d'ajouter des fonctionnalités vraiment géniales à vos sites. À la fin de ce cours, vous aurez construit ces trois sites Web, qui donnera vraiment un coup de pouce à vos compétences en design web. L' étudiant idéal pour ce cours est quelqu'un de nouveau dans la construction sites Web ou quelqu'un avec un peu d'expérience, recherche d'un moyen structuré et basé sur des projets d'élargir ses connaissances. Il vous donnera une excellente base, si vous cherchez à construire des sites Web pour une carrière ou même si vous voulez simplement construire un site Web pour un usage personnel ou professionnel. Merci de votre intérêt, et j'ai hâte de vous accueillir à bord. 2. Matériel nécessaire pour ce cours: Pour travailler pour ce cours, nous n'avons pas besoin d'acheter un logiciel ou d'effectuer des achats supplémentaires. Tout ce dont nous avons besoin, c'est d'un navigateur web que vous utilisez probablement pour le moment pour ce cours. Je vais utiliser Google Chrome, mais vous pouvez utiliser n'importe quel navigateur moderne. En plus de cela, nous allons avoir besoin d'un logiciel pour écrire notre code. Je vais utiliser un programme appelé Visual Studio Code. Si vous effectuez une recherche dans un moteur de recherche, vous trouverez la page d'accueil, qui est disponible sur code.visualstudio.com. Si vous vous rendez ici, vous pouvez trouver plus d'informations si vous le souhaitez. Ou vous pouvez le télécharger pour votre système d'exploitation. C' est un téléchargement gratuit pour Mac, Windows et Linux. Allez-y et téléchargez l'installation appropriée pour votre machine. Je l'ai déjà téléchargé et ouvert sur la gauche. Allez-y et téléchargez-le, et je vous verrai dans la prochaine vidéo, où nous allons commencer à créer des fichiers et des dossiers pour notre premier projet. 3. Partagez votre travail sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude de suivre un cours juste pour le plaisir de reprendre un autre cours. Prenez le temps de traiter chaque leçon, revoir le contenu que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets et vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de vous éloigner de la classe. Vous pouvez même prendre du recul après avoir terminé le cours et revenir et apporter des modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. N'oubliez pas non plus de partager votre projet 2 ici sur Skillshare. Non seulement je vais y jeter un coup d'œil, mais cela inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous dans l'onglet Projet et ressources, où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 4. Structure de fichiers et de dossiers: Bienvenue de retour. Maintenant, à partir de la vidéo précédente, nous aurions dû télécharger avec succès Visual Studio Code ou un éditeur de texte de votre choix. J' ai ouvert le mien sur la gauche juste ici. Je vais commencer dans cette vidéo en créant un dossier de projet pour notre premier projet. Maintenant, pendant ce cours, nous allons créer trois projets distincts. Vous pouvez les enregistrer n'importe où sur votre ordinateur, peut aller dans un lecteur particulier, un emplacement particulier, tels que des documents, que je vais enregistrer le mien sur le bureau. Ces trois dossiers de projet pour notre projet peuvent même aller directement sur le bureau, mais pour garder les choses agréables et organisées, je vais créer un nouveau dossier et renommer ces projets. Si nous ouvrons ceci, ici, notre premier dossier de projet sera pour notre site de recettes. Créons un nouveau dossier ici appelé Mes recettes. Maintenant, lors de la création d'un dossier de projet de site Web comme celui-ci, il n'y a pas de structure stricte à la façon dont nous mettons en page nos fichiers et dossiers. Nous sommes libres de les organiser d'une manière ou d'une autre. Généralement, nous créons des sous-dossiers à l'intérieur ici pour stocker des choses comme nos fichiers JavaScript, nos images, nos feuilles de style. Vous pouvez généralement regrouper tout le contenu associé pour garder les choses agréables et organisées. Nous n'allons pas vraiment traiter avec JavaScript pendant ce cours, donc je ne vais pas créer de dossier JavaScript. De plus, pour ce projet, nous n'aurons qu'une seule feuille de style. Je ne vais pas les regrouper non plus, mais nous allons avoir affaire à plusieurs images dans ce projet. Fourni avec ce cours est un dossier d'images que vous pouvez utiliser, ou vous pouvez également utiliser vos propres images si vous préférez. J' ai ces images téléchargées et enregistrées sur le bureau ici. Je vais saisir ceci, et faire glisser ceci dans notre dossier de projet. Ici, nous avons toutes les images que nous allons utiliser pour ce projet. Ensuite, nous pouvons ouvrir cela dans Visual Studio Code. Nous avons également besoin d'autres fichiers que nous allons créer dans un instant, mais je vais les créer à l'intérieur de l'éditeur de texte. Ce que nous allons faire est d'attraper le dossier du projet My Recipes et, ensuite, déposer ceci dans Visual Studio Code. On voit tout de suite que, sur la gauche, on a une barre latérale, ce qui rend ça un peu plus grand. Ensuite, nous aurons tout le projet My Recipes ouvert. La première chose que nous allons faire est de créer un nouveau fichier HTML, qui va être notre page d'index. La page d'index est généralement le point d'entrée de la page principale de notre site Web. Si vous passez la souris sur la barre latérale, nous pouvons cliquer sur cette icône « Nouveau fichier » ou nous pouvons également faire un clic droit sur un « Nouveau fichier ». Cela s'appellerait l'index, et cela nécessite l'extension the.html car il s'agit d'une page HTML. Le second fichier sera pour nos feuilles de style, et c'est pour que nous puissions appliquer un peu de style et de mise en page à nos projets. Ce seront les Styles et, alors, celui-ci a l'extension the.css. Nous pouvons également les voir si nous ouvrons notre dossier de projet sur le bureau. Maintenant, à l'intérieur, à côté de nos images, nous voyons notre Index et notre Styles.css. Nous n'avons pas encore de contenu enregistré à l'intérieur de nos pages, mais nous pouvons faire un clic droit sur le nom du fichier, aller dans Copy Path. Ensuite, nous pouvons coller ceci comme un nouvel onglet de navigateur. Cela ouvrira notre projet à l'intérieur du navigateur. Bien sûr, nous n'avons pas encore de contenu à afficher dans cette page, mais nous allons corriger cela dans la prochaine vidéo où nous commencerons à créer notre structure HTML pour notre première page. 5. Structure HTML de base: Regardez à l'intérieur de notre page index.html que nous avons créée dans la dernière vidéo, et je vais me mettre au travail en ajoutant une structure à ce document HTML. Maintenant, tout le contenu qui se trouve à l'intérieur des pages HTML est généralement différent et en fonction du type de site Web que vous allez créer. Cependant, cependant, il existe une structure de base générale dont vous allez avoir besoin pour n'importe quelle page HTML. Pour commencer, nous devons ajouter une déclaration DOCTYPE, ce qui indique au navigateur exactement quel type de document il va lire. Nous le faisons en ajoutant nos crochets d'angle comme ceci, un point d'exclamation, puis nous ajoutons dans le DOCTYPE. Il s'agit d'un document HTML, nous ajoutons donc du HTML. Ensuite, puisque c'est HTML, nous allons envelopper tout le reste du contenu à l'intérieur de l'élément HTML. Comme beaucoup d'éléments en HTML, cela a une balise d'ouverture et aussi une balise de fermeture que nous pouvons voir avec cette barre oblique. Maintenant, tout le reste que nous ajoutons à ce document doit être placé à l'intérieur de ces balises HTML. Le prochain morceau de structure que nous ajouterons à ce document HTML est en divisant ceci en deux sections. Tout comme une personne, un document HTML a une tête et aussi un corps, alors ajoutons ceci. Nous avons la section de la tête, qui a les étiquettes d'ouverture et de fermeture, et ensuite nous avons aussi la section du corps. La différence entre ces deux sections est que la section en tête est généralement utilisée pour ajouter des informations sur nos sites Web, qui a le nom, les titres des pages, leurs descriptions, le contenu des moteurs de recherche, ainsi que des liens à d'autres pages. Donc, c'est plus comme des informations sur notre site Web, et généralement, rien que nous voyons à l'écran. La section du corps contient le contenu réel qui s'affichera à l'intérieur du navigateur. Donc, la section tête est pour des informations et des liens vers d'autres pages, et la section corps est ce que vous verrez réellement affiché dans le navigateur. Une autre chose que nous pouvons faire avec l'un de ces éléments est d'ajouter ce qu'on appelle un attribut. Attributs est quelques informations supplémentaires qui devraient passer dans la balise d'ouverture. Par exemple, avec un document HTML, nous voulons déclarer le type de langue que ce document achemine. Nous le faisons avec un attribut lang, qui est abrégé pour la langue. La mienne sera en anglais. Si vous écrivez le vôtre dans une autre langue, vous pouvez également faire une recherche pour les codes de langue HTML, et nous pouvons voir une liste complète avec ce lien juste ici. Si nous faisons défiler vers le bas, nous voyons une table de langue où nous pouvons choisir une langue particulière, puis choisir le code court que nous allons placer à l'intérieur de ces attributs de langue. N' hésitez pas à changer cela si vous le souhaitez, mais je vais maintenant passer à cette section en tête. Rappelez-vous, la section en tête contient des informations sur notre site, et la première chose que je vais placer à l'intérieur d'ici est le titre. Ce titre est le titre de la page de cette page particulière. Donc, si nous avons une page Contactez-nous, ce sera nous contacter. Si nous avions une page À propos de nous, ce serait à propos, et ainsi de suite. Puisque c'est la page d'accueil, je vais appeler ceci Mes recettes. Maintenant, si nous sauvegardons ceci et actualisons notre page Index, nous voyons maintenant le titre de la page affiché en haut du navigateur. Juste en dessous du titre, nous allons ajouter des informations supplémentaires sur notre site en utilisant les balises méta. Contrairement à des choses telles que notre titre, notre section de tête et le corps, cela n'a pas d'ouverture et de balise de fermeture. Nous n'avons qu'une balise d'ouverture et de fermeture juste comme ça lorsque nous voulons imbriquer du contenu à l'intérieur. Donc, le titre a ce texte à l'intérieur, la section tête a plusieurs morceaux de contenu à l'intérieur, mais pour nos balises meta, nous allons juste ajouter quelques attributs comme nous l'avons fait juste au-dessus. Ces attributs indiquent le type d'informations supplémentaires que nous voulons ajouter pour notre site. Ce premier sera l' ensemble particulier de caractères que nous voulons utiliser pour notre projet. Par caractères, nous entendons le type de lettres, chiffres et de symboles que nous voulons utiliser sur notre site Web. La norme HTML5 est UTF-8, et cela couvre presque tous les caractères et symboles disponibles dans le monde. Nous le faisons en ajoutant l'attribut de jeu de caractères et définissons cette valeur à UTF-8. Votre prochaine information dans une balise meta sera la balise viewport. Nous allons créer une nouvelle balise méta comme ci-dessus, puis donner à cela le nom de viewport. Cela va nous permettre de configurer notre page pour différentes tailles d'écran. La raison pour laquelle nous avons besoin de cette balise d'affichage est que les gens regardent nos sites Web sur plusieurs tailles d'écran, avec des moniteurs, mais nous devons également tenir compte de taille de la tablette et aussi des appareils de taille mobile. Lorsque nous faisons cela comme un deuxième attribut est en définissant le contenu, puis à l'intérieur des guillemets, nous définissons la largeur pour être égale à la largeur de l'appareil. Ce que nous faisons essentiellement ici, c'est que nous définissons la largeur de la page pour être égale à l'appareil sur lequel nous la regardons, et la séparons par des virgules. La prochaine que nous allons faire est de définir l'échelle initiale pour être égale à un. Il s'agit de l'échelle initiale ou du niveau de zoom initial lorsque notre page est chargée pour la première fois, et c'est vraiment important pour notre site de bien paraître sur tous les appareils d'écran. Si nous n'ajoutons pas cela, un utilisateur peut essayer de visiter notre site sur un appareil de taille mobile et cet appareil mobile peut essayer de prendre notre site de taille de bureau, puis effectuer un zoom arrière pour adapter tout le contenu sur le plus petit écran, ce qui se traduira par des choses comme notre texte semble vraiment petit. Nous ne voulons pas que ce zoom ou cette mise à l'échelle prenne effet puisque nous allons gérer l'aspect et la sensation de notre site sur toutes les tailles d'écran en ajoutant du CSS. Beaucoup de cela peut sembler déroutant pour commencer, mais rappelez-vous tout cela est essentiel pour n'importe quelle page HTML, que nous allons créer, donc vous serez beaucoup plus familier avec l'ajout de ceci. En plus de toutes ces informations supplémentaires sur notre site, nous pouvons également utiliser la section d'en-tête pour créer des liens vers d'autres pages également. Par exemple, nous avons le styles.css. Cela va contenir tout le style, toutes les couleurs, toute la mise en page, les tailles de police, et bien plus encore pour notre page HTML. Pour que cela prenne effet, nous devons lier à ce fichier, et nous le faisons avec l'élément lien. Encore une fois, cela contient juste les attributs à l'intérieur, donc nous n'avons pas de balise d'ouverture et de fermeture. La relation est une feuille de style, car c'est le type de fichier auquel nous lions. Ensuite, nous avons ce href, où nous disons cette page particulière où nous pouvons trouver cette feuille de style. Dans notre cas, cette feuille de style est à côté de notre page Index, donc tout ce que nous avons à faire est d'ajouter le nom du fichier, qui est styles.css. Si ce fichier particulier a été stocké à l'intérieur d'un dossier CSS, tout ce que nous avons à faire est d'ajouter le chemin du fichier comme celui-ci. C' est toutes les informations que je vais ajouter dans la section de la tête. A partir de maintenant, on va travailler à l'intérieur de la section du corps. Cette section du corps, comme je l'ai déjà mentionné, va contenir tout le contenu que nous voyons à l'écran. Par exemple, si nous voulons ajouter du texte, nous pouvons les ajouter dans l'élément p, qui est pour paragraphe. Maintenant, disons bonjour, disons ceci, rafraîchissez le navigateur, et tout ce contenu corporel sera alors affiché à l'intérieur du navigateur comme nous le voyons ici. 6. Ressources utiles: Lorsque vous construisez des sites Web à n'importe quel stade de votre carrière de développement, il va y avoir un point où vous devez jeter un oeil quelques ressources précieuses pour vous aider dans votre voyage. L' une de ces grandes ressources que j'utilise régulièrement est le site Web Mozilla Developer. Ceci est une ressource pour la plupart des technologies Web de base, telles que HTML, CSS, JavaScript, et aussi beaucoup d'autres choses telles que le développement de jeux, et a également quelques guides pour certaines technologies back-end utilisant Python, Express JS, et bien plus encore. Pour le moment cependant, nous allons juste nous concentrer sur HTML et CSS. Nous ne couvrirons pas vraiment JavaScript tout au long de ce cours, mais c'est probablement quelque chose sur lequel vous voulez vous concentrer après avoir appris HTML et CSS. Si nous examinons l'une de ces technologies, nous pouvons en savoir plus sur le contexte, sur ce qu'elle fait. Mais l'une des choses vraiment utiles est la référence des éléments HTML. Ici, nous pouvons jeter un oeil à tous les éléments disponibles que nous pouvons utiliser dans notre projet. Jusqu' à présent, nous ne sommes pas allés très loin avec notre projet, tout ce que nous avons ajouté est un texte simple, et nous les avons ajoutés à l'intérieur des éléments P. À titre d'exemple, si nous faisons défiler vers le bas et sélectionnons ceci, nous pouvons voir cela représente un paragraphe de texte, nous avons l'ouverture et les balises de fermeture avec le texte à l'intérieur. Nous pouvons savoir exactement comment utiliser l'un de ces éléments en cliquant dessus. Ceci est vraiment utile si vous êtes coincé à tout moment tout au long de ce cours, et aussi lorsque vous passez à vos propres projets aussi. En plus de cela, à l'intérieur des Technologies, si nous descendons à la CSS. Nous allons travailler beaucoup avec CSS dans ce projet, CSS est la façon dont nous pouvons ajouter du style, nous pouvons ajouter des couleurs, nous pouvons ajouter une mise en page, des animations, et bien plus encore. Il peut prendre notre HTML simple et le convertir en quelque chose de vraiment agréable et visuel. Encore une fois, vous pouvez lire et trouver petites informations ou vous pouvez passer par la référence CSS. Cela nous donnera beaucoup d'exemples de syntaxe que nous allons utiliser. Nous pouvons jeter un oeil à ces sélecteurs, ce qui est un moyen de sélectionner une partie de notre HTML à laquelle nous voulons ajouter un style. Mais nous allons appliquer beaucoup de ces techniques tout au long du cours. Ensuite, nous avons le site Web des écoles W3. C' est aussi une référence utile pour HTML, CSS et JavaScript, avec d'autres choses telles que certaines technologies côté serveur, certains langages de programmation, l'intelligence artificielle, beaucoup plus d'autres sujets. Encore une fois, pour ce cours, et lors du démarrage du HTML, seule la section CSS sera vraiment utile si vous voulez l'utiliser comme référence pour l' un des éléments ou même trouver des exemples de code aussi. C' est assez simple à utiliser. Par exemple, si nous ne savons pas comment ajouter une image, nous pouvons aller à la section images, où nous allons voir divers exemples sur lesquels nous pouvons cliquer, et nous pouvons jouer avec le code, ainsi que la sortie sur le côté. Jusqu' à ce que nous ayons du code, nous voulons également nous assurer que nous l'écrivons correctement. Une façon de le faire est d'utiliser un service de validation tel que le validateur W3. Si nous avons un site web en direct en ligne, nous pouvons ajouter l'adresse web juste ici. Nous n'avons pas encore publié aucun de nos sites sur un serveur en direct, donc une façon de le faire est de cliquer sur le validateur de téléchargement de fichiers, puis nous pouvons sélectionner nos pages HTML à partir de nos projets. Vérifie ça. Nous pouvons voir que cela a fini vérifier le document et nous n'avons pas d'erreurs dans cette page, bien que nous n'ayons pas ajouté beaucoup de contenu pour le moment. Ensuite, nous allons jeter un coup d'œil à quelques ressources utiles pour ajouter des images, des vidéos et aussi de l'audio à notre site. L' un d'entre eux est pixabay.com, qui contient des milliers d'images gratuites que nous pouvons utiliser sur nos sites Web. Nous pouvons faire une recherche, nous pouvons les filtrer par des photos, des illustrations, des vecteurs, des clips vidéo, et aussi des fichiers musicaux. C' est assez simple à utiliser, nous avons juste besoin de cliquer sur l'une de ces photos que nous aimons, puis nous pouvons cliquer sur le « Téléchargement gratuit ». Vous n'avez pas besoin de vous inscrire sauf si vous voulez utiliser l'une des grandes images, c'est gratuit. Souvent, nous n'avons pas besoin d'ajouter des attributions à l'auteur, bien que cela soit apprécié. En outre, si vous avez des images que vous voulez télécharger et contribuer, vous pouvez aussi le faire. En plus de cela, nous avons également unsplash.com, qui est un autre site populaire pour la photographie de stock. Encore une fois, cela a des milliers d'images de haute qualité que vous pouvez utiliser gratuitement, et si nous cliquons sur ce lien juste ici, nous pouvons voir ici que les photos ont une licence d'utilisation gratuite pour des projets commerciaux et non commerciaux. Nous n'avons pas besoin de demander la permission pour l'utiliser dans nos projets, bien que l'attribution soit bien sûr appréciée. La prochaine ressource que nous allons jeter un oeil est caniuse.com. C' est un site vraiment, vraiment utile pour vérifier si une fonctionnalité est disponible dans un certain navigateur. fur et à mesure de ce cours, nous allons écrire beaucoup de HTML et aussi beaucoup de CSS aussi. Pour ce CSS, nous voulons nous assurer qu'il ressemble le même sur tous les navigateurs de nos utilisateurs. Par exemple, nous pouvons être en mesure d'utiliser les dernières fonctionnalités CSS dans nos propres projets, et cela peut paraître étonnant sur notre navigateur à jour. Mais nous devons également tenir compte du fait que certains utilisateurs peuvent avoir des navigateurs plus anciens, surtout peut-être dans des choses comme les écoles ou certaines grandes entreprises qui ne mettent pas à jour leur navigateur aussi régulièrement. C' est simple à utiliser à partir de la page d'accueil, tout ce que nous avons à faire est de taper une fonctionnalité CSS, que vous voulez utiliser. Par exemple, si nous voulons utiliser la CSS Flexbox dans l'un de nos projets, nous pouvons taper ceci et nous pouvons savoir exactement quels navigateurs, et aussi quelles versions supportent la flexbox. Ici, nous pouvons voir qu'Internet Explorer n'a qu'un support partiel, bien que cela soit pris en charge dans le navigateur Edge plus moderne. Il est complètement bien à utiliser dans Firefox, Chrome, Safari, Opera, et aussi tous les navigateurs mobiles populaires aussi, dans toutes les dernières versions. Ce qui signifie que c'est assez sûr à utiliser dans notre projet. Ceci est vraiment utile pour vérifier et aussi savoir exactement quel type d'expérience nos utilisateurs auront s'ils utilisent un navigateur plus ancien. Ensuite, ainsi que quelques images et vidéos, nous pouvons aussi simplement ajouter quelques icônes simples. Ceci, le unicode-table.com est une ressource vraiment utile. Nous pouvons ajouter quelques icônes telles que des flèches, et nous pouvons vérifier à travers le catalogue de milliers de différents que nous pouvons choisir. Par exemple, si nous voulions une flèche droite, nous pourrions cliquer dessus. Nous pouvons les ajouter à l'intérieur de notre HTML avec le code HTML juste ici. Nous allons jeter un oeil sur la façon de faire cela dans notre projet. Ensuite, nous avons également une bibliothèque d'icônes dédiée, qui s'appelle Font Awesome. Bien sûr, il y a aussi beaucoup d'autres bibliothèques d'icônes disponibles aussi, mais Font Awesome est vraiment populaire. Il a également une version gratuite qui a beaucoup d'icônes différentes, et il y a aussi une version payante aussi si vous dépassez la bibliothèque gratuite. Comme vous pouvez vous y attendre, ce n'est qu'une poignée de ressources populaires, il y a des centaines, voire des milliers d'autres disponibles en ligne. Je suis sûr que vous en rencontrerez beaucoup sur votre parcours de développement. Mais pour l'instant, ce n'est qu'une poignée de ressources pour vous aider à démarrer. Ensuite, nous allons revenir dans notre projet, et commencer à la section d'en-tête. 7. Section d'en-tête HTML5: Actuellement, nous avons un site assez vide, nous avons juste ce texte de bonjour en haut, qui a été créé avec cet élément de paragraphe. Pour le reste de cette vidéo, nous ajouterons du contenu en créant notre section d'en-tête en haut de notre page. Pour voir exactement ce que nous allons créer, voici la version finale. La section d'en-tête sera cette section grise sur le haut et cela va être divisé en trois parties. Nous aurons les deux liens sur la gauche. Nous aurons le logo du site et aussi l'image au centre, puis quelques liens supplémentaires sur la droite. Pour créer ces trois sections, nous allons utiliser ce qu'on appelle un div. Un div est une section ou une division à l'intérieur de notre site Web où nous pouvons placer du contenu à l'intérieur. Pour en savoir plus à ce sujet, nous pouvons aller sur le site Web Mozilla Developer, que nous avons regardé dans la vidéo des ressources. Sous les technologies, nous pouvons soit aller au HTML, mais je vais faire une recherche pour div. Ici, nous avons le div, qui est l'élément de division de contenu à l'intérieur de notre section HTML. Il s'agit d'un conteneur générique. Ça n'a pas de signification particulière. Il est juste utilisé deux groupes de contenu. Nous pouvons voir ici, nous avons un div qui a l'ouverture et la balise de fermeture, et ensuite nous pouvons placer notre contenu à l'intérieur. Cet exemple particulier a une image et aussi un élément p pour certains textes. Nous l'utiliserons pour les trois sections et aussi pour certaines sections plus tard. Commençons, et la première chose que nous allons faire est juste de cliquer sur cette icône en haut, fermer notre barre latérale, puis nous allons déplacer ce texte bonjour à l'intérieur du corps, ainsi que des conteneurs tels que un div, qui est assez générique. Dans HTML version 5, nous avons également quelques éléments plus descriptifs, souvent appelés éléments sémantiques. Ces éléments sémantiques sont utilisés pour décrire le contenu qui est imbriqué à l'intérieur. L' un de ces éléments utiles que nous pouvons utiliser est les éléments d'en-tête. Cela a une ouverture et une balise de fermeture et nous pouvons placer à l'intérieur de tout le contenu lié à l'en-tête. Comme nous venons de le voir, nous allons utiliser l'élément div et tout le contenu de notre première section à gauche sera placé à l'intérieur de cette div. Lorsque vous utilisez Visual Studio Code, cela est également livré avec un plugin appelé Emmet. Emmet est utilisé pour accélérer notre code. Si nous tapons un div, puis appuyez sur « Entrée », nous pouvons voir que cela est automatiquement fermé comme suit avec la balise de fermeture, et il ajoute également les crochets autour de chaque section aussi. Donc, si vous voulez la pratique, vous pouvez soit taper ceci manuellement ou vous pouvez utiliser Emmet. Cela donne maintenant nos deux premières sections div et je vais créer la troisième, qui est pour nos liens sur la droite. Mais comment faire pour créer ces liens ? Si nous le voulions, nous pourrions aller assez simple et juste avoir les éléments p comme nous l'avons vu auparavant. Mais en général, quand nous avons plusieurs morceaux de texte comme celui-ci, c'est une bonne idée de placer dans une liste. Avec HTML, deux des types populaires de listes que nous pouvons utiliser est la liste ordonnée et la liste non ordonnée. Une liste ordonnée est un moyen de lister plusieurs éléments comme celui-ci, et ceux-ci sont classés par numéros. Cela aurait le numéro 1, le numéro 2, et continuerait pour chaque article. Liste non ordonnée d'autre part, au lieu de placer des numéros à côté de chaque élément de liste, il placera une puce vers la gauche. Actuellement, nous ne voyons pas cela pour nos articles juste ici puisque nous avons supprimé ceci avec ce CSS. Voyant comment utiliser une liste, nous allons revenir sur le site Web de Mozilla et faire une recherche pour la liste non ordonnée, qui est la balise ul. C' est celui dont nous avons besoin ici. Comme beaucoup d'éléments, nous avons la liste non ordonnée qui est le wrapper, puis imbriquée à l'intérieur, nous avons chacun de nos éléments entourés dans cette balise li. Cet exemple particulier est un peu plus complexe. Il a également une autre liste non ordonnée imbriquée à l'intérieur de cet article de liste de fromage. Vous pouvez voir par l'exemple sur la droite, cela fournira une liste imbriquée non ordonnée. Mais tout ce qui nous intéresse pour notre exemple est cette seule liste non ordonnée, qui contiendra nos articles de liste. Revenons au projet, nous allons créer notre première section à l'intérieur de notre première div. Créez la liste non ordonnée pour le wrapper, puis placez à l'intérieur de tous les éléments de notre liste. Le premier, comme nous allons le voir ici, est populaire, et le second est ce qui est nouveau. Nous allons donc créer l'élément de liste. Le texte de populaire. Ensuite, le second sera ce qui est nouveau. Enregistrez ceci, actualisez le navigateur, et il y a nos deux éléments de liste. Tout comme mentionné précédemment, puisque c'est une liste non ordonnée, nous verrons un point à côté de chacun d'entre eux, mais nous allons supprimer ces CSS bizarres très bientôt. Si cette page index.html n'est pas ouverte, n'oubliez pas que vous pouvez cliquer avec le bouton droit de la souris sur le nom de la page, copier le chemin d'accès et le coller dans l'onglet. Ou à la place, vous pouvez aller dans les projets, dans le dossier des recettes, puis double-cliquer sur la page Index. Sinon, si vous ne voulez pas continuer à actualiser ce navigateur après chacune des modifications enregistrées, vous pouvez utiliser une extension de serveur en direct. La façon de le faire à l'intérieur de Visual Studio Code est d'aller vers le bouton des extensions, puis de faire une recherche pour le serveur en direct. C' est un juste ici. Je l'ai déjà installé dans Visual Studio Code, mais si vous ne le faites pas et que vous voulez utiliser cette extension, vous devrez installer et activer en haut. Une fois cela fait, vous devrez peut-être redémarrer Visual Studio Code. Vous devriez alors avoir un bouton Go Live en bas. Cliquez dessus. Cela ouvrira alors la page à l'intérieur du navigateur, et maintenant chaque fois que nous apporterons une modification à l'un de nos sites, cela sera automatiquement mis à jour. Ensuite, nous allons passer à la section du milieu, qui comprend une image et aussi le titre de notre site. Pour cela, nous allons créer un lien vers l'une des images fournies avec ce cours, puis définir notre titre comme titre. Après notre premier div, sautez à l'intérieur de notre deuxième section div, puis nous ajoutons nos éléments de haut en bas. Le premier est notre image, qui est l'élément img, et une image est l'un des éléments qui n'a pas de balise de fermeture. C' est parce que nous n'imbriquons aucun contenu à l'intérieur. Tout ce que nous avons à faire, c'est d'utiliser ces attributs. Le premier attribut est la source, et c'est l'emplacement de notre image. Tout cela est relatif à notre page d'index actuelle. Actuellement, nous sommes à l'intérieur du index.html, et à côté de cela, nous avons notre dossier images. Étape 1 est d'aller dans les images, puis barre oblique avant, et nous pouvons maintenant choisir l'une des images à l'intérieur de ce dossier. Ce dont nous avons besoin, c'est le chefs-hat, et c'est un fichier svg, et c'est vraiment utile pour mettre à l'échelle nos images de haut en bas sans perdre de qualité. Après cela, nous avons également le texte alt, qui est un texte alternatif à afficher si cette image ne peut pas être affichée, ce qui est utile pour plusieurs raisons. Par exemple, si l'image ne peut pas être téléchargée pour quelque raison que ce soit, ce texte alternatif s'affichera en place. Aussi pour l'accessibilité, si les gens utilisent un lecteur d'écran plutôt qu'un navigateur traditionnel, ce texte alternatif sera lu en place, alors assurez-vous que ce texte est descriptif. Je vais dire Chefs-chapeau logo, fermer la barre latérale, et c'est sauver et alt au navigateur. Il y a là où le chefs-chapeau apparaît maintenant. Maintenant, pour le moment, ne vous inquiétez pas du positionnement et de la mise en page. Nous allons tout mettre en place en un peu quand nous passerons à notre feuille de style. Ensuite, juste après notre image, juste en dessous, mais toujours dans notre section div, nous allons maintenant utiliser un titre de niveau 1. Ceci est le h1, et avec HTML, nous pouvons ajouter des en-têtes du niveau 1 jusqu'au niveau 6. H1 étant la plus précieuse d'une rubrique la plus importante de notre site, nous ne devrions utiliser celle-ci que sur notre page, jusqu'à h6, qui est la tête la moins importante pour notre site. Personnellement, le plus souvent, j'utilise h1 à h4, mais c'est totalement à vous de décider. A l'intérieur, le titre de mes recettes, sauvegardez ceci, et il y a le titre de notre site à l'intérieur de cette section. La dernière section de cet en-tête est tout comme la première section. Sur la droite, nous avons deux liens supplémentaires. Ceci est pour soumettre la recette et aussi les idées de repas. Vous devriez déjà savoir comment le faire à partir de la première section, aller dans la troisième div en bas, créer notre liste non ordonnée, notre élément de liste. Le premier était de soumettre la recette, le deuxième élément de la liste était pour les idées de repas. Donnez ceci une sauvegarde et vérifiez cela dans le navigateur. Actuellement, en reconnaissant ces puces sur la gauche, que nous allons supprimer dans notre CSS. Si nous regardons la version finale, nous voyons que nous avons une petite puce entre chacune de ces sections. Ceci est juste pour placer un séparateur entre ces deux éléments de liste, et la façon dont nous pouvons les ajouter est en utilisant une entité HTML. À partir des ressources vidéo, nous avons regardé un site Web appelé unicodetable.com. Ce gars était une liste de beaucoup d'icônes différentes telles que des flèches, comme du texte, des emojis, et l'une de ces entités est ce point. Pour voir cela, nous pouvons passer à notre table unicode. Faisons une recherche de point, et c'est celui que nous allons utiliser en haut. C' est un point qui est placé verticalement au centre. Prenez le code HTML, incluez l'esperluette au début et le point-virgule à la fin. Allez à notre liste, puis entre nos deux premiers liens, nous allons placer ceci à l'intérieur d'un élément span. Un élément span est à peu près juste un conteneur générique de base. Nous pouvons placer à l'intérieur de tout ce que nous voulons comme du texte ou même ces entités HTML. Une travée tombe également dans ce qu'on appelle un élément en ligne. Un élément en ligne prendra naturellement de la place dans le navigateur à travers la page. Cela lui donne de l'espace pour le faire. Si ce n'est pas le cas, il passerait à la ligne suivante. C' est le contraire de quelque chose comme un div, qui est ce qu'on appelle un élément de niveau bloc. Cela signifie que, quelle que soit la taille du contenu, il tomberait naturellement sur sa propre ligne. Nous pouvons voir cela si nous regardons notre première section, puis la deuxième section est sur sa propre ligne, et la même chose pour la troisième section en bas. Juste avant de terminer cela, nous ajouterons également ces points à la troisième section en bas. Placez dans notre espace, placez dans le code de l'entité, et notre point apparaît dans nos deux sections. Bien. Ceci est maintenant le HTML complété pour notre section d'en-tête. Cela n'a pas l'air trop grand pour le moment, mais tout cela sera corrigé quand nous reviendrons à la section de style. Mais juste avant d'ajouter notre style et notre mise en page à cette section, dans la prochaine vidéo, nous allons jeter un oeil sur la façon dont nous pouvons ajouter quelques pages supplémentaires et convertir également nos éléments de liste en liens. 8. Liens et pages supplémentaires: Sur cette version finale de notre projet, si nous survolons l'un de ces éléments de liste, nous pouvons également cliquer sur ceux-ci et être redirigé vers une autre page. Maintenant, chacune de ces pages vers lesquelles nous allons lier n'a pas de contenu particulier. Mais nous pouvons voir qu'il s'agit d'une page de recettes populaires. Nous avons le Quoi de neuf, nous avons la page Soumettre la recette, ainsi que les idées de repas aussi. Mais actuellement, si nous allons à notre version juste ici, nous ne pouvons pas cliquer sur l'un de ces éléments de liste. Pour ce faire, nous devons transformer chacun de nos éléments de liste en un lien. Un lien ou un lien hypertexte est créé en HTML en enveloppant notre section dans l'élément a de sur le site Web Mozilla, nous pouvons voir dans l'exemple, nous avons une liste non ordonnée. Cela a quelques éléments de liste juste à l'intérieur, tout comme nous l'avons dans notre projet, mais la différence est à l'intérieur de cet élément de liste, nous avons également imbriqué à l'intérieur d'un élément. Cet élément a également cet attribut href. C' est la clé pour créer un lien parce que nous devons dire au navigateur exactement où nous voulons lier. Passons à notre projet et répliquons ceci à l'intérieur de notre en-tête. Tout d'abord, nous devons découper le texte de l'intérieur de l'élément de liste, puis créer un élément. Il ajoutera automatiquement l'attribut href. Puisque cela est nécessaire à l'intérieur de la balise d'ouverture et de fermeture des éléments, nous pouvons ajouter à l'intérieur du texte populaire et cela s'affichera à l'intérieur du navigateur. Maintenant, pour le href, nous pouvons ajouter n'importe quel lien à l'intérieur d'ici que nous voulons changer comme lien vers un site Web, disons Wikipédia, et par défaut, un lien apparaîtra souligné et avec une couleur différente. Nous pouvons également survoler cela et le curseur changera pour être un pointeur. Lorsque nous cliquons dessus, il est maintenant lié à notre site externe. Retournons en arrière. Mais bien sûr, nous ne voulons pas lier à Wikipédia. Nous voulons créer un lien vers certaines pages de notre site. Actuellement, si nous ouvrons la barre latérale, nous n'avons actuellement qu'une seule page d'index. Ce que nous devons faire à côté de notre index.html est de créer de nouvelles pages HTML vers lesquelles lier. Cliquez sur le nouveau bouton « Fichier ». Je vais créer un lien pour chacune de ces quatre pages. Le premier, nous pouvons lui donner n'importe quel nom de notre choix. Cela va être pour la page populaire, et cela doit avoir l'extension HTML point. Nous avons aussi besoin de trois autres. Le suivant est pour new.html. Le numéro trois est pour le meal-ideas.html. La dernière est de soumettre notre recette. Donnons à cela un nom de submit.html. Maintenant, nous avons quelques pages différentes lien vers. Assurez-vous simplement que toutes ces pages sont à côté de la page d'index et non imbriquées à l'intérieur du dossier images ou de tout autre dossier. Vous pouvez aller de l'avant et créer autant de contenu dans n'importe laquelle de ces pages que vous voulez. Mais pour l'instant cependant, je vais juste ajouter du texte simple afin que nous puissions voir quelle page a été chargée dans le navigateur. Pour la page Soumettre, nous allons simplement ajouter du texte simple, mais nous allons d'abord ajouter la structure HTML de base. Vous pouvez aller de l'avant et ajouter toute la même structure que nous avons utilisée à l'intérieur de cette page d'index. Vous pouvez taper tout cela manuellement, ou si vous utilisez Visual Studio Code, encore une fois, nous pouvons utiliser le raccourci Emmet. Pour ce faire, nous tapons html:5, appuyez sur « Entrée ». Cela sera créé pour nous. Tout ce que nous avons à faire, c'est de changer le titre du document. s'agit de Soumettre une recette. Ensuite, à l'intérieur du corps, ajoutez du texte dans l'élément p, juste pour que nous puissions voir quelle page a été chargée. Je dirai, Soumettre la page de recette. Enregistrez ce fichier avec Commande ou Contrôle S. Allons maintenant dans Ideas de repas. Encore une fois, html:5, appuyez sur « Entrée ». Changer le titre, ajouter notre texte. Enregistrez ce fichier, puis le bouton Nouveau, qui correspond à notre page Quoi de neuf, ajoutez la structure de base, le titre et du texte, donc la page Quoi de neuf. Enregistrez ceci et puis notre dernier, qui est le popular.html. Le titre du document des recettes populaires, puis le texte. Enregistrez ceci et revenez maintenant à notre index.html. Maintenant, nous avons quatre pages différentes vers lesquelles créer un lien. Jusqu' à nos huit éléments et à l'intérieur du href. Puisque ces pages sont à côté de notre page d'index, nous pouvons simplement taper le nom, et dans ce cas, c'est le popular.html. Ensuite, nous avons Quoi de neuf, mettez-le à l'élément a. La page pour cela était le new.html. Ensuite, entre la balise d'ouverture et de fermeture, collez le texte. Allons-y, et on va le faire deux fois de plus. Le suivant était Submit Recipe, retirez ceci. Placez dans notre lien, qui va pointer vers submit.html, ajoutez dans notre texte. Enfin, nous avons les idées de repas. Celui-ci est meal-ideas.html, collez dans le texte et enregistrez ce fichier. Vers le navigateur. Nous avons maintenant quatre liens à l'intérieur d'ici. Essayons le populaire. Celui-ci maintenant bien lié, popular.html. Ensuite, Quoi de neuf, nous pouvons voir que c'est bien. Soumettre Recette, puis enfin les Idées de repas. La dernière chose que je vais faire est également de lier ce titre de recettes juste ici de retour à notre page d'index. Pour ce faire, nous allons mettre notre tête de niveau 1 dans Command ou Control X, ajouter dans notre lien. Cela va pointer vers le index.html, collez-le dans notre tête de niveau un dans, cliquez dessus. Cela va maintenant renvoyer à notre page d'index. Si nous le voulions, nous pourrions prendre notre section d'en-tête. Soulignons tout cela et copions avec Commande ou Contrôle C, allez à la page populaire, et nous pourrions également ajouter ceci à l'intérieur de chacune de nos autres pages. Si nous le collons, cliquez sur le lien « Populaire ». Nous voyons maintenant aussi cet en-tête à l'intérieur d'ici. Cliquez sur « Mes recettes ». Cela nous ramènera ensuite à notre page d'accueil. Comme mentionné précédemment, vous pouvez parcourir chacune de ces pages supplémentaires et également ajouter plus de contenu si vous le souhaitez. Mais ensuite, nous allons passer à rendre cet en-tête beaucoup plus agréable en ajoutant du CSS. 9. Styliser l'en-tête: Maintenant, nous avons ajouté du HTML à notre page et en particulier, cette section d'en-tête en haut. Nous allons maintenant passer à l'ajout de CSS pour ajouter du style et de la mise en page à cette section d'en-tête. Si nous regardons la version finale juste ici, ce sera la section en haut sur laquelle nous allons travailler. À la fin de cette leçon, notre section d'en-tête devrait ressembler à ceci. Pour ce faire, nous allons changer la mise en page de nos sections div libres pour parcourir la page plutôt que d'être empilées les unes sur les autres comme nous l'avons actuellement. Pour commencer, nous allons passer à notre styles.css que nous avons déjà créé, et nous avons déjà lié cela à notre page d'index. Nous ne voulons pas lier juste ici, donc ce que nous devons faire est de cibler l'un de ces sélecteurs dans la section du corps. Si nous voulons cibler la section d'en-tête, nous pouvons, la div, les listes, les éléments individuels de la liste, nous pouvons cibler n'importe quoi sur cette page. Mais d'abord, nous allons commencer par l'élément très externe, qui est cet élément HTML juste ici. Une façon de cibler l'un de ces éléments est de l'écrire exactement comme nous le faisons en HTML. Puis nous avons ouvert les accolades comme ça. Ensuite, toutes les règles de style que nous appliquons entre les deux ici, s' appliqueront à notre HTML. La première chose que nous allons faire est de définir une couleur d'arrière-plan. Cette couleur d'arrière-plan va s'appliquer au document complet. Je vais garder cela simple et définir ceci pour être une couleur blanche. Si nous donnons un mot à dire à ce fichier, nous ne devrions pas vraiment voir de changements dans le navigateur, car c'est déjà une couleur blanche. Mais c'est la couleur de fond que nous pouvons voir sur la gauche, sur le côté droit. C' est tout blanc aussi, mais la différence est au centre. Nous allons maintenant récupérer tout le contenu HTML contenu dans la section du corps. Ensuite, changez la couleur de la section. Rappelez-vous que cette section de corps était imbriquée à l'intérieur, donc cela sera assis sur un fond blanc. Ceci ci-dessous, sur la section du corps. Puis à l'intérieur ici, si nous définissons ensuite la couleur d'arrière-plan pour être une couleur différente, disons ceci, tout au navigateur et rafraîchir. Mais maintenant voir le corps a une couleur d'arrière-plan différente, plupart allé à déclencher le serveur en direct en cliquant sur « Go Live », fermer cette première version vers le bas. Cela va juste nous sauver rafraîchir le navigateur après chaque changement. En plus de ces couleurs que vous avez saturées ici, nous pouvons également utiliser un code de couleur différent. Pour ce faire, si nous allons sur Google et faisons une recherche pour HTML Color Sélecteur, nous avons différentes options que nous pouvons utiliser pour définir une couleur. Nous pouvons soit utiliser ce sélecteur de couleurs qui apparaît juste ici, soit il y en a aussi un bon sur les sites Web de W3Schools. Les valeurs sont terminées sur la droite, qui commencent par ce hachage. Ce sont des codes à six chiffres qui composent ce qu'on appelle une valeur hexadécimale. Nous pouvons sélectionner n'importe quelle couleur, comme ce bleu. Nous pouvons alors voir la valeur Hex en haut. Nous pouvons également voir une couleur RVB, qui est le rouge, le vert et les valeurs bleues toutes mélangées. Également une valeur HSL, qui est la teinte, la saturation et la légèreté. Ce sont toutes des valeurs CSS valides. Mais pour cette couleur, je vais m'en tenir à la valeur Hex. Le hachage et le volume que je vais utiliser seront ede6e6. Cela nous donne la couleur de fond différente. Si vous utilisez Visual Studio Code, vous pouvez également survoler cette couleur d'arrière-plan et nous pouvons sélectionner une valeur différente dans ce sélecteur de couleurs. En haut, nous pouvons voir qu'il s'agit d'une valeur hexadécimale ou nous pouvons également cliquer dessus pour être pris à la valeur HSL, une valeur RGB, si vous préférez un format différent. Continuant avec le corps, la prochaine chose que nous voulons faire est de définir la famille de polices pour ce projet. La famille de polices est le style des textes que nous allons utiliser. Je vais chercher Arial. C' est une police assez simple que je vais sélectionner pour ce projet. Nous pouvons en sélectionner différents si vous préférez. C' est la première valeur de choix, puis séparée par une virgule, vous pouvez ajouter différentes valeurs que vous voulez ajouter. Si les familles de polices précédentes ne sont pas trouvées, la suivante est Helvetica, puis sans-empattement. Ce qui se passe ici, c'est que nous recherchons la police Arial si elle est disponible sur le système utilisateur. Si ce n'est pas le cas, il reviendra à l'Helvetica, et si celui-ci ne pouvait pas être trouvé même il retombera à une polices génériques sans empattement. En plus de cela, nous pouvons également définir la taille de police par défaut que vous souhaitez utiliser pour ce projet. Une fois que vous optez pour 18 pixels, nous pouvons changer cette valeur pour n'importe quelle valeur ou nous pouvons également remplacer cette valeur pour l'une de nos sections aussi. Ce n'est qu'un point de départ. Ensuite, le reste du contenu que nous voulons restreindre la largeur de toute cette section pour être une certaine valeur. Je vais aller pour 960 pixels pour cet exemple, qui est une valeur fixe qui ne changera pas. Si nous réduisons le navigateur, nous voyons cela est poussé hors du bord. Mais nous allons jeter un oeil au design responsive très bientôt. Nous voulons également que la section soit au milieu de la page. La façon dont nous pouvons le faire est d'appliquer une certaine marge. Marge est l'espace dans lequel apparaît en dehors d'un élément, donc tout ce que vous ajoutez à l'intérieur de la section du corps apparaîtra en dehors de cette section colorée. Donnons ça un coup de pouce. Si nous ajoutons 10 pixels, cela prendra effet sur les quatre côtés. Bien sûr, pour le moment, nous ne voulons pas cela parce qu' ils vont se battre les uns contre les autres. Nous avons des montants égaux en haut, en bas, et aussi à gauche et à droite. Ce que nous pouvons faire est d'ajouter quatre valeurs distinctes. Cela ira dans le sens des aiguilles d'une montre à partir de haut, à droite, en bas et à gauche. Du haut, nous allons changer ceci pour être 50 pixels, un droit, un bas et la gauche. Donc, si seulement 50 pixels vont maintenant s'appliquer au haut de la section du corps, mais ce que nous voulons faire comme la version finale est d'avoir aucune marge en haut et en bas, mais diviser tout l'espace également à gauche et à droite. La façon dont nous pouvons le faire est d'appliquer une marge zéro sur le haut, marge zéro sur le bas, et ensuite nous pouvons définir l'autre valeur pour la gauche et la droite, ce qui divisera l'espace de manière égale. Le haut, nous voulons zéro, le droit de l'auto, le zéro en bas, puis l'auto à gauche, et ces valeurs automatiques vont maintenant pousser cela au centre. Si nous le voulons, nous pouvons également profiter d'une version plus courte, qui consiste à appliquer deux valeurs. Le premier sera le haut et le bas, puis la deuxième valeur sera la gauche et la droite. Enregistrer cela entraînera exactement le même effet. Ensuite, nous allons cibler la section d'en-tête et les divs libres qui sont imbriqués à l'intérieur. Donc, cet en-tête enveloppe les trois de nos sections, alors nous avons un div qui suit chacune. La première chose à faire est de saisir cette section d'en-tête qui est le wrapper, puis nous allons définir le type d'affichage. Le type d'affichage nous permet de modifier l'affichage par défaut de chaque élément. Nous avons mentionné précédemment que certains éléments peuvent entrer dans une catégorie. Je vais mentionner le type de bloc et aussi le type en ligne. Si vous vous souvenez, bloc prendra toute la largeur de la page et commencera sur une nouvelle ligne, tout comme ces trois sections que nous avons déjà. En ligne, comme cela semble, nous placerons les éléments sur la page côte à côte s'il y a de l'espace pour le faire. Mais nous allons profiter d'un type d'affichage appelé flex. Cela rend l'utilisation de la flexbox CSS pour faciliter la mise en page de nos citrons. Si nous sauvegardons cela, nous verrons immédiatement que les trois sections div sont placées sur la page. Il le fait parce qu'en utilisant la flexbox, nous pouvons définir les contenus qui sont même disposés dans une direction horizontale ou verticale. Par défaut, la flexbox utilisera la direction de flexion sur la valeur de la ligne. Cela signifie que tous les éléments seront placés sur la page dans une rangée. Lorsque vous utilisez une langue de gauche à droite, tout comme l'anglais est, cela sera de gauche à droite. Nous pouvons également changer la direction de flexion pour être colonne. Cela empilera tous les éléments verticalement. Puisque la ligne est par défaut, nous pouvons laisser cette option et supposer que cela est déjà défini. Ensuite, nous allons restreindre la hauteur de cet en-tête à une certaine valeur. Nous pouvons le faire avec la haute propriété. Ensuite, je vais utiliser la valeur de 150 pixels. Ensuite, nous devons nous assurer que les trois sections sont espacées de manière égale. Nous voulons qu'ils aient tous la même valeur de largeur. Nous pouvons le faire en retournant dans notre feuille de style. Encore une fois, nous allons cibler l'en-tête. Mais cette fois, nous utilisons le symbole supérieur à, puis sélectionnez le div. Cela signifie que tous les styles que nous appliquons ici, ne s' appliqueront qu'à tous les éléments div qui suivent immédiatement notre en-tête. Nous pouvons voir si nous allons à la page d'index, nous avons notre en-tête. Puis merveilleux imbriqué à l'intérieur, nous avons cette section div. Nous avons aussi celui-ci à côté, puis notre troisième section. Le style s'appliquera à ces trois sections avec ce code. Puisque nous avons déjà la section d'en-tête qui est le parent défini pour utiliser la flexbox, ces éléments enfants qui sont imbriqués à l'intérieur peuvent également utiliser des valeurs flexibles. L' un d'entre eux est tout simplement flex. Si nous définissons la valeur à un, maintenant cette valeur flexible de un s'appliquera aux trois divs. Maintenant, cela signifie que ces trois sections auront la même quantité d'espace. Si nous devions le changer pour être l'une de nos valeurs qui est deux, nous aurons exactement le même effet car elles sont toutes les mêmes. Cependant, bien que la différence se produira si nous devions appliquer une valeur de flex différente à une section différente. Par exemple, si nous avons ciblé cette section de logo au milieu, puis placé une valeur flexible de deux, cela prendrait plus de deux fois plus d'espace disponible que cette section juste ici. Mais nous voulons qu'ils soient égaux, donc c'est bien pour l'instant. Après cela, nous allons également définir le text-align pour être au centre. Cela signifie que tous les textes contenus à l'intérieur de cette div seront centrés dans cette section. En regardant la version finale, nous voulons aussi que ces deux soient poussés vers le bas. Une façon de le faire, et comme nous faisons toujours usage de la flexbox avec les parents ici, nous ne pouvons pas utiliser une propriété appelée align-self. Juste après le texte aligné, ajoutez le sélecteur d'alignement auto, et nous avons les différentes valeurs que nous pouvons choisir. Maintenant, la valeur que nous allons ajouter ici s'appliquera verticalement. En effet, comme nous l'avons vu précédemment, la direction de flexion par défaut est la ligne. Ceci est à travers la page horizontalement. Align-self s'appliquera à l'opposé, qui est la direction verticale, également appelée axe transversal. Puisque nous travaillons verticalement, le style flex sera le haut, le centre sera au milieu, et l'extrémité flex sera vers le bas. Cela pousse maintenant ceux-ci vers le bas de notre div. Nous devons également les modifier pour être sur la page, mais nous y reviendrons dans un instant. Nous devons également faire passer ces liens à travers la page, et la façon dont nous pouvons le faire est de cibler le wrapper, qui est l'élément de liste. Tout comme avant lorsque nous définissons le type d'affichage de l'en-tête pour faire usage de flex-box, pour cela, nous allons changer le temps d'affichage par défaut pour tous les éléments de la liste soit la valeur de inline. Lorsque nous enregistrons ceci, nous verrons immédiatement que ceux-ci changent en un type d'affichage en ligne plutôt que d'être au-dessus de l'autre comme ils l'étaient auparavant. Ensuite, allons à cette section du milieu et nous allons rendre l'image un peu plus petite, alors prenez notre section d'en-tête. Ensuite, nous allons utiliser un sélecteur différent qui ressemble à ceci. Avant, nous avons mentionné que si nous utilisons cette flèche supérieure à, cela sélectionnera n'importe quel div qui suit immédiatement nos éléments d'en-tête. Nous ne pouvions pas faire exactement la même chose pour cette section parce que l'image n'est pas un canal direct de notre en-tête. Cette section d'en-tête ne contient que nos divs, donc ce que nous pouvons faire à la place est de laisser cela dehors et cela capturera n'importe quel élément d'image qui se trouve à l'intérieur de la section d'en-tête. Pour cela, nous allons limiter la taille de l'image d'en-tête à une largeur maximale de 100 pixels. Nous pouvons maintenant voir que l'image est maintenant à peu près la bonne taille, mais une partie de l'espacement et aussi la taille du titre du site pousse toujours cela hors du haut de la page. Plutôt que de le rendre plus petit, nous allons descendre à notre titre de niveau 1, qui est notre titre de site placé à l'intérieur de cette div du milieu, donc juste ici. Pour cette section, nous voulons, tout d'abord, supprimer l'espacement par défaut qui est juste en dessous. Si nous faisons un clic droit et aller à l'inspecteur, nous allons ouvrir les outils de développement, cliquez sur la flèche dans le coin. On peut voir la section orange en haut et en bas. Maintenant, si nous cliquons dessus et puis regardons sur la droite, puis à l'intérieur de la section des éléments, allez dans les styles. Ensuite, au bas, nous pouvons voir que nous avons une marge qui a été appliquée en haut et en bas. Le titre de niveau 1, ainsi que d'autres éléments, ont souvent une marge et un remplissage par défaut appliqués par le navigateur. Nous pouvons également remplacer cela en définissant nos propres valeurs de marge. Nous pouvons réinitialiser cela à zéro et nous pouvons voir que cela a maintenant été supprimé. Cependant, nous voulons appliquer un peu de marge sur le bas et aussi sur le haut, sorte que nous pouvons changer cela pour être dix pixels. Maintenant, nous avons supprimé l'espacement, nous avons presque l'image de retour sur la page. La prochaine chose que nous allons faire est de définir la taille de la police à 20 pixels. Cela réduira ensuite la taille de la police et laissera assez d'espace maintenant pour notre image. Ensuite, nous allons passer à cette section gauche et droite et styliser notre liste non ordonnée. Si vous remarquez et en particulier si nous allons dans les outils de développement, si nous cliquons sur l'inspecteur et puis survolons l'une des sections, nous pouvons voir que ces éléments de liste non ordonnés ne sont pas placés au centre de notre div. C' est parce que si nous sélectionnons notre liste non ordonnée, nous pouvons voir par la section verte sur la gauche, nous avons un rembourrage par défaut, et tout comme le titre de niveau 1 avec la section orange, nous avons aussi quelques marge appliquée aussi. Encore une fois, si nous cliquons dessus, nous pouvons passer au diagramme en bas à droite. On peut voir la taille des éléments au milieu, un rembourrage qui est appliqué sur la gauche, qui est actuellement 40 pixels, puis la marge qui est en haut et en bas. Ce que nous allons faire est, tout d'abord, définir la marge à une valeur de 10 pixels. Cela donnera alors le même espacement par rapport au bas que le titre. Ensuite, nous allons déplacer cette section de remplissage vert par défaut afin que nos liens soient placés au centre. Fais ça. Comme nous venons de le voir, ceci est appliqué à la liste non ordonnée. abord, nous allons définir la marge à 10 pixels en haut et en bas et cela devrait ensuite aligner cette marge avec notre titre. Nous allons définir zéro sur la gauche et la droite, puis supprimer tout remplissage par défaut avec une valeur de zéro. Ceci et revenons sur le navigateur, nous pouvons maintenant voir si nous survolons le remplissage, nous n'avons aucune valeur appliquée. La marge, ceci a maintenant été réduite à 10 pixels en haut et en bas, qui s'alignera ensuite avec notre titre. Ensuite, puisque tous ces éléments sont des liens, ceux-ci ont une couleur par défaut et ils ont également souligné ces éléments. Pour supprimer cela, nous devons sélectionner notre lien, qui est cet élément A qui entoure notre titre, ainsi que nos éléments de liste. Prends ça. Tout d'abord, pour supprimer le soulignement, nous devons définir la décoration du texte. Nous avons des options pour changer des choses comme la couleur, mais je vais juste supprimer cela avec la valeur de none. Ensuite, nous allons définir la couleur du texte. Je vais aussi installer ça dans la section du corps aussi. Cela s'applique également à d'autres éléments. La façon dont nous pouvons ajouter de la couleur à notre texte est simplement d'utiliser la propriété color. De là encore, nous voulons utiliser une valeur hexadécimale de 373535. Cela s'appliquera au reste du site lorsque nous créerons notre nouvel élément. Comme nous pouvons le voir, cela ne s'appliquera pas à nos liens, donc nous devons également l'appliquer à nos éléments A en faisant exactement la même chose. La valeur était 373535, sauf ceci. Ceci est maintenant appliqué à tous nos liens. La toute dernière pièce de style que je vais utiliser pour cet en-tête est de changer la couleur de ce lien lorsque la souris survolera. Tout comme nous le voyons dans la version finale ici lorsque nous survolons l'un de ces liens, nous obtenons un changement de couleur. Pour ce faire, nous devons appliquer une pseudo-classe à notre élément A. Tout comme ci-dessus, nous sélectionnons nos éléments, utilisons un deux-points et une pseudo-classe appliquera un style différent pour un état différent. Par état, nous entendons des choses comme si un lien a été visité ou cliqué sur, s'il n'a pas été visité, si la souris survole l'un de ces liens, ainsi que divers survolent aussi. Pour cela, nous allons utiliser l'état du survol, donc lorsque la souris survolera l'un de ces liens, mais je vais changer la couleur du texte. Encore une fois, nous sommes libres d'utiliser tous les types ou valeurs différents que vous voulez, mais pour cet exemple, je vais le mélanger et utiliser une valeur RVB où nous plaçons à l'intérieur de trois valeurs distinctes. Le premier est rouge, qui est 226, le vert de 74, et la valeur bleue de 74. Nous pouvons voir par l'aperçu que cela nous donne cette couleur rouge. Plus sur le projet, et notre hover prend effet pour chacun de ces liens. C' est maintenant tout le style appliqué à notre section d'en-tête. Si vous le souhaitez, vous pouvez jouer autour de ces valeurs et couleurs et changer les choses autour si vous le souhaitez. Ensuite, nous allons descendre la page et créer d'autres sections de contenu. 10. Zone du contenu principal: En descendant de cette section d'en-tête sur laquelle nous avons travaillé, nous allons maintenant ajouter le contenu juste en dessous. Si nous regardons la version finale juste à l'intérieur de l'autre onglet du navigateur, ce sera les deux sections que nous allons créer. La première section aura une image d'arrière-plan, puis aura un titre, et aussi une chance d'entrer un e-mail, puis de soumettre ceci. Bien sûr, pour le moment, ce ne sera pas parce que c'est juste du HTML, et vous auriez besoin d'un service back-end pour que cela fonctionne. Mais pour le moment, nous nous concentrons simplement sur le look et la sensation du site en utilisant HTML et CSS. En descendant, nous avons une deuxième section juste en dessous, qui a ces trois sections différentes. Cela nous donnera l'occasion de jeter un oeil à différentes façons de positionner les éléments. Nous allons superposer ce texte au-dessus de l'image. Jetez un oeil à certaines de ces techniques. Pour commencer, revenons à notre page index.html. Ensuite, si nous faisons défiler juste en dessous de la section d'en-tête et faisons de l'espace, assurez-vous que cela est toujours au-dessus du corps. Ceci, nous allons utiliser un nouvel élément appelé section. La section sera l'emballage de toute notre première section que vous voyez ici. Maintenant, nous pourrions ajouter une image tout comme nous avons utilisé dans l'en-tête apparaissent pour le logo en utilisant l'élément image. Mais pour cette image d'arrière-plan, je vais vous montrer une façon différente d'insérer une image. Nous allons jeter un oeil à cela dans la prochaine vidéo via CSS. Nous commencerons par nos titres et ce sera un titre de niveau 2, alors celui-ci sera de niveau 3. Le h2, puis appuyez sur Entrée, puis le texte des recettes hebdomadaires dans votre boîte de réception. Je vais enregistrer ce fichier, puis ouvrir le serveur en direct, comme nous l'avons vu dans les vidéos précédentes. Il y a nos textures ici, et il semble qu'il soit à l'intérieur de la section d'en-tête en raison de la couleur d'arrière-plan. Cependant, cela se trouve dans sa propre section en dessous de l'en-tête. Si nous prenons regarder notre style.css, puis faites défiler jusqu'à la section du corps, ici nous avons défini la couleur de fond pour le corps entier. Cela s'appliquera à l'ensemble de notre contenu, mais cela sera remplacé par une image d'arrière-plan dans la prochaine vidéo. Ensuite, le texte, qui va être Inscrivez-vous maintenant, dans la page d'index. Celui-ci va être un titre de niveau 3, mettre le texte de S'inscrire maintenant. Puisque nous utilisons un serveur en direct, cela sera automatiquement mis à jour lorsque nous enregistrons. Pour entrer l'entrée de l'utilisateur, nous allons utiliser un formulaire. Le formulaire est un moyen pour l'utilisateur d'interagir avec notre site Web et d'entrer quelques valeurs. Vous avez peut-être utilisé des formulaires dans le passé où vous vous inscrivez par courriel, vous pouvez ajouter votre nom, vous pouvez ajouter toutes sortes d'informations telles que des messages, votre date de naissance. Mais celui-ci va être simple, il va juste être une entrée e-mail, puis un bouton Soumettre. Pour ce faire, nous allons envelopper toute cette section dans un formulaire. Nous pouvons supprimer cet attribut d'action car nous ne l'enverrons pas pendant ce cours. Mais ce que nous allons faire, c'est placer dans une entrée. Si nous appuyons sur Entrée, le type par défaut qui nous est donné est l'entrée basée sur le texte. Au fur et à mesure que cela semble, c'est un moyen pour l'utilisateur d'entrer une valeur de texte, comme un nom d'utilisateur ou un nom complet. Nous allons utiliser une entrée par e-mail. Maintenant, ce type d'entrée que nous entrons, donnera au navigateur un indice du type de données que nous attendons à entrer. Il peut vérifier ces données et également fournir des messages à l'utilisateur si le type de données n'est pas valide. Par exemple, si nous devions changer cela un type de nombre et que l'utilisateur a entré du texte, le navigateur limiterait cela à accepter uniquement les nombres. En outre, comme il s'agit d'un type d'e-mail, lorsque l'utilisateur clique sur cette entrée, il peut également apparaître avec certains e-mails précédemment utilisés aussi. Aller à l'avant. L' attribut suivant que nous allons ajouter est l'aria-label. Une fois que vous avez défini ceci, pour être égal à l'e-mail. Cette étiquette aria est utilisée pour les dispositifs d'accessibilité tels que les lecteurs d'écran. Si nous regardons notre version finale, juste ici, vous voyez que nous n'avons pas d'étiquettes à côté de notre entrée. Souvent, avec les formulaires, vous verrez une étiquette comme celle-ci, et peut-être du texte comme celui-ci, qui apparaîtra à côté de l'entrée du formulaire. Maintenant, comme notre version finale, nous ne voulons pas afficher ce texte. Nous pourrions supprimer ce texte du navigateur en utilisant CSS. Cependant, il y a une raison pour laquelle nous ne voulons pas le faire, et c'est parce que si un utilisateur a une déficience visuelle et ne peut pas lire ces textures ici, et peut utiliser un appareil tel qu' un lecteur d'écran et leur indiquer quel type d'entrée cette est. Si nous devions supprimer cela, son étiquette aria-étiqueter cet élément pour indiquer au lecteur d' écran ou au dispositif d'accessibilité quel type d'entrée il s'agit. Après cela, l'attribut suivant est l'espace réservé, qui sera le texte qui est placé dans cette zone avant que l'utilisateur ajoute une valeur. Pour cela, nous allons dire Entrez votre email avec peu d'espace juste sur la gauche. Cet espace sera également reflété à l'intérieur de l'entrée. Ensuite, la deuxième entrée, qui a le type de soumission. Lorsque nous ajoutons un formulaire comme celui-ci, nous devons également ajouter un bouton Soumettre, qui va envoyer ce formulaire au serveur. Il y a un tout juste ici. Il s'agit d'une section assez simple et tous les visuels seront créés dans la prochaine vidéo en utilisant CSS, y compris cette image d'arrière-plan. Ensuite, nous descendons pour faire notre section qui juste en dessous. Pour cela, nous allons créer une nouvelle section en tant que wrapper. La section va avoir trois divs placés à l'intérieur avec chacune de ces images avec le texte. Le premier div, et chacun de ces divs va contenir deux éléments. Le premier est l'image que vous voulez utiliser pour l'arrière-plan, et la source est dans le dossier Images. Cette image est un vegatarian.jpg. Le texte alt. N'oubliez pas que cela sera affiché dans le navigateur si l'image n'a pas pu être chargée. Ça dira une section végétarienne. Ensuite, après cela, nous pouvons placer dans le texte. Maintenant, si nous le voulions, nous pourrions utiliser un élément p ou nous pourrions utiliser un titre. Pour cela, veut placer dans un titre de niveau 3, car ce sont des sections raisonnablement importantes. Le texte est végétarien. Enregistrez ceci, et vérifions cela dans le navigateur. Bien. C'est notre première section. Ne vous inquiétez pas à quoi cela ressemble pour le moment. Nous allons beaucoup améliorer cela dans la prochaine vidéo. La deuxième div, juste en dessous, c'est pour la section du milieu. C' est comme la section ci-dessus avec l'image et aussi un titre de niveau 3. Si vous le souhaitez, allez-y et mettez la vidéo en pause et donnez-nous un coup de pouce si vous vous sentez à l'aise. Sinon, je vais continuer avec les images. L' image cette fois est le quick.jpg. Le texte alt indiquera la section repas de cinq minutes. Le h3 est la plupart des repas de cinq minutes. Vérifiez que tout semble bien dans le navigateur. À l'heure actuelle, ceux-ci seront empilés les uns sur les autres plutôt que de parcourir la page. Parce que comme nous l'avons mentionné précédemment, un div est un élément de niveau bloc, ce qui signifie que chaque div commencera sur sa propre nouvelle ligne. Le troisième div, celui-ci est pour les options saines. Placer dans l'image. Encore une fois, dans le dossier Images, celui-ci est nommé healthy.jpg. Le texte alt, disons la section des options saines. Ensuite, le h3 en bas, ce qui est des options saines. Descendez. Il y a notre troisième section en bas. Remarquez comment tout ce contenu se trouve toujours dans la section du corps. Ce fond gris s'appliquera à l'ensemble de notre contenu. Ce n'est pas trop beau pour le moment, mais nous allons corriger cela dans la prochaine vidéo, où nous allons appliquer un peu de style dans nos deux nouvelles sections. 11. Styliser le contenu principal: Bienvenue de retour. Nous avons maintenant du contenu sur la page auquel nous devons appliquer du CSS. Non seulement votre style, mais nous devons aussi faire beaucoup de travail de mise en page. Nous devons placer tout ce texte au centre de la page. Nous devons ajouter une image de fond, un style général, puis dans cette section et juste en dessous avec nos images libres, ainsi que le texte, nous devons les placer sur la page et aussi trouver un moyen pour ce texte de remplacer chacune de ces images, comme nous l'avons fait dans la version finale, juste ici. Du haut, nous voulons commencer par la section d'inscription de dans le styles.css. Mais juste avant de le faire, nous avons besoin d'un moyen de saisir cette section afin que nous puissions appliquer un style. Tout ce contenu est placé à l'intérieur de cet élément de section. Mais si nous devions aller de l'avant et saisir la section avec un CSS, cela s'appliquerait également à la section ci-dessous aussi. Ce que nous allons faire ici est d'ajouter dans l'attribut id. Cet id est une valeur unique pour cet élément unique, donc lors de l'utilisation de l'identifiant, il est important que nous l'ajoutions une seule fois sur notre page. Donnez-lui un nom de « inscription ». Maintenant, nous avons un moyen de saisir cette section dans notre fichier CSS. Maintenant, avant d'ajouter nos sélecteurs comme ça, nous les avons ajoutés via le nom de la balise. Nous avons utilisé la liste a, non ordonnée, le h1. Mais quand nous sélectionnons un identifiant, nous utilisons le # suivi du nom de l'identifiant, qui était l'inscription. Puis à l'intérieur d'ici, nous pouvons placer dans toutes nos règles CSS, tout comme nous l'avons fait ci-dessus. La première chose que nous devons faire est d'ajouter une image d'arrière-plan. Maintenant, plus tôt, nous avons ajouté les valeurs d'arrière-plan. Maintenant précédemment, nous avons utilisé la propriété background-color juste ici. Il s'agit de définir la couleur de l'arrière-plan. Mais cette fois, ce que nous allons faire est de définir l'image de fond. Ensuite, nous pouvons le placer dans une URL, qui est l'emplacement du chemin du fichier de cette image. nôtre est dans le dossier images et l'image de cette section est le main.jpg. Nous pouvons voir immédiatement une fois que nous avons enregistré que cette image apparaît maintenant comme arrière-plan de cette section. Nous devons également ajouter à la propriété height pour le rendre un peu plus grand, et je vais définir le mien à 500 pixels. Cela nous donnera suffisamment d'espace pour couvrir tout le contenu. Ensuite, nous voulons également que ce texte et aussi l'entrée du formulaire soient placés au centre de notre image. Une façon simple de le faire est de faire usage de la flexbox CSS. Tout comme précédemment, nous définissons le type d'affichage flex et nous rappelons que la direction flex par défaut est la ligne, sorte que tout le contenu est placé sur la page. Cependant, nous voulons que ceux-ci soient empilés verticalement, afin que nous puissions changer la colonne flex-direction be. Maintenant, nous utilisons la flexbox, nous devons ajouter deux nouvelles propriétés pour placer ces éléments au centre. Le premier est align-items et la valeur est au centre. Ainsi, lorsque la direction flexible est définie sur colonne, les éléments de ligne les rendent centrés horizontalement sur la page. La prochaine chose que nous devons faire est exactement le contraire, qui est de centrer notre contenu verticalement. La façon dont nous pouvons le faire est d'utiliser justify-content et de les placer au centre. Ok, maintenant si on regarde de près, ils sont à peu près au centre, mais on dirait un peu plus d'espacement sur le haut plutôt que sur le bas. La raison pour cela sera de faire avec les paramètres par défaut du navigateur. Si nous allons dans l'Inspecter, cliquez dessus, et nous pouvons voir que le titre de niveau 2 a une marge par défaut en haut et en bas. De même avec le titre de niveau 3, nous n'en voyons aucun sur le formulaire. Donc, ce que nous voulons faire maintenant, c'est travailler avec nos deux rubriques. À partir de la page d'index, ces deux sections ont été placées dans le titre de niveau 2 et aussi dans le niveau 3. Nous pouvons cibler plusieurs éléments en les séparant par une virgule. Le h2 et aussi h3, tous les styles à l'intérieur ici s'appliqueront à ces deux titres. abord, la couleur de fond, et plus tôt nous avons mentionné qu'il existe différents types de couleurs que nous pouvons ajouter. Nous pouvons utiliser les valeurs RVB que nous avons ici, et nous pouvons également utiliser une valeur hexadécimale aussi. Nous pouvons également étendre ce type rgb pour être rgba. Jetons un coup d'oeil à la façon dont on peut faire ça juste ici. Si nous ajoutons rgb, nous pouvons ajouter nos valeurs régulières, je vais aller pour 46 pour le rouge, 39 pour le vert et aussi 39 pour le bleu. Si nous sauvegardons cela, comme prévu, nous voyons une couleur de fond sombre. Maintenant, ce fond est assez solide et il couvre l'image. Ce que nous allons faire, c'est appliquer un peu d'opacité. Cela signifie que nous pouvons appliquer un certain niveau de transparence. Pour ce faire, nous ajoutons le quatrième canal, qui est un, et c'est pour alpha, puis entre zéro et un, nous pouvons définir une valeur. Si nous définissons cela comme un, ce sera un contexte solide et sans transparence, tout comme nous l'avons déjà fait. Mais si nous changeons cela à zéro, ce sera totalement transparent. Je veux placer ceci est quelque part au milieu, comme 0.05, cela signifie que nous avons encore une légère couleur de fond. Nous voyons également une partie de l'image d'arrière-plan apparaissant également. Cela peut nous donner un bel effet. Pour le rendre plus grand, nous allons définir un remplissage de cinq pixels en haut et en bas et zéro à gauche et à droite. Pour appliquer un peu d'espace à l'intérieur de cet élément, faites l'arrière-plan un peu plus grand, en fait, nous l'ajouterons aussi sur le côté. Nous allons simplement supprimer la valeur zéro, donc s'applique aux quatre côtés. Ensuite, le texte, nous allons rendre cela plus léger en définissant la propriété de couleur. Celui-ci est une valeur RVB de deux 235, 222, puis 222. Nous donnant cette couleur plus claire que nous voyons ici. Si nous comparons ceci à la version finale juste ici, nous pouvons voir que le texte de ces deux titres est légèrement plus léger que notre version. C' est à cause du poids de la police. Je vais changer cela pour être une valeur plus légère de 300, donc ce n'est pas aussi gras que la valeur par défaut. Ensuite, le niveau 3 en-tête niveau, nous pouvons supprimer certaines des valeurs par défaut du navigateur. Rappelez-vous d'avant que nous avions une marge par défaut, et je vais supprimer cela. Maintenant, si nous fixons ceci à zéro, cela s'appliquerait à tous nos côtés, ou au lieu cela, si nous voulions seulement l'appliquer à un certain côté , nous pourrions aussi le placer en haut, en bas, la droite et la gauche, et cela ne s'appliquera qu'à un côté. En fait, il veut juste être un niveau 2. Donc, cela s'appliquera à la partie supérieure. Maintenant que la marge a été retirée de notre titre supérieur, cela placera cela plus au centre. En descendant, nous avons maintenant cette section de formulaire avec l'entrée et aussi le bouton Soumettre. Si nous le voulions, nous pourrions aller à notre page d'index et ajouter un identifiant unique ou même une entrée de liste de classes. Ou nous pourrions également cibler cette entrée par le type. La façon de le faire est d'ajouter l'entrée suivie des crochets. De là, nous pouvons définir le type d'entrée de l'e-mail. Maintenant, tous les styles que nous ajoutons ici ne s'appliqueront qu'à l'entrée de l'e-mail. abord, la largeur, nous pouvons définir ceci pour être une valeur fixe de 250 pixels, qui rendra cela un peu plus large. Je suis rembourrage, qui se souvient est l'espacement à l'intérieur de l'élément. Toutes les valeurs que nous ajoutons à l'intérieur d'ici le rendront plus grand ou plus large. Allons pour cinq pixels de tous les côtés. Le rayon de la frontière et cela nous donnera un arrondi sur les coins. Tout comme lors de l'utilisation de la marge et du remplissage, nous pourrions également ajouter plusieurs valeurs. Ou si nous voulions appliquer cela de tous les côtés, nous ajoutons simplement la valeur unique, la taille de police de 14 pixels. Cela remplacera la valeur de 18 pixels de la section du corps. Ensuite, après la taille de la police, nous pouvons également supprimer cette bordure qui entoure les quatre côtés. C' est assez simple à faire. Tout ce que nous avons à faire, c'est de définir la propriété de la frontière pour qu'elle soit égale à zéro. Nous pouvons faire de même pour notre bouton Soumettre. N' oubliez pas que cela a le type de soumission. Donc, tout comme les deux, cible toutes les entrées, puis réduire cela au type qui est égal à soumettre. Tout d'abord, nous allons définir une couleur d'arrière-plan. Pour cela, nous pourrions soit utiliser la couleur de fond, que nous avons utilisée ci-dessus, soit raccourcir cela pour simplement arrière-plan. Encore une fois, nous avons accès à toutes les mêmes couleurs comme RVB ou aussi aux valeurs hexadécimales aussi. Je vais aller pour CCCCCC, et c'est la couleur grise que nous voyons juste ici. Ensuite, un peu de rembourrage à l'intérieur. La première valeur s'appliquera au haut et au bas et nous voulons faire correspondre la valeur de remplissage de l'e-mail. Tout comme ça, nous allons définir ceci sur cinq pixels, puis pour le rendre plus large, nous allons ajouter 15 pixels à gauche et à droite. Aussi correspondre à l'e-mail, nous avons également besoin d'arrondir les coins et également enlever la bordure aussi. Tout comme au-dessus de la bordure aucun, puis la border-rayon, autour des coins, tous les cinq pixels, et aussi la même taille de police, qui est de 14 pixels. Bien. C'est maintenant notre section supérieure complète. Nous allons maintenant passer à ces images libres et aussi au texte. Pour cela, nous avons également besoin d'un moyen de sélectionner la section et si nous faisons défiler vers le bas jusqu'à cette section, nous pouvons également la placer dans un ID, que je vais appeler des idées. Lorsque vous utilisez CSS, il y a plusieurs façons que nous pouvons utiliser pour placer nos images sur la page, tout comme nous l' avons utilisé précédemment, nous allons utiliser la CSS Flexbox. Tout d'abord, nous allons cibler le conteneur qui avait l'ID des idées. Définissez le type d'affichage sur flex et comme mentionné précédemment, la direction de flexion par défaut est ligne, ce qui les placera horizontalement sur la page. Si nous regardons la version finale, nous voyons qu'il y a un espacement autour de toute cette section. Pour ce faire, nous pouvons utiliser une valeur de remplissage qui, rappelez-vous, apparaîtra à l'intérieur de la section. Ce sera rembourrage, et allons-y pour 15 pixels et il y a un peu d'espacement autour du bord. La prochaine chose que nous devons faire est de réduire la taille de ces images, donc encore une fois, prenez la section idée, puis nous allons sélectionner toutes les images qui sont placées dans cette section. À l'intérieur d'ici, si nous définissons la propriété width sur 100 %, toutes ces images seront soit mises à l'échelle vers le haut ou vers le bas pour s'adapter à l'intérieur du conteneur. Maintenant, nous devons placer toutes ces sections techniques au-dessus de chacune de ces images. Maintenant, cela peut être difficile à comprendre si vous n'avez pas utilisé les propriétés de position dans le passé, mais nous allons utiliser deux valeurs de position appelées relative et absolue. Tout d'abord, avant de faire cela, nous devons appliquer une classe à chacune de ces sections. Maintenant, comme ici où nous l'avons placé dans un ID, nous pourrions à la place placer une classe à l'intérieur de l'un de ces éléments. Une classe est également une autre façon de saisir l'un de ces éléments en utilisant notre CSS. Mais la différence entre une classe et un ID est qu'un ID ne doit être utilisé qu'une seule fois, mais nous pouvons utiliser une classe plusieurs fois. C' est parfait si nous voulons ajouter les mêmes valeurs CSS à plusieurs éléments. Pour cela, je vais donner à cela un nom de parent, je vais également l'appliquer à notre deuxième et aussi à notre troisième div aussi. Nous saisissons cela dans le CSS, allons à notre feuille de style, et plutôt que d'utiliser le hachage que nous avons vu pour notre ID, nous utilisons un point pour une classe. C' était relatif. Ensuite, nous allons définir la valeur de position CSS sur relative. Nous allons jeter un oeil à ce que cela signifie dans une seconde, mais pour l'instant, nous allons passer à ce titre. Le texte à l'intérieur de notre page d'index se trouve à l'intérieur de cette rubrique de niveau 3. Il y a plusieurs façons de saisir cela, nous pourrions cibler les idées, puis sélectionner le titre de niveau 3, ou nous pourrions également placer une classe à l'intérieur de chacune d'entre elles. Je vais aller pour l'option de classe et nommer ceci le titre de catégorie. Copiez ceci et placez-le également dans nos deux autres sections. Retour à la feuille de style. Nous allons utiliser le point et c'était le titre de la catégorie. Cette fois, nous allons définir la valeur de position pour être absolue. Maintenant, nous avons deux valeurs de position différentes juste ici, nous avons défini les images pour avoir la position de relative, et le titre pour avoir la position d'absolue. Une position relative est la position d'origine de l'élément. Il restera dans le flux des documents et prendra l'espace d'origine qu'il était prévu. Nous pourrions également pousser autour de ces sections avec une valeur supérieure, droite , inférieure ou gauche juste comme ceci. Mais je vais laisser ça tel quel. Maintenant, la raison pour laquelle nous avons défini ceci pour être relatif est parce que si nous définissons une autre valeur à l'intérieur pour être absolue. Ici, nous pouvons également utiliser le haut, la droite, le bas et la gauche, mais cette fois la différence est que la section sera référencée à partir de notre image relative. Si nous définissons une valeur supérieure de 20 pixels, disons ceci, cette section absolue cherchera le conteneur relatif le plus proche, qui est notre image. La valeur supérieure de sera référencée à partir du haut, nous avons le droit, le bas et la gauche. Comme nous pouvons le voir, les 20 pixels du haut pousseront ces 20 pixels vers le bas de l'image. Nous pourrions aussi travailler avec la valeur de gauche pour pousser cela au milieu. Mais alternativement, nous pourrions définir la largeur à 100 pour cent. Cela va maintenant étirer le titre pour être pleine largeur de notre image. Ensuite, cela nous permettra d'appliquer le text-align pour être au centre, en plaçant exactement là où nous voulons qu'ils soient. Lorsque nous définissons la position pour être absolue, comme nous l'avons fait ici, cela supprimera l'élément du flux du document. Naturellement, il ne prendra aucune position sur la page, il agira comme s'il avait été retiré des documents, ce qui signifie que nous devons utiliser le haut, la droite, le bas et la gauche pour définir le positionnement exact. Si nous supprimons cette section relative, disons ceci, ceci est maintenant placé à 20 pixels du haut de la page. C' est parce que, comme mentionné précédemment, un élément absolu recherchera le conteneur relatif le plus proche et s'il n'en a pas, il référencera à la place les documents complets. Mettons ça à l'intérieur. La dernière chose à faire est d'appliquer également un peu d'espace aux deux côtés de cette image du milieu comme nous l'avons fait avec cette image juste ici. Pour ce faire, revenez à notre page d'index. Pour cette section du milieu, nous pouvons également ajouter une seconde classe séparée par un espace. Appelons ça le milieu, sauvegardez ce fichier, et plus sur notre feuille de style. Prends la section du milieu. Pour appliquer un peu d'espace en dehors de cette div, nous devons aller pour la marge. Nous avons déjà l'espacement en haut et en bas, donc nous allons laisser cela comme zéro, et placer 15 pixels à gauche et à droite. Allez sur le navigateur, nous voyons que nous avons un peu d'espacement à gauche et à droite, mais nous avons aussi maintenant un problème avec notre titre. Allons dans les outils de développement, cliquez avec le bouton droit sur « Inspecter », cliquez sur « Inspecteur » et nous verrons ce qui se passe. C' est le titre de niveau 3, alors cliquez dessus. Si nous survolons la section de remplissage, nous pouvons voir que nous avons un contour vert autour de notre titre. Ce rembourrage ajoute également un peu d'espace dont nous n'avons pas besoin. Pour supprimer cela, revenons à notre feuille de style, et nous avons déjà un sélecteur de titre de niveau 3. Revenez à notre section h3, c'est le rembourrage juste ici. Nous pourrions remplacer cette section, mais cela s'appliquera également à cette section dans l'en-tête. Au lieu de cela, nous allons revenir au titre de la catégorie, qui ne va s'appliquer qu'à cette section et définir le remplissage sur zéro. Cela résout maintenant le problème horizontalement, mais nous devons également maintenir l'espacement vertical. Pour cela, cinq pixels en haut et en bas et nous n'appliquerons ce zéro qu'à gauche et à droite. Bien, c'est maintenant le style complet pour tout le contenu principal. Dans la prochaine vidéo, nous allons travailler avec notre dernière section, qui est la zone Pied de page. 12. Section HTML du pied de page: La plupart des contenus principaux maintenant sur cette page, et maintenant, nous allons descendre vers le bas et créer la toute dernière section de ce projet. Cette section va être une zone de pied de page. Ça ne va pas être trop difficile. Ce sera juste un pied de page comme un wrapper, qui est un élément sémantique HTML 5. Ce wrapper contiendra ensuite une navigation avec différents liens. Vous pouvez faire ces liens tout ce que vous voulez, et vous pouvez également créer des pages supplémentaires si vous voulez lier ces deux aussi bien. Tout comme nous le voyons sur la version finale, il y aura aussi une petite image juste au-dessus de cela, et cela est contenu dans le dossier images. Si vous vous sentez confiant de le faire, vous pouvez aller de l'avant et créer cela vous-même. Si ce n'est pas le cas, suivez-moi. Nous allons créer ceci maintenant tout en bas, juste au-dessus de l'étiquette de corps de fermeture. Fourni avec HTML 5, était un nouvel élément sémantique ou descriptif, qui est appelé un pied de page. Tout comme nous l'avons fait plus tôt lorsque nous avons créé la section d'en-tête avec cet élément juste ici, tout le contenu du pied de page entre ces balises, et nous allons créer une image et aussi une nouvelle liste non ordonnée. Tout d'abord, les éléments d'image et la source sont tous dans le dossier images. Nous avons besoin du cutlery.svg et aussi d'un vieux texte aussi. Sauvegardons ceci et voyons cela dans le navigateur. Rafraîchir, et comme notre svg, qui est un peu grand pour le moment, mais dans la vidéo à venir, nous allons styler ceci avec une section avec CSS. Ensuite, comme nous l'avons fait plus tôt, nous allons également créer une liste non ordonnée, qui contiendra nos liens de navigation. Juste avant de le faire, nous allons également jeter un oeil à un autre élément sémantique ou descriptif appelé nav. Nav est un élément qui est destiné à représenter une page possible, qui contient des liens de navigation. Ce n'est pas un élément obligatoire que nous devons inclure avant les navigateurs et lecteurs d'écran qui sont lus dans ce HTML. Il fournit une meilleure description du contenu imbriqué à l'intérieur. À partir de là, nous créons une liste ordonnée comme précédemment. Je vais lister les éléments qui peuvent contenir un élément pour un lien. Comme mentionné précédemment, vous pouvez également créer un lien vers une page différente. Mais je vais juste laisser celle-ci vide dans cette vidéo. Le premier, disons à ce sujet. Le second qui énumère l'élément avec un lien, celui-ci est pour les entrepreneurs. Le troisième, celui-là, je vais vous suggérer une recette. Le quatrième, celui-là sera la vie privée. Cela suivra les liens vers le bas. Le CSS est également appliqué lorsque nous survolons chacun de ces éléments depuis le plus tôt [inaudible] que nous avions. Si nous montons vers le haut, nous avons aussi quelques sections de navigation juste ici. Ce que nous allons faire est également de passer en haut de la page et de chercher notre liste non ordonnée à l'intérieur de l'en-tête. Sélectionnez toute cette section, puis commandez ou Control X. Nous pouvons couper cela hors de place et également entourer la section avec l'élément nav. La même chose pour le deuxième ensemble de liens juste en dessous, découpez la section, placez-la dans l'élément nav, puis collez le contenu à l'intérieur. Nous ne devrions pas voir de différence à l'intérieur du navigateur. Ceci est juste pour décrire le contenu qui est à l'intérieur de cet élément, tout comme nous l'avons fait avec les sections d'en-tête et de pied de page. Enfin, pour terminer le HTML de cette page, la dernière chose que nous allons faire est de placer ces points intermédiaires entre les liens de pied de page. Nous pouvons le faire en copiant les éléments span, qui contient l'entité HTML. Prenons ceci, nous Commande ou Contrôle C. Retournez à nos liens de pied de page et nous pouvons coller ceci entre chacun de ces éléments de liste. Vérifions ça. Là, nous l'avons. Enfin, la dernière chose à faire pour ce projet sera dans la prochaine vidéo. Nous appliquerons notre style CSS pour la section pied de page. 13. Styliser le pied de page: J' aurai tout le contenu HTML sur cette page. La dernière chose à faire pour terminer ce projet est d' appliquer un peu de style CSS dans le pied de page, ce sera assez basique. Tout ce que nous devons faire est de réduire la taille de ce SVG placera tout le contenu au centre et aussi jouer une couleur de fond légèrement différente. Ensuite, nous allons l'utiliser pour le reste de la section du corps. Donc, au styles.css. Rappelez-vous que le wrapper de toute cette section était le pied de page. Nous pouvons maintenant travailler avec cela dans notre feuille de style. D' abord, attrapons ça. Ensuite, à l'intérieur d'ici, nous allons définir le type d'affichage pour utiliser la flexbox. Comme mentionné précédemment, la flex-direction par défaut est la ligne qui placera ces éléments sur la page. Nous devons changer cela pour être la direction flexible de la colonne. Cela s'applique également à la section pied de page, qui est le wrapper. La direction de flexion est maintenant colonne, qui les mettra en place verticalement. Vous pensez peut-être actuellement, « Eh bien, cela nous laisse exactement où nous en sommes au début. » Mais maintenant, nous utilisons la flexbox. Nous pouvons maintenant utiliser une propriété flex appelée aligner les éléments, où nous pouvons définir cela dans le centre. Cela va maintenant pousser nos liens vers le bas, vers le milieu et aussi ce SVG, lorsque nous réduisons la taille aussi, nous avons actuellement la colonne flex-direction qui est verticale, et cela est appelé axe principal. Lorsque vous utilisez un élément de ligne comme obtenu ici, cela fonctionnera à l'opposé, qui est appelé l'axe transversal. C' est pourquoi la propriété center alignera ces éléments sur la page horizontalement. Le contraire s'appliquerait si nous définissons la direction de flexion à la ligne. Cela signifierait alors que notre axe principal est à travers la page, qui signifie que les éléments alignés seraient le contraire et cela définira l'alignement vertical. Si vous deviez commencer maintenant, cela peut sembler un peu déroutant, mais cela prend juste un peu de s'y habituer. Ensuite, nous allons changer la couleur d'arrière-plan de cette section de pied de page. Face ombre légèrement sombre, qui va être E5. facile, rangée facile, enregistrer. Nous pouvons voir une nuance légèrement différente du reste du contenu du corps. Du pollen, qui va aller à l'intérieur de cette section de pied de page et fournit un peu d'espace à l'intérieur, autour de l'intérieur. Allons-y pour 20 pixels. Cela appliquera notre espace sur les quatre côtés. Enfin, nous devons réduire la taille de cette image. Nous pouvons l'appliquer uniquement à la zone de pied de page, puis à toute image qui est censée être à l'intérieur. Tout ce que nous avons à faire est de définir la largeur maximale de cette image, les 80 pixels. Là, nous l'avons. Ce sont mes recettes, sites Web tous maintenant terminés. J' espère que vous avez apprécié ce projet et vos premiers pas vers la création de sites Web. Dans le projet à venir, nous allons aller encore plus loin en créant un nouveau projet et en introduisant un design responsive. 14. Configuration du projet du collège: Bienvenue à ce nouveau projet et à cette nouvelle section. Au cours de cette prochaine section, nous allons construire dans ce site web thématique de l'université que vous voyez ici. Non seulement nous allons répliquer cela et obtenir beaucoup plus de pratique à construire des sites Web HTML et CSS, nous allons également apprendre quelques nouvelles astuces. En particulier, l'un des plus grands que nous allons apprendre dans cette section est le design responsive. Le design réactif est un moyen de créer notre site Web et de le faire adapter à différentes tailles d'écran. Par exemple, sur un moniteur de plus grande taille de bureau, comme ceci, voici à quoi ressemblera notre site Web. Mais si nous devions réduire cela à une plus petite largeur, nous voyons que ce site Web répondra ou s'adaptera à la taille actuelle du navigateur, puis il changera la mise en page en conséquence. Cela prendra également effet lorsqu'il est visualisé sur une tablette plus petite ou un appareil mobile. En haut, notre en-tête sera empilé verticalement. Nous voyons les liens juste en dessous de l'en-tête, plutôt que le long de chacun d'eux comme ils sont ici. C' est un thème général pour beaucoup de contenu. Nous pouvons voir ici avec cette grille que, plutôt que d'avoir éléments libres côté, cela sera maintenant empilé verticalement et sera toute la largeur de l'écran. Pour ce projet particulier, nous n'avons qu'un seul changement de mise en page, nous avons la vue de petit écran ou la vue d'écran plus grand, mais nous pouvons ajouter autant de changements ou de points d'arrêt que nous le souhaiterions, même si nous voulions simplement affiner une section particulière du côté. C' est ce que nous allons apprendre dans cette section. Nous allons commencer, comme jamais en créant un dossier de projet. Vers le bureau, un nouveau dossier. Celle-là, on veut appeler ça le tech-college. Vous pouvez lui donner n'importe quel nom que vous voulez. Aussi fourni avec ce projet est le dossier images, et vous pouvez utiliser les mêmes images que je vais utiliser, ou vous pouvez télécharger les vôtres si vous préférez. Après cela, si vous le souhaitez, vous pouvez également le placer dans le dossier du projet, puis faire glisser sur le dossier tech-college dans Visual Studio Code. Pour le moment, nous avons juste notre dossier d'images à l'intérieur avec les images fournies. Ce que nous devons faire pour commencer est de créer notre nouvelle page, qui va être le index.html. Comme toujours, vous pouvez taper la structure HTML si vous le souhaitez, ou vous pouvez utiliser la commande Emmet intégrée HTML5, fournie avec Visual Studio Code. Tapez html:5, appuyez sur Entrée. Maintenant, nous avons toute cette structure dont nous avons besoin pour notre site. Le titre, placez ceci à l'intérieur de la section de tête, enregistrez ce fichier et ouvrez cela dans le navigateur. Nous pouvons soit double-cliquer sur le index.html à l'intérieur du dossier du projet, ou en tant que raccourci, nous pouvons cliquer avec le bouton droit sur le nom du fichier, copier le chemin, puis le coller dans un nouvel onglet du navigateur. Bien. Tout ce que je vais faire maintenant pour le reste de cette vidéo est d'ajouter un peu de travail de configuration, et ceci est de fournir une police que nous allons utiliser pour ce projet et aussi fournir quelque chose appelé le fichier CSS normalisé. Commençons par nos polices Google. Nous faisons une recherche pour Google Fonts, et la première dont nous avons besoin ici est fonts.google.com. Ajoutez ici, et nous pouvons choisir n'importe quelle police que nous voulons utiliser pour ce projet. Celui que je vais utiliser s'appelle Vollkorn. C' est V-O-L-K-O-R-N. Allons pour le Regular, sélectionnez-le, et fermez aussi cela et nous allons pour le moyen. Ouvrez cette sauvegarde, puis nous pouvons copier tout ce lien et le coller dans notre section de tête. Cela doit également être lié à notre feuille de style, alors créons ce nouveau fichier à l'intérieur du répertoire principal de styles.css, et nous reviendrons à cela dans un instant. Mais pour l'instant, copions simplement cela et collez-le dans, et si nous commandons ou contrôlons avec barre oblique, cela va juste commenter ceci pour une utilisation ultérieure. La prochaine chose à faire est d'inclure ce qu'on appelle le fichier CSS normalisé. Si nous avions O2, le moteur de recherche et faire une recherche pour un normalize.css, ce devrait être le premier lien dont nous avons besoin juste ici. Nous pouvons voir ici que le fichier normalisé va nous aider à rendre notre site Web plus cohérent sur différents navigateurs. Il y a quelque chose appelé une réinitialisation CSS qui est disponible, et cela réinitialisera toutes les valeurs par défaut du navigateur à zéro. Par exemple, si certains navigateurs avaient un remplissage ou des marges à nos éléments, cela réinitialisera tous ces éléments à zéro. Cependant, bien que souvent ces valeurs par défaut soient ajoutées pour une raison quelconque. Une alternative consiste à utiliser ce fichier normalisé, et cela ne supprimera pas complètement toutes les valeurs par défaut du navigateur. Au lieu de cela, ce qu'il fera est d'ajuster certaines valeurs, donnant à nos sites un regard beaucoup plus cohérent sur différents types de navigateurs. Il est vraiment utile d'ajouter à notre projet. Nous pouvons également l'utiliser avec MPM si vous utilisiez node. Mais comme nous ne le sommes pas, nous allons simplement télécharger ce fichier, sélectionner tout avec la commande ou le contrôle A, copier avec la commande ou le contrôle C, puis à l'intérieur de notre projet, maintenant nous avons une deuxième feuille de style que nous allons ajouter. Je vais garder cela plus organisé en cliquant sur un nouveau dossier appelé CSS. Faites glisser sur nos feuilles de style, puis ouvrez cela, créez un nouveau fichier appelé normalize.css, puis collez-le dans. Tout cela fait essentiellement est de fournir des valeurs par défaut raisonnables que nous allons appliquer à nos éléments pour les rendre meilleurs sur différents types de navigateurs. Nous devons maintenant lier ces deux feuilles de style à l'intérieur de notre index. Ensuite, nous allons lier dans notre feuille de style, qui est le normalize.css. Rappelez-vous, puisque nous avons créé un dossier CSS, nous devons également l'ajouter à l'intérieur de notre chemin de fichier. Trouver nos feuilles de style personnalisées, et notre feuille de style personnalisée devrait toujours être la dernière, donc aucune de ces valeurs ci-dessus remplacera nos styles personnalisés dans le dossier CSS, styles.css. Maintenant, nous sommes assez bien d'aller avec notre nouveau projet. C' est tout le travail de configuration maintenant terminé, et dans la vidéo à venir, nous allons travailler avec la section d'en-tête et aussi jeter un oeil sur la façon dont nous pouvons ajouter nos images réactives. 15. L'en-tête et les images réactives: Passant à un certain contenu, nous allons maintenant ajouter du HTML, ainsi que du style à notre projet. commençant par le haut par la section d'en-tête. Ensuite, après cela est la section qui est juste en dessous de laquelle est l'image, et aussi le texte superposé au-dessus de l'image aussi. Cela montrera également quelques techniques utiles telles que le centrage de la section sur l'image, ainsi que la façon de rendre notre image réactive. Par responsive, je ne veux pas seulement dire que cela va rétrécir plus petit ou plus grand comme ça. En fait, il va également utiliser deux versions de la même image, une petite et aussi une grande, et seule l'image de taille appropriée sera téléchargée. Jetons un coup d'oeil à la façon de faire cela en commençant par l'en-tête dans le corps. Créez les éléments d'en-tête HTML5 en tant que wrapper. Ensuite, nous allons juste créer deux sections, qui est le titre en haut à gauche, puis sur la liste non ordonnée de droite. abord, le h1, et nous pouvons également placer dans un élément pour lier cela à la page d'accueil, si nous voulons réutiliser cet en-tête sur plusieurs pages. Allons pour le index.html, alors je vais titre texte à l'intérieur. Ensuite, nos liens, nous pouvons les placer à l'intérieur de l' <nav> élément pour garder les choses sémantiques, la liste non ordonnée. Le premier élément de la liste va être pour la connexion. J' ai écrit le mien dans un <a> élément vide. Vous pouvez également créer les pages séparées pour créer un lien vers chacune de ces deux pages. Si vous vouliez créer une « Page de connexion », une « Page d'inscription », ainsi qu'une « Page d'accueil » ou un peu de pratique supplémentaire. Ensuite, lien vers ces pages à l'intérieur de la href, c'est la première. Le deuxième élément de la liste, encore une fois, un lien avec le texte du registre. Le troisième, celui-là, c'est entrer en contact. D' accord. Donnez ceci une sauvegarde et nous pouvons vérifier dans le navigateur si cela fonctionne. Bien sûr, cela n'a pas l'air génial, mais nous allons corriger cela avec CSS en un peu. Après la section d'en-tête , tout est maintenant terminé. Nous pouvons créer une nouvelle section, et ce sera le wrapper pour l'image et aussi la superposition de texte. Avec le CSS, placer dans une classe d'appliquer. Ensuite, cela contiendra deux sections distinctes. Tout d'abord, nous avons l'image, qui est l'image d'arrière-plan, puis une div séparée, qui va être cette section de texte juste ici. La source dans le dossier images, jetons un coup d'oeil. Nous avons deux images distinctes à l'intérieur d'ici. Nous avons le college.jpeg et aussi le collège petit. Nous allons jeter un oeil à ce que cela va faire dans une seconde. Mais pour l'instant, nous allons pointer la source de l'image avec le dossier images, puis dans le college-small.jpeg. Ensuite, la div, et cela aura une classe de superposition de texte, que nous allons utiliser dans un moment à l'intérieur de la feuille de style, puis les deux sections techniques, la première prend maintenant des applications en ligne, que nous allons envelopper dans un <p> élément. Notez un bouton avec le texte de appliquer ici. Au-dessus du navigateur, nous avons l'image et aussi le texte juste en dessous. Comme vous pouvez vous attendre à placer cela au-dessus de l'image, cela va prendre un peu de travail CSS. Donc juste placer ceci en dessous de l'image est très bien pour l'instant. Mais ce que nous allons d'abord nous concentrer, c'est changer d'image à l'université. Nous allons télécharger la petite école sur un appareil mobile ou un petit écran. Ensuite, une fois que nous atteignons une certaine taille, nous allons passer au college.jpeg, qui est une version plus grande. Si nous cliquons dessus, nous pouvons voir le collège petit est 1280 pixels de large, alors que le college.jpeg est plus grand, et il a la largeur 1920 pixels. Pourquoi voudrait-on inclure deux images distinctes ? Eh bien, la raison en est à cause du temps de téléchargement, et aussi de la qualité de l'image. Si vous pensez avoir un appareil mobile lors de la visite de ce projet sur un petit écran, si nous avons une connexion réseau mobile plus lente, nous ne voulons pas télécharger la grande image. Il serait plutôt beaucoup plus rapide de télécharger cette version plus petite. De l'autre côté, si nous utilisons un grand moniteur, si nous devions seulement inclure une petite image comme celle-ci, puis s'étire pour être une plus grande taille, cela perdrait beaucoup de qualité. Pour faire face à cela, nous allons utiliser un élément HTML appelé image. Cela va nous permettre de fournir plusieurs sources d'images, puis le navigateur peut décider lequel est le plus approprié. Eh bien, pour ce faire, nous allons inclure les éléments de l'image. Nous incluons d'abord les éléments d'image comme un wrapper, nous devons toujours inclure la source de l'image, puis juste au-dessus, nous allons utiliser l'élément source HTML. L' élément source n'inclut pas de balise d'ouverture et de fermeture. Au lieu de cela, nous passons quelques attributs. La première sera une requête multimédia. Une requête multimédia est également quelque chose que nous allons utiliser à l'intérieur de notre CSS pour appliquer différents styles à différentes tailles d'écran. Mais lorsqu'il est utilisé avec la source, cela va nous permettre de fournir des images de différentes tailles pour différents types de médias ou appareils. L' un des cas d'utilisation les plus courants pour une requête multimédia est de changer le contenu à une certaine largeur d'écran. Si nous passons à l'intérieur des parenthèses, une largeur d'écran minimale de 1100 pixels. Cette section particulière ne s'appliquera que lorsque le navigateur a plus de 1100 pixels de large. Ensuite, une fois qu'il est au-dessus de la taille, nous pouvons ensuite utiliser l'attribut de jeu source, il fournit ce chemin de fichier à notre grande image. Il y a beaucoup de conditions médiatiques différentes que nous pouvons ajouter. Nous pouvons inclure la largeur maximale. Nous pouvons vérifier l'orientation de l'appareil pour voir s'il s'agit d'un paysage ou d'un portrait. Nous pouvons vérifier le ratio de pixels d'un moniteur, et beaucoup d'autres choses différentes. Cela va appliquer notre image plus grande si la largeur du navigateur est supérieure à 1100 pixels. Mais si la largeur du navigateur est inférieure à cette taille, il va revenir à cet élément d'image juste ici, qui inclut la petite version. Si nous le voulions, nous pourrions insérer autant d'éléments sources que nous le voulions. Nous pourrions mettre en place des conditions médiatiques différentes, et aussi les pointer vers des images différentes. Au cours de cela, nos deux tailles d'image sont bonnes. Comme une note de côté, nous devons toujours inclure cet élément d'image. C' est parce que c'est finalement l'élément qui va toujours être rendu à l'intérieur du navigateur. Tout ce que nous faisons est de changer les différentes sources d'image. Assurez-vous que cela est toujours inclus. La façon dont nous pouvons tester cela, si nous disons cela, est de rafraîchir le navigateur et d'ouvrir les outils de développement avec un clic droit, et inspecter, et dans l'onglet Réseau. Ce que nous devons d'abord faire ici est de réduire le navigateur à une petite taille d'écran qui est inférieure à 1100 pixels, puis rafraîchir. De là, nous avons la petite version de notre image téléchargée, et c'est 361 kilo-octets. Si nous élargissons cela et que nous allons sur les 1100 pixels, c'est un peu plus grand. Rechargez, et maintenant à la place cela va télécharger notre version plus grande, qui est le collège jpeg. Comme vous pouvez vous y attendre, il s'agit d'une taille de fichier plus grande, il est donc préférable de télécharger la plus petite image sur les petits appareils mobiles. 16. Styliser l'en-tête: Maintenant, nous savons que cela fonctionne, nous pouvons fermer cela et passer à notre style, donc dans notre feuille de style personnalisée, qui est le styles.css. Nous avons déjà téléchargé notre famille de polices depuis Google Fonts, et nous pouvons l'ajouter dans la section HTML. Je vais déplacer ça et supprimer le début. Ce que je vais faire ici est de définir la famille de polices d'une taille de base de 10 pixels. Maintenant, cela ne signifie pas que je veux que le texte à l'intérieur du projet soit tous les 10 pixels. Cela va juste fournir un calcul facile, que nous verrons dans un instant. Ensuite, la couleur. Cela s'appliquera à tous les textes. La valeur RVB sera 62 pour le rouge, 61 pour le vert et 61 pour le bleu. Vérifiez que cela a bien appliqué. Maintenant, nous voyons notre différence, la police a appliqué. La couleur de la police de base n'a pas été appliquée à tous les liens. Mais on réparera ça dans une seconde. Ensuite, la section d'en-tête. La section d'en-tête, nous allons utiliser le type d'affichage de flex. Nous allons basculer autour de la direction flexible de la ligne et de la colonne en fonction de la taille de l'écran. Ce que nous allons faire dans cette vidéo est de réduire le navigateur à un petit écran, et sur la version mobile, comme nous le voyons ici. Nous voulons que ce contenu soit affiché sous forme de colonne. Ensuite, plus tard, nous appliquerons une requête média pour changer la direction de flexion pour être ligne. Mais pour l'instant, nous allons juste rester avec la vue de petit écran. Définissez la direction de flexion pour être colonne. Ensuite, alignez également les éléments au centre, qui centrera vers cela de gauche à droite. Le titre latéral est enveloppé dans un titre de niveau 1. Donc, nous allons comme ça et changons le curseur pour être un pointeur. Cela changera chaque fois que nous survolons cette section. Après cela, la taille de la police et la valeur de deux rems. Un rem est une taille relative, ce qui signifie qu'il sera plus grand ou plus petit, selon la famille de polices de base, qui a été configurée dans le HTML. Deux rems signifieront que c'est deux fois la taille, donc ce sera 20 pixels. Si nous définissons ceci pour être un rem, ce serait alors 10 pixels. Avoir cette taille de base définie pour être un bon nombre arrondi, il est vraiment facile de calculer la taille exacte de la police que nous voulons. Par exemple, si nous voulions que cette taille soit de 16 pixels, nous pourrions définir cela à 1,6 rems. L' alternative est que nous avons ce soit 16 pixels. Alors si nous voulions peut-être que ce soit 18 pixels ici, les calculs seraient un peu plus complexes. Gardions ça comme 10. Cela doit également être la taille de la police, pas la famille de polices, que vous êtes déjà définie ci-dessus. Maintenant, si nous sauvegardons cela, tout cela s'appliquera correctement. Ensuite, nous pouvons travailler sur ces liens. C' est l'élément a. Tout d'abord, la décoration de texte, qui n'est pas, et cela supprimera le soulignement de tous nos liens. Aussi, nous voulons que la couleur du lien soit la même que cette couleur ici. Pour ce faire, nous devons également définir la couleur. On pourrait copier cette couleur et l'ajouter à l'intérieur d'ici. Ou à la place, nous pourrions hériter de ceci, et cela héritera de la couleur des parents, qui est celui-ci juste ici. Rafraîchir. Cela s'applique également à tous les liens ainsi qu'à l'en-tête de niveau 1, qui est également enveloppé dans un lien. Pour changer également le survol de l'équilibre sur l'un de ces éléments, nous pouvons ajouter un état de survol. Donc, un et puis vous deux-points. Nous pouvons ajouter l'état du survol, qui va changer la couleur du texte à chaque fois que le curseur de la souris se déplace sur cette section. Vous pouvez jouer avec la couleur si vous le souhaitez. Je vais aller pour 104, 114, puis 166. En descendant vers les liens, si nous regardons la version finale, ce que nous voulons faire ici est de supprimer les points ou les puces de notre liste d'articles. Place également sur la page et rend également la taille de la police un peu plus grande. Dans le wrapper, qui est la liste non ordonnée, la façon dont nous pouvons supprimer ces puces est de définir le style de liste sur none. Pour nous permettre de centrer correctement tous ces éléments, nous pouvons également déplacer la valeur par défaut du navigateur. À l'intérieur des outils de développement, si nous cliquons sur l'inspecteur et puis survolons la liste non ordonnée, nous pouvons voir sur la gauche nous avons cette section verte qui est rembourrage. Cela a été appliqué par le navigateur ou Macondo l'a déplacé en définissant la valeur du remplissage sur zéro. Oh, une autre liste. Ceci est maintenant supprimé. Ensuite, nous allons rendre la taille de la police un peu plus grande. Ensuite, nous pouvons sélectionner les éléments de la liste et les lieux horizontalement à travers la page. Pour ce faire, définissez le type d'affichage sur flex. Par défaut, la direction de flexion sera la ligne plaçant ces éléments sur la page jusqu'à ce que les éléments de liste. La taille de police de 16 pixels, que nous pouvons calculer rom à 1.6 rems et aussi d'appliquer un peu d'espace entre chacun d'entre eux. C' est une marge de zéro en haut et en bas, puis 10 pixels à gauche et à droite. C' est tout ce que nous devons faire pour la section d'en-tête jusqu'à ce que nous arrivions à l'écran plus grand. Jusqu' à cette section d'image et nous pouvons cibler l'image avec img. Ensuite, définissez la largeur de l'image. On veut 100 pour cent. Cela va maintenant s'assurer que notre image ne s'étire pas plus loin qu'à la largeur du navigateur depuis plus tôt lorsque nous avons ajouté le code HTML. Revenons à cette section. Nous donnons à cela une classe d'application. Cette classe va nous permettre de sélectionner cette section complète et de l'utiliser comme point de référence pour centrer cette section et juste en dessous, et faire ceci. C' est une classe, donc nous utilisons le point. Pour en faire un point de référence pour notre texte, nous devons définir le type de position pour être relatif. Nous allons jeter un oeil à ce que cela fait en une seconde. On ne devrait pas voir de différence pour le moment. Mais la différence apparaîtra lorsque nous sélectionnons cette superposition de texte. C' était la classe que nous donnons à cette section. Prends ça. Ensuite, pour faire ce travail, nous avons également défini une valeur de position pour que cette section soit absolue. Si nous rafraîchissons, donc il n'a pas l'air différent pour le moment. Mais ce que nous avons effectivement fait ici, c'est de retirer cette section de superposition de texte du flux du reste du contenu. Maintenant, nous devons dire au navigateur exactement d'où nous voulons que ce soit positionné. Nous pouvons le faire en ajoutant les valeurs de haut, de droite, de bas et de gauche dans notre feuille de style. Ce que nous voulons faire est de positionner ce 50 pour cent à partir de la gauche de l'image, puis 50 pour cent à partir du haut. La valeur de gauche de 50 pour cent et la même chose pour le haut. « Rafraîchir ». Maintenant, nous arrivons quelque part, c'est presque au centre de l'image. La raison pour laquelle ces deux valeurs de 50 % ont été appliquées à partir de l'image est que nous avons défini le type de position pour être relatif. Lorsque nous définissons une section, comme celle-ci pour être absolue, lorsque nous définissons les valeurs pour le positionnement, elle référencera toutes ces tailles dans le conteneur relatif le plus proche. Dans notre cas, le conteneur relatif le plus proche est le wrapper de section d'image. Si nous n'avions pas ça juste à l'intérieur d'ici, regardons ce qui se passerait. « Rafraîchir ». Maintenant, puisque nous n'avons pas de conteneur relatif défini nous-mêmes, il utilisera plutôt la section du corps comme référence. La valeur de gauche de 50 pour cent poussera cela sur la moitié de la largeur du corps, puis 50 pour cent du haut. Mais son conteneur relatif est vraiment important. Comme nous pouvons le voir ici, le centrage n'est toujours pas tout à fait au milieu. Nous pouvons voir pourquoi mieux si nous ouvrons les «  Outils de développement », cliquez sur « Inspecteur » et sélectionnez notre section de superposition de texte. Nous pouvons voir mieux avec cette section de superposition de texte mis en évidence lorsque nous définissons la position en utilisant le haut et la gauche. Cela positionnera cet élément à partir du coin supérieur gauche. Plutôt que de référencer cela en haut à gauche, nous voulons que ce div soit référencé à partir du centre même. La façon dont nous pouvons le faire est d'utiliser une propriété de transformation CSS, ce qui signifie que nous pouvons déplacer cet élément 50 pour cent de la largeur vers la gauche et aussi vers le haut de 50 pour cent aussi, ce qui signifie effectivement que nous nous déplacons dans le point de référence en haut à gauche dans le centre de cet élément. Pour ce faire, nous définissons la transformation CSS, puis faisons usage de Translate, ce qui va nous permettre de déplacer la position de n'importe quel élément HTML. Ensuite, nous plaçons à l'intérieur de deux valeurs, qui est l'axe des x, qui est de gauche à droite, puis l'axe des y, qui est de haut en bas. Si nous définissons l'axe des x pour être négatif 50 pour cent et aussi le même pour l'axe des y. Ce « Rafraîchir. Maintenant, cette div complète a été transformée en centre. La seule chose que nous devons faire pour équilibrer cela est de définir l'alignement du texte pour être au centre. Nous pouvons le faire et le wrapper, maintenant cela semble beaucoup mieux. Juste pour récapituler, si vous pouvez toujours vous assurer que lorsque nous définissons les valeurs gauche et supérieures, vous les réduisez de l'extérieur de l'image. Mais plutôt que d'utiliser le centre de l'élément du point de référence, il utilise le coin supérieur gauche. Cela signifie que l'élément n'apparaît toujours pas tout à fait au centre de l'image. Nous devons le déplacer manuellement de 50 pour cent sur les directions verticales et horizontales. C' est tout le positionnement de toute la configuration. Ce que nous allons maintenant faire est de définir les couleurs et aussi la taille de la police. La taille de la police de 20 pixels, soit deux rems. L' arrière-plan de RGBA, 40 pour le rouge, 40 pour le vert, 40 pour le bleu, puis la quatrième valeur est le canal Alpha. C' est l'opacité de la CE à travers la valeur. Si nous définissons cette valeur à 0,7, ce sera à 70 % transparent. « Rafraîchir. » Cette valeur Alpha signifie que notre arrière-plan sera légèrement transparent. L' image commencera à apparaître à travers. Si nous en définissons un, ce serait complètement opaque, qui signifie que nous ne pouvions rien voir passer. Le rayon bordereau va nous donner un bel angle arrondi de trois pixels, que vous pouvez voir sur les quatre côtés. Puis un rembourrage pour vous donner un peu d'espacement à l'intérieur de deux rems en haut et en bas, puis 10 rems à gauche et à droite. Enfin, la couleur de la police que je vais utiliser 195,191,191. Le style final et la propriété de cette vidéo sera le bouton « Appliquer ici. L' élément bouton, pour en faire autant la version finale, nous pouvons supprimer la couleur de fond, ajouter une bordure, quelques coins arrondis pour correspondre également à cette section de superposition. Puis enfin l'état survolant du bouton, retirez l'arrière-plan en définissant ce n'est pas la bordure, la largeur de deux pixels, puis la couleur de bordure de RGB, 169, 252 , 169, puis trois pixels de border-rayon, qui va être une correspondance pour cette section de superposition de texte et actualiser le navigateur. On en a presque fini avec ça. Nous avons la bordure, mais nous voulons juste nous assurer que la couleur du texte correspond également et la façon dont nous pouvons le faire est également de définir la couleur comme la section ci-dessus, ou nous pouvons également hériter de cela, tout comme nous l'avons fait avec le liens. Cela héritera désormais de la couleur du parent. Enfin, l'état du survol pour le bouton, sorte que la souris va changer cette couleur, et aussi tout comme la version finale, il va le rendre légèrement plus grand à chaque fois que l'utilisateur passe au-dessus de la souris. La façon dont nous pouvons le faire est de sélectionner le bouton et l'état du survol. Nous pouvons ensuite modifier la couleur de la bordure pour être une valeur RVB de 220, 237, 255. Encore une fois, nous pouvons utiliser la propriété transform. Plutôt que de sélectionner translate, nous utilisons juste ici, une autre méthode que nous pouvons utiliser est de mettre à l'échelle l'élément. Cela signifie que nous pouvons rendre les éléments plus grands ou plus petits. Par exemple, si nous voulons que ce soit exactement le même, ce serait un. Je ne vois aucune différence juste ici. Si nous voulions qu'il soit la moitié de la taille, il serait 0,5. Mais je vais rendre ça un peu plus subtil. Je vais régler ça à 1,05. Sur le bouton réel, nous pouvons également définir le curseur comme un pointeur. Vérifions ça. Nous avons un curseur, la transformation a lieu. Je change aussi la couleur de la bordure. Nous avons maintenant le contenu de la section d'en-tête tout en place et aussi le style CSS pour la vue à petit écran. Nous y reviendrons plus tard et apporterons quelques petits changements pour une vue plus large. Mais ensuite, nous allons continuer avec le projet et ajouter un peu plus de contenu. 17. Section de cours populaires: Hé, bienvenue à cette prochaine section. Nous allons continuer à avancer vers le bas avec notre projet et créer la section de grille juste en dessous de cette image d'en-tête. C' est celui, si vous étirez cela, ce sera une mise en page de type grille avec toutes les sections du cours populaire. Cela fera usage de la mise en page de la grille CSS et cela va nous permettre de fournir toutes les sections côte à côte avec un écart entre les deux et aussi jusqu'à la vue à petit écran. Cela sera transformé pour être la pleine largeur de l'écran avec la vue d'écran plus petite. Je vais également corriger cette erreur de frappe d'un peu plus tôt. le HTML, cette section va être enveloppée dans les éléments de section. Puis un titre de niveau 3, qui sera le titre de Cours populaires. La classe pour notre CSS va être courses-title. Ensuite, en dessous de cela, une nouvelle section div, qui sera le conteneur pour tous nos cours dans le format de style de grille. Donc, puisque nous travaillons actuellement avec la vue à petit écran, nous allons nous assurer que tous nos éléments sont empilés verticalement. Ensuite, nous allons changer la mise en page pour être un style de grille. Ce premier div va être le wrapper pour tous ces cours. Alors donnons-lui une classe de cours. Ensuite, un nouveau div pour chacune de nos sections qui contiendra l'image et aussi le texte. Celui-ci va avoir une classe de grille. Maintenant, nous devons faire pour chacun de ces éléments de grille est de sélectionner l'image correcte et également placer dans le texte. Votre premier, c'est le law.jpg. Vous pouvez ajouter tout le texte. Puis en dessous, l'élément p de notre texte de loi. Pour enregistrer un peu de saisie, vous pouvez les taper si vous le souhaitez, mais je vais juste dupliquer ceci pour chacun de nos éléments. Le second est l'image de construction, tout le texte, le texte à afficher. Ensuite, le prochain sera pour notre ingénierie. Le quatrième est pour la science. C' est un juste ici. Le numéro 5 est l'architecte. Enfin, nous avons les affaires. Sauvegardons ceci et voyons où nous en sommes à l'intérieur du navigateur. Rafraîchir. Nous avons donc obtenu le droit, la construction, ingénierie, la science, l'architecte et les affaires, et toutes les images sont correctement liées. Comme vous vous y attendez, cela ne semble pas trop grand si nous étirons le navigateur, mais pour l'instant, nous allons juste se concentrer sur cette première approche mobile. Passez à la version finale. Nous n'avons pas besoin de faire beaucoup de style pour cette petite vue d'écran, puisque les images sont déjà étirées pour être la pleine largeur de l'écran. Ce que nous devons faire est de rendre la taille de la police plus grande et aussi ajouter un effet de survol aussi. Commençons par sélectionner notre grille individuelle. Ensuite, nous pouvons aligner le texte au centre et agrandir la taille de la police. Maintenant en bas, bouton inférieur, votre rappeur était l'élément de grille. Sélectionnez le texte. Ensuite, vous pouvez pousser cela au centre et également définir la taille de la police à 1.8rems. Bien, ça a l'air mieux maintenant. Ensuite, nous allons appliquer l'effet de survol. Lorsque la souris survole chacune de ces sections. Pour cela, nous pourrions appliquer beaucoup d'effets différents, mais tout ce que je vais faire est de régler la luminosité et aussi l'échelle. Une fois de plus, nous appliquons ceci à la grille complète, qui a la classe de grid-item. J' ai eu l'effet de vol stationnaire. Ensuite, nous pouvons appliquer un filtre CSS où nous allons ajuster la luminosité. La luminosité est une valeur comprise entre zéro et un. Donc, un zéro. Cela va rendre la section vraiment sombre. Si nous définissons ceci pour être un, c'est juste l'état d'origine. Juste pour donner à cela un léger changement subtil, nous allons définir ceci sur 0.9, rend un peu plus sombre à chaque fois que nous survolons ces images. En plus de cela, aussi une transformation où nous allons définir l'échelle à 1.01. Enfin, le curseur du pointeur par. De plus, notre transformation fonctionne aussi si nous survolons l'une de ces sections. Juste pour terminer cette section, nous devons travailler avec le titre populaire des cours. Si nous faisons défiler vers le haut, cela était contenu dans un titre de niveau 3. Prenons ça, h3. Comme avec d'autres types d'en-têtes, nous avons également une marge de navigateur par défaut, que nous pouvons supprimer en définissant cette marge sur zéro. Si nous actualisons, cela supprime désormais la marge du haut et du bas. Donc, nous sommes maintenant libres d'ajouter notre propre espacement de 2rems en haut et en bas et zéro à gauche et à droite. Le texte aligné du centre, ainsi que la taille de la police. Cela augmente également pour être 1.8rems. Bien. Nous pouvons voir que le titre de niveau 3 est gras par défaut. Si nous le voulons, nous pourrions également définir le poids de la police pour être normal. Cela supprimerait l'effet gras. Bien. Voici notre section maintenant terminée pour la vue mobile. Plus tard, nous reviendrons sur cela et la transformerons en une mise en page de type grille avec une vue plus large. Mais pour l'instant, tout va bien. Nous continuerons ensuite avec les sections restantes. Je te vois dans la prochaine vidéo. 18. Contenu HTML final: Déplacer en dessous de cette section de grille que vous avez créée dans les vidéos précédentes. Nous allons ajouter que le reste du contenu HTML dont nous avons besoin pour ce projet sur la version finale, comme ici. C' est la section sportive, qui va avoir l'image sur la gauche et le texte sur la droite, puis la zone de pied de page en bas. Comme pour les autres sections, cela sera également pleinement réactif. Si nous réduisons cela à un écran mobile, le contenu sera empilé verticalement et placé en haut de la section pied de page. Cette vidéo, nous allons juste créer le contenu HTML et dans la vidéo à venir, nous allons ajouter le style CSS dans pour que cela ressemble bien. Ensuite, nous allons ajouter quelques requêtes multimédias pour rendre cela bien paraître sur le plus grand écran. Revenons à notre index.html et en dessous de la dernière section que nous avons créée, créez une section de plus. Ça va avoir la classe de sport. C' est pour la section des sports. Ça va être assez simple. Il aura juste un div en haut qui va contenir une image. Puis une seconde qui contiendra le texte. Ayant ces deux sections ci-dessous, je devais utiliser la flexbox CSS pour contrôler la mise en page sur différentes tailles d'écran. Le premier div, puis le deuxième div. Le premier va contenir une image. Une image dont nous avons besoin a été fournie dans le dossier images. Celui-ci est le volleyball.jpg et aussi le texte alt. C' est tout ce dont nous avons besoin pour cette première section. C' est assez simple. Dans la section suivante, il s'agit d'un titre de niveau 3. Avec le texte de découvrir nos nouvelles installations sportives. Si nous regardons la version finale, nous voyons si nous survolons le mot ici. Ce sera un lien vers une page d'installations sportives. Nous n'avons pas cette page, mais vous pouvez créer si vous le souhaitez et en faire un lien. Nous pouvons envelopper ce mot à l'intérieur de l'élément « a ». Placez ça et c'est toujours dans notre h3. Le texte ici. Maintenant, nous allons juste relier ça à notre page d'accueil. Vers le navigateur et faites défiler vers le bas et nous pouvons maintenant voir notre nouveau contenu vers le bas. Par défaut, ce type de mise en page semble bien sur un appareil mobile car l'image est empilée au-dessus du texte, sorte que vous n'avez pas trop de travail à faire dans le CSS pour cette section. Mais tout comme la section de grille ci-dessus, nous devons également appliquer des styles différents. Mais cela quand nous arrivons à un écran plus grand. Ensuite, la zone de pied de page juste en dessous de la section sportive, le h3, et c'est le texte de chercher plus. Ensuite, cette zone de pied de page contiendra juste une série de liens, que nous pouvons placer juste en dessous de cela et aussi nous les placerons côte à côte sur la vue plus grande. Cela peut aller à l'intérieur d'une liste non ordonnée et notre premier élément de liste, en fait, tous les éléments de liste seront placés dans un élément de lien. Le premier est le texte de, visite virtuelle. Tout comme avec ces installations sportives, vous pouvez également créer toutes ces pages supplémentaires si vous le souhaitez. Je vais vous donner plus de pratique à créer de nouvelles pages. Mais je vais simplement copier cet élément de liste et coller juste en dessous. Le deuxième lien est pour télécharger notre guide complet. Après cela, celui-ci était, entendre les témoignages d'étudiants. La quatrième et dernière est, réserver une séance d'information. Bien. Donnez ceci une sauvegarde et aussi le navigateur, en bas, et par défaut, tous ces éléments vont être en ligne puisque nous avons déjà créé quelques CSS dans les vidéos précédentes. Mais nous allons corriger cela dans la prochaine vidéo. Tout ce que nous avons à faire pour le dernier du HTML est de créer cette section de copyright en bas. Nous pouvons le faire dans un simple élément p. Nous avons besoin de ce texto de l'université de technologie. Mais si nous regardons la version finale, nous voyons ce symbole de copyright juste ici. C' est ce qu'on appelle une entité HTML. Une entité HTML est un shortcode qui nous permet de placer dans un symbole à l'intérieur de notre fichier HTML. Si vous voulez voir plus de ces symboles qui sont disponibles, il y a un site Web pratique appelé unicode-table.com, et nous pouvons rechercher beaucoup de différents types de symboles que vous voulez, tels que emojis, nous pouvons rechercher des flèches et tous les de personnages différents dont nous avons besoin dans nos projets. Si nous avions besoin d'une flèche, par exemple, nous pourrions chercher cela. Ensuite, nous pouvons sélectionner celui que vous voulez, et nous verrons sur la droite nous avons quelques codes différents que nous pouvons ajouter à notre projet. C' est ce dont nous avons besoin pour notre HTML juste ici, qui est l'esperluette et il se termine par un point-virgule. Le code particulier dont nous avons besoin pour le symbole de copyright commence également par l'esperluette est simplement le mot copie suivi d'un point-virgule. Aussi nos projets, et nous pouvons juste voir cela en bas du pied de page. C' est maintenant tout le contenu dont nous avons besoin pour ce projet, et dans le reste des vidéos de cette section. Nous allons nous concentrer sur le style et aussi nous venons de voir toutes les règles CSS, les appareils de différentes tailles. 19. CSS final pour petits écrans: Ce que nous avons jusqu'à présent, c'est tout le contenu HTML sur l'écran. Nous avons terminé les deux dernières sections, qui est cette section sportive juste ici, ainsi que la zone de pied de page avec les liens vers le bas. Cette vidéo va se concentrer sur le style de ces deux nouvelles sections. Rappelez-vous, la première section de la classe est le sport, et cela contient l'image et aussi le texte. Nous allons devoir centrer le texte au milieu de la div quelle que soit la taille de l'écran utilisée. Pour rendre cela plus facile, nous allons ajouter une classe à cette section, le wrapper. Ce sera le texte sportif. Sauvegardez ça. qui concerne nos feuilles de style, la toute première chose que je vais faire pour cette section est d'ajouter une nouvelle couleur d'arrière-plan, ça va être assez simple. Je vais juste ajouter une couleur claire, qui est eee. Plus au navigateur, c'est juste une couleur gris clair qui va juste séparer cela de moi d'autres sections. Ensuite, la classe que nous venons d'ajouter, qui était le sports-texte, ceci, nous avons besoin du type d'affichage pour être flex, ce qui nous permettra de régler la direction flex verticalement et aussi horizontalement. Cela restera au milieu de la div quelle que soit la taille de l'écran. Tout d'abord, juste par contenu dans le centre. Ensuite, alignez également les éléments au centre en ayant ces deux propriétés définies. Cela signifie que si nous avons la direction flexible pour être une ligne ou une colonne, le texte sera toujours centré au milieu de cette div. Un peu de rembourrage pour le rendre un peu plus grand de deux rems. Même avec cet espacement supplémentaire, nous voyons toujours le texte est centré verticalement et horizontalement. Nous pouvons rendre ce niveau 3 un peu plus grand. Appliquons seulement ceci à la section du texte sportif. Prenez le titre de niveau 3 et augmentez la taille de la police à 2,2 rems. Juste pour souligner le lien, vous voyez que je vais faire cette italique et pour ce faire, nous pouvons saisir cette section particulière. C' était le lien, juste ici sont la classe de italique. Ensuite, nous pouvons saisir cela dans notre CSS. C' était une classe, donc nous utilisons le point. Maintenant, ce que nous devons faire ici, est de définir le style de police, de lui donner une valeur en italique. On y va. Cela a maintenant été appliqué. C' est tout ce que nous avons à faire pour cette section, c'est assez simple. Maintenant, nous pouvons descendre à la zone de pied de page. Tout d'abord, saisissez l'élément de pied de page, qui est le wrapper. Ce que nous allons entendre ici, c'est d'aligner tout le texte au centre de la section. Nous pouvons changer la couleur de fond et aussi la couleur du texte aussi. Pour commencer, le texte aligné du centre. Bien, nous allons faire ces liens empilés verticalement dans un instant, mais nous devrons l'appliquer à la liste non ordonnée. Avant de le faire, nous continuerons avec la section d'arrière-plan, qui sera une valeur RVB de 62, 61, 61. Maintenant, je ne peux pas voir le texte parce que notre couleur de texte est maintenant la même que ce fond que nous venons de définir. Pour compenser cela, définissez la couleur de cette section qui s'appliquera au texte de ddd. On y va. Nous avons également besoin d'un rembourrage en bas pour nous donner un peu d'espacement. Ajoutez une valeur de remplissage au bas d'un rem. Ensuite, nous pouvons sélectionner le pied de page liste non ordonnée et nous assurer que tous les liens sont placés verticalement sur la page. Le pied de page est comme la liste non ordonnée à l'intérieur. Tout ce que nous devons faire pour cela est de définir le type d'affichage pour être égal à flex. Par défaut, la direction de flexion est rangée, donc nous devons changer cela pour être une direction de flexion de colonne. Tout comme avec la version finale, nous allons revenir à une direction flexible de ligne dans une vidéo ultérieure. Ceux-ci traversent la page sur la vue plus grande. Maintenant, continuons avec la vue à petit écran et ajoutons un peu d'espacement entre chacun de ces liens. Ensuite, la taille de la police de 1,8 rems. La liste non ordonnée aura également une marge par défaut afin que nous puissions le supprimer. Nous pouvons voir que dès que nous supprimerons cela, cela est maintenant redevenu plus proche de notre titre. Si nous commençons simplement ceci et actualisons, nous pouvons voir qu'il y a plus d'espacement appliqué en haut. Mais l'espace entre chacun de ces éléments, nous devons cibler l'élément de liste. Encore une fois, dans la section pied de page, ce remplissage ne s'applique qu'à cette zone. N' oubliez pas que nous ne voulons pas que cela s'applique à tous les éléments de notre liste, car nous les avons également dans la zone d'en-tête. Pour cela, un peu de rembourrage est bien. Pour que cela s'applique en haut et en bas, nous ajouterons à 1,6 rems pour la première valeur, puis 0 à gauche et à droite. On y va. La toute dernière chose que nous devons faire pour cette section est d'augmenter la taille de la police de la zone de copyright. A l'intérieur du index.html. En bas tout en bas, nous appliquons ceci à l'intérieur de l'élément P. Pour le pied de page, recadrez les éléments p et la taille de la police. Optez pour 1.6 rems. Tout cela est maintenant terminé pour l'affichage de l'écran mobile. Dans les prochaines vidéos, nous commencerons à jeter un oeil sur la façon dont nous pouvons appliquer les requêtes média aux deux côtés, ce qui rendra notre projet agréable sur tous les appareils à écran. 20. Requêtes médias CSS et style final: Pour nous aider à ajouter un style et une mise en page supplémentaires pour notre vue plus large, nous allons utiliser certaines requêtes de médias CSS. Une requête média est un moyen pour nous d'appliquer différentes propriétés CSS, avec différents types de médias. Avec les écrans, nous pouvons spécifier à quelles tailles d'écran nous voulons que cela s'applique. Si vous voulez qu'ils s'appliquent uniquement à un paysage ou une orientation portrait, si la résolution de l'écran est haute densité, et beaucoup d'autres options. Pour ce faire à l'intérieur de notre feuille de style, nous utilisons la règle @media, puis nous allons ajouter nos conditions à l'intérieur des crochets. Une chose courante est d'appliquer ces règles CSS uniquement si la largeur de l'écran est une taille minimale ou maximale. Tout comme nous l'avons regardé avec les images réactives, nous pourrions définir quelque chose comme la largeur minimale pour être une certaine valeur telle que 900 pixels, et à l'intérieur de ces accolades, tout ce que nous avons à faire est d'écrire notre code CSS exactement comme nous avons déjà fait. Ensuite, en utilisant cet exemple, tous les CSS à l'intérieur d'ici ne s'appliqueront que lorsque la largeur minimale du navigateur est de 900 pixels de large. Comme mentionné, vous pouvez faire des choses aussi, qui sont certainement la largeur maximale. On pourrait définir l'orientation. C' est plus pour les appareils mobiles ou portables, mais nous pourrions vérifier si l'appareil est tourné portrait ou paysage. Nous avons une recherche en ligne pour les requêtes de médias CSS, si vous voulez en savoir plus sur les différents types disponibles. Avec ce projet, je vais m'en tenir à la largeur de l'écran, car c'est vraiment général et s'applique à beaucoup de cas d'utilisation différents. Tout ce que nous avons actuellement ci-dessus juste ici, cela s'appliquera toujours à la vue à petit écran. Ensuite, ce que nous allons faire est de remplacer cela pour le plus grand écran. A partir du haut de notre projet, encore une fois, nous écrivons simplement ce CSS comme nous le ferions normalement. Pour cet en-tête, si nous le rendons un peu plus large, nous voulons que cette icône ou ce logo apparaisse sur la gauche. Puis ils se sont liés sur la droite. Pour ce faire, si nous revenons à notre section d'en-tête d'origine, nous avons déjà défini le type d'affichage sur flex. Nous n'avons pas besoin de définir cela à nouveau puisque nous avons déjà spécifié ceci ici. Mais ce que nous devons faire est de remplacer l'une de ces valeurs que vous voulez modifier. L' une des choses que nous devons changer est cette direction flexible. Plutôt que d'être dans la direction de la colonne comme nous l' avons ici, nous devons définir ceci comme une ligne. Allez à notre requête média. Faisons ça d'abord. La direction de flexion, la ligne. Cela prend désormais effet puisque nous avons atteint la taille de l'écran de plus de 900 pixels. Rétrécir cela, nous pouvons voir une fois que nous passons en dessous de 900, il est maintenant retourné à notre direction de flexion d'origine. Pour ajouter notre espacement entre les deux, nous pouvons définir la propriété de contenu de justification et utiliser une valeur appelée espace entre. Cela ne distribuera que tous les espaces blancs disponibles entre tous les éléments. Cela fonctionne peu importe le nombre d'éléments que nous avons dans notre en-tête. Si nous avions trois éléments différents, tous les espacements s'appliqueraient également entre ces trois sections. La dernière chose à faire pour cet en-tête, si nous regardons sur la droite, nous avons un espacement à droite de nos liens et nous devons également faire correspondre cela sur le côté gauche. Retournez au sommet. Faites défiler vers le bas jusqu'à nos articles de liste et nous pouvons voir que nous avons ajouté 10 pixels de marge à gauche et à droite, Votre solde est en hausse, descendez à notre section d'en-tête et puis nous pouvons définir cette 10 pixels de marge à appliquer uniquement sur le côté gauche. Enregistrer, et plus dans le navigateur. Cela correspond maintenant aux deux côtés. Ensuite, jusqu'à la section superposition, nous n'avons pas trop à faire pour cela. Nous avons déjà configuré une image réactive en arrière-plan. Tout ce que je vais faire, c'est la taille de la police et rendre cette section un peu plus grande. Ce sont la classe de superposition de texte. Taille de la police. Essayons 2.2 rems. Rends-le un peu plus grand, 3.4. Nous pouvons également augmenter la valeur [inaudible] pour ajouter un peu plus d'espace à l'intérieur. Allons-y huit rems. faisant défiler jusqu'à notre section Cours populaires, ce que nous devons faire pour cela est de définir le type d'affichage CSS pour être égal à la grille et cela nous donnera cette mise en page de style de grille que nous voyons sur la version finale. Pour ce faire, nous devons d'abord sélectionner les éléments du parent pour tous nos éléments de grille. Cela a cette classe de cours. Ensuite, chaque section individuelle a la classe de l'élément de grille. Tout d'abord, nous allons chez les parents, qui a la classe des cours, puis nous définissons le type d'affichage pour être grille. Si nous rechargeons le navigateur, nous ne voyons aucun changement pour le moment. C' est parce que nous devons dire au navigateur combien de colonnes et lignes nous voulons utiliser pour créer notre grille pour les colonnes. Nous devons ajouter le modèle de grille, la propriété columns. Le nombre de valeurs que nous ajoutons ici détermine le nombre de colonnes que nous avons sur notre page. La version finale comporte trois colonnes différentes. Ce que nous pouvons faire est de définir trois tailles distinctes, telles que 200 pixels, 100 pixels et 300. Actualiser. Nous pouvons voir ici pour notre première colonne, nous avons la valeur de 200 pixels de large. Nous avons ensuite 100, puis 300, que nous avons mis juste ici. Nous pourrions également en faire la même valeur, ou au lieu de rendre les choses encore plus faciles, nous pouvons utiliser une fonction de répétition. Ensuite, nous pouvons passer en deux valeurs. Le premier est le nombre de colonnes que vous voulez créer, puis la deuxième valeur est la largeur de chacune de nos colonnes. Si nous voulons que chacune de ces colonnes ait une quantité égale de largeur, nous pouvons définir ceci sur 1fr. L' unité fractionnée lorsqu'elle est utilisée avec la grille signifie qu'elle calculera automatiquement les photos de largeur et s'assurera que toutes nos trois colonnes sont égales. Actualiser et cela prend désormais effet. Nous pouvons faire exactement la même chose pour les lignes de modèle de grille et nous pouvons définir la hauteur exacte que nous voulons pour chacune de ces sections. Mais nous n'avons pas besoin de le faire parce que si nous ajoutons simplement les colonnes comme nous avons ici, chaque fois que nous ajoutons une nouvelle section ou un nouvel élément de grille, cela va alors automatiquement circuler sur la ligne suivante. Si vous voulez un peu d'espace entre chacun de ces éléments de grille, ce que nous pouvons également ajouter est l'écart de grille. Définissez ceci sur n'importe quelle valeur CSS telle que deux rems. Cet écart de grille n'apparaîtra qu'entre chacun de ces éléments de grille. Il ne s'applique pas à gauche et à droite, ni au haut et au bas. Si vous souhaitez appliquer un espacement autour du bord extérieur, nous devons appliquer une marge ou un rembourrage. C' est ce que je vais faire en bas. Il dit un peu de rembourrage, juste au bas de ces éléments et nous allons garder la même chose de deux rems rafraichir. À côté du style pour chacun de ces cours, et chacun d'entre eux a la classe de l'élément de grille. Pour cela, placez une bordure autour de chacun d'un pixel, une ligne pleine et la couleur du gris clair. On peut arrondir les coins avec un rayon de bordure. Juste une petite valeur est bien, alors essayons trois pixels. Ça a l'air bien. Ce que nous voulons faire, nous pouvons voir le rayon de bordure en bas, mais en haut, nous voulons également faire correspondre les coins arrondis pour cette image d'arrière-plan. Là où nous pouvons faire cela est de sélectionner à nouveau l'élément de la grille, puis appliquer à toutes les images de cette section. Nous pouvons définir les propriétés individuelles de border-rayon, et nous pouvons ajouter quatre valeurs individuelles en haut à gauche, haut à droite, en bas à droite et en bas à gauche. Tout d'abord, en haut à gauche de trois pixels. Trois pixels en haut à droite, et nous ne voulons pas que le bas à droite ou le bas à gauche soient arrondis, donc j'ai défini les deux dernières valeurs à zéro. Même cela contournerait les coins des quatre côtés de notre élément de grille. Après cela, nous avons la section sport juste en dessous, et pour cela, nous allons utiliser la direction flex. Collez l'image à côté de ce texte. Si nous passons à notre index ou html, et faites défiler vers le bas est la section complète a la classe de sports, définissez le temps d'affichage pour être flex. N' oubliez pas que lorsque nous utilisons la boîte flexible, la direction de flexion par défaut sera rangée. Nous n'avons pas besoin d'inclure cela, car c'est par défaut, cela placera automatiquement notre contenu dans une rangée. Si nous réduisons le navigateur, nous pouvons voir que ce type d'affichage de flex ne s'appliquera que sur cette vue grand écran. Regardez de près en bas de l'image, nous pouvons voir cette ligne blanche en face. C' est quelque chose qui peut être [inaudible] si vous commencez juste à construire des sites Web. Il peut également être difficile à diagnostiquer, car l'espacement n'est pas appliqué avec une marge ou un rembourrage. En fait, j'ai écrit un billet de blog à ce sujet, et si nous allons sur mon site Web, nous pouvons voir exactement pourquoi cet espacement blanc s'appliquera. Cette image a également le même problème d'espace blanc en bas. Cela se produit parce que par défaut, un élément image est dit être en ligne. Les éléments en ligne apparaîtront sur la page par défaut. Si nous configurons 10 images différentes, celles-ci essaieraient de prendre tout l'espace disponible sur la même rangée, puis de descendre à la ligne suivante. Le contraire est un élément de niveau bloc, et cela apparaîtra automatiquement sur une nouvelle ligne. La raison pour laquelle le navigateur ajoute cet espace blanc au bas des éléments en ligne est que de nombreux éléments en ligne, tels qu'un span, peuvent également contenir du texte. Si nous considérons ce texte, que vous voyez juste ici avec la lettre P et aussi le G tombe au-dessous de la ligne de base du reste du texte, et c'est cette section inférieure qui s'appelle le descendant, qui est la raison pourquoi le navigateur ajoutera de l'espace en bas. Si le navigateur n'a pas ajouté d'espace en bas des éléments, le bas de ce P et aussi le G, peut-être coupé. Mais dans notre cas, nous utilisons une image plutôt que du texte, donc nous n'avons pas besoin de tenir compte de cet espace blanc en bas. Il y a quelques façons différentes que nous pouvons contourner ces, et l'une des façons les plus simples est d'utiliser définir le type d'affichage pour être bloc. Cela remplacera le type en ligne que nous avons par défaut, actualiser, et maintenant signifie que le navigateur ne permet pas l'espace blanc en bas de cet élément. C' est juste quelque chose à surveiller lorsque vous voyez espace blanc au bas d'une image. Retour à la requête média et juste en dessous de la section sport, nous devons nous assurer que l'image et aussi la zone de texte ont une quantité égale d'espace ou pour être plus spécifique, une quantité égale de largeur. Pour ce faire, nous pouvons saisir notre section sport, et la flex box a une propriété flex qui nous permettra d'appliquer une quantité égale de largeur à ces deux éléments enfants. Tout d'abord, prenez le wrapper, qui est la section sportive, puis tout div qui suit immédiatement ces éléments, définissez la valeur flex pour être égale à un, et puisque cette valeur flex de un s'appliquera à vous nos deux div enfants, donc à la fois celui-ci et aussi celui-ci, vous devriez maintenant avoir une quantité égale d'espace. Si nous ne définissons que le 1er div a la valeur flex d' un et que nous définissons le 2ème div pour avoir une valeur flex de 2, le 2ème div essaierait de prendre deux fois l'espace disponible en tant que 1er div, mais puisque nous avons ces valeurs comme égales, ils ne devraient pas être reflétés dans le navigateur. Mais nous voyons encore l'image est légèrement plus petite que cette section sur la droite. Allons dans les outils de développement. Sélectionnez cette section juste ici, et la raison pour laquelle cette zone verte autour de l'extérieur de cette div. Sélectionnez ceci et plus à la zone calculée, nous pouvons voir que nous avons 20 pixels de rembourrage appliqués aux quatre côtés. Pour que cela soit égal, nous pourrions supprimer ce rembourrage pour le grand écran. section a la classe des textes sportifs, donc il pourrait soit supprimer cela à l'intérieur de la requête média, soit nous pourrions faire défiler jusqu'à la section de texte sport d'origine, et nous ne pouvions appliquer ce rembourrage qu'en haut et en bas. Obtenez la valeur de zéro sur la gauche et la droite, actualiser, et cela semble maintenant beaucoup plus égal. Voyons à quoi cela ressemble sur le petit écran. Cela semble toujours très bien puisque nous avons déjà centré la détection à l'aide de la flex box. La dernière section à prendre en charge est la zone des pieds. Ça va être assez simple. Nous avons juste besoin de saisir les sections de pied de page sur la liste ordonnée et de changer la direction de flex pour être rangée. Ce pied de page, liste non ordonnée, directions flexibles pour être égal à la ligne, et ajouter l'espace est également sur la page, nous allons utiliser le contenu de justification. Sélectionnez l'espace uniformément, et nous y allons. Nous pouvons également vérifier que cela semble bon sur le petit écran. En haut, nous avons toujours toutes les propriétés CSS originales que nous avons appliquées dans les premières vidéos. Maintenant, si nous étirons le navigateur à plus de 900 pixels de large, notre contenu va maintenant s'ajuster pour s'adapter au plus grand écran. Nous avons du contenu côte à côte, nous avons une section de grille pour nos cours, texte plus grand et aussi un peu d'espace supplémentaire. J' espère que vous avez aimé construire un projet responsive, en utilisant les requêtes de médias CSS, les images réactives, ainsi que les tailles relatives de nos textes. Nous avons encore un projet à passer à l'endroit où nous allons utiliser un cadre. Je te verrai dans la prochaine section. 21. Introduction à Bootstrap et configuration: Bonjour à tous, et bienvenue à Learn HTML et CSS en Building 3 Real Projects. Félicitations pour l'arrivée au troisième projet. À ce jour, nous avons construit un site web statique et aussi un site web entièrement réactif. Ensuite, nous voulons passer à un projet hôtelier, qui va être construit avec le populaire framework Twitter Bootstrap. Voici un aperçu de ce que nous voulons intégrer. C' est à nouveau un site web réactif complet, ce qui signifie que nous pouvons le réduire et qu'il semble bien sur différents appareils. Il va inclure un carrousel coulissant montrant différentes images. Il y aura une boîte de recherche et une navigation dans la zone supérieure. Nous inclurons également les menus déroulants dans les différentes sections ci-dessous. Je vais montrer comment nous pouvons construire un beau site Web comme celui-ci très rapide et vraiment facile en utilisant Bootstrap. La première chose que nous devons faire est si nous allons sur getbootstrap.com. Nous allons jeter un coup d'oeil sur le site, mais nous allons d'abord cliquer sur le bouton « Télécharger Bootstrap » et le lien Bootstrap sur la gauche. Jetons un coup d'oeil sur le site pendant qu'il est en train de télécharger. Dans la section Mise en route, il y a différents bits d'informations, des modèles que vous pouvez utiliser pour commencer rapidement. Il vous montre toutes les structures de fichiers et de dossiers pour les différents téléchargements que vous pouvez utiliser ainsi que le modèle de base. Ce sera le modèle que nous allons utiliser pour notre page d'index. Plus bas, il y a plus d'exemples et de petits modèles que vous pouvez utiliser pour commencer très rapidement. De retour en haut, il y a aussi la section CSS. Maintenant, le CSS vous donne un aperçu de tous les différents composants disponibles. Nous pouvons regarder des tableaux, des formulaires, des boutons, par exemple, et si vous cliquez simplement sur l'un de ceux-ci, il vous montre comment faire un bouton dans Bootstrap. C' est très simple et tout le CSS est déjà pré-compilé. Instantanément, vous obtiendrez un beau site Web. Dans la section des composants, nous pouvons regarder les glyphicons. Bootstrap est livré prêt avec toutes ces icônes disponibles à utiliser sans frais supplémentaires. Il y a aussi des exemples de barres de navigation et les différents composants tels que les étiquettes et les en-têtes. On va regarder l'exemple de code. Beaucoup de choses sont assez similaires à ce que nous avons déjà appris. Nous avons juste besoin d'appliquer les classes Bootstrap pour le lier au CSS. Nous allons jeter un oeil au JavaScript inclus. Maintenant, le JavaScript fournit toutes sortes d'effets. Il y a des choses comme les transitions, et ce que nous allons examiner, c'est le carrousel. Nous utiliserons le code ci-dessous pour ajouter le carrousel à notre site Web. Bootstrap aurait dû télécharger maintenant. Si vous allez aux téléchargements, nous le décompresserons. Si nous copions simplement le dossier complet, et si nous retournons dans le projet, et nous le collons dans le projet et nous allons renommer cela. Nous appellerons ce dossier MyHotel, et si nous ouvrons le dossier, nous devrons faire glisser nos images là-dedans. Vous devriez avoir déjà téléchargé les images dont vous avez besoin pour ce projet. Sinon, retournez en arrière et téléchargez-les maintenant. Comme la plupart des fichiers et dossiers sont configurés pour le projet Bootstrap, il suffit d'ajouter la page d'index. Si vous allez dans votre éditeur de texte et nous aurons besoin de fichiers et d'ouvrir le dossier, et sur notre bureau, nous avons les projets. J' irai à MyHotel, et la première chose que nous devons faire est d'aller à File and New, et nous allons enregistrer cela comme notre page d'index, index.html. Revenons dans le site Web Bootstrap, et si nous revenons à la section Démarrage, si nous faisons défiler vers le bas jusqu'au modèle de base, et nous allons simplement copier cela, puis nous allons coller cela dans notre page d'index. Comme vous pouvez le voir, si nous regardons de haut en bas, il inclut toute la même structure que nous avons incluse dans les deux premiers sites Web, et il y a un lien vers les feuilles de style Bootstrap. Il y a aussi la balise viewport pour la réactivité. La première chose que nous allons faire est de changer le titre de la page et nous l'appellerons MyHotel. Le lien vers le CSS Bootstrap est déjà inclus, donc nous n'avons pas encore besoin de faire quoi que ce soit avec cela. Également inclus par défaut est le Shiv HTML5, que nous avons inclus dans les deux premiers projets, donc tout est en place. On va juste jeter un coup d'oeil à ça sur l'aperçu. C' est le framework Bootstrap tout le paramétrage et prêt à partir. Ensuite, nous examinerons l'ajout de la barre de navigation. 22. Ajouter la barre de navigation réactive: Salut, tout le monde, et bienvenue. Nous avons notre projet Bootstrap tout mis en place maintenant. Ce que nous voulons faire est de commencer à travailler sur la barre de navigation supérieure là-bas. Si nous commençons simplement par supprimer l'en-tête Hello, monde. Nous revenons sur getbootstrap.com. Si nous sélectionnons la section Composants en haut, nous devons regarder vers le bas la liste et trouver la section Navbar. Ce que nous allons faire, c'est copier la barre de navigation standard là-bas. Si vous copiez le codeur là, je vais le coller dans le haut de la section du corps. La première chose que nous voulons faire est que nous allons juste changer le récipient de liquide juste au conteneur standard. Je vais supprimer les commentaires aussi, et comme vous pouvez le voir, Bootstrap fournit un commentaire à la fin de chaque fermeture là, afin que nous puissions voir exactement où nous en sommes. Donc, la première chose que je veux faire, si nous regardons notre exemple, nous devons mettre notre nom MyHotel là et commencer quatre liens en haut. À l'heure actuelle, la marque est le texte de l'espace réservé. Donc nous allons changer ça en MyHotel. Les quatre liens en haut, ce que nous devons faire est si nous recherchons la liste non ordonnée, qui est là, et les éléments individuels de la liste qui est là. Le premier, si nous changeons le texte du lien en « RESTER AVEC NOUS ». Ensuite, le deuxième lien sera « RESTAURANTS ». Si consultez notre aperçu et qui a l'air super. Vous remarquerez qu'il y a une navigation déroulante là-bas. Nous voulons nous en débarrasser pour cet exemple. Donc, ce que nous allons faire est si nous cherchons la liste avec la classe de liste déroulante et nous allons juste supprimer le, Je suis juste à la recherche de l'élément de la liste de fermeture là-bas, avant les dernières listes non ordonnées. Donc, si nous sélectionnons cela et quittons cette section, ce que nous allons faire est de copier l'élément de liste et nous le collerons deux fois. Ok, c'est très bien. On va changer le texte. Le suivant veut être « SPA INSTALLATIONS ». Le dernier veut être le lien « Mariages ». Je veux séparer ceci un peu pour que nous puissions le voir plus clairement. Ensuite, nous avons le formulaire. Cette section de formulaire est la zone de recherche là-bas. Vous pouvez voir qu'il y a le type d'entrée de texte, qui est l'endroit où nous mettons le texte de recherche dans. Il y a aussi le bouton Soumettre que nous avons utilisé dans le premier projet. Ensuite, nous voyons des listes non ordonnées sur le côté droit, qui a la classe Navbar droite. Si nous étirons la page plus large, nous verrons que le flux est le bon. Sur les écrans plus petits, ils descendent à la position ci-dessous. Encore une fois, nous allons changer le nom de nos liens. Donc, le lien affiché sur la gauche, nous allons localiser dans la liste non ordonnée, le premier élément de liste. Le premier lien, si nous regardons notre projet final sera « CONTACTEZ NOUS ». Nous voulons modifier les textes déroulants. Je vais changer ça en « DÉCOUVREZ ». Consultez notre aperçu. Ok, ça a l'air super. Notre prochain est de changer les noms, les éléments de la liste sont dans le menu déroulant. Nous devons trouver le premier élément de la liste qui commence par l'action, qui est juste là, et nous voulons changer le nôtre vers le lien « ENVIRONNEMENT NATUREL », puis « OÙ VISITER », « PRENEZ UNE TOUR ». Enfin, la section « ENTREPRISE ». Ok, tous nos articles de liste sont en place. Ensuite, nous devons mettre la petite image du téléphone là-bas et vendre notre projet. Nous le faisons donc en revenant sur le site bootstrap.com. Nous allons à la section Composant et nous faisons défiler vers le bas et regardons les icônes de glyphe. Ce que nous devons faire, c'est trouver les exemples. Si vous cliquez sur l'exemple de code là, et nous voulons le placer juste avant le texte CONTACTEZ NOUS. Mettons cela sur une nouvelle ligne et qui rythme l'exemple. Si nous vérifions notre page web plus tôt, c'est une loupe, c'est juste l'exemple dans lequel nous avons utilisé sur le site. Si on localise le téléphone, que je veux utiliser. C' est du glyphicon, du glyphicon-écouteur. Donc si on retourne dans notre classe, c'est glyphicon, recherche glyphicon. On a juste besoin de changer la recherche en écouteurs. Consultez notre aperçu. On y va. Il y a une photo du téléphone en place. Donc c'est notre navbar fini. Il a l'air génial prêt à l'emploi en raison de tous les CSS Bootstrap, qui est déjà prédéfini, nous pouvons remplacer tous les styles Preset, mais nous allons le laisser tel qu'il est pour l'instant. Ensuite, nous allons regarder le carrousel. 23. Inclure le carrousel et la zone marketing: Bienvenue de retour. Dans la dernière vidéo, nous avons terminé la barre de navigation. Ensuite, nous allons commencer à travailler vers le bas sur notre page Web et inclure le curseur. Si nous revenons à getbootstrap.com, nous devons sélectionner la section JavaScript. Dans le menu à droite, si nous cherchons simplement le carrousel sur notre texte, jusqu'à l'exemple du carrousel. abord, si nous copions le code, puis sous notre type de navigation de fermeture, nous allons simplement le coller dans et regarder notre aperçu. Il n'a pas l'air beaucoup maintenant, mais nous allons changer le CSS et nous allons ajouter quelques images pour le rendre meilleur. Commençons par ajouter nos images. Si nous descendons à l'enveloppe pour les diapositives, ce que nous devons faire est de rencontrer dans la source de l'image, chemin vers nos images. Dans le dossier images, les deux images que nous allons utiliser sont l'entrée et la piscine. Nous sélectionnons les images de la piscine. Nous allons juste utiliser le texte de l'image de la piscine. Dans la deuxième div ci-dessous, dans la source de l'image, nous ferons exactement la même chose. Dans le dossier images, celui-ci sera le entrance.jpg. Nous allons changer l'alt en image d'entrée, qui va supprimer les points, puis le lieu du texte afin que nous puissions mettre une légende sur l'image, mais nous n'avons pas besoin de cela. En outre, nous avons des cercles libres pour indiquer des images libres. Nous n'utilisons que deux images dans cet exemple, donc nous allons changer cela avec les éléments de la liste. Dans la section indicateur, il y a trois éléments de liste différents, nous allons simplement supprimer le troisième. Cela changera cela en deux indicateurs. On dirait que ça marche bien. Nous avons cliqué sur les flèches, et vous pouvez voir que nous pouvons changer l'image, et cela fonctionne bien. Une autre chose que je veux vous montrer est, si nous réduisons à une vue mobile, vous pouvez réellement voir que le menu descend à une boîte. Cela le rend beaucoup plus propre et compact sur les vues mobiles. Nous devons entourer l'ensemble du curseur dans un conteneur bootstrap. Nous devons donner à cela une classe div égale au conteneur, et nous allons juste fermer ça. Je vais juste copier la div de clôture. Nous mettrons ça au bas de la page. Il y avait aussi un conteneur que nous utilisons pour la section de navigation là-haut. Nous allons recommencer le conteneur. Tout le contenu d'amorçage doit se trouver dans ce conteneur. On va juste mettre quelques commentaires. Ça va être le carrousel, et ça va être la fin du carrousel. C' est la div de fermeture pour le conteneur. Laissons notre curseur finir. Si nous revenons au site Web getbootstrap, et si nous revenons dans la section de démarrage. Quand à la section ci-dessous le carrousel ici, si nous allons dans la section de démarrage de bootstrap et nous faisons défiler vers le bas jusqu'aux exemples, ce que nous voulons est le carrousel. Si nous allons dans cet exemple et cliquez avec le bouton droit et voir la source de la page, ce que nous devons faire est, dessous du numéro est le carrousel. Sous le carrousel, nous copierons les trois colonnes de texte sous le carrousel. On va retourner dans notre éditeur de texte. dessous de la div carrousel de fermeture, nous allons coller ça dans. On va juste prendre un butin à notre avant-première. Nous allons juste supprimer ces trois images circulaires. Si nous regardons la section des images sur les trois photos, nous y allons. abord, nous allons changer les trois titres différents dans les balises H2. Nous les ferons comme nos projets finis. Le premier sera, jamais loin. La deuxième balise H2 est, Visiteur fréquent. Le troisième, c'est les chambres qui vous conviennent. Nous allons changer le texte, donc le premier est, Jamais loin. Entre les balises P, nous voulons changer ce paragraphe en , Avec plus de 150 emplacements dans le monde, vous n'êtes jamais loin de nous. Le deuxième paragraphe va être, Rejoignez mon club d'hôtel pour des économies fantastiques et des récompenses de fidélité. Le troisième paragraphe est, Les forfaits sont disponibles pour tous les goûts et le budget. Appelez notre équipe amicale pour discuter. Maintenant, vérifions celle-là dans notre aperçu. Ensuite, nous voulons changer les trois boutons en bas. Si vous remarquez sur le projet fini, ils ont un fond bleu. Nous retournons dans le getbootstrap, retour à la section CSS. Si nous recherchons la section bouton sur la droite, vous remarquerez que nous utilisons le bouton par défaut. Si nous regardons en arrière dans la page d'index, nous allons regarder la classe et c'est bouton par défaut, qui est juste en haut de la page. Ce que nous voulons, c'est le bouton primaire, donc nous devons le changer en bouton-primaire. On va changer ça sur les trois boutons. On va vérifier ça sur l'aperçu. D'accord. Juste ce qu'on veut. Nous devons également changer le texte du bouton, donc nous vérifions les projets finis. Nous devons modifier la section des détails de la vue. Le premier sera les lieux, le second sera rejoindre notre club, et le troisième aura le nom de la vue des détails, donc nous allons juste garder cela tel quel et nous allons vérifier les changements. Ça a bien fonctionné. Tous les textes de la minute sont flottés sur le côté gauche. Nous voulons qu'il soit centralisé dans les trois divs. Nous faisons cela par classe [inaudible] à la ligne. Nous tapons simplement dans le centre de texte, ce qui rend tout bien centré. Je viens de finir avec cette section. Si vous nous rejoignez sur la prochaine vidéo, nous commencerons à regarder les fonctionnalités ci-dessous. On se voit là-bas. 24. Terminer avec la section à la une et le pied de page: Salut tout le monde, bienvenue. Dans la dernière vidéo, nous avons regardé l'ajout du carrousel et nous avons également ajouté les trois boutons ci-dessous, donc nous allons terminer ce site en ajoutant les fonctionnalités et aussi la section photo en bas. Donc, si nous revenons sur le site getboostrap.com dans la section de démarrage, nous allons utiliser le même exemple que nous avons utilisé pour le carrousel, qui est l'exemple du carrousel. Si vous faites un clic droit sur « View Source », nous allons copier la section ci-dessous, celle que nous avons copié la dernière fois donc si nous localisons le début du commentaire featurettes, puis nous allons tout le chemin vers le bas après la fin des fonctionnalités et nous allons également copier dans le pied de page. Nous n'avons pas besoin de copier dans le dernier conteneur parce que nous l'avons déjà dans notre site Web, alors copiez-le, puis nous devons aller juste en dessous la dernière ligne au-dessus du conteneur de fermeture, et nous le collons dans. Donc, tout le contenu maintenant en place dans le site il. Avant d'aller plus loin, je veux juste parler de la grille responsive dans bootstrap. Vous remarquerez qu'il existe différentes classes telles que col-md-7 et cinq, ce qu'elles sont c'est le nombre de colonnes. Si vous remarquez sur la première fonctionnalité, la taille de l'image est une grille de cinq colonnes, et le texte à gauche est une grille de sept colonnes. Donc c'est une grille de 12 colonnes que nous utilisons, donc les sept sur la gauche et les cinq sur la pleine largeur, et si nous regardons la dernière section que nous avons faite dans la dernière vidéo, les trois parties égales sont divisées en quatre colonnes chacune. C' est ainsi que nous exposons les choses dans Bootstrap, vous pouvez rendre les choses plus étroites ou plus larges en changeant le nombre de colonnes dans la grille. Donc, je vais passer à notre site Web fini, afin que nous puissions voir quoi taper. Donc, nous voulons d'abord commencer par le titre, donc si nous localisons le titre de fonctionnalité et supprimons la première section de titre de fonctionnalité, et nous appellerons ce paquet de mariage, puis la section de travée par la suite, nous allons changez cela en, sur mesure pour vous adapter. Ensuite, nous allons regarder les balises de paragraphe, qui est juste là, et nous allons juste y inclure le texte du site final. J' essaie juste de copier et de coller ça dans. On va vérifier notre aperçu, voir que tout va bien. Ensuite, nous allons mettre l'image là, et si nous changeons l'emplacement de l'image, et nous sommes tous dans le dossier Images, et en fait laissez-moi juste changer la source de données sur cela. Donc images/wedding.jpg pour le premier, nous allons changer la deuxième image aussi. Donc, le dossier images et nous allons ajouter l'image restaurant.jpg, et la troisième image, encore une fois, supprimer la source de données, et la troisième image est le spa.jpg. Ok, c'est toutes les images en place, on a juste besoin de changer le texte maintenant. Donc c'est la première section, et la partie centrale, sauvegarde d'aperçu, et nous copions juste le texte dedans, nous allons le mettre dans la section paragraphe. Donc, pour le titre, c'est un repas de première classe, et nous allons changer la partie voir par vous-même dans les étiquettes de span prises en charge par les chefs de classe mondiale, et puis le troisième et dernier, je vais juste copier dans le photographiez là-bas, et nous allons changer le titre. Alors découvrez nos installations de spa, et vous ne voudrez plus jamais partir. Ce qui est le seul aperçu de notre dormeur. Ok donc on passe à les coiffer dans une minute, on veut juste que le texte soit un peu plus grand. Tout d'abord, nous allons juste finir la zone de pied de page, donc nous allons juste changer le texte là-bas, et nous changerons ça en 2015, My Hotel. Pour ajouter les styles pour le texte, la façon la plus préférée de le faire dans Bootstrap est de remplacer nous créons votre CSS personnalisé. Donc si nous retournons dans la barre latérale et si nous allons dans Fichier, Nouveau, je vais créer une nouvelle feuille de style. Donc, nous allons enregistrer cela tout de suite, et nous allons appeler ce style.css, et nous allons vouloir placer cela dans le dossier CSS du thème bootstrap. Donc, nous allons enregistrer cela, puis nous retournons dans notre page d'index, et si nous revenons au sommet, nous voulons inclure notre propre CSS juste en dessous du tableau d'amorçage, donc le remplace. Donc, nous changeons le commentaire en CSS personnalisé, et c'est aussi dans le dossier CSS. Nous avons juste besoin de changer le nom en style.css. Donc, si nous retournons dans notre style.css, la première chose que nous voulons faire est que nous voulons augmenter la taille de la police. Donc, si nous retournons dans la page d'index et nous trouvons le besoin d'intersection pour la featurette, donc c'est le premier, puis le texte, le restaurant de première classe a une classe de titre de featurette. Donc, nous allons juste copier cela, et dans nos styles, et coller ça dans. Je veux juste ajouter un point en face de là si sa classe. Nous allons essayer la taille de la police, nous allons essayer ça avec 4ems. Ok, ça a l'air mieux, et nous avons commencé avec un peu de rembourrage sur le dessus, juste pour pousser un peu le texte vers le bas, et nous allons mettre ça à cinq pour cent, juste un peu plus, mettre à huit. Ok, ça a l'air mieux. Vous remarquerez combien il est plus rapide et plus facile de construire un site Web en utilisant un framework tel que Bootstrap, et n'hésitez pas à personnaliser ce site ou tout autre site autant que vous le souhaitez en utilisant le fichier CSS personnalisé, mais nous allons laissez le site Web à cela, nous avons maintenant un site Web entièrement réactif et très beau. Merci de nous rejoindre, et c'est la fin du projet de foire. 25. Merci et maintenant ?: Félicitations pour avoir terminé ce cours. J' espère que vous avez beaucoup appris sur HTML, CSS et Web design en général. Si vous apprendrez à construire un site Web personnel pour un passe-temps ou un site Web pour votre entreprise, vous devriez maintenant avoir les compétences requises pour le compléter. Ou si vous étiez à la recherche d'une nouvelle carrière, vous devriez maintenant avoir une bonne base sur laquelle bâtir. Si vous voulez continuer à apprendre, je vais maintenant vous recommander de passer à JavaScript et jQuery. Ensuite, peut-être un langage côté serveur tel que PHP. Il est également utile de se familiariser avec un système de gestion de contenu à utiliser sur votre site Web tel que WordPress ou Drupal. Encore une fois, merci d'avoir suivi ce cours, s'il vous plaît laisser un commentaire. Ça aiderait vraiment. J'espère que vous vous joindrez à moi pour un cours à l'avenir. 26. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare, et suivez-moi pour toute mise à jour et aussi être informé de tout nouveau cours au fur et à mesure qu'ils deviennent disponibles. Merci encore une fois, bonne chance, et j'espère que je vous reverrai dans un futur cours.