Les bases de la mise en page pour le design web : décrire votre design avec HTML et CSS

1. Pourquoi devriez-vous suivre ce cours: Hé, c'est Rich ici. Je me souviens avoir conçu mon premier site web. C' était amusant et génial, mais essayer de coder c'était un cauchemar. Je n'ai pas compris comment arranger les choses. L' un d'eux, je ne savais pas pourquoi tout commençait en haut à gauche. Je ne savais pas quand utiliser le flotteur ou la position. Je n'ai pas compris la profondeur. Je ne savais pas pourquoi certains éléments sont plus larges que je les ai définis pour être et je ne savais certainement pas comment obtenir mon contenu au milieu de l'écran. En bref, Ce n'était pas du tout comme Photoshop. La chose est, qui était en 2007 et bien que les applications de conception Web sont génial, ce que vous concevez et puis toujours jamais le site final. Le site final est celui que vous pouvez parcourir. C' est celui devant votre client et l'habileté de savoir comment décrire un design à un navigateur en utilisant HTML et CSS devient une compétence fondamentale et souvent requise. HTML et CSS sont une paire de langage de conception descriptive qui peut être appris tout comme vous apprenez à utiliser Sketch ou Photoshop. Donc, après cette classe, vous comprendrez le modèle HTML Box, les flotteurs, les types d'affichage, le positionnement et la profondeur. Vous saurez quand laisser le navigateur poser les choses, ce qui fait un très bon travail à, et quand vous devriez prendre le contrôle. Vous comprendrez mieux comment fonctionne le navigateur et comment il diffère des applications de conception. Lorsque vous concevez, connaître ces choses vous permettra de prendre des décisions éclairées en matière de conception et lorsque vous écrivez le HTML et le CSS, tout est plus facile à comprendre. Donc, en un mot, cette classe couvrira cinq types différents de positionnement, la gestion de la profondeur, les types d'affichage courants, le remplissage, les marges, les bordures, la traduction X et Y, terminologie HTML et CSS et beaucoup d'exemples. Nous finirons par créer une page Web à partir de ce que nous avons appris au cours de la classe. Donc, si ça semble amusant, alors suivez. 2. Théorie des boîtes en HTML: Couvrons ce que j'aime appeler HTML Box Theory. Il est utile de le faire pour que vous compreniez le fonctionnement du HTML. Dans la plupart des applications de conception telles que Photoshop, Sketch et Illustrator, un calque apparaît visuellement à une profondeur supérieure à un autre s'il est plus haut dans le panneau Calque. Cela s'applique également aux groupes et sous-couches. En HTML, c'est légèrement différent. Lorsqu' un élément HTML, qui ressemble à un calque, est plus élevé dans le document HTML qu'un autre, il apparaît avant les éléments suivants sur la page. S' il vient en premier dans le document, il vient d'abord visuellement, il est plus haut. Le code est en corrélation avec ce que nous voyons. En HTML, les éléments sont comme des boîtes et sont empilés par défaut du haut du document vers le bas. Un élément HTML est caractérisé par une balise d'ouverture et une balise de fermeture. Lorsque vous ajoutez un autre élément, c'est comme ajouter une autre boîte au-dessus de toutes les autres. Maintenant, vous pouvez mettre des éléments à l'intérieur d' autres éléments et c'est exactement la même chose que de mettre une boîte dans une boîte. En HTML, vous pouvez placer autant de boîtes à l'intérieur que vous le souhaitez et la même règle s'applique à l'intérieur d'une boîte. Par défaut, ces boîtes sont empilées de haut en bas. Ce qui est étonnant à propos des boîtes HTML, c'est qu'elles se développent pour contenir tout ce que vous mettez à l'intérieur d'elles. Par défaut, il n'y a pas de cotes définies. La plupart des types de zones HTML qui sont placées à l'intérieur d' autres zones élargissent leur largeur pour remplir l'espace disponible. Nous couvrirons quelques exceptions plus tard. Ce qui est génial à ce sujet, c'est qu'en tant qu'humains, nous n'avons pas besoin d'écrire de code pour gérer les positions X et Y de l'une de ces boîtes. Le navigateur fait tout cela pour nous. Les boîtes s'empilent soigneusement et se dilatent quand elles en ont besoin. Il y a des exceptions, bien sûr, et puis nous faisons nos propres exceptions parce que nous voulons que notre taille ait l'air d'une certaine façon. Nous pouvons définir toutes sortes de propriétés et avoir un contrôle super fin sur l'apparence et le fonctionnement de nos pages Web. C' est super amusant, c'est gratifiant et c'est aussi un peu intimidant en même temps. Cette classe progresse de la façon par défaut que les boîtes HTML fonctionnent à obtenir des boîtes pour faire toutes sortes de choses comme la lévitation, collage et le changement de profondeur. Nous commençons à prendre le contrôle à partir du navigateur où il nous profite. 3. Terminologie du HTML et du CSS: Donc, je n'aime généralement pas utiliser la terminologie web officielle. Ça a l'air geeky, ça a l'air bizarre, et ça conduit souvent les gens à se gratter la tête. Mais je pense que pour cette classe et pour vos avantages, sur la même page serait vraiment utile. En HTML, vous avez un tas de jeux de balises qui composent vos documents. Chaque ensemble de balises a un nom, une balise d'ouverture, une balise de fermeture, et peut-être du contenu. Une balise peut également avoir des attributs qui consistent en un nom et une valeur de propriété d'attribut. Un nom d'attribut suivi d'un signe égal avec des informations entre guillemets simples ou doubles est ce qui constitue cet attribut. Les attributs donnent au navigateur des informations supplémentaires sur l'ensemble de balises comme, comment le style, où le navigateur doit aller ensuite, et où se trouve la source d'une image, etc. Certains jeux de balises, ils n'ont pas besoin d'une balise de fermeture, donc vous pouvez écrire une seule balise spéciale comme celle-ci. Dans CSS, vous pouvez styliser un élément HTML ou plusieurs éléments HTML avec un ensemble de règles. Mais comment faire référence à toutes ces parties dans un ensemble de règles ? abord, nous avons notre sélecteur, qui indique à l'ensemble de règles quels éléments styliser. Cela peut inclure des clauses, des ID, des balises , des pseudo-clauses, plusieurs enfants sélectionnés , imbriqués, etc. Ensuite, vient le bloc de déclaration, tout à l'intérieur des accolades. C' est là que nous écrivons les règles pour styliser nos éléments sélectionnés. Chaque règle que nous écrivons est appelée une déclaration, et elle est composée d'un nom de propriété et d'une valeur de propriété. Ils sont séparés par un deux-points et se terminent par un point-virgule, et tous ces éléments sont appelés un ensemble de règles. Donc, j'espère que cela aide pour cette classe et pour les informations futures que vous consommez. 4. Modèle de boîte et dimensionnement des boîtes: Ce que j'ai souvent fait dans le passé est de définir un élément à 100 pour cent de largeur, puis de donner une autre bordure et un remplissage, puis il est étendu au-delà des limites des documents. Super frustrant. Donc, comprendre comment fonctionne le modèle de boîte est super important. Vous pouvez éviter la frustration et les piratages stupides sans fin. Vous pouvez ajouter une marge, remplissage et des bordures à la plupart des éléments. Ces trois choses composent le modèle de boîte et affectent la largeur et la hauteur d'un élément. La marge est l'espace de respiration. L' élément se donne à partir d'autres éléments. C' est comme si c'était un espace personnel. Border est alors le calque externe, que vous pouvez styliser. C' est comme la première couche de vêtements. Ensuite, il y a le rembourrage, qui est l'espace de respiration que l'élément donne entre sa bordure et son contenu. Ainsi, par défaut, si vous définissez la largeur d'un élément à 400 pixels, puis ajoutez un remplissage et une bordure, la largeur réelle de l'élément augmente au-delà 400 pixels car la largeur que vous définissez correspond à la largeur du contenu interne. La même chose s'applique à la hauteur. Toutefois, si vous modifiez votre valeur de taille de boîte en zone de bordure, la largeur que vous définissez sera appliquée au niveau de la bordure et non au niveau du contenu interne. La valeur par défaut pour le dimensionnement de boîte est Content-box. Mais, j'aime rarement utiliser border-box pour le dimensionnement de la boîte. Donc, voici un exemple en direct sur CodePen. Nous avons cette boîte un, il a une largeur de 400 pixels, rembourrage de 50 pixels, et il a une bordure noire solide qui est de 20 pixels de largeur. Donc, lorsque nous inspectons cette boîte, cliquez avec le bouton droit de la souris, inspecter, nous pouvons voir que lorsque nous survolons cette boîte, elle a une largeur de 540 pixels. Pourquoi ? Il n'a pas une largeur de 540 pixels ? Eh bien, si nous dessinons ici, nous pouvons voir que le h2, qui fait partie du contenu, a une largeur de 400 pixels. C' est ce que fait cette ligne ici. Il définit la largeur intérieure à 400 pixels, puis ajoute le remplissage, qui serait le remplissage à gauche de 50 pixels et le remplissage à droite de 50 pixels, ce qui ajoute 100 pixels aux 400 pixels existants. Ensuite, il ajoute une bordure supplémentaire à gauche de 20 pixels et une bordure à droite de 20 pixels, ce qui vous donne un total de 540 pixels. Alors, bon à savoir. Vous pouvez travailler avec cela et beaucoup ont au cours des deux dernières années. Mais, nous avons cette excellente nouvelle façon de travailler avec le modèle de boîte, et cela s'appelle box-sizing : border-box. Incroyable. Si vous vouliez savoir comment je viens de faire cela, vous pouvez taper bz et appuyer sur l'onglet, et avec quelque chose appelé Emmet, qui est disponible dans toutes sortes d'éditeurs de code. Il ne fait que l'agrandir. Vous pouvez taper content-box, si vous préférez les choses à l'ancienne et que vous voulez être explicite, mais pour moi, j'aime juste utiliser box-sizing : border-box la plupart du temps. C' est vraiment facile pour moi. J' ai défini la largeur et puis je dis que je veux un rembourrage de 50 pixels et je veux une bordure de 20 pixels et cela fonctionne tout pour moi. Merci beaucoup. 5. Marge, remplissage et bordure: Les déclarations de marge, de remplissage et de bordure ont tous quatre côtés de la boîte que vous pouvez définir. Vous pouvez définir margin-top ou padding-left ou border-bottom. Par exemple, si vous voulez définir les quatre côtés, vous pouvez le faire avec quatre déclarations distinctes. Mais, vous pouvez également utiliser des déclarations abrégées. En utilisant la marge, vous pouvez définir les quatre côtés à la fois. Vous pouvez définir les valeurs horizontales et verticales, ou vous pouvez définir les quatre côtés sur des valeurs uniques. L' ordre du raccourci est en haut, à droite, en bas, à gauche. S' il s'agit d'une seule valeur, elle les applique à tous les côtés. S' il y a deux valeurs, il applique la première valeur en haut et en bas et une deuxième valeur à droite et à gauche. S' il y a trois valeurs, il applique la première valeur au sommet, la deuxième valeur à droite et à gauche, et la troisième valeur à bas. Les mêmes règles s'appliquent au rembourrage. Les types de valeurs que vous pouvez utiliser pour la marge et remplissage sont des valeurs de longueur CSS typiques : pixels, pourcentages, em, rem ou em et rem, et cetera. La déclaration raccourcie de bordure est légèrement différente car la déclaration border-bas ou border-top est également un raccourci. Ainsi, lorsque vous utilisez border-bas, par exemple, vous pouvez définir la largeur de bordure, la couleur de bordure et le style de bordure en même temps. Ainsi, lorsque vous utilisez la déclaration de bordure, vous ne pouvez définir que pour les quatre côtés. Mais vous pouvez définir la couleur, la largeur et le style des quatre côtés en même temps. Sur la plupart des éléments, la largeur est généralement de 100 pour cent, et la hauteur est généralement assez élevée pour que son contenu s'intègre dans. Toutefois, cette largeur de 100 % n'est pas définie. Il remplit juste la largeur disponible. Il est donc assez facile de définir des marges, des paddings et des bordures et de laisser l'élément remplir l'espace par défaut. La complexité est introduite lorsqu'un élément ne le fait pas par défaut. Les éléments comme les entrées sont des exemples de premier plan. C' est l'exemple de nouveau. Donc, nous avons cette boîte. A l'intérieur de la boîte, nous avons ce h2. Maintenant, ce h2 est assez spécial. Il a une couleur d'arrière-plan. Donc, si nous devons simplement supprimer cela, vous verrez que la couleur de fond de la boîte vient à travers. Alors maintenant, ajoutons quelques paddings, quelques marges, et jouons avec le raccourci pour les marges, les paddings, les bordures. Donc, d'abord, ajoutons un peu de rembourrage. Nous pouvons ajouter 20 pixels de rembourrage. Oui, ça a l'air génial. Maintenant, on peut voir le bleu passer. Cool. Ajoutons de la marge ensuite. Ajoutons 40 pixels de marge. Fantastique. Maintenant, si nous commençons à changer le rembourrage, nous pouvons changer cela à 30 pixels. Changons-le à 70 pixels. On peut commencer à voir ce qui se passe ici. C' est vraiment génial. Que se passe-t-il si nous changeons celui-ci à 50 pixels. Plutôt cool. Donc, vous pouvez voir comment nous pouvons utiliser le raccourci et c'est beaucoup mieux que d'aller padding-top 20 pixels et padding-right de 40 pixels et padding-bottom de 100 pixels et padding-left 30 pixels. Cela a pris beaucoup de temps, mais vous pouvez également voir que vous voulez juste spécifier un remplissage comme padding-right, vous pouvez l'écrire. Parfois, lorsque vous écrivez du HTML old-school, en particulier pour les newsletters HTML, cette syntaxe est nécessaire. Donc, c'est bon de savoir. Une marge peut à peu près faire la même chose. Essayons la frontière. Alors, bordure, allons-y pour 10 pixels noirs. Ça n'a pas vraiment d'importance de la façon dont tu le dis. On peut dire « solide ». C'est plutôt cool. On peut aller pour pointillés. Aussi, plutôt cool. Tu verras que si j'enlève ce noir et que je le mets ici, ça ne fait pas de différence. Je peux changer cela en rouge, je peux changer en jaune ou tout autre chose que je veux vraiment les changer aussi. Donc, c'est assez cool, et puis nous pouvons aussi dire border-top, nous pouvons changer la border-top en, disons, 20 pixels noir solide. Donc, vous pouvez voir comment cela se passe. C' est vraiment cool et ce que nous ne pouvons même pas faire ici est même d'être plus précis. Donc, bordure est un raccourci, border-top est un raccourci. Mais maintenant, nous pouvons dire border-top-width, et nous pouvons dire quelque chose comme 30 pixels. On peut dire border-top-color, et on peut dire rouge. Donc, c'est la différence entre les raccourcis et la syntaxe vraiment longue, c'est vraiment bon de connaître les deux. Donc, le deuxième exemple ici est comment faire une marginalisation négative. Eh bien, nous avons ce h2 et il s'appelle le h2 négatif. En ce moment, il n'a pas l'air trop négatif, il n'a pas de négativité à son sujet. On va sortir ça. Donc, nous allons juste quelque chose comme marge, ou peut-être nous pouvons juste appuyer sur onglet quand nous avons m pour marge. Fantastique. Ensuite, nous pouvons définir un négatif 20 pixels. Wow, regarde ça. Que se passe-t-il si nous allons négatif 120 pixels ? On y va, 0,0. Donc maintenant, c'est littéralement juste au sommet que c'est un montant négatif. On pourrait aussi faire le fond, mais ça n'aiderait pas. Et la gauche ? Donc, passons à 120 pixels négatifs là, et si j'ai un rembourrage de 50 pixels. Donc, si nous avons juste réglé ça sur un négatif 50, il devrait s'aligner à droite sur le côté gauche. Plutôt cool. Si nous allons un autre 100 négatif, il devrait s'aligner tout le chemin vers la gauche. C' est un moyen assez facile de faire une marginalisation négative. Voila. Le h2 négatif. C' est notre troisième exemple. J' aurais aimé que quelqu'un me l'ait dit plus tôt dans ma carrière de développement de frontend. Ça m'a frustré aucune fin. La question à laquelle je voulais répondre et que je devais travailler seul était, comment puis-je obtenir quelque chose de centre aligné horizontalement ? Je veux que ce gros bloc bleu soit au milieu de la page. Comment puis-je les mettre au milieu ? C' est vraiment simple en fait. Vérifie ça. Vous allez juste m pour la marge, appuyez sur la touche Tab, puis vous allez « 0 auto ». Boum. C'est au milieu. Ce que cela veut dire, c'est que, pour les marges gauche et droite, c'est auto. Donc, le navigateur fonctionne juste pour vous. Fantastique. Vous avez une largeur de 400 pixels, nous pouvons changer ça à 600 pixels. Boum. Fait la même chose, même si nous prenons la largeur que. Toujours assez gentil. Annuler, regarde ça. Si vous vouliez l'écrire manuellement, vous pouvez le faire comme ça. Donc, ml pour Margin-left, Auto et Mr, aussi Auto, alors on peut sortir ça. Il fait la même chose. Douce. Maintenant, laissez-moi vous parler de l'effondrement des marges. Donc, ce que nous avons ici, c'est un tas de p, ils ont tous une classe de boîte et chaque boîte a un nombre, et ces chiffres sont corrélés avec une couleur d'arrière-plan. Fantastique. Maintenant, chaque boîte a également un rembourrage de 10 pixels et une marge supérieure et inférieure de 30 pixels. Mais, si vous devez regarder ces cases de près, vous pouvez penser que ce n'est pas 30 pixels en bas. Donc, si nous inspectons ceci, nous verrons que cette zone orange au-dessus de la case 2, c'est environ 30 pixels. Cool. Mais, sûrement, il devrait y avoir encore 30 pixels de la marge inférieure de la boîte un. Donc, si nous survolons la case 1, nous verrons que c'est sûr qu'elle a une marge de fond, mais elle se chevauche. Alors, qu'est-ce qui se passe ici ? Eh bien, une des marges s'effondre et c'est la plus petite des deux marges. Il disparaît juste, ce qui est cool parfois, mais si vous n'y attendez pas et que vous ne savez pas ce qui se passe, c'est frustrant. Donc, soyez conscient de ça. 6. Types d'affichage, styles par défaut. Comment les modifier: Chaque balise a un type d'affichage par défaut. La plupart des balises ont une valeur par défaut d'affichage : bloc. autres valeurs communes sont inline et inline-block. Il y a aussi des types d'affichage super impressionnants comme flex et grid, mais je les mène hors de ces classes. Ils sont un peu plus complexes. autres valeurs de type d'affichage que vous pouvez rencontrer sont table, list-item, run-in, table-cell. Il y en a un tas d'autres aussi. La bonne chose est que n'importe quel élément peut obtenir le style d'affichage par défaut remplacé, comme n'importe quelle autre propriété. Donc, laissez-moi vous parler des différences entre l' affichage : block inline, et inline-block, et les éléments de bloc comme un div, une balise p, ou un que vous avez défini une déclaration display : block sur. Nous allons commencer sur une nouvelle ligne et remplir tout l'espace horizontal disponible qui lui est donné. La hauteur sera suffisante pour s'adapter à son contenu. C' est une jolie boîte magique. Même si vous définissez une largeur et une hauteur, l'élément commencera sur une nouvelle ligne. Un élément en ligne, comme une balise, une span, une balise em ou un élément sur lequel vous avez défini une déclaration en ligne d'affichage, fonctionne presque de la même manière qu'un morceau de texte. Ils prendront aussi peu de place que possible et s' asseront à côté d'autres éléments en ligne et en bloc. Les éléments en ligne sont destinés principalement au texte et aux données. Vous ne devez pas imbriquer un élément de bloc à l'intérieur d'un élément en ligne. En outre, les éléments en ligne ne démarreront pas sur une nouvelle ligne. Lorsque vous définissez des marges et des marges sur des éléments en ligne, les modifications verticales ne sont pas visibles. Cependant, les horizontaux le seront. Si vous ajoutez une bordure, vous pouvez voir ce qui se passe vraiment. C' est assez incroyable. Un élément de bloc en ligne, un peu comme les entrées, sélectionne, ou un élément sur lequel vous avez défini une déclaration de bloc en ligne, a le meilleur des mondes en bloc et en ligne. Il peut s'asseoir à côté des éléments inline et inline-block. Lorsque vous définissez des marges, des marges et des bordures, il prend de l'espace horizontal et vertical. Ce type d'affichage doit également être utilisé avec du texte et des éléments de données. Comme un bonus supplémentaire, si jamais vous voulez simplement cacher quelque chose, utilisez display : none. Que se passe-t-il ici ? Ça ressemble à un gâchis absolu. Eh bien, c'est un gâchis. Il y a un tas d'éléments en ligne, il y a ces éléments de bloc, et puis il y a cette entrée, qui est un élément de bloc en ligne juste refroidir au milieu de nulle part. Alors, quel est l'intérêt de tout ça ? Je vais juste vous montrer comment remplacer les types d'affichage par défaut. Donc, la première chose que je vais faire est de vous montrer comment changer le type d'affichage div. Alors, allons à l'onglet d. Je vais changer est de bloc inline-. Tout comme ça, il perd sa capacité à étendre toute la largeur. Ça ne commence pas sur une nouvelle ligne. Si nous changeons inline-block en inline, rien ne change beaucoup là. Donc, c'est plutôt cool. Maintenant, que se passe-t-il si on va chercher nos em ? Nous changeons ceci pour afficher : bloc. Juste comme ça, il prend toute la largeur. Ils commencent une nouvelle ligne. Fantastique. C'est vraiment facile. Vérifie ça. Si nous changeons ceci pour afficher : aucun, les ems sont partis. Nous allons juste annuler cela, changer de nouveau en bloc, et puis la dernière chose est cette entrée le type de texte. Changeons ce gars pour afficher : bloc. Vous pouvez voir qu'il commence sur une nouvelle ligne, mais il ne prend pas toute la largeur. Qu' est-ce qui se passe avec ça ? Pas tout à fait sûr. Alors, allons-y avec w et élargissons cela. Réglons à 100 pour cent de largeur. On y va. Mais nous savons que cela peut être un problème lors de la décision d'ajouter du rembourrage. Alors, ajoutons un peu de rembourrage. Rembourrage en haut et en bas, 10 pixels. Rembourrage gauche et droit, allons-y pour 40 pixels. Mais maintenant, il sort en quelque sorte du bord de la page, qui n'est pas ce que nous voulons faire. Alors, comment on change ça ? Nous optons pour le bz, qui est la taille de la boîte, et nous définissons notre taille de boîte à border-box. Juste comme ça, c'est des choses réparées. On peut ajouter une marge. Donc, en haut et en bas, allons-y pour 20 pixels. Gauche et droite, allons-y pour zéro. On y va. Notre entrée, qui avait un type d'affichage de bloc en ligne, a maintenant un affichage de bloc et fonctionne parfaitement. Alors, on y va. C'est ainsi que vous remplacez vos types d'affichage. C'est vraiment facile. 7. Éléments flottants: Le prochain sujet que nous allons aborder est flottant, ce qui est assez génial mais il peut devenir assez difficile si vous commencez à l'utiliser pour les mauvaises choses. Ce qui est vraiment bon d'être utilisé est d'obtenir du texte pour envelopper un élément. Si vous avez un élément div parent, avec un élément p à l'intérieur, ajoutez un autre élément comme un div ou une image à l'élément parent et donnez-lui une largeur et une hauteur. Ensuite, donnez-lui une déclaration de gauche float. Vous pouvez choisir entre une valeur flottante gauche, droite ou aucun. Nous pouvons ajouter un autre élément et le flotter à droite. Vous verrez comment les textures s'écoulent autour d'elle. Nous pouvons alors donner à ces éléments flottants une certaine marge afin que le texte ne soit pas super proche de lui. Ce qui signifie flottante est qu'un élément sort du flux normal et laisse le reste tel quel, ou des éléments en ligne s' enrouleront autour de lui. Je ne suggère pas d'utiliser des mélanges d'éléments en ligne et de blocs quand il s'agit de flotter. Un élément flottant flottera à gauche ou à droite s'il y a de l'espace pour le faire. Sinon, il passera à une nouvelle ligne. Parfois, vous voulez qu'un élément soit un élément flottant, mais vous voulez qu'il commence après un autre élément flottant, ou vous voulez qu'un élément régulier s'affiche après un élément flottant qui le précède. La meilleure façon de le faire est d'utiliser une déclaration claire. Vous pouvez définir de quel côté il doit effacer, gauche, droite, les deux, ou aucun, et il sera affiché après le dernier élément qui avait une déclaration claire à gauche ou à droite, ou il viendra après tous les éléments flottants précédents. Mais attention. Comme un élément flottant sort du flux normal, si un élément parent ne contient que des éléments flottants, il ne peut pas calculer sa hauteur correctement. Ainsi, il apparaîtra souvent comme s'il n'y avait pas d'éléments parents. Il y a des hacks et des correctifs pour cela mais méfiez-vous. C' est l'exemple de l'heure. D' accord. Alors, qu'est-ce qu'on a ici ? Eh bien, nous avons cette balise div et à l'intérieur de cette balise div, nous avons une autre balise div avec la classe de l'image 1, et puis nous avons une balise image avec la classe de l'image 2, et il y a une source, qui pointe vers ce Le petit gars ici. Nous avons ensuite obtenu une balise p avec un tas de texte à l'intérieur. Ce que nous voulons qu'il fasse, c'est qu'il fasse flotter ces deux caractères à l'intérieur du texte. Alors, allons à notre CSS. Nous allons d'abord à l'image un, qui est le div et nous allons fl pour float, appuyez sur Tab pour étendre cela, par défaut à flotter à gauche, ce qui est fantastique. Nous pourrions aussi le flotter droit, ce qui serait génial. Alors, peut-être essayons ça. Ensuite, image deux, nous allons prendre des flotteurs, dont nous pouvons parler si vous voulez, et nous pouvons dire float à gauche, et vous verrez que tous les textes s'enroulent autour d'elle et ont l'air vraiment sympa. Si nous rendons cela un peu plus petit, vous verrez que, parce qu'il n'y a pas assez d'espace, il va juste commencer après quelque chose d'autre qui flottait avant. Donc, c'est vraiment facile, c'est génial. Vous pouvez aussi mettre des marges sur ce type. Donc, nous voulons la marge gauche, la marge inférieure. Donc, zéro, zéro, 20 pixels et 20 pixels. C'est génial. Puis notre image deux, peu près inverse de ça. Rappelez-vous juste de mettre un point-virgule après flotteur à gauche là, et nous allons aller zéro, puis nous voulons 20 pixels à droite, 20 pixels en bas, et zéro à gauche. Donc, ça a l'air génial. Ce qui est vraiment important de réaliser ici, c'est que cela fonctionne parce que ces deux images sont en haut de cette div, elles viennent avant la balise p. Donc, si je dois les couper et les mettre en dessous de la balise p à l'intérieur de cette div, eh bien, cela ne fonctionnerait pas vraiment parce qu'ils ne flottent nulle part pour l'instant. Ils flottent après cette p. Donc, si nous devions copier cette balise p ici, nous y allons. Il va commencer à flotter juste là où se trouve cette balise p. Donc, assez important de savoir si vous voulez que les choses flottent, mettez-les au-dessus des choses que vous voulez qu'elles flottent dans et entre elles. D' accord. Donc, nous savons comment flotter les choses, mais comment aller contre le grain maintenant ? Comment faire pour que les choses ne flottent pas ? Comment faire flotter les choses après d'autres éléments qui flottent ? Eh bien, regarde ça. Copions ces deux-là en haut à nouveau. Donc, maintenant, j'ai quelques images en haut, quelques images en bas. Maintenant, nous allons à notre CSS. Souviens-toi, image 2, c'est celle qui est venue deuxième en fait. Donc, il y a l'image une, il y a l'image deux. Que se passe-t-il si on voulait retourner les deux sur la gauche ? On ne veut pas qu'ils soient l'un à côté de l'autre, ça a l'air bizarre. Donc, ce que nous pouvons faire ici, c'est que nous pouvons dire, flotter à droite, comme nous l'avions fait, ou nous pourrions dire quelque chose comme à gauche. De cette façon, il passe à la ligne suivante. Maintenant, nous sommes comme, que se passe-t-il ici ? On a des choses qui se passent partout dans le spectacle. Eh bien, encore une fois, sur l'image 1, on peut dire , à gauche, et maintenant, ça va aux nouvelles lignes. Donc, vous n'aurez jamais deux images ou deux choses flottantes l'une à côté de l'autre sur le côté gauche. Donc, c'est vraiment utile. Maintenant, nous pouvons avoir un tas de texte et ça va envelopper toutes ces images. Nous pouvons mettre la même marge sur ces deux, et voilà. Ça a l'air vraiment sympa. Il s'enroule autour de ces images vraiment, vraiment bien. L' autre chose que nous pouvons faire, c'est que nous pouvons juste mettre float à zéro. Quelque chose comme ça. Mais si vous voulez que le texte s'enroule, eh bien, laissons ça dehors. Maintenant, encore une fois, si les choses flottent à droite, vous pouvez aussi faire des choses comme claires à la fois, ce qui, dans ce cas, aura le même effet. Mais peut-être, nous avons des droits et de gauche et, maintenant nous voulons juste dire en fait juste clair les deux côtés de ceux-ci. Juste au cas où, nous changeons le flottant sur le côté droit. Donc, si on n'avait pas d'éclaircissements ici, c'est ce qui arriverait. Alors, retirez ça encore ici. Si nous changeons cette image deux pour effacer à droite, ou effacer les deux, elle commencera alors sur une nouvelle ligne, puis, celle-ci flottera à droite. Donc, nous voulons dire clairement droite, ou les deux. D' accord. Il passe à une nouvelle ligne. Donc c'est fantastique. C' est comme ça que nous faisons le nettoyage. Ça aide vraiment parfois. Puis, encore une fois, cette balise p, si nous ne voulons pas qu'il soit impliqué avec ces éléments clairs, nous allons vérifier ceci. On irait juste au clair les deux, et, voilà, ça va au fond. Il ne veut rien avoir à voir avec ces éléments clairs. Assez facile, non ? Donc, nous avons ces trois images, ce gars, et deux de ces gars bleus, et nous voulons les flotter l'un à côté de l'autre. Parfois, c'est très utile, et vous verrez dans l'exemple suivant pourquoi cela peut être particulièrement utile. Alors, que se passe-t-il ici ? Nous allons flotter à gauche, ce qui est génial, puis, nous allons flotter à gauche, ce qui est génial. Mais alors, où va notre histoire ? Où va notre div parent ? Il disparaît juste. Où est-il ? Parce que c'est flottant, le parent s'en va. Eh bien, je ne sais pas vraiment à quel point il devrait être haut. C' est un problème. Donc, j'ai mentionné quelques corrections que vous pouvez faire. Le premier que nous pouvons faire pour aller chez nos parents et nous allons juste déborder et nous allons nous cacher, ce qui est génial. Sauf, si vous changez alors votre image une, si vous commencez à les traduire. Donc, transformez et traduisez Y, disons, et vous allez à quelque chose comme 50 pixels. Il le coupe, et quand on va à quelque chose comme peut-être 100 pixels. Mec, ça ne va pas le couper. Donc, si vous voyez ici, nous allons juste enlever ça à nouveau. Tu peux voir ses jambes, et si on le remet, tu ne peux pas voir ses jambes. Donc, ce que nous faisons ici, c'est que nous allons pointer les parents, nous allons maintenant mettre une pseudo-classe après. Nous mettrons alors son contenu à rien. Nous allons ensuite définir son type d'affichage sur table et nous dirons, effacer les deux. Ça devrait faire l'affaire, et ça s'appelait vraiment le Clearfix. Nous pouvons supprimer notre débordement caché, et juste comme ça, les choses fonctionnent à nouveau. Plutôt doux. Maintenant, si vous voulez faire ce travail dans tous les navigateurs, il y a beaucoup de façons différentes de faire cette chose appelée un Clearfix, mais pour les navigateurs modernes, c'est tout ce que vous allez faire. Juste sur le div parent, ou l'élément parent, vous définissez juste une pseudo-classe d'après, définissez son contenu à rien, affichez la table de type, juste assez bizarre, et puis vous allez effacer les deux. Fantastique. Alors, de quoi s'agit-il de cet exemple ? Eh bien, je vais en fait faire quelques colonnes à l'intérieur d'un div parent ou d'un div de ligne. Donc, la première chose que je vais faire est, je vais mettre ces 1, 2, 3 colonnes à l'intérieur d'une div de ligne. Coupons c'est, nous allons juste indenter notre code. Nous allons créer une classe de ligne comme ça, et puis mon col, je vais flotter à gauche comme ça, et cela ressemble beaucoup à une structure de menu ou à une structure de barre de navigation. Gardez cela à l'esprit. Alors, ce que je veux faire, c'est que je veux mettre un peu de marge entre les deux. Donc, Margin-gauche, je veux dire 20 pixels. Cool. Ça a l'air très bien. Alors, allons à ma rangée. Je veux définir une couleur d'arrière-plan. C' est cool. Je vais juste dire rouge pour l'instant. Qu' est-ce qui se passe ? Parce qu'ils flottent, nous avons besoin d'un Clearfix. Alors, allons pointer la ligne et allons après la pseudo-classe. D' accord. Nous allons alors dire que le contenu n'est rien. Nous allons définir la table de type d'affichage deux, puis nous allons lui dire d'effacer les deux. D' accord. Alors, on y va. Nous avons maintenant un contexte, nous avons maintenant quelques hauteurs, et notre rang. Mais, ce que je veux faire maintenant, c'est que je veux supprimer cette marge à gauche du col 1. Donc, ce que je peux faire, c'est que je peux dire point col premier enfant, c'est une autre pseudo-classe, et je peux dire Margin-gauche, rien. On y va. Donc, j'ai juste une marge à gauche entre le col 2 et col 1 et entre le col 3 et le col 2. Maintenant, ce que je peux faire, c'est que je peux définir la largeur de ces deux-là. Disons 100 pixels. Fantastique. Mais rappelez-vous que nous n'avons pas encore défini notre taille de boîte. Donc, box-taille border-boîte. Nous allons juste les rendre légèrement plus petits, ou nous allons juste les faire 100 pixels de largeur. Donc, nous pouvons maintenant définir notre largeur de ligne. Donc, ce serait 100 pixels,100 pixels,100 pixels, plus 20, plus 20, ce qui nous donnera 340. Donc, largeur de 340 pixels. Parfait. Ensuite, on peut dire marge, on peut dire zéro et auto. Elle l'a bordée au centre pour nous. Fantastique. Maintenant, nous pouvons copier notre ligne. On y va. Peut-être, notre ligne, nous pouvons vouloir juste mettre un peu de marge haut ou de marge bas sur. Alors, allons-y pour 20 pixels. Fantastique. Nous pouvons supprimer notre couleur de fond, et nous y allons. Nous avons cette structure assez semblable à une table sauf que ce n'est pas une table, c'est fait de divs qui flottent. Fantastique. 8. Transformer et traduire: Vous pouvez utiliser la déclaration de transformation pour toutes sortes de choses : rotations, échelle, trucs 3D, et simple déplacement d'éléments. Nous ne allons pas couvrir beaucoup de ce que la déclaration de transformation peut faire à l'exception des valeurs TranslateX et TranslateY. La déclaration de transformation est un peu bizarre car la valeur est la déclaration de partie et la valeur de partie elle-même. Nous ajoutons des crochets à la fin de la valeur TranslateY ou TranslateX et insérons une valeur de mesure. C' est vraiment facile à utiliser, et c'est presque comme un positionnement relatif, que nous allons bientôt couvrir. La chose lors de l'utilisation de translate est que l'élément se déplace soit sur l'axe horizontal ou vertical sans affecter d'autres éléments. C' est presque comme si les autres éléments pensaient toujours que c'est là qu'il est, mais c'est en fait bouger. C' est très sournois. Déjà, faisons cet exemple. Donc, ce que nous allons faire est que nous allons faire du « tf » pour transformer, développer cela et aller à « TranslateX », puis entre parenthèses, nous pouvons mettre quelque chose comme 30 pixels. Il va sur le côté droit si nous allons négatif 30 pixels. On y va. On peut aussi faire quelque chose comme 90 pour cent. Tout le chemin vers la droite, 100 %, encore plus, tout le chemin vers la droite. Donc, c'est plutôt cool. Ce que nous pouvons faire maintenant, c'est que nous pourrions, vous pouvez penser , aller « transformer », « TranslateY », puis le mettre en négatif 40 pixels. Mais, que se passe-t-il ici ? Eh bien, ce qui se passe ici, c'est que cette déclaration de transformation remplace celle-ci. Alors, comment écrire TranslateY et TranslateX ensemble ? Ou on peut juste prendre cette ligne ici. Je vais le copier, le coller ici, et on y va. Donc, nous pouvons revenir à 50 pixels peut-être. Ensuite, vous pouvez avoir TranslateX et TranslateY dans la même ligne. Vous pourriez aussi faire un peu plus de transformation. Alors, allons pour une échelle de 1,5. On y va. Plutôt cool, non ? Si vous vouliez rendre cela beaucoup plus court, nous pourrions simplement aller « translate () » et mettre deux valeurs ici, valeur X, donc 30 pixels. 50 pixels. On y va. Ainsi, traduire avec transform est vraiment facile de traduire la position X et Y et aucun des autres éléments n'est affecté. Fantastique ! 9. Terminologie du positionnement: Jusqu' à présent, nous avons appris quelques façons d'exposer les choses avec HTML et CSS. Eh bien, maintenant, je vais couvrir le positionnement, ce qui, à mon avis, est super important et le cœur de cette classe. Donc, j'aimerais expliquer une terminologie que j'aime utiliser. Je l'ai inclus dans un téléchargement de feuille de triche, vous pouvez vous référer au fur et à mesure que vous allez. Pour un élément qui a une déclaration composée d'une propriété de position et d'une valeur statique, je l'appellerais un élément positionné statiquement ou un élément statique. Pour un élément qui a une valeur de position de relative, je l'appellerais un élément relativement positionné ou un élément relatif. J' appellerais un élément qui a une valeur de position absolue, un élément absolument positionné ou un élément absolu. Pour un élément qui a une valeur de position fixe, je l'appellerais simplement un élément fixe. Enfin, j'appellerais alors un élément avec une valeur de position de sticky, un élément collant. 10. Positionnement statique: Par défaut, la position d'un élément est statique. Donc, il n'est pas nécessaire de le définir vous-même, sauf si vous voulez remplacer une valeur précédemment définie. Les éléments statiques qui apparaissent en premier dans HTML doivent apparaître en premier dans le navigateur. peu comme une pile de boîtes le ferait visuellement. Surtout, si tous les éléments sont également statiques. Le navigateur positionne dynamiquement les éléments statiques après l'élément statique ou relatif précédent. Il calcule également la largeur et la hauteur. La largeur est généralement de 100 pour cent et la hauteur est généralement assez élevée pour que son contenu puisse s'insérer dans. Vous pouvez également définir la largeur et la hauteur manuellement si vous le souhaitez. Les éléments statiques sont super pratiques et suppriment la plupart du travail acharné auquel nous sommes habitués dans la plupart des applications de conception que nous utilisons. Avec les éléments statiques, les déclarations top, bottom, left et right, ainsi que les déclarations z-index ou z-index, ne fonctionnent pas. Vous pouvez toujours décaler cette position à l'aide de marges et d'une déclaration de transformation et de traduction si vous le souhaitez. Si vous utilisez margin-left et margin-right, il calculera la nouvelle largeur pour vous. Alors que l'utilisation de transform et translate ne changera pas la largeur. Les éléments statiques sont parfaits pour les morceaux de texte, les images, les guillemets, les listes et les tableaux. Fondamentalement, tout ce qui peut avoir une longueur variable. 11. Positionnement relatif: Les éléments relatifs sont presque exactement les mêmes que les éléments statiques, à l'exception de certains avantages supplémentaires. Lorsque vous positionnez des éléments relativement, vous dites essentiellement : « Si nous vous positionnons, ce sera par rapport à l'endroit où vous êtes », ce qui n'a absolument aucun sens, mais écoutez-moi. Ainsi, avec un élément relatif, les déclarations de haut, de bas, de gauche et de droite sont maintenant disponibles. Vous voyez également dans Chrome que ces valeurs de position sont visibles dans le diagramme de modèle de boîte. Ce que cela signifie, c'est que nous pouvons nous déplacer dans des éléments autour du haut, du bas, de la gauche et de la droite si nous le voulons. C' est presque comme transformer et traduire. Si vous voulez qu'il soit à 10 pixels du bas, sélectionnez-le. Si vous voulez 10 pixels à partir de la droite, sélectionnez-le. Lorsque vous positionnez un élément relatif avec l'une de ces déclarations, il n'ajuste pas automatiquement la largeur ou la hauteur. Les types de valeurs que vous pouvez utiliser pour les déclarations de haut, de bas, de gauche et de droite sont les valeurs de longueur CSS typiques, les pixels, les pourcentages, EM, REM, etc. D' accord. C'est l'exemple de nouveau. Donc, ce que nous allons faire ici, c'est d'entrer dans un positionnement relatif. Donc, sur la case 3, nous pouvons faire une pause R. Si nous allons juste faire une pause et appuyer sur l'onglet, son relatif à, mais nous pourrions faire une pause R pour la position relative. Fantastique, alors nous pouvons définir une valeur à gauche, peut-être que vous pouvez aller pour 20 pixels et il le déplace vers le haut de 20 pixels. Vous verrez que la largeur ne change pas. Nous pouvons changer cela en une valeur négative deux. Nous pouvons également changer les bonnes valeurs où vous pouvez dire 20 pixels. Mais c'est un peu bizarre parce que c'est une sorte de ce que la gauche fait vraiment. Alors, allons-y pour 50 pixels. Il ne fait toujours rien et c'est parce que vous avez une valeur gauche et une bonne. Alors, sortons ça. On y va, à droite. On va travailler maintenant. Donc, soit aller à gauche ou à droite, vous pouvez également aller négatif 50 pixels à droite, ce qui est un peu la même chose que de faire une gauche de 50 pixels. Nous pouvons alors voir le haut de 30 pixels et vous pouvez voir que cela ressemble beaucoup à transformer et traduire. Nous pouvons également définir un bas de pixels ou négatifs 30 pixels. Assez facile. C'est vraiment très pratique. Vous verrez également qu'il n'affecte aucun des autres éléments également. Fantastique. 12. Positionnement absolu: Les éléments absolus sont là où les choses deviennent super intéressantes. La façon dont il fonctionne est similaire à la plupart des applications de conception et donne aux humains beaucoup de contrôle et de puissance un peu comme Spiderman. Lorsque nous positionnons un élément absolument, nous vous demandons essentiellement de sortir du flux de document normal, tout autre contenu autour de celui-ci sera positionné comme si l'élément absolu n'était pas là du tout. Vous verrez que sa largeur et sa hauteur vont rétrécir de sorte qu'il contient son contenu. Nous avons maintenant le contrôle de sa largeur, hauteur et de l'emplacement de cet élément dans le document. C' est à nous de décider. Si nous devions le faire avec chaque élément, nous serons peut-être ici pendant des jours. C' est pourquoi le positionnement statique et relatif est si incroyable la plupart du temps. Un élément absolu est positionné par rapport à ses premiers éléments non statiques et soeurs. Ce n'est peut-être pas ses parents directs. Il remonte l'arborescence du document jusqu'à ce qu'il trouve un élément qui n'est pas positionné statiquement. Ainsi, le premier élément qui a une valeur de position absolue, relative, fixe ou collante deviendra ses parents de position. S' il n'y a pas d'éléments non statiques dans l'ascendance des éléments, il sélectionnera la fenêtre du navigateur comme parents de position. Cela signifie que l'élément absolu va là où le parent va et peut être affecté par les valeurs de largeur et de hauteur de son parent. Nous pouvons maintenant utiliser les déclarations de haut, de bas, de gauche et de droite pour positionner un élément absolu par rapport à son parent de position. Donc, si nous définissons la valeur supérieure à 20 pixels, il se positionnera à 20 pixels du haut du parent. S' il n'y a pas de réglage de largeur et de hauteur ou s'ils sont définis sur auto, nous pouvons utiliser les déclarations de haut, de bas, de gauche et de droite pour définir dynamiquement la largeur et la hauteur. Comme toujours être 10 pixels du haut et toujours être 10 pixels du bas. Bon, le premier exemple est cet enfant de 12 ans, ce gars absolu qui a un peu de texte blanc. Donc, la première chose que nous faisons est que nous allons pos A, position absolue, appuyez sur l'onglet pour développer et vous verrez automatiquement il sort du flux documenté. C' est presque comme si c'était des frères et sœurs  : « Maintenant, tu ne fais plus partie de la famille. On ne te voit même pas. » Et vous verrez qu'il semble juste planer au-dessus de ses frères et sœurs. Ok, donc maintenant c'est juste froid parce qu'on n'a pas défini de valeur supérieure, une gauche, une droite, une valeur inférieure. Commençons donc par la valeur supérieure. Allons zéro pixels pour l'instant et vous verrez qu'il va en haut de la boîte parent, et la boîte parent a une position relative. Maintenant, il choisit cet élément et nous pouvons voir ici cet enfant 12 choisit maintenant cette boîte parent pour être son parent de position. Ce n'est pas le choix de cet enfant cinq parce que cet enfant cinq a une position statique. Alors. Si nous devons changer la position de cinq de notre enfant en parent, vous verrez que maintenant l'enfant 12 va au sommet ou s'en tenir au sommet de l'enfant cinq. Assez impressionnant. Donc, si nous devons sortir ça à nouveau, vous verrez qu'il apparaît jusqu'à la boîte parente. Et si nous devons prendre la position de la boîte parent, cela va jusqu' au haut du document, ce qui est assez cool. Et maintenant, si on fixe une position à gauche ici, comme ça. Il est littéralement en haut du document et c'est ainsi qu'il choisit son parent de position. Ok, donc ce que je veux faire ici c'est que je veux faire de l'enfant cinq un élément absolu, aussi. Donc pos A, il devient un élément absolu et maintenant il peut ressembler à des choses folles se passent. Jetons rapidement un coup d'oeil au HTML et vous verrez que l'enfant 12, qui est ici, est à l'intérieur de cet élément enfant cinq, qui est ici, et nous venons de définir cet enfant cinq éléments à la position absolue. Donc, si nous changeons la valeur supérieure de cinq enfants à zéro, cela nous montrera en quelque sorte où est le parent de position qui semble être la fenêtre du document. Donc, si on fait défiler ici et qu'on met la boîte parent en position relative, ok, on y va. Ainsi, l'enfant cinq se positionne maintenant en fonction de la boîte parent, puis l'enfant 12 se positionne en fonction de l'enfant cinq. Ça peut devenir un peu compliqué, je sais. Ours avec moi. Donc, sur notre enfant cinq, nous allons maintenant régler la largeur temporairement à 100 pour cent. Ok, ça nous donne un peu plus d'espace pour respirer. Ça n'a pas l'air si compliqué maintenant. D' accord. Donc, ce que je vais faire ici, c'est que je vais mettre le bas à zéro, aussi, et ce que cela fait, c'est que je vais être positionné à zéro pixels du bas. Donc, si nous devions prendre cette position relative sur la boîte des parents, maintenant c'est vraiment cool. Il se positionne maintenant par rapport à la fenêtre de document, et au lieu de 100 % de largeur, nous pouvons changer ceci à droite, zéro, et gauche, zéro. Et sortons juste la largeur et juste comme ça il ne devrait pas y avoir d'espace autour d'elle. Fantastique. Nous pouvons également les définir sur 30 pixels et cela ne semble pas si correct, 30 pixels, et ce genre d'actes comme une marginalisation. En haut, à droite, en bas, à gauche, c'est vraiment cool. Ainsi, nous pouvons définir la largeur et la hauteur sans utiliser réellement les déclarations de largeur et de hauteur. Nous utilisons le haut, le bas, la droite, gauche et je viens de vous montrer comment positionner un élément à l'intérieur d'un élément absolu. Alors maintenant, quand nous allons à notre enfant absolu et dire bas zéro pixels, fantastique. La prochaine chose que je vais faire est de vous montrer comment positionner négativement un élément absolu. Ceci est très utile pour les boutons de fermeture et des choses comme ça. Donc nous avons cet enfant 12, cet enfant glorieux 12, vous avez été un exemple fantastique, merci beaucoup. Donc, allons changer cela de bas en haut à nouveau et nous pouvons régler cela à 30 pixels négatifs, peut-être allons-y négatif 50 pixels et gauche négatif 50 pixels, voilà. Et si nous devions définir cette largeur à quelque chose comme 30 pixels, là nous allons et les hauteurs de 30 pixels, aussi, ce serait grand et débordement de caché. Là, vous obtenez le. « Hey, c'est un exemple de bouton de fermeture. » Alors on y va. C'est vraiment utile. Une chose dont vous devez être conscient, c'est que si vous avez un débordement caché sur la position des parents, il est parti. Tu ne peux plus le voir. Alors soyez conscient de cela. Donc, maintenant nous arrivons à des trucs un peu plus avancés. Nous avons un exemple plus simple cependant, nous avons juste cette boîte, c'est la boîte un avec deux enfants de boîte et maintenant ce que je vais faire est que je vais vous montrer comment utiliser une pseudo classe en conjonction avec positionnement absolu. Donc, vous allez .box-1 et une pseudo classe d'après, et puis à l'intérieur de cela, nous pouvons normalement simplement aller contenu et pour vous montrer ce que cela fait, vous pouvez dire, « Bonjour là ! » Et juste comme ça, il y a du contenu dans le HTML, mais nous ne pouvons pas le sélectionner et c'est ce qui est vraiment cool à propos cette déclaration de contenu dans le after ou à l'intérieur de la pseudo classe avant. C' est vraiment cool. Alors revenons à après et maintenant ce que nous pouvons faire ici c'est que nous pouvons dire pos A pour la position absolue, ok. Et peut-être que nous pouvons lui donner une couleur de fond, donc la couleur de fond, choisissons l'un d'entre eux, allons-y pour cette couleur bleue, et peut-être que nous pouvons dire à gauche, zéro, droite, zéro et ce qui se passe ici, Eh bien, la position des parents n'est pas en fait notre boîte. Donc, disons la position relative et nous y allons. On peut dire que c'est en bas, zéro. Fantastique. Maintenant, où cela est très utile est, vous pouvez commencer à définir des bordures comme ceci. Donc, si nous devions retirer notre contenu, nous avons fondamentalement apporté une frontière ici. Ok, il n'y en a pas pour l'instant, mais allons pour une hauteur de 4 pixels et il y a notre bordure. Et si nous devons régler notre fond à moins quatre pixels et qu'en est-il de notre droite, moins quatre pixels, gauche moins 4 pixels. Nous avons maintenant cette bordure bleue. Nous pouvons également définir son opacité 2.5 et maintenant nous avons ce genre de bordure verdoyante. Vraiment intéressant, il se mélange maintenant avec notre couleur de fond. Vraiment cool. Donc, là, vous pouvez voir que nous utilisons le positionnement absolu avec une pseudo classe après. Vraiment, vraiment cool. 13. Profondeur et z-index: Maintenant, que nous avons couvert les éléments absolus. Nous pouvons commencer à couvrir la profondeur qui peut devenir un peu déroutante. Alors, écoutez ! Tout élément non statique se voit attribuer automatiquement une profondeur par le navigateur. Si vous ne faites rien, plus bas dans l'arborescence et les éléments du document sont bas, plus sa valeur de profondeur sera élevée. Fondamentalement, il aura une altitude plus élevée. Rappelez-vous que le HTML est l'opposé des couches d'application de conception. C' est un monde de boîte à l'envers. Donc, parce que notre élément absolu n'est pas en lévitation, vous pourriez penser qu'il devrait léviter avant tout, mais ce n'est pas nécessairement le cas. S' il y a des éléments non statiques en dessous dans l'arborescence HTML, ces éléments auront une valeur de profondeur plus élevée que les éléments absolus et peuvent apparaître au-dessus de l'élément absolu. Si vous avez deux ou plusieurs éléments absolus lévitant autour de la même position sur une page, vous verrez que celui qui est plus bas dans l'arbre HTML a une altitude plus élevée et semble être au-dessus. Mais nous pouvons modifier manuellement n'importe quelle profondeur d'éléments non statiques. Nous le faisons en donnant à l'élément une valeur d'index zed ou une valeur d'index Z. L' index Z est la valeur de profondeur attribuée par l'homme à un élément. Dès que nous avons donné une valeur d'un ou plus, il sera à une altitude plus élevée que les autres éléments de sa boîte. Si tous les éléments non statiques d'une boîte reçoivent le même index zed ou l'index Z, la profondeur sera de nouveau déterminée par la position dans l'arborescence HTML. L' indexation Z n'est pas seulement pour les éléments absolus cependant. Tous les éléments non statiques peuvent avoir une valeur d'index Z. Définir un index Z est assez magique. Mais, vous devez assumer la responsabilité de la gestion de la profondeur à laquelle le navigateur fait normalement très bien. Lorsque vous utilisez l'indexation Z, vous utilisez des valeurs entières seulement 1, 2, 5, 10 etc. Vous n'utilisez pas de pixels ou d'autres valeurs de mesure. Une chose très importante à retenir est que si vous utilisez l'indice Z, plupart du temps une altitude d'éléments sera plafonnée par l'altitude de son parent. Donc, s'il y a deux éléments absolus et qu'ils se chevauchent et qu'il y avait un élément absolu enfant dans le plus bas de ces deux éléments, l'altitude maximale sera celle de ses parents de position, même si vous avez dit une valeur d'indice Z élevé fou . La valeur de l'index Z détermine sa profondeur dans le domaine de la zone parent de position, non dans le document entier, sauf si son parent est la fenêtre du document. Cela s'applique même pour les éléments fixes que nous aborderons ensuite. 14. Positionnement fixe: Un élément fixe est exactement le même qu'un élément absolu. Sauf que nous le positionnons, il sera toujours relatif à la fenêtre du navigateur. C' est assez puissant, et il est souvent utilisé avec des choses comme des barres de navigation fixes, des menus et des fenêtres contextuelles. D' accord. Donc nous avons encore nos boîtes. Fantastique. Ce que je vais vous montrer maintenant c'est comment travailler avec un positionnement fixe et un positionnement absolu. Il y a des tonnes d'exemples que nous pourrions suivre. Mais je pense que celui qui fonctionne très bien est de vous montrer comment créer une popup. Alors faisons notre html. Allons pour un div pour la classe de popup, et à l'intérieur de la popup, nous allons avoir un div pour la classe de couverture, et notre couverture va être ce rectangle qui couvre toute la largeur et la hauteur de la fenêtre. Il va être noir et semi-transparent. Nous avons ensuite obtenu notre div de contenu, et à l'intérieur de ce div de contenu, peut-être que nous pouvons avoir du contenu et ensuite nous voulons aussi un bouton fermé. Allons donc pour une classe de vêtements à bouton. Je vais mettre un texte fermé là-dedans. Fantastique. Maintenant, faisons notre CSS. La première chose que je veux faire est d'aller chercher mon popup. Je veux changer cela à la position de fixe , puis mettons notre top à zéro et mettons notre bas à zéro. Gauche, salut Elizabeth, à zéro aussi, et notre droit à zéro. Fantastique. C'est tout ce qu'on a vraiment besoin de faire pour la popup. Nous avons ensuite eu notre couverture à l'intérieur de la popup. Tout droit. Cela va être exactement le même que notre popup sauf que ça va être absolu. Allons-y. Je suis en fait épeler tout ça. Absolu. Fantastique. Pour celui-ci, je vais définir une couleur d'arrière-plan et nous allons utiliser RGBA, qui est rouge, vert, bleu, canal alpha et dire 0, 0, 0 et 0.7. C' est donc noir avec une opacité de 0,7, ce qui est fantastique. Nous allons ensuite dire .popup.content. Maintenant, le contenu va avoir une position absolue. Pour qu'on puisse copier ça ou qu'on en écrive nous-mêmes. Puisque nous avons pos absolus, et nous allons définir la couleur de fond sur blanc. C'est génial. Ensuite, définissons une largeur de 400 pixels et une hauteur de 300 pixels. Fantastique. Maintenant, je veux avoir ça au milieu de la fenêtre de mon navigateur. Comment puis-je faire ça ? Eh bien, nous pourrions le faire avec Flex mais cette classe ne concerne pas Flex. Donc, excluons cela comme une possibilité. Vérifie ça. Je vais dire haut, je vais lui donner une valeur de 50%. Maintenant, cela le ferait commencer à mi-chemin. Ce n'est pas vraiment au milieu. Mais si nous définissons la marge supérieure et nous lui avons donné une valeur négative, et parce que nous connaissons la hauteur, nous pouvons dire négatif 150 pixels qui est la moitié de la hauteur. Ça veut dire qu'il est toujours au centre. Nous pouvons maintenant faire la même chose pour notre gauche. Réglons cela à 50%, puis nous disons marge gauche moins 200 pixels parce que nous connaissons la largeur. Ce qui est vraiment cool à ce sujet, c'est que si nous devons changer notre popup qui n'est pas fixe, nous pouvons mettre le dessus, disons 100 pixels. Vous verrez que notre contenu contextuel reste au milieu. Même si on change ça à 200, ça va toujours être au milieu, ce qui est correct et incroyable. Alors on y va. On a du contenu. On a notre couverture. Maintenant, stylisons le bouton fermé. Donc blanket.close. D' accord. La première chose que je veux faire est d'enlever ce style par défaut. Donc je vais dire frontière zéro, et ensuite, je vais dire couleur de fond et on peut voler une couleur d'ici. On y va. Au lieu de dire couverture, je vais dire popup. On y va. Beaucoup mieux. Je vais mettre sa couleur au blanc et lui donner un peu de rembourrage. Disons 10 pixels. Donnez-lui une taille de police de 30 pixels. D' accord. Poids-politiques- Allons-y pour gras. Changons la taille de la police à 20 pixels. Fantastique. Ensuite, nous pouvons dire position absolue, et nous pouvons dire haut. Allons-y pour moins 20 pixels. Donc, il va mettre un peu en dehors du contenu de, et puis nous pouvons dire, à droite. Il est supposé aller moins 30 pixels ou plus, et on y va. On a un bouton de fermeture. Peut-être que nous pouvons dire curseur, pointeur. On y va. Fantastique. Peut-être que nous pouvons aussi simplement changer notre contenu pour une taille de boîte. Mettez une boîte et on peut y mettre un peu de rembourrage. Disons 20 pixels. Voila, on a cette petite popup parfaite. Maintenant, vous n'auriez probablement pas un texte proche dans votre bouton de fermeture. Vous auriez probablement un X ou quelque chose comme ça. Mais par exemple, cela fonctionne parfaitement. 15. La fonction Calc: Après qu'un étudiant ait posé une très bonne question, j'ai pensé que ce serait une bonne idée d'ajouter cette vidéo sur la fonction calc à la classe. Nous pouvons utiliser la fonction CSS calc pour obtenir le navigateur pour calculer des nombres pour nous humains paresseux. Par exemple, nous pouvons calculer les valeurs de mesure vraiment, vraiment facilement. Ce qui est super cool à propos de la fonction calc, c'est que nous pouvons combiner différents types de valeurs comme les pixels et les pourcentages dans la même somme. Nous pouvons utiliser les opérateurs ajouter, soustraire, diviser et multiplier ainsi que d'être en mesure d'utiliser parenthèses pour indiquer au navigateur quelles parties de la somme à calculer en premier. C' est la meilleure pratique d'entourer chaque partie de la somme d'un rythme blanc. Donc, avant et après chaque opérateur, ajoutez un espace. Maintenant, nous avons déjà vu cette photo. Tout est popup. Fantastique. Mais maintenant, je vais vous montrer un peu sur la fonction Calc. Donc, par exemple, nous avons cette largeur, les 400 pixels, utilisons la fonction calc pour faire quelques calculs. Donc, on peut dire 200 pixels plus 200 pixels, ce qui équivaudrait à 400 pixels, non ? Nous pouvons dire quelque chose comme 600 pixels moins 200 pixels nous donnerait 400 pixels à nouveau. Nous pouvons changer cela partout dans le spectacle et le navigateur le calcule juste pour nous. Fantastique. Maintenant, nous pouvons aussi faire des choses comme la base de pourcentage, donc plus disons 20 pour cent, allons-y pour 300. Fantastique. Alors si nous devions faire ça petit ou plus grand, vous pouvez voir que la largeur change réellement, vraiment cool, non ? Nous pourrions aussi en ajouter quelques autres ici, donc peut-être comme moins disons 150 pixels. Ok, ajoutons quelque chose comme 50 pour cent, vraiment cool. Nous pouvons également faire quelque chose comme 100 pixels multipliés par quatre, ce qui serait 400 pixels ou deux, ce qui serait 200 pixels. Vous pouvez voir où je vais ici. Nous pouvons aussi faire des crochets, donc nous pouvons dire entre crochets là, crochets là donc il se multiplie par deux, mais si nous allons à plus cinq, il va à 700 pixels. Si nous n'avions pas ces crochets là-dedans, ça irait 100 pixels multipliés par deux plus cinq, dans cet ordre. Donc, quand nous mettons les crochets, alors il fait les crochets d'abord, donc il fait ceux-ci d'abord, puis il calcule 100 pixels multipliés par cette valeur, qui serait sept. Ok, donc on a joué un peu, ce qui est génial, mais maintenant en quoi est-ce vraiment utile ? Eh bien, donc nous voulons opter pour une largeur d'un pourcentage. Donc, dites quelque chose comme 80 pour cent et ensuite vous voulez opter pour une marge gauche, allons-y pour moins 40 pour cent. a du sens, essayons pour le haut maintenant. Donc, allons-y pour une valeur de 80 pour cent à nouveau et puis margin- top, allons-y pour moins 40 pour cent. Ça ne marche pas, pourquoi ça ne marche pas ? Eh bien, cela ne fonctionne pas parce que la valeur de pourcentage de marge supérieure ne fonctionne pas sur la hauteur de son parent, ça marche sur la largeur de son parent, un peu fou. Alors, comment on répare ça ? Eh bien, je vais juste commenter ça comme ça et ensuite je vais utiliser la fonction calc d'ici. Donc, Calc et moi allons dire 50 pour cent moins 40 pour cent, comme ça et vous voyez que ça ne marche pas tout à fait et c'est parce qu'on n'a pas espace supplémentaire entre le moins et le 40 pour cent. Voilà, cela devrait résoudre tous les problèmes et maintenant nous avons utilisé calc et nous utilisons des valeurs basées sur des pourcentages à l'intérieur de notre popup. Cela signifie que lorsque nous cultivons ceci, notre popup grandit aussi. Fantastique. 16. Positionnement sticky: Ce que le positionnement puant fait, c'est qu'il permet à un élément de coller quelque part quand il atteint une certaine position. Il alterne automatiquement entre le positionnement relatif et le positionnement fixe pour vous et ajoute de l'espace supplémentaire pour compenser l'emplacement où il a été positionné dans les documents. Mais la chose est que le positionnement collant vous fait évoluer et il ne fonctionne pas dans tous les navigateurs, il peut avoir besoin d'un préfixe de navigateur ou d'une aide Javascript. Pour plus d'informations sur le navigateur qui le prend en charge et ceux qui ne le font pas, consultez caniuse.com. Utiliser le positionnement collant est une technique vraiment agréable pour améliorer subtilement et progressivement vos sites Web. qui signifie que s'il n'est pas pris en charge, ce n'est pas si visible mais s'il est pris en charge, cela ajoute à l'expérience. Pour obtenir un positionnement collant au travail, vous devez définir une position à laquelle les bâtons. Essayez une valeur supérieure ou inférieure et rappelez-vous que vous devrez toujours gérer la profondeur. Ok, faisons un positionnement collant. On a encore toutes nos boîtes ici. Il y en a beaucoup. Ce que nous allons faire est de se répliquer comme un champ d'adresse. Au fur et à mesure que vous faites défiler, quelque chose colle au sommet. Je vais travailler avec la case 2, principalement. Donc, ce que nous devons faire, c'est que nous devons lui donner une position de collante. Collant, fantastique et puis nous avons besoin d'une position de mise en place à laquelle il devrait rester. Donc, on va dire, haut. Allons-y pour zéro. Au fur et à mesure que nous faisons défiler, vous verrez que, hé, ça colle quand il arrive à zéro pixels du haut. Que se passe-t-il ici ? Vous verrez que celui-ci a une profondeur plus élevée et donc il croise sur le dessus et ensuite il le couvre. Quand celui-ci passe sur le dessus, il le couvre, assez cool. Alors, ce qui se passe vraiment ici. Réglons cela à 60 pixels sur le dessus. Faites défiler à nouveau vers le haut et faisons défiler. Maintenant, c'est à 60 pixels, super et puis... Voyez ce qui se passe là-bas, c'est comme si c'était le cas. Vraiment cool, non ? Que se passe-t-il si nous devons régler l'opacité à 0,5 et ensuite nous pouvons voir ce qui se passe. Donc, la case 2a, va ici, mais elle reste là, vous voyez qu'elle ne remonte pas parce qu'elle est en haut, elle ne bouge pas. C' est juste que la boîte 2b est maintenant au-dessus de lui. Plutôt cool, non ? Alors, enlevons l'opacité. Ensuite, vous verrez que, hé, ça marche qu'il devrait y avoir ce gros écart sur eux, navigateur est assez intelligence. Avant que ces positions collantes ne sortent, vous devriez le faire avec JavaScripts, c'était un peu délicat. Maintenant, vous devrez peut-être encore le faire si vous voulez cibler les anciens navigateurs. Donc, c'est vraiment facile à faire, non ? Vérifions le fond. 60 pixels inférieurs, que se passe-t-il ici ? Eh bien, la meilleure façon de voir ce qui se passe ici, c'est d' aller jusqu'au bas et de faire défiler vers le haut. Comme il atteint 60 pixels à partir du bas, il colle. Comme 2e obtient 60 pixels du bas, il colle. Mais le fait est que la boîte 2f a une profondeur plus élevée que la case 2e et c'est pourquoi ça ne marche pas vraiment si bien. Donc, nous pourrions faire une gestion manuelle de la profondeur ici. Donc, faisons défiler vers le bas ici, case 2e. Définissons un style ici. On pourrait faire quelque chose comme, z-index ; 2. Que diriez-vous de ça ? Ça n'a pas vraiment aimé ça, n'est-ce pas ? Ok, faites défiler tout le chemin vers le bas. D' accord. Par conséquent, la case 2e est au-dessus de la case 2f. Donc, parfois, il est vraiment bon de faire une gestion manuelle de la profondeur et c'est un positionnement collant. Il y a beaucoup d'autres utilisations pour cela, mais c'est un exemple très pratique. 17. Mettre tout en œuvre: Dans les prochaines vidéos, je vais vous emmener à travers la création d'un site Web en utilisant les différents types de techniques de mise en page que nous avons appris dans les vidéos précédentes. Vous pouvez suivre, puis créer votre propre page Web en utilisant ce que vous avez appris dans la classe. 18. Projet : comment commencer: Pour rassembler tout ce que nous avons appris dans les dernières vidéos, je vais vous emmener à travers la construction d'un exemple de sites. C' est simple, c'est audacieux, c'est grand et c'est coloré. Il a aussi ces petits personnages vraiment cool et ça va être un excellent exemple de la façon d'implémenter quelques de ces techniques de mise en page Web que nous avons appris. Alors, par où commencez-vous ? Eh bien, pour moi, je vais commencer par croquis, parfois vous pouvez commencer à partir de Photoshop ou Illustrator, une autre application de design, parfois tout ce que vous pourriez avoir est un griffonné sur une serviette, parfois vous avez des maquettes, parfois vous avez des Wireframes, parfois vous commencez directement dans le navigateur. C' est vraiment à vous de décider si vous êtes plus un designer, un développeur ou une licorne, comme moi. Donc, je peux passer de la conception au développement très facilement, et je peux souvent finir beaucoup de mes conceptions dans le navigateur et j'utilise le navigateur comme un outil de conception. Alors, qu'est-ce qu'on a ici ? Eh bien, j'ai cette bannière et à l'intérieur de cette bannière j'ai quelques informations, j'ai un bouton d'appel à l'action, j'ai quelques personnages qui peuvent être positionnés absolument. J' ai ensuite obtenu cette barre de navigation qui est un NAV collant et vous voyez en fait à quel point c'est grand si je fais juste un zoom avant à 100%, c'est assez grand. Eh bien, oui. D' accord. Alors j'ai un peu plus d'informations. J' ai un bouton S'inscrire. Ensuite, je vais à une histoire et des choses que le gang trouve vraiment importantes. D' accord. Puis j'ai eu une belle petite photo de gang en bas avec un pied de page vraiment, vraiment simple. C'est génial. Si quelqu'un clique sur m'inscrire ou m'inscrire sur la droite ici, ça ouvrira cette petite fenêtre. Donc c'est vraiment simple. Ce que j'ai fait en attendant, c'est que j'ai exporté tous les éléments dont j'ai besoin dans un dossier d'image. J' ai le personnage 1, le personnage 2, personnage 3 et je cite ce bouton de fermeture. Tout ce plus sur le bouton de fermeture, j'ai aussi la photo du gang, j'ai cette image de main, j'ai ce fichier bizarre, ne sais pas ce que c'est et puis le logo du gang. Ceux-ci pourraient tous être des SPG parce que leur vecteur à l'intérieur de l' esquisse, mais pour le bien de cette classe il y a toutes juste des images, je les ai exportées à un niveau d'affichage de la rétine, donc cela signifie qu'ils sont deux fois la taille qu'ils sont à l'intérieur de sketch. Maintenant, ouvrons notre dossier WWW. On peut l'ouvrir en sublime. Je vais utiliser sublime, vous pouvez utiliser le stylo de code, vous pouvez utiliser n'importe quel éditeur de code ou IDE que vous aimez. Donc la première chose que je vais faire est, je vais créer un nouveau fichier et je vais enregistrer ceci. Donc, la commande S comme index.html, et cela signifie simplement que le navigateur recherche ce fichier index.html, quand il le trouve, il l'ouvre d'abord. Fantastique. Et puis avec Emmetts, j'ai toute une classe à ce sujet. Vous pouvez étendre ce point d'exclamation en appuyant sur la touche Tab ou contrôle E et il met tout ce joli code pour vous. Alors je dirai le gang. La prochaine chose que je vais faire est que je vais mettre CSS et je vais dire style.CSS. Fantastique. Je vais sauver ça. Je vais ensuite créer un nouveau fichier, aller à un enregistrer ceci comme style.CSS. Cool. Ensuite, juste pour vérifier que tout fonctionne, je veux définir une couleur d'arrière-plan sur mon corps afin onglet BGC. C' est encore Emmett. Je vais dire, Yellow. Sauve ça. Revenons à un finder essayer un index au html pour Chrome et il est jaune. D' accord. Donc c'est une bonne nouvelle. Revenons à Sublime Text. Fermons notre fichier style.CSS. La dernière chose que nous devons faire pour que tout soit configuré et prêt pour que nous puissions coder est, nous devons valider notre projet et notre base de code dans un référentiel. J' aime vraiment utiliser git et git hub et j'aime vraiment utiliser le bureau git hub. Cela signifie que je n'ai pas besoin de savoir quoi que ce soit sur git, cela signifie que je peux utiliser une application pour faire des choses plutôt que le terminal et ouvrons cela. C' est cool, github bureau. D' accord. Fantastique. Maintenant, si nous allons à notre détecteur, nous avons comme WWW. Mais nous avons juste glisser dans le bureau Github. Dit, « Ce répertoire ne semble pas être un bon référentiel, voulez-vous créer un référentiel ici à la place ? » « Oui, s'il vous plaît. » Et on peut l'appeler, le gang. Et la description, on peut dire les sites Web du gang et ensuite on peut dire initialiser ce dépôt avec le vrai moi. Et vous pouvez dire créer un référentiel. Maintenant, nous avons ce dépôt sur notre ordinateur local. Ensuite, nous allons publier le dépôt sur GitHub.com. Et c'est vraiment cool parce que cela signifie que si notre ordinateur se bloque, quelque chose de mauvais arrive, nous avons notre code en ligne dans le Cloud, sur Internet, sur GitHub.com. Cela signifie également qu'avec les pages Github, nous pouvons publier gratuitement nos sites Web sous une URL Github. C'est plutôt cool. J' essaie d'utiliser le même nom ici, je ne vais pas garder mon code privé et puis je vais dire, publier le dépôt. Et cela l'envoie littéralement à Internet. Fantastique. Je peux ensuite aller à Google Chrome, je peux aller à Github.com/MRRA, c'est mon nom d'utilisateur. Peut aller dans les dépôts et gang est là. Maintenant index.html est ici et notre style.css est ici. Fantastique. 19. Projet : le HMTL: Ce que nous allons faire dans cette vidéo, c'est que nous allons construire la structure générale de notre site. Je vais faire référence à sketch assez souvent juste pour voir tous les différents éléments que j'ai besoin de mettre dans mon HTML. Et puis je vais le coder à l'intérieur d'un texte sublime. Alors, qu'est-ce qu'on a ? On a ce genre de bannière de héros. On a cette barre de navigation. On a plus d'infos, petite section ici. On a ces petits séparateurs et on a la section histoire. Maintenant le séparateur, une image et un pied de page. Alors commençons à entrer dans HTML. Ok, donc à l'intérieur de notre corps, peut-être que nous pouvons dire .herobanner, quelque chose comme ça. C' est génial. Allons au croquis et on voit qu'on a une barre de navigation. Donc on peut dire nav, ok. Ensuite, nous avons plus de sections d'informations, donc .moreinfo. Ok, c'est quoi la suite ? Nous avons un séparateur, donc peut-être que vous pouvez dire, .sep pour le séparateur. D' accord. Et puis nous avons notre section histoire donc .story. On y va. Et sous notre histoire, nous avons un autre séparateur, donc .sep. Et en dessous, nous avons une image alors allons-y IMG. Et ici, nous pouvons dire image et ensuite nous pouvons dire gang.PNG. Ok, et pour ça, regarde ça. Il est 1426 en 796, mais nous savons que ce n'est pas vraiment le cas. Donc, si on retourne à l'esquisse et juste jeter un oeil à cette image en 735 par 399. Donc je vais copier ça et me rappeler 399. Ok, donc avec le 735 et un Alt on peut dire le gang. Et puis nous avons notre pied de page. Fantastique. Et puis nous avons aussi notre pop up. Alors faisons un .popup et à l'intérieur on peut dire, des couvertures. Et nous l'avons déjà fait dans cette classe donc ça ne devrait pas être quelque chose de trop nouveau. Nous avons ensuite obtenu du contenu, et à l'intérieur de notre contenu, nous vous pouvez avoir un bouton.close. Tout droit. Maintenant, nous pouvons commencer à remplir toutes les parties intermédiaires. Retournons ici. Ok, donc à l'intérieur de notre bannière de héros, nous avons un, deux, trois, quatre sortes d'éléments et nous avons deux de ces personnages. Donc, ce qui se passe ici est que cet élément est d'environ 960 pixels de large, ce qui est une sorte de taille standard. Je veux un peu de marginalisation à gauche et un peu de marginalisation à droite. J' ai toujours voulu être au centre, mais je veux que le texte soit aligné à gauche. Donc 960 largeur est la largeur mais je veux que cela soit tout à l'intérieur d'un conteneur. Et vous verrez plus bas cependant que c'est aussi 960 largeur et c'est ainsi. Donc, nous pouvons réellement faire une classe de cette largeur 960. Donc, à l'intérieur de notre bannière de héros, nous pouvons dire quelque chose comme .wrapper et ensuite nous pouvons faire ce que ce serait. C' est une taille amusante de 20 pixels donc on peut peut-être dire un H3 ou un H4 et il suffit de copier ceci, de le coller. Tap tap kabum est une balise A donc je vais aller à Control W pour l'envelopper avec Emmett, puis tapez mon URL. D' accord. Et après le H4, nous avons le H1 que nous pouvons copier. Alors H1, l'espace que. Et ici, nous pouvons changer cela en un ampli. D' accord. Maintenant, on peut mettre un saut de ligne là-bas. Mettez un saut de ligne ici. Peut effectivement mettre des barres obliques là si vous voulez. Le gang le plus stupide du monde. C'est un H1. Ensuite, nous avons ce qui pourrait être un H2 peut-être ou ça pourrait être juste un P. Qui sait ? Donc peut-être que nous pouvons même en faire un H3. Mettez un saut de ligne et là, convertissez ceci en une esperluette réelle. Donc tu as H1, H3. Ensuite, nous avons besoin de ce CTA alors allons chercher un bouton et appelons-le un CTA. Mais il y a aussi un autre CTA ici, lequel sera l'alternative ? Il y a aussi un autre CTA sur notre pop-up, je veux entrer. Alors peut-être que celui-ci peut être l'alternative. Donc je vais dire, CTA et juste dire, Alt pour alternative. Et nous pouvons dire, lire la suite. D' accord. Donc ça a l'air plutôt bien, je pense. Et puis à l'intérieur de cette bannière de héros, nous pouvons mettre ces personnages. Donc, en bas ici, à l'intérieur de la bannière de héros, nous pouvons dire .character1, développer cela, nous simplement copier et coller ceci deux fois. Caractère 2, caractère 3. Et ce n'est pas forcément des images, elles peuvent être des divs. Nous pouvons définir leur arrière-plan rend les choses un peu plus faciles. J' ai utilisé une méthode différente ici avec cette image juste parce que nous pouvons être différents. Je vais appuyer sur Enregistrer, allons juste au chrome ici et rafraîchir. Okay, commence à prendre forme. Ouais, ça a l'air bien. Donc, si nous revenons au texte sublime à l'intérieur de notre navigation nous avons donc le logo et nous avons quelques liens sur la droite. Alors allons pour un .logo et peut-être que nous pouvons juste mettre un hachage là pour l'instant. Cela pourrait nous ramener au haut de la page. Ici, on peut dire, le gang. Et puis avec CSS, nous pouvons réellement mettre en place une image de fond sur cela. Et puis une fois que nous avons le logo trié, nous devons maintenant créer ces liens que nous pourrions vraiment faire très facilement en utilisant un peu flottant. Donc, nous n'avons pas vraiment besoin d'utiliser une liste, mais j'aime utiliser une liste quand il s'agit d'éléments de navigation. Donc, dans une liste non ordonnée et à l'intérieur, il peut y avoir des éléments de liste, puis à l'intérieur il peut y avoir des liens. On en a trois. Donc avec Emmett, on fait ça. Je vais juste mettre des hachages ici pour l' instant et puis nous avons inscrit l'histoire et plus d'infos. Allons t'inscrire et on va flotter ça peut-être. Inscrivez-vous, l'endroit de l'histoire juste là où nous allons, et plus d'infos, et donc spot droit. Donc c'est la navigation, on a le gang, on a une URL là-dedans. Fantastique. Ensuite, notre plus d'infos, je vais sauver ça, retourner au croquis. Nous avons un titre de taille de 50 pixels qui est à peu près le même que H1. Donc nous tournons vraiment un deux H1 sur la page, je vais en faire un H2 et dire, rejoindre notre fan club. Donc, je vais juste copier et coller ça. D' accord. Et puis je vais copier et coller tout cela et mettre ceci dans une balise P. D' accord. Je vais juste enlever l'espace supplémentaire là-bas et faire une fête. Nous voulons faire quelque chose de différent avec ça. Donc, oui, il inclut l'arrêt complet réel ou la période. Alors nous allons juste envelopper cela avec une classe de surbrillance. C'est comme ça que vous épelez le surlignement ? Je pense que oui. Et ça va être la portée d'une classe de points forts. Ok, donc nous avons notre H2, nous avons un P, et puis en dessous du P, nous allons avoir ce bouton CTA. Donc button.cta et le contenu du bouton va être m'inscrire. Allons élargir ça. Ok, ça a l'air bien. Allons au chrome. Rafraîchissement. Ok, inscrivez l'histoire plus d'infos. Pourquoi tout cela n'est-il pas dans leurs articles séparés ? Retournons et vérifions. D' accord. Donc, nous avons en fait trois comme à l'intérieur d'un élément de liste. Pas bon. Donc ici, nous pouvons juste coller un, coller l'autre. Ok, sauvegardons ça et revenons au chrome, rafraîchir. On y va. Et c'est vraiment important parce que c'est presque comme ça que votre navigateur le voit sans le CSS. Et si vous pouvez vraiment avoir un bon sens de votre page web, s'il n'y a pas de CSS, c'est généralement une bonne page web. Donc, le voilà. Ça a l'air bien, on ne voit pas nos visages amicaux ici. Mais c'est bon. Rejoignez notre club. Inscrivez-moi. Rien ne se passe avec ça. C' est génial. Revenons au croquis pour voir ce que nous pouvons faire ensuite. D' accord. Ensuite, nous avons le séparateur, ce que vous avez déjà fait. Et puis on a cette section. Jetons un coup d'oeil à ça. C'est la taille 40. Alors peut-être que c'est un H2 ou un H3. On a fait de celui-ci un H3 je crois. Donc on en a fait un H4 et c'était la taille 20. C' est la taille 40, ok et c'est la taille 50. Beaucoup de tailles amusantes à retenir. D' accord. Donc, à l'intérieur de l'histoire, disons que nous avons un H3 ici et que nous pouvons simplement copier et coller ceci et mettre un autre saut de ligne ici. D' accord. Après cela, nous pouvons avoir une balise P qui est génial. Copions tout cela et collez-le et je vais juste fermer cette balise P, puis ouvrir une autre ici. D' accord. Ensuite, le dernier, il suffit d'écrire manuellement. Ces formes étaient, nous y allons, très tristes, alors faisons ça et fermons juste ce P. Alors, on y va. Donc, si nous avons retourné à Chrome et rafraîchir, cela semble plutôt bon. Nous avons alors cette liste de choses que nous jugeons importantes. Comment ça va ressembler ? Eh bien, ça peut flotter à gauche. Donc, peut-être que nous pouvons mettre cela ici et dire, div.list of nb ou peut-être que vous pouvez simplement dire nb-list. Fantastique. Peut-être que nous pouvons le changer d'un div à un ul. Oui, faisons-le. Puis à l'intérieur, nous avons quelques éléments de la liste. Donc, on a du Rock and Roll, alors je vais aller au Rock 'n Roll. Il y a peut-être une apostrophe là-bas. Je ne suis pas sûr. On a alors rigolé. On a ensuite obtenu Square Offs. Je ne vais pas être capable d'épeler ça, Routes Circuiteuses, Trigonométrie, Chapeaux Rad, je veux dire, Être stupide. On y va. Ensuite, avec sublime, je viens de sélectionner cela. Je vais à la sélection, puis je vais diviser en lignes ou décalage de commande L, puis j'appuie sur commande et gauche O, tapez Alt LI, puis terminez avec un LI. Appuyez sur l'évasion. On y va. Dans le croquis, nous avons ce Rire, qui est assez spécial. Alors, qu'est-ce qu'on va faire ici ? Eh bien, peut-être que nous pouvons rendre cet élément spécial et cet élément spécial. Donc, ici, nous pouvons aller LI, et il n'y aura rien ici, donc je vais dire, et l' espace non-cassant et non nbsp, l'espace non-cassant. Donc, ce sont essentiellement des termes HTML pour l'espace qui ne devrait pas être réduit. Ensuite, nous avons ce Rire, que nous pouvons peut-être dire, « Classe de spécial pour l'instant » ou peut-être traîner. Que diriez-vous de ça ? Ok, ça a l'air plutôt bien. Comment va-t-on leur dire quelles sont les couleurs ? Donc, allons pour une classe de bleu, et copions et collez ceci. Rock 'n Roll, celui-ci. L' espace ininterrompu sera gris. Rires, je crois que c'était jaune. Square Offs sont rouges. Les routes circulaires sont roses. trigonométrie est, qu'est-ce que c'est ? Du saumon. Puis bleu, puis jaune à nouveau. Fantastique. Alors, sauvegardons ça. Revenons à croquis, puis allons au séparateur, puis à l'intérieur de notre pied de page, nous avons fait par Rich à partir de Tap Tap Kaboom à nouveau. Je vais juste aller en haut et copier cette étiquette A, je suis paresseux. Plutôt bien, plutôt gentil. Je pense que c'est tout ce dont nous avons besoin d'un point de vue HTML. Revenons au crime. Rafraîchissons ici. Ouais, ça a l'air super. C' est quoi cette chose ? Je ne sais pas ce que c'est. Donc, faisons un clic droit, inspectez-le. Il y a un bouton, d'accord. C' est un bouton de fermeture. Cool, c'est génial. Peut-être pourrions-nous nous rapprocher pour que nous sachions ce que c'est. Ensuite, à l'intérieur de notre pop up, nous pouvons mettre du contenu. Donc, c'est 50 pixels. C' est à peu près la même chose que celle-ci. Pour rejoindre notre club était un h2. Alors, mettons notre h2 ici. Remplissez vos coordonnées, et nous avons un formulaire. Alors, allons-y pour la forme, l' action pour l'instant, laissons ça dehors. On peut avoir une étiquette. L' étiquette peut être votre prénom. Ensuite, sous l'étiquette, nous pouvons avoir une entrée, le type de texte, et un espace réservé avec, quel devrait être un nom d'espace réservé ? Peut-être qu'on peut juste dire, visage génial. Oui, c'est bien. On peut lui donner une valeur de Shirley. C' est juste pour que nous puissions le styliser très facilement. Ensuite, ensuite, copiez et collez tous ces éléments. Mais avant cela peut-être que nous pouvons simplement envelopper l'étiquette et l'entrée dans un div comme ça. Donc, c'est en fait un élément de formulaire. Ensuite, nous pouvons les flotter l'un à côté de l'autre. Il suffit de copier ceci et de coller ceci. Donc, votre prénom, votre nom de famille, et c'est le visage du cercle. Nous pouvons simplement supprimer les valeurs de ces entrées. Ta couleur préférée. Vous pouvez coller là. Votre nourriture préférée. Peut coller là. Tarte aux pommes, c'est un de mes plats préférés. Il y a aussi de la tarte aux pommes. Celui-ci est rose au lieu d'un visage génial. Votre couleur préférée, le rose. Votre nourriture préférée, tarte aux pommes. Tout ça a l'air très bien. Ensuite, nous avons un autre bouton. Donc, nous pouvons dire, button.cta et le contenu peut être : Je veux In, et développez cela. Fantastique. Maintenant, je vais aller à Google Chrome et rafraîchir. On y va. C'est ça. Ensuite, nous pouvons simplement supprimer ces fors. Ils ne sont pas vraiment nécessaires dans cet exemple. Ok, économisez. La dernière chose que je veux faire est quand j'appuie sur un certain bouton, comme si je vais lire plus, je veux qu'il saute à différents endroits sur la page. Puis-je le faire avec un bouton ? Pas tout à fait sûr, alors vérifions. Si nous allons à plus d'informations ici et nous donnons à cela un identifiant de plus d'informations, et nous changeons ceci en href. Je ne sais pas si vous pouvez mettre cela sur un bouton. Plus d'infos, rafraîchissement, non. Donc, passons d'un bouton à un rafraîchisseur A. Cliquez sur Lire plus. Whoah ! Où ça nous a emmené ? J' aurais dû mettre un hashtag là. Rafraîchir, en savoir plus. On y va. Donc, il saute à la partie Plus d'infos. C'est fantastique. Donc, je vais juste chercher le bouton. C' est bon, la partie Sign Me Up, c'est génial. L' histoire, on peut dire, histoire, et ensuite on peut dire Id of story. Inscrivez-vous, c'est bon, et montrez-leur la même chose, Plus d'infos. Donc, si nous nous rafraîchissons ici et que c'est notre menu, Inscrivez-vous nous mènera au sommet. Ça va ouvrir le pop-up. L' histoire nous mènera à l'histoire, qui est cette partie par ici. Ensuite, plus d'infos nous emmèneront à rejoindre notre Fan Club. Fantastique. Alors la dernière chose que nous devons faire est que nous devons valider notre code. Alors, allons-y, va au bureau, on n'a pas pu aller chercher, ok. Ensuite, nous avons changé ce fichier index.html. Donc, nous pouvons juste dire, a écrit correctement orthographié, a écrit html pour le site Web. S' engager au maître. Fantastique. Nous allons dire Push to origin, pour l'envoyer sur github.com, ce qui est toujours une excellente idée. On y va. Donc, nous avons mis en place notre html. Maintenant, nous avons juste besoin de styliser notre site, ce qui va être amusant, ce sera quand les choses deviendront un peu difficiles. Donc, fait le html, c'est super cool. 20. Projet : Le CSS de la bannière phare: Maintenant, nous pouvons faire un peu de CSS. Alors, commençons par le haut avec notre bannière de héros. La première chose que je dois faire est d'obtenir cette police. Alors, quelle est cette police ? C' est Open Sans. Donc, dans Google, nous optons pour Open Sans Google polices. Cliquez sur celui-là, puis il se charge pour un peu. Une famille sélectionnée. Personnalisons ça. Il y a un peu ici, certains réguliers que je veux et extra audacieux et audacieux. C' est génial, intégrons ça. Mais je veux l'importer, alors allons-y pour une importation comme ça. Copiez ça. Je vais aller à Sublime Text, puis ouvrir mon style qui est CSS, et je vais juste le coller là. Pour ma couleur de fond de corps de jaune, je peux supprimer cela. Sauvons ça. Revenez à la fonction de rafraîchissement Chrome. Alors qu'est-ce qu'on doit faire ici ? Copiez ça, collez. Fantastique, nous sommes en affaires. Maintenant, quelques choses que je dois faire d'abord. Ce corps et HTML, je vais juste définir un remplissage de marge zéro de zéro. Sauvegarder ça, rafraîchir, cool. Ça marche vraiment bien, et puis revenons au croquis. J' ai même eu ce grand, bleu, fond et ce que je voulais ici est de faire 100% hauteur du navigateur. Donc, ce que j'aime faire est, à l'intérieur de mon HTML, j'aime simplement copier la bannière du héros, puis insérer quelques commentaires, j'aime coller cela au lieu d'avoir à y faire référence tout le temps. Donc, vous pouvez aller .hero-banner, puis obtenir un .wrapper auquel je peux me référer un peu plus tard, alors j'ai un h4 qui est assez par défaut, j'ai ensuite un h1. Alors j'ai un A avec CTA. Donc, je peux y aller, a.cta, et a.cta.alt. Nous pouvons aussi avoir quelques boutons qui sont comme ça. Donc, vous pouvez dire, button.cta, et nous pouvons dire button.cta.alt. Nous avons ensuite obtenu le caractère un, deux et trois, ce qui est génial. Caractère1, caractère2, caractère3, et qui est hors bannière héros à peu près en un mot. Nous devons maintenant le styliser. Alors, bannière héros, allons-y pour la couleur de fond, quelle couleur de fond est-il ? C' est celui-là, alors copions ça. Ensuite, nous allons dire, hauteur de 100vh, qui est la hauteur de la fenêtre et gardons ceci. Allons voir à quoi ça ressemble. Ça a l'air très bien. Alors, qu'est-ce qu'il y a maintenant ? Allons faire notre emballage. Donc, cela avait une largeur de 960 pixels et nous pouvons définir une marge de zéro et auto, puis pour notre bannière de héros, nous pouvons définir un rembourrage pour le moment de zéro en haut et en bas, peut-être comme 20 pixels à gauche et à droite. Fantastique. Ça a l'air bien. Maintenant, allons-y pour notre h4. C' est quoi, ce h4 ? Gras et taille de 20 et il est blanc. Alors, allons faire des poids de police. Il est probablement déjà en gras et la taille de la police est de 20 pixels. Alors parce que c'est dans la bannière du héros, je vais dire, .hero-banner.h4 et je vais le rendre blanc. Vérifions ça. Ce n'est pas un .h4, c'est juste un h4. On y va. Alors disons cette même chose.hero-bannière h4 a, peut également avoir une couleur de blanc. Cela a l'air vraiment sympa et puis laisse aller pour notre h1 maintenant. Les poids des polices peuvent être super gras, alors peut-être allons-y pour 800 et esquissons quelle taille était cette, 50. Donc, taille de police 50 pixels. Sauvons ça. Allons jeter un oeil. Boum. Ça a l'air bien. Alors on peut faire la même chose pour ça, sauf que c'est un h1. Donc, passons juste en h1, couleur blanche, rafraîchir. Ouais, ça a l'air bien. Alors, quelle est la marge entre ce texte et ce texte ? Il dit 14 pixels et il est 20 pixels en dessous. Donc, ce que nous pouvons faire ici, c'est que nous pouvons dire, le héros h4, et h4 a, nous pouvons mettre ça à la marge, zéro. Ensuite, le h1, nous pouvons définir sa marge supérieure deux 14 pixels gauche et droit, zéro, puis 20 pixels en bas. On y va. Ensuite, revenons au croquis. Qu'est-ce que c'est maintenant ? C' est 30 pixels, et c'est le h3. C'est le h3 ? C' est le h3, on n'a pas fait de h3 ici, alors allons-y pour h3. Dites le poids de la police ; gras, taille de la police ; 30 pixels. Alors la même chose ici. On va la colorer en blanc. Maintenant, nous pouvons aussi mettre la marge à zéro. Cool, fantastique. Donc, c'est le h1, pas le h3. Hé, ça a l'air plutôt bien. Maintenant, je vais lire le bouton plus. C' est un CTA. Jetons un coup d'oeil à ce type. Donc, c'est une taille de police de 30 pixels. Il est gras, donc la taille de la police de 30 pixels, le poids de la police est gras. La normale a une couleur de blanc et un fond de ce beau bleu. Alors, mettons-le là-dedans. Je vais dire display et je vais dire, block, ou peut-être que je peux dire inline-block en fait, inline-block. Je vais aussi lui donner une frontière. Celui-ci a une bordure de 10 pixels. Il a une opacité de 15%. Donc, nous allons dire frontière ; 10 pixels rgba solide, 0, 0, 0 et 0,15, ce qui est assez subtil. Jetons juste un coup d'oeil à ce que ça ressemble. Cool, ça a l'air super. Celle-ci, voyons combien d'espace il a. Environ 20 pixels en haut et en bas, et 30 pixels à gauche et à droite. Donc, donnons-lui un peu de rembourrage, donc 20 pixels et 30 pixels. Voyons à quoi ça ressemble. Hey, ça a l'air bien, et on pourra lui donner des coins arrondis. Donc, le rayon de la frontière, qui n'est pas border-droite. Le rayon de la frontière, c'est quoi ce croquis ? Ici, c'est 10 pixels. Voyons à quoi ça ressemble. Oui, c'est plutôt bien. On peut dire texte-décoration ; aucun. Donc, il se débarrasse du soulignement. Ouais, ça a l'air bien. Qu' est-ce qu'il y a d'autre à faire sur ce type ? Nous devons faire l'alternative maintenant. Donc, passons à l'alternative, et maintenant allons juste remplacer certains des styles par défaut que nous avons déjà écrits. Donc, couleur de fond, allons-y pour ce jaune. Copions ça, mettons-le là-dedans. Puis la couleur de la bordure. Quelle est la couleur de la bordure ? Je pense que c'est pareil, en fait celui-ci pourrait être noir, et celui-ci pourrait être bleu. Oui, c'est le cas. Alors, cette frontière, changeons ça en ici. Réglons cette couleur pour être ici. Allons-y si RVB. RVB zéro, 127, 255. Donc, zéro et 255, je me souviendrai. Zéro et 255. D' accord. Donc, il est revenu ici. Rafraîchir. Intéressant. Maintenant, la bordure à l'extérieur et l'esquisse ne fonctionne pas vraiment avec la bordure à l'intérieur dans le navigateur. Comment on va arranger ça ? Alors, peut-être que vous vous trompez. Peut-être que ce n'est pas une frontière, peut-être que c'est un contour. Donc, je vais faire une recherche CSS de contour rapide, puisque je n'utilise pas autant le contour. Allons pour le contour de l'Indien et c'est ce que je fais quand je suis coincé. J' ai juste des trucs sur Google. Contour solide, contour pointillé. Il semble assez similaire à la frontière. Cool, utilisons-le. Donc, au lieu de la bordure, optez pour la couleur du contour et du contour. Ok, laisse sauver ça. Revenons à Chrome. Oui. Ça a l'air plutôt bien. Il n'a pas de beaux coins arrondis. Pour le rayon, maintenant je veux aller contour, rayon, comment puis-je faire ça ? D' accord. Y a-t-il un moyen d'obtenir des coins arrondis ? Et box-shadow ? On y va. Essayons ça. Ombre de boîte. Donc, box-shadow x y et bleu allons-y pour deux pixels, allons pour rgba, Copions ce coller ici, il suffit de remplacer cela pour notre bouton alternatif, rafraîchir. Ça a l'air plutôt bon et vérifiez ce bouton, plutôt bon aussi. Alors, on y va. C'est comme ça que vous faites un peu de googling, un peu de tige débordant. Tu n'as pas besoin de tout savoir. Non sans bouton alternatif, nous avons également besoin de simplement changer la couleur. C' est plutôt sûr que c'est noir. Mais, assurons-en, Ok, un, un, un, cool. On peut juste laisser ça, mais mettons-nous tous là, pour être doublement en sécurité. Ouais, ça commence à avoir l'air très bien ici. J' ai besoin d'un peu de marginalisation entre le bouton Lire la suite, juste pas noir et juste rafraîchir et ce titre. Alors, dans le croquis qu'est-ce que c'est ? 47, il est probablement d'environ 37 donc, on peut le faire comme 35 ou quelque chose comme ça. Alors, allons-y pour notre bannière H3, c'était ça ? Nous pouvons définir la marge inférieure à 35 pixels. Rafraîchissons ici. D'accord. Ça a l'air vraiment sympa. Fantastique. Maintenant, à l'intérieur de mon héros, je vais mettre un peu de rembourrage haut. Alors, allons à la bannière hero-bannière. Je vais aller pour, disons 50 pixels haut et bas. Je vais aussi changer cela en box- dimensionnement, border-box. Merci beaucoup, sublime ou que, je veux juste un pour l'instant, box- taille, border-box, rafraîchir. Oui. Ça a l'air plutôt bien. Oui, ça marche. Fantastique, revenons. En savoir plus. On y va. Ok, donc, ça arrive bien. Maintenant, nous devons ajouter quelques caractères. Faisons ça. Donc, dans le caractère de croquis ce gars. Eh bien, qui était-il ? Allons voir les images et son personnage. Donc, le personnage un est le gars rose et il a une largeur de 363 et 344 est sa taille. Donc, le caractère un, la largeur et sa hauteur, je l'ai oublié, 344, 344 pixels. personnage 2 est le type du chapeau. Alors, allons au gars du chapeau et 309 par 371. C' était 371 pixels, non ? Je pense que oui. Alors le personnage 3 est 297 sur 286, que diriez-vous de ça ? Fantastique. Ensuite, nous pouvons simplement dire « position absolue », et nous pouvons dire, quelque chose comme top et nous lui donnons une valeur 10 pixels et droit, une valeur de 10 pixels et peut simplement copier et coller cela pour l'instant. Puis du côté droit, celui-ci a une rotation. Donc, nous allons juste enlever la rotation pour instant et vous verrez que c'est 89 pixels du côté droit. Alors, allons-y pour 89 personnage 309 et ce type est 277. Nous pouvons probablement changer ces valeurs. Puis du haut, ce gars a 117 ans, ce gars a 213 et ensuite le personnage 3, ce gars du bas a 74 ans. Voyons voir à quoi cela ressemble, alors rafraîchissez. Il n'y a rien ici. Que se passe-t-il ? Donc, je ne sais pas ce qui se passe alors, je vais inspecter. Voyons s'il y a des personnages ici. Ils sont là, mais ils n'ont pas d'images de fond. Jolie erreur débutante. Donc, bg laisse aller pour url et ici, nous pouvons aller à l'image et le personnage un. Nous pouvons définir la répétition à, non-répétition et dire qu'il va commencer à zéro pixels x et zéro pixel y. Nous pouvons dire taille d'arrière-plan, nous le faisons encore, je veux juste la taille d'arrière-plan, parce qu'ils sont à 100 pour cent ou nous pourrait dire quelque chose comme couverture ou contenir. Mais, je vais juste y aller pour 100 pour cent. On peut copier ça, aller au caractère deux, le changer en caractère deux, puis le changer en caractère trois. Sauvegardez cela, revenez à chrome et actualisez, et il y a nos personnages. Vous verrez ça quand j'inspecterai et que je déplacerai mon navigateur. Parce que ce gars est du bas, il va changer un peu, ce qui est parfaitement cool. Ce que je ne veux pas, c'est que je ne veux pas que ce type se balade sur le bord de la page. Donc, pour revenir au texte sublime et allons à notre bannière héroïque et nous pouvons dire position relative, que tous ces éléments absolus choisissent une bannière hero-bannière comme leurs parents de position. Ensuite, nous pouvons dire « débordement : caché ». Rafraîchissez ici. Ça a l'air plutôt bien. Ou on peut le faire ici, juste pour s'assurer que le bouton Lire la suite ne soit pas coupé, c'est qu'on peut mettre une hauteur minimale. Mon héro- bannière. Alors, rafraîchissons ici. On y va. Ça a l'air plutôt cool. Si on doit redimensionner ça, tu verras que tous ces types se déplacent avec nous. Nous pouvons utiliser des pourcentages donc, peut-être que nous pouvons utiliser une valeur de pourcentage pour ce caractère un. Donc, du côté droit, on va peut-être 10 pour cent. Sauvegardons et actualisons. Maintenant, vous voyez qu'il se déplace à une vitesse légèrement différente si nous commençons redimensionner notre navigateur. C'est totalement cool. Donc, ce sont nos personnages, et maintenant nous devons juste faire tourner ce gars. Alors, allons le regarder. Il avait une rotation de 15 degrés, je crois. Alors, allons-y et mettons-le. Donc, c'est de la transformation et il tourne. Donc, on va faire une rotation de 15 degrés. Rafraîchir. On y va. Je veux changer un peu cette valeur supérieure, peut-être changeons cette valeur supérieure à 10 pour cent aussi. Rafraîchir. On y va. Pas tout à fait comme le design, mais bon, ça a l'air vraiment bien. Donc, c'est notre bannière hero-bannière qui est à propos de cette vidéo. La prochaine vidéo, nous allons passer à faire la section plus d'informations, pour rejoindre notre section fan club, C'est vraiment bon. Nous avons vu à quel point cela a fonctionné. Dans la vidéo suivante sera d'entrer sur la barre de navigation et la section lire la suite. Ça a l'air très bien jusqu'à présent. Ensuite, la dernière chose que nous devons faire est, nous devons nous y engager. Donc, allons pour obtenir un bureau, style le CSS a changé et nous allons style de bannière héros et nous nous engageons à maître, puis poussons à l'origine. Attendez, et on y va. Il est en ligne. Nous pouvons heureusement laisser notre ordinateur s'écraser. Donc, sur maintenant le style et lire plus de style dans la vidéo suivante. 21. Projet : Navigation sticky et section Lire la suite: Donc, le prochain est la barre de navigation et la section rejoindre notre fan club ou plus d'informations ici. Alors, faisons la barre de navigation d'abord. La première chose que je veux faire, c'est que je veux vérifier mon logo. Je sais que c'est 600 par 80, oui. Ça veut probablement dire que c'est 300 par 40. C' est environ 300 par 40. D' accord. Allons à Sublime Text et myindex.html. J' ai ma barre de navigation ici, on peut copier ça et le mettre dans quelques commentaires ici. Nous pouvons sortir ce Héro-bannière HTML, et mettons nav et quelle est la taille de notre nav ? Revenons au croquis. Il fait 100 de haut. Donc, hauteur de 100 pixels, fantastique, et son a obtenu une couleur de fond de blanc, et il a également obtenu une ombre portée ou une ombre de boîte et rappelez-vous son x, donc rien et y. qu'est-ce que c'est ? Donc, 5 ans. Donc, cinq pixels, puis huit pixels flou, et puis quelle est la couleur ? C' est noir et il a une opacité de 20 %. Donc, nous pouvons aller à notre RGBA, zéro , zéro, zéro et une opacité 0.2. Fantastique. Voyons à quoi ça ressemble. Il suffit d'aller sur Google Chrome. Rafraîchir. Oui, ça avait l'air bien. On dirait qu'il y a une légère ombre au-dessus. C' est bon pour l'instant, et on va faire un logo. Donc, nous avons nav.logo, vous pouvez mettre un là mais si jamais nous l'avons changé d'un, juste une classe de logo serait génial, et nous pouvons dire, afficher et je vais dire bloc d'affichage, et je vais définir la largeur à, je je ne me souviens plus maintenant. Aucun. D'accord. C'était 300. Ainsi, 300 et une hauteur de 40 pixels. Fantastique. Disons la position absolue. Nous y allons, et puis il a obtenu une valeur maximale de, et ce que nous pourrions faire, c'est que nous pourrions juste fixer la valeur supérieure à 30, ou nous pourrions juste le faire au milieu d'un temps entier. Donc, parce que nous savons que les hauteurs sont 40, on peut dire 50%, et ensuite on dit marge supérieure. Nous pouvons donner à cela une valeur négative de 20 pixels. Ok, c'est parfait. Ensuite, nous pouvons définir une gauche de dire 30 pixels aussi. Nous pourrions également définir cela comme zéro pixels, puis définir la marge à gauche de 30 pixels. Tout ce que vous voulez faire vraiment, alors pour sauvegarder cela et puis ajoutons notre image. Donc, bg est à l'URL, c'est à l'intérieur de l'image, et c'est un logo. Poom, on va faire la même chose ici. Donc, pas de répétition zéro, zéro. Ensuite, nous disons que la taille de l'arrière-plan est de 100%. Il est vraiment bon de mettre vos préfixes de navigateur comme Webkit ou Mozilla, peu importe si vous allez cibler les anciens navigateurs. Mais pour cela, plus vraiment nécessaire. Donc, nous avons une taille d'arrière-plan qui semble fantastique. Voyons à quoi ça ressemble. Il n'y a rien. Il est parti. Pourquoi c'est ça ? C'est parce que notre nav, vérifie où il est. C' est parce que notre navigation n'a pas de position, ni de parent ou d'absolu. Donc, on va vraiment le rendre collant. Alors, rendons ça collant, et puis voyons ce qui se passe ici. Le gang. Ouais, ça a l'air plutôt bien. Inspectons ça. Ça n'a pas l'air au milieu, n'est-ce pas ? On dirait que c'est un peu de rembourrage ou quelque chose qui se passe ici, mais ça semble juste pour le moment. D' accord. La prochaine chose que je veux faire, est que je veux aller à ma liste navs non ordonnée, et ici, nous pouvons juste définir le remplissage à 0, la marge à zéro. Nous pouvons également aller au nav uli, et nous pouvons définir ici la marge à zéro, le rembourrage à zéro. Voyons ce que ça fait. D' accord. Beaucoup mieux, et puis nous pouvons dire, ok, le li dans cet affichage u comme un bloc, et laisse flotter u à droite. Oui. C'est génial. Fantastique. Donc, nous avons le gang sur le dessus du gang. Qu' est-ce qu'on fait à ce sujet ? Eh bien, nous pouvons juste définir un débordement de caché, et ils peuvent faire un retrait de texte de moins 999 pixels, ou quelque chose comme ça, et il est parti. Ensuite, nous devons trier ces gars, quelle taille de police est-ce ? Trente pixels, et c'est en majuscules. D' accord. Allons pour le nav ul. J' ai un, donc l'intérieur de l'élément de liste, à l'intérieur de la liste non ordonnée, à l'intérieur des éléments nav, et nous pouvons dire, bloc d'affichage. Ouais, ça devrait être bon. Donc, nous pouvons dire que la hauteur va pour 100 pour cent, et nous disons que la taille de la boîte est la zone de bordure, alors nous pouvons dire taille de police, 30 pixels, et texte- transformer en majuscules, poids de la police gras, fantastique. Rafraîchissons. D'accord. Ensuite, nous pouvons aussi dire, couleur #111111. Ok, et la décoration de texte et sauver. Rafraîchir. Nous avons ces gars au milieu, ils ont une taille de police de 30 pixels, le NAV est de 100 pixels de hauteur. Cela signifie que 70 divisé par deux, 35 pixels haut et bas rembourrage ou marginalisation, je suis ici pour le rembourrage. Donc, allons pour le rembourrage, et 35 pixels. Cool, puis peut-être juste 10 pixels sur la gauche et la droite. Enregistrer. Donc, nous rafraîchissons ici. Ça n'a pas l'air tout à fait correct. Quelqu' un inspecte ce gars, pas la parole, inspecte. Il ne va pas si bien là-bas. Donc, je dis que la hauteur est à 100 pour cent avec un rembourrage de 35 et 10. Alors, que se passe-t-il si nous commençons à diminuer cela. Encore une fois. Donc, 30 plus 30 plus 30. Ne vous inquiétez pas ce que c'est. Mais, hé, vous avez ces 30 pixels regarde en ce moment. Fantastique, rafraîchir. Peut-être que c'est à cause de la petite hauteur de ligne. Donc, pour changer cela en hauteur de ligne, hauteur de ligne à 30 pixels, puis nous changeons cela. Ensuite, nous pouvons probablement changer cela à 35 pixels. Oui. Alors, faisons ça. J' ai juste une hauteur de ligne. Trente pixels et changez cela à 35 pixels. Rafraîchir, terminé. Cela a l'air vraiment bon et puis, sur ul, nous pouvons mettre une marge sur le côté droit peut-être. Donc, allons zéro, allons 20 pixels, zéro zéro, rafraîchir. Plus d'infos. L'histoire. Inscrivez-vous. Mec, ce n'est pas bon. Maintenant, faisons en sorte que ma barre de navigation fasse un peu de colle, donc, nav, nav, on y va. Réglons le haut à zéro. Sauve ça. Rafraîchissons et ça colle. Ouais, regarde ça. Le gang a une barre de navigation qui est collante. C' est vraiment cool. J'aime ça. Donc, la prochaine étape est notre section plus d'informations. C' est un peu un problème, il va juste le cacher. Alors, qu'est-ce qu'on fait ici ? Eh bien, allons et copions notre section plus d'infos. Allons à notre style ici. Nous pouvons juste remplacer ceci et allons pour.moreinfo. Je ne crois pas avoir mis un emballage ici en fait. Je vais te montrer pourquoi l'emballage est si cool. Donc, on a plus d'infos, on a un h2. Je ne sais pas si on doit faire quelque chose pour le h2. On a une étiquette P. Je peux en fait simplement styler la balise P. Ensuite, on a un bouton. Ce qui est un CTA, donc il ne semble pas que nous devions faire autant. Ok, essayons ça. Donc, quand vous coiffez nos Ps et nos Ps sont 30. Ils sont 30 ? Oui. Donc P, passons pour un poids de police de gras, allons-y pour une taille amusante de 30 pixels et puis passons ici et voyons quelle est la hauteur de la ligne, 41 ? Je veux voir, j'imagine entre chaque balise P est, donc pour l'instant je vais juste définir cela comme 30 pixels zéro. On pourra le changer un peu plus tard si on en a besoin. Ensuite, je vais le déplacer un peu plus haut à l'endroit où se trouve toute la typographie par défaut. Ok, pour qu'on puisse sauver ça. Vérifions ça. Voyons à quoi ça ressemble. Ouais, ça a l'air plutôt bien. Rejoignez notre fan club. Ça a l'air très petit. Ça a l'air très grand, je ne suis pas sûr que ce soit si grand. Donc, notre P est amusant taille 30 pixels et ensuite nous définissons ceci comme un h2. Nous n'avons pas encore de style h2 alors, faisons un peu de style h2 et le style h2 est extra gras 50 donc, c'est à peu près la même chose que notre h1. C' est juste pas un h1. Ok, revenons à Chrome, rafraîchir. Ouais, ça a l'air plutôt bien. Ensuite, nous pouvons écrire quelques écritures maintenant. Alors, allons au fond à nouveau. Plus info.more-info h2. Ou peut-être que nous pouvons même aller et dire, plus d'info text-align : centre. Sauvegardons ça, rafraîchissez. Presque fait l'affaire, c'est juste tout le chemin vers le bord de l'écran, presque. Donc, je veux l'envelopper avec un emballage que nous avons déjà ici. Donc, vous avez cette classe d'emballage qui enveloppe le contenu et la bannière du héros. Donc, je vais faire la même chose à l'intérieur de notre plus d'info div.wrapper, cool, cool. Ensuite, il suffit de retirer notre code. Sauvons ça. Juste comme ça, tout est bien rangé, vraiment sympa. Donc, je peux voir, plus d'infos, wow, ça cache plus d'infos. Comment on contourne ça ? C' est une très bonne question, en fait. Je vais te montrer comment dans une seconde. Mais pour l'instant, ça a l'air, oui, ça a l'air vraiment, vraiment bon. Juste pour expliquer ce wrapper un peu plus, je vais chercher wrapper. Si nous devons mettre une couleur de fond jaune sur ce que vous pouvez voir, c'est au milieu. Comme celui-là. C' est aussi au milieu. Cool. Donc, on enlève ça. Maintenant, le problème de cliquer plus d'informations et de sauter jusqu'ici est problématique. Comment on va arranger ça ? Eh bien, une chose que nous pourrions essayer est en fait de changer l'ID d'info de rejoindre notre fan club à autre chose. Alors, donnons ça un coup de pouce. Donc, nous avons cette idée de plus d'infos, peut-être que ce que nous pouvons faire, c'est que nous pourrions le mettre sur le NAV. Essayons ça. Alors, rafraîchissons ici, plus d'infos. On y va. C' était plutôt bien. Maintenant, si je vais à l'histoire, ou si je vais à plus d'infos ça ne marche pas tout à fait. Donc, au lieu de le changer, peut-être que nous pouvons juste mettre un petit quelque chose sournois ici. Peut-être comme un br avec un identifiant de plus d'informations, voyons si cela fonctionne. D' accord. Que se passe-t-il si c'est juste un div, comme ça. Rafraîchissons, plus d'infos. On y va, ça marche. L' histoire, plus d'infos inscrivez-vous. Cool, va lire plus. On y va, triés. Donc, nous avons fait notre barre de navigation, nous avons fait notre section de lecture plus et nous avons fait notre bit de héros. Ce qu'il reste à faire pour cette vidéo, c'est juste de s'engager. Donc, allons pour obtenir le bureau GitHub et nous avons changé index.html et style.css. Donc, nous pouvons dire que nous avons fait « Nav style et lire plus. » Ensuite, dans la description, nous pouvons également dire, « a également fait quelques changements HTML. Boum. Engagez à maîtriser, Poussez à l'origine, l'envoie à Internet, fantastique. Mais on n'a rien fait. Ce que nous avons oublié, c'est que quand vous allez esquisser ça, une fête a cette belle bordure rose autour d'elle. Comment on fait ça ? Ok, donc juste aller au texte sublime, rappelez-vous dans le style que nous avons ce petit peu de HTML ici, j'ai le surlignement de la classe de span, ce qui est génial. Donc, passons pour mettre en surbrillance, nous allons dire, couleur de fond, nous allons aller esquisser pour voir quelle couleur c'est. Ok, c'est celle-là. Mettons-le là-dedans, et on dira, la couleur et c'est une sorte de couleur rouge. D' accord. Fantastique. Ensuite, nous pouvons dire un rembourrage de, peut-être que c'est comme 10 pixels. Voyons comment ça se passe. Puis un affichage de bloc inline-. Rafraîchissons ici. Ça a l'air plutôt bien. Plutôt proche, en fait. Allons annuler, peut-être pas si haut, donc nous pouvons aller quelque chose comme cinq pixels, 10 pixels. D' accord. Ouais, ça a l'air plutôt bien. Alors on ne peut même pas faire une hauteur de ligne de, quelle était la hauteur de ligne ici ? 50. Donc, je vais faire 50 pixels. Ouais, ça a l'air plutôt bien. Je pense. Il y a encore un peu bizarre espacement ici. Donc, peut-être qu'on change ça en ligne. Voyons ce qui se passe. Oui, en ligne fonctionne beaucoup mieux que le bloc en ligne. Fantastique. Alors vérifions simplement nos marges 18 et 40. Ça n'a pas l'air juste. Donc, faisons plus d'informations h2 marge bas, allons-y pour 18 pixels. Ensuite, nous pouvons aussi faire, non, peut-être que nous faisons juste le P, et dire, marge supérieure, puis marge inférieure peut être 40 pixels ou 35 pixels. Vérifions ça. Rafraîchir. Cool, ça a l'air très bien. Alors rejoignez notre fan club en haut, 50 pixels ? Je ne sais pas si c'est le cas, alors vérifions simplement ça. D' accord. Plus d'infos, pas tant que je ne pense pas. Nav est là, et puis c'est à plus d'infos. Donc, ce qu'on peut faire ici, c'est que ce gars, on peut probablement dire, marge et on peut dire, 50 pixels, zéro. Ok, ça a l'air bien. Donc, allons-y pour plus d'informations p, changez cela en plus d'info h2 marge haut 50 pixels et le reste peut être nul. D' accord. Jetons un coup d'oeil. D' accord. Donc, le point culminant doit juste être assez audacieux et nous pouvons le faire ici et nous pouvons dire, la police poids 800. Rafraîchir, terminé. Ok, maintenant on peut s'engager à nouveau. Alors, allons juste dire, « resserré la section Lire la suite ». Commit, puis poussez-le à nouveau à l'origine. Fait. Pour de vrai, cette fois. 22. Projet : la section Histoire: Ensuite, sur notre liste de choses à faire, est la section de l'histoire. Alors allons y entrer. Ce que je vais faire en premier, c'est cette section de liste. Il fait 470 pixels de large, ce qui est génial, et chacun d'entre eux mesure 70 pixels de haut et ils ont 20 pixels entre chacun. La police, en gras et 40 pixels, 20 pixels à gauche et à droite, j'imagine. Ok, donc il suffit de vérifier que 70 pixels de haut et puis j'ai copié les 470 pixels de large. D' accord. Donc, je vais juste coller ça là et je vais aller chercher le séparateur dans toutes ces choses, je vais le coller ici. Fantastique. On peut faire le séparateur d'abord, je suppose. Nous allons le laisser là pour l'instant. Ensuite, nous dirons notre liste nb-, d'accord, qui a une largeur de 470 pixels. Ok, alors la liste nb-List Li. Qu'est-ce que c'est ? Donc, il a une hauteur de 70 pixels. Cool. Je pense qu'il a un rayon de frontière de 10 ou 4. Rayon de bordure de 10 pixels. Voyons voir. Ouais, 10 pixels et rappelez-vous, il a une taille de police de 40. Donc, taille de police de 40 pixels. La plupart du temps, c'est de couleur blanche. Donc, la couleur blanche. Et alors ce que nous pouvons faire ici, c'est définir nos poids de police en gras. D' accord. Nous pouvons également définir son type d'affichage, donc bloc d'affichage. Fantastique. Et puis pour chaque couleur, il y aura différentes couleurs de fond. Donc je pense qu'il y a du rouge donc, BGC. Je cherche ma couleur rouge et puis il y a le bleu, le gris, le jaune, le rose et le saumon. Ok, alors allons pour le bleu, allons pour le gris, allons pour le jaune et le rose et le saumon. Ok, donc rouge, prenons celui-là, copiez la couleur. Fantastique, allons bleu, copiez la couleur. Ok, le gris, c'est un peu bizarre. Donc, il a une opacité de 10%. Donc, ce que nous pouvons faire ici, c'est aller rgba. J' essaie d'utiliser 0,0,0 et de le mettre à 0,1. Ça devrait être OK. Alors le jaune, de quelle couleur est-ce ? Il suffit de coller ça, rose. Tout droit. Et puis j'utilise du saumon. D' accord. Maintenant, n'importe lequel d'entre eux est noir, juste jaune. D' accord. Donc, il a une couleur de fond de jaune, alors il a aussi une couleur de texte de ceux. D' accord. Fantastique. Jetons un coup d'oeil à ce que cela ressemble, rafraîchir. Hey, ça a l'air bien, je dois dire. Nous avons également un rembourrage de 20 pixels. Donc, mettons un rembourrage ici de 20 pixels et définissons la taille de la boîte à la zone de bordure. Merci beaucoup. D' accord. Et rafraîchir, rien n'a beaucoup changé parce que nous n'avons pas de couleur de fond là-dessus. Copions cette couleur d'arrière-plan, bgc. Fantastique. Rafraîchissez, ça a l'air bien. Et puis ce que nous pouvons faire, c'est que nous pouvons définir notre marge inférieure ici, marge inférieure à 20 pixels. Fantastique et peut-être sur la liste, le rembourrage peut être de 20 pixels tout autour, sauf pour le bas et nous compterons sur la dernière tuile pour donner cette illusion du rembourrage ajouté en bas. Oui, ça a l'air bien. Et puis ce que nous pouvons faire ici, c'est que nous pouvons juste mettre un peu de rembourrage, donc un rembourrage de 20 pixels sur la gauche. Peut-être que nous pouvons faire comme cinq pixels sur le haut et le bas. Voyons à quoi ça ressemble. Il a changé en taille de boîte, taille de boîte, border-box. D' accord. Inspectons ça et voyons ce qui se passe. D' accord. Donc, on va changer ça. Donc, cela était en fait censé être cinq pixels et peut-être que c'est 20 pixels. Ouais, ça a l'air bien. Six pixels et 20 pixels. Fantastique, oui. À l'intérieur du html maintenant, nous pouvons également faire un peu plus d'emballage. Donc, mettons ceci dans un wrapper de points et cela va centrer tout. D' accord. Boum ! Et alors ce que nous voulons faire avec notre nb-liste, c'est que nous voulons la flotter. Donc, flottez à gauche, enregistrez ça, actualisez. Ça a l'air plutôt bien, non ? Et puis nous voulons lui donner une marge, disons, zéro sur le dessus, 20 pixels dans les droits et 20 pixels ci-dessous, rien sur la gauche, rafraîchir. Ça a l'air génial. Maintenant, qu'en est-il de ce qui reste et en dessous ? Qu' est-ce qui reste et en dessous ? C' est un h3. Quel est notre style par défaut pour un h3 ? En haut, 30 pixels. C' est 30 pixels ? , 40 pixels. Et l'autre h3 ? Je pense que celui-là n'était pas h3, n'est-ce pas ? , Ok. Donc, ce que nous pouvons faire ici, c'est que nous pouvons juste écraser certains styles, nous allons définir la taille de la police à 40 pixels juste pour notre nb-list. Eh bien, juste pour notre histoire de toute façon. Donc, à l'intérieur de l'histoire de points, nous mettons un h3 et nous voulons dire que la taille de la police est de 30 pixels, non, la taille de la police est de 40 pixels. Oui, on y va. Ça a l'air plutôt bien. Fermons ça. Ça a l'air fantastique. Fantastique. Maintenant, tout ce qu'on peut faire, c'est faire les séparateurs. Alors, voyons ce que c'est, 10 hauteur, 470 largeur. On dirait environ 60 ou 70 Margin-top, Margin-bottom. Donc, 470 largeur et une hauteur de 10 pixels, couleur de fond, allons-y pour ceux. Ok, puis mettez une marge de, qu'est-ce que c'était, 60 pixels ou 70 pixels et puis des autos que nous pouvons envoyer à Lynette. D' accord. Regarde ça. Et l'autre en bas aurait dû fonctionner aussi. Fantastique. D' accord. Maintenant, nous avons cette image, alors, donnons-lui une clause, disons, image de gang, img. C' est génial. Sauvegardez ça. D' accord. Image de gang, nous pouvons dire affichage comme bloc et nous allons définir la marge à zéro et auto. Sauvegardez ça, rafraîchissez, c'est maintenant au milieu. Ok, ça se passe bien. Et peut-être qu'on va dire, pied de page. Qu' est-ce qu'on va faire avec le pied de page ? Nous disons, le centre d'alignement du texte. Ok, peut-être que dans le pied de page aussi, nous pouvons ajouter un wrapper. Donc, dot wrapper et cela signifie juste qu'il va être aligné au centre. Que se passe-t-il là ? Vérifions ça. Ainsi, le wrapper n'est pas aligné au centre. C'est bon. Donc, si nous sauvegardons cela, text-align centre. Voyons si ça change quelque chose. Oui, c'est le cas. Dans notre pied de page, quelle est la taille de la police ici ? La taille de la police est de 20 pixels, tous en gras, mais il semble qu'il y ait une opacité de 40 %. Donc, on va dire couleur, rgba. Allons pour le noir, et on a pour 0,4, pour 40 pour cent. Ensuite, la taille de la police, allons pour 20 pixels, puis, un peu d'espace. Donc, peut-être 80 pixels vers le haut, 45 vers le bas. Donc, nous allons dire marge, 85 pixels, 0, et 45 pixels vers le bas. Sauvegardez ça. Rafraîchissons. Ouais, ce n'est pas audacieux cependant, alors font-weight allons-y pour un audacieux. Ouais, ça a l'air super. Ensuite, peut-être que nous pouvons aussi dire, pied de page a, et faisons la même couleur. Plutôt doux. C'est presque notre page faite. Nous devons maintenant travailler avec ce rire. Alors, comment allons-nous faire ça ? Eh bien, je pense que ça pourrait fonctionner comme une position absolue. Cela pourrait aussi fonctionner comme une transformation. Bien que transformés et relatifs, ils ne sortent pas du flux de documents. Donc, je vais changer ma liste nb-en position relative. Alors ce que nous pouvons faire, c' est, comment s'appelle celui-ci ? Glisser. Donc, nous avons un li.nb-list spécial li.drag, et nous pouvons définir cela à la position absolue, et nous disons haut, nous pouvons dire 30 pixels pour l'instant. Dites, allons à gauche de 30 pixels aussi. Voyons ce qui se passe ici. Nous y allons, et peut-être que nous pouvons juste, pour l'instant, je vais juste dire zéro, zéro, et lui donner une largeur de 100 pour cent. Presque. Donc, disons 20 pixels, 20 pixels, puis 20 pixels à droite aussi. Oui, voyons ce que ça fait. Presque raison. Alors notre largeur, on peut juste enlever ça, je pense. Fantastique. Maintenant, avec notre transformation, nous pouvons la faire tourner un peu. Alors, tournez, combien est-ce tourné ? C' est une bonne question. Allons vérifier, et il a tourné de six degrés. Donc, six degrés, et il y a une ombre portée, donc l'ombre de boîte, et qu'est-ce qu'on a ici ? Eh bien, nous avons 2 et 14, et c'est à 50 pour cent d'opacité. Donc, 0, 2, 14 pixels, et RGBA, 0, 0, 0, 0.3. Voyons à quoi ça ressemble. Ça a l'air plutôt bien. Donc, maintenant du haut, on peut dire, je ne sais pas, 70 pixels ? Ouais, ça a l'air plutôt bien. Maintenant, nous pouvons juste utiliser le navigateur pour faire le reste ici. Donc, de la gauche, deux, trois, quatre, cinq, de la droite, moins un, deux, trois, quatre, cinq. Ouais, ça a l'air bien. Donc, à gauche de 70, à droite de moins 30. Donc, on a ça en marche. Maintenant, on a juste besoin de mettre cette main là-dedans. Comment allons-nous faire ça ? Eh bien, nous pourrions mettre un élément supplémentaire là-dedans ou nous pourrions essayer d'utiliser le off en pseudo-classe. Essayons ça. Alors, mettons ça comme ça, et allons-y après. Nous allons définir le contenu à rien, puis nous allons dire, afficher ; bloquer, puis nous allons dire position ; absolu, et puis peut-être nous lui donnons une largeur, et nous lui donnons une hauteur, et nous allons esquisser à savoir ce qu'ils sont ; 54 par 50. Essayons ça. Cinquante-quatre pixels, 60 pixels. Fantastique, puis arrière-plan, allons-y pour url, à l'intérieur de l'image et de la main. Où est la main ? On y va, puis on peut aller pour « no repeat 0 0 » et ensuite sur la taille de fond, encore une fois, ça va être 100 pour cent. Sauvons que c'est, et donnons-lui une valeur maximale de zéro, juste pour l'instant. Eh bien, peut-être qu'on peut juste définir la valeur inférieure. Ok, et ensuite on peut dire à gauche, allons-y 60 pour cent, et assez proche, assez proche. Jetons un coup d'oeil à ce type après pseudo-classe. Ici, c'est. Changons le bas à moins 30 pixels. Ouais, ça a l'air plutôt bien. Oui. Bas de moins 30 pixels. Okey-dokey. Donc, nous avons des choses que nous trouvons importantes à gauche et en dessous de notre histoire. Est-ce que ça a l'air juste ? C' est extra gras. Alors, allons à la liste nb-, histoire. On y va. Donc, le poids de la police 800. Sauvegardez ça. Donc, le rire est évidemment plus important que n'importe quoi d'autre pour ces gars en particulier. Nous avons un peu de flottaison et de texte en cours, mais whoa, que se passe-t-il ici ? Notre navigation est censée être sur le dessus. Alors, revenons à notre navigation. Donnons-lui un indice z de 1. Allons la rafraîchir, et ça l'a arrangé. Fantastique. L' autre chose que j'ai remarqué, c'est quand j'ai cliqué sur le bouton d'inscription, il y a une bordure bleue bizarre dessus. C' est bizarre, je ne veux pas ça. Je pense que c'est quelque chose à voir avec l'accessibilité, mais pour le moment, je n'aime pas ça, et il n'y a pas de curseur sur ce bouton. Alors, changeons ça. Donc, sur les cta, nous pouvons juste aller, bordure ; aucun, et nous allons dire curseur, et nous changeons ceci en pointeur. Alors rafraîchissez ceci. Il y a maintenant, encore une frontière. Peut-être que ce n'est pas une frontière, c'est peut-être un contour. Que diriez-vous d'un contour ; aucun ? Rafraîchir. Oui. On y va, mais je veux aussi dire une frontière nulle. On dirait qu'il y a une petite frontière là aussi. Rafraîchir. On y va. Fantastique. Je peux également mettre une classe de hover dessus ou une classe active. Alors, faisons ça. Actif. On va juste changer l'opacité, c'est vraiment facile, à quelque chose comme 0,7. Ouais, ça a l'air bien. Fantastique. C' est notre site qui a l'air vraiment bon pour le moment. On a littéralement juste le popup à faire. Donc, ce que je vais faire maintenant, c'est que je vais juste cacher la popup pour l'instant. Alors, comment s'appelle notre popup ? Ici, c'est, et nous pouvons juste dire quelque chose comme, cette popup, et dire display ; none. Fantastique. Sauvegardez ça. Rafraîchir. On y va. C' est notre site qui est visible. Dans la vidéo suivante, je vais cliquer sur m'inscrire, et ça me montrera ma popup, ou je clique sur m'inscrire ici, et ça me montrera ma popup. Avant de le faire, engageons notre code. Donc, ce que nous avons fait ici, nous avons fait le style de pied de page de la section histoire. Également ajouté du HTML, et changé quelques autres bits de CSS. Donc, nous nous engageons à maîtriser, et nous poussons à l'origine, l' envoyons à github.com. Fantastique. On y va. Je te vois dans la prochaine vidéo. 23. Projet : fenêtre pop-up: Donc, la seule chose qu'il nous reste à faire, c'est notre popup. Assez excitant, non ? Alors, allons y entrer. À l'intérieur de Sublime Text, la première chose que je veux faire est juste de commenter cela, parce que je ne veux pas en afficher aucun en ce moment, mais je veux en afficher aucun dans un peu de temps. Alors, qu'est-ce que c'est et comment allons-nous faire ça ? Donc, la première chose que j'aimerais faire est de mettre une couverture et cette couverture, voyons, elle a une opacité de 70 % et elle est noire. Donc, nous allons aller .popup.blanket. L' orthographe correcte aide toujours et nous allons définir une couleur de fond de rgba (0,0,0, .7). C' est génial. Nous définirons ses positions à l'absolu et nous dirons le zéro supérieur, le zéro inférieur, le zéro droit et le zéro gauche. Ça devrait faire l'affaire. Popup lui-même peut être réparé, donc on va aller posf et oui, peu près la même chose ici. Fantastique. Nous avons le contenu, donc si nous copions ceci, et il est collé ici. Là, nous avons le contenu, donc .popup.content. Ok, qu'est-ce qu'on va faire de ce type ? Eh bien, vérifions-le. Donc, il fait 961 pixels de large. C' est probablement censé être 960. Donc, allons-y pour une largeur de 960 pixels. Je vais définir une taille de boîte de border-box, fantastique. Ensuite, il semble qu'il y ait environ 40 pixels et 30 pixels en haut à voir avec le remplissage, alors passons à un remplissage de 30 pixels et 40 pixels. On verra comment ça marche. On a alors ce gars qui est aussi un H3, je pense, un H2. H2, comme Joignez-vous à notre Fanclub. Donc, on a ça. Nous voulons définir notre couleur de fond sur le blanc. Je vais dire le centre de l'alignement du texte. Voyons à quoi ça ressemble. Alors rafraîchissez. Ok, ça a l'air assez bien. L' index z est en dessous de la barre de navigation. Je veux qu'il soit au-dessus. Donc, changeons l'index z de la popup à deux. Assez facile, rafraîchissez-vous, on y va. Encore un peu bizarre, non ? Donc, le contenu, il n'a pas une position d'absolu. Alors, changeons cette position de l'absolu. Nous savons que sa largeur est 960. Qu' est-ce que la moitié de 960 ? Je n'en ai aucune idée, 480. Donc, allons pour un module à gauche de 480 pixels ou 480 pixels négatifs. Nous allons ensuite définir cette valeur de gauche à 50 pour cent. Sauvegardons ça et vérifions. Ouais, fantastique. Alors à quelle hauteur devrait-il être ? Eh bien, je suppose qu'on peut vraiment s'arranger ici. Nous pouvons voir que tout cela est d'environ 540 pixels. Donc, changeons-le à la hauteur de 540 pixels. Encore une fois, nous allons le définir sur la valeur maximale à 50 pour cent, et 540 diviser par deux est 270. Donc, nous allons marge supérieure négative 270 pixels. Vérifions ça, fantastique. Ça a l'air assez bien pour l'instant. Réglons notre bouton de fermeture. C'est excitant. Popup. Fermer. a-t-il une clause de fermeture ? Je pense que c'est le cas. Ouais, ok. Alors, voyons et esquissons à quel point c'est, 80 par 80. Donc, définissons une largeur de 80 pixels, une hauteur de 80 pixels. Je veux avoir une couleur de fond de, nous y allons. Ensuite, nous voulons un arrière-plan ou nous voulons que ce soit une URL et une image et fermer. On peut mettre cette couleur ici. On peut dire, pas de répétitions. Je peux dire centre, fantastique. Ensuite, nous pouvons probablement définir sa taille d'arrière-plan à quelque chose comme 100 pour cent, mais il pourrait être 80 pour cent ou 70 pour cent, pas tout à fait sûr pour le moment. Nous allons vérifier et puis en haut, nous allons régler à moins 40 pixels et à droite, nous allons régler à moins 40 pixels. Sauvons ça. Il est là, dit Fermer. On veut un rayon de frontière. Oh, mec. Je ne comprends jamais celle-là. Rayon de frontière de, disons juste 50 pour cent. Ouais, ça a l'air plutôt bien. Disons, bordure de zéro et esquisser aucune. Ouais, ça a l'air génial. Peut-être que notre taille d'arrière-plan peut être de 50 pour cent. Voyons ce qui se passe alors. Oui, 50 pour cent est génial. Nous pouvons définir un débordement de capacité de caché. Ensuite, nous allons dire retrait de texte moins 999 pixels, et cela va indenter notre texte proche à nulle part. On y va. Nous n'avons pas défini une position d'absolus, et c'est pourquoi la valeur supérieure ne fonctionne pas. Alors, allons positionner absolu, rafraîchir, incroyable. Pour maintenant, notre curseur, allons-y pour pointeur de curseur, et nous y allons. Maintenant, ce que nous devons faire, c'est que nous devons travailler sur ces éléments ici. Donc, nous avons juste ces éléments, donc nous pouvons un avoir popup l'élément et à l'intérieur de l'élément, peut-être que nous pouvons les flotter. Donc, on peut juste les flotter à gauche. Oui, essayons ça, alors flottez à gauche. Ok, quelle sera la largeur ? Bonne question. La largeur va être, disons 415 pixels. Oui, essayons ça, puis sur la marge à gauche , voyons, quelle est la marge à gauche, 40 pixels. Ok, voyons comment ça se passe. Que se passe-t-il ? Wow, qu'est-ce qui se passe ici ? Pas vraiment ce que je veux. Donc, élément popup peut-être, eh bien, c'est en fait un div, l'étiquette, et l'entrée peut-être pas. Donc, nous allons changer cet article.Label et entrée avec un type de texte. Je vais dire bloc d'affichage sur les deux. Voyons voir si cela change quelque chose du tout. Non, ça ne change rien du tout. Alors, voyons ce qui se passe ici. Ok donc ils ne flottent pas pour bien, le bouton est également pas vraiment profiter de cela, il semble qu'il est dans les éléments de ligne. Donc, nous devons dire bloc d'affichage. Hé, il est toujours froid. Je suppose que tout ça va flotter sur la gauche. Problématique. Qu'est-ce qu'on peut faire ici ? Voyons si changer, quoi, nous y allons, ça aide beaucoup. Donc, avec les 400 pixels, fonctionne vraiment bien, pour l'instant. Peut-être que nous pouvons définir la couleur de fond sur jaune pour comprendre ce qui se passe. Ok, on dirait qu'il y a juste beaucoup d'espace sur le côté gauche ici. Donc, ce que nous pouvons faire est d'insérer notre fichier d'index, nous pouvons mettre ces deux lignes, juste ici. Et puis mettons-le juste en retrait ici. Ok, alors nous pouvons réellement flotter les éléments dans les lignes, puis les lignes vont juste commencer l'une après l'autre. Ok, donc ce qu'on a ici, on a un pop up. apparaît dans une rangée et ça va être un bloc d'affichage et c'est la hauteur, ça va être 111. Donc, la hauteur de peut-être allons-y un 110 pixels. Ok, ou peut-être qu'on n'a même pas besoin d'une taille. Peut-être que ce peut être juste comme une solution claire, alors peut-être que ce que nous pouvons faire ici est juste aller, pop up to a row and on peut dire que le contenu n'est rien. Nous pouvons alors dire, tableau d'affichage et puis nous pouvons dire chemin clair. On y va. Ok, donc maintenant nous avons ces objets flottants dans les rangées. Nous pouvons revenir à 415 pixels et ensuite nous pouvons dire que tout élément qui est aussi un premier enfant n'a pas de module à gauche. On y va, et voyons ça. On y va, fonctionne un peu mieux. Ensuite, j'ai mon étiquette affichée comme un bloc, mais j'ai un petit nom de classe là-bas au lieu d'un nom de balise réel. Alors sauvegardons ça, rafraîchissez. Beaucoup mieux. Et puis à l'intérieur de chaque élément que je peux dire, prend la ligne à gauche, ou il prend juste la ligne en dernier, prend la ligne à gauche. On y va. Rafraîchir. Incroyable. Les choses ont l'air beaucoup mieux. Et quelle est la taille de la police ici ? 20 pixels et 30 pixels. Alors, allons-y pour la taille de la police, 20 pixels et était-ce en gras ? Oui audacieux et audacieux. Douce. Ok, donc la taille de la police est de 20 pixels et le poids de la police est en gras. Et la même chose pour le texte, 30 pixels et le poids de la police en gras. Ouais, ça a l'air très bien. C' était un peu de marge là donc peut-être quelque chose comme 10 pixels, marge inférieure 10 pixels. Ouais, super super super. On peut probablement enlever ce jaune maintenant, alors oui. Merci. Ça a l'air un peu mieux maintenant. Ok, maintenant, si on doit retourner au croquis, ces choses sont assez grandes frontières. Donc 111 est la couleur et l'épaisseur de 4. Donc, allons-y pour le type de texte. Allons pour une bordure, et c'est un solide de 4 pixels et c'est 111. Ok, ça a l'air assez bien, mais maintenant quelle est la hauteur ? La hauteur est de 70 pixels. Donc, allons pour une hauteur de 70 pixels, allons pour une boîte de dimensionnement pour une boîte, puis actualisons. Ça a l'air plutôt bien. Quelque chose n'a pas l'air bien. Peut-être que ce sont les lignes, le contenu, il y a un rembourrage de 30 en haut et 40 sur la gauche. Ceux-ci ont l'air un peu courts. Donc, peut-être que nous pouvons faire est que nous pouvons définir ces entrées votre largeur devrait être de 100 pour cent, et ensuite vous êtes rembourrage ou votre marge remplissage 15 en haut et 20 à gauche et à droite. Alors, allons-y pour le rembourrage. Donc, 15 et 20 pixels et voyons à quoi cela ressemble. Hey, ça a l'air beaucoup mieux. Fantastique. Et je ne peux pas vraiment faire défiler nulle part maintenant. C' est un peu un budget, mais si je termine ça. On y va. Je vois ce qui se passe. Donc, peut-être que je veux diminuer un peu la hauteur sur ce pop-up. Alors, allons au contenu pop-up ici, changez ça à 500. Ensuite, je vais changer ma marge supérieure à 250, donc juste rafraîchir ceci. Ouais, ça a l'air plutôt bien. Et puis mon pop-up, je vais changer mon H pour dire que la marge est 0 0 et peut-être si nous pouvons aller 20 pixels en bas, voyons à quoi cela ressemble. Peut-être qu'on peut faire 10 pixels en haut. Ouais, ça a l'air plutôt bien. Et puis je veux aussi mon pop up. CTA. Je veux donner un peu de marge haut, allons-y pour 50 pixels. Peut-être même moins, 40 pixels. Super ! Remplissez vos coordonnées, je veux dans Boom ! D' accord. Ça change un tas de trucs. Donc, maintenant ce que nous pouvons faire est que nous pouvons réellement commencer à faire un peu de JavaScript. Maintenant, rappelez-vous que ce n'est pas une classe JavaScript, donc je vais faire du JavaScript rapide et sale mais supporter avec moi. Tout ce que je dois faire ici, c'est dans notre index, tout ce qui ouvre ou ferme le pop-up doit avoir une sorte de fonction dessus. Ok, alors allons chercher tout ce qui a un hachage. On y va, logo, c'est bon, inscrivez-vous. On y va. Donc, ici, ce que nous pouvons faire est que nous pouvons peut-être dire quelque chose comme JavaScript. Logo. Ouais, c'est bon. Inscrivez-vous. On y va. Donc, ici ce que nous pouvons faire est, nous pouvons peut-être dire quelque chose comme JavaScript, et nous pouvons juste mettre rien. Je pense que ça marche. Hé, peut-être que c'est juste du JavaScript comme ça. Comme ça ? Je ne sais pas. Ensuite, nous pouvons dire, onclick, et ici nous disons, ShowPopup. On y va. Copions tout ça à nouveau. Cherchons l'inscription. D' accord. On y va. Onclick, ShowPopup. D' accord. Je pense que cela a besoin de virgules inversées. D' accord. Donc, il n'y a que deux boutons d'inscription. D' accord. Maintenant, ce que nous allons faire est de créer un nouveau fichier JavaScript. Donc, New File, enregistrez-le comme script.js. D' accord. Dans notre index.html, ce que nous allons faire est d'ajouter le script en bas. Donc, script et source est script.js, et dites type. Je pense que c'est un texte JavaScript. On y va. Script, on va juste dire console.log, hé là. Maintenant, nous allons juste le faire pour que nous sachions que le JavaScript fonctionne. Rafraîchissons. Je vais juste partager ma console. Hé, là ! Donc, ça marche. Fantastique. Maintenant, ce que nous pouvons faire, c'est retourner au style. Nous allons aller à popup, et nous allons le commenter à nouveau. Nous allons ensuite ajouter une classe à notre popup pour dire popup.show, et nous dirons, display block. D' accord. Donc, c'est plutôt cool. Donc, quand on se rafraîchit ici, pas de popup. Donc, maintenant ce que nous pouvons faire est, dans notre index.html, notre popup, juste lui donner un ID de popup, et c'est ainsi que nous allons le référencer en JavaScript avec un ID. Donc, à l'intérieur de nos scripts, nous pouvons réellement écrire du code, mais je vais le faire dans le navigateur d'abord. Donc, je vais dire, document.getElementById, et puis je vais dire, obtenir par popup. Appuyez sur Entrée. Il n'y a rien là-bas. Alors, nous allons juste rafraîchir. Je vais appuyer sur la flèche vers le haut, recommencer, et nous avons notre popup. Donc, je vais écrire du code. Je vais dire var. Peut-être que je peux rendre ça un peu plus grand pour toi. Var popup est égal, et si je pouvais juste copier ça, ok. Donc, c'est ce que le popup est égal. Je vais alors dire popup.ClassList.add, et puis je vais dire show. Juste comme ça, hé, nos popups sont arrivés. Ensuite, ce que je peux dire à nouveau est, je peux dire remove show, et cela va supprimer mon popup. Assez facile, non ? Alors, copions ceci. Allons à notre script. Maintenant, nous pouvons écrire un script qui dit quelque chose comme show popup. On y va. Donc, nous pouvons dire fonction ShowPopup, et nous pouvons écrire ceci. Avant cela, nous pouvons dire var popup égal, et revenons à Chrome, et nous allons appuyer sur la flèche vers le haut ici juste pour voir ce que nous écrivons la première fois. On y va. Copions ça et collez-le. Donc, nous allons supprimer ça. Dans ce cas, nous allons l'ajouter. Ensuite, nous pouvons copier ceci, et vous pouvez dire HidePopup. D' accord. Sauvegardons ceci et puis onclick, nous pouvons réellement copier tout cela. Ensuite, recherchez notre bouton Fermer et faites exactement la même chose ici. Onclick, ShowPopup. D' accord. Alors, fermons ça. Rafraîchissons. En savoir plus. Inscrivez-moi ! On y va. Notre popup fonctionne. Fermons ça. Ça ne marche pas. Pourquoi ça ne marche pas ? Bonne question. Revenons à notre script. Il dit toujours ajouter. Donc, disons supprimer. Ce que cela fait est fondamentalement, il ajoute et supprime juste ceci comme un morceau de code et CSS. Ça enlève le spectacle. Donc, par défaut, il n'en affiche aucun. Quand il ajoute une classe de show, il va alors et dit, « Hé, affichez cet élément à l'affichage du bloc. » D' accord. Actualiser. Inscrivez-moi ! Fermer. Toujours rien. Alors, y a-t-il des erreurs ? Que se passe-t-il ici ? Eh bien, inspectons cet élément. Voyons voir. C' est en fait la bonne chose. Ça dit toujours ShowPopup. Donc, revenons à ici, et disons HidePopup. Cacher Popup. ShowPopup. D'accord. Actualiser. Fermer. Inscrivez-moi ! Je veux entrer ! Fantastique. Fermer. Inscrivez-moi ! Fermer. Huh ! Inscrivez-vous. Fermer. Vraiment cool, non ? Maintenant, nous avons un élément fixe. Nous avons un élément collant. Nous avons toutes sortes de trucs bruyants sur cette page web. Nous avons presque terminé notre exemple. Faisons juste un commit final. On peut dire : « C'est le propriétaire ! Fait ! Surtout fait. » Donc, il y a encore beaucoup de choses qui contribuent à rendre un site Web incroyable. Il y a probablement une chose que vous dites  : « Pourquoi n'as-tu pas fait ça ? » Eh bien, nous pourrions être ici pendant des jours pour faire le site parfait, mais j'espère que vous avez beaucoup appris dans le processus. Une chose que je veux faire, c'est juste de sortir ce journal de console. D' accord. Engagez-vous à monstre. Poussez vers GitHub. Boum ! Fait. 24. Publiez votre projet: Alors, maintenant que vous avez créé une page Web ou un site Web en utilisant ce que nous avons appris dans la classe, pourquoi ne pas le partager ? Soit téléchargez-le sur votre propre site Web, utilisez les pages Surge ou Github. Utiliser le contrôle de version avec Github ou Bitbucket est également une excellente idée. Non seulement vous pouvez conserver les versions de votre projet à différentes étapes, mais c'est aussi un excellent outil de sauvegarde. Donc, maintenant que vous avez créé votre site Web, c'est un chef-d'œuvre, vous voulez le partager. Si vous ne voulez pas payer pour votre propre site Web et hébergement, si vous voulez juste le faire sortir dans la nature, dans le monde, et vous avez utilisé Github et peut-être Github bureau, il ya de bonnes nouvelles, vous pouvez simplement le publier gratuitement en ligne avec les pages Github. Donc, ce que vous faites est de taper sur cette branche maître et vous dites gh-pages, créer une nouvelle branche, créer cette branche avec des pages gh-et ensuite vous pouvez basculer entre votre branche maître et votre branche gh-pages et ensuite vous allez, boom , publier branche, et il va pousser à Origin, fantastique, et vous allez à Google Chrome et dans un nouvel onglet, vous pouvez utiliser votre nom d'utilisateur, votre nom d'utilisateur Github, donc mrra.github.io/the-gang et il est là. C' est en ligne pour que le monde entier puisse le voir. Joli tueur, assez gentil et, haha, notre pop-up fonctionne. Yay, yay pour les pages Github. L' une des façons les plus simples d'obtenir vos sites n'importe quoi en ligne, surtout, si vous n'avez pas utilisé Github, est d'utiliser quelque chose appelé Surge. Je ne vais pas vous dire tout à ce sujet. C'est assez incroyable. Donc, ce que j'aimerais faire, c'est que j'aimerais créer un nouveau fichier. Je vais le sauver comme quelque chose comme http et puis je vais dire the-gang.surge.sh. Je vais enregistrer ceci en tant que CNAME et vous verrez pourquoi dans une seconde. Je vais retourner au Finder, faire glisser mon dossier www dans le terminal et puis je vais juste aller chercher et juste comme ça, j'appuie, OK. Si vous ne vous êtes pas déjà connecté, cela vous mènera à travers un tas d'étapes, consultez search.sh et puis il va, baam. Le projet est publié et en cours d'exécution sur le gang.surge.sh et nous pouvons aller ici et boom, c'est en ligne. Le gang.Chirurgien, super, super simple. Alors, ouais. Consultez surge.sh. 25. Fin: D' accord. J'ai eu du plaisir à enseigner cette classe de mise en page HTML et CSS. J' espère que tu as beaucoup appris et t'es amusé. Vous devriez maintenant être mieux en mesure de prendre le contrôle du monde et de construire des sites Web impressionnants. Vous pouvez voir plus de mes cours et rejoindre le fan club sur taptaptapkaboom.com. Donc, au revoir pour l'instant, et je te verrai bientôt avec plus de cours. Si vous avez aimé la classe, donnez-lui un pouce et écrivez une belle critique. Ça compte vraiment beaucoup pour moi.