HTML + CSS - Comment créer un site Web

1. Introduction: Tout le monde, Merci beaucoup d'avoir cliqué sur ce cours. m'appelle Verity et je suis un développeur frontal de Sydney, en Australie. Maintenant, je suis ici aujourd'hui pour vous apprendre les fondamentaux du HTML et CSS sur. Pour ce faire, nous allons travailler ensemble sur la construction d'un site web de style portfolio que vous pouvez personnaliser à votre seul pour vos propres compétences et bien sûr, votre propre style. Maintenant, vous n'avez pas besoin d'expérience préalable pour être en mesure de suivre ce cours. Nous allons commencer à partir de la case 1 et nous allons travailler ensemble et construire toutes les compétences lentement. À la fin de ce cours, vous aurez construit un site Web prêt à Internet, qui est assez cool en ce moment pour en tirer le meilleur parti, parce que je vous encourage vraiment à créer un projet sous cette vidéo dans le projet où vous pouvez suivre vos progrès tout au long de la classe, vous pouvez discuter avec d'autres élèves, vous pouvez voir ce que tout le monde a travaillé sur. Et bien sûr, si vous êtes coincé, vous pouvez poser des questions dans la section de la communauté et je vais essayer de vous aider autant que je peux et j'espère que vous les camarades de classe essaierez de vous aider aussi. Donc, si vous êtes prêt à plonger dans ce projet, commençons notre première leçon. 2. Leçon 1 : démarrer: Si vous êtes les bienvenus à la leçon 1, vous savez ce que nous allons faire dans cette première leçon, c'est que nous allons vous mettre en place avec vos dossiers de cours. Allez pour télécharger un éditeur de texte. Nous allons jeter un oeil à travers la structure de dossiers sur juste généralement piégé à travers tout ce que nous allons couvrir dans ce cours. Donc, nous allons à la toute première chose que nous allons faire est de cliquer sur le robinet de votre projet ci-dessous cette vidéo, et vous devriez voir les fichiers joints et un petit dossier Zip disant projet de classe zip dot zip. Il suffit de télécharger ce dossier et de l'extraire sur votre ordinateur. J' ai déjà fait si social ouvert que maintenant. Donc, une fois que vous ouvrez ce fichier, vous devriez voir trois sous-fichiers conceptions, fichiers de travail et terminer le projet. Si nous cuisinons dans le fichier de conception, vous verrez que je vous ai fourni avec PNG pour bureau un de Mobile. Et ce sont les conceptions de ce que nous allons construire dans ce cours. Mais nous allons jeter un coup d'oeil à cela dans un navigateur dans un instant. Donc, si on remonte à un niveau, on a des fichiers de travail qui est littéralement comment fonctionnent les flacons. C' est là que nous allons faire tout sur le travail tout au long du cours sur un projet fini qui va cuisiner dans maintenant vous pouvez voir que j'ai index dot html et un dossier assets où nous allons stocker notre CSS sur tout sur les images. Si vous double-cliquez sur votre fichier html point d'index, il s'ouvrira dans un navigateur, comme vous pouvez le voir ici. Nous avons donc un joli petit espace de navigation pour un logo. Quelques bons liens. Nous avons une longueur d'avance sur l'image avec un peu de texte d'introduction pour que vous puissiez vous présenter . Nous avons une section ici pour les articles de portefeuille. Ils ont évidemment des photos ou de la nourriture pour le moment, mais vous pouvez les changer pour être ce que vous voulez. Et si nous survolons ces images verront que nous avons un joli petit effet CSS montrant le nom de l'élément de portefeuille sur une petite description ainsi que sur ce qu'il est. Et si on fait défiler vers le bas, on a une section sur moi avec mon visage sur la droite. Juste un peu d'espace pour une description sur qui vous êtes et ce que vous faites, puis en bas . Nous avons une section contact qui contient également le titre et la description, mais aussi toutes vos icônes de médias sociaux que vous pouvez lier à vos propres comptes personnels . Donc c'est ce que nous allons construire. Je pense que ça a l'air plutôt sympa. À la fin de ce cours, ce sera un site Web prêt pour Internet. Donc, avant que nous puissions commencer un travail sur notre site, la première chose dont nous allons avoir besoin est un éditeur de texte, qui est ce que vous avez utilisé pour écrire le code de votre site Web. Donc j'en ai utilisé un bon nombre dans mon temps et honnêtement, au niveau débutant, cela ne fait pas vraiment la différence que vous choisissez ? Quelques-uns de ceux que j'ai utilisés avant Ils sont Adam dot io. J' ai sublime. Tex sur celui que j'utilise en ce moment est le code de studio visuel. Mais honnêtement, ça n'a pas vraiment d'importance. Alors choisissez celui que vous voulez. Je pense qu'aujourd'hui, nous allons l'utiliser à lui donc vous pouvez simplement cliquer sur le téléchargement et suivre les instructions sur Adam. Ouvre ça. Je l'ai déjà installé sur mon ordinateur, donc je vais juste ouvrir que maintenant je vais ouvrir nos fichiers de projet, puis Ce sont nos fichiers de travail. Donc, vous voulez que vous voulez le dossier Fichiers de travail ? Donc, vous cliquez sur Ouvrir, vous pouvez voir tous les index et nos actifs. Je vais cliquer sur le fichier d'index. Et voilà. C' est là que nous allons travailler sur notre projet afin que vous puissiez voir que j'ai déjà configuré le fichier html hay pour vous. La structure de base. Donc, nous avons doc type html en haut, ce qui est une nécessité pour tous les fichiers hedge de amount afin que le navigateur sache quel type de fichier votre ouverture. Lorsque vous le chargez dans votre navigateur, nous avons une balise html hey qui enveloppe à nouveau l'intégralité du contenu dans votre fichier HTML, qui doit être. C' est le navigateur sait ce que vous lui donnez. On a la tête sur le corps. Maintenant. La tête est l'endroit où vous mettez toutes les informations sur votre page Web que vous ne voulez pas nécessairement être chargé dans votre navigateur. Donc, c'est là que vous dites lier vos fichiers CSS, votre fichier javascript afin que la navigation sache où les trouver. C' est là que vous mettiez de l'information sur Facebook, partagez toutes les métadonnées, le titre de votre page Web et des choses comme ça. Il y a tout un tas de choses que vous pourriez mettre là-dedans, mais on couvrira ça plus tard, donc ne vous attardez pas trop à ce sujet de temps en temps le corps. C' est là que vous écrivez tout ce que vous voulez être visible sur votre page Web. Donc, pour démontrer d'abord ce que le corps fait réellement, nous allons commencer par créer une page Web Hello World, qui est une tradition dans le développement Web. Chaque fois que vous démarrez un nouveau projet, vous créez une page Web Hello World pour vous assurer que tous vos fichiers et tout fonctionnent comme vous le souhaitez. Donc la première chose qu'on va faire, c'est qu'on va parler. Hey, H un, je déteste une étiquette. Maintenant cela signifie juste en tête un et ensuite à l'intérieur de la rubrique, nous allons écrire Bonjour, petit point d'exclamation du monde et enregistrer ce fichier. Maintenant, si nous allons dans chrome sur le chemin, ouvrez notre fichier afin que je vais aller dans mes projets de coûts les fichiers de travail et mon fichier d'index. Voilà, tu y vas. Vous pouvez voir Bonjour. Eh bien, juste imprimé sur le navigateur. Donc, nous savons que notre fichier d'index fonctionne, mais nous voulons également configurer notre fichier CSS afin que nous puissions apprendre CSS dans ce cours. Donc, dans votre dossier assets, si vous revenez sur lui et regardez le dossier Assets et nous avons le dossier Styles , qui est où le CSS est stocké et dans ce dossier, j'ai le point principal CSS CSS est où nous allons stocker tous nos fichiers et comme vous pouvez stocker tous les styles de nous Désolé. Et comme vous pouvez le voir, j'ai écrit que la haine devrait avoir la couleur pourpre, mais pour le moment, le titre n'est pas violet, donc ça ne marche pas. Donc, ce que nous allons devoir faire pour que ce style affecte notre fichier d'index est dans notre tête du document. Nous devons réellement lier le fichier CSS. Donc ici, je viens de copier. Nous avons une balise de lien avec RTL, qui se termine par relation ou relation, qui est donc le type de ce qui est le fichier C'est une feuille de style. Hey, Treff veut dire l'emplacement pour qu'on puisse voir si on va dans le côté gauche, on peut voir que le fichier d'index se trouve au même niveau que le dossier d'actifs. Donc, ce que nous lui disons ici, c'est qu'à partir d'Index, nous voulons que vous alliez dans le dossier Assets, voir leur dossier assets. Ensuite, nous voulons que vous alliez dans le dossier Styles. Ensuite, nous voulons que vous alliez dans le point principal CSS. Donc si nous sauvegardons ce fichier, puis nous allons sur notre page Web et nous rechargeons, vous pouvez voir qu'il est violet. Voilà, tu y vas. Vous venez de mettre votre première page Web. Maintenant, dans la deuxième leçon, nous allons arrêter de construire sur la navigation pour notre site Web, alors allons-y. 3. Leçon 2 - Partie 1 : Navigation: Donc, avant d'aller plus loin, nous devrions probablement parler de ce que l'email attelé et CSS est réellement correct. C' est un peu important pour ce cours. Donc hey, HTML se dresse alors que le langage de balisage hypertexte où un CSS signifie feuilles de style en cascade. Maintenant, vous pouvez penser à HTML et CSS en termes de construction d'une maison si rapide ml est la structure de la maison. Ce sont les loups. C' est le toit. C' est le sol. C' est ce que les sections Une petite pièce où est un CSS, comment vous décorez la maison, comment vous la rendez à la maison. C' est la couleur que tu peins les murs. C' est le mobilier que vous choisissez. Choisissez dans votre lessive. C' est si vous voulez que la photo sur le mur soit à gauche à droite. Maintenant, la chose importante à retenir pour les feuilles de style en cascade ou CSS est que l' importance des styles que vous écrivez devient de plus en plus grande à mesure qu'ils descendent la feuille de style. Donc, tout ce que vous en bas va potentiellement remplacer ce que vous avez écrit en haut . Si vous utilisez le même select up, ne vous inquiétez pas trop à ce sujet maintenant. On va le couvrir dans la prochaine leçon. Donc, la première partie de notre page que nous allons construire est la navigation sur. Pour ce faire, nous allons devoir commencer par écrire un balisage HTML ALH qui va définir la mise en page et le contenu de notre page. Maintenant, si nous regardons la mise en page dans notre projet fini ici, vous pouvez décomposer la conception en une sorte de grille. Vous pouvez voir que nous avons le conteneur externe qui crée la forme de la navigation. Nous avons un conteneur interne qui crée le maximum avec qui sont le contenu de contact peut étendre à Nous avons un petit conteneur pour notre logo et un conteneur pour nos articles de navigation . Maintenant, chacune de ces sections va être enveloppée dans des balises appelées dibs on leur donnera noms de classe afin que nous puissions les sélectionner en CSS lorsque nous les stylisons plus tard. Allons à notre fichier HTML et d'abord nous allons supprimer sont bonjour monde parce que nous n'avons plus besoin de cela. On va commencer par écrire. Je déteste ta bouche, donc je vais écrire notre premier div avec la navigation Kloss. Ce sera le conteneur pour toute notre navigation. Maintenant, vous pouvez soit l'écrire comme ceci comme un div ou parce que ce sera une navigation. Il y a une balise spéciale appelée la balise naff. Je pensais que tu pouvais le faire de toute façon. Maintenant, c'est juste mieux pour l'accessibilité. Et à l'intérieur, nous allons avoir un conteneur. Kloss, qui aura le conteneur qui va limiter la largeur du contenu qui se trouve à l'intérieur de la navigation. Et puis une couche de plus vers le bas aura un Kloss avec des knaves Loga Uh, Dave sur le même niveau dans le même conteneur. Nous allons avoir une classe pour notre jamais une classe et un fait pour nos articles de navigation. C' est là que nous allons mettre tous nos liens vers différentes sections de notre feuillet mais. Donc, nous sommes juste juste ici juste pour l'instant afin que nous avons quelque chose là-dedans, va écrire logo et va maintenant articles que j'aime faire cela juste pour que je puisse voir sur la page où tout est. Nous allons aller dans nos fichiers de travail et nous rafraîchir et voilà. Donc, pour que notre logo apparaisse. Je l'ai en fait défini comme un fichier image, donc nous allons écrire une balise image avec une source sur une alternative après vous. Cet attribut alternatif décrit essentiellement simplement ce qu'est l'image. Donc, s'il ne se charge pas, l'utilisateur sait ce qui est censé être là. Donc, je vais juste juste image de profil dans ce sur. Notre source indique à ce navigateur où trouver l'image. Donc, dans ce cas, nous sommes dans le fichier d'index. Nous voulions aller dans le dossier Assets dans le dossier Images, puis vers le bas vers Verity logo dot p et G. Donc, je vais écrire cela comme des images d'assets, puis verity logo dot PNG. Et puis, eh bien, juste vérifier que cela a chargé voir cet espace blanc. Le logo lui-même est que les blancs n'allaient pas être en mesure de le voir pour le moment. Mais le fait qu'il ne montre pas la balise alternative signifie qu'il a chargé l'image . Ensuite, dans notre section des éléments de navigation, nous allons écrire nos articles dans une liste, et dans ce cas, nous allons utiliser un nordeste, qui signifie qu'il affichera juste des points à puces au lieu de chiffres. Si vous vouliez montrer des chiffres, vous pouvez écrire. Oh, je veux dire liste ordonnée. Mais nous allons utiliser une liste ordonnée dans ce cas. Donc, chacun de nos articles de liste va à la baie l'un de nos liens vers un point sur la page . Donc, nous allons faire trois de ces Teoh trois et à l'intérieur allaient avoir une balise, ce qui est la façon dont vous créez un lien. On va juste mettre une livre là-dedans pour l'instant. Donc, dans une balise vous permet de lier n'importe quel texte dans votre quantité hachurée. Donc, notre premier lien sera top portfolio section copie. Ce deuxième lien va être à notre section sur le sujet, et le troisième lien va appâter à notre section contact. Ok, donc maintenant on était frais. Nous pouvons voir cet espace blanc où les images que nous avons chacun de nos liens, mais il n'a pas tout à fait l'air que nous voulons. Donc maintenant, nous allons styliser le montant rht. Donc, pour ce faire, nous allons aller dans nos styles de dossiers d'actifs, puis CSS principal va se débarrasser de notre haine un violet parce que nous n'avons plus besoin de cela. Et bien, c' est ça. Navigation parce que rappelez-vous, notre conteneur supérieur a la navigation de classe, et nous allons définir l'arrière-plan pour si cinq date 75 Maintenant, c'est ce que vous appelez une valeur hexadécimale. Donc si on sauve ça frais, voilà. Maintenant, vous pouvez voir notre image. Mais vous voyez comment il y a cet étrange petit espace blanc autour de la navigation, ce que nous n'avons pas. Nous n'avons pas demandé au navigateur de le faire. Et ce que c'est un style par défaut que le navigateur applique à notre page Web, et chaque navigateur appliquera ces valeurs par défaut légèrement différemment. Donc, j'ai inclus dans vos fichiers pour vous normaliser point CSS. Je ne vais pas entrer dans les détails sur ce que c'est pour le moment, juste à cause du temps. Mais essentiellement, ce que cela fait est de réinitialiser tous vos styles de navigation par défaut. Donc, si nous lions juste cela dans notre fichier principal au-dessus du fichier CSS principal et actualisons la page que vous allez qui disparaît, il est important qu'il vienne en premier parce que tout ce qui est dans votre fichier CSS principal remplacera normaliser point CSS parce que c'est une feuille de style en cascade. Donc, plus vous allez vers le bas, plus l'importance est élevée. Les règles de style sont tellement maintenant que nous avons cela, ce que nous voulons faire maintenant est de mettre ce logo en forme et flotter sur le côté gauche. Et nous voulons que nos liens s'affichent en ligne et flottent vers la droite afin que nous commencions sans logo, puisque c'est le premier pour que nous puissions cibler notre logo en utilisant ses griffes. On a les toiles, Knave, Loga. Donc, nous allons à notre CSS bien en ce moment. Si logo. Donnons-lui une largeur de 180 pixels, parce que c'est un peu bigot au moment où je vais mettre une bordure autour, juste pour que vous puissiez voir où tout se termine. Et nous le ferons aussi pour notre navigation. Donc nous allons faire bordure un pixel solide lecture. Nous allons sauver ça et jeter un coup d'oeil. Oh, voir les images qui sortent du conteneur. C' est pourquoi la frontière est toujours bonne, sorte que vous pouvez voir où tout se termine. Donc la raison pour laquelle cela se produit est parce que le logo jamais est le conteneur. Mais l'image elle-même est plus grande que le conteneur, donc elle renverse sur le côté. Donc, pour réparer ça, nous allons faire une autre couche vers le bas et bien maintenant. Image de logo parlant. C' est ainsi que vous ciblez un élément en écrivant simplement l'image dira div o l. I. Donc, pour cibler l'image, nous allons écrire avec 100% et avec 100% dans ce cas signifie 100% de la largeur de son parent. Donc, parce que nous avons dit que les parents devraient être 180 pixels, cela signifie que le logo de la valise ne pourrait pas être plus de 180 pixels permettra d'enregistrer cela et de vérifier à nouveau. Et ils y vont, ça a l'air beaucoup plus agréable. 4. Leçon 2 - Partie 2 : Navigation de navigation: Jetons un coup d'oeil à ces liens. Nous voulons qu'ils s'assoient dans la file au lieu de l'un en dessous de l'autre. Donc les chiffons que nous avons des articles de nab. Voilà, tu y vas. Et puis nous avons notre u L L I. Donc, nous allons dans un CSS sur Nous allons style ne pas avoir d'éléments pour le Kloss. Nous allons mettre une bordure d'un pixel blanc solide là à nouveau pour que nous puissions voir où elle est. Mais pour nos objets ont, arrêtons de les faire afficher dans des blocs de ligne. Nous voulons donc descendre à la liste ordonnée de l'ONU et à l'élément de la liste lorsque nous voulons que chaque élément de la liste s'affiche en ligne avec les autres. Donc, dans le bloc de ligne, ils y vont vieux en ligne. Voyons maintenant. Ce conteneur prend toute la largeur de l'écran, ce que nous ne voulons pas. Et la raison pour laquelle cela se produit est parce qu'il s'agit d'un élément de bloc d'affichage. Donc, nous allons revenir à maintenant les éléments, qui est le conteneur, et nous allons ajouter affichage dans le bloc de ligne à ce est bien, ils vont maintenant. Voyez ce petit espace ici qu'il crée à gauche du texte qui est à voir avec le remplissage donc tapotant Vous voyez cet espace vert Alors le rembourrage est le je vais vous montrer dans le si nous ouvrons les outils de développement ou pour vous montrer que dès le début Sophie, cliquez à droite, cliquez, inspecter et nous allons dans nous cliquer sur cette petite chose de port quand nous cliquons sur notre article que nous voulons regarder, qui est sur les listes ordonnées, vous pouvez voir ceci est le HTML que nous avons écrit juste avant que nous ne nous ouvrions. Vous pouvez voir vos éléments de liste et maintenant si nous allons ici pour les styles et défiler vers le bas, vous pouvez voir la section verte est ce que nous appelons tapting et tapting signifie espace dans un conteneur. Donc nous ne voulons pas de cet espace dans le conteneur. Nous voulons vraiment que ce soit zéro comme ça. Donc, si nous allons dans tous les ah CSS sur les éléments knave jamais les éléments sur l'élément de liste ordonnée et nous écrivons padding zéro qui disparaîtra ou il restera parti. Ils y vont maintenant. Nous voulons que ces liens s'éloignent ici assis à droite. Donc, si nous retournons dans notre CSS et que nous ciblons les objets de talent, nous le pouvons. Ce que nous pouvons faire, c'est que nous pouvons écrire, flotter à droite, et cela va l'envoyer vers la droite. Alors jetons un coup d'oeil. Flottez à droite là, vous y allez. Il est à droite, mais voyez comment maintenant il est en quelque sorte assis à l'extérieur du conteneur maintenant. C' est parce que quand tu as utilisé le flotteur, ça prend ce mâle chiite de l'ordre normal. Donc maintenant, c'est drôle, donc la façon dont on va régler ça c'est de mettre un flotteur sur le logo. Vous avez le logo flottant à gauche. Mais ce que cela va alors faire maintenant qui est assis même si vous avez acheté le conteneur avec l'arrière-plan a effectivement effondré car il a changé l'ordre du HTML. Donc il n'y a plus rien à l'intérieur. Donc, réparer pour cela est d'aller au conteneur de ces deux éléments sur. Nous allons écrire de l'eau de débordement, ce qui dit essentiellement au conteneur de tout contenir, même s'il déborde la hauteur. Donc, nous allons cliquer, rafraîchir, et ils vont que contenu à nouveau. Débarrassez-vous des frontières parce qu'on n'en a plus besoin. Nous allons mettre un peu d'espacement entre les objets d'Allah maintenant et aussi se débarrasser de ce bleu et souligné. Donc maintenant articles L. I Nous voulons un peu d'espacement à l'extérieur. On ne veut pas de rembourrage. On veut un espacement. Nous voulons une marge à l'extérieur, hors de la liste des éléments, donc nous allons écrire zéro en haut. Cinq sur la droite est zéro sur les cinq derniers sur la gauche. C' est ce que ça veut dire. Pas plus. Échangez AIBA et voyez qu'il a créé cet espace. Et si je vais et si je vais dans un de nos articles ici et que je clique dessus sur l'élément de liste Voir , nous pouvons voir la marge cinq de chaque côté. Rien sur le dessus en bas. Non, maintenant, pour la couleur que vous devez cibler spécifiquement la balise que nous avons à l'intérieur de l'élément de liste. Alors on va aller claquer. Eisen U L L I. Une couleur f f f f f f f f f f f f f f, ce qui signifie blanc, et nous voulons que la décoration de texte ne soit pas. Nous ne voulons pas que ce soulignement là, alors nous allons rafraîchir. Ils vont adorables maintenant. Je pense que quand tu survoleras, on va vouloir un peu de couleur dessus. Alors refaisons la même règle. Mais cette fois, nous voulons utiliser une pseudo classe appelée Ha va, et nous allons changer la couleur en, Disons juste pour l'instant, orange. C' est une autre façon que vous pouvez définir les couleurs dans CSS en écrivant simplement le nom. Donc, cliquez sur Enregistrer frais et survolez et vous obtenez orange. Maintenant, remarquez comment le logo et les liens s'éloignent vers le bord de la page, alors que dans notre projet final, ils s'assoient un peu à l'intérieur. Donc, pour corriger cela, nous allons cibler notre conteneur, que nous avons autour de tout notre contenu. Je vais écrire ça. Très grand comme un style général, général. Ce sont tous les styles de navigation. Lorsque vous enveloppez quelque chose dans cette neige fondante et étoile, il va le commenter afin qu'il n'affecte pas réellement les styles de votre site Web. Donc, pour le conteneur, nous allons écrire Max avec 1200 pixels et une marge off, zéro en haut et en bas et auto à gauche et à droite, ce qui signifie le diviser également à gauche et à droite, sorte qu'il sera assis au centre. Enregistrez cela et actualisez les sièges annoncés dans le centre. Donc maintenant, on veut juste nettoyer un peu. Ça a l'air plutôt bien. On va se débarrasser de ça. Borda va changer notre front pour un fonds Sand Sarah parce qu'il a ces petits morceaux de décoration en ce moment sur le devant, et nous allons ajouter un peu de rembourrage au sommet de cette image pour qu'elle soit assise plus bas. Alors retournez dans un CSS Onda. Nous allons nous débarrasser de la frontière. Écrivons dans notre général. On veut tout. C' est ce que ce petit Astérix signifie tout pour avoir la famille des groupes de police de forme San Serif sur. Ensuite, nous voulons ajouter un peu de rembourrage orteil notre logo. Donc, nous allons découvrir Logo ici est donc nous voulons Salem caresser, disons, 10 pixels, mais seulement sur le dessus. Donc, c'est une autre façon que vous pouvez écrire haut de rembourrage et ensuite nous allons rafraîchir cela, et cela semble assez bon mais sont toujours terminé. Le projet est légèrement plus large, donc à notre conteneur, le conteneur de navigation, nous allons ajouter un peu de rembourrage sur 10 pixels en haut, en bas à gauche et à droite. Donc, partout a 10 pixels sur va enregistrer cela. Revenez à notre fichier de travail et actualisez. Et voilà. D' accord. Sur la navigation est vraiment bon. Continuons à travailler sur une tête haute. 5. Leçon 3 : Header: Ok, donc sur la navigation est belle. Donc maintenant passons à coiffer et monter le html pour l'en-tête, qui va être cette partie ici avec la belle image de grande fonctionnalité et un peu d' introduction sur qui nous sommes maintenant, tout comme avant, nous sommes va le diviser en une sorte de grille, comme, euh, panne. Donc, vous pouvez penser à cela comme si vous avez ce conteneur externe ici où cette image d'arrière-plan est appliquée et ensuite nous avons un contient interne pour notre introduction , puis la petite flèche qui se trouve juste en dessous. Jetons un coup d'oeil à la façon dont nous écririons le courriel de haine pour ça. Je l'ai écrit pour vous juste pour les malades du temps. Donc, nous allons passer par quelque chose de très similaire à la tête dehors. On a l'extérieur jusqu'à la navigation. Désolé, nous avons la div extérieure, sur laquelle nous avons donné les chiffons. Ensuite, nous avons le conteneur interne pour empêcher le contenu de se propager trop loin , puis à l'intérieur du conteneur. Nous avons, euh, fait pour notre tête de texte avec notre petit texte à l'intérieur et ensuite en dessous de ça sur le même niveau. On a notre flèche. Donc si on dit ça, j'irai dans nos dossiers de travail juste pour vérifier. C' est là. Alors arrêtons de coiffer ça maintenant. La première chose que nous allons vouloir faire est de définir l'arrière-plan pour le avec le chef de section, donc nous allons juste dire arrière-plan et lui donner le chemin pour où l'image va payer. Donc, dans ce cas, nous allons à partir du fichier CSS et dans le dossier image images. Donc, CSS si vous avez un coup d'oeil ici, CSS se trouve dans le dossier Styles, donc nous voulons réellement sauter sur le même niveau de styles et dossiers images, puis revenir à nouveau vers le bas. Donc, revenir en arrière, c'est ce que fait ce petit point ici. Donc, sautez hors de ce dossier, puis revenez dans les images pour trouver de l'espace de travail. J' ai J Peg. Donc, je vais juste appliquer quelques styles de plus. Nous avons donc la couverture de taille d'arrière-plan afin qu'elle couvre toujours la largeur et la hauteur de l'en-tête. Nous avons le centre de position pour que l'image soit toujours centrée sur. Nous définissons la hauteur dans ce cas à 80 vieux port, donc 80% de réduction sur la hauteur du port de vue ou tout ce que vous utilisez pour voir votre site Web. Il va avoir 80 % de réduction sur cette hauteur. Donc, nous allons sauver cela et jeter un coup d'oeil rapide qu'ils considèrent. Nous pouvons voir notre image sur son assise à environ 80% de la hauteur hors de l'écran. Donc, la prochaine, nous voulons mettre en forme ce petit conteneur où nous allons avoir notre tête de texte. Alors on va faire Hedda. Et puis Target avait un SMS, mais il est assis dans la tête sur Andi. Je vais juste faire un arrière-plan avec une valeur RVB A. Donc, c'est une autre façon que vous pouvez définir une couleur en CSS. Et puis le 111 indique que cela devrait être noir, puis le Nord 0,8 à la fin est la valeur a qui dicte ce que doit être le niveau d'opacité . Donc pas 0.8 80% euh, capacité, nous avons la couleur du texte, dit Toe White sur. Nous allons faire de cette petite section un élément de niveau bloc afin que nous puissions définir une hauteur maximale et un esprit maximum pour l'empêcher de trop s'étendre avec le contenu. Nous avons une marge, zéro auto pour qu'il se trouve au centre, puis un peu de tapotement pour qu'il y ait peu d'espace autour du texte et que le texte ne monte pas directement au bord du conteneur. Donc je vais garder ça sur les frais qu'ils vont. Ça ressemble un peu à notre design. Donc maintenant, pour qu'il soit assis verticalement envoyé, nous devons utiliser une propriété appelée Position Now. La position est un peu compliquée, donc je vais vous fournir un lien vers cette page MDM ici, qui vous donne une bonne explication de la position. Propriété. Maintenant, ce développeur point Mozilla dot org MDM What Web docks. Cela a tout ce que vous auriez besoin de savoir sur Haïti montant et CSS dessus afin que vous puissiez simplement utiliser la barre de recherche pour rechercher la propriété dont vous avez besoin. Donc, dans ce cas, nous utilisons la propriété position, et vous pouvez voir ici cela vous donne des exemples de ce que chacun fait. Dans cet exemple nous allons utiliser absolu et relatif afin d'expliquer. Si je clique dessus, vous pouvez voir que si je change cela à zéro, il remonte. Donc c'est positionner cette boîte jaune par rapport à son conteneur, qui est la petite boîte fille ici. Donc, si je n'importe quoi, j'ai changé ça pour le faire par rapport à cette boîte. Alors que cet exemple Ici, il est de voir comment la boîte bleue a déplacé d'ici pour se chevaucher où cette boîte jaune précédemment waas. C' est parce que absolu a retiré cette boîte du flux normal de hey html et il positionne par rapport à ce conteneur, qui serait comme le corps de notre page web. Donc, si je dis top zero, ça ira jusqu'au sommet. Alors, comment cela s'applique-t-il à Allah Petit conteneur ici ? Nous voulons que ce soit au centre, mais nous ne voulons pas qu'il aille jusqu'à la navigation. Donc, c'est un petit truc que vous pouvez faire Donc nous allons utiliser la position, absolue pour le centrer, ce que vous feriez en ayant la propriété absolue de position, que je vais juste commenter ceci. Eh bien, ceux-ci sortent pendant une seconde et diront que pour vous montrer que la position absolue jette tout le chemin ici, sort du flux normal, ce que nous ne voulons pas maintenant Way que nous pouvons corriger c'est en allant en haut niveau dans la tête et en fait mettre la tête comme une position relative. Et ça empêchera son enfant de sortir de la tête du conteneur. Alors, voilà. Maintenant, pour le faire asseoir verticalement centre ainsi que horizontalement centre. Nous allons faire la position en bas à gauche, droite et parler tout zéro pour qu'il le tire dans toutes les directions. Donc, si je dis qu'il est tiré dans toutes les directions et finit par être assis au centre de la page comme nous le voulons. Donc ça a l'air assez bien, sauf que j'ai orthographié développeur mal, donc bien, réparer ce développeur de Devel. Ok, alors maintenant on veut s'occuper de notre flèche. Donc, la première chose que nous allons faire est d'aller aux images et obtenir la porte flèche spg que j'ai fourni pour vous, que vous pouvez simplement mettre en surbrillance et copier dans votre fichier d'index. Un SPG est un format de fichier pour quatre images, donc nous allons simplement copier cela dans Andi. Nous sauverons ça et nous vérifierons si c'est parti là-dedans. Il a l'air beau maintenant pour l'avoir assis au centre, nous allons faire du style. J' ai eu, euh oups, disons la tête et ensuite, euh, Avera, que nous avons dirigé Arrow. Et puis nous sauverons cela et dirons Position absolue en bas. Disons 40 pixels du bas. Donc, cela va le faire assis au fond du conteneur puis pour le faire assis au centre. En fait, on va aller Teoh, remonter à notre tête. Un conteneur allumé. Nous allons définir le centre d'alignement du texte. C' est un hack que vous pourriez utiliser sur les images dans les conteneurs que vous allez et maintenant assis dans le centre, puis vous allez la partie supérieure de nos pages Web déjà fait. Maintenant, j'aimerais voir votre travail en cours dans la section du projet ci-dessous cette vidéo, alors assurez-vous de créer un projet et d'envoyer ces captures d'écran des sièges de ce que vous avez fait jusqu'à présent. J' adorerais vous voir le personnaliser. Fabriqué avec votre propre logo. Votre propre texte d'introduction votre propre tête d'image, tout ce que vous voulez est la tête vers le bas vers les projets. Et en fait, vous le gardez à jour tout au long. Ce cours est que tout le monde peut voir ce sur quoi vous travaillez. Et, bien sûr que vous avez des questions. Assurez-vous de joindre la communauté. 6. Leçon 4 : portfolio: Ah, la navigation d'en-tête a l'air super. Passons maintenant à la section portfolio de notre site Web. C' est là que nous allons montrer le travail que nous avons fait qui pourrait être des projets de développement Web . Ça pourrait être ta photographie. Ça pourrait être des cours de cuisine. Tout ce que tu veux. Tu pourrais en faire la vôtre. Jetons un coup d'oeil à notre projet d'arrivée d'abord pour que nous puissions voir ce que nous allons faire . C' est la section sur laquelle nous travaillons maintenant. Nous allons avoir nos quatre petites tuiles pour chacun de nos projets avec une récolte huit avec une description de ce que l'entreprise est et ce que nous avons fait pour le projet. Maintenant, si nous y réfléchissons à nouveau en termes de grille, nous allons avoir notre rappeur externe notre conteneur, pour empêcher qu'il ne devienne si large. Ensuite, nous allons aussi avoir un sous-conteneur qui va le diviser en 50 % de largeur pour chacune des tuiles. Mais comme vous pouvez le voir, la tuile elle-même n'était pas 50% de large, donc nous allons aussi avoir un autre petit Dave à l'intérieur de ce conteneur pour définir la largeur fixe , donc nous allons passer par le HTML maintenant. Alors allons dans notre fichier HTML. Ondas habituels. Nous avons un rappeur et je vais conteneur et puis je vais juste créer un sous-conteneur, conteneur d'article froid, conteneur abrégé, droit, droit, actif et à l'intérieur de ce conteneur. Je vais juste écrire l'automne pour l'instant et en créer quatre pour que nous puissions voir comment il va être aménagé. Donc, nous allons entrer dans un CSS et nous allons définir Let's Go Portfolio. Donnons au portefeuille un peu de rembourrage afin que nous ayons un peu d'espace à partir des en-têtes. Disons que 40 pixels arrêtant le zéro inférieur sur le côté parce que nous avons notre conteneur pour le faire puis un autre niveau vers le bas conteneur d'article de portefeuille. Donc disons, disons, en rembourrant 40 pixels sur celui-ci aussi. Mais alors nous allons définir la largeur comme étant de 49,7 % et vous verrez pourquoi je l'ai fait dans un instant, parce que lorsque vous avez des éléments de bloc en ligne assis l'un à côté de l'autre, ils ne sont pas en fait assis 50 50. Il y a un peu d'espace entre maintenant. Il suffit de définir une bordure pour l'instant afin que nous puissions voir les bords. Jetons donc un coup d'oeil dans nos fichiers de travail. Ça n'a pas marché parce que j'épeautre a mis la folie que je me trompe. Bon sur May Port Folio Fermer ce et avoir un autre look. On y va. Pour que vous puissiez voir ceci est notre grille. Comment allons-nous mettre en place nos articles ? Je pense que je vais changer cela en une marge pour que nous ayons de l'espace à l'extérieur plutôt à l'intérieur. Voilà, tu y vas. Il y a un peu d'espace. Donc, mais comme je l'ai dit sont article de portefeuille mal n'est pas en fait 50% d'esprit. Ça va fixer la largeur et la hauteur. Si nous descendons un autre niveau au portefeuille Isom Container et puis disons vente aux enchères de portefeuille va créer la raideur. Maintenant, vous dites que l'intérieur de notre conteneur d'article Div Dave classe portefeuille article sur va coller. Je vais écrire à l'intérieur de cela et puis nous allons définir notre avec 2 450 pixels et toute la hauteur à 450 pixels. Et mettons-nous aussi un arrière-plan pour qu'on puisse voir où ça va se terminer. Je vais utiliser, euh sur un p I de Splash dot com. On splash est un site Web où vous pouvez obtenir des images de très haute qualité que vous pouvez utiliser gratuitement sur votre site. Je laisserai un lien vers le site dans la description. Disons ça et jetons un coup d'oeil. Magnifique. Ok, alors mettons-nous quelques styles. Amené arrière-plans qu'il se trouve étant tasse de taille et dans le centre. Ensuite, nous voulons également que cet article de portefeuille soit placé au centre de notre conteneur. Donc, disons, disons taille de l' arrière-plan de la couverture du centre de la position de l'arrière-plan. Eh bien, je ne peux pas taper aujourd'hui vous allez, et nous voulons aussi nos articles de portefeuille de largeur et de hauteur fixes au centre. Donc nous allons dire zéro aussi vous allez, qui a l'air mieux. Alors commençons maintenant à coiffer notre description. Tous les portefeuilles Adam description. Donc, nous voulons d'abord droite en quelque sorte html pour cela. Alors commençons par diff avec la classe. Mais complètement je description. Et puis à l'intérieur de cela, nous allons avoir du texte qui est enveloppé sur une balise afin que j'utilise puisse cliquer sur les projets que vous dites. Et puis je vais juste utiliser des balises de paragraphe pour dire quel est le nom du projet et un peu de description sur le travail que nous avons fait sur le projet. Donc ce projet s'appelle Harries Pizza sur pour ce projet. On a fait la conception et le développement du Web, donc je vais copier les trois autres juste pour le temps. On y va. On a Joe's Bakery, fleuriste de Pam, sur la photographie d'Olivia. C' est juste vérifier que tout se passe. Oui, cool. Ça a l'air bien. Alors maintenant, nous voulons mettre un fond noir et styliser ce texte. Donc, disons Folio, un de ces jours, je vais l'épeler correctement, mais l'élément d'échec contient sur, Disons, description du portefeuille. Donc, vous allez définir l'arrière-plan avec RVB une nouvelle fois sur. Nous allons le définir pour qu'il soit noir avec 80 % de capacité. Nous voulons la couleur hors du lien. Nous devons aller une couche de plus jusqu'à la longueur. Nous voulons que la couleur soit ce que nous voulions avoir Onda, disons, rembourrage de 20 pixels en haut et en bas et 10 pixels à gauche et à droite. En fait, faisons-le dans l'autre sens autour de 10 pixels. Stilton bas 20 pixels à gauche et à droite, c'est rafraichir aller. Donc, nous voulons juste se débarrasser du sous-jacent rapidement. Qu' est-ce qui se débarrasse de la décoration Underline Ex ? Aucun. Ok, donc maintenant nous voulons créer des effets de vol stationnaire. Donc nous voulons que cette description soit tout le chemin ici assis sous Al Container. Donc nous allons utiliser la position Absolue pour ça, comme nous l'avons fait avant. Nous allons avoir besoin de mettre la position relative sur le conteneur d'article. Alors écrivons ça ici. Positionnez les parents de sorte que tout, sauf entièrement, notre description de portefeuille ne va pas se répandre et aller jusqu'au haut de la page. Disons en bas. On voulait s'asseoir sous le fond du conteneur. Donc disons moins 130 juste pour voir cool. C' est un peu trop loin vers le bas, Donc nous allons dire 110 et allons régler la largeur à 100% pour qu'il reste frais. Fouet a l'air si la largeur est allé trop loin. Et la raison en est que j'ai mis la position relative ici sur le conteneur d'article par accident, ce qui aurait dû être en fait sur les articles de portefeuille. Donc 100% pour la description du portefeuille est en fait réglé à 50% de la page. Cela va le faire descendre d'un niveau. On va le poser ici. Et ça devrait résoudre notre problème. Oui. Bien. Ok, alors maintenant, faisons la moisson. Huit. Donc, ce que nous voulons atteindre, c'est que lorsque nous survolons l'élément du portefeuille, les descriptions de portefeuille devraient passer à une entrevue. Donc, disons qu'on va aller ici et qu'on va bien. Description du portefeuille, hein ? Donc, sur le survol appliquez ce style pour mettre une description plus complète. Donc, pour le faire remonter la page, on va utiliser une marionnette. Il a appelé ah, transformation de tendance, qui a beaucoup de valeurs différentes, y compris l'échelle de rotation, perspective. Nous allons utiliser traduire, traduire des mouvements, déplacer votre élément autour d'un axe X et un axe y. Donc, dans ce cas, nous allons monter et descendre l'axe Y, et nous voulions déplacer moins 110 pixels. Je pense que ça devrait être bon. Alors quel set ? Rafraîchissons ainsi sur le port. Ok, peut-être pas d'espoir. l'ai encore fait pour leur aisam. Plus frais, dit-il, donc ça saute en interview maintenant. On ne veut pas vraiment être visible quand on ne le survole pas. Donc, sur l'article de portefeuille ici, nous allons écrire Overflow Hidden, qui signifie que tout ce qui se déverse à l'extérieur de ce conteneur va être caché frais. Voilà, tu y vas. Il a disparu et il semble beau. Maintenant, c'est un peu coupable de s'allumer et de s'éteindre comme ça. Alors mettons une transition dessus pour que Ah, effet de vol stationnaire soit un peu plus lisse. Ups dira transition. Je voulais faire une demande de traduction. Je voulais pas prendre 0,4 seconde pour terminer, et nous allons utiliser et faciliter l'effet que je vais faire. Cela va se produire quand il sera en vue, mais nous voulions aussi se produire quand il sort de vous. Mettons-le sur la description normale du portefeuille aussi. Ce qui est frais veut vraiment que cela soit transformé parce que c'est le nom Transform. Tu vois, le développement est le taureau de faire des erreurs et de résoudre des problèmes. Ok, donc ça s'applique en sortant. Non, sur le chemin. Et c'est parce que nous n'avons pas eu de transformation. On y va. Ça a l'air beaucoup mieux. Ok, alors enlevons la frontière de nos conteneurs Nous n'avons plus besoin de cela, et nous voulons le mettre en place pour que nous puissions avoir une image différente pour chaque tuile pour chacun de nos projets. Allons trouver cette frontière. Il est là. On va s'en débarrasser. Et ici, sur les éléments de portefeuille où nous établissons le contexte, nous allons écrire quelques causes spécifiques, mais chacune sur les entreprises. Donc, d'abord, allons dans HTML et allons réellement définir ces classes sur l'élément de portefeuille. Déf. Disons une pizza. Harry's Bakery for Boots Bakery pour Jurors Bakery, euh , fleuriste de Pam sur Et, bien sûr, photo. La photographie de Will Olivia. Je vais juste copier dans ces cours juste pour l'amour de la vitesse. Maintenant, vous remarquerez sur le niveau de l'article foliaire. n'y a pas d'espace entre les clauses spécifiques. Et c'est parce qu'on ne veut pas ça. On ne veut pas descendre d'un autre niveau. Nous voulons rester sur les articles de portefeuille, mais nous voulons seulement sélectionner l'élément de portefeuille qui a ce Kloss spécifique. Alors disons ça et vérifions. Ça a bien fonctionné. Cela a fonctionné les trois sur quatre, donc c'est probablement encore un autre type de mai. Il semble donc que la boulangerie est au mauvais niveau. C' est pour ça que nous avons un double whammy où il nous manque un espace. Donc c'était la mauvaise chose. Ils y vont, c'est tout. Image de boulangerie. Maintenant, c'est autant que frustrant. C' est le développement Web. La plupart de vos problèmes vont venir. La plupart de vos problèmes vont provenir de fautes de frappe stupides et d'erreurs stupides. Alors assurez-vous de passer avec un peigne fin avant d'abandonner et de dire, Oh, c'est trop dur parce que, comme on l'a vu aujourd'hui, j'ai juste un de ces jours où je ne peux pas épeler quoi que ce soit au coût est juste. Et parfois, vous aurez juste des jours comme ça, tout comme May. Qu' arrive-t-il au meilleur d'entre nous ? Ok, donc ça a l'air plutôt bien. Je pense que nous en avons assez fini. Vous pensez peut-être, Et Mobile House va fonctionner sur un mobile ou une tablette ? Ne stress pas trop. Nous allons avoir une leçon dédiée vers la fin de ce cours où nous allons venir dans les questions des médias et la mission en dehors de responsive. Je ne veux pas vous accabler avec trop d'informations différentes au début de ce cours. Mais, je veux dire, on a fini à mi-chemin. Nous n'avons plus qu'à partir de la section Contact. Alors continuons à aller de l'avant. Et, bien sûr, assurez-vous de poser toutes les questions ci-dessous. 7. Leçon 5 : à propos: nous avons également près de terminer un projet Super bon travail. Si vous êtes toujours ici à travailler avec moi, les deux dernières sections devraient vraiment être braisées avec toutes vos nouvelles compétences e-mail de hachage et CSS que vous obtenez tout au long de ce cours. Mais bien sûr, si vous êtes coincé, assurez-vous de contacter la communauté et de mettre à jour votre projet. Montrez-nous sur quoi vous travaillez. Donc, pour la section à propos, c'est là que nous allons raconter un peu toute l'histoire et montrer qui nous sommes tous. Nous avons donc une mise en page à deux colonnes sans image sur la gauche et du texte sur la droite. Et donc, tu sais, frapper Shia Mel, nous allons commencer par ah, standard Rapa Kloss avec la réparation avec Kloss, notre conteneur pour garder tout contenu. Et puis nous allons créer deux donne pour séparer toutes les colonnes. Donc, le 1er 1 va être appelé conteneur d'image de profil. C' est là que va aller notre petite image de nos visages, Andi. Ensuite, en dessous de cela, nous allons avoir un fait pour le conteneur de texte de profil. Vous l'avez fait dans Ah, conteneur d'image Nous allons inclure une étiquette d'image comme nous l'avons déjà fait avec une vieille étiquette disant que c'est ah, image de profil. Oui, et ensuite la source. Parce que nous sommes dans le fichier d'index, comme avant. On va faire des images. Alors si nous cuisinons en images, nous pouvons voir que nous avons un profil. P et J ont absolument remplacé cela par une photo de votre propre visage. Je vais dire que dans notre conteneur de texte on va écrire avec le titre de la section. Je vais dire que dans notre conteneur de texte on va écrire avec le titre Mais bien sûr, vous pouvez mettre ce qui vous manque ici et ensuite je vais avoir un peu de Laura MSM ,que je vais copier, , et maintenant ça va juste remplir l'espace pour nous pour le moment. Alors jetons un coup d'oeil sur un fichier de travail. Actualisez la page. Le regard que notre section sur l'image n'est pas tout à fait chargé, et probablement nous allons jeter un coup d'oeil à ce qui se passe ici. Alors où dans le fichier d'index nous voulons aller dans les images et ensuite j'ai le profil, pas PNG. Jetons un coup d'oeil, mais notre logo est le même, euh, des atouts. J' ai oublié d'aller dans le dossier des actifs. vois, je fais ça depuis longtemps, et je fais encore ces six. Ok, ça devrait arranger ça. Jetons un coup d'oeil. Fraîche, c'est le visage. Ok, donc la première chose que nous allons faire est de séparer notre contenu dans les deux colonnes, donc nous allons dans un fichier CSS et nous allons cibler le conteneur d'images sur le conteneur de texte. Alors allons-y. Je viens de créer une section pour nos styles. Allons-y, je vais coller et tapoter là-dedans. Donc nous allons espacement de ah, section perdue andi aussi une couleur de fond, qui va être une valeur hexadécimale à nouveau. Tu y vas. Et puis nous allons cibler le conteneur d'image de profil. Nous voulons que la largeur soit rayée. C' est un 30% voulu afficher en baie dans le bloc de ligne. Je vais juste mettre une frontière autour de ça pour qu'on puisse voir où ça se termine pour la minute. Comme toujours allumé. Et rappelez-vous que souvent notre image sortira du côté du conteneur si nous n'avons pas vraiment, euh, restreint. Donc je vais créer une image de profil, que nous allons utiliser sur notre taxe sur l'image tout ça ici pour des cerceaux d'images viles que nous allons économiser sur. Je vais faire le maximum avec cette image comme étant un 250 pixels. Mais si l'écran est inférieur à George et que 50 pixels voudront qu'il remplisse l'espace pour, disons , 100% Ok, , 100% Ok,regardons. Maintenant, bien sûr. Nous voulons également cibler la colonne de texte. Donc, disons conteneur de texte violet. Nous voulons que ça prenne le reste de l'espace. Alors faisons ce 39% en fait pour qu'il soit presque 60 40. Se souvenir de cet affichage en ligne Block a besoin d'un peu d'espace supplémentaire entre les deux conteneurs, et nous allons faire ces deux éléments de bloc en ligne dans le bloc de ligne sur celui-ci. Collez une bordure sur celle-ci pour qu'on puisse la voir. Ok, regardons comment ça a l'air cool. Ça a l'air plutôt bien. Ok, maintenant, ces images bloquent le texte pour une raison quelconque. solution rapide pour cela est d'aller dans notre conteneur de texte, et nous allons juste appliquer float droit, ce qui va le sortir de l'ordre habituel et il va le pousser jusqu'au sommet que vous allez maintenant, dans notre projets finis, cette image est ronde et elle est assise plus vers la droite. Donc pour y parvenir, on va aller dans un cours d'image de profil et on va écrire Border Radius. On va lui donner une valeur de 50% dans le conteneur de l'image. On va utiliser tout le texte seul, non ? Il fonctionne également sur les images. Ils y vont maintenant, des images assis sur la droite. Je pense que l'étiquette de golf de puissance semble un peu trop large, bien que je sois un peu trop proche de l'image. Donc je vais mettre un maximum de fouet sur le paragraphe, et je vais aussi mettre un peu de rembourrage de ce côté. Donc, disons, heu, tête, direction gauche les 40 pixels sur le conteneur, puis à l'intérieur du conteneur. Monsieur. 12 dossier. Oups, conteneur de texte Gro File. La balise P, je vais dire, et la largeur maximale de 500 pixels brosse qui semble mieux. Ok, débarrassons de ces frontières et pensons que ce sera fait. Sauvez-le sortira. Comparons-le rapidement à notre projet fini qui semble assez bang le 2 mai. Passons donc à la section perdue, qui est la section de contact, et on est si près d'être fait, Continuons. 8. Leçon 6 : Contact: nous en sommes à la section perdue. Heck, ouais. Maintenant cette section, je veux dire, regardez-la. Comparé à tout ce que tu as construit jusqu'à présent, ça va être un attelle. Alors allons juste y entrer. Donc on va commencer par. Ah, d'habitude. On va mettre un cap là-dedans pour que tu puisses saluer, mettre ce que tu veux. Je vais juste coller le contact là-dedans un petit paragraphe pour qu'on puisse dire Ok , Ho, viens parler à May. Je vais juste mettre de l'ipsum de Laura dans le Who, et sous ça, on va avoir un cerf pour contenir toutes nos icônes sociales. Maintenant, je vais tricher un peu ici, et je vais te faire entrer dans les dossiers finis du projet. Nous allons aller dans notre projet fini et cliquer sur l'index, et nous allons faire défiler notre chemin vers les icônes sociales. Ceux-ci sont pleins des SPG que vous allez utiliser pour vos icônes sociales, et ils sont juste enveloppés dans un lien qui a vos poignées sociales. Vous pouvez donc les remplacer par vos propres liens. Alors descendons et copions. Je vais mettre quelques liens avec votre projet d'où vous pouvez trouver des icônes sociales et juste des spg généraux que vous pouvez utiliser dans vos projets parce que vous devez être vraiment prudent avec le copyright. Vous ne voulez pas finir par avoir des problèmes pour utiliser des icônes sociales que vous n'êtes pas autorisé à utiliser. J' ai donc mon if pour les icônes sociales. Nous avons un lien avec un lien vers, euh, profil. Nous avons une classe pour l'icône sociale sur la cible avec un blanc de l'école. Maintenant, ça veut juste dire que quand tu cliques sur ton lien, ça va s'ouvrir dans un nouvel onglet au lieu du haut dans lequel tu es. Disons que cela va dans un fichier de travail et rafraîchir comme notre contact semble assez bon. On veut juste que ce vieux soit centré. Nous voulons orteil, réduire un peu la largeur, avoir un désordre avec ces icônes, voir si nous pouvons nous débarrasser de cette petite ligne noire ici. Ok, alors allons à notre CSS créer une nouvelle section contacts sur. Nous allons commencer par ajouter quelques caresses comme moyens de le séparer de ce qui précède dira, 80 pixels zéro Juste comme avant. n'y a pas d'arrière-plan ou quoi que ce soit là-dessus. Alors passons à Well, appliquons. En fait, vous le savez, mais fournir le texte aligner apparaît prend lang cente. Nous voulons en fait être en mesure de réduire la largeur de cela. Donc, je vais vraiment ajouter ici pour envelopper notre texte. Je vais en ajouter un autre. Je vais en fait ajouter un autre div avec le conteneur de texte de contact de classe éliminer Looks. Voilà, tu y vas. Fermez ça et copiez en bas jusqu'ici, les gars. Qu' est-ce qu'il y a avec mon orthographe aujourd'hui ? Tu vois l'erreur ? Vérifié ? Quoi ? Qu' est-ce qui ne va pas chez moi ? Ok, donc en utilisant le conteneur de texte de contact, on va, euh, réduire le vent maximum. Donc, nous allons voiture que dans le conteneur tactique ici dira une largeur maximale de 700 pixels. On va dire Ma jin, donc tu sais aussi que ça se trouve au centre, alors jetons un coup d'oeil à ce que ça ressemble. D' accord, ça a l'air plutôt bien. Droit ? Jetons donc un coup d'oeil à ce qui cause ces petites lignes. Allons dans nos outils de développement va cliquer jusqu'à spg. Tu vois ce que c'est ? Qu' est-ce que nous avons fait sans étiquettes tout le chemin à travers la décoration de texte ? Aucun. Parce que nous avons une étiquette enveloppant Rs PGS. Donc si on applique ça à tous les huit tags dans, euh, social, je vais nous dire, Hey, nous allons dire décoration de texte aucun qui devrait disparaître et nous allons devenir beaux. Mettons un peu d'espacement, cependant, entre ces SPJ parce que je regarde dans un peu serré le moment. Donc, pour ce faire, je vais faire des icônes sociales. Mais je vais juste cibler le social, cette icône sociale singulière, et je vais mettre une marge. C' est un 10 pixels de chaque côté. Désolé. Faisons zéro sur le haut des 10 pixels inférieurs sur. Vous décidez et vous actualiserez. On y va. Comparons ça. Teoh a fini le projet. Pensez peut-être que nous avons besoin d'un peu d'espacement sur le dessus des icônes sociales, mais c'est tout. Alors allons-y. Icônes sociales. Mettons un peu de bêtises. Il est mis un peu de, hum, AJ, disons 20 pixels de marge en haut du bas et économisez ça, je pense un peu plus. Disons que 40 20, c'est mieux. Oui, Cool. Les gars, écoutez, on a fait un site web. À quel point ça fait du bien ? Oui, 9. Leçon de partie 1 : rendre notre site réactif: maintenant, la dernière chose que nous allons traiter sur ce site Web est de donner des conseils sur questions des médias et sur la façon de faire en sorte que votre site soit réactif sur la bonne apparence. Tous les différents types d'appareils allaient également faire juste un peu de nettoyage de code pour s' assurer que la prochaine fois que vous venez travailler sur ce site Web ou un autre développement, fonctionne constamment sur ce site Web. Ça a l'air bien. C' est propre. C' est facile à comprendre. Jetons d'abord un coup d'oeil dans les outils du développeur de crime sur On va aller Teoh. Utilisez le mouvement de glissement, auquel vous pouvez accéder en définissant votre conversation comme étant sur la gauche ou la droite sur. Vous verrez que si vous faites défiler vers la gauche ou la droite, vous obtiendrez un peu de pixel, une petite boîte indiquant le ratio de pixels de votre site Web. Maintenant, une requête multimédia est un moyen de dire au navigateur quels styles vous voulez charger à quel point de rupture ? Ah, point de rupture étant un mot tout à fait littéralement, pour décrire où vous êtes conçu pauses. Donc, si je réduit ah, point de décomposition à ce qui serait autour d'une taille de tablette, vous pouvez voir que je vais mettre section Folio. Le design se brise parce que nos images ont une largeur fixe et des hauteurs de 450 pixels, mais c'est supérieur à la largeur de notre appareil. Ils commencent donc à se chevaucher. Donc, c'est un endroit parfait où nous créerions un point de rupture ou dans une requête média pour décrire au navigateur que nous ne devons pas décrire au navigateur que nous ne voulons pas qu'il reste comme ça. Nous voulons appliquer des styles différents. Maintenant. Je suis sûr que vous savez que ces jours-ci, la majorité des utilisateurs accèdent à Ah, l'Internet via des appareils mobiles. Nous devons donc nous assurer que nos styles sont écrits d'une manière mobile d'abord. Donc, la façon dont nous allons le faire est que nous avons déjà tous nos styles que nous avons écrits, et nous avons réellement construit cela à une taille de bureau. Donc, nous allons supposer que tous ces styles fonctionnent sur mobile, et si ce n'est pas le cas, nous allons faire des ajustements pour qu'ils fonctionnent sur Mobile d'abord, puis au bas de la section que nous allons créer et requête multimédia pour et disons au minimum avec 768 pixels de désactivation, ce qui serait à peu près un iPad en mode portrait sur. Donc tout ce qu'on ne veut pas arriver sur mon ballon, on va mettre ici. Donc, disons par exemple, que nous voulons que l'arrière-plan l'indique tel qu'il est sur mobile. Nous voulions donc être violet, mais nous voulons que le fond de navigation soit jaune. Donc, revenons dans les fichiers de travail et actualisons, et vous voyez que la navigation devient jaune parce que l'extérieur est a un esprit Gracia que tous les points de rupture. Mais si nous passons à ce que nous appelons le site mobile ou un appareil plus petit, c'est qu'il revient à être violet, donc nous ne voulons pas vraiment que la navigation soit jaune, alors nous allons nous en débarrasser. Mais nous voulons apporter quelques changements. Alors passons à ce qui serait assez standard, ma taille de balle, disons 375 pixels. Vous pouvez voir que le logo sur les éléments de navigation ne correspond pas tous sur la même ligne. Donc, si nous sélectionnons notre logo dans nos outils de développement. Donc, sur le logo de navigation, nous pouvons jouer et voir ce que nous pouvons faire à ce logo. Peut-être le faire petit. Voyons si cela aide à voir qu'il commence à se connecter à la ligne suivante. Donc, je pense que 1 50 semble assez bon sur mai sera augmenter le rembourrage ainsi afin qu'il se trouve au même niveau que les éléments de navigation. Alors copions ces styles, et nous allons filmer aller jusqu'à un logo de navigation. Notre règle à ce sujet est ce que nous voulons pour le bureau. Donc, nous allons coller sur les styles lowball dans, et nous allons en fait découper les styles de bureau et les mettre dans une nouvelle classe de logo maintenant ici. Donc, cela sera appliqué sur tout ce qui est plus grand qu'un appareil de 768 pixels de large. Alors nous allons rafraîchir, et ça devrait rester le même. Mais quand on monte, en haut, en haut, en haut, en haut, jusqu' à 700 sur 68, tu as vu ? Il devient de plus en plus petit autour de ce point de rupture Maintenant, j'ai repéré avant un peu d'un problème avec cette époque, je pense que la conception globale de la tête de fonctionne bien sur ma balle, mais ces flèches ne sont pas vraiment assis parfaitement au centre. Donc on va retourner dans toutes les flèches. Kloss. Andi, rappelez-vous, j'ai mis le texte aligner le centre sur l'image à, ou c'est sur la tête du conteneur, mais ça affecte l'image. Mais c'est évident que ça ne marche pas. Donc, sauvegardons et débarrassons du texte le centre de la ligne. Et nous allons utiliser la règle A 50% gauche pour l'envoyer au centre. Mais cela va en fait pousser un peu trop loin. Donc, on va en fait aux pieds. Utilisez également une marge négative sur la gauche de 25 pixels pour le ramener au centre. Alors vérifions ça. Ça a l'air bien mieux au centre. D' accord. Maintenant sont l'élément du portefeuille. Je veux dire, ça n'a pas l'air si mal pour le moment, n'est-ce pas ? Mais si nous allons réellement dans nos outils sourds ici, vous pouvez voir que le conteneur de l'article est toujours à côté de près de 50% mais notre image se répand hors de lui. Donc couvercle sont des images qui déversent hors de lui, ce que nous ne voulons évidemment pas Mais nous ne voulons pas non plus contenir l'image sur Give it , disons , a, disons,une largeur de 100% parce qu'alors il devient vraiment petit sur un mobile périphérique. Donc, ce que nous allons faire en fait, c'est que nous allons Teoh, faire en sorte que chacun des conteneurs d'article ait une largeur de 100% sur un appareil mobile. Allons donc dans notre section portefeuille. Andi, nous avons avec 49,7% sur les vieux navigateurs pour le moment, mais nous allons en fait couper ça et mettre la largeur 100%. Donc, sur nous tous les petits appareils, ce sera 100%. Et puis en bas, nous allons créer une requête multimédia en plein écran et les hommes avec oh, convient aux hommes avec 768 pixels. On va brancher notre règle. Quel était notre nom de classe, articles de portefeuille, conteneur isons. Et nous allons mettre la taille de nos browses avec eux, alors jetons un coup d'oeil à ce que ça ressemble. Donc le conteneur d'article est assez large maintenant, mais si nous descendons à nos trois 3 75 points de rupture, il en fait l'image est encore beaucoup trop grande, donc nous allons vraiment devoir réduire le maximum d'image avec et chaud aussi. Donc cette hauteur et cette largeur vont devoir descendre. Donc, disons que nous allons trouver la classe sur laquelle nous avons notre hauteur et notre largeur réglées. On a tout le café Ausubel et on redescend. Et donc notre largeur et la hauteur actuelles sont pour 50 comme se souvient. Donc 50 pixels mettent la hauteur pour 50 pixels. Mais sur nous tous les petits appareils, faisons 250. Ok, vas-y. Ça a l'air beaucoup mieux. Certifiez, augmentez mon point de rupture jusqu'à l'endroit où il s'insère dans la version plus grande. Donc je pense que nous voulons vraiment que vous voyez comment, à ce stade, il se chevauche toujours. Donc, nous allons en fait diviser parce que nous voulons nous mettre à 100% avec un peu plus tôt. Mais nous voulons réellement qu'il réduise en hauteur et en largeur un peu plus tard, parce qu'en ce moment, à ce point de rupture, cela semble vraiment petit. Jetons un coup d'oeil à notre point de rupture. Donc je pense que, pour la hauteur et la largeur, nous voulions vraiment casser à environ 950 pixels tellement plus haut. Mais je vais en fait prendre la largeur et la hauteur de cette requête multimédia, et je vais en créer une nouvelle plus bas. Donc, à une faible, euh, largeur. Donc, je vais dire et les hommes esprits 550 pixels. Et j'ai mis ça là-dedans et voyons si ça aide. Donc, à partir de 550 pixels, nous voulons que la taille change. Et puis on va continuer à monter, à monter, à monter. Et puis il va s'enfoncer dans 50% fouet à 950 pixels. Alors où en sommes-nous maintenant ? Nous sommes autour de 650 donc nous allons frais afin que nous puissions voir que notre image est un bon esprit jusqu'à 5 50 ce qui, je pense, semble plutôt bon. Maintenant, vérifions où notre grille se met en deux colonnes, alors continuons Amega. Il s'enclenche à être deux colonnes 10. Leçon de partie 2 : Rendre notre site réactif: Maintenant, la dernière chose que je veux faire sur portefeuille est en fait tout le chemin vers le bas chez Mobile. Pouvez-vous voir comment ah petit effet de vol stationnaire est en quelque sorte de piquer le fond ? Donc je vais juste changer le sur le même que tous les bonjour et tous avec. Je vais juste ajuster ce bas pour qu'il soit un peu plus bas. Alors nous allons obtenir une copie de la règle. Faisons-le asseoir 115 pixels au lieu de 110. Et puis à l'intérieur de cette requête média, nous remettrons l'arrêt mort à ce qu'il a été si bas moins 110 pixels. Donc 115 n'a pas l'air assez lent. Et que diriez-vous de 100 ? Disons 25 juste pour être en sécurité. Ça va le faire ici. 25 Ok, donc maintenant ça a l'air assez bien. Alors passons à la section et vous pouvez voir que c'est juste un gâchis. Ce n'est pas bon. Donc, nous voulons mettre 100% de l'esprit sur nos deux colonnes, et nous voulons tout rendre agréable et parfumé. Alors faisons ça. Passons maintenant à la section à propos et nous avons notre UIT en cours de définition sur le conteneur d'image de profil et aussi sur le conteneur de texte. Donc, nous allons créer une autre requête média à l'écran multimédia et les hommes avec, disons, 768 pixels il est allumé. On va mettre notre classe là-dedans. Je vais dire 100% maintenant parce que nous voulons le conteneur d'image et aussi le contenu du texte sur les deux. Sois à 100%. Vous pouvez les changer comme ça en mettant un coma et ensuite en mettant les autres chiffons sur la ligne suivante. Et si vous enregistrez ce cours sur les groupes, cela n'a pas fonctionné car ce sont les styles de bureau. Alors avons cette règle ici. On va l'écrire diff. Ok, donc ici, on ne veut pas qu'ils changent, donc on va faire 100%. Et puis, dans notre requête immédiate, au lieu de les enchaîner, nous les séparerons à nouveau parce que nous voulons qu'ils soient différents. Donc, disons 39% avec celui-ci et 100% d'esprit pour celui-là. C' est frais. Cool. Maintenant, rappelez-vous, cela a l'air un peu bizarre parce que notre image est obtenu du texte, aligner à droite et cela est flottant. C' est pour ça que ça sort de notre conteneur. Alors, changeons ça. Donc on veut sur mes intestins. Nous voulons envoyer un texto au centre de la ligne. Image brute sur le bureau. Nous voulions garder le texte aligné sur et pour notre conteneur de texte. On ne veut pas qu'elle soit flottée sur ma balle, mais on veut qu'elle soit flottée sur ouiesto. Donc, disons que nous flottons à droite et que nous avons aussi cette largeur maximale ici. Je ne veux pas que ça se produise sur ma balle, donc on va tout simplement le couper de ma balle et on va le mettre dans une section de bureau . Alors allons avoir un regard qui a l'air mieux. Faisons tout le texte envoyé. Donc, disons que nous voulions rester la ligne de texte juste sur le bureau car il est maintenant hors sorte de gauche comme il est maintenant. Et bien sûr, l'ayant laissé a besoin de rester que Donc disons 40 pixels tels qu'ils sont. Mais on va réduire ça dans les jardins de bière, dire la ligne envoyée de ma bile. Jetons un regard qui semble mieux donc ce qui se passe quand on monte. En haut, en haut. Eh bien, et on s'est cassés. Ça a l'air plutôt bien. Ah, mais rappelez-vous, nous sommes arrivés à un point où nous avons fixé une largeur maximale sur notre paragraphe. Ah, mais maintenant c'est cassé, et il ne flotte plus, donc on n'a rien fait, non ? Donc tout ce que je suis un plein. J' ai écrit 100% ici quand il devrait être 60 ans. Je suis sûr que vous avez vu ça, et je n'ai pas bien fait de crier sur vos ordinateurs. Ok, cool. Ça a l'air beaucoup, beaucoup mieux. Alors vérifions que ça s'enclenche et que ça a l'air bien, d'accord ? Et je vous contacterai. Je veux dire, je vais contacter est une mise en page assez simple. Donc, sur notre site Web est maintenant réactif. Maintenant, bien sûr, il y a beaucoup d'autres façons d'utiliser les requêtes multimédias. Vous pouvez faire des choses comme définir un esprit maximum. Vous pouvez créer un style spécifique pour le moment où un utilisateur souhaite imprimer votre site Web. Donc, je vais, bien sûr, laisser un lien pour vous vers la documentation mdn pour les requêtes des médias sur il y a beaucoup là-bas. Vous pouvez avoir une lecture à travers dans votre propre temps. Et comme vous construisez vos propres projets, bien sûr, si vous pensez à un cas d'utilisation. Avoir une lecture à travers ces documents et voir si vous pouvez comprendre ce qu'il est que vous avez besoin . C' est la dernière touche que je veux faire pour notre site web est de relier toutes les sections . Nous avons donc notre petite navigation ici, mais pour le moment, si vous cliquez dessus, ils ne vont nulle part. Nous allons donc utiliser I DS pour les relier au reste de la page. Donc je vais aller dans notre fichier d'index et nous avons ici Ah, liste des articles pour le portfolio à propos en contact. Donc, je vais faire le chemin où c'est là que vous mettrez normalement un lien. Mais si vous voulez un lien interne, vous pouvez utiliser une livre et ensuite ce qui sera le i D. Donc pour notre section portefeuille. Si je fais défiler vers le bas deux portefeuille et je mets sur le rappeur de portefeuille I D égal portefeuille. Puis quand j'ai enregistré cette Andi rafraîchir ma page. Si je clique sur le portefeuille, si je clique sur le portefeuille, il va descendre à notre section portefeuille, donc je vais le faire pour le reste d'entre eux. Maintenant, tout au long de ce cours, nous avons utilisé des classes dans notre CSS pour sélectionner quels éléments nous voulons absorber mon travail. Ça n'a pas besoin d'y aller maintenant. Tout au long de ce cours, nous avons utilisé des clauses seulement deux font tous la sélection des éléments que nous voulons être stylisés . Vous pouvez également utiliser I DS. Il y a un tas de façons différentes de sélectionner, euh, des morceaux d'OGM couverts, donc je vais juste mettre tous nos corps dans un moment, et je vais vous montrer un peu rapidement comment les idées peuvent fonctionner pour vous dans CSS aussi . Alors disons contact. Nous retournerons à une navigation et nous ajouterons notre I DS ici. Contact. Cool. Nous avons déjà fait portefeuille, alors vérifions encore que cela fonctionne. Andi. Contact. Parfait. Il fait juste défiler vers le bas jusqu'au bas de la page. Maintenant, jetons un coup d'oeil très rapide à I DS. Maintenant, vous vous souvenez dans CSS. Nous savons que c'est une feuille de style en cascade, donc fondamentalement l'ordre des styles est très important, donc tout ce qui est plus bas sur la feuille de style va recevoir une plus grande importance . Maintenant, regardons notre section à propos de afin que je puisse vous montrer comment les classes et I DS diffèrent en termes d'importance. Donc, nous avons notre cours ici et avec la définition de notre arrière-plan à ce genre de couleur beige . Maintenant, si je devais cibler à nouveau et que je devais lui donner le fond bleu, évidemment, parce qu'il est plus bas, ça changera l'arrière-plan pour qu'il soit bleu. Si nous étions frais, vous pouvez voir que c'est bleu. Cependant, si je devais le faire ici sur I d. Même si le bleu est plus bas dans la feuille de style CSS et I D a un plus grand niveau d' importance qu'un tissu, donc vous verrez si je l'économise et actualise, il revient à être page Maintenant. Je vous recommande d'utiliser des classes autant que possible dans vos feuilles de style, parce que si vous arrêtez de jeter I DS dans le, cela va vraiment vous confondre. Lorsque vous avez des problèmes avec votre code, vous ne serez pas en mesure de dire ce qui a une valeur plus ou moins grande. Et si vous voulez en savoir plus sur les sélecteurs à nouveau, il suffit de consulter la documentation mdn et vous en trouverez beaucoup. Donc, si nous regardons cette page ici, nous pouvons voir que nous avons le sélecteur de type, qui est ce que nous avons utilisé pour nos éléments. Donc, comme nos images, vous avez des classes que nous avons utilisé I ds ah, sélecteur universel, qui est l'Astérix, nous avons utilisé pour nos styles globaux. Et puis vous pouvez même descendre aux attributs. Les électeurs, le combinateur, ses frères et sœurs, toutes sortes de choses. Ceci est un Ceci est une classe entière en soi. Donc nous n'entrerons pas dans ça aujourd'hui. Mais absolument. Si vous voulez en savoir plus, c'est une excellente ressource. 11. Nous l'avons fait !: J' ai fini. Merci beaucoup d'avoir emmené les écoles avec moi. Les gars, j'ai entendu dire que les gens ont passé un bon moment et que vous avez appris un tas de nouvelles compétences. Assurez-vous de mettre à jour vos projets ci-dessous afin que je puisse voir ce sur quoi vous avez travaillé et comment vous en faites le vôtre. Je vais faire beaucoup plus de cours sur Scotia, alors s'il vous plaît assurez-vous de me suivre pour que vous obteniez une notification quand je lancerai mes nouveaux cours. Bien sûr, si vous aimez vous connecter avec moi sur les médias sociaux, je vais retarder les longueurs des vieux. Fuller. Merci beaucoup de vous être joint. Peut avoir une journée brillante, non.