Créer un modèle de site web portfolio à partir de zéro en utilisant HTML, CSS, jQuery et PHP

1. Que vous apprendrez dans ce cours ?: Hé, les gars, en bas. De retour avec un autre cours pour toi, celui-là. Nous allons construire un simple modèle de profil freelancer d'une page. Laisse-moi passer par là et te montrer certaines choses qui pourraient être intéressées à ce sujet. Vous pourriez vous intéresser à suivre ce cours, alors commencez dès le début. J' ai, ah, une de ces petites sortes de menus volent comme ça en utilisant quelques transitions CSS ici. Donc c'est quelque chose que nous allons traverser. Ah, dans ce que nous faisons défiler ce cours, nous avons juste le genre général de conception HTML et CSS et look and feel et ainsi de force, nous allons parler de ça et de certaines choses. Ah, que j'ai entendu dire que je pense avoir fait mieux ça. Nous avons également une section portefeuille avec pop-up. Vous verrez ici que nous pouvons réellement passer et faire défiler ces choses. Alors sûr que vous deviez le faire et ensuite descendra vers le bas. On a un formulaire de contact avec moi. Et si nous remplissons ça et je mettrai un texan factice ici pour obtenir une citation. Cela va réellement soumettre ce formulaire via Ajax et ensuite nous donner un responsable affichera un message. Ah, le succès ou l'échec basé sur ce que nous recevons. Donc juste pour sauter un peu sur le code, c'est en quelque sorte le front end. Bien sûr, vous allez apprendre une tonne de HTML. Nous allons aussi construire un système de grille que vous pouvez glisser et déposer dans différents projets. Et c'est en utilisant la grille CSS. Donc on va passer par ce multi va te montrer comment j'ai construit ce menu. Ah, en utilisant la transition CSS. Donc, nous avons ça. Nous allons également entrer dans certains des JavaScript pour gérer des choses différentes avec le menu . En outre, vous montrez quelques options pour différentes façons que vous pouvez gérer le menu également. Bien sûr, nous avons le gestionnaire de formulaire Ah, pour le formulaire que nous construisons via Ajax. Et puis nous avons notre script PHP ici pour gérer cette requête. Ah, envoyez l'e-mail et ainsi de suite et rendez-nous notre réponse. Donc encore une fois, beaucoup de html ah, beaucoup de CSS un script Java ah décent et quelques PHP ainsi que toutes sortes de se réunir dans ce cours basé sur le projet pour construire ce modèle freelancer. Donc si c'est quelque chose qui vous intéresse, inscrivez-vous au cours, et j'ai hâte de vous voir dans la classe. 2. Comment tirer le meilleur parti de ce cours: Hey, si vite avant de plonger dans les écrous et les boulons de ce cours, je veux juste faire quelque chose de très rapide sur la façon de tirer le meilleur parti de ce cours avant entrer aussi vite que vous suivez le cours. Si tu aimes le cours, j'apprécierais vraiment que tu me quittes, Ah, un examen du cours. Ça aide une tonne. Donc si vous pouviez faire ça, j'apprécierais vraiment. Aussi, assurez-vous de consulter mon profil et suivez-moi là-bas si vous voulez être averti par partage de compétences. Lorsque je télécharge de nouveaux cours, j'essaie de télécharger assez régulièrement. Donc, si vous voulez être averti lorsque de nouveaux cours sont téléchargés, assurez-vous de me suivre sur mon profil. Cependant, cela hors du chemin, parlons de la façon de tirer le meilleur parti de ce cours. Donc une chose que je veux clarifier à ce sujet est que c'est un cours basé sur un projet, Donc dans ce cours, nous allons passer assez chaud et lourd à travers la façon de construire ce site, et nous ne allons pas passer trop de temps sur une sorte de expliquant comment fonctionne un langage comme HTML CSS ou PHP ou JavaScript. Ok, donc je suis vraiment ce genre de supposition. Ah, un peu de base de connaissances, de familiarité, moins avec ces langues. Et puis je vais juste te montrer comment faire ça. Et donc je veux juste faire cette distinction. C' est de vous montrer comment faire quelque chose de spécifique avec la langue, pas nécessairement vous enseigner cette langue en profondeur elle-même. Si vous, c'est quelque chose que vous voulez faire. Si c'est plus ce que vous cherchez, alors vous voulez vraiment vérifier Ah, cours spécifique à la langue où ils où quelqu'un va profondément dans l'explication de quelles langues . Donc, un exemple. Je peux en fait aller sur mon profil très vite. J' ai ce guide pour débutant PHP qui est en profondeur. C' est huit heures juste d'aller dans PHP et d'essayer d'expliquer tout ce que vous voudriez savoir sur PHP. Guide du débutant pour PHP. Ça fait environ 3,5 heures. Est-ce que html uh, 3.5 heures Qui fait exactement le même genre de chose. Même ces cours de programmation orientés objet vont spécifiquement dans la programmation orientée objet , ce qui est une façon de faire du code PHP et ainsi de suite. Donc, je veux juste m'assurer et faire cette distinction entre un cours basé sur un projet et un cours spécifique à une langue, parce qu'un cours basé sur un projet comme celui-ci va bouger un peu chaud et lourd, et il est en quelque sorte à vous de remplir le lacunes. Ah, que vous pouvez avoir avec une langue particulière au fur et à mesure que vous allez. Donc, si vous constatez que vous courez dans des lacunes, c'est une sorte de moyen de résoudre ça. Ah, et encore une fois, ce cours est juste pour vous montrer comment assembler certaines choses d'une certaine manière. Voilà comment tirer le meilleur parti de ce cours. Ma suggestion. Si vous rencontrez une grosse lacune, j'irais combler cette lacune avant de passer à autre chose, parce que ce sera vraiment le cas. Tout se construit en quelque sorte sur la chose avant. Donc ça va être dur pour toi de continuer le cours si tu as ce gros écart de connaissances là-dedans. Et c'est aussi l'une des bonnes choses à propos des cours basés sur des projets. Est-ce qu'ils ont aidé à exposer ce genre de chose. Ça peut ressembler à un négatif, mais c'est en fait un positif. Cela aide à exposer où vous pouvez avoir des prises parce que nous réunissons HTML, CSS, JavaScript et PHP. Vous savez, vous n'avez peut-être jamais fait toutes ces choses ensemble avant, et nous faisons, vous savez, Ajax et nous faisons des transitions CSS et traduisons et certaines choses que vous n'avez peut-être pas faites auparavant. Et encore une fois, ça aide juste à exposer ces trous. Alors maintenant vous savez, et ensuite vous pouvez aller combler ces lacunes. Ok, donc c'est la valeur d'un cours comme celui-ci. Ce n'est pas timide de ça. Ne t'inquiète pas pour ça. Juste quand vous frappez ces trous en essayant de combler ces lacunes au fur et à mesure que vous allez. Encore une fois, c'est comment tirer le meilleur parti de ce cours. Espérons que cela vous aide que vous allez le long de cette 3. Créez le système de grille réactif à l'aide de la grille CSS: la première chose que je veux faire ici est en fait construire le système de grille parce que nous en avons vraiment besoin avant de pouvoir faire autre chose avec leur site. Mais je dois le signer, quelque sorte mettre le projet en place ici. Donc je vais aller dans ma structure de dossiers ici. Et sous ce modèle un, je vais juste créer un nouveau dossier appelé Working the Fold of That. Je suis je construit ceci dans Auparavant est Freelancer Ah, 001 est ce que je l'appelle pour l'instant. Mais je vais utiliser ce dossier de travail pour ce que nous allons faire ici, et puis je vais à l'intérieur de cela créer un nouveau fichier appelé index dot html et parce que nous utilisons Ajax, où nous soumettons à un script PHP, mais parce que nous le faisons par Ajax, nous n'avons pas besoin de le faire dans le fichier html. Certaines personnes me posent souvent des questions à ce sujet, alors je vais le faire. L' un est un fichier HTML, juste pour que vous puissiez en quelque sorte le voir. Et puis on va ouvrir ce dossier et je fermerai ça pour l'instant. Et je veux faire un aperçu du fichier life et donc nous n'y avons rien, donc nous ne le faisons pas Il ne montre rien ici, mais maintenant nous pouvons réellement ouvrir cette sauvegarde et allons de l'avant et créer un nouveau dossier appelé CSS et à l'intérieur qui allons de l'avant et créer un nouveau fichier appelé grille point CSS. Maintenant, je mets cette grille. Je vais mettre la grille et le menu en fait dans leurs propres fichiers CSS. La raison pour laquelle je fais cela est parce que ceux-ci sont destinés à être une sorte de fichiers glisser-déposer que vous n'avez pas à réécrire constamment pour chaque projet, vous pouvez simplement le glisser dans un nouveau projet. Et il est là prêt pour vous d'aller dans votre bon système que vous voulez construire. Une fois que vous le construisez, comment vous le voulez, vous pouvez à nouveau. Tu vas juste l'utiliser en quelque sorte. Donc devient un peu comme votre propre bootstrap beaucoup dans ce sens. Ok, alors allons-y et ouvrons que ce point de grille CSS vers le haut. Et maintenant on peut fermer ça. Et donc nous allons utiliser la grille CSS. Ici, laissez-moi aller de l'avant et juste un commentaire ah. Ce sont marqués ceci correctement titre et c'est ainsi que j'ai tendance à le faire. Je veux dire, vous pouvez le faire comme vous voulez, mais d'accord, donc il y a essentiellement trois choses principales dont nous avons besoin ici. Si vous êtes familier avec les grilles, nous avons besoin d'un conteneur. Nous avons besoin d'une rangée, et nous avons besoin de colonnes. Ok, alors commençons par le conteneur. C' est assez simple. Et tout ce qu'on va faire ici c'est qu'on va faire marge gauche, auto et marge, droite, auto. Et essentiellement, ce que cela va faire est juste de le centrer pour nous. Et puis j'ai fait tapoter à gauche de 15 pixels. J' aime la façon dont ça a l'air. Tu peux jouer avec ça, mais c'est à toi de décider. Mais c' est essentiellement le conteneur. Tout ce qui fait vraiment, c'est juste une sorte de centrage. Ah, l'élément conteneur. Je te montrerai ici dans une minute, à quoi ça va ressembler dans une seconde, mais ah, et puis je lui donnerai un peu de rembourrage. Donc, il semble que cela n'a vraiment rien à un diplômé CSS. C' est juste que notre conteneur travaille ici. D' accord. Et puis on va faire Ah, on va faire notre file. Et c'est là que nous commençons avec le CSS. De bonnes choses. Donc, pour la grille CSS, nous devons faire une grille d'affichage. Donc, cela dit essentiellement, Hey, nous allons utiliser CSS cred. Et puis pour cela, il y a beaucoup de façons différentes que vous pouvez utiliser CSS génial. Et vous pouvez obtenir une mise en page vraiment complexe et ainsi de suite, mais un système de grille en fait assez simple. Donc nous allons faire des colonnes de modèle de grille, euh, modèle. Et puis nous allons utiliser la fonction de répétition ici, et nous allons faire 12 et puis un fr. Ok, Donc, essentiellement, ce que cela veut dire, c'est notre modèle pour nos colonnes. Et donc ce que nous disons c'est que nous voulons avoir 12 1 fr. Colonne. Donc, le fr est une sorte de cette unité flexible, euh, qui va remplir l'espace restant essentiellement, ce que cela nous donne est qu'il nous donne 12 colonnes comme vous êtes habitué à un système de grille de bootstrap ou peu importe, et puis je vais faire un écart de grille de 20 pixels comme ça. Donc c'est juste l'écart. Ah, ça va être entre les différentes colonnes. Maintenant qu'on a ça, c'est tout ce qu'on a à faire. Maintenant qu'on a ça, c' pour une rangée. Tu vas voir quoi ? Grille CSS. C' est vraiment assez simple. Maintenant, nous avons juste besoin de faire notre chronique, donc je vais vous montrer un exemple d'un, et ensuite nous allons juste tomber dans le reste. Alors appelez un. Et donc ça va être une colonne avec colonne, et on va faire grille. Appelez-le, puis enjambrez un. Ok, Maintenant vous voyez tous ces airs ici, parce que apparemment mon i d ici ne reconnaît pas tous ces nouveaux trucs de CSS fantaisie. Mais cette année est assez simple pour une seule colonne avec Appelez-le. Nous avons juste réglé la colonne de la grille sur une. Et comme vous l'auriez deviné pour deux, appelez-le avec colonne. Ensuite, nous avons mis l'appel de grille, hum, pour l'étendre comme ça. Ok, donc c'est assez simple. Au lieu de me regarder taper le reste de tout ça, je vais juste tomber dans le reste. Donc trois à douze ici. Ainsi, vous pouvez voir à nouveau Colonne Juan travée colonne à enjamber pour calmer trois travée. Sauf que vous êtes en bas de la ligne à 12. Donc ça nous donne notre esprit de 12 colonnes. C' est encore un genre. Une sorte de ce que vous avez utilisé pour Bootstrap. On est en train de le faire, euh, avec la grille CSS. Ensuite, je vais créer une sorte de classe d'utilité ici, qui n'est pas un caniveau. Donc, si on veut ne pas avoir de caniveau, on va l'utiliser dans la section du portefeuille. Alors nous allons faire la grille, l' appeler gap, et nous allons mettre ça à zéro, que ça se débarrasse de l'espace est l'espace entre les colonnes et ensuite nous avons juste besoin faire notre requête média. Donc, nous avons trois assez faciles qui allaient faire à Media et faisons des hommes avec 999 ou 92 pixels. Nous allons cibler ce point de rupture, et nous allons juste changer la taille de notre conteneur et nous allons faire avec neuf centaines, 70 pixels. Donc c'est juste rétrécir le conteneur. C' est une sorte de grille fixe standard. Ah, approche. Quand on est au 992, on rétrécit le conteneur. Alors tout ce qu'il contient se rétrécit avec ça, ok ? Et on va faire la même chose pour plus de 1200. Donc aux médias et on va faire des hommes avec 1200 pixels comme ça, puis conteneur, et on va régler ça sur une largeur de 1140 pixels comme ça. D' accord, donc, selon la taille de l'écran, on va juste rétrécir ou agrandir notre conteneur. trucs assez simples là-bas. Celui-ci est un peu plus long. C' est pour ça que je vais juste laisser tomber celui-là, et c'est un peu plus long, mais c'est pour les colonnes. Donc, si nous obtenons en dessous de sept ou 786 768 pixels ou moins toutes les colonnes, nous allons changer la portée de la grille 2 12 Donc ce que cela fait, c'est qu'il les fait essentiellement en dessous 768 pixels. Ça va aller d'un côté à l'autre, donc tu as trois boîtes. Je décide que ça va les presser pour être au-dessus de l'autre, qui est en quelque sorte ce que vous attendez de, ah, réactif. Super ici. Alors que c'est ça. C' est notre système de grille. Avec la grille CSS, vous pouvez voir que c'est beaucoup plus facile et beaucoup plus simple en raison des outils que nous avons maintenant dans CSS cred. Alors venons chercher Doc et faisons ça. Et puis allons-y et incluons notre fichier CSS pour une seconde ici afin que nous puissions jeter un oeil à cela. Donc, nous allons faire Leak va nettoyer cela ici dans une seconde, mais nous allons faire une feuille de style comme ceci, et puis nous allons faire un treff et nous allons faire des égaux et ensuite nous pouvons utiliser CSS slash point de grille CSS comme ceci. Ok, donc ça devrait tomber dans notre système de grille et ensuite nous pouvons faire beaucoup de fois comme cela se fait comme vous le ferez section et puis à l'intérieur de cela vous ferez conteneur. La classe div est égale conteneur. Jour des classes devrait sembler familier de jamais travaillé avec la ligne bootstrap, puis dire div um , classe égale et fera appel. On appellera trois comme ça et on en dira un et on en laissera quelques comme ça . OK, donc c'est une sorte de chose standard que tu verras. Laisse-moi juste faire un style rapide pour qu'on puisse voir ça. Ah style. Je vais faire la section qui fera des nombres d'arrière-plan est zéro. D' accord. Et faisons juste la couleur numéro f et puis pour nos colonnes Productif appel trois. On va juste garder ça facile comme ça va faire de la couleur. On va juste lire quelque chose comme ça. Oh, et faisons le fond, pas la couleur. D' accord. D' accord. Donc vous pouvez avoir une idée de ce qui se passe ici. Nous avons nos sommes en quelque sorte, euh, nous avons notre conteneur. On a notre rang. On a nos colonnes à l'intérieur de ça. En fait, ça ne fait que neuf. Faisons pour pour peu vous donner une meilleure idée. Ok, donc , en fait, change pour appeler quatre. D' accord. Donc, vous pouvez voir notre grille en quelque sorte d'étirements ici. Il y a l'écart entre les colonnes de la grille, comme on l'a mis. Et donc vous avez un beau système de grille avec lequel nous pouvons travailler, et je ne sais pas pour oui, donc vous pouvez voir ici. Une fois que nous obtenons en dessous de 780 68 pixels, il tombe en haut du bas là-bas. Donc encore une fois, juste commencé une sorte de grille réactive standard que vous attendez à voir faite avec la grille CSS . Et c'est quelque chose que vous pouvez prendre ceci ici et vous pouvez en quelque sorte le modifier, comment vous le voulez, puis créer et conserver ce fichier CSS afin que vous puissiez le déposer dans des projets. Bien sûr, si vous voulez modifier, si moi et tout cela, à un moment donné, vous pouvez combiner tous les fichiers sur ainsi de suite. Mais il vous donne un fichier que vous pouvez constamment garder en service pour les projets. Ah, comme vous allez de l'avant. Donc c'est le système de grille. Nous devons le faire d'abord avant de pouvoir construire le site web ici. 4. Créer le menu d'en-têtes: Maintenant, ce que je veux faire est de construire notre en-tête et notre menu. Mais il y a encore un peu de mise en place que je dois faire ici, certains essayant de travailler comme ça quand nous allons ici. Donc je vais faire un peu de ça maintenant, la première chose, et je vais essayer de faire vite, donc je vais faire un peu de tomber ici. Mais, ah, la première chose que nous voulons faire, c'est que nous voulons nos polices. Donc nous allons utiliser Ah, plusieurs polices et icônes différentes. Je vais déposer le « 's ». Vous êtes probablement familier avec ce genre de choses. Si vous n'êtes pas essentiellement ce que c'est ce sont les polices Google. Donc, si vous allez bien, juste des polices Google comme ça, je pense que c'est amusant. Démarrez google dot com, mais ne les polices Google tombent et cliquez sur cela, vous pouvez rechercher toutes ces différentes polices et ainsi de suite. Et allons juste y aller et ajouter celui-ci ici et puis, Ah, Ah, quand vous voulez en utiliser un, alors vous verrez qu'il vous donnera un lien comme celui-ci, OK ? Et vous pouvez alors prendre ça ici et vous pouvez déposer ça et me laisser juste à court de rétrécir ça un peu pendant une seconde pour que vous puissiez déposer ça ici et vous pouvez voir que c'est ce que j'ai fait. J' ai obtenu cette police Roboto et j'ai obtenu tous les différents poids qu'elle a, et j'ai laissé tomber ça comme un lien. J' ai eu Yellowtail, qui n'a qu'un poids. Et puis l'autre chose que j'ai apporté dans cette police Awesome. Donc, si vous allez à, si vous cherchez la police génial, alors vous pouvez voir que nous avons du plaisir génial ici et en fait comment utiliser. Et encore une fois, il vous donne un lien que vous pouvez déposer. C' est le troisième lien que j'ai laissé ici. Donc, j'ai juste pour gagner un peu de temps à taper tout ça. C' est essentiellement là que tu as eu ça. Je ne vais même pas taper le montant moi-même. Je l'attrape de ces endroits et je les dépose. Donc c'est le ah, la première chose que nous faisons. On a d'autres trucs qu'on aura besoin d'ajouter plus tard, mais on s'en souciera. À ce moment-là. Et alors je vais juste nettoyer ça et marquer ça comme le sien. Ils vont être une sorte de nos feuilles de style personnalisées vont juste calmer les feuilles de style. Pensez à cette affaire. On a notre grille. Ah, et puis nous allons en créer un pour notre menu, comme je l'ai dit, donc encore une fois va créer notre lien ici, et nous allons créer le ici en juste une seconde. Mais depuis que je suis là, je veux Adam. Donc nous allons le mettre dans notre fichier CSS aura un menu appelé comme celui-ci, et ensuite nous en aurons un qui est ce qui va être une sorte de notre ah globale, feuille de style de site. Donc encore une fois, je fais ça parce que je vais le menu et la grille va être une sorte de dragon abandonné pour différents projets. Cette feuille de style ici va être spécifique à ce projet. Et encore une fois, vous probablement pour la production. Vous iriez de l'avant, les hommes, si je ces et ainsi de suite. Ah, et cela le rendrait mieux performant et ainsi de suite. Mais d'accord, alors allons-y et remettons-le. Depuis maintenant, nous savons ce que c'est et changeons notre titre pour Joe Freelancer. Débarrassez-vous de cette section de style. On n'a plus besoin de ça. Et nous allons nous débarrasser de cette section ici. J' étais juste pour te montrer ça. Ok, donc maintenant que nous avons une sorte de trucs mis en place, nous ne créerons pas encore ces fichiers CSS. Nous allons en fait faire notre HTML d'abord. Et donc nous allons prendre créer un élément appelé Header et lui donner une classe d' en-tête de vue comme celui-ci. Et nous utilisons cela à la place d'une section, vous savez, dans d'autres parties du site utilisera section, mais parce que c'est un en-tête utilisaient en-tête. Et puis on va utiliser notre grille ici. Donc, nous allons div classe égale conteneur. Et puis la classe Div est égale ligne, et ensuite la classe Div est égale et on va appeler quatre, et ça va être pour un logo. Donc nous voulons avoir cette classe pour qu'on puisse la cibler spécifiquement pour fuir si nous le voulons. Et à l'intérieur de ça, nous allons avoir chacun une classe égale marque. Vous pouvez en quelque sorte nommer ces choses ce que vous voulez. Je suis juste, vous savez que j'ai utilisé un peu bootstrap, et c'est comme ça qu'ils le font. Donc c'est juste familier pour moi. Donc on va à un brouillon n'est rien pour l'instant. Et on va dire Joe Freelancer, ça va créer. Ah, ça va créer une sorte de titre de notre site, pour ainsi dire. Ok, donc c'est la section de la marque. Et puis l'autre section que nous devons faire ici est pour notre menu, alors va, euh, classe div égale appel huit. Donc, nous avons appelé avant. Nous avons toujours besoin d'ajouter jusqu'à 12. On va appeler huit, puis à l'intérieur de ça. C' est là qu'on va commencer à mettre notre menu. Donc, la première chose dont nous avons besoin est nos tout-petits. Nous allons faire div classe égale menu bascule comme ceci est me donner sont bouton bascule, et puis nous allons à l'intérieur de cette classe Do I égale f moins. Donc, c'est de la police Awesome et rien à l'intérieur de cela. Et puis on a juste besoin de trois d'entre eux, donc je vais aller de l'avant et copier ça, et d'accord, pour que vous voyiez ça nous donne trois lignes ici. On n'a pas encore stylé tout ça, donc ça va avoir l'air vraiment bizarre. Hum, donc c'est notre menu bascule. Mais nous avons aussi besoin de notre menu. Donc, nous allons faire, Knave classe égale dernier menu égal, et nous allons donner ceci et je d. Parce que vous pourriez avoir plusieurs menus sur le même site. Donc, nous avons une classe de menu qui va faire la plupart de notre style. Nous allons aussi lui donner une idée au cas où nous voulions cibler celui-ci spécifiquement. Donc, partie a été appelée cours Menu primaire. Appelle-le ce que tu veux. Hum, et puis nous ferons sur une classe de liste égale menu naff. Donc c'est la navigation réelle, euh, menu. Et puis à l'intérieur de ça, laisse-moi juste déposer le « 's ». Pas de sens ces air. Assez simple. Pas de rendez-vous. Regardez-moi taper un tas de ceux-là. Donc, ce sont des éléments de liste, et donc nous avons l'élément de liste. Nous leur donnons à chacun une classe d'hommes. Tu claves l'objet que nous utilisons. J' utilisais des ancres parce que tout ça va être lié dans le même site. Sur les compétences, les clients du portefeuille et les contacts. Ce seraient les différentes sections. Et donc quand nous créons une nouvelle section juste pour expliquer cela ici, eh bien, faites quelque chose comme cette section Will do et nous ferons section égale classe. On parlera de ça. Mais on va faire comme ça. Eh bien, ça crée maintenant pour cette ancre. Lorsque vous cliquez sur ce lien, il sera lié à la section Quand vous donnez quelque chose un I D. Vous pouvez alors créer une ancre Tony à ce que je d. Donc c'est ce que nous faisons ici. Je vais y aller. Je n'ai pas laissé cette section là-dedans parce que nous allons l'utiliser à un moment donné de toute façon . Très bien, donc c'est le HTML. Ah, c'est assez simple. La prochaine chose que nous devons faire, c'est que nous devons entrer dans la C.S. C.S. et il y a quelques choses ici que nous devons faire. Comme je l'ai dit, j'ai encore un peu de mise en place ici. Allons de l'avant et créer un fichier et nous appellerons ce menu point CSS et ensuite nous allons en créer un autre et nous appellerons que les zéros freelancer Il y a vraiment des réponses de zéro. Il y a un cas Rwanda CSS de ce sont encore les deux fichiers que nous avons inclus ici, et je pense que vous obtenez tout correctement orthographié. Ok, donc ces deux dossiers devraient être inclus maintenant. Et en fait, le 1er 1 dans lequel on va aller est ce pigiste. Je vais les ouvrir tous les deux. Donc nous l'avons fait. Mais je vais aller dans ce pigiste ici parce qu'on a besoin de faire quelques choses avec le corps, juste les orteils. Sortez ça du chemin. Donc, nous allons faire notre marquage ici. Non, je ne deviendrai pas trop pointilleux pour la vidéo. Bon, donc on va au corps HTML, et on va se débarrasser de la marge du remplissage du navigateur. C' est ça. Habituellement, ils sont donc marge zéro rembourrage zéro. Hum, on va faire l'arrière-plan. Je fais ça parce que tu le remarqueras dans le mien. Il a une sorte de couleur grisâtre, et je n'aime pas la regarder quand tu vas à. En fait, quand je vais mettre ça sur place, ça ne fera pas ça. Mais pour mon bien, je n'aime pas le regarder ainsi et ensuite nous allons définir la police générale pour le corps à cette couleur. Ok, donc ça nous permet de se débarrasser de certains de ces trucs. Euh, quel est l'air ici ? Maintenant ? J' ai mis un demi-côlon du côlon. Bon, alors on va faire Ah, famille des polices. Donc on va faire du corps. Nous allons faire P le tagger P dans la zone de texte de sélection d'entrée. Il y en a probablement d'autres ici. C' est tout ça. Um, tout ce qui n'est pas Vous voulez cibler pour changer la police car vous n'avez pas en termes de balises de base et ainsi de suite, le corps devrait attraper la plupart des choses, mais certaines choses, comme les balises de paragraphe et entrées et ainsi de suite qu'il ne sera pas toujours attraper. Donc ce sont ceux que nous utilisons, et nous allons utiliser dans ce, euh, ce site particulier. Donc c'est ceux que je cible. Donc on va à la famille de polices, et on va mettre ça sur Roboto et ensuite une sauvegarde de Sand Saref comme ça. Ok, euh , encore une fois, c'est juste une sorte de trucs que nous devons faire et qui ont besoin de sortir du gaspillage. Nous allons l'image de Maxwell à 100% pour que les images se rétrécissent. C' est juste une sorte de réactivité générale de l'image qui affaiblit Dio. Ah. Ensuite, nous allons faire le corps P H un H deux H trois h pour H cinq h six, entrée, entrée, sélection et zone de texte à nouveau. Et on va régler la police d'attente à 300. D' accord. Et presque fini ici. On va faire des points de texte et des zones de texte. Nous allons définir la boîte de taille de la boîte de bordure et bien, avec une bordure 100%, un pixel solide. Et puis C C c est la couleur faire pixels Paddington. 15 pixels. Ah, faisons la taille de la police 16 pixels. Quoi ? Taille 1 ronde. D' accord. Et je fais ça, donc je n'ai probablement plus besoin de faire ça. La taille de la police double ici. Toute l'idée derrière cela est que certains navigateurs ne supportent pas les béliers. Il sera par défaut à l'arrière de la taille des pixels. Ici. C' est une habitude que j'ai en quelque sorte pris et que je dois probablement briser, mais, euh, euh, c'est pour ça que je fais ça. Donc, hauteur, j'ai tourné 40 pixels. Ok, donc cet air, comme je l'ai dit, c'était juste des choses qu'on avait besoin de sortir du chemin. Et puis nous devons également faire notre section d'en-tête de site. Cela s'applique donc à notre menu. Donc nous avons créé ici. Ah, en-tête avec en-tête de site Classe. Maintenant, nous devons styler un peu ça. Alors faisons, euh, euh, l'en-tête. Et tu te souviens en quelque sorte, tu n'as peut-être pas remarqué ça, mais si on y retourne et c'est Oh, regarde, en fait, c'est ici. Cela pourrait nous tirer ici si vous vous souvenez des en-têtes de site réellement corrigés avec. Et il a cette transparence. Donc c'est un peu ce qu'on va faire ici. Ok, donc c'est pour ça qu'on doit s'amuser un peu avant de pouvoir entrer dans le menu lui-même. Bon, donc on va le faire, on va cibler cette classe, euh, en-tête de site. Et nous allons faire la position fixe. C' est ce qui le rend donc qu'il reste au sommet même lorsque vous faites défiler. Quand faire bordure en bas d'un pixel solide, et nous allons faire e pour comme ça, et puis nous allons faire avec de 100% et nous allons faire l'arrière-plan. Cela va lui donner sa transparence. Donc, on va à l'arrière-plan. Mais au lieu d'une couleur hexadécimale, on va faire RVB un Donc c'est rouge, vert, bleu Et puis le héros de l'opacité Pacenti So 2 55 2 55 qui lui donne la couleur Donc ça va être blanc, et puis on est va lui donner une pastie de 0,9. Donc ça va faire en sorte que lorsque vous faites défiler vers le bas, il y ait un petit passage. Donc, actualisons ceci et voyons si assurez-vous que les fichiers CSS et ainsi de suite. Donc, nous avons quelque chose ici. Hum, vous savez, nous avons quelques changements ici, donc nos fichiers CSS semblent passer par ici, donc c'est bien. Maintenant, venons ici et passons à point Brand. Je vais faire la hauteur de la ligne et nous allons définir cet orteil un et la taille de la police 28 pixels. Taille de police 1.75 Ram comme ça. D' accord. Et vous pouvez voir la taille de la police changer là-haut et ainsi de suite. Encore une fois, c'est ah, bon signe. Et puis nous allons faire une marque et nous allons nous débarrasser de la décoration de texte dit que pour aucun. Euh, et ensuite on va mettre la couleur à 333 Ok, donc vous pouvez voir qu'on commence à avoir un peu de quelque chose ici. Nous avons une sorte de section de marque ici qui a été mise à jour. Hum, et c'est vraiment tout ce qu'on doit faire pour l'instant. Ah, dans notre dossier de freelance. Maintenant, nous pouvons revenir dans le fichier de menu et commencer à jouer avec ça. Il y a donc un montant décent à ça. Nous devons faire à la fois le bascule, et ensuite nous devons faire le menu lui-même. Donc nous allons commencer par Ah, non, nous allons commencer par le bascule. Alors allons-y et faisons-le maintenant. Ah, fais le tableau de bord, bascule. Et nous allons positionner cet absolu ont positionné l'absolu principalement parce que c'est ah, c'est beaucoup plus simple. Ça va le mettre sur le dessus, non ? Euh, et tu le verras ici. Bouge dans une seconde, mais va le mettre sur le dessus, non ? Peu importe où vous faites défiler ou quoi que ce soit et avec le fixe, hum, avec le menu fixe et tout ce qui est beaucoup plus facile de le positionner de cette façon parce que nous faisons un menu mobile dès le début au lieu d'avoir un menu horizontal qui dans un menu mobile. Donc, nous allons faire Z Index va mettre cela à trois pointeur de curseur, et ensuite nous allons faire avec et nous allons définir cette auto orteil. Bon, donc ça va se positionner. Vous voyez, c'est fini dans le haut en ce moment, puis faites le menu bascule et puis pointez la FAA Cela va réellement cibler l'icône. Donc, faire bloc d'affichage, et vous voyez, maintenant ils sont sur l'autre pièce, en raison de la ligne, hauteur , zéro , um, marge 008 pixels et vous avez juste à jouer autour sans un peu pour voir ce que vous aimez avec cela, et nous allons faire taille de police 28 pixels. Ok, donc vous pouvez voir maintenant quand vous regardez ça, c'est similaire, ou c'est identique à ce que nous avons ici. Ok, donc on commence à aller quelque part un peu avec ça. Nous allons aussi ajouter cette transition. Donc, pour CSS, les transitions allaient faire toutes les 800 millisecondes et faciliter. Donc ça va nous mettre en place pour pouvoir faire les transitions que nous voulons dio . Ok, donc nous devons ajouter ça à l'icône ici. Ah , pour faire ça. Donc je vais revenir et faire toutes ces transitions ici. Je ne vais pas faire tout ça. Ah, à ce stade encore. Donc, je veux aller au menu et le faire d'abord avant d'entrer dans ça. Donc on va sauter, et on va aller au menu et on va ajouter un peu d'espace ici. Nous aurons besoin d'ajouter ces styles ici, mais nous ferons le menu. On va faire la position fixe. Donc c'est Ah, on va arranger ça ici. On va faire le top zéro, et on va le faire, non ? Zéro. Ok, donc ça va positionner notre menu ici, parce que si tu te souviens, notre menu glisse de côté comme ça. Ok, donc c'est ce que nous mettons en place ici. Bon, donc je vais faire une largeur de 30% sur ça. Tu vois ce genre de bâton ici et par défaut, ça va être caché. Je ne vais pas encore faire ça ? Parce que je veux que je le regarde, mais on va revenir, on va faire de la visibilité et on se cachera. Je vais juste faire visible pour l'instant pour qu'on puisse le voir, mais je veux ça comme un espace réservé. Je vais juste faire visible pour l'instant pour qu'on puisse le voir, Ok, donc on va refaire l'arrière-plan, et on va faire Ah, transparence là-dessus. Donc on va faire RGB a et 35 à 2 55 2 55 et puis encore, 0.9 comme ça. Et puis nous voulons que, euh nous voulons que ça étire toute la hauteur. Donc on va en hauteur et on va faire 100 VH. Hum, VH est une sorte de nouvelle chose que vous pouvez utiliser et ça rend vraiment facile de faire des choses comme ça . Donc, si vous voulez que quelque chose soit, ah 100% hauteur verticale Ah, c'est ce que vous dio tapotez 50 pixels là-dessus. Donc je voulais un joli rembourrage dessus. Dimension de la boîte indu. Ah, boîte frontière. Et quand ne frontière a laissé un pixel solide et veulent faire il force, et puis nous reviendrons et nous ferons les transitions. Je ne vais pas faire les transitions. Ah, à ce stade encore. Ok, donc on a ça, euh, on doit l'ajouter. Tout ajouté ici point menu dot show. On n'a pas encore fait ça. Donc, euh, encore une fois, je vais revenir et faire cette partie de ça. Mais pour l'instant, je voudrais juste faire le style pour qu'on puisse le voir avant de commencer à le cacher sur tout ça. Sinon, il devient un peu difficile de travailler avec. Donc maintenant, vous voulez faire le menu tiret Knave comme ceci, et nous allons faire marge zéro remplissage, zéro dans le style de liste type none. D' accord. Et on dirait que j'ai deux demi-deux-points d'appeler ici. Droit ? Donc ça nous met en place pour le style des orteils. Le menu un peu. Oui. Débarrassez-vous de ça. D' accord. Comment on va faire le menu, le tableau de bord, , et on peut cibler les liens réels à l'intérieur d'ici. Donc, nous allons afficher le bloc, et nous allons faire le remplissage de sept pixels. 08 pixels. Zéro. Donc c'est juste ce que j'ai compris. Vous pouvez en quelque sorte gâchis sans un peu. Je veux que la décoration du texte ne soit pas. Essayer de faire défiler ici un peu et faisons la taille de la police. Je fais 28 pixels ici. J' aime bien être gentil et grand comme ça. J' ai juste comme ça. Ok, donc maintenant vous pouvez voir ici. Nous avons très, très similaire à ce que nous avons avec notre boîte ici sorte de défilements comme ça. Hum, nous allons parler de la largeur ici dans une seconde, mais, vous savez, vous savez, encore une fois, c'est que nous avons un orteil très semblable à ce qu'on avait ici avant. Donc, ça va être une leçon assez longue. Euh, nous avons le menu construit, nous l'avons stylé, qui a en quelque sorte la facture d'en-tête et ainsi de suite. Et nous avons juste besoin de revenir et nous devons faire certaines des transitions et ainsi de suite, et cela va nécessiter du javascript et autres. Donc, je ne veux pas que cela se transforme en leçons ah, 40 ou 50 minutes, donc je vais couper celle-ci ici, et puis nous reviendrons dans la leçon suivante et ferons tout l'accrochage en termes de script Java et de rotatif et tout ce genre de choses. 5. Animer le menu en-têtes: Ok, alors continuons avec ce menu. La première chose que je vais faire ici, juste sortir de la voie est de venir dans ce dossier de travail je suis et de créer un nouveau fichier, un nouveau dossier appelé Js pour notre script Java. Je vais juste faire glisser ça apparaître et ensuite on va renommer ça pour que j'appelle ce pigiste. Oh, Wanda est comme ça. Donc même idée. Allez-y et ouvrez ça. Donc, c'est ouvert, et puis nous devons revenir à notre index dot html et nous devons inclure cela ici maintenant. Ah, avec le JavaScript autant que vous le pouvez. Tu veux essayer de mettre ça dans ton pied ou on n'a pas forcément un pied ou encore , mais on va aller de l'avant et on va juste ajouter ça ici. Eso va faire des scripts, et on va utiliser Jake fatigué. Donc, nous devons inclure la requête J. Comme je l'ai déjà dit. Ah, avec le avec les polices et l'automne génial et ainsi de suite, vous pouvez littéralement juste Google J requête Cdn et vous obtiendrez ah lien comme ceci essentiellement et vous venez de coller cela ici qui va inclure Ah j requête. Alors vous probablement familier. Probablement fait ça à un moment ou deux. Donc, la source de script est égale. Et maintenant, nous allons faire notre fichier JavaScript à partir de nos sites. On va faire du freelance. 01 points Js comme ça. Et cela va inclure le fichier Js que nous venons de créer. Donc maintenant, nous avons une requête G, que nous allons utiliser. Ensuite, nous avons, euh,notre euh, fichier javascript que nous allons utiliser ici ? Ok, Donc pour notre menu, ce que nous allons essentiellement faire est de faire ce bascule, nous allons utiliser Java script toe, ajouter une annonce et enlever quelques classes. Mais alors nous allons réellement utiliser CSS pour, hum, gérer l'animation et la cachette et montrer et ainsi de suite. Donc, le JavaScript que vous voulez utiliser une sorte de sa lumière du toucher que possible ? Pas nécessairement tout faire dans Ah, le javascript ici. C' est ce qu'on va faire ici. Donc nous allons faire Jake fatigué, et nous allons faire des documents enseignés, prêts, prêts, et nous allons fonctionner, et à l'intérieur, ça va mettre nos signes de dollar pour qu'on puisse utiliser ça. Et puis ce genre d'enveloppe cela dans, Ah, Ah, cette fonction anonyme pour qu'elle garde tout hors de l'espace global et l'empêche être encombré et conflictuel et ainsi de suite. Donc la première chose qu'on va faire, c'est qu'on va basculer. On doit faire plusieurs choses ici. Nous allons le faire par étapes, mais nous allons basculer le menu de l'ALENA sur le bouton Cliquez. OK, maintenant je vais définir quelques variables. Le 1er 1 est la racine Rex. Je vais l'utiliser plus tard. Mais je vais le mettre maintenant parce que je sais qu'on en a besoin. Et la route va juste être HTML et corps comme ça. Donc, ce sera quelque chose qui aura besoin un peu plus tard. Mais on va régler ça pour le moment, et ensuite on va faire basculer le menu. Ça va être le tout-petit que nous allons cibler, et nous allons mettre ça à notre menu Taco cours. Donc essentiellement, ce que nous avons fait est que nous avons créé une variable que les références sont la classe de menu à bascule, qui est notre enfant ici que nous avons créé pour que ce soit vraiment juste une chose de performance . Si tu veux les utiliser plusieurs fois, tu veux essayer de le faire pour que tu ne reviennes pas constamment dans le dom, ce qui nuit à la performance. Ok, donc une fois que nous avons cette configuration, alors nous pouvons référencer ce bascule de menu variable, et nous allons utiliser la méthode on, donc point sur, ah, menu bascule point sur et ensuite nous allons faire un clic. Donc c'est sur Click. Nous allons exécuter cette fonction, et c'est une fonction anonyme que nous créons ici et ce que nous allons faire. La première chose qu'on va faire est de créer une variable appelée ceci. Donc, ce qui a été cliqué sera maintenant réglé sur cet élément, euh, encore une fois, c'est un réglage faisant cette variable ou chose de performance, non ? Donc ça va cibler tout ce qui a été cliqué. Donc ah, c'est ce qu'on veut gâcher d'abord. Et donc nous allons faire cette classe de bascule de point. Donc, c'est une méthode de requête J et affaiblir les classes de bascule. Donc, quand il est cliqué, il ajoutera la classe quand il est cliqué à nouveau afin de la supprimer. Quand il a cliqué à nouveau, Will ajouté juste bascule cela d'avant en arrière en fonction des clics. Donc, nous allons ajouter et supprimer la classe appelée Close Game utilisera ceci dans notre CSS ici en seulement une minute. Et puis nous allons aller dans notre Dom et nous allons trouver le menu. Ah, le menu clave. Ah, les hommes du menu, vous avez un objet dont vous vous souvenez. Ce sont toutes les classes que nous utilisons quand nous construisons notre classe, accord ? Et on va basculer la classe appelée Show comme ça. Ok, donc c'est la chose principale que nous allons faire pour le basculement de ça et de l' idée. Laisse-moi revenir sur ça. En fait, laisse-moi venir ici et te montrer sur celui-là. C' est un peu plus facile, mais l'idée ici est que si nous inspectons cela et nous regardons notre boîte de menu, nous avons notre menu bascule. C' est ouvrir notre menu ici. Et les hommes, vous devez voir nos articles de liste ici quand je clique dessus. Vous voyez, maintenant tout cela obtient l'élément qui obtient la classe de show et qui nous permet de cibler cela avec CSS. Et puis notre menu bascule obtient la classe des vêtements. Ok, donc c'est important. C' est ce que nous allons utiliser dans notre CSS pour être en mesure de basculer Onda cible tous ces trucs. Ok, donc c'est un peu dur pour moi de faire l'inspecteur à l'intérieur de Ah, le I d le nuage. J' aime ça. C' est pourquoi je ah, j'utilise cet autre exemple ici. Mais c'est le ST. C'est exactement la même chose qu'on fait ici. Ok, Donc ce qui devrait arriver, c'est quand on clique dessus, ça devrait changer ces classes comme on s'y attendait. Laisse-moi voir si je peux. En fait, je vais probablement avoir besoin d'utiliser la vue de la source de trame. Laisse-moi voir si je peux obtenir ça pour qu'on puisse juste vérifier. Ce n'était pas ce que je cherchais. Ah, le mieux qu'on puisse faire est de l'inspecter, et ça ne nous a pas vraiment donné ce qu'on cherche ici. Ok, donc vous pouvez voir qu'on a été près ici. Et si nous venons ici, le menu a le spectacle. Ah, le menu Knave a le spectacle et tous les objets ont été montrés ici. Ok, donc nous obtenons ce dont nous avions besoin. Le JavaScript ajoute la classe Il ajoute près du bascule, et il ajoute show tow le menu et tous ses éléments. Donc, cela nous donne ce que nous devons faire alors pour CSS afin que nous puissions retourner dans le menu pour notre CSS ici et maintenant nous pouvons commencer Ah, jouer avec certains de ces trucs et se cacher et montrer et ainsi de suite. Donc pour le spectacle, ce que nous voulons En fait, maintenant ce que nous pouvons faire est que nous pouvons aller au menu, rappelez-vous que nous avions cette visibilité est visible ? On peut changer ça en caché comme ça. Et maintenant le ah, le menu est caché. Laisse-moi me rafraîchir, c'est bon. On réparera ça dans une seconde. En fait, ça n'a pas d'importance , parce que quand on fait la transition , c'est ah, ça ira. Donc de toute façon, nous pouvons aller au menu, puis montrer et nous pouvons faire de la visibilité et nous pouvons faire visible. Donc c'est une sorte de bascule de base ici, non ? Donc c'est caché. Et puis quand nous cliquons dessus et ajoutons cette classe show, elle revient comme ça. C' est donc l'idée de base ici. Ah, c'est que c'est je suppose que cette ombre vient de moi ciblant ce menu comme ça. C' est ce que c'était. C' est ce qui me jette de toute façon. Ah, c'est une sorte de cachette et de présentation du menu. Ok, donc c'est l'idée de base. Et puis essentiellement, ce que nous faisons, c'est d'ajouter quelques transitions pour le faire fonctionner un peu mieux. Donc ici sous le menu, alors ce qu'on va faire c'est quand tu commenceras et qu'on va, hum, faire de la transformation comme ça et on va traduire trois d et on va faire ah, 100 pour cent et faire 00 Donc, essentiellement, ce que cela fait, c'est qu'il l'enlève de l'écran, est-ce pas ? C' est une traduction de trois d. Donc, si vous regardez une traduction 3 d comme ça et que nous allons ici à l'extrémité vide Non, ça vous montre que c'est une sorte de modèle 3 D ici. Et la bonne chose à propos d'ici, c'est que tu peux jouer avec ces chiffres pour que tu puisses faire, genre , 20 et je te montrerai ce que ça fait, non ? Donc c'est pour le 1er 1 c'est les sorties du mouvement côté à côté. Ok, donc nous réglons ça à 100% donc c'est essentiellement l'enlever de son écran et ensuite les deux autres pour monter et descendre et entrer et sortir, nous mettons juste zéro. On ne joue pas avec ça. On s'en fiche de ceux-là. Ok, donc c'est ce que fait la transformation est de retirer ce menu de l'écran pour commencer, et ensuite nous allons créer une transition ici. Donc nous allons faire la transition, et nous allons faire tous les 600 m et il est sorti. Ok, donc ça l'enlève de l'écran. Et quand nous venons ici pour montrer, nous allons faire de la transformation et nous allons traduire trois D et étaient 2000 Ok, donc ce que ça fait est quand la classe show n'est pas sur elle va utiliser cette transformation, ok, et ça va l'enlever de la page. Mais quand nous ajoutons la classe show à elle, elle va maintenant définir au lieu de 100%. Ça va mettre ce 20 qui le ramène sur la page. Donc, c'est comme ça que nous obtenons cet effet de diapositive et de glisser à partir de cela et encore, nous utilisons juste des transitions CSS de traitement. Vous pouvez voir la transition. Nous spécifions ici. 600 millisecondes facilitées. Ok, donc c'est comme ça qu'on obtient ça spécifique. Ah, transition là-bas. Nous avons aussi le menu. étui à bascule viendra ici. On va faire le menu bascule les choses ici. Donc nous allons faire parler le menu bascule, et nous faisons f ah dot f désolé, doc vêtements et puis point f a. Donc c'est quand les classes proches appliquées à cela. Donc on va se transformer, et on va faire une rotation et 180 degrés. Ok, alors et puis Ah, on va ça va provoquer une rotation. Ok, alors recevez. Ça reste ici. Vous pouvez voir comment ils tournent tous comme ça. Ok, donc c'est le début. Nous voulons qu'ils soient tous à terme, mais nous voulons qu'ils se retrouvent dans une position spécifique. Parce que si vous vous souvenez, ce que nous finissons avec ce X Ok, donc ils tournent tous, mais nous finissons avec ce X donc nous avons la partie tournante. On a la partie tournante maintenant. Nous devons, hum Maintenant, nous devons obtenir la construction, le X essentiellement. Donc, nous allons faire le menu bascule. On va fermer maintenant. On va cibler la FAA, mais maintenant on va faire n'importe quel enfant, et on va en faire un. Donc on va cibler ce sommet sur le tout premier enfant. Donc nous allons faire la transformation, et nous allons faire tourner, et nous allons faire 45 degrés et nous allons traduire, et nous allons faire cinq pixels. Cinq pixels. Ok, donc ce que ça va faire, et maintenant, c'est qu'au lieu de celle qui tourne à 180 degrés va prendre 45 degrés et ensuite ça va changer sa direction à la place, juste retournant tout le chemin. Vous pouvez le voir maintenant. Il atterrit à un certain angle comme celui-ci. D' accord. Et encore une fois, vous pouvez aller au MGM et regarder traduire à nouveau et en quelque sorte avoir une idée de comment cela fonctionne. Vous avez vraiment juste à jouer avec ce jeu avec ça pour obtenir ce exactement où vous le voulez. Ok, donc c'est le 1er, c'est la même idée pour les deux autres. Donc il suffit de copier et de coller ceci ici et donc pour l'enfant final à ceci est le milieu. Souviens-toi, on passe à un autre. Celui-ci s'en va. Le 2ème 1 le milieu. Donc, en fait, ce qu'on va faire avec celui-ci, c'est qu'on va mettre l'opacité à zéro qui va la faire disparaître. Donc, si nous regardons ici, cliquez dessus. Vous voyez, maintenant que le milieu est parti et j'ai ces deux sortes de côte à côte comme ça, et pour le dernier, on a juste besoin de changer de direction. Donc c'est une sorte qui croise l'autre et ressemble à un S X donc on va faire un négatif de 45 degrés. Donc on commence à avoir le début d'une hache, et ensuite tu as juste un peu ah, tu dois la déplacer là jusqu'à ce que ça ressemble à des droits. Nous allons à sept pixels et six pixels négatifs. D' accord. Et ça vient de beaucoup d'essais et d'air, de comprendre que comment ah, tu as un peu de mal avec ça. jusqu' à ce qu'il atterrit où vous voulez. Ok, donc maintenant on a une hache, on clique sur le X, et il retourne à notre va. Nous cliquons à nouveau. Maintenant, nous avons notre sorte d'effet de bascule ici que nous recherchions. Tout est fait avec des transitions CSS. Donc, ce n'est pas une classe de transitions CSS, donc je suis en quelque sorte en train de passer par ce rapide. Si vous voulez en savoir plus à ce sujet, je recommande d'entrer dans la recherche d'une classe de transitions CSS ou de tutoriels ou quelque chose qui peut vraiment creuser là-dedans. Mais ça vous montre comment on a fait celle-là. La dernière chose qu'on va faire, c'est qu'on va faire un peu de réactivité. Parce que si on rétrécit ça, c'est ça qui a mis en place 30% en ce moment. Et tu vois, ça commence à devenir bizarre ici. Nous voulons vraiment mawr de Nous voulons en voir plus quand nous avons autant d'espace. Donc, nous allons juste faire une requête média donc chez les médias et nous allons faire Max avec 1200 pixels, et ici nous allons régler le menu sur une largeur de 40 pour cent. Ok, donc ça le rend juste un peu plus blanc. Et puis nous venons ici, en fait, donc c'est l'idée de base. Laissez-moi vous montrer les différents ici. Je ne pense pas qu'il y ait de sens et de me regarder taper tout ça. Alors, nous visons 9 92 et nous l'avons dit à 50 %. C' est ce qu'on est là. Donc vous pouvez voir que ça prend la moitié de l'écran et ensuite, ah, à 7 68, ça va aller plein avec. Donc si on devient super, je ne sais pas si on peut. Super large, vous voyez qu'il se déplace en arrière. Vous le voyez parce que nous avons ajouté cette transition, rappelez-vous, apparaissent dans le menu. Nous avons ici cette transition que nous avons ajoutée. C' est pourquoi il glisse comme ça au lieu de simplement claquer. Ok, c'est ce qui crée cet effet de sorte que si on fait défiler vers le bas à un moment donné, il glisse à 50% et ensuite il passe à 100% comme ça. Ok, donc c'est Ah, c'est comme ça que ça se fait. C' est comme ça que le menu sorte de voler la rotation de ce truc et tout. C' est le genre de choses, sauf pour quelques choses quand on commence à ajouter des sections et que vous commencez à cliquer dessus ,on va faire un défilement en douceur. , Nous devons faire un peu de manipulation de ce menu particulier. Ah, vous avez le choix de savoir si vous pouvez automatiquement vous cacher et ainsi de suite. Donc il y a un peu plus à faire ici. Mais beaucoup de ça va juste être je pense que tout ça va vraiment être dans le script Java . Donc on franchira ce pont quand on y arrivera. On a un tas, d'autres sections qu'on doit créer ici. Alors c'est le menu. C' est les transitions, etcetera , , et comment on a fait tout ça. 6. Créer la section à propos: Maintenant que nous avons le menu, nous avons construit notre système de grille. Nous pouvons commencer à construire certaines des sections du site ici. Nous avions donc commencé à construire cette section ici. On a au moins construit la section ici, alors allons-y et Ah, finissons ça. Donc j'ai notre section ici. On parlera de pourquoi on fait ça dans une seconde. Donc, nous allons faire des égaux de classe div et nous allons faire notre conteneur. Et puis à l'intérieur de cela, bien sûr, fera une rangée. Et puis nous allons faire ah div classe égaux allaient faire deux colonnes appeler six et comme vous faites juste deux de ceux-ci. Donc, faire la classe active égale appel six. D' accord. Et c'est sur ça que nous travaillons ici juste pour faire glisser ça ici. C' est juste là ? Donc ça va avoir ah, la photo à gauche, puis ce texte à droite et lié pour obtenir une citation ici. Maintenant, l'une des raisons pour lesquelles nous faisons cette section, puis nous mettons le conteneur à l'intérieur de la section. Si vous vous souvenez de notre grille CSS, notre conteneur change cette taille en fonction de la largeur de l'écran. Donc, quand nous voulons faire une sorte de ces pleins avec des arrière-plans comme vous voyez, comme, disons ceci juste ici comment cela étire toute la largeur du navigateur ici, peu importe la taille que nous allons ici. Mais on veut que ce truc soit un peu centré et pas plein de ça. La section que nous donnons en fait la couleur de fond aussi. Et puis nous avons mis notre conteneur à l'intérieur de ça pour créer là où il est en quelque sorte centré ici. Ok, donc c'est pour ça que nous avons la section comme ça. C' est être capable de faire ça. Donc, nous enveloppons tout à l'intérieur d'une section, puis aucun style affaiblir l'arrière-plan de la section pour aller plein avec. Ok, donc ce qu'on va faire ici c'est qu'on doit venir ici dans notre dossier de travail , et on doit créer un nouveau dossier, et on doit appeler ça des images. Donc on va faire des images, et en fait je viens juste ici. Ah, de celui-ci ici et attrape cette image. Alors, hum, voyons Joe ici et Kim ou si on fait Zhou ou Zhou Developers Joe Developer. Donc nous allons juste copier ça et venir ici et nous allons piéger ça ici. On parlera du portfolio sur les témoignages et tout ça un peu plus tard. Ok, donc ça nous donne notre photo maintenant. Ah, cette photo croit que c'est carré. Voyons être une ouverture et regardez-la. Et donc c'est en fait une image carrée. Mais si vous vous souvenez dans notre site ici, nous avons une image circulaire. Donc, nous allons réellement le faire via CSS. Donc, bien sûr, vous n'avez pas besoin de le faire. Si vous ne voulez pas Teoh, je recommande plutôt qu'au lieu de faire l'image circulaire ah, dans le magasin de photos réel ou quoi que ce soit en CSS. Donc, si vous voulez changer plus tard, c'est quelque chose qui est facile à changer. Donc on va tomber dans cette image. On va à notre image, et on va faire des égaux de classe. Je suis entouré de G. Parle de ça. Dans une seconde, je suis égal à avatar, et ensuite on va faire des égal source et on va faire des images, puis Joe Dash, développeur ah dot et J Peg. Et allons y aller et faire tout ça juste une seconde et nous le ferons. Ault est égal à Joe. Ah, je suppose que les pigistes vraiment ce que c'est, vous savez, mélanger et faire correspondre ceux. Ok, donc ça nous donne notre image là-bas. Si on recule ça, on peut voir. Maintenant, nous avons cette image. C' est une sorte de centre là-bas et ainsi de suite. Ok, allons-y près. Cela nous donne ça. Et puis ici, nous allons créer Ah, nous allons faire le texte réel. Donc, c'est l'une des choses avec HTML, en particulier Samantha balisage sémantique que nous allons réellement faire lorsque vous créez une section, Vous savez, le mdn dit que vous devriez vraiment toujours avoir un en-tête à l'intérieur de chaque section qui a le titre de cet article. C' est ce qu'on va faire ici. Nous allons créer une balise d'en-tête et nous allons lui donner une classe d'en-tête de section, ok ? Et cela nous permettra de cibler ces en-têtes de section. Et puis à l'intérieur de ça, nous avons notre h one, et en fait, nous allons lui donner un titre de section, et ensuite nous ajoutons un peu Ah, nous ajoutons d'autres classes ici. Nous allons citer le titre parce que c'est un titre de section. Mais c'est aussi le titre du site et nous allons au texte à gauche. Beaucoup de ces classes n'existent pas encore, alors nous allons les faire. Mais ensuite, on va faire le haut. Je suis Joe part ici, ok ? Et puis nous allons revenir sur ça, et ensuite nous allons faire le texte du paragraphe, donc je vais juste laisser tomber ça dedans. C' est un peu plus facile. Il y a quelques rangées ici, hum, pas forcément la peine de taper tout ça. Mais laisse-moi tomber ça. Et le plus important ici, c'est que nous les mettons dans une balise de paragraphe qui a une classe de plomb. Donc, tu sais, ça dit que j'ai été un interprète indépendant depuis 14 ans. Tu dois avoir des endroits où j'insiste ici. Hum, mais c'est vraiment juste des balises de paragraphe avec la classe de plomb, ok. Et puis la dernière chose que nous avons mis ici est que nous allons mettre dans notre bouton get quote, donc nous allons faire une classe égale et devions être tiene et ensuite nous allons faire tiene primaire et ensuite nous allons faire un draft égal et nous allons lier à contact que nous n'avons pas encore créé. Mais nous allons l'homme obtiendra une citation comme ça. Ok, donc c'est le HTML. Vous remarquerez que nous avons contre plusieurs Ah différentes, plusieurs classes CSS différentes que nous n'avons pas encore créées. Donc, nous allons devoir passer en revue et en créer quelques-uns et ensuite ah, gérer certains des styles spécifiques de ça à propos de la section Ah aussi. Donc, une des choses que je fais si nous allons à notre fichier CSS ici, avez-vous remarqué que j'ai commencé avec le corps et puis en quelque sorte ici j'ai la section d'en-tête , mais en fait après le corps parce que je pense que le corps est une sorte de une réinitialisation. Ensuite, je fais ce que j'appelle les styles globaux et les styles globaux ne sont pas quelque chose qui est relégué à une section particulière il des choses qui peuvent être utilisées dans n'importe quelle section et ainsi, comme notre image arrondie notre texte rire. Ce genre de choses sont ce que je considérerais comme des styles globaux. Et donc ah, sont les choses avec lesquelles on va travailler ici. Donc le 1er 1 est une section. Nous avons donc créé la section. Maintenant, nous voulons donner la section Ah, un peu de style. Tiens, laisse-moi tirer, essaie de tirer ça sur les orteils. Donc, nous avons un peu ça. Ok, donc on va faire cette section, et ensuite on veut avoir du rembourrage et on va faire 60 pixels. 20 pixels comme ça. Je suis juste que vous pouvez jouer autour de ça. C' est comme ça que j'ai aimé ça. Et ça va ajouter ça à chaque section. Ok, donc pas seulement celle-là, parce que nous allons donner à chaque section une classe de section solide et faire un F un f orm. Ok, donc il y a ça et on va faire Ah, le titre de la section. Donc titre de section et on va faire la taille de la police. Et nous allons faire 48 pixels, faire la hauteur de la ligne d'un et texter le centre de la ligne puis la marge. Maintenant, le centre de la ligne de texte. On va remplacer dans cette section, et on dirait que quelque chose se passe ici. Peut-être que j'ai manqué quelque chose ici avec ça parce que le h one me balise rafraîchir ceci. Ok, donc il y a notre hone tack. On va changer ça, parce que tu verras ici. Ce n'est pas vraiment centré ici, mais pour la plupart de nos sections, les titres de section vont aller de l'autre côté, et nous allons le vouloir centré. Donc encore une fois, c'est le style global que nous faisons ici reviendra et remplacera ce Ah, quand nous arriverons à la section actuelle ici. Ok, donc maintenant nous avons nos leads vont pointer le plomb et nous allons faire une hauteur de ligne de 1,25 et nous allons faire la taille de police sur, et nous allons faire 1.3 ram, et nous allons envoyer le texte au centre de la ligne, et encore une fois, nous allons déroger à cette disposition. Mais pour toutes nos autres sections, on va le garder. Envoyez cette marge inférieure 35 pixels. Ok, donc ça nous donne à la section le titre de la section, la balise de plomb que nous avons ajoutée. Ensuite, nous avons ah, ces trois sortes de modificateurs juste ici et tout. Juste que je vais juste laisser tomber les's parce qu'ils sont assez simples à comprendre. Donc le Tech Center va définir la ligne de texte pour le sénateur. Texte à gauche. centre gauche n'est pas texturé, sénateur. droite. Donc c'est une chose assez simple. Un autre que nous avions était l'image autour d'elle. Et nous en avons d'autres que je laisse ici parce que nous ne les utilisons pas encore . Au fur et à mesure que nous les utilisons, nous les ajouterons, mais l'image est arrondie. Et la façon dont on obtient ça, c'est que nous allons régler le rayon de la frontière à 100%, ce qui nous donne notre image arrondie. Et puis on avait nos boutons. Donc nous allons d'abord avoir notre classe de boutons comme ça, et nous allons, euh c'est là que nous allons faire une sorte de forme et de couleur par défaut et ainsi de suite. Donc on va faire le calibrage des boîtes. Nous allons à la zone de bordure et ensuite dit la décoration de texte à ne pas afficher en ligne. Nous voulons que ce soit un bloc, bloc. Et puis bien, pour défaut fera un fond de C c, C comme ça, et nous allons faire une couleur de noir comme ça. Donc, ce sera en quelque sorte les couleurs des boutons par défaut. Et puis nous allons faire un tapotement de 15 pixels et 20 pixels pour que vous puissiez voir le bouton changer en quelque sorte là-bas. Ne frontière aucun. Et nous allons faire une police d'attente en gras. Ok, alors c'est encore. C' est la valeur par défaut. Cherche les boutons. Et puis, euh, on va faire le bouton primaire. Ok, donc ça va nous donner notre couleur. Rappelez-vous, nous avons ajouté ça à ce bouton, donc aller au bouton primaire, et nous allons faire une couleur d'arrière-plan, et c'est juste une couleur que j'ai choisie. Tu peux choisir ce que tu veux, mais c'est une sorte de couleur violacée. Donc 890 b d d se trouve être la couleur. Et puis nous définissons la couleur de la police sur blanc. Ok, donc ça nous rapproche de ce qu'on a à faire ici. Vous pouvez voir ici. Il y a encore des choses qui sont un peu loin ici. Ah, qu'on a besoin de s'embêter. Et donc beaucoup de choses vont ensuite revenir à la le section sur lesujet ici. Donc après que nous l'avons fait, nous avons une sorte de truc de type réinitialisation de notre corps. Nous avons nos styles globaux. Ensuite, nous entrons dans notre section des trucs spécifiques. Donc, nous avons l'en-tête. Maintenant, on est dans la section à propos donc on va faire à propos de je vais juste laisser ça là. Je ne vais pas trop m'inquiéter pour ça. On peut nettoyer tout ça. Ah, plus tard. Donc, pour la section à propos, alors nous nous souvenons que nous avons dit qu'un I d pour la section à propos ciblait spécifiquement cette section. On va utiliser ça on fait du rembourrage de 120 pixels principalement pour nous éloigner de ce menu. Parce que ce menu est un fixe. C' est un menu fixe. Il est positionné fixe. D' accord. Pour le titre du site, rappelez-vous, Le titre de la section de cette section est également le titre du site. Donc on va faire un titre de vue, et on fait la taille de la police pour la RAM. Nous avions donc stylisé les tailles normales de section. Mais celui-ci est différent, c'est unique. C' est pour ça que nous l'avons écrasé. On va faire de la couleur, refaire cette couleur pourpre. 890 b. D. D. Comme ça. Et puis on va faire ah famille combattue et on va faire Yellowtail. Rappelez-vous, nous avons ajouté Yellowtail d'avant. C' est pourquoi nous avons ajouté Yellowtail. Et puis nous ferons une sauvegarde de San Serif cursif. Quel que soit le droit. C' est ce qui nous donne notre texte. On dirait que c'est juste en train de changer ça. Ah, cette friandise de Yellowtail en ce moment, nous allons spécifiquement styler les paragraphes principaux de notre section à propos. Donc, faites à propos de I d classe de leader, où à la place, la taille de la police de 1.35 ram Quand je mets la hauteur de la ligne, nous allons mettre cela à 1.3 et ensuite nous allons styler l'avatar lui-même. Souviens-toi, on a donné ça Ah ! Ah. Euh, cette image ici idée d'Avatar. Donc on va styler ça spécifiquement et on va lui donner une largeur de 400 pixels comme ça . Ce genre de choses nous ramène à ce que nous voulons. Hauteur, Auto. Bien que ça ne devrait pas vraiment avoir d'importance. Nous allons afficher le bloc pour que nous puissions centrer et ensuite nous allons à la marge zéro auto , ce genre de centres à un peu. Ensuite, nous pouvons faire la position relative, et nous pouvons faire le top et nous pouvons faire 50 pour cent. Ça va commencer à le centrer verticalement, et ensuite on se transforme. Souviens-toi de Fran transform d'avant. C' est une petite sorte de truc pour obtenir le centrage vertical, mais traduire pourquoi ? Et on va faire 50% négatif et ça nous met centrés au milieu. Donc, si vous faites ces ensemble position relative top 50% transformé traduire. Blanc négatif. 50 %. Ça te donne encore une petite astuce pour les centrer ici, donc Ah. ici, On dirait une dernière chose que je dois faire ici. Ah, c'est retourner dans Ah, ici. Tous ceux qui ont Voyons voir. C' est juste là. Je pense, Ah, je pense que je peux juste être capable de Au lieu d'ajouter du texte laissé tous ces, il devrait juste être capable d'aller ici et faire du texte à gauche maintenant. Je croyais que ça ne marche pas ici. Laisse-moi. Ah, on rafraîchit ma mémoire exactement ce que j'ai fait ici. Ok, eh bien, nous allons garder ça simple ici, et nous allons juste retourner dans le CSS ici à propos du point de plomb, et nous ferons juste un texto comme ça. Ok, donc ça nous donne notre texte d'alignement gauche. Ah, ici. Et donc nous allons venir en quelque sorte étendre ça un peu et cliquer dessus d'ici. Vous pouvez voir en quelque sorte, mais ça nous donne si nous revenons. Amenez ça. Nous avons eu des regards à peu près identiques à ce que nous avions leur OK, donc c'est comme ça que nous faisons la section à propos et encore une fois le bouton ici, juste une sorte de quand vous cliquez sur ce petit clic vers le bas à la section taxe de contact. Il y a une autre chose que je fais aussi, c'est que j'ai commencé à faire ça. J' en ai vu d'autres me faire ça. J' aime ça pour les requêtes des médias. Ce que je faisais, c'est juste mettre tout l'engouement médiatique au fond. Le problème est, c'est que vous savez, les requêtes de médias référençaient différentes sections. Si vous les mettez tous en bas, alors vous avez une sorte de rebond d'avant en arrière. Et donc j'ai trouvé ça un peu plus facile de l'organiser. Je fais juste mes requêtes média pour une section particulière. Ah, juste ici dans la section elle-même. Donc je sais que cette requête médiatique, ces quatre, cette section particulière donc on va faire et ensuite on est dans le point Ah, titre du site et on va envoyer un texto au centre de la ligne comme ça. Ok, et ça arrivera juste quand ça finira par se passer comme ça. Donc ce centre du Texas, au lieu d'être laissé, aligné, ok ? Et maintenant, nous pouvons faire si vous voulez, nous pouvons faire la même chose pour le bouton et ainsi de suite. Ah, dans certains des pécheurs, certains de ces trucs, nous allons entrer dans des questions des médias et d'autres endroits. Hum, et en fait, ouais, ça . Donc, si nous revenons à nos styles globaux et que nous allons à notre bouton, nous en avons aussi un ici . Donc les médias et mon ex wit, 760 pixels et nous allons faire bouton point comme ça, et nous allons faire avec 100% comme ça et marge zéro auto et le centre d'alignement du texte. Ok, donc ça fait de notre bouton comme ça. Si vous vouliez centrer ce texte ici, vous pourriez certainement ajouter cette requête aussi. Tu sais, ce n'est pas quelque chose que ah, tu sais, à ce stade que je voulais, je préfère laisser une ligne comme ça. Hum, et donc ah, tu peux faire ça. Donc, toute façon, j'aime mettre ces requêtes médiatiques ici, donc je sais que cette requête média va avec ça. Le quelque chose dans cette section des classes de cette section. Vous savez, cette requête média vient avec les classes ou je ds dans cette section particulière, et je n'ai pas à les trouver dans les trucs du bas. Donc, euh, c'est encore une fois, c'est quelque chose que j'aime faire là-bas. Mais c'est le sujet de la section Ah, a été coiffé. On va continuer ici. Je vois. Il y a peut-être un petit quelque chose avec le rembourrage ici, et quand on fait défiler ici comme ça, alors on va aller de l'avant et ah, répare certains de ces trucs. Mais je vais aller de l'avant et terminer cette vidéo ici, et nous allons passer à travers certains de ces trucs en avançant ici. 7. Créer la section Compétences: D' accord. Cette leçon. On va entrer dans cette section de mes compétences ici. Vous serez en mesure de voir un exemple de style de l'arrière-plan ici et ainsi, la force. On va faire ça. Parlez d'une liste de fonctionnalités avant de le faire. J' ai oublié la dernière leçon à propos du nettoyage de cet espace ici, puis cette photo arrive au-dessus d'ici. J' ai oublié la dernière leçon à propos du nettoyage de cet espace ici, puis cette Donc, la première chose est, Ah, j'ai juste raté une partie de la déclaration CSS ici sur l'en-tête set. Une des choses que nous voulons faire est de définir l'indice Z ici 23 et cela fera en sorte que lorsque nous faisons défiler tout le reste passe en dessous de celui-ci. Donc on a eu ça. Ah, l'espace ici. Assez intéressant. Je n'avais pas remarqué cela quand je l'avais construit avant, mais c'est en fait là dans le responsive you. Ah, et ce que j'ai construit jusqu'à présent avait besoin d'ajouter des trucs qui n'étaient pas dans l'original. Donc, ce que nous allons faire, c'est aller à la grille de ce CSS et nous avons ce pas de gouttière. Maintenant, nous allons ajouter cette application appelée no gap car pas de gouttière est les écarts entre les colonnes et vous pouvez voir que nous définissons l'écart de colonne de grille et nous voulons encore que pour notre Nous voulons que pour notre section de portefeuille, mais il y a aussi le la partie ci-dessous lorsque vous avez un Siri lorsque vous avez une ligne en particulier. Dans ce cas, il y a aussi un espacement qui peut être ajouté en dessous de cela. Et on voudra peut-être qu'on ne veuille pas avoir ce mai. On voudra peut-être nous en débarrasser. J' ai donc décidé de créer une nouvelle déclaration CSS appelée No Gap et Set the Grid gap 20 Et donc, donc, afin de corriger cela, ce que nous faisons c'est que nous venons. Une fois que nous avons cette déclaration CSS, nous arrivons à notre en-tête de site ici et nous arrivons à notre ligne parce que si vous vous souvenez dans grille, nous définissons l'écart de grille à 20 pixels sur la ligne ici. Donc, euh et nous pourrions probablement le faire comme écart de colonne de grille au lieu de l'écart de grille. Hum, et ça aurait pu être essayé. Laisse-moi voir ici. Ouais, tu vois, donc ça pourrait arranger ça aussi. Vous pouvez voir que cela a disparu parce que maintenant nous n'ajoutons pas l'écart ci-dessous, donc c'est une façon de résoudre ce problème. Euh, mais je pouvais aussi te voir dire, eh bien, je veux ça. C' est juste que je ne veux pas qu'il y ait là pour celui-là en particulier, non ? Je veux un peu d'écart quand je fais Rose. C' est juste que je ne veux pas de ça pour ça. Encore une fois, nous avons ajouté ceci. Pas d'écart. Ah, pas de cours Gap ici. Donc on vient juste ici. Nous arrivons à notre ligne pour notre en-tête ici, et nous ajoutons que ce cas de classe sans écart était de deux façons différentes que vous pouvez faire cela. C' est vraiment à vous de décider. Quoi ? Vos préférences. Mais cela reçoit la parole de cette lacune et là que cet extra et nous faisons défiler cela. Ensuite, nous voyons que c'est toujours la même chose. Faites notre menu ici. Tout fonctionne toujours de la même façon. Sélectionnez qui nettoie ce truc ensuite. Ensuite, on descendra et on ira à notre section suivante, qui sera notre section de mes compétences. Alors viendra ici, va créer une nouvelle section et donnera à la classe égale section comme ça et laissez-moi faire défiler ici juste un peu. Section si classique. Et puis on va donner à ça un I D. de compétences. Rappelez-vous, ils ont tous besoin d'avoir j'ai fait i ds parce que nous sommes en lien avec eux dans notre menu. Ok, donc ce n'est pas seulement pour le ciblage CSS. C' est aussi à des fins de liaison et puis une sorte de ce que vous avez utilisé pour div classe égale conteneur , et nous allons faire un div de Roe comme cet ennemi Rhône jusqu'à Donc et puis nous allons avoir ah classe div avec une colonne de 12 12 calme. Donc on va faire des égaux de classe et ça va être une sorte de tête, te souviens ? Ah, appelez 12. Ah, du mdn. Il dit que chaque section devrait vraiment avoir un en-tête avec une balise h one afin que les machines sachent que pour cette section, c'est l'en-tête. Vous pouvez le mettre n'importe où là-dedans, mais quand il va chercher cette balise d'en-tête et donc nous allons à la classe égale en-tête de section . Et maintenant, nous commençons à compter sur certains de ces styles globaux que nous avons créés avant l' en-tête de section à H une classe égale le titre de section, j'entends Et puis nous ferons mes compétences. Ok, donc maintenant on a un peu de ce style. On a le rembourrage autour de la section. On obtient les tailles de police dans les poids de police et tout ce qu'on a fait pour nous donner ce genre de style automatique ici. D' accord, ensuite on va faire des Equals de classe P et on va diriger. Et puis je vais juste dio, j'ai les compétences pour faire ton travail. Droit ? Je me suis spécialisé dans quelque chose comme ça. Bien sûr que vous pouvez mettre ce que vous voulez ici, mais c'est ce que je mets ici, et c'est notre en-tête. Nous avons donc notre en-tête, nous avons un titre pour et nous avons une description pour cela. C' est une sorte de chose standard que vous voulez essayer de faire avec chaque section que vous créez. Lorsque vous créez une section comme celle-ci, assurez-vous d'avoir une tête ou un ah, et une description. Maintenant, nous allons réellement faire la liste des fonctionnalités à nouveau. Souviens-toi, ça ressemble à ça, donc on va faire quelque chose de simple comme ça et on va créer une liste de fonctionnalités , et on ne va pas faire ah, dans la liste d'ordre. En fait, on allait juste faire, on va faire Ah, dibs pour ça. Ok, donc nous allons faire Ah, en fait, en fait, nous avons besoin d'orteils sortir de cette route parce que nous allons faire une nouvelle rangée va faire une toute nouvelle rangée à l'intérieur d'ici, donc la classe Div égale rangée et nous sommes va lui donner une classe supplémentaire appelée liste d'entités. Bon, alors et ensuite on va le faire, on va en faire trois. Ça va à DIV. La classe est égale à la force d'appel. On va faire quatre colonnes. On va faire un élément de fonctionnalité, donc il y en aura pour chaque élément, et ensuite on va faire un centre de texte comme ça, accord ? Et à l'intérieur de ça, nous allons avoir une icône utilisant la police. Génial. Donc, je classe égale F A et F A Celle-ci, on va le faire, et ensuite on appellera cette fonctionnalité Icahn pour qu'on puisse la cibler si on veut. Droit. Donc c'est l'icône. Et à l'intérieur de ça, on va avoir une étiquette h 3, on va donner à cette classe un titre de fonctionnalité égal. Et j'aime bien Teoh. J' aime le faire comme ça où je donne chaque genre de chose Ah, classe pour que je puisse le cibler très, très facilement. Et quand nous entrons dans les C, je ne pense pas que nous ciblons chaque chose, mais nous ciblons une bonne quantité, et à un moment donné, vous voudrez peut-être le faire. Donc nous allons un paragraphe de, hum, description en vedette comme ça, et laissez-moi juste copier ça. C' est juste un peu plus facile de copier le texte. C' est juste le texte de celui-ci. Ok, donc ce qu'on a ici, alors, c'est qu'on a cet article, et c'est dans une rangée de colonnes tout ça. On a un Nikon, on a un titre, et on a une description pour chacun. Ah, une de mes compétences ici. Ok, donc ce que je vais faire, c'est de retaper les trois derniers. Je vais juste coller les deux derniers ou quoi que ce soit par ici. Donc on en a deux de plus. Comme ça. Icône différente, sorte de nom différent. Hum, personne, en fait. Laisse-moi corriger ça. Une sorte de double copie ici. Lente-moi. Nous avons donc à nouveau une icône, un titre et une description pour chacun d'entre eux. Vous pouvez, bien sûr, les changer pour ce que vous voulez. Ok, donc c'est le code HTML de la section à nouveau. Assez simple. Mais maintenant je veux entrer dans le style, euh, tout ça. Donc ce qu'on va faire, c'est qu'on va retourner. Laisse-moi aller de l'avant et voir ça ressemble à apprendre à Mountain Save, et on va retourner chez notre pigiste. 01 fichier CSS. Ici et encore, nous le sommes. Il y a quelques choses ici. Donc, une liste de fonctionnalités comme celle-ci est quelque chose que nous pourrions utiliser à plusieurs endroits, c'est pourquoi je l'ai écrit de la façon dont chaque odeur comme je l'ai fait. Donc, je vais vraiment mettre la plupart du style pour cela. Certains des styles de base sous les styles globaux. Et ensuite, je pense que nous avons un peu pour la section des compétences. En fait, pas beaucoup pour la section des compétences. Donc, la plupart de cela va provenir de la liste des fonctionnalités parce qu'une fois que vous avez le CSS écrit, vous pouvez déposer dans une liste comme ce genre de n'importe où en utilisant ce sage, même HTML et cela rend tout Ah, diable d'un beaucoup plus facile le rend plus réutilisable et ainsi de suite. Donc certainement ce que je recommande de faire avec cela. On va venir ici sous le bouton primaire et on va faire la fonctionnalité. Je ne me souviens pas que c'était une sorte de conteneur de chaque article, et donc nous allons faire du rembourrage et nous faisons 20 pixels pour lui donner un peu de rembourrage . Et puis on va mettre Icahn en vedette. Donc on va cibler l'icône. Et donnons à cela une taille de police de 24 24 pixels ou 1,5 jante Ramsar basé sur le tout . Ah, la taille de police a été sélectionnée en quelque sorte par l'appareil. Donc, s'ils sont sur un téléphone ou un ordinateur, quel navigateur particulier. Généralement, il est de 16 pixels, donc 1,5 ram serait le même que 24 pixels seraient 16 plus 8 à 24 pixels. C' est pour ça que servent les jantes. Généralement, vous devriez vraiment utiliser les royaumes. J' ai juste l'habitude de faire la chute comme je le fais ici. Ok, alors on va faire un fond sur ces icônes. On va utiliser les couleurs violettes qu'on va faire 890 b d j ce qui leur donne un peu d'arrière-plan. On va rendre les icônes blanches comme ça. Et puis faisons un remplissage de 15 pixels. Vous pouvez jouer avec un peu de ça, et ensuite on fera notre rayon de frontière de 100 % et ça va nous arranger . Ok, donc ça nous donne les jolies icônes rondes là-bas. Après cela, c'est la fonctionnalité et nous allons faire le titre. Donc stylisez les titres ici. On va faire la taille de la police et on fait 28 pixels. , On est dans le rembourrage en bas de 10 pixels,puis bordé en bas un pixel solide tous les 40 44. OK, donc je nous donne un peu de style comme ça nous donne notre frontière et ainsi de suite. Donc c'est la section titre. Maintenant, la section de description que vous voyez, parce que nous faisons cela Ah, parce que nous leur avons donné toutes ces classes descriptives qui le rend vraiment facile à cibler. Ceux-ci donc description de fonctionnalité fera la taille de la police 20 pixels et la taille de la police sur 0.25 chambre. Ne te fais pas prendre dans le fait que je ne l'ai pas fait ici. Je ne l'ai pas fait quand je l'ai écrit. Probablement juste oublié. Et puis les maths pour 20 huit un peu. Qu' est-ce qu'à 1,75 ? Est-ce juste, taille de police 1.75 autour. Je ne voulais pas faire de maths à la volée ici, mais je pense que c'est juste. D' accord. Et puis pour la description fera ligne haute. Ne sois pas trop pris dans ce truc. C' est juste moi d'être incohérent. D' accord, donc ça nous donne, alors sont ma section de compétences Ah, notre liste de fonctionnalités que nous pouvons utiliser et nous utilisons dans cette section de mes compétences ici. , La dernière chose que nous allons faire ici,c'est qu'on va descendre et qu'on va créer une nouvelle section appelée Compétences. Donc nous n'avons pas une tonne de style à faire ici, mais nous en avons un peu. Donc on va faire des compétences et ensuite créer notre titre de section ici. Et tout ce que nous avons à faire est de styliser cette section elle-même. Et c'est de ça que je parle. On va faire de l'arrière-plan, et on va faire le numéro F A f A f a et ça donne un peu de ce fond grisâtre . Laisse-moi retirer ça un peu pour que tu puisses voir que c'est blanc ici . Maintenant, nous avons un peu de ce fond grisâtre étend toute sorte de largeur du navigateur, tout comme ce que nous avions ici de notre original. Donc c'est la section de mes compétences. Il crée également une liste d'entités. Nous le mettons dans la section de style global afin que nous puissions le réutiliser si nous voulons créer une autre liste de fonctionnalités comme celle-ci. Nous avons un style de base. Hum et puis si vous voulez le remplacer, vous descendriez dans la section quatre spécifique où vous ajoutez cette liste d'entités , et vous l'écraseriez. Donc, c'est généralement comme ça que j'ai essayé d'organiser mes yeux CSS, avoir des styles globaux, puis comment vous avez vos sections individuelles et ainsi de suite et vous commencez avec le style le plus global. Donc, nous commençons au sommet avec, vous savez, vous savez, cibler le corps et tous les paragraphes et la taxe à l'importation comme très, très large. Ensuite, nous entrons dans les titres globaux, qui sont des classes de style que nous allons utiliser Ah, à travers plusieurs sections et plusieurs pages, etc. Et puis nous nous retrouvons à différents types de composants, vraiment comme une liste de fonctionnalités et ainsi de suite. Et puis vous entrez dans vos sections individuelles et puis si vous le vouliez, si vous avez plusieurs pages, vous en dessous, vous entrez dans ah ah ah, style pour des pages spécifiques sur le site, que vous peut le faire. Il commence à partir des mouvements les plus généraux jusqu'au plus spécifique. Et c'est généralement comme ça que vous devriez faire votre CSS avec la façon dont les feuilles de style en cascade fonctionnent et la cascade vers le bas. Ah, c'est ce que tu veux faire. 8. Créer la section du portfolio: cette leçon. On va construire cette section de mon portefeuille ici, on va utiliser le script de requête Ah J appelé Fancy Box pour faire ça. Si tu le regardes ici, ça va se calmer. Et puis il a quelque chose. Nous pourrions en quelque sorte cliquer sur tous les différents projets ici. Donc c'est ce que nous allons construire cette section dans cette leçon, avant d'entrer dans ça, j'ai remarqué que cette image continue de se chevaucher. Vous avez peut-être vu que c'est bien, comme nous traversons, et je suis juste en train de suivre le cours et j'allais dans mon esprit. Comme quoi ? Parce que je savais que j'avais mis cette image ici et le Mac Max avec fixé ici. Mais vous remarquerez que j'ai une faute de frappe ici. Donc, si vous avez remarqué que si on change ça à Max à l'intérieur, ça fait ce qu'il est censé faire, ah, souvent, souvent, c'est comme ça que ça se passe. Quand, quand tu codes. Donc je voulais juste une solution rapide aussi rapide. Ah, et ensuite on pourra passer à autre chose. Donc, pour construire cette section de portefeuille, la première chose qu'il y a quelques choses que nous devons faire pour mettre en place cela. Donc d'abord, je vais venir ici à la structure des dossiers ici et dans notre dossier de travail et sous nos images ici, je vais créer un nouveau dossier et je vais appeler ce portfolio. Donc on va mettre toutes nos photos de portefeuille ici et ensuite je vais faire glisser ça très vite. Ah, ce sont les images que nous allons utiliser. Et je veux dire, ces air viennent d'être édités dans la boutique photo. Essentiellement, vous verrez ici nous avons un 1920 par 10 80 puis nous avons une version plus petite, qui est 300 par 169. Et c'est juste une sorte de ce que j'ai compris à nouveau en jouant un peu avec ça et en obtenant les dimensions que je pensais avoir l'air juste et que je voulais que tu puisses jouer avec ça. Peut-être que tu veux trois à travers, ou peut-être que tu veux traverser ou six à travers ce que tu veux, mais tu peux jouer avec ça. Mais vous voulez des images. Vous voulez que l'image plus petite ici et que vous voulez que l'image plus grande ici orteil affiche ceci comme ceci de sorte que lorsque les gens cliquent sur cette petite image, elle apparaît. Bon, donc ce que je vais faire et ça, je veux dire, je viens juste de recevoir ça de, Ah, je pense que je viens juste de, comme, des pixels ou un des sites libres libres de redevances qui est là-bas pour des images. Bien sûr, pour vous, si c'est votre portfolio, vous allez utiliser des photos de vos articles de portefeuille ou si c'est pour un client ou autre, alors vous allez utiliser leurs photos qu'ils 'll probablement besoin de vous fournir. Mais obtenir ces airs juste une sorte d'espace réservé pour cette démo alors je vais faire, c'est juste que je vais prendre tout ça et nous allons les télécharger dans le dossier de portefeuille que je viens créer. Donc nous étions tous là dedans, donc c'est la première chose que nous devons faire. La prochaine chose que nous devons faire est que nous avons besoin d'installer ah, boîte de fantaisie et donc sont en quelque sorte chargés ici. Et donc si vous n'êtes pas familier avec la boîte de fantaisie va juste venir et nous pouvons juste google boîte de fantaisie et vous le verrez droit en haut. Ici. Celui-ci est en fait une sorte de l'ancien site Vous voulez utiliser celui qui est fantaisie aps dot com ici. Et ça va alors ou en fait, je suppose que tu dois cliquer ici. Oui. Donc boîte 3 fantaisie. Il suffit donc d'accéder à la dernière version. Ils font un très bon travail de liaison avec elle. Et puis vous pouvez voir ça ici, vous pouvez voir le début rapide ici. Et ce démarrage rapide est essentiellement ce que nous allons faire, parce qu'ils ont ces hébergés sur Ah, ils ont un hôte sur Cloudflare et d'autres choses différentes. Donc nous allons juste utiliser ce cdn pour cela et vous pouvez voir qu'il y a une feuille de style ici, et ensuite vous pouvez voir qu'il y a aussi ah, script, script, et vous aurez besoin de Jake s'inquiéter avec ça. Donc, je vais aller de l'avant et juste saisir le lien ici, et c'est ce que nous allons avoir besoin pour la feuille de style et reviendra à notre Je vais fermer ceci et revenir à son index point html et nous allons venir au sommet et laisser je remets ça une seconde ici. Et j'ai essayé de tout garder ensemble. Maintenant. Ah, j'aime les séparer de tout le reste. Donc je vais faire ah, commenter ici. Je vais juste faire le composant CSS parce que c'est ce que c'est essentiellement un composant. On va accélérer ça. Et si nous avions d'autres composants, nous pourrions les rythmer là-dedans. Ah, aussi. Mais pour l'instant, on a juste une boîte de fantaisie. Ok, donc ça va nous donner le CSS. Et puis maintenant, nous avons besoin du script Java aussi pour aller avec cela. Donc on va descendre et mettre ça sur la photo ici ? vois, on a déjà Jake, on est là, donc on n'a pas à s'inquiéter pour ça. Et nous allons juste prendre le script pour la boîte de fantaisie ici, la décoration de script, et nous allons prendre ça et nous reviendrons et nous allons descendre à notre pied et nous allons juste assurer et coller après la requête G A ici. Donc de cette façon, Jaques a chargé et puis des boîtes fantaisie chargées. Et puis notre freelancer dot Js est chargé. Euh, parce qu'au cas où nous aurions besoin de faire des cas, vous voulez faire n'importe quelle sorte de, vous savez, il y a beaucoup de personnalisation, c'est que vous pouvez faire avec ça. Il y a beaucoup de façons différentes de configurer ceci et ainsi de suite. Et beaucoup de fois pour le faire, vous devrez le faire dans une Écriture Java et d'autres JavaScript afin que vous puissiez le faire dans votre freelancer. Ah Js dossier ici. C' est donc généralement le meilleur endroit pour les mettre. Très bien, donc cela nous donne notre CSS et notre javascript dont nous avons besoin pour le travail des orteils de boîte fantaisie. Maintenant, nous devons simplement construire ceci à l'intérieur de notre index dot html. Donc nous allons descendre et, vous savez, vous savez, nous avons notre dernière section où nous avons fait notre section de compétences ici, et ça finit ici. Donc maintenant, nous allons créer notre nouvelle section ici, et ça va être pour nos articles de portefeuille. Donc, nous allons faire section et classe égale section et je d égale bien, portefeuille et puis créer notre section. Et puis, bien sûr, comme nous l'avons fait ici. La classe est égale à conteneur, la classe active est égale à la ligne. Et puis nous allons faire notre en-tête ici. Donc nous allons faire des égaux de classe div et nous allons appeler 12. Et ils allaient à la classe d'en-tête égal à l'en-tête de section. Et ensuite, nous allons faire notre H dans notre titre de section et ici nous allons juste mettre mon portfolio. Évidemment, vous ne pouviez pas faire ce que vous voulez et ensuite ci-dessous qui fera notre description. Donc, la classe P est égale et fera centre de texte de plomb, et ensuite nous le ferons. Voici toutes les choses cool que j'ai construites pour mes clients géniaux ou tout ce que vous voulez y mettre . Donc vous vous sentez libre de mettre ce que vous voulez y mettre. Mais ce genre de nous donne notre en-tête de section et vous pouvez voir que nous avons notre marque ma section de portefeuille ici. D' accord, donc c'était notre, ah, notre colonne 12 avec Appelez-les là-bas. Maintenant, nous voulons nous lancer dans la construction des sections du portefeuille et il y a une tasse. Juste quelques choses que nous devons ajouter Pour que cela fonctionne avec la boîte de fantaisie, C'est un script javascript r j crace et il y a aussi le CSS. Donc ça va s'occuper de la plupart de tout, Force. Nous avons juste besoin d'écrire notre HTML correctement. Donc on va faire, c'est qu'on va faire des égaux de classe de div et on va faire des rangées, puis on va pas faire de caniveau et on va faire du portefeuille. Ok, donc tous nos portefeuilles, ils vont aller à l'intérieur de ces différentes rangées et ensuite nous allons faire des égaux de classe div et nous allons appeler trois maintenant. Vous pourriez changer ça, selon la façon dont. Pourquoi veux-tu que des années soient ? Tu sais, tu pourrais faire quatre calmes avec comme je fais trois colonnes Let's etcetera. Nous allons à l'article de portefeuille et ensuite ici. C' est là que nous entrons dans les trucs spécifiques de la boîte de fantaisie. Donc, nous allons faire un lien ou aller à un et nous allons à la boîte de données et nous allons mettre ça égal à la galerie. C' est ce qui va nous permettre de quand nous afficherons un des objets de portefeuille la Ford et les héritiers arrière de cliquer à travers lui. C' est ce qui permet que cela indique boîte de fantaisie. C' est ce qu'on veut. Il y avait des sources de données ont été définies qui égale à la livre 001 Donc, c'est essentiellement spécifier un I d. C'est le i d. Où c'est le moment où nous cliquons sur ce, um c'est là que nous voulons obtenir le contenu du i d dont nous voulons obtenir le contact . Je vais vous montrer ce contenu de je suis sûr que dans une seconde, un trafic est vide parce que nous ne sommes en fait pas de lien vers quoi que ce soit ici, est-ce pas ? Et à l'intérieur, on va faire notre image. Donc on va faire des images sources égales, et on va être une petite image. Donc on va faire des images pour couper le portefeuille parce qu'on l'a mis dans ce dossier et ensuite on veut la petite version. Donc 001 petit point j peg et je vais faire tous les égaux. Zéro. Il y en a un ? Évidemment, votre profil, les articles vont faire référence. Ils vont référencer différents projets ou noms de clients. Donc votre ancienne étiquette serait probablement quelque chose lié à ça. Ok, donc ça nous donne notre image. Ici, laissez-moi aller de l'avant et enregistrer ceci et peut-être ne pas charger l'image juste parce que nous devons recharger ceci et ils voient ici. Et en fait, c'est le cas. L' image est en fait chargée. Juste vraiment petit va gâcher ça en une seconde. Je veux juste écrire l'odeur de tout âge ici. Ok, donc maintenant qu'on a fait ça une balise, alors on va créer la chose qui apparaît réellement quand on clique sur ce bouton. Donc, nous allons faire des égaux de classe div et ou en fait nous allons faire affichage de style div égal . Les religieuses étaient juste en train de régler ça pour n'en afficher aucun. Et ils allaient à la classe égale port folio pop. Donc c'est le pop-up, et ensuite on va dire que je suis égal à 001 donc c'est la référence ici. Ok, donc quand on dit la source de données ici et qu'on met un I D c'est l'i d que nous avons mis ici. Donc, peu importe ce que vous définissez, vous devez également vous assurer ah, et définir la source de données ici aussi, aussi . Ok, donc c'est comme ça que tu fais correspondre ça quand je clique dessus. C' est ce qui apparaît. Ok, c'est important à savoir. Maintenant, avec une boîte de fantaisie ici. Ok, donc maintenant à l'intérieur qu'on va faire une autre rangée, euh, et à l'intérieur de ce qu'on va faire, on va faire une colonne 88. Donc je vais appeler huit et puis, ah, ah, on va me laisser aller de l'avant et faire l'autre ici. Donc on va faire appel à la classe div égal pour l'instant. Encore une fois, vous pouvez construire. C' est tout ça qui va apparaître quand ça sera cliqué. Donc encore pour la boîte de fantaisie. Tu as juste besoin de ça ici. Lorsque cela est, cliquez sur ce bouton apparaît. Vous pouvez construire ce que vous voulez à l'intérieur d'ici. C' est juste ce que j'ai construit. Vous pouvez en quelque sorte exposer cela comme vous le souhaitez. Ok, alors gardez ça à l'esprit pendant que vous construisez ça. D' accord ? Donc la chose que je vais mettre ici sur ce huit-là calme de quel côté est l'image ? Donc je vais faire la source de l'image, et nous faisons des égaux et nous allons des images slash portfolio, et ensuite nous allons faire 001 points j pick. Donc c'est la pleine 1920 par 10. 80 avec ici. Et je vais faire tous les égaux. Il y en a encore une. OK, donc c'est l'image complète. C' est ce qui sera là quand on sera là. Pop ça. Cliquez ici. Tu vois, on a ça de ce côté là-bas. Ok, donc c'est ce côté de ça. Assez simple. Et puis de l'autre côté, on va juste mettre notre titre et notre description. Donc nous allons faire H 3 et nous allons à la classe égale titre du projet. Et puis on va faire du projet. Je suis juste en train de mettre en place. Donc nom du projet. Évidemment. Vous mettriez le nom de tout ce que ce projet était alors je fais la classe div égale plomb et description du projet. D' accord. Et puis ici étaient juste que vous mettriez votre description de produit. Je vais mettre un texto factice. Je ne vais pas tout écrire ici, parce que c'est un peu inutile. Donc je vais juste déposer une Lauren Ipsum ici qu'on peut utiliser pour nous donner une idée de ce que ça va ressembler sur moi. Nettoie ça. Bon, alors maintenant, quand nous cliquons sur notre article de portefeuille, maintenant nous avons quelque chose qui ressemble à ceci. Ce n'est pas forcément la chose la plus belle ici. Peu importe. Mais tu sais si on nous a sortis ici. Cela vous donne une petite idée de ce à quoi ça doit ressembler. Ok, donc non, c'est un début. Et puis vous pouvez en quelque sorte styliser ça. Comme vous le souhaitez, vous pouvez le modifier en fonction de, vous savez, les différentes tailles d'écran et ainsi de suite. Encore une fois. Notre grille a déjà une partie de cela intégré. Vous pouvez en quelque sorte embêter avec ça comme bon vous semble. Très bien, donc ça nous donne une sorte de base ici. Ah. Maintenant, ce que nous voulons faire est que je vais juste aller de l'avant et que c'est le type de modèle de base pour créer un élément de portefeuille. Ok, donc tu dois faire ça pour chacun d'entre eux. Donc, cette partie essentiellement, ici, tout cela, vous copiez et collez tout cela, et ensuite vous iriez entrer et changer. D' accord. Je vais utiliser cette image, je vais changer cet orteil pour changer ça. Je vais changer toutes les images, la description du projet, etc. Mais la mise en page réelle du HTML est la même, donc je vais aller de l'avant et prendre le reste de ces éléments de portefeuille que j'ai ah, pré fait ici pour que nous puissions passer ce assez rapidement au lieu de taper tous ces trucs sur et il y en a beaucoup ici, ça prend une seconde. Bon, donc on va juste déposer les's ici et vous pouvez voir que ça nous donne. Maintenant, nous avons une sorte de rangée, différentes images ici et ainsi de suite. Maintenant, une des choses que vous verrez ici est après le numéro 4 ici. Nous fermons effectivement notre ligne et puis nous créons une nouvelle ligne ici, donc orteil, afin de nous donner deux rangées, nous voulons différent rose sur ce ici. Donc juste garder cela à l'esprit avec ceci pour les différentes routes que vous voulez fermer la route, puis puis créer un nouveau rôti. On fait des rangées de quatre. Ok, donc ça nous donne une sorte de structure HTML de base. Vous pouvez les voir ici. Je veux dire, il y a des trucs qui se passent ici que nous devons réparer. Vous pouvez voir que je peux cliquer sur tout ça ici. Nous avons la fonctionnalité de base. Ah, en place ici. Alors la prochaine chose que nous devons faire est que nous devons entrer dans, ah, le CSS réel. Et on va en quelque sorte débarquer certains de ces trucs ici. Nous allons donc descendre sous nos sections de compétences ou faire défiler vers le bas sur les compétences et nous allons créer une nouvelle section. Je vais prendre ça et, eh bien, accélérer ça, et ensuite on appellera ce portefeuille. Ah, et puis en bas qu'on va faire un peu de style ici. Donc la première chose que nous faisons est le titre du projet, et c'est pour le pop-up réel ici. Ok, donc je voulais juste qu'on agrandisse ça un peu. Donc je vais faire la taille de la police, et je vais faire trois bords ici, et ensuite on fera la marge zéro. Donc c'est un peu plus près de la hauteur de la ligne. On va en faire une. Et je vais faire la famille de polices comme Yellowtail juste pour le donner un peu, vous savez, conçu pour ça fera cursive. C' est une réponse comme ça. Et puis je vais faire notre couleur violette. Donc livre et puis 890 b d c nous donne notre couleur pourpre ici. J' ai oublié une virgule après ça, donc ça nous ramène notre Yellowtail. J' ai oublié une virgule après ça, Bon, donc ça nous donne le titre du projet. Et la prochaine chose que nous allons faire ici, c'est que nous allons faire notre réactivité. On va ajouter des médias, et je vais faire Max avec je vais faire 768 pixels ici. Donc nous ciblons n'importe quoi. C' est 760 pixels. Sauf si et nous allons faire des portefeuilles pointus vont cibler notre classe de portefeuille, et ensuite nous allons cibler nos trois colonnes ici sont appelées trois. D' accord. Et ce qu'on va faire ici, c'est changer ça pour changer notre colonne de grille, et on va la changer pour s'étaler sur six. Donc essentiellement comme ces Ah, mesure que nous devenons plus petits ici, ils vont changer, aussi. Et donc, envergure trois envergure six. Ah, donc c'est essentiellement ce que ça fait. L' air ici est parce que, euh, en fait, c'est à cause d'une accolade. Mais aussi cet éditeur, peut-être qu'il a été mis à jour, mais il n'a généralement pas été de reconnaître cette grille CSS. Donc c'est l'une des raisons pour lesquelles certains de ces trucs ont ces petits airs dessus dans mon I d. La prochaine que nous allons faire est que nous allons faire ensuite la prochaine taille d'écran vers le bas que nous allons cibler. Donc on va faire les médias. On fait avec Max, on va faire 480 pixels et on est là. On va changer la colonne de grille, et on va changer ça pour couvrir 12. Donc ça va être plein, et ensuite on va mettre le texte au centre et c'est notre et en fait, euh, on doit cibler. Euh, nous devons cibler quelque chose ici. Je viens juste de commencer à écrire. Je fais toujours ça un peu quand je m'amuse avec les trucs réactifs. Parfois, j'oublie de taper la déclaration réelle ici. Comme quoi ? Nous ciblons l'élément ici. Donc nous allons cibler ce portefeuille appeler trois éléments ici encore. Et puis on va le dire pour couvrir 12 et des lignes de texte là-bas. Ok, donc ça nous donne notre réactivité. Maintenant, nous avons encore ce petit peu ici, et en fait ce que j'ai réalisé, c'est que ça n'a rien à voir avec le CSS. On revient ici, tu vois, j'ai cette route ouverte ici, et je ne l'ai jamais fermée. Et nous devons nous en assurer et revenir. Et nous devons fermer cette rangée comme ça et ensuite ça. Donc, fondamentalement, nous étions imbriqués à l'intérieur d'une autre rangée, et cela était à l'origine de nos problèmes. Donc maintenant vous voyez ici que ces air tout le chemin, qu'ils devraient être de la taille qu'ils devraient être, donc nous n'avons pas vraiment à les dimensionner. Si nous pressons cela, alors vous voyez que cela se transforme en ceci est l'endroit où nous changeons de la plage trois à la plage six. Et si nous continuons finalement, nous arrivons là où c'est Ah, c'est une colonne avec large ou quoi que ce soit. Donc c'est plein avec. C' est donc ce que la partie réactivité fait pour nous. Aide cet orteil. Ah, fais ça. Et puis, bien sûr, nous avons encore ici sont notre projet ici. On pourrait entrer si tu veux. Tu peux venir ici. Je vais laisser ça comme quelque chose pour toi. Peut-être qu'un petit défi pour vous de comprendre est, vous savez, entre ça comme ça et quand ça arrive au plein avec comme ça, peut-être que vous voulez faire. Peut-être que vous voulez cibler quelque chose entre les deux ici, juste ici pour que ça ressemble un peu mieux. Alors je pars. C' est un défi pour vous, pour savoir comment aller de l'avant et faire cela. Donc c'est en fait ça. La section du portefeuille semble être un peu plus compliquée, mais en fait fantaisie. Mais Box fait tout le travail pour nous. Une fois que vous obtenez ce premier élément configuré ici, vous pouvez vraiment simplement copier et coller votre chemin dans le reste de celui-ci. Et rappelez-vous, quand vous arrivez à ça, quand vous voulez créer une nouvelle ligne, n'oubliez pas de fermer la ligne et d'ajouter une nouvelle ligne ici. Hum, et comme je l'ai dit encore, boîte de fantaisie fait tout le travail dur ici. Et l'autre chose est, assurez-vous juste que cette source de données cible la div ou tout ce que vous voulez apparaître dans. Ah, cette boîte de contenu quand elle apparaît ici et une fois que vous faites ça, c'est vraiment assez simple. 9. Créer la section clients: cette leçon. On va créer cette section mes clients ici. Donc c'est assez simple. Donne juste ah, différents témoignages ou ainsi de suite encore. Bien sûr, vous allez vouloir utiliser ceux que vous avez de vos clients ou de vos clients clients. Hum et encore une fois, on aura besoin de télécharger des images. Donc, je vais aller dans ce, clients que j'ai ici, et ensuite nous reviendrons à notre espace de travail ou à votre structure de dossiers, et nous allons créer un nouveau dossier sous les images, et nous appellerons celui-ci clients. Et je fais ça juste pour avoir un peu d'organisation qui aurait en fait mis leurs portefeuilles. Permettez-moi de faire glisser ça ici juste pour créer un peu d'organisation ici. Rien de trop fou. Et puis je les traînerai ici, et ils sont revenus ici. Ces air 300 par 300. Donc, ces images d'air en fait carrées. Donc, si vous cherchez la taille dont vous avez besoin pour l'utilisation, c'est ce que vous avez, n' est-ce pas ? Donc, ceux-ci sont tous téléchargés. Il admet qu'il y a un Rwanda Stree 100 etcetera, c'est comment on les nomme, bien sûr. Nommez-les comme vous le souhaitez. Ah, pour celle-là. Je vais accélérer juste un peu ici juste parce que nous avons fait l'en-tête de section un peu maintenant. Donc j'ai l'impression que j'ai probablement eu ça bas, donc je vais juste tomber dans l'en-tête de section. C' est exactement identique à ce qu'on a fait avant. Donc, les idées de section, les clients, un appel de ligne de conteneur, 12 titre de section en-tête de section et le texte principal ici. Donc non, c'est assez simple. Laisse-moi aller de l'avant et fermer cette section pour ne pas oublier comme ça. Laisse-moi aller de l'avant et fermer cette section pour ne pas oublier comme ça. Et on va aussi fermer le conteneur ici pour ne pas oublier ça non plus. Droit ? Donc, cela nous donne essentiellement notre départ ici. Donc maintenant on vient de commencer Rose qu'on a un chantier de construction de ça, et donc on va juste construire sont une sorte de rangée de témoignages. Donc, à partir d'ici, puis après l'en-tête de section , on va aller en classe Div , et on va faire des témoignages en quelque sorte. juste à la norme de ce que nous avons fait avant. En termes de nommage, il y avait deux classes div et nous allons appeler quatre parce que nous faisons trois témoignages de large. Ensuite, nous faisons élément de témoignage. Je pense que ça et à l'intérieur de ça, on va avoir la première chose. On va avoir beaucoup de l'image, et on va faire des égaux de classe, allant à l'image arrondie comme ça. Et puis on va faire un avatar de témoignage du cas où on veut cibler ça spécifiquement. Et puis notre source sera là où nous mettrons nos images. Donc, nous allons à des images clients et puis couper les oreilles Erawan Dash 300 points J peg, laissez-moi rouler ça pour que vous puissiez voir ça, ainsi de suite. Et en fait, j'ai un zéro supplémentaire là-dedans. Droit ? Laisse-moi faire glisser ça. Ok, donc c'est là que se trouvent nos images ah, et je fais juste l'allumage sur tous comme nom. Celui-ci est Jenny Nups. Jenny Dough. D' accord. Et puis fermez nos balises d'image. Donc c'est la première chose qu'on va mettre ici. Et puis après cela, alors nous allons créer un div, et nous allons faire div et nous allons à la classe égale témoignage, et nous allons faire le centre de texte. Je pense que et à l'intérieur de ça, on va faire 83 et me laisser faire défiler le CNC pendant qu'on fait ça, on va aller à un H 3 et, euh, à l'intérieur de ça, nos cours pour ça vont être des cours égale. Ah, titre de témoignage comme celui-ci. Encore une fois, nous suivons en quelque sorte ce que nous avons fait auparavant dans d'autres domaines sur la façon dont nous nommons ceci . On va faire des choses géniales ou tout ce que vous voulez mettre en évidence, c'est ce que cette personne a dit. Ah, et ensuite on va faire des Equals de classe P, et on va faire du contenu de témoignage. C' est donc le contenu. Laisse-moi juste saisir ce texte ici, taper tout ça et en dessous, ce qu'on va faire c'est qu'on va juste faire notre témoignage,les auteurs quand on a laissé tomber ça, donc c'est notre texte pour Laisse-moi juste saisir ce texte ici, taper tout ça et en dessous, ce qu' on va faire c'est qu'on va juste faire notre témoignage, auteurs quand on a laissé tomber ça, un témoignage. Et puis on va faire la classe P égal témoignage. Auteur, euh, auteur de témoignage et filets, bien sûr, comme nous l'avons fait avec notre vieux sac Jenny pâte. Ok, donc ça nous donne une sorte de structure de base pour nos témoignages. Hum, c'est en fait je veux dire, c'est tout. C' est la structure de base ici est cette petite section juste ici. Donc pour les autres témoignages, on va aller de l'avant et les copier et les coller. Il suffit de copier et de coller. Hum, ça et cette section ici et ensuite Ah, changez tout ce que vous avez besoin de changer. Je vais déposer ce que j'ai déjà. Donc ce sont ces autres images que nous avons ici ? Hum et en fait, j'ai en quelque sorte foiré le titre. Je cherchais. Celle-ci est en fait je veux dire, on me fait bien, parce que c'est fantastique. C' est encore mieux. Ok, donc ça nous donne notre sorte de structure de base ou html Ah, structure. Ici, c'est dans nos routes et notre côté de notre conteneur à l'intérieur de notre section. Donc, nous sommes assez bons pour aller sur cela sur la structure html. Va sauver ça. Et puis je vais passer à notre CSS, et nous allons éditer notre CSS ici. Donc encore une fois, nous allons prendre l'en-tête de la section CSS, et ensuite nous allons venir ici et je vais vraiment nous donner un peu d'espace ici et revenir . Rend un peu plus facile à travailler avec. Bon, maintenant on va faire nos témoignages et nos témoignages. Il y a un peu plus qu'on va faire ici. Donc la première chose que nous allons faire les yeux ne ferait pas les clients. Donc c'était l'idée de toute la section, et nous ferions à nouveau l'arrière-plan, et nous allons changer cela pour notre f A f a f a f a a f a ca comme ça. Donc je nous donne un peu super fond et ensuite on va aller après que nous allons cibler chaque élément de témoignage. Tu te rappelles si tu regardes ce ah, ce que nous avons ici, tu vois, ce genre de choses a un carré autour d'elle. C' est l'une des choses que nous voulons faire des années. Nous voulons créer ce point de témoignage. Ah, et puis on va à l'arrière-plan, et on va le mettre sur Donc on a juste fait l'arrière-plan de la section à Gray. Maintenant, on va faire l'arrière-plan de ces teoh teint teint teoh blanc. Donne-le pour qu'il se démarque. Ensuite, nous faisons le remplissage et ferons 30 pixels, 25 pixels, 20 pixels et 25 pixels. Et ça vient en quelque sorte de jouer avec ça un peu, euh, pour arriver là où ça avait l'air centré pour moi. Cela a à voir avec, Par exemple, cette balise de paragraphe a probablement une marge dessus. Ainsi, le rembourrage en haut et en bas est de 10 pixels différents. Donc, c'est 30 pixels, et c'est 20 pixels. C' est à voir avec ce caressage. Tu pourrais effacer ce rembourrage. Tu pourrais te débarrasser de ce rembourrage. Tu pourrais le faire de cette façon, ou tu pourrais le faire de cette façon. Ça dépend juste comment tu veux Hey, veux tweeter ça ? Et puis on va faire une bordure d'un pixel solide, et on va faire ah si on a pour une pomme en F. 1. Ok, donc ça va lui donner un peu de frontière. Donc maintenant, vous pouvez voir que ça commence à ressembler un peu plus à ce que nous avions sur notre exemple . Ça fera un témoignage, et on fera de l'avatar. Donc, nous allons cibler l'avatar réel ici pour afficher le bloc afin que nous puissions réellement cibler avec des règles CSS pour marge zéro auto. Donc ça va centrer l'image, euh, et ensuite on va faire avec ah 100 pixels. On va le rendre plus petit. Donc maintenant, il est en quelque sorte assis à l'intérieur de cette boîte n'est pas seulement pris tout l'espace. OK, donc je pense que ça a l'air mieux. Prends beaucoup de choses que tu tolères. Tu peux le changer. Cependant, vous savez, tout ce que vous pensez avoir l'air bon, mais c'est juste ce que j'ai fait avec X. Nous allons faire le titre de témoignage. Ah, et pour ça, nous allons faire la taille de la police. On va faire 1,75 bélier. C' est environ 28 pixels. Et puis pour le contenu du témoignage, on va faire une hauteur de ligne de 1,3. Juste donner Ah ah, avoir un peu mieux. Ecoute, euh, et on le fera, en fait, c'est tout. Qu' est-ce qu'on va faire là-dessus ? Et puis en bas, on va faire un témoignage. On va le faire, auteur. Donc c'est l'auteur et laissez-moi le faire défiler vers le haut. Donc, témoignage, auteur, nous allons juste définir une taille de police. On va faire ça plus petit que 0,8 ou je suis comme ça pour faire un peu plus petit. Ok, donc si on élargit ça un peu ici pour qu'on puisse le regarder. Vous voyez, nous avons ceci ici, et si vous regardez notre exemple à partir de ce à partir de quoi nous construisons, c'est ce que nous avons là, donc ressemble beaucoup à la même chose. Et c'est ça en fait. Donc c'est le métal H. C' est le CSS. Et c'est comme ça que vous construisez. Ah, la section client ici, si simple. 10. Créer le formulaire HTML: cette leçon. On va construire cette partie inférieure qui a le genre de départ de notre pied et a le contact quatre minutes dedans. Si vous vous souvenez, c'est juste une sorte de formulaire de contact alimenté par Ajax, mais il vient de cliquer sur Obtenir une citation. Si l'e-mail envoyé avec succès, il dira avec succès va mettre dans un e-mail superposé ici et appuyez sur Obtenir citation et vous pouvez voir si non, il reviendra sur message aérien ici. Donc c'est ce qu'on va entrer dans la construction. Mais nous allons juste faire les h deux melas et CSS dans cette vidéo ou cette leçon, et ensuite nous allons entrer dans le PHP, puis le script Java que nous devons écrire pour tout cela. Donc cela dit, allons-y et tirons cela hors du chemin et entrons dans notre h La plupart reviendra vers le bas. Ah, encore une fois , tu sais, je vais faire avancer un peu plus vite avec ce truc de section d'en-tête ah parce que c'est en fait celui-ci est un peu différent, alors pourquoi ne pas aller de l'avant et tapez simplement celui-ci dehors donc Allons juste section et nous allons faire section égale de classe sur. En fait, je suis égal au contact. Euh, c' est vrai. Et puis nous ferons notre classe active égale conteneur. La classe active est égale ligne et puis ici nous allons le diviser Normalement être. Faire 12 colonne. Allons plus loin, mais en fait ici, nous allons le diviser. Donc on va à Div. La classe est égale à l'appel 6, parce que nous allons avoir la section sur la gauche juste ici. Et puis on a la partie contact sur la droite. Donc on divise ça en six. C' est là. Six colonnes. Ok, alors on va faire celle-là. Et puis, continuons et faisons l'autre ici, que nous ayons notre structure de base en place. Bon, donc ça nous donne 26 calmes avec des colonnes. Ah, et maintenant quand ici va faire l'en-tête fera mieux. Nous allons faire la classe égale section, en-tête et à l'intérieur Cela fera notre H une classe égale titre de section. Et puis nous allons aussi ajouter du texte à gauche ici et ensuite ici fera ça. Engagez-moi comme ce défilement ici. Donc, nous commençons à obtenir un petit quelque chose ici et ensuite nous allons faire P clap paragraphe tag égal plomb. Et puis nous avons juste un ipsum chaud ici contre Laisse-moi tomber dans cet ipsum Lauren ici . Droit ? Donc c'est notre texte factice. Ah, et puis en dessous, nous allons créer. En fait, c'est en dehors des en-têtes. C' est ce qui est dans notre en-tête. Vous essayez de garder la tête ou propre au titre et à la description, puis en bas ci-dessous. C' est là que nous allons faire notre liste avec notre adresse, notre numéro de téléphone et notre adresse e-mail . Donc, nous allons faire une liste ordonnée de nonne, lui donner une classe égale liste en ligne, et ensuite nous le ferons. classe Ally est égale, euh, liste dans un élément de ligne comme ça, et il va être nos articles de ligne. Et puis on va les donner. On va donner ces icônes. Est-ce que je classe égal utilisera notre téléphone. Génial. sorte de f A f une carte de tiret, un marqueur de tiret comme ça. Et cela nous donnera notre icône défiler un peu ici. Donc, il nous donne notre icône ici, et puis nous allons le faire je pense, dans une voie freelancer et ensuite 55 80 quelque chose comme ça. Ok, alors allons notre premier Ah, en ligne. Ici, Mme Allez-y et faites Ally classe égale liste dans l'article de la ligne ici. Allons de l'avant et créez simplement notre 3ème 1 réel rapide. Donc la classe Ally est égale liste dans l'élément de ligne. Très bien, donc ce sont nos trois éléments de liste, et à l'intérieur de celui-ci fera l'affaire. Ah, Eh bien, est-ce que je classe est égal et je vais faire un téléphone pour le numéro de téléphone. Et je le suis encore. Vous ne pouvez pas utiliser ces choses exactes. Il se peut que vous ne souhaitiez pas inclure de numéro de téléphone. Je veux dire, peu importe. Tout ce qui fonctionne pour votre situation. Plus un, je dirai 88 et on fera 555-1 à 1 pour un numéro de téléphone fictif. Bon, donc ça nous donne notre deuxième article de la liste. Et puis le 3ème 1 sera la classe I égale f a f a. Ah, enveloppe de tiret sur. Alors nous le ferons. Nous ferons un email au domaine dot com. Vous pouvez lier ces vers le haut afin que leur cliquable et ainsi de suite. Je reste simple en ce moment parce que je pense que la chose principale qui nous inquiète , c'est la forme, non ? Donc, cela nous donne encore une sorte de structure de base jusqu'à ce point. Maintenant, nous pouvons descendre à notre deuxième colonne ici. Nous pouvons construire notre formulaire, donc nous allons former une action, et nous allons définir cela égal à processus PHP point. Ah, nous allons réellement exécuter ça en fin de compte via JavaScript. Mais notre script de traitement PHP est au point de processus PHP. Donc, nous sommes pointés à ce que nous allons méthode equals post, et nous allons faire classe égale sombre et formulaire de contact. Droit ? Donc, cela nous donne notre forme va lui donner un titre. Donc h trois h trois, puis la classe égale titre de forme et fera contact avec moi. D' accord. Et puis je les enroule dans le champ d'information. Donc, je fais la classe div égale le champ de formulaire comme ceci juste pour une sorte de but de ciblage fera classe d'entrée égale le type de texte égal au nom de ce formulaire. Champ est nom parce que nous voulons Ceci est le nom de la personne fera un espace réservé égal et fera le nom et dira que cela est nécessaire. Ok, donc on va fermer ça, donc ça crée notre premier champ de formulaire. Vous pouvez voir là. Euh et puis je vais juste copier et coller ça parce qu'on va avoir un couple ici, donc on aura, ah, un e-mail, e-mail, et ensuite on aura une zone de texte. Je suppose qu'on pourrait aller de l'avant et mettre celui-là là comme ça. Bon, donc pour le 2e 1 alors la classe va être texto, mais ce sera aussi un email parce qu'il y aura une entrée email. Nous allons changer le type de courrier électronique. Cela permettra la validation du côté du navigateur, le nom que nous allons définir pour email, puis l'espace réservé Nous allons également définir email et rendra celui-ci aussi nécessaire. Ok, donc maintenant on a un email de nom, et dans la prochaine, on va changer ça en zone de texte. Et quand on fait ça, on doit venir ici. Nous devons fermer ça. Cela nécessite une fermeture. Je pense que c'est ce qui nous donne une zone de texte. Ah, et puis la classe va être texte un type de zone de texte. Nous n'avons pas besoin de taper parce que ce n'est pas le cas. C' est Nous définissons que lorsque nous disons que c'est une zone de texte. Donc ce n'est pas un nom de texte va, euh, va être un espace réservé de message va être. Parlez-moi de votre projet, d'accord ? Et nous laisserons cela aussi nécessaire. Ok, alors laisse-moi aller de l'avant et économise ça très vite et rafraîchit ça. D' accord ? Donc maintenant, nous avons le nom email et notre boîte de message ici. La dernière chose que nous devons mettre ici, c'est notre bouton. Donc nous allons mettre cela en dehors de tous ces dibs, prêts à entrer, et nous allons à la classe égale boutons de bouton soumettre, et nous allons faire le type égal soumettre. Et nous faisons des valeurs égales obtenir citation comme ceci, et ensuite nous devons ajouter un div ici. Div I d est égal aux messages d'état. Donc c'est là que nous allons diffuser des messages d'état diffusés. Tu l'as vu avant. C' est juste un Nem PDI div. Cela nous donne juste quelque chose à cibler dans un endroit où nous pouvons mettre nos messages de statut . Donc, c'est le HTML. Je veux dire, c'est une forme assez basique, des listes et ainsi de suite. Beaucoup de choses qui est fait avec cela va être fait à l'intérieur du C. s. Ok, donc nous avons beaucoup de formulaire de contact CSS, et ensuite nous avons aussi et nous avons quelques sortes de styles globaux que nous avons besoin de trier de désordre avec ici un peu. Donc, hum, allons de l'avant et faisons les styles globaux d'abord. Depuis ceux que je veux dire technique, vous savez, juste pour rester en ligne avec la façon dont on devrait construire ça. Donc la liste en ligne est placée juste en dessous de ce texte, n'est-ce pas ? Juste ici. Et donc on va faire la liste des points et la raison pour laquelle on le fait de cette façon pour que tu puisses l'utiliser ailleurs, pas juste ici. Alors listez en ligne et nous allons faire afficher flex, et nous allons faire flex. Rap est réglé pour envelopper, et une ligne peut défiler vers le bas afin que vous puissiez voir ce qui se passe ici. Contenu de la ligne. Euh, on va faire Flex Start. Ok, donc ça a juste à voir avec une partie de la façon dont nous voulons cette ligne de remorquage et ainsi de suite. Ah, tu sais comment tout ce qu'on veut. Donc, nous utilisons flex box pour ce rembourrage. Zero Ah, on va faire le type de liste ? Aucun. Donc, je reçois avec tous les points de puces taille de police 14 pixels et sont en fait nous allons faire, euh, 0.85 ram. Bon, donc c'est environ 14 pixels, puis la couleur. On va au numéro 999 Ok, donc maintenant, parce que nous avons cette pression, ça ne ressemble pas nécessairement à quelque chose que vous pouvez voir. Nous sommes passés de la liste de haut en bas avec des balles à maintenant, nous avons tout en quelque sorte côte à côte et ainsi de suite . Donc ça nous donne un peu et on va faire la liste. Maintenant, nous allons cibler les éléments de cette liste dans l'élément de ligne, et nous allons faire flex grow. Laisse-moi faire défiler ici, Flex grandit, et on va le mettre à un. Donc c'est essentiellement bon. Vous remarquez maintenant, au lieu d'être tous juste à gauche une ligne juste à côté de l'autre, il lui dit de grandir et de remplir l'espace restant ici. C' est essentiellement ce qu'on fait ici. Donc encore une fois, c'est des trucs de boîte flexible, euh, mais fonctionne assez bien pour ce genre de chose. Et puis on va faire la marge inférieure de cinq pixels. Donc, quand il le fait, quand nous arrivons aux plus petites tailles d'écran et qu'il va à une nouvelle ligne, il a un peu d'espace. Il ressemble en fait à notre email. Laisse-moi revenir à chaque demain. Vite. On dirait notre email. Euh oh, ouais, parce que j'ai un tiret ici E-mail, comme lors de son apparition. Bon, donc il y a notre icône e-mail. Tu vois ça ? Alors reviens ici. Bon, alors listons-nous dans l'élément de la ligne. Maintenant, nous allons faire les icônes, donc nous allons faire la liste dans l'élément de ligne, et ensuite nous allons faire le point f a et nous allons cibler ces icônes. Donc ce qu'on va faire ici, c'est qu'on va, euh, sortir. Laissez-moi les donner. On va leur donner une couleur un peu différente. Donc nous allons faire notre couleur violette 890 b D. D. Donc ça donne un peu de couleur, et ensuite nous allons mettre une petite marge à droite parce qu'ils sont juste à côté de ce texte ou font sept pixels. Ok, donc c'est une sorte de les déplacer un peu ici encore. Si nous faisons ressortir ça, commençons à ressembler un peu plus à ce que nous avions. Ok, donc il y a ça. Donc c'est le ah, dans les articles en ligne là-bas. C' est ce qui est le ceux-là en bas. Cette petite zone d'élément de liste là-bas. Um, laisse-moi voir. Il semble que nous devons faire pour infield réel rapidement parce que nous avons ajouté champ étranger aussi. Faisons le champ de formulaire. Donc c'est pour le bon côté. Et faisons la marge inférieure 10 pixels. Donc ça nous donne un peu d'espace ici. Nous aussi. Tu vois, on a un peu d'espacement là. Je pense que ça le fait à peu près pour notre ah, pour nos styles globaux. Maintenant, nous devons entrer dans le genre de style spécifique pour le formulaire de contact. Donc on a juste fait des témoignages là-bas. Laisse-moi faire ça. Je vais prendre mon séparateur ici encore sur un morceau qui ici. Bon, donc c'est pour notre formulaire de contact. Ok, donc pour cette zone de contact, première chose qu'on va faire est de faire la couleur de fond. Donc on va faire de l'arrière-plan, et on va changer que 2222 est ce que j'ai choisi. J' aime bien que Color fasse tout ressortir la couleur des bordures et on va faire le numéro 333 comme ça. Je pense qu'il y a une frontière en haut, donc ça affecte un peu ce genre de choses. Rien de majeur avec ça, mais aide un peu. Ensuite, nous allons faire contact, puis point en-tête de section. Donc nous ciblons. Ciblaient ce qu'un style global. Mais nous ciblons un spécifique à cette section. Donc l'en-tête de section est dans chacun d'entre eux, mais ne ciblaient que celui à l'intérieur du contact ici. C' est ce que nous faisons avec cette déclaration. Donc en-tête de section. Et puis nous allons faire la frontière en bas et ferons Ah, un pixel pointillé et fera le numéro 444 comme ça. Droit ? Donc c'est encore une fois. C' est l'en-tête de section juste ici. Donc, il donne un peu de souvenir de notre exemple ici, nous avons ce petit point point de point juste ici, sorte que cela donne une petite sorte de division là-bas. Alors c'est ça. Et puis passons dans le titre de la section. Donc Contact titre de la section et le titre de la section. On va changer la famille de polices en Yellowtail. Queue jaune cursive sans serif. D' accord. Ah, et ensuite on va changer la couleur à nouveau. Les orteils sont violet. 890 était un d b b d d d. D'accord, donc c'est ça, euh, donc c'est que cette section, euh, pensant que euh, nous allons de l'avant et regardons cette section principale ici, laissez-moi y aller et ajoutez simplement du texte à gauche comme ça. Je suis sûr que le texte a été laissé là-dessus. Donc c'est Ah, ça fait ça. Bon, alors revenons ici. Il y a donc le titre de la section. Hum et je pense que nous devons changer la couleur de ce texte aussi, parce que ce n'est pas très. Ah, ça ne se montre pas très bien là-bas. Laisse-moi entrer et faire. Est-ce que j'ai ciblé ça ? Je vois. Eh bien, faisons juste contact avec le plomb et faisons ça. Contacter le responsable. Faisons la couleur. Allons-y. Essayons juste ça pour commencer. Tu vois ? Tu vois ? Tu vois, c'est un peu trop dû 555 Ouais, peut-être 666 Euh, évitons celui-là. Droit. D' accord. 777 Ça me semble bien. On dirait où on en est. Ok, donc ça nous donne notre couleur pour ça. Et on dirait que notre côté gauche est plutôt fait. Plutôt bon d'y aller. Peut-être que des trucs reviendraient à, mais ça semble plutôt stylé pour nous. Mon prochain est le titre du formulaire. Alors ça va être le texto pour me contacter ou passer sur le côté droit. Quand faire la couleur 999 Um, et nous allons faire la taille de la police 2.25 gramme et la marge 000 10 pixels zéro. Ok, donc ça nous donne un joli titre de contact avec moi, et maintenant on va cibler ça. Donc, cette forme est une sombre où nous nous souvenons que nous lui avons donné l'obscurité de classe parce que c'est une forme sombre . Toutes les formes de son côté ne seront pas comme ça. Donc nous ciblons juste celui-ci spécifiquement, donc nous allons faire sombre, et ensuite nous allons faire nos champs de texte, puis sombre et nos champs de zone de texte. Maintenant, c'est tous nos champs. Sauf pour notre bouton de soumission, si vous vous souvenez parce que nous avons donné le nom de la classe de texte, nous avons donné e-mail la classe de texte et e-mail et ensuite nous avons donné à cela la classe de zone de texte. Donc, en gros, nous avons ciblé tous ces domaines. Et maintenant on peut, euh, euh, les coiffer. Donc on va en couleur ou 999 ça va être la couleur du texte, puis la couleur de la bordure. Voir la couleur de la bordure. Et nous ferons Ah, 222222 Nous ferons la couleur de fond. On va faire RGB un ici, et on va faire du noir, ce qui est 255255 255 Cependant, on va lui donner une ville sans payer, donc on va faire 0,1. Donc, cela nous donne que ce genre de couleur grisâtre vous pourriez trouver une grande couleur et juste faire un hex si vous voulez. Mais j'étais juste genre, eh bien, laissez-moi juste me gâcher avec Theo Pasty parce qu'alors vous pouvez venir ici et vous pouvez dire, eh bien, deux maintenant je n'aime pas que vous puissiez jouer avec un peu jusqu'à ce que vous ayez ce que vous voulez, ce qui rend le travail un peu plus facile avec. Donc il y a ça et on va faire une ombre de boîte, et on va le faire en set. Donc, cela va faire une ombre, en quelque sorte à l'intérieur du champ de formulaire. Donc, il est incrusté 02 pixels, trois pixels sur, puis RG RVB a et fera 000, puis 0,6. Donc c'est blanc. Et puis on a une sorte de pacenti dessus. Donc, vous pouvez voir que cela crée cette petite ombre là-dedans. Et tu pourrais jouer avec ces chiffres. Rendons juste ce genre d'évidence. Faisons 20. Tu vois, ça amène le chemin vers le bas. Si on en fait 30 ici, tu sais, ça s'estompe un peu, etcetera. Ragoût 20. Ici. Vous pouvez jouer avec ces chiffres jusqu'à ce que vous obteniez les orteils. Regarde à quoi tu veux que ça ressemble. Donc ces airs sont juste des chiffres avec lesquels j'ai foiré ici, OK ? Et je pense que pour moi, j'aime la façon dont cette ombre a l'air. Ah, eh bien, aussi était juste copier ceci. Je ne me souviens pas du haut de ma tête où Box Shadow était avec le support du navigateur. Mais je vais y aller et faire ça. Quel gamin ? Ah, l' ombre de la boîte. Comme ça juste au cas où nous en aurions besoin si ce n'est pas nécessaire, alors ça ne fera rien de mal. Donc on va aller de l'avant et jeter ça là-dedans. Très bien, donc c'est ça les petites zones de texte ici que vous pouvez voir à nouveau. Ceux-ci ressemblent assez à ce que nous avions dans notre exemple ici. Hum, maintenant nous devons aller de l'avant et plonger dans le bouton afin que nous allons faire point Dark à nouveau faire bouton soumettre, et nous allons faire la couleur fera blanc f f f f f f et nous allons faire la couleur de fond, couleur de fond ferait RGB un encore une fois. Et donc si vous n'êtes pas familier, c'est juste le RVB rouge vert, couleurs bleues et puis un est pour la passe A. Donc, c'est essentiellement ce qu'est RVB A. Donc, les 3 premières lettres air le RVB et ensuite la dernière est l'opacité d'opacité, mais vous dites qu'il est donc 000 à nouveau blanc et ensuite nous ferons 0.2. Donc ça nous donne et vous savez que vous pouvez aller dans l'autre sens. Si vous voulez bien, vous pouvez faire à 5555 et puis je veux dire, vous pouvez faire ça comme vous voulez, mais ça nous donne une belle sorte de couleur noire. Je vais faire bordure, um, avec un pixel solide et fera RVB à nouveau et fera zéro 00 et 0,1. Donc les frontières un peu plus sombres. Le CNC a maintenant une frontière un peu plus sombre là-bas. Et puis nous allons faire la police d'attente 300 parce que je n'aime pas cette audacieuse recherche Ah, texte là-dessus. Bon, donc c'est le bouton. Et puis nous devons faire le survol pour le bouton. Donc faire sombre et fera bouton point, euh, soumettre, soumettre et puis planer et ils seront dio bouton point sombre Soumettre, soumettre et nous ferons la mise au point Si quelqu'un arrive orteil, utiliser leur bouton de tabulation pour sorte de à travers ceux-ci. Vous pouvez changer la mise au point ici pour que nous nous concentrions et nous ferons, Ah, Ah, couleur de fond et nous le ferons. Nous allons changer la couleur de fond RVB A et faire 0000 0.35 Ok, et puis nous allons faire la couleur de la bordure. Nous modifions simplement les couleurs de l'arrière-plan sur les bordures essentiellement en survol et en mise au point. Donc, la couleur de la bordure ferait RVB un zéro à nouveau 000. Ah, pointez sur et puis on va juste faire le pointeur de curseur. Ok, alors ? Eh bien, ça nous donne que c'est en fait le bouton ici. Donc encore une fois, onglet onglet, onglet sur le focus ici ou sur le survol. Vous pouvez voir le bouton change un peu. Ok, donc ça nous donne ce style. Ah, et ensuite on a nos messages d'état, alors on y va. On y va. Style. Ces ups feront le statut. Ah, des messages d'état. Et cela va être en quelque sorte juste la mise en page générale lors du style pour les messages d'état . Donc marge Ah, en haut. Et on fera 0,7 béliers. Ça va nous donner une petite marge entre ça et notre bouton, et ensuite on fera du rembourrage, et on fera une jante. Donc, il donne un peu de rembourrage autour du message d'état. Et puis maintenant, maintenant, nous devons faire pour erreur. Nous voulons le rouge et pour, euh, le succès. On veut le vert. Donc on va faire des messages d'état et on va faire des points, des points d'air, et on va changer ça. Donc on va faire ça, et on va faire un stylo ce cours. Rappelez-vous, si nous revenons au HTML, tout ce que nous avons fait était un div avec un message d'état. On n'a pas eu de succès dans l'air. On va écrire ça avec RJ Query. Ok, donc nous n'avons pas de soucis à ce sujet en HTML, mais nous devons avoir le style. Ok, ainsi de suite, bien sûr que tu fais ça. Donc quand faire fond et il finit par être D. C 3545 et je serais en mesure de voir tout cela en ce moment, mais nous aurons une fois que nous aurons tout branché. Donc ça va être la couleur de fond et ça va être cette couleur rougeâtre, et ils vont faire de la couleur. Je veux attendre et puis ici, faire des messages d'état et fera le succès de points. Et en fait, nous pouvons juste prendre cette couleur ici devrait juste être capable de prendre ça. Je faisais à la fois dans l'air et le succès, mais nous devrions en fait construire ça là-haut comme ça, et puis nous n'avons pas à réécrire le code. Bon, donc on va faire l'arrière-plan, et ça va être cette couleur verte. Donc ça finit par être à huit un 745 et ça a été juste une sorte de joué avec ceux pour obtenir la bonne couleur. Euh, encore une fois, tu peux en quelque sorte faire quoi ? Ce que tu veux. Très bien, donc c'est la section pied de page. C' est la partie HTML et CSS de penser que nous sommes Nous sommes à peu près là où nous devons être s' il y a quelque chose que nous devons modifier au fur et à mesure que nous allons ici parce que nous sommes en train de tester cela encore. Hum, alors on va y aller et tweeter ça ici. Mais cela devrait être le HTML et CSS Ah, pour cette section. 11. Créer le contact à partir de PHP en utilisant le script de traitement: cette leçon. Nous allons écrire notre script de traitement PHP, Rappelez-vous, de notre pour moi a dit l'action pour traiter PHP point. Nous allons pirater cela via un script Java pour la requête BOJ. Mais quand même, vous savez, si nous l'envoyons là-bas, ce que je n'ai pas fait beaucoup en termes de sortie que vous obtenez. Mais quand même, vous savez, si ce formulaire est envoyé à cette page, il devrait toujours le traiter, même si nous n'étions pas en train de détourner via JavaScript. Donc juste au cas où quelqu'un aurait désactivé Ah, l'email est toujours envoyé le message que la réponse qu'ils reçoivent ne sera pas nécessairement la plus, euh, vous savez, la plus belle apparence, Mais quand même, ça va, hum tout devrait encore marcher. C' est pour ça qu'on va mettre ce script de traitement à ça. Que tu vas d'autre encore bien. C' est ce que je veux dire, les gens de nos jours n'ont pas de javascript activé. Il y a beaucoup de web qu'ils ne peuvent même pas utiliser beaucoup de sites et de développeurs ces jours-ci juste supposé que javascript est activé. Et donc je ne pense pas qu'on soit hors des limites de faire la même chose de toute façon. Nous allons aller de l'avant et créer ce nouveau à partir du fichier appellera processus point PHP. Et c'est juste dans le genre racine de ce dossier de travail que nous avons ici. Donc, il est juste à côté de l'index point chaque melon sur Une question que je sais probablement pourrait venir avec ceci est, Eh bien, nous n'avons pas la page html, mais nous sommes assis et nous le soumettons à cette page PHP. N' est-ce pas besoin d'être PHP ? Une réponse est en fait, non, car il n'y a pas de code PHP sur cette page. Donc, il n'y a rien à traiter, même si la forme ah soumet des données à un script de traitement PHP, ce script est un fichier complet, ah, ici, donc vous pouvez réellement faire une page html point d'index et l'envoyer à un arrêt de processus Page PHP. Et ça marche très bien. Alors prends juste une sorte de réponse à cette question, est-ce pas ? Donc, avec cela dit, allons de l'avant et de l'ouverture et allons de l'avant et écrire notre script PHP. Donc, la première chose que nous faisons, bien sûr, balises PHP d' ouverture et ensuite nous allons mettre en place sont une sorte de notre config. Maintenant, je garde ça. Il y a, je veux dire, il y a des scripts entiers qui sont des scripts massifs pour faire des formulaires de contact et ainsi de suite. Je garde cela très simple parce que je ne voulais pas en faire un énorme cours PHP. Ok, donc si vous voulez plonger dans PHP, j'ai un tas de cours de gens de pêche, vous savez que sont disponibles que vous avez transmis l'accès à vous allez stocké sur John Morris en ligne dot com. Ou si vous êtes en partage de compétences, allez simplement à ma page de profil, et vous y verrez tous. Mais j'essaie de garder le PHP aussi limité que possible. Donc la première chose qu'on va faire est de faire l'envoi à. Alors à qui on va envoyer ça ? Et ça va être Souvenez-vous, c'est une page de citation ou une action qui va le plus près. Il s'agit d'une demande de devis payée. Donc ça va être votre adresse e-mail. Okay, Donc je vais juste mettre ça à pas absurde à John Morris en ligne dot com ou quoi que ce soit ce soit, ça va être une adresse e-mail factice ici pour moi, mais vous voudriez évidemment mettre dans votre adresse email de vos clients email adresse , puis le sujet. Vous faites la ligne d'objet ce que vous voulez. Il s'agit de la ligne d'objet de l'e-mail lorsqu'il arrive. Je vais juste mettre une nouvelle demande de devis et en fait, laissez-moi revenir ici. Eh bien, en fait, c'est juste le faire ici. Généralement, faites des guillemets simples. Parfois, je fais un flop. Donc de toute façon, alors faisons que les guillemets simples juste de la cohérence. Ensuite, nous allons vérifier et voir s'il y a un post hors même quand cela est soumis via Ajax. Il est toujours reconnu comme étant soumis comme une sorte de soumission post. Donc nous voulons vérifier si Post Data a été soumis et nous allons donc vérifier et voir si Post est vide ou non. Si c'est vide, alors nous ne ferons rien. Vous pourriez, bien sûr, mettre une déclaration else ici et dire quelque chose comme, vous savez, vous savez, écho à aucune donnée ou quelque chose comme ça. Donc, si tu veux faire ça, tu peux le faire. Hum, pour ce que j' ai, je le laisse juste vide. Hum, donc tu peux décider ce que tu veux faire là-bas. D' accord. Prochaine chose réduire. Aller à créer une liste blanche. C' est donc une liste blanche de champ de forme de pieds. Eh bien, sauf que nous allons faire des noms égaux. Ah, Post et nous ferons le nom. Et encore une fois, il y a des façons vraiment fantaisistes, concis que vous pourriez faire cela sans écrire tout cela pour les deux comme ça. Mais encore une fois, pour ceux d'entre vous qui ne connaissent pas nécessairement une tonne de PHP, je ne veux pas rendre cela trop compliqué. Donc tout ce que nous faisons, c'est que nous saisissons les données du formulaire soumis. Donc, lorsque l'ancien soumis, il enverra essentiellement ah requête avec ces données dans ce post super global ici. Donc, il ressemble à une variable PHP. Un peu comme ce qu'on a fait apparaître. Mais c'est structuré un peu différent. C' est essentiellement le nom qui a été soumis, l'e-mail qui a été soumis sous la forme comme C'est vraiment tout ce que vous devez savoir pour comprendre cela, et je vais faire message qu'il fait message égal. Et c'est euh post et message. Et puis nous allons faire miel égal et dio post et votre URL. Et cela fait en fait que je ne pense pas que nous avons ajouté le pot de miel à notre formulaire. Ouais, donc on a raté le pot de miel quand on a fait notre formulaire. Donc, en fait, revenons à l'index html. C' est bon. Ce n'est pas si important à ajouter. Nous allons donc l'ajouter ici juste en dessous de notre zone de texte. Et donc nous allons faire div classe égale champ de formulaire. Donc ça va regarder ce qu'est un pot de miel. C' est un champ qui quand un baht arrive, un baht a l'impression qu'il a des orteils souvent sur les bots qui arrivent à travers. Ils vont remplir quelque chose dans tous les champs ici, non ? Et donc ah, chérie, c'est en gros comme si un ours ne pouvait pas résister au miel. C' est comme si un corps ne pouvait pas résister à remplir ce champ. Donc on va créer un champ que le baht remplirait, mais pas un humain. Et la raison pour laquelle l'humain est parce que nous allons régler ça pour qu'il n'en affiche aucun. Ok, donc ça ne va pas vraiment montrer à un humain, mais un bott lisant ça verra ce champ et ils le rempliront. Où est l'humain ne serait pas. Et c'est ainsi que nous pouvons dire si nous avons une bouteille, pas si le type d'entrée est égal à caché. Euh, maintenant, c'est une façon très rudimentaire de traiter le spam. Mais si vous le faites correctement, en fait, peut fonctionner. Donc vous faites Nom est égal à U R l et ensuite nous le ferons. espace réservé est égal à toi, Earl, non ? Rien de tout ça n'a d'importance parce que ça ne va pas se montrer. Mais le but d'un pot de miel est que les spammeurs avaient compris que les gens le faisaient. Et donc si vous nommez juste ce type d'entrée est égal au pot de miel, Eh bien, les robots vont probablement avoir quelque chose dedans pour reconnaître cela et ne pas le remplir. Ok, donc tu dois faire en sorte que ça ressemble à un vrai champ de formulaire. Et tu es moi, quand tu utilises le terme « pot de miel », Teoh appâte le pot pour le remplir. La plupart des robots. La chose qu'ils veulent absolument mettre sur votre site, c'est là que vous êtes l C'est pourquoi ils spamming. Donc, quand vous utilisez un u. R. L comme pot de miel, ça pourrait être assez efficace parce que les gens vont juste vouloir remplir ça . C' est pour ça que je l'utilise ici. Ok, donc c'est un champ de formulaire. Vous remarquez que ça ne se montre pas ici. Si je me suis débarrassé de l'affichage de style ah Aucun, alors Ah, en fait, ce n'est pas Eh bien, c'est un champ caché, donc ça n'a pas d'importance, mais ça ne s'affiche pas. Voilà le point. Et donc les humains ne vont pas le remplir, mais le baht le fera. Et alors quand nous l'avons appelé à notre script PHP, nous pouvons saisir ça et nous pouvons tester. Et s'il a été rempli que c'était probablement un acheté qui a soumis ce formulaire, ok ? Et alors nous ne pouvons tout simplement pas le traiter. Donc c'est en fait la toute première chose que nous faisons. On va vérifier le pot de miel, parce que si c' est un pot de miel, c'est un spam, un spam. Mais on ne va même pas s'embêter avec quoi que ce soit. Donc on va le faire si ce n'est pas, vide, et on va faire du pot de miel. Donc, si ce n'est pas vide, ça veut dire qu'il a été rempli. Il y avait des données qui y étaient soumises. Ensuite, on va faire Echo J. Sohn Ah, encoder en fait et on va créer un ah Air Ray. Maintenant, la raison pour laquelle je fais de cette façon est parce que quand nous arrivons à la partie JavaScript, nous allons saisir ces messages et analyser la quantité sur les afficher. C' est là que je dis que si vous si quelqu'un soumet réellement ce formulaire avec javascript a désactivé son processus formel. Mais qu'est-ce qui va écho orteil ? Est-ce que ce tableau codé Jason codé ou un je n'ai rien fait orteil pour rendre ce look plus agréable. Quelque chose ? Parce que je suis vraiment concentré sur le traitement a jack de celui-ci. Je n'étais pas vraiment trop inquiet si quelqu'un visite directement avec PHP pour vous, vous voudrez peut-être savoir, cela peut être une chose dont vous voulez rendre compte. Et alors vous le feriez Ah, vous savez, vous vous assureriez et faites cela dans votre script particulier de la façon dont vous écrivez ceci. Quoi qu' il en soit, il y avait un problème. D' accord ? Et encore une fois, avec ce message particulier, vous remarquez que je ne donne pas beaucoup d'informations parce que si les singes supposaient un spam baht rempli cela, nous ne dirons pas Oh ha ha. Nous connaissons votre corps de spam ou autre, non ? Nous ne le ferons pas parce que nous ne voulons pas leur donner cette information, peut-être essayer de contourner ou quoi que ce soit. Nous allons simplement dire qu'il y a eu un problème et ensuite, j'espère qu'ils vont passer de nous . D' accord ? Donc encore une fois, gardez ceci à l'esprit. Il s'agit de quatre qui traitent du spam. Bon, maintenant on va vérifier à nouveau les valeurs vides. C' est un endroit où vous pourriez faire un script PHP de fantaisie. On va juste garder ça très simple. Donc, si et puis nous ferons vides et nous ferons le nom. Donc, si les noms vides ou vides et feront, euh de et nous définissons le de égal à l'adresse e-mail qui a été soumise, c'était juste un choix que j'ai fait sur la façon dont j'ai nommé les variables Et puis ou donc si cet e-mail que cela fondamentalement cet e-mail ici est vide et c'est cette condition sera signifiée ou ah, message vide. Donc, si le message est vide maintenant, nous mettons nécessaire une chose à garder à l'esprit avec ceci est que nous mettons requis sur ceux dans la bouche H deux. Donc, si nous essayons de soumettre ce formulaire, le navigateur va nous dire qu'il est vide. Donc nous le faisons déjà sur le front, et nous avons déjà le front et la validation, mais nous allons aussi le vérifier sur le dos, juste au cas où. Je veux dire, quelqu'un pourrait venir d'un très vieux navigateur qui ne fait pas ça ou quoi que ce soit. Donc encore une fois, nous sommes juste que vous vérifiez toujours sur le front et le backend. C' est ce qu'on fait ici. Donc, si l'un de ces l'air ou la déclaration Donc si le nom est vide ou de son vide ou messages vides de l'un d'entre eux est vide. Encore une fois, nous allons faire écho et bien faire Jason. Ah, et le code. Et nous allons faire un tableau et nous ferons état zéro et message et nous dirons, un champ A qui est faire champ obligatoire est manquant. Ok, donc on donne un peu plus parce qu'on suppose que c'est un humain. Maintenant, à ce stade, nous lui donnons un peu plus d'informations que pour Ah, le baht. Et encore, on va mourir. Ok, donc ça va tuer le script après ça. Donc, si cette condition est remplie, il fera écho à ce que Jason encodé Ah, ce tableau codé Jason. Et puis il mourra. Et encore une fois, la raison de la seule raison pour laquelle nous sommes Jason encodage. C' est parce que nous allons finalement prendre via Ajax. Et donc il imprimera un message que nous saisissons via Ajax. Et puis nous utilisons cela de ce côté sur cette page pour afficher le bon message, et vous verrez tout cela ici bientôt. Droit ? Ensuite, on va vérifier un email valide. Ok, donc on va passer de égal à et on va faire une barre de filtre, qui est une fonction PHP, et on va faire à partir de Donc on va passer notre email de retour. L' e-mail. C' était Ah, une adresse e-mail. Il a été soumis, et on va lancer le filtre. Valider le courrier électronique. Ok, donc fondamentalement quelle barre de filtre fait-il va prendre cette variable et la faire passer à travers ce filtre. Et ce que ce filtre fait est de vérifier s'il s'agit d'une adresse e-mail valide. Donc, vous savez, il y a une norme là-bas pour ce à quoi devrait ressembler une adresse e-mail valide. Et PHP a ces filtres qui peuvent exécuter l'adresse e-mail de soumis contre cela. Donc c'est ce que ça va faire pour vérifier ça et ensuite ici, nous dios si ce n'est pas de. Donc, si fondamentalement, si ce filtre de nos retours faux sens, ce n'est pas une adresse e-mail valide. Et encore une fois, on va faire écho à Nissan, euh, et au code. Et nous allons faire un message d'état de tableau zéro sur dira, hum, pas ah, un email valide. Ok, donc ce sera notre message. Je viens de remarquer ça sur ces messages. Fais ça, moi et on mourra ici. Ok, donc ça vérifie si nous avons l'email valide. Donc nous sommes juste en train de passer par une série de chèques. Nous avons vérifié le pot de miel, nous vérifions les valeurs, puis nous vérifions les e-mails valides. Donc nous sommes juste en train de détruire toutes les choses qui pourraient empêcher le traitement de ça. Et puis une fois que nous aurons traversé tout cela, alors nous pouvons entrer dans OK, maintenant, nous étions presque sûrs que nous avons des données valides et ainsi de suite. Envoyez-nous l'e-mail. Donc nous allons envoyer un e-mail HTML, donc nous allons obtenir des en-têtes fixes égaux à, et je vais faire sprint f et je vais faire de et nous allons faire pourcentage eso sprint f essentiellement vous permet de pop dans les espaces réservés. Donc, d'où faire et puis nous allons faire le de comme ça et puis point Uh, backside sont barre oblique arrière et comme ça. Ok, donc c'est fondamentalement le réglage sont à la place de juste être, um les adresses e-mail, à quoi il serait par défaut. Et on a juste un, ah, quelque chose de l'adresse e-mail. On peut rendre ça plus agréable si on veut. Maintenant, ce que je fais ici, c'est que je mets juste ça à partir de l'adresse e-mail, donc je ne fais rien ici. Mais j'ai écrit cela pour que si vous le voulez, vous pouvez changer cela et faire comme certains comme de, et ensuite vous pouvez faire le nom, puis l'adresse e-mail et ainsi de suite. Bref , , c'est pour ça qu'on fait ça ici. Alors les en-têtes. Et encore une fois, j'ai tout un cours sur l'envoi de courriels. Donc, si vous voulez vraiment plonger là-dedans, je vous recommande de vérifier ça. Um di égal. Donc, cela va ajouter à la première ligne supérieure. Donc sprint f et nous allons répondre à et nous allons faire le pourcentage s à nouveau, et nous allons le faire à partir de nouveau. Donc, cela définit la réponse à nouveau. Il sera par défaut l'adresse e-mail. Mais on est juste à nouveau. Nous allons le définir explicitement pour que si vous vouliez changer ça, vous puissiez changer ça. Donc, vous pouvez définir la réponse à autre chose que quoi ? Le réel l'adresse e-mail réelle qui était il a été envoyé à partir, dans ce cas, je ne sais pas nécessaire Pourquoi vous voudriez faire cela. Mais encore une fois, je jette ces trucs ici pour vous montrer comment faire ces 80 millions de kilomètres. Bon, donc ça va ajouter à nouveau. Donc nous allons étaler f et ensuite nous allons faire X ex mailer, et nous allons dio PHP slash pourcentage s. Et cela va juste définir quelle version PHP. Ceci est envoyé d'ici. Bon, donc ça a nos en-têtes. Et puis maintenant, nous et le point équivaut fondamentalement à ce que cela signifie, c'est qu'il est en attente. Donc, ça va finalement ce que les en-têtes vont être égaux à est de et l' adresse e-mail de et puis une réponse de saut de ligne à l'email from juste dans un saut de ligne, puis x mailer et la version PHP, est-ce pas ? Donc, c'est le DI égal dépend juste de la ligne avant elle au lieu de le remplacer. C' est ce que tu ferais si tu ne faisais pas le point égal à juste. Donc si et puis nous allons faire va exécuter la commande masculine. Donc mâle et on va mettre Ah, la première variable est les deux. Donc c'est ce que nous avons mis en place dans le conflit qui va être envoyé à vous ou à votre client, quel que soit le sujet de l'e-mail, nous avons aussi mis dans le condamné, et ensuite nous allons faire le message, et on va faire les en-têtes. Ok, donc c'est ce qui va envoyer notre email, et nous vérifions en l'exécutant dans un conditionnel comme celui-ci. Si mâle retourne true que le conditionnel être satisfait. Si elle renvoie false, elle ne sera pas respectée. Donc, si ça retourne vrai, alors nous allons faire écho à Jason et code, et nous allons faire un tableau. Et cette fois, le statut sera égal à un car il a réussi et le message sera envoyé par e-mail avec succès comme ça. D' accord, vas-y. Le pape. Nous allons toujours tuer le script après ça parce que nous n'avons pas besoin de plus traitement que nous devons faire. On a juste besoin de faire écho et c'est tout. Et puis la dernière chose que nous allons faire et je ne vais pas le faire à l'intérieur de la déclaration, c'est que nous allons juste faire écho à J. Sohn Ah, dans le code. Et nous avons juste C'est juste une sorte de ah ah, message d'état par défaut. Donc état du tableau. Nous le mettrons à zéro, et ensuite nous mettrons le message égal à lui. E-mail n'a pas été envoyé correctement. Veuillez réessayer. D' accord. Et c'est la fin des scripts que nous ne ferons pas la plongée ici. Donc essentiellement, ce qui se passe ici, c'est si nous avons tous ces contrôles que nous traversons si vous le savez, si l'un d'eux échoue, si celui-là que cette condition est remplie et qui signifie essentiellement que nous avons un échec, nous allons retourner un message négatif, retourner un message négatif, retourner un message négatif, puis nous allons essayer d'envoyer l'e-mail. Et si l'e-mail envoie retournera un message positif, puis ici, pour une raison quelconque, quelqu'un devient farfelu et il passe à travers les chèques mais n'envoie pas l'e-mail ou autre chose. Fondamentalement, nous allons revenir. Et un message négatif indiquant que l'e-mail n'a pas été réglé correctement. Ok, c'est le script PHP. Et encore une fois, nous allons finalement, nous n'allons pas envoyer les gens là-bas directement. Nous allons utiliser le script Java exhorter une requête à envoyer une requête Ajax et ces messages d'état qui sont codés Jason. On va les attraper dans RJ Query, et ensuite on va les traiter dans RJ Query. Et c'est ce qui va afficher le message ici. Donc quand quelqu'un Smith est ce formulaire, ils ne quitteront jamais cette page. 12. Créer le contact à partir d'AJAX avec le script de traitement: J' ai annoncé le temps de créer un script de requête RJ qui va traiter sont formés ici. Donc, nous allons venir à notre fichier que nous avons déjà freelancers est là un point Js et nous allons aller à l'intérieur de la fonction prête que nous avons déjà créé ici juste parce que pas vraiment une utilisation dans la création d'un autre. Tout ça. Ah, Jake, rail. Il suffit de charger une fois que le document est prêt. Donc, euh, on va juste aller le mettre à l'intérieur ici, et on va le faire maintenant. Tu pourrais analyser ça. Je crois que j'ai déjà mentionné ça. C' est pour le menu. Maintenant, je fais le formulaire. Vous pourriez créer deux fichiers JavaScript différents, ce qui serait un peu plus portable. N' hésitez pas à le faire si vous voulez. Je vais dire qu'on va joindre un gestionnaire de soumission au formulaire. Peu importe. Cependant, cela a du sens. D' accord. Donc, encore une fois, si vous n'êtes pas familier avec Jay Career, je recommande , genre, je ne vais pas le faire. Ah, Jake Ray 101 ici. Donc, mais donc si vous voulez en savoir plus sur Jake, recommande de trouver un cours et de prendre que je n'en ai actuellement pas. Euh, mais peut-être en bas de la ligne de toute façon, va appeler J requête et nous allons chercher nous allons sélectionner ou contacter les formulaires. Nous avons donné à notre formulaire de contact une classe de formulaire de contact, et donc nous allons sélectionner cela, puis nous allons faire dot soumettre. C' est donc une méthode de requête J. Donc, sur soumission du formulaire, alors nous allons créer une fonction anonyme et taperons dans l'événement afin que nous puissions cibler l'événement, et ensuite nous allons faire des choses à l'intérieur de cette fonction anonyme. Bon, alors voyons quoi ? Nos erreurs. Jeton inattendu. D' accord. Ouais, je Donc on a mis le jeton ici, euh, et donc on l'invoque ici. Alors. En fait, une partie de ça va être parce que ça ne devrait en avoir qu'un qui devrait être ici. Exactement. Bien sûr. Quoi ? J' ai mal tapé là, mais cela a effectivement fermé les crochets que les parenthèses. Là. Ok, Amy, c'est comme ça que ça devrait ressembler. Nous avons donc notre soumission. Maintenant, nous créons une fonction anonyme à l'intérieur de ces parenthèses, et c'est là que nous allons gérer notre formulaire. Donc la première chose que nous devons faire est que nous devons arrêter la forme, en fait donner un peu d'espace ici. Nous devons arrêter le formulaire de soumettre normalement. Droit ? Donc, nous voulons l'empêcher de soumettre et d'aller à cette page PHP créer parce que nous allons le faire via Ajax. Nous allons à l'événement dot prevent default. Donc encore une fois, c'est une sorte de méthode jaqui qui va juste prendre cet événement que nous avons passé. Donc, le bouton a cliqué sur le formulaire soumettre. Cela va prendre cela et cela va empêcher l'action par défaut qui soumet le formulaire à l'U. R L dans le script d'action. Donc ça va empêcher ça de se produire, donc c'est la première chose que nous devons faire. Ensuite, nous allons sérialiser les données du formulaire soumis et obtenir l'action, qui est essentiellement l'URL. Ok, donc d'abord nous allons créer un formulaire de but variable, et nous allons le mettre égal à ceci, ce qui est sur dans ce cas est depuis que nous avons soumis que nous l'avons fait. On fait ça sur soumission. C' est la forme. Donc, nous allons, euh c'est pourquoi nous mettons à égalité pour former cela va nous donner l'élément de formulaire de notre page. D' accord. Et puis nous allons obtenir sont vous êtes ailleurs en soi. Tu es égal à, ah forme. Nous allons dans une variable de forme que nous venons de créer des points d'adder. Donc les attributs et l'action. Um ok. Donc essentiellement, ce que ça fait, c'est dire que nous allons entrer dans le formulaire qui a été soumis, non ? Parce qu'on a fait ça sur du ciment. Nous allons entrer dans le formulaire qui a été soumis, et nous allons entrer dans cet élément de formulaire, et nous allons obtenir l'action, la valeur du bloc d'action, qui est le point de processus PHP. C' est donc à quoi cette variable devrait être définie. Donc la raison pour laquelle nous faisons cela est que nous puissions saisir, vous savez, il pourrait y avoir plusieurs formulaires qui sont traités par ce script de requête J, et donc nous allons prendre le formulaire réel ou le U R l réel de ce formulaire particulier, Celui qui a été soumis. Donc ça rend ça un peu plus, euh, euh, modulaire. D' accord. Ensuite, nous allons à Ah, je fais des bols très berbères, mais nous allons envoyer les données en utilisant la poste. Donc nous allons à variable et nous allons faire poster égaux, et nous allons définir cet égal à point post. C' est donc une méthode Cory blessée à nouveau. Vous êtes l Alors allons-y. Nous venons de recevoir donc nous allons la méthode post est essentiellement un raccourci pour l'utilisation Ajax à l'intérieur de la requête J. Donc, cela va créer va poster ces données deux. On va poster quelque chose à cet endroit et on doit lui dire ce qu'il faut poster. Donc, nous allons faire la forme sont formés à partir de la variable de forme ci-dessus Chazal, notre forme entière point sérialiser. Donc, ce que sérialiser va faire est essentiellement de prendre toutes les données dans le formulaire. Donc, tous les champs ah qui ont été remplis ici vont les prendre et les sérialiser qu'ils puissent être Il est plus facile de passer comme données de post. Ok, donc c'est ce que ça fait. Et maintenant, nous devons faire en sorte que ce soit réellement ce que je veux dire. Cette ligne juste là est ce qui envoie réellement les données de poste. Donc, comme vous pouvez le voir, c'est assez simple et direct de cette façon, Jake s'inquiète. Je veux dire, je sais que beaucoup de gens ont passé à d'autres choses depuis, et je suis sûr qu'ils font des choses similaires, mais toujours assez pratique en ce moment. On va mettre les résultats. Ah, div. Ok, donc on va faire des postages. C' est pourquoi nous avons posté la variable ci-dessus. Donc nous pouvons maintenant référencer ce point Don. Alors quand c'est fait, quand ? Quand ça finira ici, alors on va faire ça. Et donc nous allons fonctionner et ferons des données comme celle-ci. Et maintenant, nous allons essentiellement à l'intérieur de cela quand le spectacle est terminé et nous avons une réponse de Ajax. Maintenant, nous allons exécuter cette fonction anonyme, et ce que nous obtenons ce sont les données que nous avons reçues de notre demande. Et donc nous allons faire une réponse variable et dire ça égal à point et nous allons analyser Jason parce que vous vous souvenez, nous ce que nous avons soumis. Ah, ce que nous renvoyons, c'est Jason. Lorsque nous créons un script PHP, nous avons gardé Jason et codé toutes nos réponses. C' est pourquoi il est plus facile de travailler avec Ajay Kori, nous allons les pièces et ensuite nous allons faire des cibles égales et faire des messages d'état. Ok, donc on a fait quelques choses là-bas. Nous avons analysé nos données et les avons définies comme réponse ici. Et puis on a notre cible. Rappelez-vous div avec des messages d'état. Donc, nous avons très bien réglé ça. Il s'agit simplement de définir des variables. Nous n'avons encore rien fait, donc nous avons la star Jason et nous avons mis ça à la hauteur de la réponse. Et maintenant, nous avons fixé notre objectif pour savoir où nous voulons modifier ces données. Et maintenant, nous allons faire des classes d'air à succès publicitaire. Ok, donc on va ajouter les membres de la classe. Donc on va faire ça. Um, à l'intérieur de J. Corey. Donc ce que nous allons faire est de faire si le statut de point de réponse. Rappelez-vous, la réponse a ce que nous avons obtenu. Et rappelez-vous, nous avons renvoyé un tableau avec un statut et un message. Donc, nous vérifions maintenant ce statut que nous avons créé dans notre tableau quand et puis que nous Jason encodé dans notre script PHP. Donc, si le statut du point de réponse et nous allons dire si c'est égal à un, droite. Rappelez-vous, nous en avions un comme l'un d'entre eux et zéro comme le reste d'entre eux. Donc c'est égal à un. Il y avait une erreur de classe Do target dot remove juste au cas où, euh, le message aérien était déjà là. Droit ? Peut-être qu'ils soumettent le formulaire, reçu un message aérien, puis maintenant ils ont soumis à nouveau et ils reçoivent un message de réussite. Nous voulons nous assurer de supprimer ce message. Sinon, c'est juste que ce message de statistiques Dave va avoir les deux classes. Ok, donc on doit supprimer le message aérien, et il est allé à la classe d'ajout de points cibles et on va réussir. Donc on va ajouter le message de réussite. D' accord ? Donc, fondamentalement, si le si ce que nous avons obtenu d'un script PHP, c'est une réponse réussie que nous allons supprimer la classe aérienne du message du personnel , Div. Et nous allons ajouter la classe de réussite. Ok, sinon si le statut de point de réponse et vous pourriez probablement faire autre chose. Mais je suis très explicite ici. État du point de réponse. On vérifie que la même chose équivaut à zéro nuit alors. Donc, si un est égal à zéro, alors nous allons faire le point cible supprimer la classe et le succès. Cette fois, nous allons déplacer la classe de succès parce que cette fois il a échoué et nous allons cibler point ajouter de l'air de classe. Ok, donc c'est ajouter nos messages aériens là-bas. Donc, il suffit d'ajouter et de supprimer une classe. Nous avons déjà créé ces classes sur notre CSS. Et la dernière chose qu'on va faire, c'est qu'on va changer le message. Donc on va faire la cible. Rappelez-vous, c'est que nous définissons cible égale aux messages d'état sont notre bloc ici, donc cible vide append. Donc, il est fondamentalement vide est de l'enlever quoi que ce soit. S' il y a quelque chose là-dedans avant qu'il ne l'enlève maintenant nous allons écrire nous allons répondre au message. Donc le message que nous avons créé dans notre script PHP pour notre Ray et ils allaient se cacher et point fondre et donc c'est juste un défaut. Je veux faire 400. D' accord. Donc, essentiellement ce que cela fait est que va ajouter. Ça va déplacer tous les messages là-dedans. Ça va bouleverser le nouveau message que nous venons de le recevoir. Il le cache et ensuite il s'estompe. OK, donc c'est z fondamentalement qui lui permet de s'estomper dans le droit de sorte qu'il crée cet effet. Et c'est ce que quand on a tout ça, non, alors c'est ce que nous avons. Quand nous reviendrons ici et que nous disons non, John Lhasa remplira des trucs et nous en ce moment, c'est Red dit pas à propos de l'email. Nous avons dit : «  Obtenez une citation maintenant ça a changé. Il s'est effacé et tout cela, si nous venons ici et faisons comme, G pas un email valide et alors nous n'obtenons pas un email valide. Donc, c'est ce qui permet tout cet effet orteil se produit est, Est-ce que cette requête j ici et la cachette et la décoloration dans la réponse et ainsi de suite. Alors c'est tout. C' est tout pour la requête J ici. Encore une fois, assez simple. Si tu n'es pas familier, Jake Ray, peut-être un peu difficile à suivre. Ah, je recommande, vous savez, trouver un cours, Andrzej Carrière ou quelque chose, ou peut-être juste de revenir à travers elle o r. référençant le code source. Tout ce que vous devez faire pour que cela soit fait pour vous 13. Créer l'animation jQuery de Scroll Scroll jQuery: Ce que je veux faire maintenant, c'est le défilement en douceur. Donc, si nous regardons cela ici Ah, et nous cliquons sur l'un de ces liens ici si nous cliquons sur vous remarquez qu'ils juste sorte de flash à chaque section et notre original Nous avons eu certains. Nous avons eu un rouleau lisse. Donc je veux ajouter qu'ici, il y a quelques parties différentes à ça. Donc la première chose que nous allons faire, c'est que nous allons cibler sont des événements réels. Nous devons donc commencer par nos sélecteurs. Nous allons faire l'élément de menu mav, et puis nous allons à la balise d'ancrage pour ah, c'est donc rappelez-vous dans notre menu, chacun de ces éléments de liste dans cette liste ordonnée est donné l'élément de menu de classe naff, et puis nous sommes juste référençant le lien d'ancrage, la balise d'ancrage dans ce. Donc, nous faisons cela et puis nous allons continuer dans le cas où après est clic. Donc quand un de ces liens a cliqué sur l'air, alors on va faire quelque chose, et ce qu'on va faire, c'est créer une fonction non anonyme qui va faire les choses que l'on veut faire. Très bien, alors et nous devons nous en débarrasser. Nous devons mettre ça ici. D' accord. OK, donc c'est notre sélecteur. Et notre gestionnaire d'événements cible notre événement. Et maintenant, nous devons faire quelques choses avec ça. Donc, d'abord, nous allons définir quelques variables que nous allons définir comme étant cet objet qui juste pour que nous puissions le référencer plusieurs fois et J Coury n'a pas besoin de retourner dans le dom. C' est juste un truc de performance. Et puis on va à Nous avons besoin de notre réf. Donc sont un piège pour ce sont les Il va être livre sur les compétences de la livre, livre livre livre livre. Si vous vous souvenez quand on lui a donné un « I d » Ah, ça correspond à ce qu'il Ah, y a dans notre menu ici. C' est pourquoi lorsque nous cliquons sur ceux-ci, cela fonctionne pour aller à chacun dès maintenant. Alors ah, mais nous avons besoin pour nos besoins. Il faut qu'on prenne ça. Donc nous allons faire, euh, je vais parler de pourquoi ici dans une seconde, nous allons à un brouillon égal et ils allaient faire référence est ce Ah, variable et ensuite on va faire Adder, et on va faire un treff. Ok, donc ce que ça fait, c'est de saisir ces compétences en saisissant qu' un voyage, euh, attributs de n'importe lequel de ces clics. Lorsque vous cliquez sur environ h ce, un brouillon est défini à piler sur lorsque vous cliquez sur les compétences pour obtenir défini sur les compétences de déchirer et ainsi de suite. Ok, donc cela dit quelques variables qui auront besoin. Et puis la première chose que nous allons faire ça en fait facultatif. Donc on va basculer le menu de la valise. Donc, en ce moment, quand on clique sur un lien, ce menu de bricolage reste ici. Ok, Donc j'ai écrit ceci, et je dirais probablement que le comportement prévu que je préfère est que lorsque vous cliquez sur l'un d'entre eux, il fait défiler la section dans le menu se ferme. Parce que dans mon esprit, j'ai supposé que quand quelqu'un clique sur une section, il va vouloir la lire. Et alors, s'ils doivent cliquer à nouveau sur le X, c'est comme si c'était un clic supplémentaire. Alors nous allons de l'avant et fermons ça pour lui. Vous ne serez peut-être pas d'accord avec moi à ce sujet. C' est très bien. Si vous ne voulez pas le faire, Si vous ne voulez pas fermer le menu dans un élément est cliqué, alors n'incluez pas cette petite section juste ici sous le menu de basculement avant la section de défilement lisse suivante . Mais je voulais vous montrer comment le faire au cas où vous vouliez le faire. Donc, ce que nous devons faire ici est essentiellement imiter ce que nous avons fait ici avec notre bascule, notre menu et notre menu bascule, mais seulement faire la partie supprimer. Ok, donc on va faire, on va faire le menu bascule, et ensuite on va faire dot remove class close. Ok, donc quand ce menu est ouvert, le bascule devient. A la classe près ajouté à elle et que nous avons une animation qui va avec cela. Et donc, quand nous supprimerons cette classe, alors cela va supprimer ça. C' est ce bascule, et on va venir ici. Nous allons faire ce point Les parents de cette référence à nouveau la balise d'ancrage de l'élément de menu qui a été cliqué. Alors, quand les parents ne sont pas parents mais parents ? Et puis nous ferons le menu. Nous allons faire Ah, Knave article et nous allons faire le menu Knave et faire le menu. Ok, donc ceux-ci imitent ici quand nous apparaissons les éléments que nous avons ajoutés la classe show 2. Quand on bascule ça, on est maintenant les mêmes. Mais maintenant, ce qu'on va faire, c'est supprimer la classe, et on va le montrer, alors on va supprimer cette classe, et ça va faire fermer ce menu. OK, donc encore une fois, c'est juste créer cet effet que quand on clique sur un de ces éléments ici, il va fermer le menu. Donc vous voyez, maintenant le menu se ferme comme si nous avions appuyé sur ce bouton X. Lorsque nous cliquons à nouveau sur l'un de ces éléments ici, si vous ne voulez pas ce comportement, supprimez simplement ces lignes ici. D' accord ? Donc, la dernière chose, alors, est le défilement lisse et le défilement lisse est en fait assez simple. Donc, nous allons référencer notre variable de route que nous avons créée avant de nous souvenir, apparaître route. Ah, un corps de sourire. Donc on va faire référence à ça et on va faire une animation, alors on va faire de l'animation et à l'intérieur de ça, on aura des options pour notre animation. Donc, la première chose que nous voulons faire est que nous voulons spécifier ce qu'est notre animation. On va faire défiler le haut. Donc ça va être notre animation, et nous devons lui dire où nous allons faire défiler. Donc nous allons référencer H ref, que nous avons créé ici, qui se souvient des compétences de livre et des sections. Avoir ces I ds. Donc, c'est essentiellement Emily émulant ce que vous arriveriez si vous n'aviez pas javascript hors de cela et vous cliqueriez dessus sauf qu'il anime le processus. Ensuite, on va ajouter le décalage. Donc, nous voulons ajouter le décalage, et nous allons faire le top moins 100. Donc essentiellement, ce que ça va faire, c'est quand quand un de ces c' lynx a cliqué, on va animer le parchemin, non ? Et on va faire défiler. Toujours au sommet de ça, peu importe. Huit. Ref était l'école de cuisine en haut de cette section, mais on va ajouter un décalage au sommet de moins 100 pixels. Donc, fondamentalement, quand vous cliquez dessus au lieu de la section ici, défilant vers la droite en haut du navigateur, comme ça va vous donner environ 100 pixels. Ok, donc c'est ce que ça fait encore. Ça va peut-être aller jusqu'au sommet. Ou vous voudrez peut-être 400 photos de tout ce que c'est pour votre situation, mais ah, c'est exactement ce que j'ai choisi ici. Ok, donc c'est ce genre de mise en place de l'animation. Maintenant, on doit dire combien de temps ça va prendre. On va faire 500 millisecondes. Elle fait environ une demi-seconde, et ensuite on va attacher une autre fonction anonyme, et encore une fois, c'est une sorte de facultatif. Mais je pense que c'est logique dans cette situation. Cela fonctionnera sans cette fonction anonyme ici. Mais ce que cela fait si nous faisons le hachage point de l'emplacement de la fenêtre est égal à souffle. Euh, alors quoi ? Que se passe-t-il ? fais ça très vite et bien, j'ai besoin d'ajouter quelque chose ici, mais je vais parler de cette seconde. Donc, si nous n'avons pas ajouté cela ici, ce qui se passerait lorsque nous cliquons sur l'un de ces liens est que nous ferions défiler vers elle et tout fonctionnera. Trouve ce chemin. Mais il ne supprimerait pas la balise ah hash ou le hachage à la fin de l'URL. Et donc, en faisant cela Ce qui se passe est que cela dépend lorsque vous cliquez sur ce sujet met livre environ à la fin de l'URL Pound Skills portefeuille de port, etcetera. Donc, il est en quelque sorte imite le comportement par défaut parce que c'est ce qui se passerait par défaut si vous n'aviez pas de travail un script attaché à l'un de ces éléments. Donc, je pense que dans ce sens, cela est logique d'imiter le comportement par défaut de cette façon. Selon si vous utilisez ceci pour une autre application que vous pouvez ou ne voulez pas le faire , donc vous dépendrez de ce que vous faites. Vous pouvez ou non ajouter cette partie ici, et la dernière chose que nous devons faire ici est retourner false, et cela va vous assurer que le comportement par défaut lorsque vous cliquez sur l'un de ces liens ne se produit pas. Ok, donc si nous venons ici maintenant, nous cliquons sur les compétences que vous pouvez voir, nous obtenons ce défilement lisse. On a nos 100 pixels ici, et si on va au portefeuille, menu de la même chose se ferme. Contact, etcetera va revenir à environ et de sorte que nous donne notre école lisse. Maintenant, si vous n'êtes pas familier avec Jake requête. Si ce genre de votre première introduction à Jake Ray, c'est probablement un peu accablant à nouveau. Je recommande, vous savez, prendre le cours E J Corey ou de revenir à travers ça parce qu' une fois que vous savez, un peu de Jake où c'est en fait assez simple. C' est un joli Ah, je ne veux pas dire basique, mais c'est un truc assez standard quand il s'agit de Jake Worry So. Mais j'espère que cela vous montre comment faire ça. Et vous pouvez faire en sorte que ça marche pour quelle que soit la situation dans laquelle vous vous trouvez. 14. Créer le pied de page créer le site: D' accord, tu l'as fait. Nous en sommes à la dernière section ici. Je sais que certaines choses sont probablement assez épaisses à traverser. Je recommande juste peut-être de revenir à travers et de travailler avec un peu d'ici, ayant un peu de mal à tomber longtemps. Mais on est à la section pied de page. Celui-ci est en fait assez simple et direct. Donc on va faire Footer. Et tout comme l'en-tête, nous allons à la classe égale pied de page du site comme celui-ci et nous allons faire comme toujours, classe Div égale conteneur. Est-ce que la classe Div est égale ligne et ensuite nous allons faire des égaux de classe div et nous allons faire un appel 12 et nous allons au centre de texte. D' accord, et puis à l'intérieur ça fera l'affaire. Je fais juste un truc du droit d'auteur ici. Bien sûr, Changer ceci pour l'année. Votre site fera et copiera. Cela nous donne le droit d'auteur. Marquez-moi Faites défiler ici pour que vous puissiez voir qu'on est en bas. Effacez ici donc et copiez. Et je vais faire 2018 sur 18 Joe Freelancer. Oh, d'accord. Réservé comme ça. Et c'est à peu près tout. C' est ça, le pied de page. Nous avons juste besoin de le styliser à ce stade. Alors on y va. Je vais dire ça. Et puis on va aller dans notre CSS ici et me laisser prendre mon séparateur ici. Donc, il y a notre diviseur et nous allons juste faire le pied de page du site et nous allons faire un remplissage 20 pixels. École vers le bas afin que vous puissiez voir que Donc tapoter 20 pixels fera fond et nous allons dio deux d deux d deux d, juste un peu différent gris. Et puis nous allons faire le numéro de couleur 999 droite, Donc qui nous donne à peu près sont notre pied de page final là-bas. Oups, vas-y et sauve ça. Bon, donc ça nous donne notre dernier pied de page. Ah, et ça. Je veux dire, c'est vraiment tout là. Il y en a. Donc assez rapide ici tout Ah, sauter à une leçon de clôture après ça et nous pourrions parler de quelques choses à garder à l'esprit pour aller de l'avant d'ici 15. Projet de classe et conclusion: D' accord. Alors j'espère que vous les gars et apprécié le cours. Si vous le faisiez, j'apprécierais que vous me laissiez un avis sur le parcours. Je m'aide vraiment. Aussi, veillez à me suivre sur mon profil afin que vous puissiez voir quand je sortirai de nouveaux cours et voir tous les cours que j'ai là. Vous savez, j'ai le Guide du débutant pour PHP ont un objet de cours HTML. Faire de la programmation ? Un certain nombre de cours de développement Web. Ah, un de mes cours les plus populaires est ce freelance sur des cours de travail ? Donc, si vous voulez entrer dans ça et ainsi de suite, alors encore une fois, n' hésitez pas à vérifier ceux que vous voulez apprendre aussi bien que pour ça, vous savez, une des choses que Je peux imaginer passer par ceci est vous savez, certains de ces trucs si vous beaucoup de fois les gens entrent dans le développement web alors, ils peuvent apprendre CSS vraiment bien. Mais peut-être pas. Tu sais, Jake, nous sommes des scripts Java autant ou quoi que ce soit. En fait, je suis dans un bateau similaire, tu sais. Je sais. J requête assez bon, mais javascript n'est vraiment pas quelque chose que j'ai plongé lourd dans une sorte de plus est allé dans le chemin PHP . Ah, et donc quand vous avez quelque chose comme ça, je pense que la chose à garder votre esprit est qu'il le combine équitablement. Ne dites pas avance, mais nécessairement c'est un HTML agressif, vous savez , CSS, JavaScript et PHP. Et donc quand vous réunissez toutes ces différentes langues, Ah, vous ne les connaissez peut-être pas aussi bien que vous le pensiez ou que vous vouliez . Et donc, bien sûr, comme ça peut être un peu accablant. Et il y a quelques choses que je veux juste répéter ici que je les ai dites, mais l'une est, vous savez, si c'est le cas, juste une sorte de continuer à traverser et continuer à travailler avec ça et ainsi de suite, et je pense que je vais commencer à avoir plus de sens. La deuxième chose, cependant, est et en quelque sorte. Le but de la raison pour laquelle je voulais faire cette vidéo est que c'est vraiment important. cours basés sur des projets comme celui-ci sont sympas parce que vous devez apprendre à construire quelque chose que vous connaissez, réel, et ils sont amusants et ainsi de suite. Mais si vous voulez vraiment maîtriser le développement Web, vous voulez être vraiment bon à cela, et vous voulez vraiment maîtriser spécifiquement un langage particulier. Vous avez vraiment besoin de plonger dans une sorte de cours spécifique à un concept spécifique à la langue. Donc quelque chose comme mon Guide du Débutant pour Ph Pierre, mon Guide du Débutant au HTML, ce genre de cours. Ils ne sont pas forcément aussi amusant ou comme citation sans citation sexy qu'un cours basé sur un projet comme celui-ci . Mais c'est en fait la façon dont vous entrez et maîtrisez vraiment ces langues. Et ce sont ces choses que les gens prennent pour arriver au point où ils peuvent faire un projet comme celui-ci sans avoir les orteils, vous savez, sans qu'une bête soit super écrasante et ainsi de suite. Je veux dire, quand je me suis assis et que j'ai fait ça, que j'ai fait ça, je dois toujours faire des recherches et chercher les choses. Mais j'ai l'essentiel dans toutes les langues de ce que je voulais faire. Et c'est parce que j'ai suivi des cours spécifiques à la langue sur toutes ces choses, et j'ai appris les langues individuelles en profondeur elles-mêmes et les utiliser au jour le jour. J' avais donc une bonne idée de ce que j'allais faire. Encore une fois, je veux juste vous encourager à ne pas être pris dans Onley en train de suivre des cours basés sur des projets comme celui-ci. Ils sont amusants. Ils sont géniaux. Je pense qu'une fois que vous passez par certains des cours spécifiques de langue que des cours de port basés sur des projets comme celui-ci sont vraiment bonnes prochaines étapes à franchir. Parce que maintenant, il vous permet de prendre toutes ces connaissances que vous avez rassemblées et rassembler dans quelque chose. Mais, euh, encore une fois , vous savez, si vous voulez vraiment maîtriser le langage, vraiment maîtriser le développement Web, entrer dans ces cours spécifiques à la langue. D' accord, donc c'est tout ce qu'ils ont vraiment à dire dans cette affaire ici encore. Espérons avoir apprécié le cours que nous avons fait à nouveau. Je vous remercie de laisser un commentaire à nouveau. Aussi, suivez-moi sur mon profil. Si vous voulez être informé de tout autre cours et je le ferai, faites-le moi savoir si vous avez des questions dans la discussion ci-dessous. Merci 16. Les prochaines étapes: Je suis honnête, il n'y en a plus. Donc online.com, si peu de ménage pour finir ce cours. Si vous ne l'avez pas encore fait, oubliez pas de vous diriger vers la zone de classe. Il y a une section de cours pour certains, quelques étapes pour vous de marcher à travers pour ce cours. Assurez-vous donc de vous diriger en ce sens que c'est sous la discussion dans l'onglet Projets que vous verrez sur le cours. Aussi, si vous allez à mon profil, assurez-vous de me donner un suivi sur mon profil ici afin que vous soyez averti lorsque je sortirai de nouveaux cours. Et j'ai aussi une sorte de cours hebdomadaire de style podcast appelé Let's Talk freelance. Donc, si vous voulez avoir une sorte d'accès à formation continue sur le freelance, les affaires en ligne et ainsi de suite. Assurez-vous de vérifier ça. Parlons cours de freelance aussi. Et enfin, j'ai une lettre d'information quotidienne sur mon site Web à John Morris online.com. Si vous allez là-bas, vous pouvez vous inscrire à cette liste de diffusion. Vous serez également mis dans ma propre application mobile, ou vous aurez accès à plus de 78 heures de contenu gratuit au moment de cet enregistrement lié à la freelance et ainsi de suite. Donc, si cela vous intéresse, BD sûr de vérifier cela aussi. Encore une fois, c'est John Morris online.com. D'accord. Merci d'avoir pris le cours. Si ça vous a plu, je vous apprécie pour vous. Laissez-moi un avis et nous vous verrons dans le prochain cours.