Coder son propre portfolio - les bases du HTML et du CSS

1. Intro: Salut, je m'appelle Aga et je suis designer, mais je peux aussi coder. Dans ces classes, nous allons au portefeuille des concepteurs de code, ce qui signifie que nous allons apprendre bases HTML et CSS en implémentant la mise en page étape par étape. Les concepteurs devraient coder ? Eh bien, tout le monde a sa propre réponse. Je vais aller plus loin dans ce débat. Mon objectif n'est pas de vous faire un développeur, mon objectif est de vous montrer que le code est un excellent outil pour les concepteurs UI et UX d'exprimer leurs idées dans l'environnement réel pour les projets, qui est un navigateur Web. Après le cours, vous serez en mesure de mieux transmettre vos projets aux développeurs et de mieux parler leur langue. En résumé, vous allez apprendre les balises HTML, bases CSS et les propriétés, implémenter les polices Google sur le site Web et utiliser devtools dans un navigateur Web. Le cours est dédié aux concepteurs UI et UX qui souhaitent commencer à apprendre HTML et CSS par des exemples pratiques. Une connaissance préalable du codage n'est pas requise. Nous couvrirons les bases étape par étape, sorte que vous serez en mesure de suivre facilement. J' espère que vous allez vous amuser, et enfin explorer que le codage est très utile. se voit dans la première leçon. 2. Les bases du HTML: Bienvenue à la première leçon, nous allons couvrir certaines choses cruciales pour commencer notre parcours de codage. Tout d'abord, nous allons apprendre quelques bases de codage en HTML CSS, et une fois que nous les connaissons, nous commencerons notre projet qui est un portfolio. Ce que nous allons avoir besoin, c'est d'un éditeur de code, je recommande de télécharger Atom. Atom est un logiciel libre très simple à utiliser. C' est un éditeur de code et vous pouvez le télécharger pour un mac, PC ou si vous êtes un utilisateur Linux. La prochaine chose est votre navigateur Web préféré. J' utilise Chrome mais n'hésitez pas à utiliser Firefox. La dernière chose dont nous avons besoin est un DevTools. DevTools nous aide à naviguer notre code et à expérimenter le CSS directement dans un navigateur Web. Mais ne vous inquiétez pas, pour l'instant, nous allons couvrir tous les détails pendant les leçons et les exercices. Nous allons également utiliser un paquet avec le matériel que j'ai préparé pour vous. Nous avons des fichiers et deux dossiers. On a un exercice dans le portefeuille. Dans le portefeuille, vous trouverez quelques actifs, images, et index HTML modèle que vous allez utiliser les exercices futurs. Vous pouvez télécharger le package avec le matériel de la section source sur le site du cours. Plongons dans la structure du document HTML, pour voir comment un site web très simple est construit. Chaque site commence par le Doctype. Qu' est-ce que Doctype ? Il s'agit d'une déclaration d'onglet de document, et il définit qu'il s'agit du document HTML réel. Il donne également des informations au navigateur que c'est le site qui doit être rendu. Il fournit également les informations sur la version du document HTML. Pour l'instant, il suffit de le prendre pour acquis. Nous n'allons pas entrer dans les détails. La prochaine chose est le père de toutes les balises HTML, qui est HTML. Comme vous pouvez le voir, c'est la balise ouverte, dans cette deuxième ligne, et à la toute dernière ligne du document, nous avons la balise de fermeture de HTML. Il donne des informations que nous sommes en train d'écrire du code HTML, et c'est le document HTML. La balise HTML est suivie par la tête et le corps. Qu' est-ce qu'il y a entre moitié texte ? Tout ce qu'il est mis là, il n'est en fait affiché nulle part, mais c'est très crucial en termes de recherche Google et le navigateur. Nous avons le titre, balise et le titre montre le titre et le navigateur Web. Nous avons également quelques liens et importations vers des fichiers externes et internes. Mais ne vous inquiétez pas pour l'instant, nous avons la section de la tête couverte. Qu' est-ce qui reste ? C'est le corps et entre les balises body, nous mettons tout ce qui est généré sur le site, tels que les en-têtes comme h1, paragraphes comme p, texte, listes, images, tout ce que vous voulez. Nous pouvons également utiliser l'analogie pour se rappeler, quels sont les ingrédients du site parce que nous avons tout comme l'homme, la tête et un corps sections. La question que vous pourriez avoir est, comment apprenez-vous réellement toutes ces balises HTML ? Tu les apprends par cœur ? En fait, la meilleure pratique est juste de coder et d'apprendre en regardant quelques exemples. pratique fait le maître, donc il n'y a pas de raison d'apprendre toutes les balises au début lointain. J' ai sélectionné quelques balises HTML et elles sont les plus populaires, donc nous allons les utiliser dans les exercices. Êtes-vous prêt pour notre premier exercice de codage ? Allons à la leçon suivante. 3. Premier exercice en HTML: La meilleure façon d'apprendre à coder est de mettre la théorie en pratique. Commençons par le tout premier exercice. Ouvrons l'éditeur Atom, où vous pouvez voir est l'écran de bienvenue. Outre Atom, nous avons également besoin d'un plugin Atom qui nous aidera à voir facilement les changements que nous fournissons dans le code. C' est ce qu'on appelle live preview, et nous devons l'installer en le googlant. Tapons Atom Live preview dans le navigateur Web. Ouvrez le premier lien et cliquez sur « Installer ». Il nous demandera d'ouvrir notre logiciel, ce qui est très bien, et nous cliquons sur « Installer ». Maintenant, nous pouvons voir que le plugin est installé donc nous sommes heureux de continuer. Je peux fermer maintenant la fenêtre des paramètres et le guide de bienvenue ainsi. Nous voulons créer le fichier HTML, comment pouvons-nous le faire ? Eh bien, nous avons juste cliqué sur la commande N, ou sur le contrôle N. J'ai cliqué sur la commande S pour enregistrer le fichier et je cherche mon dossier de package. Dans l'exercice 1, je veux créer le fichier index.html. Cela signifie que ce sera un document HTML, et en cliquant sur « Enregistrer ». Notre document HTML est vide maintenant, nous devons le remplir avec quelques balises HTML. Nous devons commencer par la déclaration DOCTYPE, donc j'écris, balise HTML DOCTYPE et HTML, ouverture et fermeture. Entre ces étiquettes, nous avons les deux sections. Tu te souviens d'eux ? La première tête et la seconde un corps. En tête, nous pouvons mettre maintenant le titre de notre page, qui est l'exercice 1. Sauvez-le. Nous avons installé le plugin de prévisualisation en direct afin de l'allumer. Nous naviguons vers l'Atom et cliquez sur « Paquets ». Recherchez l'aperçu HTML. Nous cliquons sur « Activer l'aperçu ». Maintenant, la fenêtre est ouverte et sur le côté droit, vous pouvez voir notre site Web. C' est vide maintenant parce qu'il n'y a rien écrit dans le corps. Mais si nous écrivons par exemple, Salut là. Sauvez-le. Il générera automatiquement toutes les modifications que nous avons apportées. Il est beaucoup plus facile pour nous de voir ce qui se passe sur le web. Mais, nous voulons utiliser quelques balises HTML. Enveloppons ce texte Salut il avec h1. H1 signifie cap du premier niveau. On peut avoir quelques rubriques. suivant est le h2, donc le titre du niveau 2 et nous pouvons écrire comme ça, bienvenue au cours. Bien sûr, nous devons fermer l'étiquette et vous verrez sur le côté droit que nous avons un titre plus grand et un plus petit. Qu' en est-il de mettre un paragraphe ici ? Le bloc de texte est enveloppé en ouvrant p et une page de fermeture . Bien sûr, nous pouvons le copier et le dupliquer. Nous avons maintenant deux paragraphes. Si vous souhaitez écrire un lien, par exemple vers le site Web externe, nous allons utiliser une balise. Nous écrivons un. Entre les balises, nous allons écrire la balise affichée sur le site Web. Par exemple, c'est le lien vers mon site. Vous pouvez voir que ça n'arrive pas encore. Nous devons définir un attribut pour une balise. Attribut est quelque chose qui apparaît juste après le nom de la balise, et pour un nous avons href, et dans href nous mettons l'adresse du site web. Par exemple, j'ajoute mon Instagram. Je vois que le lien est souligné dans une couleur bleue. Il s'agit du style par défaut ajouté par le navigateur Web. Si je clique dessus, je serai sur mon Instagram. Pour revenir à votre site Web, cliquez simplement sur Commande S dans la fenêtre HTML de l'index. Nous sommes de retour sur le site. Pour naviguer facilement à travers le code et le lire facilement, nous pouvons envelopper tous les éléments des codes de ligne affichés ici afin de cliquer sur « Afficher ». Il serait beaucoup plus facile pour nous d'écrire et de lire le code. Nous avons les en-têtes, les paragraphes, nous avons le lien. Qu' en est-il de l'affichage de la liste sur notre site avec des points à puces ? Chaque liste commence par la balise d'ouverture. Ul signifie liste non ordonnée. Nous l'ouvrons et la fermons. Bien sûr, nous avons les éléments des listes, par exemple, HTML, CSS, div outils. Où vous pouvez voir est que chaque élément de la liste commence par le point de puces. Si vous voulez le changer en nombres, nous devons appliquer une balise différente qui est ol, qui signifie liste ordonnée. Soudain, nous avons les chiffres. Qu' en est-il de l'attachement d'une image à notre site Web ? Nous pouvons appliquer la balise img, et il est bon de savoir que img c'est en fait une balise vide. Cela signifie qu'il se ferme dans la balise, donc nous ne l'écrivons pas de cette manière. Il n'a pas de contenu à l'intérieur. Nous fermons cette balise comme ça. Un img a plusieurs attributs que nous devons définir pour que l'image apparaisse. Le premier est src qui représente la source, et ici nous écrivons le chemin vers notre image. Un autre attribut est alt, qui est le texte alternatif qui va s'afficher si votre image ne peut pas être chargée. Il est également bon de savoir qu'il est préférable pour notre accessibilité de fournir un texte, car alt est lu par les lecteurs d'écran pour les personnes qui ne peuvent pas lire votre page comme nous. Mettons le chemin à travers notre image. Nous voulons afficher coding.jpg. C' est le fichier qu'il est juste ici dans la structure de tous nos fichiers. Nous écrivons juste le nom de celui-ci, c'est coding.jpg. L' extension est très importante. Maintenant, nous pouvons voir que l'image est affichée. Bien sûr, nous pouvons le copier et avoir les images. Nous devons également fournir le texte alternatif. C' est l'image qui promeut mes cours. Nous ne pouvons voir le texte alt nulle part. Mais si nous changeons le nom, par exemple en ajoutons un, nous voyons que l'image ne peut pas être chargée parce qu'un tel fichier n'existe pas. Mais au moins il nous donne l'information sur ce que l'auteur voulait présenter ici. On peut lire ça, c'est l'image qui fait la promotion de mes cours. Maintenant, je reviens au nom de fichier approprié. Dans ce site, vous exercez d'écrire des lignes de code très simples. Il y a des tonnes d'autres balises HTML. Mais nous allons les apprendre pas à pas. La toute dernière balise que je veux pratiquer dans cette leçon est div. Div est en quelque sorte une balise très générique donc nous pouvons l'utiliser à de nombreuses fins différentes. Nous pouvons l'utiliser pour créer des colonnes, des éléments du site. Dans les prochaines leçons, il serait beaucoup plus facile pour vous de comprendre pourquoi nous avons réellement besoin div. Dans div, nous pouvons placer des balises de commande, donc nous allons faire la prochaine chose. Nous pouvons voir que div est en fait le parent de la liste ordonnée. Je peux le changer en non ordonné pour avoir deux listes séparées. J' ai également mentionné à propos des outils div. Comment nous pouvons réellement les lancer et à quoi sont-ils destinés ? On doit retourner à notre dossier. Je suis dans le dossier du paquet et j'ouvre l'exercice 1. Nous avons notre index.html, et je vais ouvrir ce fichier dans le navigateur Web. J'utilise Chrome. Ce que je vais faire maintenant, c'est que j'ouvre les outils div. Je peux le faire en cliquant avec le bouton droit sur Inspecter. Ou je peux utiliser le raccourci qui est l'option de commande I ou l'option de contrôle I sur Windows. Inspecter et je vois mon code HTML ici. Les outils Div déplacent tout le code, et je peux facilement y naviguer. Je peux également sélectionner certains éléments particuliers du site Web et voir où est le code réel responsable de la génération de cet élément. C' est très utile et assez soigné. J' espère que vous l'utiliserez beaucoup. Une autre chose que j'aime à propos des outils div est que nous pouvons facilement expérimenter avec notre code. Par exemple, je peux supprimer certains éléments, je peux changer le texte, et je peux aussi ajouter de nouvelles choses, comme deux paragraphes. Mais chose très importante que vous devez vous rappeler est que tous les changements que nous faisons sont conservés dans le fichier local, en fait dans le stockage local du navigateur Web. Si nous actualisons le site Web en cliquant sur Commande R ou Control R sur un PC, vous verrez que le site revient à l'état précédent. C' est pourquoi nous n'avons pas pris toutes les modifications apportées dans les outils div et nous ne les avons pas introduites dans notre fichier HTML. Si vous voulez faire quelque chose de différent avec cette ligne de code et la remplacer par exemple, bonjour. Pour le garder plus longtemps, vous devez également revenir à l'éditeur Atom et le modifier également ici. J' économise, revenant au navigateur Web et rafraîchissant et j'ai ce texte bonjour remplacé. Les outils Div sont également très utiles quand on parle de style, s, mais nous allons y entrer dans la leçon suivante. 4. Les premières étapes avec CSS: Dans cette leçon, nous allons nous concentrer sur le CSS, donc nous envoyons notre site web au styliste, grâce au bois, notre site web aura des couleurs, enfin. Comment nous écrivons CSS ? Eh bien, nous devons réellement écrire, créer un nouveau fichier. Nous revenons à l'atome, et nous devons créer un nouveau fichier et l'enregistrer, Command S comme styles.css. Dot CSS est très importante car elle donne les informations qu'il s'agit du fichier de feuille de style en cascade réel et nous pouvons l'utiliser pour importer les styles sur le site Web. J' écris styles.css mais vous pouvez écrire ceci aussi comme mystyles, vous pouvez l'appeler comme jamais vous le voulez, je préfère l'appeler styles.css. Maintenant, nous avons notre document prêt. Qu'est-ce que CSS ? CSS est un autre langage qui nous aide à styliser certains éléments du site Web et un objet très important dans CSS est appelé un Sélecteur. Selector sélectionne certains éléments du site Web que vous créez et appliquez certaines propriétés telles que l'arrière-plan, les couleurs ou les familles de polices. En HTML, nous parlions de balises, donc dans les styles, nous allons avoir des sélecteurs. Créons notre premier. Par exemple, nous aimerions colorer tous les paragraphes, donc nous devons écrire la balise qui est responsable des paragraphes qui est p, donc je sélectionne tous les p ou paragraphes et j'écris des crochets bouclés et à l'intérieur d'eux, j'écris quelques CSS propriétés. Par exemple, couleur, rose. Une chose très importante dans CSS est de terminer chaque ligne avec un point-virgule, ne l'oubliez pas. Vous pouvez également écrire plus de sélecteurs CSS, par exemple, h1, donc le titre, qui est du premier niveau aura une autre couleur, disons saumon. Je l'sauvegarde en utilisant Command S ou Control S sur PC et bien, rien ne s'est passé. Le fait est que nous devons importer ces styles et le connecter avec HTML. Comment peut-on faire ça ? Eh bien, nous le faisons en utilisant une balise appelée lien. Pour lien, nous avons une application spécifique pour les buttes comme rel qui signifie relation et c'est feuille de style. Nous écrivons également href, donc le chemin vers nos styles qui est styles.css, et vous pouvez voir que le site a de nouvelles couleurs qui est la tête saumon et les paragraphes roses, donc nos styles ont commencé à fonctionner enfin. Résumons brièvement ce que nous avons fait. Nous avons créé un autre fichier, styles.css, nous avons créé deux sélecteurs, sélecteur de paragraphe et sélecteur de titre, et nous avons également lié notre fichier styles.css dans le document HTML. Bien sûr, nous pouvons ajouter à beaucoup plus de propriétés pour rendre notre site encore plus coloré. Nous pouvons ajouter l'arrière-plan pour chaque paragraphe, par exemple, jaune. Nous l'enregistrons et voyons que nos paragraphes ont un fond jaune. Nous pouvons également supprimer soulignement sur chacun des A, sorte que chacun du lien, nous pouvons écrire texte-décoration, aucun, et nous pouvons également changer sa couleur du bleu au rose. La question que vous pourriez avoir en ce moment est, comment pouvez-vous savoir que la propriété de couleur existe réellement ? Eh bien, vous devez l'apprendre par la pratique simplement, mais j'espère que pendant mes exercices, vous serez beaucoup plus familier avec les certains accessoires CSS. Nous avons ajouté quelques styles, peut-être supprimerons parce qu'il semble que c'est un paragraphe. C' est bleu, et on a deux paragraphes. Qu' en est-il de faire une différence et de mettre en évidence l'un des paragraphes ? Par exemple, en appliquant un arrière-plan différent. Eh bien, si nous écrivons le sélecteur p, cela signifie qu'il sélectionne tous les paragraphes que le navigateur rencontre, donc nous ne pouvons pas appliquer ici un autre arrière-plan car il ne saura tout simplement pas lequel du paragraphe doit être bleu et qui devrait être jaune. Pour différencier certains éléments, nous utilisons des classes CSS. CSS est une notion assez importante, cela signifie que nous pouvons appliquer quelques propriétés CSS aux éléments avec la classe spécifique uniquement. Créons une première classe, appelons ce point culminant. La règle est très simple, nous créons aussi un nom mais avant le nom, nous devons ajouter le point. Dot signifie que ce sera une classe, donc nous avons got.highlight, nous lisons ceci comme un surlignement de classe et entre crochets bouclés, nous ajoutons des propriétés CSS , par exemple, fond bleu, je l'sauvegarde et mes paragraphes sont toujours le même, même parce que nous avons également besoin d'appliquer la classe CSS en HTML. Disons que le premier p devrait être mis en évidence, donc devrait avoir le fond bleu. Nous ajoutons à p tag l'attribut qui est appelé classe, et le nom de la classe, donc c'est la surbrillance. Je l'sauvegarde et je vois que ce paragraphe a un surlignement de classe et la maison que couronne bleue, donc tout est correct et l'autre paragraphe est jaune. Si je copie celui-ci et le colle ci-dessous, il aurait les mêmes styles que le sélecteur p. Si nous ajoutons cette classe avec la dernière, vous allez voir que la classe est appliquée. classe CSS peut être utilisé plusieurs fois et il peut également être utilisé pour divers éléments, par exemple, pour le titre. Non seulement ces paragraphes ont l'arrière-plan, mais aussi la rubrique Bonjour. Vous pouvez jouer avec des classes CSS et appliquer différentes propriétés telles que la taille de la police. Disons que nous voulons que la police soit de 20 pixels et soudainement les paragraphes sont plus grands. Nous pouvons changer la couleur en blanc et vous verrez qu'il a changé instantanément. La chose très intéressante ici est que ce sélecteur a initialement la couleur rose, mais nous l'avons écrasé, avec le surlignement de la classe et ajouté du blanc à sa couleur. Passons maintenant au navigateur Web, actualisons la page, et jetons un coup d'oeil aux outils de développement. C' est le même site que vous avez vu il y a une minute et si nous ouvrons les outils de développement, juste pour vous rappeler que nous ouvrons en cliquant avec le bouton droit de la souris Inspecter, ou vous pouvez utiliser les raccourcis Option de commande I ou Control Alt I. Ici, nous devons passer aux éléments. Nous voyons ici, le code HTML. Si je mets en surbrillance certains éléments, par exemple , le paragraphe, vous pouvez voir que la classe de surbrillance est affichée ici, et il nous donne l'information que ce morceau de code, ce texte affiché sur le site ici a fond bleu, taille de police 20 pixels, et la couleur blanche. Je peux le commenter, signifie que je ne veux tout simplement pas ces changements et cela revient aux paramètres CSS précédents. Si je reviens, vous verrez que la couleur et l'arrière-plan du sélecteur p sont barrés. Cela signifie qu'avec la surbrillance de la classe, nous les avons écrasés, il est donc bon d'utiliser les outils de développement pour voir ce qui se passe et quels changements sont réellement appliqués. Si nous créons une autre classe, par exemple, taille de police plus grande et définie à 40 pixels, voyons ce qui se passe si nous l'appliquons à ce paragraphe. Comment connecter deux classes ? Eh bien, c'est facile parce qu'on a juste besoin d'ajouter un espace entre eux et d'essayer de nommer la deuxième classe. Nous avons mis en évidence et plus grand appliqué, et nous pouvons voir que le dernier paragraphe a une plus grande taille de police. Si nous passons aux outils de développement et renvoyons le site Web, nous allons voir que la plus grande classe a écrasé la taille de la police. Au départ, il était de 20 pixels, mais avec la classe suivante, plus grande, la nouvelle valeur a été appliquée, donc les règles sont simples. Si nous allons utiliser plus de classes avec les mêmes propriétés CSS, rappelez-vous simplement que celle qui est définie comme la dernière dans le document styles.css aurait la plus grande puissance. 5. S'amuser avec plus de propriétés CSS: Dans ces classes, nous allons appliquer à nouveau certaines propriétés CSS. Je vais vous montrer une configuration dans l'éditeur Atom. Parfois, vous devez éditer HTML et CSS en même temps. Il est donc plus facile d'avoir l'affichage de deux colonnes dans l'éditeur Atom. Maintenant, je ferme Preview. Ce que je fais, je clique sur « Afficher », « Volets », « Split Droite ». Grâce à cela, j'ai les deux colonnes, deux fenêtres proches l'une de l'autre. Dans l'un, je veux avoir des styles, que CSS, et sur le second index HTML. Maintenant, je peux prévisualiser le code HTML et CSS en même temps. Que se passe-t-il si je souhaite appliquer le contexte de mon site Web ? Que faire si je voudrais avoir mon arrière-plan dans une certaine couleur ? Nous pouvons facilement le faire en appliquant le sélecteur de corps. Nous essayons généralement d'écrire des styles à partir du haut du bas du site Web. Si le corps est en quelque sorte la mère de toutes les balises HTML, nous essayons de l'écrire en haut pour qu'il nous soit plus facile plus tard de numériser les styles et de numériser le HTML. Il est logique pour nous que c'est toute la structure. Cependant, ce que je voudrais souligner, c'est que, l'ordre des sélecteurs spécifiques, cela n'a pas d'importance. La seule chose que vous devez vous rappeler est que, si nous avons deux, les mêmes sélecteurs mais écrits à des endroits différents, et ils ont la même propriété, par exemple, la couleur. Ici, j'ai le bleu et sur le dessus j'ai le saumon, celui qui va être cueilli est celui qui est en fait écrit à la toute dernière position. Donc h1 sera en bleu au lieu de saumon parce que cette ligne serait écrasée. Je supprime celui-ci, économise, et nous avons le sélecteur de corps. Je voudrais appliquer la couleur de fond. C' est la propriété qui est responsable de changer la couleur du site Web. On peut trouver un peu de couleur, par exemple, bleu clair. Je le sauvegarde, je retourne à mon site web, rafraîchissant, et certainement, mon site est en bleu. Vous pourriez me demander comment je choisis les couleurs parce que vous êtes un designer et que vous aimeriez appliquer des couleurs moins sophistiquées ici. Vous pouvez coller ici, hexadécimal, code hexadécimal. Si vous ne connaissez pas la valeur maintenant, vous pouvez utiliser la palette de couleurs dans les outils de développement. C' est une autre fonctionnalité très utile que j'utilise dans ces outils. Je peux juste ramasser celui dont je suis satisfait, et le coller à mon manteau. Enregistrez, actualisez et vérifiez que mes modifications sont appliquées. Malheureusement, notre site Web n'est pas très joli en ce moment, mais faites-le facilement, nous nous dirigeons vers la partie portefeuille très bientôt. Une autre chose que nous pouvons appliquer en CSS sont les marges et les paddings. Nous pouvons avoir une influence sur la façon dont l'élément est séparé l'un de l'autre. Disons que je voudrais avoir un plus grand espace entre l' image et la liste que j'ai ici. Essayons un peu avec les outils Dev. Je sélectionne « Image », et je voudrais créer un sélecteur ici. Je clique sur ce « Plus » sur le côté droit, et je veux appliquer la marge. J' écris la marge, par exemple, 50 pixels de chacun des côtés, donc le haut, la gauche, la droite et le bas. Je peux voir, en inspectant cet élément, en survolant, qu'il y a un cadre orange. Cela me montre la marge qui est appliquée. Si je devais appuyer sur « Calculé », c'est le modèle de boîte, vous verrez qu'ici nous avons la marge et chacun des bords a 50 pixels. Nous pouvons également ajouter un rembourrage, qui est la marge intérieure. Par exemple, 20 pixels de sorte que l'espace entre l'image et les listes est augmenté. Nous pouvons également ajouter une bordure. Un pixel de la largeur de la ligne de bordure, nous voulons l'avoir solide et en couleur noire. Cela signifie noir dans le code hexadécimal, mais nous pouvons aussi écrire du noir. Vous verrez que le rembourrage est l'espace intérieur entre l'image elle-même et la bordure. Vous pouvez également le vérifier dans le modèle de boîte en disant que, c'est notre image, ce sont les rembourrages, nous avons la bordure, et nous avons aussi les marges. Pour conserver ces modifications, nous devons copier le sélecteur entier, revenir à Atom et le coller dans notre CSS. L' actualisation de la page et les modifications sont appliquées. Bien sûr, nous pouvons jouer beaucoup avec CSS ici. Mais je pense qu'il vaudrait mieux se concentrer sur nos projets de portefeuille et mettre en pratique nos connaissances. Dans la leçon suivante, nous commençons les projets de portefeuille, ce qui signifie que nous allons déconstruire la mise en page étape par étape. 6. Commencer notre projet de portfolio: Passons au dossier qui s'appelle le portfolio. Il est inclus dans notre forfait. On est à Atom pour ouvrir tout le dossier. Nous cliquons sur « Package », « Portfolio » et « Ouvrir ». Notre portefeuille est actuellement dans Atom afin que nous puissions voir toute la structure, tout l'arborescence du dossier. Je clique sur index.html, et comme vous pouvez le voir, c'est déjà écrit. Je veux dire, le squelette du site très basique. Ce que nous allons faire, c'est que nous allons le remplir avec plus de balises dans le corps, et pour sûr nous devons travailler sur les styles. Dans le dossier CSS, nous avons style.css, qui est de l'empathie et attend nos propriétés. Nous avons bootstrap-grid.css. C' est la grille que nous allons utiliser, et elle est tirée du framework bootstrap. Ne vous inquiétez pas pour l'instant. Je vais tout expliquer dans les prochaines leçons. Nous avons également quelques actifs qui ont tout le texte qu'il est inclus dans le portfolio, sorte que vous pouvez facilement le copier et le coller dans le projet. On a deux images, deux fichiers. Celui qui présente le portefeuille, la mise en page réelle du portefeuille, la conception graphique, et l'autre qui montre les tailles de police pour les éléments donnés. Plus tard, vous n'avez pas besoin de le deviner, vous pouvez facilement appliquer ces chiffres pour les en-têtes ou les paragraphes. Voyons à quoi ressemble le portefeuille. Je suis actuellement dans le dossier du portefeuille. J' ouvre les actifs et la mise en page du portefeuille. Nous pouvons voir ici, que c'est le site que nous allons coder, et il y a quelques sections, par exemple des sections décrivant les projets, comme la section avec le contact. Nous avons aussi la navigation, texte d' introduction, et quelques boutons. Pendant le cours, n'hésitez pas à utiliser vos propres projets, à utiliser vos propres images, à utiliser votre propre contenu. Mais vous pouvez également utiliser le contenu que j'ai créé pour ce cours. Le tout premier exercice que nous devons faire avec le portefeuille est de penser à ce squelette du site, au balisage. Quelles sections nous pouvons voir ici, et quels types d'éléments sont inclus. Nous devons en quelque sorte déconstruire la mise en page et la mettre dans l'état d'esprit HTML. Ce que je vois ici, tout en haut, c'est la navigation. Ci-dessous, j'ai l'en-tête entier. Comme la section d'introduction du site Web. On a le titre, du texte, le bouton et l'image. Ce sont les deux colonnes. J' ai quelque chose à gauche, et quelque chose à droite. Ci-dessous, j'ai une autre section qui est une liste de quelques compétences de Jane. dessous, j'ai trois éléments identiques de la mise en page, trois les mêmes sections qui présentent des projets. Mes projets du portefeuille. J' en ai un, avec le fond bleu, j'ai le second, avec le fond blanc, et le troisième comme avec le premier. Qu' est-ce qui est différent entre eux ? C' est notre estran que les couleurs, les couleurs de fond, et aussi la composition. Ici, l'image est sur la gauche, et dans l'autre exemple, cette image est sur la droite. Nous allons également en tenir compte lors de la création du site Web. Tout en bas, nous avons le pied de page avec les droits d'auteur. Commençons à écrire HTML pour un cela. Je reviens à Atom, et j'ouvre index.html. J' ai index.html ouvert et je voudrais aussi avoir la mise en page du portefeuille. Je clique sur « Afficher », « 'Volets », « Droite ». Ici, laissez-moi ouvrir index.html. Je vais avoir la vue d'ensemble de la mise en page, je clique ici aussi, « Voir », « Toggles Soft Wrap ». Mes lignes de code sont enveloppées, il est donc plus facile pour moi d'écrire le code. Je vois le portfolio, et j'ai mentionné au tout début que ce que je peux voir est la navigation du haut. Je dois vous dire qu'il existe une balise HTML spécifique dédiée à notre navigation, qui s'appelle nav. J' ouvre nav et ferme nav. Dans la navigation, j'ai tous ces liens vers le site Web. Je peux utiliser la copie de content.txt, je vais le mettre dans cette colonne, et je vais le copier et le coller dans la navigation. Nous avons notre navigation, mais chacun de ces liens de chacun de ces éléments de navigation peut en fait être un élément de la liste. La liste n'a pas besoin d'être verticale, elle peut aussi être horizontale. On va changer de feuille de style. Mais pour l'instant, il suffit d'écrire la liste en utilisant HTML. Il va être une liste non ordonnée parce que nous n'avons pas besoin de nombres, et chacun du texte ici va être un élément distinct de la navigation. On a un contact, bien sûr, la balise de fermeture. On a des travaux, on doit ouvrir et fermer. Nous avons de l'expérience, puis la suivante. Nous avons tous les éléments dans la liste. Comme vous pouvez le voir, nous avons la longue ligne ici. Ne vous inquiétez pas pour l'instant. Concentrons-nous sur le texte seulement. Je le sauve. C' est tout le nav, et ouvrons index.html. Je suis dans le dossier du portefeuille, je clique sur « Ouvrir dans Chrome ». J' ouvre le portfolio, HTML, il s'appelle index.html et un navigateur web, et je vois que ma navigation est ici, ma liste est là aussi, et nous avons tous les éléments de liste. Voyez ce qui se passe ensuite. Nous avons la navigation couverte. La charge et la navigation, nous avons toute la section d'en-tête, il s'appelle en-tête. Nous utilisons la balise d'en-tête. Entre l'en-tête, nous allons mettre le contenu de celui-ci. Nous avons le texte d'introduction du titre h1. On peut copier, bonjour, je suis Jane Doe d'ici. Si vous vous demandez comment nous pouvons vraiment casser le texte et mettre la Jane Doe dans la ligne suivante. Je montre que nous pouvons réellement utiliser br qui signifie break, et cela va être affiché en deux lignes. S' il vous plaît rappelez-vous cette balise break, br nous l'utilisons uniquement pour casser les blocs de texte et non pour les éléments, pas pour faire des marges ou des espaces plus grands. Pour les marges, masquer et tailles, nous utilisons des propriétés CSS. Nous avons la rubrique, et ci-dessous à la rubrique, il y a une liste de quelques succès ou points de carrière par Jane. Nous pouvons encore, copier le texte et le mettre dans une liste non ordonnée. J' ouvre la balise, la fermeture, et nous enveloppons chacun du texte avec li, pour le rendre plus rapide, je suis juste le copier. Je suis en train de sauvegarder et de vérifier ce qu'il y a sur mon site Web. Maintenant, je peux voir la navigation. J' ai bruyère qui a quelques enfants, h1, liste non ordonnée, et quelques éléments de la liste. Quelle est la prochaine ? Regardez le portefeuille, et nous voyons que sous la liste, nous avons le bouton. Le bouton va le lier quelque part, alors utilisons une balise. Pour l'instant, nous ne savons pas où il pointera, donc nous pouvons utiliser l'empathie de l'attribut href. Entre les balises a l'ouverture et la fermeture, on peut écrire le texte qu'il est sur un projet. Ça s'appelle ajouter moi sur Linkedin. Je peux voir que le lien est généré sur un site Web. Nous avons le côté gauche prêt. Qu' en est-il de la colonne de droite ? Il y a une image ici. Mettons une image. Pour l'instant, passons simplement la source. Pour Alt, nous pouvons écrire cette Jane Doe. Cela présentera Jane Doe, et la clôture avec une image. C' est la balise vide. Voyons la structure de nos fichiers. Nous éditons actuellement index.html, et nous voyons que Jane jpg est caché dans le dossier img. Le chemin d'accès à l'image de Jane est le nom du dossier, barre oblique et le nom du fichier. C' est jane.jpg. Je rafraîchis la page et de voir que l'image, cela semble brillant. Ne vous inquiétez pas pour l'instant de la position des éléments et de la façon dont ils sont alignés. Nous allons faire en sorte que cela soit couvert dans les prochains modules du cours. Si nous revenons à la mise en page, nous verrons que nous avons la partie d'en-tête presque prête. Nous avons juste besoin d'ajouter la légende à l'image. Pour cela, nous utilisons une balise spéciale en HTML qui s'appelle figure, et il enveloppe l'image, ainsi que la balise figcaption dans laquelle nous mettons la photo de Sam Manns sur unsplash.com. Je suis en train de fermer la légende aussi. Je veux garder mon code propre, donc c'est pourquoi je mets taper ici, et croise le code. Nous pouvons facilement voir que la figure est la balise parent de img et figcaption. Je le garde, je rafraîchis, et je vois qu'on doit sous-titrer sous l'image. Continuons avec la partie suivante de la mise en page dans la leçon suivante. 7. Créer les sections et les éléments restants en HTML: Couvrons l'élément suivant, les sections suivantes de la mise en page. Nous avons fini sur l'en-tête, et maintenant nous créons le suivant. Donc, l'en-tête se ferme ici, et nous avons ici les sections avec la liste des compétences. Créons une nouvelle section, elle s'appelle la balise de section en HTML. Nous avons l'en-tête, qui est très spécifique à la mise en page. C' est l'en-tête, en haut de la page, et nous allons à la section suivante, la chose générale. La section inclura la liste qui est dans le contenu. Je le copie, et je mets dans une liste de commandes. Encore une fois, chacun des éléments de la liste doit être enveloppé par la balise Li. Je ferme. Tout semble correct, l'enregistrement, et actualisons le site Web que nous avons. Maintenant, nous avons la liste prête, et voici notre section. Revenir à l'atome. Sous la liste, nous avons trois projets. En passant, je vais vous montrer comment créer des commentaires dans votre code. Les commentaires sont très utiles, car vous pouvez y ajouter une note personnelle. Vous pouvez structurer le code. Par exemple ici, c'est la section du projet, et j'ai écrit un commentaire en utilisant ces caractères. Mais il est aussi facile d'écrire le texte, vous voulez commenter. Vous le marquez, puis cliquez sur « Commentaire » ou « Ctrl », et une barre oblique sur votre clavier. L' éditeur de code flope automatiquement autour d'elle, ces caractères spécifiques. J' ai des projets, et c'est grisé, donc vous voyez instantanément que c'est le commentaire. Il ne va pas être vu sur le site, mais il va être dans le code. J' écris une section, et je vais écrire ici, projet 1 et le commenter. Nous avons le projet 1 ici, et quelle est la perspicacité ? On a la colonne de gauche et la colonne de droite. Dans la colonne de gauche, nous avons le titre, c'est h 2, parce que nous avons déjà h 1, tout en haut. C' est le titre qui a la plus petite taille de police. Donc, nous appliquons h 2. Cordons celui-ci, le premier projet. On a la première image. Donc on écrit, img. Quelle est la source et alt ? Eh bien, la source de l'image, vérifions ici. Je clique sur l'arborescence du dossier entier, la structure du dossier, et je vois que c'est img et ça s'appelle cosmetics jpg. J' ai besoin d'écrire le chemin spécifique. C' est un dossier img, cosmetics jpg, donc j'écris img/, donc nous entrons dans le dossier img, cosmetics.jpg. Ici, nous pouvons écrire des cosmétiques. Nous avons l'image, mais encore une fois, nous devons ajouter une légende. Si vous regardez en haut, nous avons utilisé l' étiquette de figure, et nous avons la légende de la figure. Alors réutilisons-le. J' écris la figure en tant que parent, de l'image, se refermant aussi. C' est l'enfant de la section. Donc, en insérant aussi, figure et ce qui manque est la légende de la figure. Ici, j'ajoute, la légende du contexte, qui manque ici. La société honnête sur Unsplash. Sauvegardons, actualisons le site Web, et j'ai l'image, et j'ai ma légende prête. Ce sont la balise de section séparée, j'ai mentionné à propos des commentaires. Vous pouvez voir qu'ils sont marqués en vert ici, et ils sont affichés dans le manteau, mais vous ne pouvez voir aucun mot texte, projet ou projet 1, sur ce site Web. Donc, il n'est pas généré. Pas de soucis pour ça. Nous allons sur le côté droit, ce qui inclut h 2. Copions la stratégie de marque pour les cosmétiques féminins. On peut utiliser la pause ici. Mettez dans la ligne suivante, et puis nous avons le paragraphe simple avec le texte qu'il est ici. Je suis juste en train de le copier et de le coller. Ceci est juste une version moderne de Lorem ipsum. Sauvegardons, et voyons ce qui manque d'autre. On a le bouton. Ça s'appelle lire plus. Donc, j'ajoute h tag, ouverture, fermeture, puis lire plus, sauver, et j'ai lu plus en bas. Paragraphe, titre. Vous pouvez le voir, il y a une rupture entre la stratégie de marque, et pour les cosmétiques féminins. Donc tout fonctionne. Continuons maintenant. Nous avons la deuxième section du projet. Nous pouvons écrire le projet 2, le commenter à nouveau, et créer une section. Ici, nous commençons par h 2, prendre l'expérience utilisateur, conception d' application, h 2, fermeture. Nous pouvons aussi utiliser break, puis paragraphe. Pour un paragraphe, nous utilisons Lorem ipsum. Encore une fois, malheureusement, j'ai trop copié. Donc c'est comme ça. On a lu plus. Pour le rendre plus rapide, nous pouvons copier et coller car c'est le même élément. La chose qui manque, c'est l'image. Encore une fois, nous pouvons copier la figure entière, responsable de la génération de l'image et de la légende. Je le colle. Je n'ai pas parlé de l'espace. Ce sont les lignes en code HTML, mais vous pouvez les faire autant que vous le souhaitez. Cela n'affectera pas la façon dont le site Web est généré. Si vous avez besoin de faire des notes personnelles, par exemple, nous ajoutons ici une image avec la légende. Vous pouvez, bien sûr, copier et l'utiliser à vos propres fins. Ici, nous avons juste besoin de changer le nom de l'image. Voyons voir, dans le dossier, il s'appelle l'application de tableau de bord, donc je suis en train de changer l'application de tableau de bord. Ici, nous devons changer tout cela aussi bien, application de tableau de bord, et la légende, qui est prise à partir d'ici. Sauvegarde, rafraîchissement, et nous avons la prochaine section prête. On a le projet 2 qui s'ouvre ici. Ensuite, le projet 3, le troisième projet sur notre liste. Encore une fois, voyons. Nous commençons par une image. Encore une fois, nous pouvons copier et coller figure. Ici, nous avons une application iPad, sous différentes légendes. Vérifions le nom du dossier, nous devons obtenir. C'est l'application iPad. Je l'appelle application iPad. D' après le contenu, je prends la légende. Encore une fois, nous devons appliquer h 2, qui est appelé application iPad pour les artistes, pause et paragraphe. Copiez le texte entier. Je le garde, et je dois fermer la section. J' ai oublié d'ouvrir la balise de section. Donc, chacun des projets gagne avec la balise de section, et bien sûr, il doit être fermé. Parce que notre code pourrait devenir désordonné. Je rafraîchis le site actuel et le navigateur Web, et je vois que nous avons l'image avec la légende, l'en-tête, le paragraphe, et c'est le troisième projet. Nous en avons presque fini avec le squelette de notre site. Qu' est-ce qui manque d'autre ? Voyons voir sur le portefeuille. Nous pouvons voir que c'est le pied de page. Je vais nettoyer le code. Je crée pied de page, je suis en train d'ouvrir et de fermer. J' ai la taxe qui est assez importante. Je pense que ce devrait être le titre, alors utilisons h 2. Ne vous inquiétez pas des tailles pour l'instant. Donc je copie, toutes les questions, trouve-moi ici, Jane. Je mets pause. Je mets également la toute dernière ligne du texte, qui est en bas de la page. Je copie, et je le mets, puis paragraphe. Le sauver. Mon site Web a actuellement le pied de page. Comme vous pouvez le voir, ce n'est pas très étonnant, et il y a beaucoup de travail à faire, mais ne vous inquiétez pas. Nous allons entrer dans chaque élément du site Web, chaque balise HTML, et le styliser, pour le faire ressembler et retarder, nous avons. Tout comme les projets que j'ai préparés pour vous. 8. Typographie Web: Dans ces classes, nous allons faire une pause du code HTML et nous allons nous concentrer sur la typographie web. Ça semble excitant ? J' aime vraiment appliquer Google Fonts sur mon site Web, alors voyons comment nous pouvons le faire. Ce que je dois faire est d'ouvrir le site fonts.google.com, et je suis à la recherche des polices qui sont utilisées dans mon projet. Il y a deux polices, la première est Inknut que j'ai utilisée pour les titres, c'est Inknut Antiqua. Donc, ce que je peux faire est que je clique plus, donc il va sélectionner cette police, et j'ai le panneau qui me montre que la police est sélectionnée. J' ai aussi une autre police qui s'appelle IBM Plex Mono, donc c'est le texte que j'ai utilisé pour le corps. Je clique également sur l'icône plus, et je vois que deux familles sont sélectionnées. Google Fonts nous donne des instructions sur la façon dont nous pouvons intégrer la police que nous avons utilisée sur le site Web. La bonne nouvelle est que nous en avons beaucoup, donc nous pouvons sélectionner différentes options et différentes polices de caractères, et ils sont gratuits et sont hébergés sur des serveurs Google. L' option standard d'intégration de la police est d'utiliser le code ici. Il s'agit d'un morceau de balise HTML appelé lien, que vous avez déjà appliqué dans votre site Web tout en liant les styles. Vous pouvez également incorporer des polices en utilisant l'importation CSS, mais je préférerais m'en tenir à la première, alors copions-la et collez le code dans la section d'en-tête de votre document HTML. Ça veut dire qu'on retourne à Atom. Nous sommes dans notre document HTML, et je vais tout en haut, à la section tête de mon fichier. J' ai donc la section tête, et sous la balise de lien que j'ai déjà avec styles.css, je fais la nouvelle ligne et colle le code entier que j'ai copié à partir de Google Fonts. Je le garde et on est presque prêts. Donc, la chose que nous devons faire maintenant est de réellement créer CSS. Nous devons créer des CSS qui appliqueront les polices que nous avons choisies aux éléments donnés du site Web. Alors ouvrons CSS, style.css. Ce sera cette plaque dans la nouvelle colonne. En fait, nous n'avons pas écrit de lignes de code CSS, donc ce sera notre première. Le fait est que si nous regardons sous notre projet, nous avons Inknut Antiqua. C' est donc celle-là, la police décorative Serif qui est appliquée aux titres, la liste ici, et c'est tout. caractères IBM Plex Mono apparaît partout sauf dans les endroits où Antiqua vient. Nous pouvons donc le faire de cette manière. Je retourne à Atom et j'écris que tout le corps, signifie que tout le site aura IBM Plex Mono. Revenons donc un moment à Google Fonts et voyons comment nous pouvons spécifier nos polices en CSS. Ce sont les règles CSS que nous pouvons appliquer à notre document CSS. Il s'agit d'une propriété de famille de caractères avec Inknut Antiqua, et c'est là que IBM Plex Mono, donc je copie la dernière parce que je veux utiliser IBM Plex Mono pour tout le corps de mon site Web. Donc, je le colle, et cela signifie que tout le texte qui apparaît dans le corps aura IBM Plex Mono. Actualisons la page et voyons si les modifications sont appliquées. J' ai une nouvelle police prête, et c'est totalement différent de Times New Roman, et c'est à coup sûr IBM Plex Mono. Si nous naviguons sur l'un des éléments, nous pouvons voir que la famille de polices IBM Plex Mono est appliquée. Si je le commente, vous verrez qu'il revient à la police par défaut, qui est Times New Roman. D' accord, mais j'ai aussi mentionné que dans le projet, nous avons Antiqua utilisé pour tous les titres et la liste, alors appliquons-le en CSS. Donc H1, H2, et la liste qui apparaît ici sous la navigation, qui est celle-ci, ont Antiqua. Donc, pour l'instant, je vais écrire « ul li ». Nous pouvons donc écrire le même style pour plusieurs éléments HTML, et nous pouvons les diviser en utilisant des deux-points. Nous avons donc le même style appliqué pour H1, H2, et tous les éléments de la liste « ul ». Donc, je suis sur les polices Google et je vois que ce morceau de code appliquerait Inknut Antiqua dans ma typographie web. Donc je le colle pour ces sélecteurs. Je suis en train d'enregistrer, d'actualiser la page, et de voir que l'en-tête, la liste ci-dessous ont Inknut Antiqua appliqué. Malheureusement, j'ai également cette police appliquée à la navigation. Si je compare cela avec mon projet, je verrai qu'ici, j'ai utilisé IBM Plex Mono. Alors, comment nous pouvons différencier cette liste d'outils, vous souvenez-vous des classes CSS ? J' espère que vous le ferez, alors appliquons-les. Créons la classe css, par exemple, nous pouvons créer la classe pour cette liste et l'appelons la « Liste des compétences ». J' ai donc la classe appelée Compétences List. C' est l'attribut en HTML, mais j'ai aussi besoin d'ajouter ici dans ma feuille de style CSS. Donc, je crée le point, ce qui signifie classe, puis le nom, c'est la liste des compétences. Je veux qu'il applique Inknut Antiqua pour celui-ci, donc je copie toute la ligne, sauve, et d'ici je vais supprimer « ul li ». Cela signifie que cette police, Inknut, ne sera plus appliquée à « ul li », donc tous les éléments de la liste. Pour que nous puissions copier et enregistrer. Je rafraîchis, et maintenant je peux voir que finalement toute ma navigation est dans IBM Plex Mono, et la liste sous la navigation est dans Inknut Antiqua. Donc, tout comme dans mon projet, pour rendre mon code plus propre et non reproductible, je vais juste copier cette classe, ajouter deux points, coller la liste et supprimer le dernier sélecteur. Donc, cette règle signifie que la police Inknut Antiqua sera appliquée à tous les H1, à tous les H2, et à tous les éléments HTML qui ont une classe appelée Liste des compétences. C' est ainsi que nous ajoutons des polices Google sur notre site Web. C' est ainsi que nous les importons dans un document HTML. Donc, la première chose que nous devons ajouter est la balise de lien qui a les URL de polices spécifiques, et elle est générée sur le site Web de Google Fonts. La deuxième chose est d'appliquer CSS avec les règles données mentionnées sur le site Web des polices Google. Souvenez-vous donc de ces deux étapes. Bien sûr, pour vos futurs projets, vous pouvez sélectionner des polices, ce que vous voulez. Il y a beaucoup de polices sur les polices Google, alors n'hésitez pas à utiliser ce que vous voulez et quand vous le souhaitez. 9. Placer des éléments sur la grille définie: Dans cette leçon, nous allons nous concentrer sur la grille. Nous allons placer nos éléments du site en fonction de la mise en page. Enfin, nous avons quelques colonnes et quelques sections, donc il serait beaucoup plus facile pour nos yeux de le regarder. Voici à quoi ressemble notre site Web actuellement,. Ce que nous devons faire, c'est mettre ces éléments en colonnes. Si vous le comparez avec notre mise en page, nous verrons que certains éléments sont proches les uns des autres et d'autres sont séparés. Pour le faire, nous allons utiliser du grain de Bootstrap. Qu' est-ce que Bootstrap ? Bootstrap est une boîte à outils open source, c'est la bibliothèque compétente frontale. C' est un outil très grand et puissant. Cependant, nous allons utiliser seulement un morceau de celui-ci qui est grille. Nous n'allons pas coder la barre de grille nous-mêmes. Nous allons utiliser une bibliothèque et nous pouvons l'adapter à nos propres besoins. Facturer les mises en page serait beaucoup plus facile. Si vous êtes curieux sur le système grit, vous pouvez ouvrir la documentation qui est disponible sur getbootstrap.com. Vous pouvez lire sur l'ancienne théorie qui se trouve derrière la grille et Bootstrap. Mais je vais vous dire les choses les plus importantes que vous devez savoir pour le faire fonctionner. Revenons à notre document HTML et nous allons nous concentrer sur HTML pendant un certain temps. Si j'ouvre le dossier entier, je verrai que j'ai Bootstrap grille CSS. Vous pouvez voir du code là-bas. Tout ce que c'est écrit ici en CSS. Mais je ne veux pas que vous l'analysiez, mémorisiez ou appreniez. Nous allons juste utiliser la grille qui est définie ici. Si nous voulons utiliser cette feuille de style, nous devons également la lier dans notre document HTML. Nous avons notre styles.css, nous avons des polices externes, mais nous avons aussi besoin de bootstrap. Je voudrais le lier avant mes styles. La question est pourquoi je le fais avant ou non comme la dernière balise de lien ? La réponse est que la grille Bootstrap peut avoir certains styles qui peuvent provoquer un conflit qui peut réellement remplacer nos styles. Pour rendre nos styles plus importants, nous les mettons à la dernière place en termes de feuille de style que nous avons. Je change le nom ici. Le fichier est appelé grille d'amorçage. Désolé, je reviens à mon HTML. Je le sauve. Ma grille d'amorçage est appliquée. Voyons si je ne vois aucun changement. Eh bien, en fait, rien ne s'est encore passé. Mais si je creuse plus profondément dans ma section de code HTML et de chapeaux, je verrai que Bootstrap grille CSS est appliqué. La question que vous pourriez avoir est de savoir comment nous pouvons utiliser la grille Bootstrap. Dans la documentation qu'ils nous montrent comment trois colonnes sont créées, nous pouvons voir du code HTML ici avec quelques attributs, qui sont des classes, des classes CSS, et nous allons également les utiliser. La toute première balise est div. Tu te souviens de div ? C' est le conteneur. C' est la balise qui est très générique et nous pouvons l'utiliser à diverses fins, principalement pour la chose de mise en page, pour placer les éléments, l'imbrication, etc. Nous avons div avec un conteneur de classe, et en dessous il y a une ligne. classe Row signifie que tous les éléments, toutes les colonnes qui sont inclus seront affichés dans une ligne, donc un par un, comme ici. Copions le conteneur et dessinons. Mettons-les dans notre document HTML, mais avant où nous allons vérifier notre mise en page. J' ouvre la mise en page du portefeuille juste ici. si je l'agrandit, vous verrez qu'il y a ici le conteneur et j'ai deux colonnes. Conteneur, ligne, classes seraient appliquées pour la section d'en-tête. J' ai l'en-tête. Dans l'en-tête, je colle ces deux lignes que j'ai copiées à partir de la documentation. J' ai le conteneur ouvert, mais j'ai aussi besoin de fermer cette div. Il se ferme juste avant la fermeture de l'en-tête. Donc j'ajoute div, je fais tapoter ici. Tout ce qu'il est inclus comme les enfants de ce conteneur. J' ai une ligne, j'ai besoin d'une ligne pour afficher deux colonnes près d'une charte. J' ai aussi besoin de fermer la rangée juste avant un div. Imbriquer également les éléments dans un bavardage. Je peux voir que tous ces éléments mentionnés ici, tous les enfants de rangée. Qu' est-ce qui est mentionné dans la documentation ? On a une autre classe qui s'appelle Col-sm. Cela signifie qu'il s'agit d'une colonne et la largeur des colonnes serait générée automatiquement, en fonction du nombre de colonnes que nous avons. Nous prendrons autant d'espace qu'ils le doivent. Laissez-moi le copier aussi. Si nous le comparons avec la mise en page, nous voyons qu'il s'agit d'une colonne et c'est la deuxième. Tout ici comme le titre, liste et le modèle serait dans un div appelé col-sm. Tout ici, rempli cet endroit sera des enfants de cette div, donc je dois le fermer. Bien que le contenu suivant sera une autre colonne. Encore une fois, nous collons div et la figure serait les enfants de cette div. Récapitons ce qui s'est réellement passé. Je vais le rendre plus approprié pour l'affichage. Nous avons le conteneur, il commence ici et se ferme ici. L' en-tête entier est sur un conteneur. Qu' est-ce que la classe fait réellement ? Eh bien, vous verrez dans une minute dans le navigateur Web. Sous conteneur, Nous avons une ligne et une ligne nous aide à afficher ces éléments près de l'autre. Nous avons une colonne et la seconde. Nous pouvons utiliser des commentaires. Colonne de gauche. C' est la colonne de gauche et en dessous nous avons la colonne de droite. Maintenant, il est beaucoup plus facile de suivre que c' est la colonne de droite et c'est la colonne de gauche. Faites toujours attention à la taxe sur les vêtements parce que parfois, il est très facile d'entrer en désordre dans votre code. Donc, si vous cliquez sur la balise, vous verrez que le soulignement bleu, vous pouvez facilement voir si la balise donnée est effectivement fermée. Ici, quand je clique sur div, je vois que c'est la balise d'ouverture et en 37e ligne, elle est fermée. La même chose avec la colonne de droite. J' ai l'ouverture de la balise div et la fermeture de la 45e ligne. Sauvegardons ça. Voyons ce qui est généré sur le site. Je vais fermer les outils div et voir que j'ai en fait deux colonnes. Si je cours inspecter, vous verrez qu'ils sont étirés du côté entier. Donc pleine largeur, donc il n'y a plus deux colonnes séparées. Mais si je change la position des outils div pour rendre la résolution, la largeur du navigateur de fenêtre plus grande, je vais voir qu'ils correspondent. Qu' ils sont affichés un par un près l'un de l'autre. Je peux voir que c'est ma colonne de gauche et ici ma colonne de droite. On pense que nous pouvons ajuster à ce niveau de la mise en page est de changer la largeur, la taille réelle de l'image que nous mettons pour la rendre plus petite pour remplir effectivement toute la largeur des colonnes. Revenons au style CSS. On peut écrire ça. Chaque image que nous avons affichée sur le site prendrait la largeur maximale du conteneur. maximum de l'image sera égal à 100 % de son parent. Cela signifie que si la classe col-sm a une largeur spécifique appliquée, par exemple, 600 pixels, l'image, bien que sa taille soit naturelle, sa taille d'origine est de 700 pixels, elle ne dépassera pas 600 pixels parce que nous limitons son largeur par cette ligne de code. Écrivons ça ici. Ici, je vous montre comment nous pouvons faire des commentaires en CSS. Je peux juste écrire un texte, donc cela limite la largeur de l'image, donc cela prend 100 largeur du maximum parent. Je mets en évidence tout le texte, et encore une fois, barre oblique de commentaire, donc tout écrit ici est un commentaire. C' est un peu différent parce qu'en HTML nous avons ces caractères, et en CSS, nous avons une barre oblique et un astérisque. Sauvegardez-le et rafraîchissons notre site Web. Soudain, vous pouvez voir que l'image est de plus en plus petite et qu'elle prend toute la largeur de la colonne, donc nous avons les deux colonnes l'une près de l'autre. L' en-tête, disons, c'est prêt en termes de grille. On a la colonne 1, de gauche et celle de droite, et tout est dans une rangée avec le conteneur. Ce que le conteneur fait, c'est qu'il limite notre largeur et cela dépend de la résolution de l'écran. Pour les écrans plus grands, ce conteneur serait plus grand, pour les plus petits, serait plus petit. C' est la conception web responsive, et nous n'allons pas entrer dans les détails dans ce cours, mais je vais mentionner certaines choses que vous pouvez utiliser en utilisant Bootstrap. L' en-tête est prêt. Passons à différentes parties de la mise en page. Si vous voyez sur la mise en page ici, nous avons la ligne complète de la liste, donc nous pouvons l'ignorer pour l'instant parce que c'est juste la pleine largeur et nous n' avons pas de colonnes et nous ne partageons pas cette section entre deux éléments, donc il Ça va pour moi maintenant. Nous sommes dans les projets maintenant donc nous voyons que nous avons deux colonnes à nouveau. Nous devons faire la même chose, nous devons appliquer la ligne de conteneur et la classe appelée colonne col-sm. Le projet 1, nous avons toute la section, nous avons appliqué un conteneur, nous avons la ligne, donc j'ai la colonne de gauche ici. J' aurai la bonne colonne, donc j'écris la colonne droite. Je vais faire plus de place pour être plus facile à lire. J' ai la bonne colonne et j'applique la classe col-sm. J' ai la div. Faisons l'intersection. J' ai fait l'indentation, mon col a l'air plus propre. Voyons voir. C' est le début de la colonne de droite, il se ferme ici. C' est le début de la colonne de gauche. Il se ferme ici. Nous devons fermer la ligne. Vous pouvez voir qu'il n'est pas souligné par la ligne bleue, donc atom nous donne l'information que cette balise, cette div n'est pas fermée. Fermons sous la colonne de droite. Maintenant, c'est correct. Vous devez également fermer le conteneur div. Ici, je vais faire l'indentation. Une fois de plus et notre code semble bien maintenant. Nous avons la colonne gauche, droite, sauvegardons et voyons. Je suis de retour dans le navigateur, rafraîchissant la page, et voir que l'image est dans la colonne de gauche et tous les textes sont dans la droite. Cela nous rappelle lentement la mise en page que nous visons. Mettons plus de contenu des produits dans les colonnes. Nous faisons exactement la même chose. Je vais réutiliser ces lignes de code et les coller ici. Je ferme la div pour la colonne de gauche. J' ai besoin d'ajouter la colonne suivante, l'image avec la légende, si vous pouvez voir, ce sera notre colonne de droite. Fermer le div, indentation, et bien sûr, nous devons doubler div fermer pour le conteneur de ligne un. Si nous voyons le conteneur est fermé, ligne est fermée, et nous avons deux colonnes. Qu' est-ce que vous devez vous rappeler de cette classe de grille Bootstrap est que la ligne est seulement à utiliser pour garder les colonnes, donc nous ne l'utilisons nulle part ailleurs. Si nous voulons juste afficher les colonnes les unes près des autres, nous allons utiliser la ligne, et c'est la seule situation. Conteneur nous aide à garder une certaine largeur de la page. En enregistrant, je passe au navigateur et je vois que le deuxième projet se trouve dans deux colonnes. Nous avons le dernier, le dernier projet. Encore une fois, nous pouvons réutiliser le code que nous avons. C' est le projet 3, donc sur la colonne de gauche, nous avons l'image. Bien sûr, nous avons besoin la bonne colonne, commenter, coller. Bien sûr, nous devons fermer la colonne de droite. La gauche est déjà fermée, nous avons fait indentation, et bien sûr la ligne de fermeture. Maintenant, nous devons fermer la rangée parce que c'est l'enfant d'un conteneur. Nous fermons la rangée, et là, nous fermons le conteneur. Laisse-moi vérifier si on va bien. Nous pouvons seulement ajouter que c'est la bonne colonne, sauver, rafraîchir. Je vois que j'ai des sections avec des colonnes. Cela nous rappelle lentement la mise en page. Si vous voulez vérifier à quoi ressembleraient les colonnes libres, vous pouvez faire le test. Dans le tout dernier projet, je peux copier la colonne de droite et simplement la dupliquer. Ce que j'attends de Bootstrap est d'afficher trois colonnes l'une près de l'autre. J' ai trois colonnes, donc c'est très facile plus tard de se multiplier. Ces trois colonnes ont la même taille, la même largeur, elles sont divisées. Si vous voulez le changer, changez les proportions, par exemple, ayez la photo plus grande, voyons dans la documentation de bootstrap. Nous faisons défiler jusqu'à la partie où nous avons une largeur différente. Par exemple, ici, une colonne est plus large et l'autre étroite. Ici, nous appliquons une certaine proportion. Imaginez que nous avons 12 petites colonnes et que nous les fusionnons pour agrandir la colonne. Si je voudrais que ma colonne prenne réellement la moitié de l'espace disponible, j'écris six parce que six à 12 est la moitié. Si je voudrais appliquer ceci sur mon image ici dans le troisième projet, donc pour la photo, j'écris ici col-6, et l'autre prendrait automatiquement l'espace disponible, ce qui reste. Ils diviseront la moitié du conteneur entier à ces deux colonnes. Je suis en train de rafraîchir le site et de voir que mon image est deux fois plus grande que ses colonnes d'amis. Pour le pied de page, nous sommes d'accord pour l'instant avec cela parce que le pied de page n'utilise pas deux colonnes. C' est juste comme un morceau de mise en page d'une colonne, un élément de colonne de mise en page. Nous sommes presque prêts à nous aligner sur LMS, il y a quelques ajustements qui doivent être nécessaires. Mais pour l'instant, arrêtons avec la grille Bootstrap. Si vous souhaitez en savoir plus sur la grille Bootstrap, je vous recommande fortement de consulter la documentation. Il y a beaucoup d'exemples comment vous pouvez créer différentes torsions de la colonne, comment vous pouvez les empiler en mode horizontal, et enfin, comment travailler sur leur côté réactif des grilles. 10. 1/2 Placement des éléments sur la grille définie: Dans cette leçon, nous allons nous concentrer sur la grille. Nous allons placer nos éléments du site en fonction de la mise en page. Enfin, nous avons quelques colonnes et quelques sections, donc il serait beaucoup plus facile pour nos yeux de le regarder. Voici à quoi ressemble notre site Web actuellement. Ce que nous devons faire, c'est que nous devons mettre ces éléments dans des colonnes. Si vous le comparez avec notre mise en page, nous verrons que certains éléments sont proches les uns des autres, certains sont séparés. Pour le faire, nous allons utiliser la grille de Bootstrap. Qu' est-ce que Bootstrap ? Bootstrap est une boîte à outils open source, c'est une bibliothèque de composants front-end. C' est un outil très grand et puissant. Cependant, nous allons utiliser seulement un morceau de celui-ci qui est grille. On ne va pas coder la grille par nous-mêmes. Nous allons utiliser la bibliothèque et nous pouvons l'ajuster à nos besoins, sorte que la facturation des mises en page serait beaucoup plus facile. Si vous êtes curieux sur le système de grille, vous pouvez ouvrir la documentation qui est disponible sur getbootstrap.com et vous pouvez lire sur l'ancienne théorie qui est derrière grille et Bootstrap. Mais je vais vous dire les choses les plus importantes que vous devez savoir pour le faire fonctionner. Revenons donc à notre document HTML, et nous allons nous concentrer sur HTML pendant un certain temps. Si j'ouvre le dossier entier, je verrai que j'ai bootstrap-grid.css. Vous pouvez voir quelques codes là-bas. Tout ce que c'est écrit ici c'est CSS, mais je ne veux pas que vous l'analysiez, mémorisiez, ou appreniez. Nous allons juste utiliser la grille qui est définie ici. Si nous voulons utiliser cette feuille de style, nous devons également la lier dans notre document HTML. Nous avons notre styles.css, nous avons des polices externes mais nous avons aussi besoin de Bootstrap. Je voudrais le lier avant mes styles. La question est pourquoi je le fais avant pas comme la dernière balise de lien, la réponse est que la grille Bootstrap pourrait avoir certains styles qui peuvent provoquer un conflit qui peut réellement écraser nos styles. Pour rendre nos styles plus importants, nous le mettons à la dernière place en termes de feuille de style que nous avons. Je change le nom ici, le fichier est appelé bootstrap-grid. Je reviens à mon HTML, je l'enregistre et ma grille d'amorçage est appliquée. Voyons si je ne vois aucun changement. Eh bien, en fait, rien ne s'est encore passé mais si je creuse plus profondément dans mon code HTML dans la section tête, je verrai que bootstrap-grid.css est appliqué. La question que vous pourriez avoir est, comment pouvons-nous utiliser la grille de bootstrap ? Dans la documentation qu'ils nous montrent comment trois colonnes sont créées, nous pouvons voir le code HTML ici avec quelques attributs, qui sont des classes CSS et nous allons les utiliser également. La toute première balise est div, tu te souviens div ? C' est le conteneur, c'est la balise qu'il est très générique et nous pouvons l'utiliser à diverses fins, principalement pour la chose de mise en page, pour placer les éléments, l'imbrication, etc Nous avons div avec un conteneur de classe et ci-dessous il y a une rangée. classe Row signifie que tous les éléments, toutes les colonnes qui sont inclus seront affichés dans une ligne, donc un par un comme ici. Copions le conteneur et ligne et mettons-les dans notre document HTML, la ligne et mettons-les dans notre document HTML, mais avant de vérifier notre mise en page. J' ouvre la mise en page du portefeuille juste ici. Si je l'agrandit, vous verrez qu'il y a ici le conteneur et j'ai deux colonnes. Conteneur, ligne, classes seraient appliquées pour la section d'en-tête. J' ai l'en-tête, et dans l'en-tête je colle ces deux lignes que j'ai copiées à partir de la documentation. Je fais ouvrir le conteneur, mais j'ai aussi besoin de fermer cette div. Il se ferme juste avant la fermeture de l'en-tête. J' ajoute div, appuyez ici. Tout ce qu'il est inclus sont les enfants de ce conteneur. J' ai rangée, j'ai besoin de ligne pour afficher deux colonnes près d'un bavardage. J' ai également besoin de fermer la rangée juste avant un div, mais je vais aussi imbriquer dans les éléments dans un bavardage. D' accord. Je peux voir que tous ces éléments mentionnés ici sont des enfants de ligne. Qu' est-ce qui est mentionné dans la documentation ? On a un autre cours qui s'appellerait Col-sm. Cela signifie qu'il s'agit d'une colonne et que la largeur des colonnes serait générée automatiquement en fonction du nombre de colonnes que nous avons, donc elles prendront autant d'espace qu'elles le doivent. Laissez-moi le copier aussi. Si nous le comparons avec la mise en page, nous verrons qu'il s'agit d'une colonne et c'est la deuxième. Tout ici comme le titre, la liste, et le bouton serait dans un div appelé col-sm. Tout ici jusqu'à ce que cet endroit soit enfants de cette div, donc je dois le fermer. Le contenu suivant sera une autre colonne. Encore une fois, nous collons div et la figure serait les enfants de cette div. Récapitons ce qui s'est réellement passé, je vais le rendre plus approprié pour l'affichage. Nous avons le conteneur, il commence ici et se ferme ici. L' en-tête entier est un conteneur. Qu' est-ce que ce cours fait réellement ? Eh bien, vous verrez dans une minute dans le navigateur Web. Sous conteneur, nous avons une ligne, et la ligne nous aide à afficher ces éléments près de l'autre. Nous avons une colonne et la seconde. Nous pouvons utiliser des commentaires, colonne de gauche, ceci est la colonne de gauche et en dessous nous avons la colonne de droite. Maintenant, c'est beaucoup plus facile à suivre, que c'est la colonne de droite et c'est la colonne de gauche. Faites toujours attention aux balises de fermeture car il est parfois très facile de se désordre dans votre code. Si vous cliquez sur la balise, vous verrez le soulignement bleu, vous pouvez facilement voir si la balise donnée est effectivement fermée. Ici, quand je clique sur « div », je vois que c'est la balise d'ouverture et en 37 ligne, elle est fermée. La même chose avec la colonne de droite, j'ai l'ouverture de la balise et la fermeture de la 45e ligne. Sauvegardons ça. Voyons ce qui est généré sur le site. Je vais fermer les DevTools et voir que j'ai en fait deux colonnes. Si je cours Inspecter, vous verrez qu'ils sont étirés sur le côté entier, donc pleine largeur. n'y a plus deux colonnes séparées, mais si je change la position des DevTools pour agrandir la largeur du navigateur de fenêtre, je verrai qu'elles correspondent et qu'elles sont affichées un par un près de l'autre. Je peux voir que c'est ma colonne de gauche et ici ma colonne de droite. Une chose que nous pouvons ajuster à ce niveau de la mise en page est de changer la taille de l'image que nous mettons, pour la rendre plus petite pour remplir réellement toute la largeur des colonnes. Revenons au style CSS. Nous pouvons écrire que chaque image que nous avons affichée sur le site prendrait la largeur maximale du conteneur, donc le maximum de leur image sera 100 pour cent de son parent. Cela signifie que si la classe col-sm a un spécifique avec appliqué, par exemple 600 pixels, l'image bien que sa taille d'origine soit 700 pixels, elle ne dépassera pas 600 pixels car nous limitons sa largeur par cette ligne de code. Écrivons ça ici. Ici, je vous montre comment nous pouvons faire des commentaires en CSS. Je peux juste écrire un texte, donc cela limite la largeur de l'image. Il prend 100 largeur du maximum parent. Je mets en évidence tout le texte et encore des commentaires barre oblique, donc tout écrit ici est un commentaire. C' est un peu différent car en HTML nous avons ces caractères et en CSS nous avons des barres obliques et des astérisques. D' accord. Sauvegardez-le et rafraîchissons notre site Web. Soudain, vous pouvez voir que l'image est de plus en plus petite et qu'elle prend toute la largeur de la colonne. Nous avons les deux colonnes l'une près de l'autre. L' en-tête, disons qu'il est prêt en termes de grille. Nous avons la colonne 1, gauche, et droite, et tout est dans une rangée avec le conteneur. Ce que fait le conteneur, c' est qu'il limite notre largeur et cela dépend des résolutions de l'écran. Pour les écrans plus grands, le conteneur serait plus grand, car plus petit serait plus petit. C' est la conception web responsive et nous n'allons pas entrer dans les détails dans ce cours, mais je vais mentionner certaines choses que vous pouvez utiliser en utilisant Bootstrap. 11. 2/2 Placement des éléments sur la grille définie - partie 1: L' en-tête est prêt, passons à différentes parties de la mise en page. Si vous voyez sur la mise en page ici, nous avons la ligne complète de la liste. Nous pouvons l'ignorer pour l'instant parce que c'est juste une pleine largeur et nous n'avons pas de colonnes et nous ne partageons pas cette section entre deux éléments, donc c'est correct pour l'instant. Nous sommes dans les projets maintenant, donc nous voyons que nous avons deux colonnes à nouveau, nous devons faire pour dire que nous devons appliquer la ligne de conteneur et la classe appelée col-sm. Dans le premier projet, nous avons toute la section. Nous avons appliqué un conteneur, nous avons la rangée. J' ai la colonne de gauche ici, j'aurai les colonnes de droite, donc j'écris la colonne de droite. Je vais faire plus de place pour faciliter la lecture. J' ai la bonne colonne et j'applique la classe col-sm. J' ai la div, faisons l'intersection. J' ai fait l'indentation, mon code semble plus propre, et voyons. C' est le début de la colonne de droite, elle se ferme ici. C' est le début de la colonne de gauche, c'est plus près ici, presque là. Nous devons fermer la ligne. Vous pouvez voir qu'il n'est pas souligné par la ligne bleue, donc il nous donne l'information, Atom nous donne l'information. Il y a cette balise, cette div n'est pas fermée. Fermons sur la colonne de droite. Maintenant, c'est correct et vous devez également fermer le conteneur div. Ici, je vais faire l'indentation, une fois de plus et notre code semble bien maintenant. On a gauche, colonne droite. Sauvegardons ça et voyons. Je suis de retour dans le navigateur rafraîchissant la page et voir que l'image est dans la colonne de gauche et tous les textes sont dans la droite. Cela nous rappelle lentement la mise en page que nous visons. Mettons plus de contenu des projets dans les colonnes. Nous faisons exactement la même chose. Je vais réutiliser ces lignes de code et les coller ici. Je ferme la div pour la colonne de gauche. J' ai besoin d'ajouter la colonne suivante. Cette image avec la légende, si vous pouvez voir, ce sera notre colonne de droite. Fermer la div, indentation, et bien sûr nous devons doubler div fermer, donc pour la ligne et le conteneur. Si nous voyons, le conteneur est fermé, ligne est fermée, et nous avons deux colonnes. Ce que vous devez vous rappeler à propos de ces classes de grille d'amorçage est que la ligne est seulement à utiliser pour garder les colonnes, donc nous ne l'utilisons nulle part ailleurs. Si nous voulons juste afficher les colonnes les unes près des autres, nous allons utiliser la ligne et c'est la seule situation. Conteneur nous aide à garder une certaine largeur de la page. Sauver. Je passe au navigateur, et je vois que le deuxième projet se trouve dans deux colonnes. Nous avons le dernier, le dernier projet. Encore une fois, nous pouvons réutiliser le code que nous avons. C' est le projet 3. Sur la colonne de gauche, nous avons l'image, et nous avons besoin de la colonne de droite, la colonne de droite , le commentaire, le rythme, et bien sûr, nous devons fermer la colonne de droite. La gauche est déjà fermée, nous pouvons faire indentation et fermer le conteneur. Nous devons fermer la rangée parce que c'est l'enfant d'un conteneur, donc nous fermons la rangée, et nous fermons le conteneur. Laisse-moi vérifier si on va bien. Ici, nous pouvons seulement ajouter que c'est la colonne de droite, l'enregistrement, actualisation, et je vois que j'ai des sections avec colonnes et cela nous rappelle lentement la mise en page. Si vous voulez vérifier à quoi ressemblerait trois colonnes, vous pouvez faire le test. Le tout dernier projet, je peux copier la colonne de droite et simplement la dupliquer, et ce que j'attends de bootstrap est d'afficher trois colonnes l'une près de l'autre. J' ai maintenant trois colonnes. Il est très facile plus tard de se multiplier. Ces trois colonnes ont la même taille, la même largeur, elles sont divisées. Si vous souhaitez la changer, changez les proportions, par exemple, agrandissez la photo. Voyons voir dans la documentation de bootstrap, nous défilons jusqu'à la partie où nous avons une largeur différente. Par exemple, ici, une colonne est plus large et l'autre étroite. Ici, nous appliquons une certaine proportion. Imaginez que nous avons 12 petites colonnes et que nous les fusionnons pour agrandir la colonne. Si je voudrais que ma colonne prenne réellement la moitié de l'espace disponible, j'écris six parce que six à 12 est la moitié. Si je voudrais appliquer ceci sur mon image ici dans le troisième projet, donc pour la photo, j'écris ici col-6, et l'autre prendrait automatiquement l'espace disponible, ce qui reste. Ils diviseront la moitié du conteneur entier à ces deux colonnes. Je rafraîchis le site Web et je vois que mon image est deux fois plus grande que ses autres colonnes. Pour le pied de page, nous sommes d'accord pour l'instant avec cela parce que le pied de page n'utilise pas deux colonnes, c'est juste comme une colonne, un morceau de mise en page, un élément de colonne de mise en page. Nous sommes presque prêts à aligner les éléments. Il y a quelques ajustements qui doivent être nécessaires, mais pour l'instant nous allons arrêter avec la grille bootstrap. Si vous souhaitez en savoir plus sur la grille d'amorçage, je vous recommande fortement de consulter la documentation. Il existe de nombreux exemples comment vous pouvez créer différentes largeurs de la colonne, comment vous pouvez les empiler en mode horizontal, et enfin, comment travailler sur leur côté réactif de la grille. 12. Développer la navigation: Dans cette leçon, nous allons appliquer de la magie CSS pour rendre notre site Web beaucoup plus familier au projet que nous avons. Nous allons nous occuper de la navigation en haut du document. Si nous le comparons avec le projet, nous verrons que la navigation est en haut, que chaque élément de la liste est affiché horizontalement, sorte qu'ils sont proches les uns des autres, pas sous l'autre. Aussi ce qu'il n'est pas vu ici sous l'image statique, je voudrais avoir ma navigation fixe sur le dessus. Ce sera une navigation collante, et nous allons apprendre en CSS comment le faire. Nous revenons à atome, et je vais juste refaire rapidement mes colonnes dans atome pour voir les styles ici. J' ai des styles prêts. Ma navigation a une couleur bleue, permettez-moi de le copier à partir du contenu txt, qui a toutes les valeurs répertoriées là-bas. Si je passe au contenu txt, je verrai tout en bas que j'ai la couleur pour la navigation. C' est le code hexadécimal, je peux le copier, et je vais l'utiliser en CSS. Nous avons la navigation, si je passe à mon site Web, je vais voir que c'est tout le nav. Qu' en est-il de l'application d'une couleur d'arrière-plan. Je crée un sélecteur pour nav, juste dans les DevTools, et applique la couleur d'arrière-plan, couleurs désolé, je manque la faute de frappe ici, la couleur d'arrière-plan. Je colle la valeur de la couleur. Je vois que c'est bleu, fantastique. Je peux copier dans le sélecteur entier et l'appliquer dans mon CSS, et l'enregistrer, et c'est prêt. Si j'actualise la modification est enregistrée. Ce que nous pouvons faire avec la liste pour la rendre similaire à la navigation que nous avons dans le projet. J' ai besoin de mentionner quelque chose, qu'il s'appelle la propriété d'affichage en CSS. Par défaut, chaque élément de liste, chaque li, est affiché comme un élément de bloc par défaut. L' élément de bloc signifie qu'il prend toute la largeur du conteneur. Si vous voyez le surlignement bleu dans les DevTools, vous découvrirez qu'il prend réellement tout l'espace qu'il a, ou alors fait certains conteneurs. Nous devons changer cette propriété d'affichage de bloc à inline-block, qui signifie que cet élément de liste ne prendra que l'espace dont il a besoin pour que le contenu soit affiché. Si je crée un sélecteur ul li, et écris ici display inline-block, vous verrez que tous mes éléments sont proches les uns des autres. Ils sont affichés verticalement, et si je navigue dans les DevTools, vous verrez qu'il ne prend que la largeur que le contenu définit réellement. Si j'ajoute ici un texte plus long, la largeur serait plus grande, parce que le contenu, c'est plus long. Dans l'affichage en bloc, peu importe l'aspect de notre contenu, car il prend toujours 100 % de largeur du conteneur. Nous aimerions appliquer la propriété de bloc d'affichage en ligne, mais nous ne voulons pas afficher sur chaque élément de liste que nous avons sur notre site Web, car nous avons différentes sections. Par exemple, ici, nous avons également une liste que dans le projet, les éléments donnés sont affichés verticalement. Nous pouvons le faire en créant un sélecteur complexe, ce qui signifie que nous n'appliquerons que certains CSS aux éléments li, partir de la liste non ordonnée qui existe dans la balise nav. Cela rendra notre portée CSS plus étroite, donc display inline-block serait appliqué à la liste qui n'est incluse que dans la balise nav, seulement à celle-ci. Je le sauve, rafraîchissant, et je vois que cette liste est intacte, rien n'a changé. Mais si nous inspectons le code et regardons ce qui se passe ici, nous verrons dans l'onglet de l'ordinateur, qu'il y a des marges applicables et des rajustements, et nous aimerions le réinitialiser totalement à zéro. Ce que nous pouvons faire, nous pouvons réellement écrire la marge : 0 ; padding : 0 ; pour cette liste donnée. Actualiser, laissez-moi juste l'enregistrer, actualiser et voir que l'élément de liste, ils n'ont pas de marges. Mais les marges que nous voyons, en fait, elles viennent d'ul. Écrivons ul, copions CSS, et enfin, nos marges ont disparu. Mais nous avons quelques marges du corps, c'est en fait huit pixels de chacun du site, vous pouvez voir la bordure orange. Nous appliquons la même technique, nous pouvons réellement ajouter ce corps et ul, ils ont la marge : 0 ; rembourrage : 0 ; Nous pouvons également changer la place de celui-ci sur leur corps, sorte qu'il sera beaucoup plus cohérent en termes de code. Je l'enregistre, rafraîchit, et je vois que ma navigation commence au tout début des bords du navigateur de fenêtre, ce qui est le comportement que je veux qu'il atteigne. Voyons à quoi ressemble la navigation dans notre projet. Nous avons un peu d'espace et toute la navigation est centrée. Essayons d'appliquer ceci. Nous pouvons faire l'identification centrée de différentes manières. En fait, vous pouvez centrer certains éléments dans CSS de différentes manières, il existe des méthodes différentes. Ce que je vais faire, c'est, je vais ajouter juste nav ul, et ici la marge : 0 auto ; qui signifie que cela, la première place, fait référence à haut et en bas, donc les marges sur le haut et le bas de la et ceci à droite et à gauche. Auto signifie qu'il sera automatiquement ajusté, sorte qu'il centrera naturellement notre élément. Je le garde, et voyons. La dernière chose que nous devons faire est de centrer tout l'élément. Donc, nous appliquons text-align centre et grâce à cela, notre liste est au centre de la section de navigation. Permettez-moi de copier la dernière ligne, l' appliquer, et notre navigation est centrée. Nous pouvons effectivement appliquer un rembourrage pour faire plus d'espace autour de toute la liste. Nous pouvons appliquer un rembourrage de 30 pixels et nous avons la navigation plus grande. Je le copie, le collage, l'épargne et on se rapproche. Ce qui est également important, c'est que nous avons besoin d'un espace entre les éléments de la liste, donc aligner. Pour cela, nous pouvons également utiliser la marge. Si nous avons deux positions, la première se réfère au haut et au bas, et la seconde à gauche et à droite. Donc, si j'applique 10 pixels, vous verrez quelques espaces autour d'eux. Essayons si nous pouvons éditer plus grand. Ouais, ça a l'air mieux. Donc je le copie. Maintenant, si vous êtes tous alignés. Je peux faire des commentaires ici, que zéro fait référence au haut et au bas et 15 pixels à gauche et à droite. Je peux agrandir ma fenêtre et activer la distorsion douce, donc ce sera plus facile à lire. Nous avons nos commentaires prêts, nous avons une marge appliquée et quelle est la suite ? J' ai dit que nous aimerions avoir cette navigation collante. Nous devons donc corriger la position et pour cela, nous allons utiliser la propriété CSS qu'elle est appelée position. Pour toute la navigation, j'ai besoin d'appliquer la position fixe. Des choses étranges sont arrivées à mon plan, mais pas de soucis pour l'instant. Je peux voir que bien que je fasse défiler, ma navigation est toujours sur la même position. Malheureusement, c'est derrière tous les autres éléments. Il ressemble aux couches, mais nous aimerions garder la navigation en haut. Pour cela, nous utilisons z-index. Indique au navigateur quelle couche cet élément doit prendre. Le plus grand et le nombre est, le devant de l'élément sera. Donc, si je à un, il sera plus grand à partir de zéro parce que zéro est la valeur par défaut. Si à cinq ans, c'est toujours le même parce qu'il est plus grand que zéro et il sera sur le dessus des autres éléments. J' ai donc z-index 1 et ce que je voudrais faire est d'étirer la navigation à toute la largeur. Donc, j'écris la largeur 100 pour cent, et ma navigation est fixe. Je peux copier ceci et coller dans le sélecteur de navigation. La chose que vous pourriez observer est que le contenu sous la navigation, donc tout de l'en-tête est découpé parce qu'il est caché par la navigation. Ce que je dois faire est d'appliquer une marge de l'en-tête, mais nous allons utiliser de nouvelles propriétés CSS. abord, créer un sélecteur à partir de l'en-tête et nous allons écrire, top 70 pixels. Cela signifie que notre contenu commencera en fait 70 pixels au-dessous de sa position naturelle. Donc on aurait un espace blanc sur le dessus. Nous avons également besoin de positionner relative parce que les propriétés telles que le haut, le bas, droite et la gauche ne fonctionnent que lorsque la position relative ou absolue est appliquée. Souvenez-vous s'il vous plaît. Nous avons la position relative qui nous aide à placer relativement l'élément. Je veux dire, il utilise sa position naturelle et la prend comme point zéro. Donc, si vous voulez changer la position de 70 pixels à partir de la gauche ou de la droite, vous pouvez l'utiliser comme ceci. Il traiterait ce point comme point zéro parce que c'est l'endroit naturel de l'élément, mais nous voulons qu'il le conserve en haut 70 pour cent. Maintenant, je peux voir que j'ai un peu d'espace pour la navigation et c'est réparé. Donc ça marche comme un tour. Mais je pourrais aussi l'augmenter à 110 pour avoir plus d'espace blanc disponible. Notre en-tête est un nouvel élément, donc je peux le coller sous nav. Je l'enregistre et je vois que mes modifications sont appliquées. La dernière chose pour la navigation pour l'instant, est de changer les lettres en majuscules et nous pouvons le faire avec CSS aussi bien. Donc, j'applique une propriété CSS spécifique pour l'élément de liste qui est appelé text-transform, et nous voulons le transformer en majuscules. Maintenant, chaque élément, chaque lettre est écrit en majuscules. Nous pouvons également augmenter l' espacement des lettres en utilisant la propriété d'espacement des lettres par exemple, d'un pixel. Il aura l'air plus joliment en termes de typographie. Je copie ces deux nouvelles lignes et applique dans le style CSS 27e ligne, enregistrer, rafraîchir et voir que mes modifications sont conservées. Si vous le comparez avec le projet, nous voyons que nous avons cette seule ligne. Pour l'instant, passons-le et sauvegardons-le pour les derniers réglages à la toute fin du cours. Maintenant, nous allons nous concentrer sur l'élément suivant qui est l'en-tête du site Web. 13. Ajuster l'en-tête: Il est temps de se concentrer maintenant sur l'élément d'en-tête de notre site Web. Ce que nous allons faire est de changer la taille du titre et de prendre soin de la liste et du bouton, et quelque chose de bizarre se passe ici, donc pas de soucis, nous allons tout couvrir et nous allons également appliquer l'arrière-plan à l'en-tête. C' est quelque chose que nous visons. Si vous jetez un oeil dans le dossier assets du portefeuille, vous verrez les tailles de police, donc vous saurez que j'ai utilisé 100 pixels pour le h1 en 15 pixels pour les balises de corps, sorte que nous pouvons facilement l'appliquer dans notre CSS. Je suis passé à atome, je ferme des fenêtres inutiles donc pour l'instant, nous allons nous concentrer uniquement sur CSS. Laisse-moi augmenter la fenêtre. J' ai mentionné que pour h1 que c'est dans le document d'heure, nous utilisons la taille de police 100 pixels. Pour un corps, nous utilisons 15 pixels afin que nous puissions définir que le corps entier aura 15 pixels, et si une navigation pour chacun des éléments, nous utilisons 14 pixels. Référez-vous à un site Web et nous avons un très grand titre et une très grande hauteur de ligne, donc passons à la valeur optimale qui est 150, je copie coller h1 150. Qu' est-ce que je veux faire d'autre ? En fait, cette hauteur de ligne est plus grande que ce que j'avais prévu, alors peut-être qu'on peut la changer à 130. Oui, c'est plus proche du projet. Pour les derniers réglages, nous pourrons expérimenter plus tard. Mais maintenant, je voudrais me concentrer sur le moins ici et sur ces choses étranges qui se passent. Examinons et voyons ce qui se passe avec l'en-tête. J' ai changé la position de l'en-tête en utilisant top. Ce qu'il fait, il change la position réelle de l'en-tête, mais il laisse les autres éléments au même endroit. Comme vous pouvez le voir sur le côté gauche, liste reste au même endroit, peu importe si je commente la valeur supérieure ou non. Donc, nous devons rapporter un peu comment, c'est une solution facile pour le faire, je vais juste ajouter le bas de marge avec la même valeur que j'ai appliqué pour le haut. Donc c'est 110 pixels et je verrai que c'est en fait de mieux en mieux. Je peux également augmenter la marge pour le rendre plus lisse et à un peu d'espace blanc. Donc, disons 160 ou peut-être 220, semble beaucoup mieux, donc je le copie et le colle dans le sélecteur d'en-tête. Prenons soin de cette liste. Nous aimerions supprimer ces puces en premier lieu et faire en sorte que la police soit appropriée. Donc, en fait, j'ai fait une erreur parce que j'ai appliqué la liste des compétences pas à cette section, si nous vérifions ici, j'ai IBM Plex et sur mon site j'ai inknut antiqua, donc je dois le changer. Rapidement, nous allons refaire cela en HTML, supporter avec moi. Cette liste de compétences de classe devrait s'appliquer à celle-ci. Désolé pour la confusion. Je pense que tout devrait être correct maintenant. Donc, je suis rafraîchissant sur le site Web et il semble bien. Ce que je voudrais faire avec cette taxe, c'est pour montrer plus et la hauteur de la ligne, et aussi supprimer ces points à puces. Comment je peux faire cela, eh bien, je vais créer un sélecteur générique pour la liste d'éléments plus anciens dans une liste ordonnée, donc c'est un style de liste, aucun, et cela supprimera ces puces. Comme ça. Je peux le coller sous h1, et une autre chose est que je voudrais augmenter la marge. Je peux avoir une marge en haut et en bas pour le rendre plus proche de notre mise en page. Je suis en train de copier et de coller. Bouton, nous voulons styler le bouton et ajouter également quelques marges à lui. Pour une balise, donc pour notre lien qui est ici, je créerais une classe. Il serait beaucoup plus facile pour nous de l'avoir sous contrôle, alors revenons à CSS et j'ai le bouton, et ici je peux appliquer quelques styles. Si je vérifie sur le projet, il ressemble à un bouton, donc il a des coins arrondis, il a un rayon de bordure, et il a la bordure en général. Appliquons la frontière. Un pixel, solide, c'est noir. Sauvegardons ça et voyons, rien ne s'est passé. Je pense que je sais pourquoi parce que je n'ai pas enregistré le fichier HTML. plaît rappelez-vous chaque fois que vous en raison de changements dans HTML CSS, vous devriez enregistrer les deux fichiers. Maintenant, j'ai la bordure, je n'aime pas que mon texte ait à souligner, donc je peux appliquer le soulignement de la balise text-décoration. Non, je suis désolé, je veux réinitialiser ça, c'est nul, couleur doit être noire, et je voudrais ajouter un peu de rembourrage. Par exemple, 10 pixels, 20 pixels, c'est mieux et aussi marge du haut. J' écris la marge supérieure comme 30 pixels. La marge n'est pas applicable et la réponse à cette question pourquoi elle n'est pas appliquée est en fait A est élément en ligne. Qu' est-ce que ça veut dire ? Cela signifie que nous ne pouvons affecter que tout ce qui s'est passé dans la ligne horizontale et non dans la verticale, donc nous ne pouvons pas appliquer de valeurs sur le dessus ou sur le bas. Pour le faire fonctionner, nous devons changer l'affichage en ligne qui est sous la valeur par défaut pour A à inline-block. Maintenant, nous serons en mesure de changer les marges sur le haut et le bas dit à la hauteur de l'élément. Je suis en train de copier tous les styles que j'ai appliqués, coller, d'enregistrer, de rafraîchir et de siège qui sont toujours là. Parfait. Mais nous devons aussi définir le rayon de la frontière. Nous pouvons le faire en utilisant border-rayon, disons 20 pixels, je pense que c'est suffisant. Je vais également augmenter un peu ce rembourrage de la droite et du haut au tiers des pixels, et il semble assez cool. Rafraîchissez et notre site Web s'améliore beaucoup plus. Je me souviens que nous devons également changer la grande légende en plus petite taille. Nous pouvons voir dans le fichier de taille de police qu'il a 10 pixels, alors créons un sélecteur de légende de fig et envoyons à la taille de police à 10 pixels. Je suis en train de rafraîchir la page et de voir que mes modifications sont fournies. Je vérifie maintenant le projet, le portfolio, ce qui manque est à coup sûr la boîte, l'ombre sur l'image et l'arrière-plan. On va couvrir ça dans la prochaine leçon. 14. Ajouter une image en arrière-plan et une ombre pour la boîte: Maintenant, nous allons travailler sur le fond. Nous pouvons appliquer la couleur de fond et nous pouvons appliquer l'image de fond. Si vous vérifiez notre dossier d'image dans le portefeuille, vous verrez que nous avons le fichier PNG d'arrière-plan. Nous allons utiliser ce fichier pour appliquer l'arrière-plan de la bruyère. Passons à Atom dans [inaudible]. Je me concentre sur l'en-tête maintenant. Je cherche l'en-tête. Si vous recherchez des classes de sélecteur ou CSS, vous pouvez utiliser Control ou Command F pour le trouver. J' ai l'en-tête et je voudrais appliquer ici un arrière-plan. Nous allons appliquer l'image de fond. Voici la règle. Vous devez écrire son URL. Il va inclure le chemin de l'élément. Jetons rapidement un coup d'oeil sur le dossier que nous avons. Notre arrière-plan est un dossier IMG, mais nous éditons le fichier que c'est dans le style CSS, donc c'est dans les dossiers, CSS. La chose que nous devons faire, nous sommes actuellement dans le dossier CSS, nous éditons le style CSS. Pour accéder à l'image, le fichier d'arrière-plan, nous devons sortir de ce dossier. Nous devons reculer, y retourner. Nous sommes à ce niveau et ensuite nous devons entrer IMG et nous pouvons voir PNG de fond. Comment nous l'écrivons réellement dans le code. Pour revenir au niveau supérieur de la structure, on utilise deux points et une barre oblique. Cela signifie que nous sortons du dossier CSS, et soudain nous sommes là. On doit entrer dans IMG. J' écris juste IMG, puis le nom de l'image. Ça s'appelle background.jpg. Je l'ai sauvé. Revenez sur le site Web, actualisez-le et voyez que mon arrière-plan n'est pas généré. Laisse-moi vérifier. La chose est que l'arrière-plan a l'extension PNG, donc j'ai besoin de le changer, de l'enregistrer, rafraîchir et je peux voir qu'en fait deux bandes bleues sont appliquées. Le fait est que l'arrière-plan est répété. Si vous souhaitez supprimer cette fonctionnalité, supprimez cette propriété, nous devons définir la répétition en arrière-plan, pas de répétition. Donc nos antécédents ne se reproduiront plus longtemps. Je voudrais également ajouter la position de notre contexte. Nous pouvons voir que l'en-tête ne répond pas la navigation que nous avons comme l'espace disponible, donc nous pouvons changer la position de l'en-tête de 110 à, par exemple, 70 pixels. Nav et en-tête le rendrait obturateur, donc il serait beaucoup plus agréable. Je copie le code entier pour l'en-tête, en le basant. Je vois que mes antécédents se rapprochent. Maintenant, j'ai mes outils de développeur en bas. J' aurai beaucoup plus de contrôle pour voir comment l'arrière-plan se comporte. Pour le changer, nous devons en fait ajuster la taille de l'arrière-plan. Il s'agit de la taille originale de l'arrière-plan. Nous devons l'étirer et nous pouvons le faire en appliquant la taille de fond. Si j'applique la couverture, il va étirer le diagramme entier pour couvrir la zone. Dans notre projet, l'arrière-plan se termine quelque part ici. Nous devons également ajouter la position de fond Y. Par exemple, je vais expérimenter avec elle. C' est trop. Quelque chose comme ça ou ça. Oui, on se rapproche. Gardez-le de telle sorte que notre taille d'arrière-plan sera couverte. Il remplira tout le récipient. Nous allons également changer la position de l'axe Y qui est vertical. J' ai besoin de copier ces deux nouvelles propriétés CSS. Revenir à Atom, les coller, enregistrer, rafraîchir, je peux fermer les outils de développement pour avoir une meilleure vue. Maintenant, mon en-tête semble beaucoup mieux. La prochaine chose que je voudrais appliquer est l'ombre de boîte sur l'image. Box shadow est une autre propriété CSS cool. Ouvrons les outils div. Maintenant, nous pouvons le changer à cette position. Nous pouvons éditer pour cette image, pour cette image actuelle et seulement cela parce que les autres images, elles n'ont pas d'ombre de boîte dans le projet. Nous devons ajouter une classe CSS pour la différencier en quelque sorte. Je suis dans mon document HTML et je cherche une image que c'est la bonne colonne. Ajoutons l'image d'introduction de classe. En CSS, j'ajoute image d'introduction de classe et j'ajoute de l'ombre de boîte. L' ombre de la boîte a des valeurs libres, d'abord, comment elle est placée sur le X, le deuxième axe Y, comment elle devrait être floue et quelle devrait être la couleur. Nous allons utiliser un peu de transparence, donc nous allons utiliser RGBA. RVB, vous remarquez déjà est de rouge, vert et bleu et A est le canal alpha responsable de la transparence. Je me souviens de cette couleur noire dans RVB, c'est zéro, zéro, zéro. Le dernier est des canaux alpha de la transparence de notre couleur, nous pouvons écrire ici, 20 pour cent. Je le sauve. Voyons voir. Mon ombre est appliquée. Ce que je peux voir ici, c'est qu'il est découpé, donc je peux appliquer une marge supérieure pour faire plus d'espace à partir du haut et aussi la marge inférieure pour rendre le texte à la légende un peu meilleur. Je le copie. Je copie et ajoute à la classe appelée intro, IMG, rafraîchissant, j'ai déjà mon en-tête de boîte. Qu' est-ce qui manque d'autre ? Je pense que nous sommes très proches du projet. Nous pouvons sauter d'autres réglages pour travailler sur la section suivante, qui est la liste. Nous allons le faire dans la prochaine leçon. 15. Styliser la liste et les sections de projet: Concentrez-vous maintenant sur la section avec la liste qui mentionne toutes les compétences de Jane. Comme nous pouvons le voir, il est centré et il a une taille de police plus grande, qui est de 50 pixels. Revenons à notre code. Pour cela, nous avons une liste de compétences appliquée. J' ai une nouvelle classe prête comme c'est ailleurs, oui, c'est ici, mais c'est bien ici, nous combinons quelques sélecteurs et des classes. Mais ces propriétés ne seront appliquées que les premières listes de compétences, il est donc bon de créer un nouvel objet CSS sous toutes les classes que nous avons auparavant. Nous voulons centrer le texte à coup sûr et nous le faisons par text-align centre, corriger et nous voulons augmenter la taille de la police à 50 pixels, et rafraîchissons notre site Web. Il semble beaucoup mieux, je diminuerais la marge et la hauteur de la ligne parce que c'est assez grand pour la liste des compétences. Nous avons des listes de compétences et nous allons fournir la ligne se cacher comme 150 pour cent, ce qui semble beaucoup mieux et nous pouvons également appliquer margin-bottom de la liste, comme 60 pixels ou peut-être plus grand, 100 pixels ou peut-être 130, donc nous aurons beaucoup plus d'espace entre les éléments. Je le copie et le colle dans la classe que j'ai déjà. Rafraîchissons, et voici à quoi ressemble notre liste. Vous devez admettre que c'était assez facile à faire. La section d'en-tête est presque terminée, la liste est faite. Maintenant, il est temps de prendre soin des projets. Nous pouvons à coup sûr supprimer la colonne avant parce que c'était juste à des fins de démonstration. Je vais tout au bas du projet, c'est le projet 3, troisième projet, je supprime la colonne supplémentaire dont je n'ai pas besoin. C' est bon. Ce que je dois travailler maintenant est de changer définitivement la taille des titres ou est-ce réellement fait ? Non, ce n'est pas encore fait. Il devrait être de 50 pixels. Je travaillerais également sur la hauteur de la ligne pour le titre, pour le paragraphe et pour le bas aussi. La bonne nouvelle est que nous pouvons réutiliser la classe que nous avons utilisée pour ce bouton et l'appliquer partout où nous avons besoin. Pour tous lire plus, huit taxes. Revenons à CSS, j'ai mentionné que pour h2, nous voulons une taille de police de 50 pixels. Ici, j'ai h1. Pour rendre le code facile à lire, sous h1 nous créons le sélecteur h2, donc j'écris la taille de la police 50 pixels et la hauteur de la ligne, disons 130 pour cent. Je l'enregistre et je vois que ma police est augmentée. Je vois qu'il y a une différence dans le poids de la police que celui-ci est plus mince. Je voudrais supprimer cette audace de la rubrique. Nous pouvons le faire en appliquant la police pour h1&h2 car par défaut chaque titre a le poids font-weight gras. Nous voulons que le poids de police soit normal. Maintenant, il y a une différence. Permettez-moi de vérifier rapidement les tailles de police. J' ai ouvert le document de taille de police et j'ai vu que nos en-têtes h2 devraient avoir 30 pixels, pas 50, donc nous devons le corriger, donc h2 aura 30 pixels et maintenant il semble beaucoup mieux. Appliquons à chaque paragraphe plus grande hauteur de ligne, comme 160 pour cent donc nous avons p, hauteur de ligne, 150 pour cent et maintenant c'est beaucoup mieux. La prochaine chose est d'appliquer le bouton de classe à un texte. En HTML pour le premier projet, qui est ici, j'ai href donc nous appliquons l'attribut suivant, qui est la classe, et nous appliquons le bas. Je suis en train de l'enregistrer, de rafraîchir et de voir que le bouton fonctionne ici. Je voudrais également appliquer ces tuiles pour ce bouton ou pour celui-ci, qui n'est pas là donc nous devons le placer aussi bien. Je le copie, je cherche le suivant, c'est là. Sur là p j'ai le bouton aussi bien. La chose que je n'aime pas, c'est que tout est très pressé, donc j'aimerais donner plus d'espaces entre les projets. Nous pouvons le faire en appliquant la classe CSS pour les dissections. Si nous lançons des outils def, vous verrez que nous avons cette section pour le projet 1, le projet 2, le projet 3. Pour tous, nous pouvons appliquer la classe, il augmentera les marges sur le haut et sur le bas. Ce que je fais en ce moment, je reviens au tout premier projet et j'ajoute un projet de classe. Je copie l'attribut, la section et le suivant. Maintenant, chaque section du projet a une classe de projet, je peux créer cette classe, disons que ce sera juste une classe de projet et je peux appliquer une marge de haut en bas, disons 50 pixels ou même 70 pour donner plus d'espace, cela semble plus agréable. Si nous le comparons avec notre projet, vous pouvez voir que le premier projet et le troisième ont l'arrière-plan et la marge entre le bas et le paragraphe est plus petite que nous l'avons actuellement. Travaillons dessus. Le premier et le troisième projet auront un arrière-plan, donc nous pouvons appliquer la classe CSS. Un autre que nous avons projet et nous pouvons l'appliquer au bleu. Encore une fois, bleu, nous allons utiliser la même couleur que nous avons utilisé pour la navigation, sorte que la couleur de fond et nous appliquons cette couleur. Désolé, c'est le projet 2, donc je dois trouver le projet 1. Pour le troisième projet, le projet 3, qui est ici, j'économise HTML, en enregistrant CSS. Revenir à mon navigateur et je vois que l'arrière-plan est appliqué. Ce que je n'aime pas, c'est que le conteneur entier n'a pas de rembourrage, donc pour chacun du projet, j'ajouterais aussi des pixels de planète ou même plus du rembourrage et peut-être diminuer un peu la marge, comme ceci. Ça a l'air beaucoup mieux. Je vais prendre toute la classe et le remplacer, le sauvegarder et vérifier. La chose que je mentionnais était que le bas a la marge supérieure définie, sorte que nous pouvons agir de différentes façons pour le résoudre. Par exemple, nous pouvons supprimer la marge si le bas apparaît dans la classe de projet. Nous avons la classe de projet et nous donnons les informations au navigateur, que hey si nous avons la classe appelée le baton, qu'il est inclus dans le projet de classe permet de supprimer cette marge, mettons-la à zéro, nous allons écrire une telle façon. Si nous avons un aperçu de la classe de projet et du bas, définissons la marge supérieure à zéro ou peut-être pas zéro, mais 10 pixels donc nous aurons un peu d'espace et maintenant il semble beaucoup mieux. Nous sommes presque prêts, j'appliquais la marge à l'image margin-bottom, donc la chose que je peux faire pour la rendre plus universelle, je peux supprimer cette marge d'ici et l'appliquer à chaque figlégende, donc chaque figlégende aurait le même marge du haut. Le changement que je fais était de prendre de l'intro ING, je supprimais la marge et j'ai ajouté margin-top 10 pixels à figlégendes, enregistrement, rafraîchissement. J' ai la marge ici et les mêmes valeurs pour les légendes dans ces éléments aussi. Qu' est-ce qui manque d'autre ici ? Bien sûr, nous devons travailler sur le pied de page. Voyons voir dans toute la largeur du navigateur. Nous allons appliquer la magie CSS pour ce pied de page. Ce qui doit être fait à coup sûr, centrer le texte et définir la taille de la police à 50 pixels. Faisons-le dans la prochaine leçon. 16. Styliser le bas de page: Nous nous rapprochons des étapes finales, alors prenons soin du pied de page de notre site Web. Ce que nous devons faire ici, c'est que nous devons centrer le texte, nous devons augmenter la taille de la police. Revenons à ce texte CSS. Nous avons notre pied de page et H2, et nous avons déjà défini la taille de la police de fichier pour H2, qui est de 30 pixels, mais dans notre projet il a 50. Au lieu de créer une autre classe, nous pouvons simplement fournir le sélecteur qui se compose de pied de page et H2. Notre navigateur va essayer de trouver H2 dans la balise de pied de page et seulement ici, il appliquera la taille de police de 50 pixels. Nous devons également centrer le texte. En fait, nous allons centrer le texte sur l'ensemble du filtre parce que le paragraphe est également centré, donc c'est le centre d'alignement du texte. Rafraîchissons la page. Je suis presque satisfait de ça. Ce que je voudrais appliquer, ce sont quelques marges en haut et en bas. J' applique la marge supérieure et inférieure 50 pixels. En fait un peu plus, ajoutons 100. Maintenant, c'est beaucoup mieux. Je voudrais également ajouter un peu d'espace entre l'en-tête et le paragraphe. Ajoutons une marge supérieure pour le H2 qu'il est dans le pied de page, 50 pixels. Ce n'est pas le haut de la marge mais le bas de la marge. Désolé pour ça. C' est assez petit, alors qu'en est-il de 100 ? Ouais, maintenant ça a l'air beaucoup mieux. Notre pied de page est prêt. La chose que je voudrais travailler dans un peu est l'alignement de la légende épaisse et d'un texte dans le deuxième projet. Si nous ouvrons le fichier PNG, vous verrez que le texte est aligné ici sur le côté droit, et celui-ci, légende épaisse, a le même alignement. Cela a aussi un alignement de ligne. Nous devons appliquer une classe supplémentaire, appelons cela, alignement à droite, et nous allons utiliser l'alignement du texte, propriété CSS, text-align, et ensuite nous devons l'appliquer au projet numéro 2. Pour l'ensemble du projet, nous allons appliquer ici l'alignement droit. Je peux voir que tout mon texte était alors la colonne dans le deuxième projet est alignée à droite. Ce qui manque d'autre, c'est que nous devons aligner à droite la légende épaisse pour le projet 1 et le projet 3. Je cherche le premier projet et la légende épaisse est ici, donc j'ajoute de la classe. Le même alignement droit, je le copie, et je cherche à projeter trois, et la légende épaisse ici aussi. J' ajoute de la classe, je l'sauvegarde et je rafraîchis le site Web, et je peux voir que le texte est aligné. D' accord. Prenons soin de la navigation dans les dernières semaines. 17. Styliser la navigation: Dans cette leçon, nous allons nous occuper de la navigation. Si vous ouvrez le projet, vous verrez que nous avons la ligne noire. Comment cela peut-il être fait ? Ce n'est pas si compliqué. Revenons au code. Ce que nous devons faire dans notre navigation, qui est en haut, nous devons créer une balise vide que c'est entre Behance, Twitter, LinkedIn, etc. Ici nous avons li, alors nous aurons vide, classe. On va le sauver. Voyons voir. Nous avons cet espace entre. Si nous utilisons des outils de développement, vous verrez que rien n'est ici, mais en fait, nous avons besoin d'un peu plus d'espace pour définir la largeur. Par exemple, 50 pixels, et nous pouvons ajouter border-top, sorte que seul le bord supérieur aura la bordure, un pixel et la couleur noire. Je pense que cela devrait être un peu plus long, donc comme 70 ou même 90 pixels. Ce que je n'aime pas, c'est que ce n'est pas au centre. Nous pouvons facilement le positionner en utilisant quelques astuces. Tu connais déjà haut. Par exemple, nous pouvons appliquer top, 10 pixels, et pour le faire fonctionner, nous avons besoin d'avoir la position, relative, mais elle descend en fait, et c'est compteur [inaudible] CSS, mais si nous voulons changer le haut et le rendre réellement plus proche du bord supérieur, vous devez ajouter moins afin qu'il ait la plus petite distance entre le bord supérieur. Je pense que cinq pixels suffisent pour que nous puissions copier toute la classe. Cela signifie en fait que ces styles ne fonctionneront que si li a une classe vide appliquée. Ainsi, nous pouvons facilement le copier et le coller quelque part près de notre navigation afin qu'il soit cohérent. Nous avons notre ligne, et nous pouvons également ajouter des liens vers nos médias. Par exemple, si je vais utiliser le lien externe Twitter, je peux ajouter mon compte Twitter, juste en fait mon compte personnel, pas Jean's Doe, mais qui s'en soucie ? Donc, j'ai aganaplocha, ceci mon vrai nom, et j'ajoute aussi un autre attribut qui est cible, vide, et il dit à notre navigateur d'ouvrir le lien dans une nouvelle fenêtre. Je le sauve, et voir que malheureusement mon lien est violet et a la décoration de texte. C' est pourquoi certains styles par défaut sont appliqués par le navigateur, nous devons donc les réinitialiser. Nous pouvons facilement le faire par nav li a, donc tous les a qui sont dans les éléments de la liste auront la décoration de texte définie sur none, couleur noire, et je suis heureux avec cela. Si je clique dessus, mon Twitter s'ouvrira. Que se passe-t-il si nous voulons lier ces éléments aux zones spécifiques du site Web ? Nous allons utiliser des liens d'ancrage, et nous allons utiliser des ID. Comment peut-on le faire ? Nous devons créer « a » et dans l'attribut crop, nous devons ajouter un ID spécifique si nous voulons ajouter un lien au contact, appelons-le contact, mais vous pouvez le mettre où vous voulez. Vous pouvez le mettre Jane contact, nommez-le comme vous le souhaitez. On a un contact, et on a une pièce d'identité. ID commence par hachage. Maintenant, nous devons créer cet ID en tant qu'attribut pour la section spécifique. Imaginons que ce pied de page soit notre section de contact. Donc, nous devons créer ID, donc l'attribut ID et le nom doit être le même que nous le définissons ici. Dans le Nav, ça s'appelle le contact. Revenons à l'identification, et on appellera ce contact. Sauvegardez-le, actualisez, cliquez, et nous sommes en bas de la page. La même chose que nous pouvons faire avec Works. Donc Works nous fera défiler vers les projets. Le premier projet démarrera l'ID. Nous avons donc le projet de classe, mais nous avons également besoin d'avoir des projets ID, et cela doit être reflété dans le lien. Si nous avons Works, je crée des projets d'ID « a », et bien sûr je dois fermer une balise. Pour l'expérience, nous pouvons, par exemple, lier à la toute première section à l'en-tête. Donc l'en-tête aurait de l'expérience ID, et nous devons le lier aussi bien. J' économise, rafraîchissant, donc si je clique sur Works, je suis en haut de la section Travail. Si je clique sur Expérience, je suis tout en haut, et si je clique sur Contact, je suis en bas. Pour les autres sections, vous pouvez utiliser vos propres liens, et vous pouvez essayer de le traiter comme un autre exercice. Donc nous en avons fini avec la navigation. Quoi d'autre doit être ajouté ? J' aimerais ajouter une petite transition de fonctions. Donc, survolez les effets sur les boutons. Nous allons le faire dans la prochaine leçon. 18. Fonction de transition CSS: C' est l'une des leçons finales. Dans cette leçon, nous allons nous concentrer sur fonctions de transition CSS afin de changer les couleurs du bouton sur le pointeur. Nous avons notre bouton, mais si nous survolons notre curseur, rien ne se passe. Nous aimerions changer l'arrière-plan en noir et avoir la couleur du texte en blanc. Comment nous pouvons faire cela, nous devons utiliser la pseudo-classe, qui est appelée hover. Je cherche mon cours de bouton. Bon, passons au CSS seulement. Hover classe est une pseudo-classe donc nous l'écrivons comme ceci. Nous écrivons le nom de la classe donc après deux-points, nous écrivons hover et cela signifie que cette pseudo-classe serait dédiée à la classe de bouton seulement. Chaque fois que nous survolons l'élément qui a une classe de bouton, quelque chose va changer. Écrivons 'fond', il va changer en noir, et ajoutons de la couleur au blanc et enregistrez-le. Rafraîchir notre page et quand nous survolons, nous pouvons voir le changement. Mais ce que je n'aime pas, c' est que le changement est très agressif donc c'est comme zéro ou un. Je voudrais avoir la fonction de transition afin que nous puissions aussi faire avec CSS et revenir à Atom et pour mon élément, mon bouton d'élément original, j'ai besoin d'écrire la transition. Ce qui sera changé donc par exemple, arrière-plan. Combien de temps cela prendra pour le changement donc, par exemple, une demi-seconde et quelle serait la fonction afin qu'il faciliterait l'entrée et sortie de sorte que le changement sera très doux et très lisse dès le début et à la fin. Vous pouvez voir que l'arrière-plan change très en douceur, mais la couleur agit toujours agressivement. Nous avons également besoin de cette fonction de transition pour la couleur, et nous pouvons copier toutes les autres propriétés. Maintenant, le changement est très lisse et je l'aime vraiment et cela n'a été fait qu'avec quelques lignes de code. Vous pouvez facilement modifier ces choses. Vous pouvez modifier les couleurs, les arrière-plans, les bordures, etc. Que pouvons-nous faire d'autre ? Eh bien, nous pouvons également appliquer, par exemple, une transformation de texte ou une décoration de texte pour souligner le texte lorsque nous survolons la navigation. Nous revenons à la navigation qui est ici donc nous avons 'nav li a' donc nous copions le sélecteur entier, collez-le ici, nous ajoutons une pseudo-classe qui est survolée et ajoutons un soulignement de décoration de texte. Voyons voir. Si je survole, j'ai le message. Ce n'est pas encore le lien, donc c'est pourquoi nous n'avons pas le soulignement du texte. Bien sûr, n'hésitez pas à expérimenter pour faire beaucoup plus. Le ciel est la limite. Vous pouvez totalement vous amuser avec les fonctions de transition et avec pseudo-classe donc j'espère que vous obtiendrez des effets intéressants. Voici à quoi ressemble le site final. C' est presque un à un pour mon projet, donc je suis très satisfait et j'espère que vous parviendrez à réaliser quelque chose de similaire avec votre code, avec votre CSS et HTML. J' espère que vous parviendrez à mettre une théorie en pratique et à voir comment CSS et HTML fonctionnent ensemble. En tout doute, n'hésitez pas à utiliser Dev Tools pour trouver de nouvelles fonctionnalités ou expérimenter, changer la couleur de fond, changer la typographie, faire ce que vous voulez avec le site. Vous pouvez facilement refaire le modèle pour l'ajuster à vos besoins, à votre goût, à votre esthétique. Je garde les doigts croisés pour toutes tes expériences. 19. Résumé du cours: Regardons le dernier regard sur notre site web. Tout d'abord, nous avons pris soin de la navigation et nous avons éléments de la liste et nous avons appliqué le goût de l'ancre, sorte que nous pouvons facilement naviguer à travers notre site. Nous avons également des liens externes, par exemple, un compte Twitter. Nous avons créé la section d'en-tête avec une photo. Nous avons appliqué l'ombre de la boîte. Nous avons les légendes, nous avons le fond avec l'animation, avec la fonction de transition, avec la pseudo-classe appliquer, qui est stationnaire. Nous avons la liste, nous avons la plus grande rubrique. Nous avons appliqué différents styles de police. Nous avons différents types de visages. On a centré le texte. Nous avons deux colonnes dans notre grille. Nous avons les photos jointes. Nous avons différents alignements de texte vers la gauche, vers la droite, et nous avons aussi le pied de page. J' espère que vous réutiliserez certaines sections du site. J' espère que vous appliquerez CSS et des exemples pratiques dans votre travail quotidien. Merci beaucoup de participer à mon cours. J' espère que tu t'amuses bien. J' espère que vous croyez que le codage est un excellent outil pour faire quelques expériences avec l'interface utilisateur dans la vraie vie, qui est un navigateur Web.