Codage HTML et CSS pour débutants : Créez votre propre portfolio !

1. Introduction: Pour créer des sites Web, HTML et CSS sont les compétences essentielles que vous aurez besoin d'apprendre. Vous aurez également besoin de beaucoup de pratique aussi pour obtenir le coup de ces compétences et c'est l'objectif de ce cours. Au cours de ce cours, nous construirons un projet de portfolio pour vous donner la chance de mettre vos nouvelles compétences HTML et CSS en bonne pratique. Vous aurez également la chance de mettre en valeur vos compétences en construisant un site et aussi d'avoir un excellent portefeuille à ajouter à tous les projets futurs. Alors qui suis-je ? Eh bien, je m'appelle Chris et je suis développeur web depuis 20 ans et j'enseigne aussi ces compétences aux autres depuis de nombreuses années aussi. À la fin de cette classe, vous aurez une grande compréhension de la façon dont les sites Web sont construits et aussi du rôle que HTML et CSS ont à jouer. Non seulement vous apprendrez les compétences essentielles pour un débutant, mais nous irons encore plus loin en couvrant sujets plus intermédiaires tels que le design responsive, mise en page en utilisant la grille et Flexbox, animations et les transformations, en ajoutant un effet de style parallèle en utilisant CSS, et bien plus encore. Vous n'avez pas besoin d'avoir des connaissances préalables en HTML ou CSS pour commencer et, en fait, si vous êtes complètement nouveau, une volonté d'apprendre vous fera beaucoup de chemin. Nous couvrons les choses de base en expliquant tout ce que vous devez savoir. Cependant, si vous avez de l'expérience dans la construction de sites Web avec HTML et CSS, vous aurez aussi l'espoir d'apprendre quelques nouvelles astuces en cours de route. À la fin de ce cours, vous aurez les compétences dont vous avez besoin pour construire superbes sites web réactifs et aussi un portfolio en direct en ligne pour le reste du monde à voir. Merci de vous intéresser à ce cours et commençons. 2. Partagez vos travaux sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude suivre simplement pour de suivre simplement pour reprendre un cours. Prenez le temps de lire chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets et vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de vous éloigner de la classe Vous pouvez même prendre du recul une fois que vous avez terminé le cours et revenir et apporter des modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. N'oubliez pas non plus de partager votre projet ici sur Skillshare et je suis le seul à y jeter un coup d'œil, mais il inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous dans l'onglet Projet et ressources où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 3. C'est quoi HTML et CSS ?: Avant de nous lancer dans notre projet, si vous êtes nouveau en HTML et CSS, nous allons jeter un oeil à ce que ceux-ci sont plus en détail. Nous n'allons pas aller trop loin puisque nous allons écrire beaucoup de HTML et CSS pendant ce cours, mais un peu d'arrière-plan vous aidera à comprendre ce que nous allons faire. Commençant par HTML, qui signifie langage de balisage hypertexte, et est la façon standard d'écrire des pages Web. Nous écrivons HTML en utilisant des éléments et ce ne sont généralement qu'une paire de balises qui décriront le contenu à l'intérieur comme juste ici, c'est l'élément p qui est pour ajouter un paragraphe de texte à notre page web. D' abord, il y a une balise d'ouverture, puis nous avons une balise de fermeture qui est indiquée par la barre oblique avant, puis nous ajoutons notre texte à l'intérieur. La plupart des éléments HTML ont une balise d'ouverture et de fermeture, cependant, il y a quelques exceptions telles que lorsque vous utilisez des images qui n'ont que la balise unique. C' est parce que les réservoirs d'images n'ont pas de contenu à l'intérieur, donc juste du texte. Au lieu de cela, nous pointons vers un fichier image et nous le couvrirons pendant le cours. Comment passer de cette page à une page web complète ? Jetons un coup d'oeil à un exemple typique. C' est parce que nous créons un document HTML que nous allons également utiliser les éléments HTML pour entourer toute notre page Web, cela a également la balise d'ouverture HTML et aussi la balise de fermeture qui va entourer tout le contenu que nous voyons sur la page Web. Pour commencer, nous avons les balises HTML et ensuite imbriquées à l'intérieur ici, nous avons tout le contenu notre page et tout contenu que nous verrons dans la prochaine vidéo que nous voulons afficher dans le navigateur va à l'intérieur de l'élément body. Imbriqué à l'intérieur, nous avons le corps qui va être un wrapper pour toutes les images et tout le texte, liens et les choses comme ça sur la page. À l'intérieur de ce corps, nous avons ensuite tous les éléments que vous voyez ici, nous pouvons avoir un en-tête donc c'est au niveau suivant dans, et puis à l'intérieur de cet en-tête, nous pouvons ajouter d'autres imbrication aussi. Souvent, nous pouvons vouloir ajouter un logo ou une image de site en haut de l'en-tête, aussi quelques liens pour la navigation, ou nous pourrions avoir notre navigation juste en dessous comme nous le voyons ici. A l'intérieur de la section principale, nous avons également quelques imbrication supplémentaires sur le même niveau que l'en-tête. Nous avons également la section principale, et à l'intérieur ici nous pouvons ajouter d'autres éléments à l'intérieur ici aussi. Nous pouvons vouloir ajouter une image, nous pouvons ajouter du texte, ou nous pourrions également diviser cela en plusieurs sections. Par exemple, disons que nous avions une nouvelle section à l'intérieur ici. Cette section pourrait également contenir d'autres éléments imbriqués, et ceux-ci vont de nouveau entre l'élément d'ouverture et de fermeture. Nous pourrions ajouter du texte ici à cette section, contiendrait alors également les éléments p et c'est ainsi qu'une page Web est généralement structurée. C' est ainsi que nous mettons notre contenu sur la page, mais comment ajouter le style et la mise en page ? Nous le faisons en utilisant CSS, CSS est un moyen de changer l'apparence, sensation et la mise en page de nos pages Web, il le fait en ajoutant des couleurs, taille, espacement et positionnement pour n'en nommer que quelques-uns, et nous pouvons même l'utiliser pour animations et transitions. Pour ce faire, nous devons cibler les éléments HTML que nous voulons styliser et ce sont de multiples façons de le faire. En regardant cet élément p plus tôt sur la gauche, probablement la façon la plus basique de le faire est par le nom de l'élément. Les deux sur la droite est la façon dont nous écrivons notre CSS, nous ciblons l'élément par son nom tel que p, et écrivons nos règles de style à l'intérieur de ces accolades telles que la couleur de la police et la taille. Cela appliquerait le style à tous les éléments p sur une page, cependant, si nous voulions juste cibler un élément unique né, nous pourrions ajouter un ID unique à la balise d'ouverture, comme ceci. Ce nom d'id de text-red est totalement à nous, et toute information supplémentaire que nous ajoutons dans cette balise comme ceci, est connu comme un attribut. Nous allons lier cet ID à notre CSS par son nom avec le préfixe de hachage comme nous le voyons sur la droite. Comme un ID est destiné à être un nom unique ciblant un seul élément, nous avons également l'attribut de classe. Cette classe peut être ajoutée à plusieurs éléments, ce qui rend nos styles plus réutilisables. Comme l'ID, nous allons le lier au CSS par son nom, mais cette fois nous ajoutons un point comme préfixe. Ce sont des exemples de ce que nous appelons des sélecteurs CSS, et nous allons couvrir quelques sélecteurs plus avancés tout au long de ce cours. Ce n'est que quelques bases pour nous faire avancer avec HTML et CSS, mais je crois toujours que la meilleure façon d'apprendre est de construire des choses, et c'est ce que nous allons commencer à faire dans la prochaine vidéo où nous configurons nos projets de portefeuille. 4. Préparez votre projet de portfolio: Prenons maintenant cette connaissance et nous pouvons l'appliquer à notre projet de portefeuille. Pour commencer avec un projet web, tout ce que nous avons à faire est de créer un dossier régulier qui va stocker tous les fichiers et dossiers dont nous aurons besoin. Je vais ajouter mon projet sur le bureau ou il peut aller n'importe où que vous préférez. Je vais cliquer avec le bouton droit de la souris et créer un nouveau dossier que je vais appeler « portfolio ». Ce nom est totalement à vous et n'hésitez pas à changer cela. Ensuite, nous avons besoin d'un éditeur de texte pour écrire notre code. J' utiliserai le code Visual Studio pour ce cours que vous pouvez télécharger à partir d'ici si vous en avez besoin. Le code VS est disponible en téléchargement gratuitement sur Mac, Windows et Linux, ou vous pouvez utiliser tout autre que vous préférez comme Atom, Brackets ou Sublime Text. J' ai déjà le code Visual Studio installé donc j'ai cette ouverture sur le bureau. Pour ouvrir notre projet, il vous suffit de faire glisser sur le dossier du projet et ensuite nous avons besoin d'un nouveau fichier HTML pour commencer à travailler avec. Nous pouvons aller au nouveau fichier dans les options ou utiliser Command ou Control N et cela va créer un nouveau fichier que je vais enregistrer comme index.html. Cela va automatiquement enregistrer à l'intérieur de nos projets et tous les fichiers HTML doivent avoir cette extension. Ce fichier d'index est généralement le fichier principal, tout le point d'entrée de notre projet souvent utilisé comme page d'accueil dans un simple site HTML. Commençons à travailler en créant notre structure HTML initiale, en commençant par le doctype. Un doctype est le type de document que nous créons et cela indiquera au navigateur qu'il s'agit d'un fichier HTML. Ensuite, nous devons entourer tout notre contenu dans cette page, dans les éléments HTML, dans les éléments HTML, et cela a une balise d'ouverture et de fermeture. Nous pouvons également définir la langue de la page comme un attribut en tapant « lang » et je vais mettre le mien pour être en anglais. Si vous utilisez une autre langue, vous pouvez rapidement trouver un code de langue [inaudible] en recherchant des codes de langue HTML dans votre moteur de recherche. À l'intérieur des balises HTML, cela contient à la fois la tête et le corps imbriqués à l'intérieur. Commençons par la section tête et cela va contenir des informations sur notre site et aussi des liens vers d'autres fichiers. Aucun des contenus que nous ajoutons dans la section d'en-tête n'est affiché dans le navigateur. Je vais commencer à l'intérieur ici en ajoutant deux balises méta. Les balises Meta sont simplement des données sur notre site et ne sont pas affichées dans le navigateur. Le premier, nous allons ajouter les attributs du jeu de caractères et définir ceci sur une valeur de « UTF-8 ». Cela définira les caractères que nous allons utiliser dans notre projet. La norme HTML5 est UTF-8 qui couvre presque tous les caractères et symboles dans le monde. Le second, nous allons définir le nom pour être égal à « viewport ». Il s'agit de la balise meta viewport qui est utilisée pour configurer la page pour différentes tailles d'écran. Nous le faisons en définissant le contenu et donc il est égal à la largeur, pour être égal à la largeur de l'appareil et cela définira notre page Web pour être la même que la largeur de l'appareil qui a été consultée avec disons mobile, un ou une tablette. Après cela, ajoutez une virgule, et je vais définir l'échelle initiale pour être égale à un. C' est vraiment important pour un design réactif. Cela définira le niveau de zoom initial, toute notre échelle lorsque la page est chargée pour la première fois. C' est vraiment important de sorte que tout le site semble bien sur toutes les tailles d'écran. Si nous n'ajoutons pas cela, un appareil mobile peut essayer de prendre notre page de taille de bureau et il suffit de zoomer pour essayer d'adapter tout le contenu sur un appareil mobile peut essayer de prendre notre page de taille de bureau et il suffit de zoomer pour essayer d'adapter tout le contenu sur notre petit écran, ce qui fait que notre texte semble vraiment petit. Nous ne voulons pas avoir de zoom ou de mise à l'échelle puisque nous voulons prendre soin de l'aspect et de la sensation de notre projet en utilisant CSS. Beaucoup de cela peut sembler déroutant pour commencer, mais cela va être quelque chose que vous allez réutiliser sur tous les projets afin que vous obtiendrez beaucoup de pratique. La dernière partie consiste à ajouter le titre de la page et c' est le titre de la page qui sera affiché dans l'onglet du navigateur. Je vais définir ça comme Portfolio de Chris Dixon. Nous pouvons changer cela en fonction de votre projet. Enfin, vous [inaudible] à la section de la tête, vous pouvez également ajouter un corps. C' est le deuxième élément qui est imbriqué à l'intérieur de notre HTML. C' est ainsi que nous mettons en place une structure HTML de base. Cette section contient tout le contenu que nous voulons afficher dans le navigateur, comme les images, liens, ainsi que tout texte. Vous passerez donc la plupart du temps pour le reste de ce projet. 5. Ébauchez vos idées et rassemblez vos images de projet: Avant d'aller plus loin dans ce projet, il y a deux approches que vous pouvez adopter. Vous pouvez suivre avec moi, et construire exactement le même projet. Si vous voulez juste apprendre HTML et CSS, et c'est tout à fait bien. Ou si vous vous sentez un peu plus créatif ou voulez créer un véritable portefeuille que vous allez utiliser, c'est le moment de rassembler tout ce dont vous aurez besoin pour vos projets. Ce sera le portefeuille que je vais créer. Il a une grande section d'en-tête avec une introduction sur nous-mêmes. Si nous rechargeons la page, nous avons aussi quelques animations de décoloration. Nous avons des textes verticaux. Ensuite, comme nous faisons défiler, nous voyons quelques animations de flip, y compris une image de parallaxe en arrière-plan. Plus bas, nous avons une section de travail récente, qui comprend deux lignes avec quelques contenus contenant des informations sur un projet précédent que vous souhaitez mettre en valeur. Ceux-ci ont également des animations coulissantes aussi. Nous apprendrons également comment les mettre en page à l'aide de Flexbox et d'autres techniques. En bas, nous avons un contact à la section, et le site est également entièrement réactif. Si nous réduisons le navigateur vers le bas, il est également bon sur différentes tailles d'écran. Aussi le contenu ajuste et a modifié la mise en page en fonction de la nouvelle taille de l'écran. Si nous montons à la section supérieure, nous avons quelques liens. Allons à notre page de projets. Nous avons le même en-tête pour le haut. Ensuite, nous avons quelques projets récents utilisant les mises en page de grille CSS. Encore une fois, si nous réduisons cela, cela répondra également, et changé pour s'adapter à la taille de l'écran. Si vous voulez juste suivre avec moi, c'est tout à fait bien. Si vous voulez juste changer votre nom et les images, l'utiliser simplement comme une expérience d'apprentissage. Si vous envisagez de personnaliser, ce serait une bonne idée de créer un croquis ou une maquette de la façon dont vous aimeriez qu'il ressemble. Vous aurez également besoin de rassembler toutes les images que vous voudrez utiliser aussi. J' ai fourni l'image d'arrière-plan à utiliser avec ce cours, qui est l'image d'arrière-plan parallaxe de la page d'accueil mais vous devrez fournir quelques images à utiliser dans le portfolio. Si vous n'avez pas beaucoup de projets à utiliser, vous pouvez trouver des exemples d'images que vous souhaitez inclure ou aussi réduire le nombre de projets que vous souhaitez présenter. Prenez quelques instants pour rassembler toutes les images et les idées dont vous aurez besoin pour votre projet. Il peut également être judicieux de redimensionner toutes les images du portefeuille que vous allez utiliser. Cela rendra la mise en page de la grille beaucoup plus facile plus tard dans le cours. Une fois que vous avez terminé, passons à la vidéo suivante, où nous allons commencer par créer la section d'en-tête. 6. La section d'en-tête et les éléments sémantiques: Avant la version HTML 5, une chose typique que les développeurs Web faisaient pour mettre en page notre contenu sur une page, serait de créer beaucoup de sections div différentes pour entourer nos zones ou notre contenu. Par exemple, nous allons créer un div pour notre en-tête, notre section principale, notre pied de page, et peut-être aussi une barre latérale aussi. Pour faire la distinction entre chacune de ces divs ou sections, nous ajouterions généralement un ID, comme nous le voyons ici, comme l'en-tête ou le pied de page, donc nous savions que chacune de ces sections était différente. Maintenant, cependant, depuis HTML Version 5, nous avons beaucoup plus d'éléments sémantiques ou descriptifs que nous pouvons utiliser. Beaucoup d'entre eux sont assez explicites. Nous en avons un tel que l'en-tête, le pied de page, une navigation. Nous avons également une section principale pour la pièce principale de notre contenu sur la page. relation avec cette section principale, nous avons l'écart, qui est généralement utilisé pour des choses telles qu'une barre latérale. Nous pouvons ensuite ajouter des sections autonomes de contenu, ou nous pouvons également avoir des choses telles que l'article, qui est un élément d'information autonome, comme un article de presse. Nous allons utiliser beaucoup de ces éléments sémantiques tout au long de ce cours, en commençant par la vidéo suivante, où nous allons jeter un oeil à l'en-tête et au NAV. C' est la version finale du projet que nous allons construire. Je vais travailler dans la section du corps en créant cet en-tête. Cela nous donnera l'occasion de jeter un oeil à certains éléments sémantiques que nous venons d'examiner. Nous pouvons utiliser l'en-tête comme un wrapper pour la section, le long nous regardons également l'élément nav aussi. Faisons-le dans la section corps de notre projet. N' oubliez pas que tout le contenu que nous affichons dans le navigateur ira entre ces balises. Nous pouvons commencer par l'en-tête, qui va envelopper toute la section grise que nous venons de voir. Commençant par les liens de navigation vers le haut. Nos liens de navigation vont être une couverture dans ma liste, ou plus précisément, une liste non ordonnée, que nous pouvons créer en utilisant l'élément ul. Une liste non ordonnée affichera simplement quelques éléments de liste, par défaut avec les puces sur la gauche. Nous avons également une liste ordonnée que nous pouvons utiliser avec l'élément ol. Cela va créer une liste numérotée. À l'intérieur, nous ajoutons chacun de nos liens avec la balise li, qui est courte pour l'élément de liste. Nous devons ajouter une maison, ainsi que le lien du projet. Si nous sauvegardons cela, nous pouvons maintenant ouvrir cela dans le navigateur. Vous pouvez même aller dans votre portefeuille de projets et double-cliquer sur le index.html, qui ouvrira cela dans le navigateur. Au lieu de cela, nous pouvons aller dans Visual Studio Code sur l'onglet. Nous pouvons cliquer avec le bouton droit de la souris, copier le chemin, puis coller cela dans le navigateur. Nous avons maintenant nos deux liens en haut. Si nous cliquons sur ces pages, elles ne font pas de lien vers d'autres pages. Pour ce faire, nous devons les transformer en un lien en utilisant l'élément a. Supprimons temporairement le texte qui se trouve à l'intérieur des éléments a, puis collez-le entre les liens. Maintenant, nous devons dire au navigateur où nous voulons lier. Nous le faisons en ajoutant l'attribut href. C' est un lien entier, et nous sommes actuellement sur la page d'accueil. Nous voulons créer un lien vers le index.html. Faisons la même chose pour tous les projets. Collez ce texte, puis le href va aller à la page de notre projet. Nous n'avons pas encore créé notre fichier de projet, mais nous pouvons l'ajouter pour plus tard. Enregistrez ce fichier, puis, sur le navigateur et rechargez. Nous voyons maintenant que ceux-ci sont transformés en liens. Si nous cliquons sur les projets, nous sommes repris au project.html, que, bien sûr, nous n'avons pas encore créé. Cliquez sur « Accueil », et nous resterons sur la page d'index. Ensuite, nous devons ajouter le texte dans notre en-tête. Tout d'abord, nous avons le titre de « Salut, je suis Chris », un texte simple ci-dessous, puis notre texte vertical en bas. Nous pouvons ajouter cela dans la section d'en-tête, mais juste après l'élément nav. Le texte de « Salut, je suis Chris », je vais ajouter un titre de niveau 1. HTML nous fournit des en-têtes que nous pouvons utiliser du niveau 1 au niveau 6. Le niveau 1 sera le plus grand et aussi le plus important. La taille et l'importance diminuent à mesure que le nombre augmente. Ajoutez le texte pour votre projet, puis en dessous, nous avons le texte normal. Nous ajoutons du texte régulier dans l'élément p, qui signifie paragraphe. Je vais entourer mon texte dans les icônes tilde que vous pouvez trouver sur le clavier, et le texte de : « Je suis un développeur web et créateur de cours. » La dernière partie que nous devons ajouter est le texte de « Je fais des choses », et ce sera notre texte vertical. Le texte vertical n'est cependant pas créé en HTML. Le HTML est simplement là pour ajouter le contenu à notre page. Nous allons l'ajouter en utilisant un titre de niveau 3. Cela apparaîtra dans le navigateur pour le moment comme un texte horizontal régulier, et nous allons changer cela plus tard avec le CSS. Juste après notre paragraphe, sur la ligne suivante, le titre de niveau 3 avec le texte de « Je fais des choses ». Enregistrez ce fichier et plus dans notre onglet « Projet », rechargez. Le contenu est maintenant à l'écran. Puisque nous n'avons ajouté que le contenu HTML, notre projet n'a pas l'air aussi bon que la version finale. Nous allons changer cela dans la prochaine vidéo en ajoutant une feuille de style. 7. Aperçu de CSS et liaison de notre feuille de style: Plus tôt, lorsque nous avons configuré notre projet, nous avons dit que la section principale contient des informations sur nos sites et également des liens vers nos fichiers. Mais nous n'allons pas lier à une feuille de style qui va aider à améliorer notre style et nos mises en page pour nos projets. abord, nous avons besoin d'une feuille de style pour travailler afin que nous ne puissions pas la dissoudre dans nos projets. Nous pouvons ouvrir la barre latérale et créer un nouveau fichier à la racine de nos projets. Je vais appeler cela les styles avec l'extension CSS en pointillés, dont nous avons besoin pour tous les fichiers CSS réguliers. Comme ce n'est pas un grand projet, je vais garder tous les styles pour ce cours dans un seul fichier. Pour les grands projets, vous pouvez utiliser autant de fichiers CSS que vous le souhaitez, et même les organiser dans des dossiers aussi. Ensuite, nous avons besoin de cela à l'intérieur de notre fichier HTML dans la section tête. Allez à l'index. Ensuite, je vais lier ceci juste au-dessus du titre. Rappelez-vous plus tôt, nous avons dit que la section principale est utilisée pour ajouter des informations sur nos sites et également des liens vers nos fichiers. Nous pouvons créer ce lien, par défaut, nous avons cette relation avec les feuilles de style, qui est exactement ce que nous voulons. Ensuite, le même attribut « href » que nous avons pour nos liens juste en dessous. Ici, nous devons demander le chemin du fichier vers le fichier auquel vous voulez lier. Puisque ce fichier est à côté de notre page d'index, tout ce que nous avons à faire est d'ajouter le nom de notre fichier. Si nous organisons notre CSS en dossiers, nous aurions également besoin d'ajouter le « Nom du dossier » aussi. Juste un dossier CSS, puis transférer « barre oblique » dans le nom de notre fichier. Pour tester que ce fichier fonctionne correctement, je fais souvent quelque chose d'évident qui s'affichera dans le navigateur. Si vous allez à la, « Corps », et définit la couleur d'arrière-plan à la couleur rouge. Sauvegardons ceci et rechargeons le navigateur, et ceci est clairement maintenant lié afin que nous puissions supprimer ce fichier. Maintenant, je vais ajouter au haut de ce fichier quelques styles globaux qui s'appliqueront à tous les sites. Je réinitialiserais également dans certains styles par défaut que le navigateur ajoute automatiquement. Aussi pour commencer, je vais être le style des sites mobiles d'abord, puis plus tard, nous pouvons ajuster notre style pour les grands écrans. Commençons par le réduire à un petit périphérique d'écran. Je vais placer cela à côté de Visual Studio Code. Puisque nous n'utilisons qu'un seul fichier CSS, gardez cela plus organisé. Je vais ajouter un commentaire. Un commentaire est quelques textes que nous voulons ajouter qui ne sont pas affichés dans le navigateur. Nous pouvons généralement utiliser cela à nos notes pour notre auto et nos développeurs, où le commentaire en CSS avec la « barre oblique » avant puis un, » étoile », puis nous le fermons lorsque l'étoile et la barre oblique avant entre ici, nous pouvons ajouter n'importe quel texte que vous souhaitez ajouter. Je vais ajouter cette section en tant que styles globaux. La première chose que je vais faire est de cibler le corps en définissant la famille de polices. Si nous regardons l'auto complet, nous pouvons voir certaines des polices disponibles que nous pouvons ajouter, et je vais aller pour « Georgia », qui descend « Times New Roman » et « Times New Serif ». Ce sont des polices sécurisées sur le Web que nous pouvons utiliser dans vos projets, ce qui signifie qu'elles sont sûres à utiliser sur tous les navigateurs. Nous pouvons également inclure différentes polices d'autres fournisseurs, tels que les polices Google, le phénomène à coller avec l'une de ces polices de site Web. Souvent, lorsque nous déclarons la famille de polices, comme nous le voyons ici, il y a plusieurs polices. Nous en avons quatre ici, et c'est au cas où le premier n'est pas disponible. Georgia n'est pas disponible. Il recherchera la police Times New Roman et reviendra à l'époque. Ensuite, le dernier serait par défaut un serif générique. Sur la ligne suivante, nous allons définir la base sur la taille à dix pixels. Nous verrons pourquoi très bientôt. La prochaine chose que nous allons faire est de définir la marge à zéro, et cela réinitialisera toute valeur par défaut du navigateur. Nous pouvons définir la largeur à 100 vw, ce qui représente 100 pour cent de la largeur de la fenêtre. C' est parce que nous stylisons le mobile d'abord et nous voulons que le contenu soit couvrant toute la largeur de l'appareil mobile, et aussi encore, puisque nous ciblons les appareils mobiles, nous allons également centrer le contenu. Nous ne pouvons pas remplacer cela plus tard lors du développement pour les navigateurs plus grands, et nous le ferons en utilisant midi-requêtes. « Enregistrer » ceci et aller dans le « Navigateur ». « Recharger ». Voyez que le texte est aligné au centre et que la taille de police est maintenant de 10 pixels. La semaine prochaine, nous allons retirer ces balles de notre propre liste de commandes. Cibonnons les éléments de liste non ordonnés. Nous pouvons les supprimer en définissant le « style de liste », pour être égal à, « Non ». « Actualiser », le navigateur. Nous pouvons également voir à partir de notre liste non ordonnée que ce n'est pas complètement centré. Cela est dû à certaines des valeurs par défaut du navigateur qui sont appliquées à notre liste non ordonnée. Nous allons supprimer toute marge, qui est l'espacement autour de l'extérieur des éléments et aussi tout rembourrage, nous pouvons réinitialiser cela aussi, et le rembourrage est tout espacement qui est ajouté à l'intérieur des éléments. Marge est à l'extérieur, et le rembourrage est à l'intérieur.Je veux jeter un oeil de plus près à ces très bientôt. Nos liens sont également soulignés. C' est parce que ceux-ci sont entourés des éléments a. Nous pouvons supprimer le soulignement en définissant la décoration du texte sur « none ». Nos liens ont également une couleur différente. Nous pouvons remplacer cela en définissant la valeur de couleur à hériter. Cela signifie que les liens hériteront de la couleur de l'élément de liste parent plutôt que d'avoir besoin par défaut en couleur, « save » et « refresh ». La plupart de cette section est juste les remplacements de navigateur et quelques valeurs par défaut de base. Nous allons maintenant passer à une valeur d'en-têtes spécifique. Nous pouvons également créer un commentaire ou deux. Tout comme avant, nous pouvons créer nos commentaires, et ce sera pour la section d'en-tête. Notre en-tête est entouré dans les éléments d'en-tête, et tout comme nous le voyons dans la version finale ici, nous allons définir ceci pour être une couleur gris clair. Nous le faisons en définissant la propriété d'arrière-plan. Je vais définir ceci pour être n'importe quelle couleur que nous choisissons, que je vais aller pour la couleur du gris ardoise clair. Si vous voulez en savoir plus sur les différentes couleurs que nous pouvons utiliser, vous pouvez effectuer une recherche Google pour le sélecteur de couleurs HTML. Vous pouvez utiliser celui par défaut qui apparaît dans la recherche ou sélectionner l'un des liens ci-dessous. Si vous utilisez une valeur hexadécimale, comme ceci, nous devons également copier le hachage et ensuite nous pouvons remplacer ceci comme couleur d'arrière-plan. Je vais garder le mien comme la couleur grise. Ensuite, rechargez le navigateur. Je vais voir cela prendre effet maintenant. À l'heure actuelle, tout notre contenu est pressé contre le haut et le bas de l'en-tête. Rappelez-vous que nous avons toujours dit que nous pouvons ajouter un peu d'espace dans, à l'intérieur de nos éléments en ajoutant un rembourrage. C' est évidemment maintenant et je vais définir ceci pour être la valeur de 1rem. 1rem est une fois la taille de notre police de base, que nous avons configurée plus tôt dans la taille du corps. Donc, 1rem serait égal à 10 pixels, 2rem serait 20 pixels, et ainsi de suite. La raison pour laquelle nous avons défini cela pour être un 10 pixels arrondis est de sorte que nous pouvons facilement travailler la valeur en rem. Donc maintenant, si nous disons cela, nous devrions avoir 10 pixels de rembourrage autour de l'extérieur. Ensuite, nous allons définir la hauteur de l'élément, comme nous l'avons vu dans la version finale avec toute la hauteur du navigateur. Nous pouvons le faire en définissant la valeur de 100vh, qui est 100 pour cent de la hauteur du port de vue. Ensuite, nous allons passer au style des liens de navigation. Ceux-ci sont créés à l'aide d'une liste non ordonnée. Définissons la taille de la police pour être égale à 1.2rem, ce qui est l'équivalent de 12 pixels ajoutés dans la liste non ordonnée, comme ceci, nous allons appliquer la taille de la police à toutes les listes non ordonnées sur notre page. Si vous voulez qu'il soit plus spécifique, et ne l'appliquez qu'à la liste non ordonnée. À l'intérieur de notre section maintenant, nous pourrions être plus précis et ajouter le nav à l'avant, juste comme ça, ce qui signifie que nous sommes maintenant libres d' ajouter différents styles dans différentes listes non ordonnées. Ensuite, nous allons définir le type d'affichage pour être flex. Nous allons bientôt regarder plus profondément dans la flexbox CSS. Mais pour l'instant, cela nous permet de disposer le contenu dans une direction. Que ce soit horizontalement, par défaut ou verticalement. Enregistrez ceci et rechargez. Nous voyons maintenant que les liens sont disposés dans une direction horizontale. Pour repousser ces liens au milieu de la page, nous pouvons également utiliser une propriété flexbox, qui est justifier le contenu et la valeur du centre. Ces liens ont également besoin d'un peu d'espace entre les deux. Nous pouvons le faire en ciblant l'élément de liste. Encore une fois, nous allons être plus spécifiques et ciblons uniquement les éléments de la liste dans cette section de navigation. Nous pouvons le faire en ajoutant une certaine marge. Lorsque vous définissez la marge certainement si nous tapons simplement une valeur telle que 1rem, cela s'appliquera à tous les côtés de notre article de liste. Donc, 1rem de marge s'appliquera en haut, à droite, en bas et à gauche. Nous pouvons également utiliser un raccourci qui consiste à appliquer la marge en haut et en bas et aussi à gauche et à droite seulement. Donc, pour commencer, nous pouvons définir ceci sur zéro en haut et en bas. Ensuite, la deuxième valeur est la gauche et la droite, recharger, et maintenant j'ai un peu d'espace entre les deux. Descendre à notre cap de niveau 1. Ajoutons également de la taille de police dans cela. Encore une fois, nous allons être plus précis et cibler uniquement le titre de niveau 1. A l'intérieur de la section d'en-tête. Je vais définir la taille de la police à 5rem. Rechargez, et maintenant c'est beaucoup plus grand. En descendant, nous avons également l'élément p ci-dessous. Donc, c'est l'en-tête p. La taille de la police, je vais définir cela égal à 1.6rem, qui est l'équivalent de 16 pixels. Un rembourrage qui va s'appliquer à l'intérieur des éléments. Donc, 1rem en haut et en bas ajouter un peu d'espace entre le reste du texte, et nous n'avons pas besoin de remplissage à gauche et à droite puisque notre texte est centré. Jetons un coup d'oeil à ça. Ok, bien. Si nous regardons la version finale, nous avons également cette ligne qui sépare les choses. Nous pouvons ajouter cela en utilisant un élément hr, qui est une règle horizontale dans le HTML, ou nous pouvons ajouter une bordure en bas de ce texte. Faisons cela en utilisant CSS. La bordure inférieure, qui va être en ligne avec d'un pixel, une ligne solide, et la couleur du point-virgule gris clair à la fin et rafraîchir le navigateur. Les dernières parties du style d'en-tête est de cibler le, Je fais les choses taxées tout en bas. Jusqu' à présent, nous avons ciblé les éléments par le nom tels que l'en-tête et p, que nous avons examiné plus tôt. Nous pouvons également utiliser un nom de classe pour. Je vais ajouter un nom de classe pour faire pivoter cet élément. Puisque nous allons réutiliser cela sur notre page dans le index.html. Cherchons notre titre de niveau 3. Nous pouvons ajouter une classe de rotation. Cela est dû au fait que le texte tournera sur les plus grands écrans. Revenons donc à notre style dans lequel je cible une classe avec le point, le nom de tourne. Plutôt que d'utiliser simplement la propriété de marge que nous avons examinée précédemment, nous pouvons également être plus spécifiques et cibler un seul côté, tel que la marge supérieure. Je vais ajouter une valeur de 2rem, une taille de police de 3rem, et l'opacité, qui est la valeur libre de voir 0,4. Cela signifie que notre texte est transparent à 40 pour cent, ce qui signifie qu'une partie de la couleur de fond gris viendra à travers. C' est ainsi que ce texte aura l'air sur les plus petits écrans. Puis plus tard, sur le grand écran, nous ajouterons la rotation. C' est notre premier regard sur le style d'une page web avec CSS et également adopté une approche mobile d'abord. Comme vous pouvez le voir, nous avons couvert un certain nombre de règles CSS ici et il y a aussi beaucoup plus que nous pouvons appliquer. Nous en découvrons beaucoup au fur et à mesure que nous progresserons dans le reste du cours. 8. Petit plus : Inspecter CSS avec les devtools: Avant d'aller plus loin dans ce projet, je veux partager avec vous un conseil rapide qui peut vraiment vous aider pendant développement et c'est d'utiliser les outils de développement, qui sont intégrés dans tous les principaux navigateurs. Les outils de développement, entre autres choses, ne peuvent pas nous permettre d'inspecter le HTML et le CSS non seulement de nos propres projets, mais de tout autre site web aussi. Nous pouvons accéder aux outils de développement à l'intérieur du navigateur. Généralement, nous ferions un clic droit dans ou contrôle-clic, puis aller à inspecter ou inspecter l'élément pour certains navigateurs. À l'intérieur, nous avons beaucoup d'informations sur les sites Web Chrome. Vous voulez développer cela. Nous avons l'inspecteur, tout d' abord, du coin supérieur. Si nous cliquons dessus, nous pouvons alors survoler certaines parties de nos sites Web. Comme dans quelle partie on veut regarder. Allons loin avec le titre de niveau 1, cliquez dessus. Nous pouvons voir la structure HTML sur le côté que vous dirigez. Vous pouvez également voir cette information en bas du navigateur, mais je vais juste déplacer le mien vers le côté droit en utilisant les options ici. Ici, nous pouvons voir que le titre de niveau 1 est mis en évidence. Vous pouvez voir exactement quel HTML possible contrôle cette section. Ensuite, sur la droite, nous avons ce style. Nous voyons que l'en-tête H1 a une taille de police de cinq rems. Nous pouvons également cliquer ici pour supprimer le style égal dans. Nous pouvons jouer autour des choses en ajoutant un nouveau style dans. Changeons l'égaleur. Cela prend instantanément effet dans le navigateur. Ci-dessous, nous voyons également un style par défaut dans lequel a été appliqué par le navigateur. Nous voyons également vers le bas pas certains styles de également été hérités de la section du corps qui est le conteneur, tels que la famille de polices et l'alignement du texte. Il y a beaucoup plus d'onglets avancés que vous pouvez voir en haut, mais nous ne couvrirons pas cela pendant cette classe. Les outils de développement nous permettent non seulement d'inspecter le HTML et le CSS de notre propre site, mais aussi d'autres sites aussi. Par exemple, si vous allez sur le site Web de Mozilla, nous pouvons faire la même chose ici. Cliquez sur l'inspecteur, puis choisissez des éléments. Il y a beaucoup plus de HTML que nous pouvons voir ici, mais cela est entouré dans l'élément p pour le texte. Nous pouvons également voir tout le style qui a été appliqué, comme le dimensionnement de la police, sur lequel nous pouvons cliquer, une marge, la famille de polices, n'importe quelle hauteur de ligne, et bien plus encore. Aucune de ces modifications n'est appliquée de façon permanente. Tout ce que nous avons à faire est de rafraîchir et tout est restauré par défaut. Ceci est juste une astuce rapide pour vous montrer à propos des outils de développement si vous ne les avez pas utilisés auparavant. Ils peuvent être vraiment utiles pendant le développement. Les outils de développement ont également beaucoup plus de fonctionnalités avancées. Mais nous ne couvrirons pas ça pendant ce cours. Ensuite, nous allons revenir au codage de notre portefeuille en ajoutant une image d'arrière-plan et aussi un effet de parallaxe. 9. Images de fond et effet parallax: C' est dans un effet de style parallaxe à notre page Web peut vraiment le rendre remarquable. Vous avez peut-être vu cet effet lors du défilement sur des pages Web ou des applications. Il s'agit essentiellement de l'arrière-plan, qui dans notre cas est une image défilant à un rythme différent du reste du contenu qui se trouve au-dessus de celui-ci. Il y a beaucoup d'options là-bas pour obtenir un effet similaire et beaucoup utilisant JavaScript. Mais pour ce projet, je vais créer une version CSS simple. Pour comprendre l'effet Parallax plus en détail, jetons un coup d'œil à un exemple rapide. Sur la gauche ici, nous avons une mise en page web typique avec un en-tête. Nous avons quelques images et aussi du contenu qui peuvent aller hors du bas de l'écran. Si cela se produit, l'utilisateur devra faire défiler vers le haut pour que tout le contenu soit affiché. Généralement, tout le contenu fait défiler à la même vitesse. Cependant, ceux qui appliquent un effet de parallaxe, l'idée est que l'image de fond défilera à un rythme plus lent que le reste du contenu ou pas du tout. Pour y parvenir avec CSS, si nous regardons l'image sur le côté droit, nous allons définir une image d'arrière-plan complète pour couvrir toute la taille du navigateur. Cette image va également être dans une position fixe afin que nous ne bougeons pas car le reste du contenu défilera vers le haut en vue. Nous pouvons également laisser quelques lacunes dans notre contenu. Par exemple, si nous supprimons les deux images, cela laissera un espace pour révéler l'image d'arrière-plan. Comme nous défilons vers le haut avec tout le contenu. Prenons un aperçu de la version finie pour voir à quoi ressemblera cet effet. Si nous faisons défiler vers le bas, vous pouvez voir que l'image d'arrière-plan est dans une position fixe et qu'elle ne bouge pas réellement. Le reste du contenu défilera vers le haut et vers le bas sur l'image d'arrière-plan. C' est cette section que nous allons maintenant créer, à condition que ce cours soit la même image de fond que j'ai utilisée ou vous pouvez utiliser la vôtre si vous préférez. J' ai le mien sauvé ici sur le bureau. Je vais ajouter ça à notre portefeuille. Je vais stocker ça à l'intérieur d'un dossier d'images. Créons un nouveau dossier. Cela va également stocker les images du portefeuille, que nous ajouterons plus tard. Faites glisser le curseur sur l'image d'arrière-plan. Maintenant, si nous ouvrons la barre latérale, nous verrons maintenant le dossier images et l'image d'arrière-plan. Nous allons commencer par créer un wrapper de section, qui sera pour tous les liens que vous voyez ici. Retour à notre page d'index, nous pouvons créer ceci maintenant. Juste en dessous de la section d'en-tête, mais toujours dans le corps principal, nous allons créer une nouvelle section. Cela va avoir la classe de parallaxe. Cela nous permettra de cibler cette section dans le CSS. Tout comme nous l'avons fait avec l'en-tête, nous allons créer une liste non ordonnée pour chacun de nos éléments de liste. Le premier sera pour le développement web freelance. Comme toujours, vous pouvez créer tous les liens qui conviendront à votre portfolio. Le prochain que je vais ajouter en tant que cours de formation premium. Le troisième sera pour des cours de formation gratuits, des vidéos YouTube. Puis enfin le dernier, comme ils portent film dira boire du café. Enregistrez ceci, et plus dans le navigateur. Faites défiler vers le bas sous notre en-tête et nous voyons nos articles de liste en bas. Ce n'est que du contenu html dont nous avons besoin. La plupart des travaux de cette section sont terminés dans nos feuilles de style. Créons un nouveau commentaire. Ça va être pour la section de parallaxe. Pris avantage de la classe de parallaxe que nous avons ajoutée auparavant. A l'intérieur, nous pouvons définir notre image d'arrière-plan, nous allons le faire en CSS avec la propriété de l'image d'arrière-plan. Ensuite, à l'intérieur ici, nous avons la possibilité de définir l'URL. L' URL est le chemin du fichier vers notre image. À l'intérieur des citations, nous avons un dossier d'images, puis barre oblique avant le point d'arrière-plan JPEG. Nous voulons aussi que ce soit la pleine hauteur. Définissons la hauteur à 100 pour cent de la hauteur de la clôture. Enregistrez ceci et plus dans le navigateur. L' arrière-plan est maintenant apparu. Mais nous voulons positionner cela exactement là où nous voulons qu'il soit. Commençons par centrer l'image d'arrière-plan avec la propriété de position d'arrière-plan. On va ajouter ça au centre. Nous avons également d'autres options, telles que la gauche, le haut et le bas. Rechargeons et voyons quel effet cela a. Maintenant, nous voyons que l'image a été centrée dans le navigateur. La prochaine chose que nous allons faire est de définir la taille de l'arrière-plan à une valeur de couverture. Pour cette propriété, nous avons plusieurs options telles que nous pouvons définir la taille de l'image à 50 pour cent, trois REM, 100 pixels ou toute valeur que nous aimons. Ici, nous allons définir la valeur à couvrir, ce qui va mettre l'image à l'échelle aussi grande que possible sans étirer l'image. Maintenant, si nous sauvegardons ceci et rechargeons le navigateur, nous voyons que l'image se déplace également avec le reste du contenu et nous n'avons pas actuellement d'effet de style parallaxe. Pour obtenir l'effet désiré, la partie clé consiste à définir l'image d'arrière-plan à fixer. Nous le faisons avec la propriété appelée attachement d'arrière-plan et la valeur du fixe. le navigateur défiler vers le haut et vers le bas et nous voyons que l'image d'arrière-plan reste dans la même position et le reste du contenu se déplace sur le haut. Cela fonctionne maintenant car l'image d'arrière-plan est fixée au navigateur ou à la fenêtre d'affichage et le reste du contenu est libre de défiler comme d'habitude. Pour terminer les choses, nous devons également agrandir les éléments de la liste et ajouter un peu d'espace dans. Commençons par cibler la section parallaxe et la liste imbriquée et non ordonnée. La taille de la police sera de 1,8 rems, ce qui sera l'équivalent de 18 pixels et partie, d'un rem. Sauvegardez ça. Bien, notre texte est maintenant un peu plus grand et nous devons également ajouter un peu d'espace entre chacun de nos éléments de liste. Nous pouvons le faire en ajoutant une marge au haut et au bas seulement. Cibonnons l'élément de liste de parallaxe. La propriété de marge. Encore une fois, nous allons utiliser le raccourci pour pouvoir ajouter 2 rems en haut et en bas, puis un zéro à gauche et à droite. Puisque ces éléments de liste sont déjà censurés, rechargez et notre espacement a maintenant été appliqué. C' est ainsi que nous pouvons ajouter un simple effet de parallaxe à notre projet en utilisant uniquement CSS. Comme vous pouvez le voir, cela peut vraiment faire une grande différence et faire une section de notre site Web vraiment se démarquer. Loin de ce cours, nous avons également utilisé à la fois la marge et rembourrage pour appliquer de l'espace à nos éléments. Si vous n'êtes toujours pas sûr de ce que chacun d'entre eux fait, nous allons examiner de plus près chacune d'entre elles dans la prochaine vidéo. 10. Petit plus : Marge, remplissage et modèle de boîte: Nous avons utilisé à la fois la marge et le rembourrage dans notre projet jusqu' à présent pour appliquer de l'espace à nos éléments. Si vous n'êtes toujours pas à l'aise avec ce que chacun d'entre eux fait exactement, nous allons maintenant regarder de plus près dans cette vidéo, en plus de découvrir le modèle CSS box. Si nous commençons juste à div ou des sections à une page Web et du texte à l'intérieur en utilisant l'élément P, nous nous retrouverions avec quelque chose qui ressemblait à ceci. Ce n'est évidemment pas un grand regard. Une des premières choses que nous pouvons faire est d'ajouter un peu d'espacement. Nous pouvons vouloir un espacement à l'intérieur des sections comme celle-ci, donc ce n'est pas aussi près des bords et semble un peu plus lisible. Rappelez-vous, nous avons dit plus tôt, le rembourrage ajoute l'espacement à l'intérieur d'un élément. C' est ce que nous voyons ici mis en évidence par la section verte. C' est l'effet de la règle de remplissage en CSS. Il sera par défaut d'ajouter le rembourrage autour des quatre côtés. Nous avons également accès au rembourrage en haut, à droite, en bas et à gauche, aussi. Si nous voulions seulement l'espacement de certains côtés, eh bien, et si nous voulions aussi un espace entre les sections ? Comme nous venons de le regarder, le rembourrage ne s'applique qu'à l'intérieur de l'élément. Au lieu de cela, nous appliquons une marge. Marge ajouter de l'espace à l'extérieur d'un élément comme nous le voyons avec la section orange. Tout comme le rembourrage, la règle de la marge s' appliquera quatre côtés, sauf indication contraire. Cet exemple, la première section devrait avoir un fond de marge appliqué ou nous pourrions également ajouter la marge supérieure au deuxième élément, ce qui fera la même chose. L' ajout d'un espacement comme celui-ci a un effet sur la taille globale de l'élément cependant. C' est ce qu'on appelle le modèle de boîte CSS. Si nous définissons la taille d'un élément dans le CSS, tel que 300 pixels, par exemple. C' est généralement la taille que nous voulions afficher dans le navigateur. Disons que nous avons ajouté 10 pixels de rembourrage autour des éléments. Comme nous le savons, rien n'est ajouté à l'intérieur de l'élément. Cela ajoutera à la taille globale, ce qui entraînera une augmentation de largeur de 320 pixels. Comme dans une bordure en CSS aura également le même effet. Si nous ajoutons une bordure d'un pixel tout autour comme ça, cela ajoutera un pixel supplémentaire de chaque côté augmentant la largeur totale à 322 pixels, qui signifie que nous devons être prudents lors du dimensionnement des éléments pour permettre cela. Cependant, comme la marge est ajoutée à l'extérieur d'un élément, cela n'est pas pris en compte dans la taille globale. Si nous voulons tenir compte du remplissage et de la bordure augmentant la taille de l'élément, nous avons deux approches. Nous pourrions soit réduire la largeur initiale de notre contenu. Ici, nous pourrions supprimer les 22 pixels supplémentaires et définir la largeur pour être initialement 270 pixels pour tenir compte de cela ou à la place, nous pourrions obtenir le navigateur pour le calculer pour nous. Cela signifie que, quelle que soit notre taille de rembourrage et de bordure, le navigateur affichera toujours nos éléments à 300 pixels. Nous pouvons le faire en définissant la règle de taille de boîte CSS pour être égale à la zone de bordure. C' est quelque chose que nous pouvons l'ajouter à notre CSS si nous avons des problèmes à définir la taille d'un élément. 11. Contenu en bloc, en ligne et imbriqué: Nous allons maintenant jeter un oeil sur la façon dont nous pouvons imbriquer le concept plus profondément dans notre projet et inclure également des images. Nous allons le faire en créant une section de travail récente, qui présentera deux de nos projets. Cela va également nous permettre de jouer avec des mises en page plus complexes, et d'inclure dans des éléments de taille inégale. Par exemple, notre premier projet sera sur la première ligne. Nous aurons une grande image, puis du texte sur le projet sur le côté opposé. Nous allons ensuite inverser cela pour le deuxième projet sur la ligne juste en dessous, où l'image sera de l'autre côté du premier projet. Ceux-ci vont également être à l'intérieur de leur propre div, qui va être une section sur ces murs à imbriquer comme nous l'avons vu plus tôt. Ces CSS flexbox va nous permettre de créer cette mise en page, et aussi de créer une mise en page différente pour le plus petit écran aussi. Travaillons avec l'ajout du HTML pour la section. Plus à la version finie c'est à quoi cela va ressembler dans la vraie vie. Nous allons avoir nos deux rangées, et nous allons alterner le projet sur chaque rangée. En utilisant la flexbox, cela sera également entièrement réactif, de sorte que les mises en page changeront sur les appareils d'écran plus petits et plus grands. Dans cette vidéo, nous allons aller de l'avant et ajouter le balisage HTML de la section qui fournira le contenu à utiliser dans la prochaine vidéo. Où nous allons ajouter la flexbox pour exposer ceci exactement comment nous voulons. La première étape consiste à créer un wrapper pour cette section ainsi qu'un titre de travail récent en haut. Faisons cela dans la section du corps, qui est en dessous de la parallaxe que nous venons de créer. Notre emballage de section, étiquette d'ouverture et de fermeture, puis à l'intérieur, nous pouvons créer un titre de niveau 3. C' est x va être un travail récent, et nous pouvons également ajouter un attribut de classe à l'intérieur de la balise d'ouverture afin que nous puissions cibler cela avec le CSS. Juste après notre titre de niveau 3, je vais ajouter un nouvel élément, qui est une règle horizontale. Cela va ajouter une ligne sur notre page, que vous voyez juste ici. Nous avons utilisé un effet similaire dans le CSS plus tôt dans ce cours, où nous avons utilisé une bordure pour créer une ligne. Mais cette fois, nous allons utiliser la règle horizontale pour créer notre ligne dans notre HTML, vous venez de faire défiler vers le bas, rafraîchir la page. Nous pouvons maintenant voir notre titre et notre ligne tout en bas. Nous pouvons alors commencer à imbriquer nos divs à l'intérieur de la section pour créer nos deux rangées de contenu. Pour ce faire juste en dessous de notre règle horizontale, nous allons créer deux nouveaux divs avec la classe des travaux récents. Je vais ensuite copier et coller ceci directement dans notre deuxième ligne, mais comment créer un nouveau div crée-t-il une nouvelle ligne ? La raison pour laquelle cela fonctionne est que généralement la plupart des éléments sont classés comme niveau de bloc ou en ligne, et si div tombe dans la catégorie d'élément de niveau de bloc. Je considérerai cela si nous allons sur le site Web de Mozilla, ici je veux dire la section des éléments de niveau bloc. vous pouvez faire une recherche si vous voulez trouver cette page. Il y a beaucoup d'informations et d'exemples sur cette page, mais la chose clé à noter est ici dans cette boîte. Il est dit, « Un élément de niveau bloc commencera toujours sur une nouvelle ligne, et prendra également toute la largeur disponible. » qui signifie que pour chaque div que nous ajoutons cela ajoutera toujours sur une nouvelle ligne. Nous pouvons voir quelques exemples d'éléments de niveau bloc si nous faisons défiler vers le bas. Voici notre tag div, et il y en a beaucoup plus comme : l'en-tête, le pied de page, et aussi le nav. Nous allons également sur le site Web de Mozilla et jeter un oeil à la section des éléments en ligne. Nous pouvons voir ici que les éléments en ligne ne démarreront pas sur une nouvelle ligne, et qu'ils ne prendront que la largeur nécessaire. Des choses telles que les images sont des éléments en ligne, c'est pourquoi nous pouvons placer côte à côte sur la page. Encore une fois, si vous faites défiler vers le bas, nous avons notre liste d'éléments en ligne et nous pouvons voir notre image juste ici. Nous pouvons également utiliser CSS pour changer le type par défaut en utilisant la règle d'affichage, et nous allons regarder cela dans la prochaine vidéo où nous allons ajouter la flexbox. Maintenant que nous avons nos deux lignes que vous pouvez diviser en deux sections, nous allons le faire en imbriquant deux divs supplémentaires à l'intérieur de chacune. C' est pour que nous puissions ajouter l'image d'un côté, et de l'autre, nous pouvons ajouter les informations sur notre projet. Notre premier div, nous pouvons également ajouter une classe, donc nous pouvons l'utiliser dans le CSS. Ce sera des informations de travail récentes. Nous pouvons dupliquer cela, et c'est pour l'image de travail récente. Si cela semble déroutant, ne vous inquiétez pas, ce n'est que la première ligne, et à l'intérieur nous avons un wrapper pour l'image, puis pour l'information. Nous allons faire exactement la même chose pour notre deuxième ligne juste en dessous, je vais copier ceci et ajouter ceci à l'intérieur ici donc nous avons deux sections correspondantes. Ce ne sont que des conteneurs pour le moment, il n'y a donc pas encore de contenu à afficher à l'intérieur du navigateur. Vous auriez déjà dû rassembler les images que vous souhaitez utiliser. Si vous ne l'avez pas encore fait maintenant sera un bon moment pour rassembler quelques images de votre travail récent. Si vous n'avez pas d'images de travail récentes, vous pouvez télécharger n'importe quel exemple d'image d'espace réservé que vous souhaitez utiliser. J' ai déjà mes images prêtes, donc je vais les ajouter aux projets. Nous avons déjà une configuration de dossier Images ici. Je vais saisir toutes les autres images à l'exception de l'arrière-plan que vous avez déjà, puis les faire glisser vers mon dossier Images. Fermez ceci, maintenant nous pouvons aller de l' avant et ajouter tout le contenu dont nous avons besoin pour nos deux sections. Nous avons notre image, puis nous allons ajouter du texte de l'autre côté. Commençons dans notre première ligne et dans la section d'informations de travail récente à l'intérieur ici un titre de niveau 4 qui sera pour le titre du projet. Le mien sera Pizza Planet. Juste en dessous des éléments p qui va être le texte et je vais juste ajouter un exemple de texte de Vue. js pour un point puis point point. Bien sûr, vous pouvez ajouter quelques descriptions plus détaillées ici, une règle horizontale pour séparer le titre et la description du reste des fonctionnalités. Ces fonctionnalités que je vais ajouter à l'intérieur d'une autre liste. Tout d'abord, le titre, l'autre liste, puis notre élément de liste à l'intérieur et ce sera pour chacune des caractéristiques de nos projets. Vue. js qui va être la bibliothèque de vues, la dernière base de données Firestore, l' authentification, le routage, la gestion de l'état Vuex, puis les mises à jour en temps réel. Ensuite, nous allons séparer ceci par une autre règle horizontale. Ensuite, nous allons ajouter un lien en utilisant l'élément a, qui va être un lien vers un projet en direct si vous en avez un. Affichez le texte du site Visiter, puis vous pouvez ajouter le lien ou l'URL du projet de vie si vous en avez un. C' est toutes nos informations si nous sauvegardons et actualisons, descendez nous avons tous nos textes en place. La prochaine chose à faire est d'ajouter l'image qui est à l'intérieur de ce wrapper. Nous le faisons avec l'élément image qui est IMG. Nous ajoutons la source qui est le chemin du fichier à notre image, nous avons un dossier Images. Ce sont des images, puis une barre oblique, et l'image que je veux utiliser va être pizza-planet. png. Les textes alt de l'image de la planète pizza, c'est l'alternative pour des choses telles que les lecteurs d'écran si l'image n'est pas disponible. Vers le navigateur et voyons cette image sur l'écran. Bien. La prochaine chose à faire est de répéter ce processus pour le deuxième projet. Nous voulons faire à peu près exactement la même chose que ci-dessus, nous allons créer la même structure, mais pour le deuxième projet. Commençons par notre rubrique de niveau 4 sur le titre du projet, qui est React Trello. Encore une fois, à l'intérieur de la section récent-work-info , nous avons ensuite une description à l'intérieur des éléments p. Nous allons dire l'application React js en ligne avec les éléments hr, le texte des fonctionnalités, puis notre autre liste pour toutes nos fonctionnalités enveloppées dans un élément de liste. Nous allons dire, la bibliothèque de vue React js. Cela a également la dernière base de données Firestore, Authentification, Routage. Cela fait également usage de l'API Context, ainsi que des mises à jour en temps réel. Tout comme ci-dessus sous notre autre liste, nous allons ajouter à nouveau règle horizontale, puis un lien vers notre site en direct si nous en avons une, et nous textons de Visit site. Si vous n'avez pas de version en direct à afficher, vous pouvez également désactiver cette option, ou vous pouvez y revenir plus tard et ajouter le lien. Ce qui nous laisse juste avec l'image à ajouter dans la div tout en bas, et encore une fois nous allons ajouter aux éléments de l'image. La source est le dossier Images, puis l'image que j'ai choisie va être react-trello. Le texte alt de react-trello image, enregistrer puis recharger le navigateur. Nous voyons maintenant nos deuxièmes projets. Nous avons maintenant le contenu de notre section de travail récente, et dans la prochaine vidéo, nous allons appliquer un style CSS non seulement pour améliorer l'apparence et la sensation, mais aussi pour le rendre plus agréable sur différentes tailles d'écran. Pour vous aider à cela, nous allons profiter de la flexbox CSS, qui vous aidera à mettre en page un contenu dans une direction. 12. Aperçu des Flex Box CSS: La grille CSS et la Flexbox sont des façons relativement nouvelles de présenter notre contenu à l'aide de CSS. Dans cette vidéo, nous allons couvrir les deux techniques. Commençant dès maintenant avec la Flexbox, qui est utilisée pour mettre en page notre contenu dans une direction, soit horizontalement, soit verticalement. Pour commencer avec la CSS Flexbox, la première chose que nous devons faire est de créer un wrapper pour l'ensemble de notre contenu. Dans le CSS, nous définissons ensuite ce wrapper pour avoir le type d'affichage de flex. Cela nous permettra alors de définir la direction flexible de notre contenu pour être soit ligne, qui se trouve à travers la page de gauche à droite, ou dans une colonne qui est de haut en bas. Notre contenu est donc empilé verticalement. C' est idéal pour un design réactif et nous pouvons également définir les options inversées. Nous pouvons régler la ligne inversée, que nous allons définir notre contenu de droite à gauche et aussi la colonne inverse, ce qui va être le contraire, sorte que notre contenu est de bas en haut. Nous pouvons utiliser cela combiné avec des requêtes média pour créer différentes mises en page pour différentes tailles d'écran et aussi la Flexbox a beaucoup plus à offrir et nous allons découvrir certaines de ces propriétés flexibles tout au long de ce cours. Passons à notre page index.html. Dans le contenu que nous avons créé dans la dernière vidéo, nous avons créé deux sections avec la classe des travaux récents. C' est le div wrapper pour chacun de nos projets et le wrapper pour chaque ligne. Quand je veux utiliser cette classe de mots récente dans le CSS, en commençant par la mise en page de la colonne pour notre petit écran. Cela signifie que chacun de nos projets sera empilé les uns sur les autres, s'étirant pour être la largeur de l'appareil mobile complet. Passons à nos feuilles de style et créons notre nouvelle section en utilisant les commentaires. Il s'agit de la section des travaux récents. Rappelez-vous, nous ciblons une classe avec le point et le nom d'un travail récent. Pour utiliser la Flexbox, la première étape consiste à définir le type d'affichage pour qu'il soit égal à flex. Rappelez-vous dans la dernière vidéo, nous avons dit que de nombreux éléments peuvent être catégorisés en ligne et en bloc. Eh bien, nous pouvons changer le type d'affichage d'un élément en utilisant sa propriété d'affichage. Ici, nous modifions le type d'affichage de notre wrapper pour utiliser la Flexbox. Cela nous permettra d'utiliser beaucoup plus de propriétés flexibles, telles que la direction de flexion. Nous allons commencer sur appareils de taille mobile en définissant la direction de flexion sur colonne. Si nous réduisons cela, cela signifie que le contenu sera empilé l'un sur l' autre plutôt que la ligne par défaut qui se trouve à travers la page. Nous avons aussi les options inverses, donc nous pouvons définir ceci comme colonne inverse, enregistrer ceci et recharger, et maintenant les images apparaîtront au-dessus du texte plutôt que comme c'était avec juste colonne, où nous avons le texte, puis les images. Nous pouvons également définir la direction de flexion pour être rangée. Cela signifie que le contenu traverse la page, comme nous le voyons ici. Cela signifie que le contenu va horizontalement sur la page, laissant notre texte et l'image l'un à côté de l'autre. Maintenant, bien que sur ces petits écrans, nous allons laisser ceci en colonne et ensuite aussi définir la taille de la police. N' oubliez pas le point-virgule à la fin. La taille de la police sera égale à 1,3 rems et c'est une marge d' un rem en haut et en bas pour nous donner un espacement et nous n'avons pas besoin d'espacement à gauche et à droite. Rechargeons ceci et si nous faisons maintenant défiler vers le bas entre nos deux projets, nous voyons maintenant notre marge entre les deux et aussi la taille de la police prendre effet. Ensuite, je vais ajouter un peu de dimensionnement et d'espacement plus généraux à notre section, donc nous avons la classe pour chaque titre, qui est le titre de travail récent. Nous pouvons définir la taille de la police pour être un peu plus grande et vouloir utiliser 1.6 rems. Ensuite, nous pouvons travailler sur notre texte pour notre projet. Ce texte, est tout entouré d'un div avec la classe des informations de travail récentes. Allons de l'avant et la cible est maintenant. Pour le wrapper tout ce que je vais faire, c'est d'ajouter un peu d'espacement à l'intérieur des éléments un rem, puis nous allons passer au titre de niveau 4. Si nous passons au balisage dans le fichier HTML, et que nous allons voir les informations de travail récentes, nous allons maintenant travailler sur le titre de niveau 4 qui est le titre du projet. Nous avons deux façons différentes d'aborder cette question. Nous pourrions cibler directement le titre de niveau 4. Nous pourrions ajouter une classe à ce titre et ensuite saisir l'élément de cette façon ou nous pouvons être plus spécifiques comme nous l'avons regardé plus tôt dans notre CSS, où nous pouvons sélectionner les informations de travail récentes, puis h4. Alors faisons ça. Nous pouvons cibler les informations de travail récentes, puis n'importe quel titre de niveau 4 qui est imbriqué dans cette section. Tout ce que nous devons faire ici, c'est de définir la taille de la police à 1,4 rems ou n'importe quelle taille de police que vous préférez. Ensuite, nous avons nos fonctionnalités que nous pouvons voir ici et nous allons ajouter un peu d'espace entre chacune d'elles. Nous avons également un symbole ici que nous devons supprimer. Allons vers le bas. Supprimez également cela. Maintenant, afin que nous puissions être plus précis en ciblant simplement ces éléments de liste dans cette section, plutôt que d'affecter l'un de nos liens de navigation, nous pouvons ajouter une nouvelle classe dans l'index. Pour notre liste non ordonnée, nous pouvons ajouter la classe de fonctionnalités et nous ferons de même pour notre premier projet aussi. Donc, à l'intérieur de la liste non ordonnée , de la classe d'entités, puis nous pouvons être plus spécifiques à l'intérieur de nos feuilles de style en ciblant les entités, le symbole supérieur à, puis nos éléments de liste. Cela fonctionne d'une manière légèrement différente de la façon dont nous l'avons utilisé dans le passé. La façon dont nous le sélectionnons comme ceci signifie que tous les en-têtes de niveau 4 de cette section seront affectés. Le faire de la deuxième façon avec le symbole supérieur à, signifiera que cela n'affectera les éléments de liste qui sont un enfant direct de nos fonctionnalités. Cela signifie que ces éléments de liste doivent être directement imbriqués à l'intérieur. Nous avons notre liste non ordonnée et ceux-ci sont au niveau suivant, donc ceux-ci seront tous affectés. Si nous avons un deuxième niveau d'imbrication ici, disons une deuxième liste non ordonnée, puis un élément de liste, celui-ci ne sera pas affecté. Laissons cela et voyons cela en action en définissant la marge pour créer un espace entre nos éléments de liste. Un rem en haut et en bas, puis zéro à gauche et à droite. Nous connaissons le navigateur. Nous avons notre espacement juste ici et aussi hors de ces projets. Réglons la couleur des liens. Rechargez et maintenant nous pouvons voir que l'élément de test que nous avons ajouté, parce que ce n'est pas un enfant direct de nos fonctionnalités, cela n'est pas affecté par notre CSS. Laissez simplement supprimer ce test, enregistrez ceci, et rechargez. Nous pouvons également supprimer la couleur et les choses sont maintenant un peu mieux avec notre espacement. La prochaine chose que nous devons prendre en charge, sont les images qui sont trop grandes pour l'appareil. Encore une fois, dans nos feuilles de style, nous pouvons cibler les éléments par son nom, qui est IMG. Puisque c'est aussi un style général que vous voulez appliquer à tous les projets, je vais l'ajouter en haut des feuilles de style dans les styles globaux. C' est juste une préférence personnelle et cela peut aller n'importe où dans les feuilles de style. Tout ce que nous allons faire, c'est de fixer la largeur maximale à 100 %. Cela signifie que l'image sera toujours un maximum de 100 pour cent du conteneur. Rechargeons et voyons cela en action. Encore une fois, aussi dans cette section de style général, je vais ajouter un peu de style à notre règle horizontale. Ajoutons les éléments hr. La largeur doit être de 100 pour cent de sorte qu'elle couvre toute la largeur du contenu. Je vais également définir la capacité à 0,5, ce qui est à 50 pour cent transparent. La couleur peut également être gris clair et voyons à quoi cela ressemble. Nous laissant maintenant avec une ligne plus légère entre notre contenu. C' est notre premier regard sur l'utilisation de la CSS Flexbox et bien que nous ne l'ayons utilisé que pour créer une mise en page de première colonne mobile, au fur et à mesure que nous progressons dans le reste du cours, nous allons découvrir beaucoup plus de ce que la CSS Flexbox a à faire offre. 13. Section « Contactez-nous » et CSS mobile first final: Dans cette vidéo, nous allons ajouter la dernière section de notre page d'accueil, qui sera une section contact. Avec également la finition du premier style mobile. Si nous allons à la version finale que j'ai ouverte ici, puis faites défiler vers le bas de notre page d'index. Ce sera la section de contact que je vais créer maintenant. Le HTML est assez simple. Tout ce que vous avez est quelques blocs de texte et ils peuvent être stylés avec notre CSS. Commençons par ajouter le balisage de la barre de couverture, qui est fondamentalement notre nouvelle section, puis quelques blocs de texte. Passons au index.html vers le bas tout en bas, mais toujours dans la section du corps. Nous allons encore créer notre nouvelle section. Cela va avoir un identifiant unique de contact. Nous en ferons usage dans le CSS très prochainement. Ensuite, à l'intérieur, nous allons avoir un div imbriqué avec la classe des informations de contact. Cette section va être le wrapper. Si nous jetons un coup d'oeil à la version finale, ce sera l'enveloppe de tout le texte horizontal que nous avons ici. Ensuite, nous allons créer un titre de niveau 3 avec la classe de rotation, que nous avons utilisée plus tôt dans le projet. A l'intérieur de nos informations de contact, nous pouvons ajouter le premier élément, qui va être un élément p avec la classe de titre de contact. Nous allons utiliser le CSS très bientôt pour le rendre beaucoup plus grand, le texte de ne pas être un étranger. Sauvegardons ceci et vérifions que cela semble correct dans le navigateur. Recharger. Nous pouvons juste voir comment le texte vers le bas tout en bas. Une chose que nous allons faire est de mettre le mot étranger sur une ligne séparée, tout comme nous le voyons dans la version finale. Nous pouvons le faire en ajoutant une étiquette de frein. Une balise de rupture est simplement br. Cela poussera notre texte à la ligne suivante. Après cela, un deuxième élément p avec le texte de besoin d'un développeur. Alors parlons. Puis offert un morceau de texte à l'intérieur ici, qui va être notre adresse e-mail. Cela prend maintenant soin de tout le texte horizontal dans notre wrapper. Juste en dessous de ce wrapper, nous allons avoir le texte tourné, qui est un titre de niveau 3. Nous allons utiliser la classe de rotation, nous avons utilisée plus tôt dans le cours pour notre titre, qui était le texte de Je fais des choses. A l'intérieur, tout ce que nous avons c'est le texte de contact, sauvegardez ceci. Plus au navigateur, nous voyons notre texte horizontal est assez petit. Mais nous avons quelques styles qui prennent effet pour notre titre de niveau 3, puisque nous avons utilisé la classe de rotation. Réparons maintenant cela dans notre feuille de style, commençant par notre numéro de section de contact. Rappelez-vous quand il utilise un identifiant, nous balisons ceci dans le CSS en utilisant un dur. Pour commencer, maintenant, créons une section de contact pour nous. Nous ciblons un identifiant en utilisant le dur. Cela va également faire usage du type d'affichage de flex. Nous pouvons utiliser les propriétés de la boîte flexible, telles que la direction de flexion. Depuis que nous avons commencé mobile en premier, cela va également être dans la direction flex de la colonne. Nous le remplacerons plus tard lorsque nous aurons plus d'espace à l'écran disponible. Ajoutons un peu de rembourrage à l'intérieur de notre section de 1rem. Tout comme nous l'avons fait avec l'en-tête tôt, nous pouvons également définir la hauteur de notre section à 100 pour cent de la hauteur visible. Nous pouvons définir une couleur d'arrière-plan, et cela peut être n'importe quelle couleur de votre choix. Je vais utiliser la valeur hexadécimale de B1E2D7. Visual Studio Code a également intégré un sélecteur de couleurs. Si nous survolons cela, nous pouvons alors sélectionner des couleurs différentes à partir de l'écran ici. Ou utilisez les sélecteurs de couleurs, que nous avons regardé plus tôt dans le cours. Donc, cela va définir la couleur d'arrière-plan. Nous pouvons également définir la couleur de notre texte pour qu'il soit blanc. Voyons voir à quoi ça ressemble. Rechargez le navigateur. Nous avons tous la section de contact pleine hauteur, notre arrière-plan, et notre texte blanc. Commençons maintenant à travailler avec le texte tout en haut, en commençant par le titre de contact de ne pas être un étranger. Ce sont la classe d'en-tête de contact. Prenons ceci et faisons usage de cela dans le CSS. C' est une classe, donc nous utilisons le point. Nous allons définir la marge à zéro, puis rendre la taille de la police beaucoup plus grande. Je vais faire cinq rems. Recharger. Ensuite, nous allons cibler nos éléments p dans la section p. La section a la classe d'informations de contact. Nous pouvons ensuite sélectionner les éléments p. C' est la taille de la police, b 1.4 rems. Ensuite, pour ajouter un peu d'espace entre ceux-ci, nous pouvons ajouter une marge au bas de chaque élément. Comme nous avons beaucoup d'espace vertical pour jouer avec, je vais mettre ça à trois rems. Enregistrez ceci et rechargez le navigateur. Maintenant, cela nous laisse avec un petit problème. C' est parce que nous avons ciblé tous les éléments p dans cette information de contact. Cette rubrique est aussi un élément p. Nous avons différentes façons d'aborder cette question. Nous pourrions changer ces premiers éléments p pour être un élément différent tel qu'un titre. Ou bien, nous pourrions ajouter une nouvelle classe telle que le texte de contact. Ajoutons également ceci à notre e-mail. [ inaudible] pour sauver. Modifiez ce texte pour être un texte de contact. Enregistrer et recharger. Maintenant, notre projet est tel qu'il est prévu. La dernière chose à faire est cette section de contact tout en bas. Nous n'afficherons ces éléments que lorsque nous aurons plus d'espace à l'écran disponible. Pour l'instant, dans la première vue mobile, nous allons sélectionner ceci. Il s'agit de la nouvelle section de contact, la classe de rotation. Ensuite, tout ce que nous devons faire est de définir le type d'affichage sur aucun. Cela supprimera ceci de notre page. Nous pouvons rétablir cela plus tard pour la vue d'écran plus grand en réinitialisant le type d'affichage pour être quelque chose comme le bloc. Nous découvrirons comment le faire plus tard dans le cours. C' est le style qui se termine maintenant pour la vue de petit écran. Tout d'abord, n'hésitez pas à faire des modifications suites votre look et thème. Dans la prochaine vidéo, nous allons jeter un oeil aux requêtes de médias CSS, ce qui nous permettra d'appliquer différentes règles CSS pour des écrans de différentes tailles. 14. Requêtes média CSS: Nous avons déjà parlé de la façon dont nous pouvons utiliser la flexbox CSS pour créer différents types de mises en page. Sur une petite vue d'écran sur la droite, nous pouvons généralement vouloir que le contenu soit la pleine largeur disponible et empilé sur chacun d'un verticalement par certainement direction flex pour être colonne. Lorsque nous avons plus d'espace d'écran disponible comme sur la gauche, nous voulons aussi souvent profiter de cet espace supplémentaire et ajouter notre contenu côte à côte. Nous savons que la flexbox peut le faire en définissant la direction pour être rangée, mais comment pouvons-nous l'appliquer sur différentes tailles d'écran en utilisant CSS ? Eh bien, la façon de le faire est d'ajouter une requête multimédia CSS, qui est fondamentalement un moyen de créer une section de notre CSS, qui ne s'applique qu'à certaines tailles d'écran, orientation ou résolution, pour n'en nommer que quelques-unes. Retour au réseau de développeurs Mozilla, eh bien, dans la section Utilisation de la requête de médias, et ici nous pouvons trouver de petits exemples de la façon dont nous pouvons utiliser les requêtes de médias pour appliquer un style différent en fonction de l'appareil. Tout d'abord, si nous faisons défiler vers le bas, nous avons une section de type de média, et c'est la première étape pour construire une requête multimédia. Ici, nous pouvons définir ces règles CSS à appliquer en fonction de l'appareil. Nous pouvons appliquer cela à des choses telles qu'un synthétiseur de parole, un écran, le mode Aperçu avant impression, ou nous pouvons sélectionner tout pour appliquer à tous les différents appareils. Plus bas dans la section suivante, nous avons des fonctionnalités multimédias, et ces fonctionnalités sont généralement plus spécifiques à l'appareil, telles que la largeur, la hauteur, et aussi si l'appareil est paysage ou portrait. L' une des utilisations les plus courantes pour les requêtes média, et ce pour quoi nous allons les utiliser dans ce cours est de changer notre style en fonction de la largeur de l'écran, et nous pouvons le voir en bas de cette section. Nous pouvons définir des règles CSS basées sur la largeur de la fenêtre d'affichage. Passons à notre fichier CSS et nous pouvons les ajouter à nos projets. La première étape consiste à décider quel écran que nous voulons changer le CSS, et à recommencer dans le navigateur avec la vue à petit écran. Nous voulons généralement changer les choses lorsque notre contenu semble s'étirer. Par exemple, si nous élargissons cela, nous arrivons toujours à un point où le contenu semble vraiment étiré, puis nous voulons réorganiser notre mise en page. Une fois que nous arrivons à une taille où nous voulons modifier notre contenu, nous devons également détecter la largeur de ce contenu, afin que nous puissions l'ajouter à une requête média. La plupart des navigateurs ont certains plug-ins ou extensions qui sont disponibles, montrent la largeur de l'écran, ou une autre option est d'aller à cliquer avec le bouton droit et inspecter pour ouvrir les outils de développement, et à l'intérieur ici que nous étirons le navigateur, nous pouvons voir dans le coin supérieur droit, la largeur du navigateur est affichée. Une fois que nous aurons un peu plus large, et je vais aller vers 860, mais je vais changer la mise en page pour les héberger côte à côte. Souvent, dans notre style.css, nous pouvons commencer par la requête @media avec la règle at media. Comme nous l'avons vu auparavant dans les sites Web de Mozilla, nous pouvons cibler l'écran, et nous pouvons également combiner cela avec certaines des fonctionnalités médiatiques que nous avons examinées, comme la largeur minimale du navigateur, que je vais définir à 860 pixels. Maintenant, ce que nous devons faire à l'intérieur de ces accolades est d'ajouter des règles CSS, tout comme nous l'avons utilisé précédemment. Fondamentalement n'importe quel style dans lequel nous avons ci-dessus s'appliquera toujours à notre projet, mais ceux de ces accolades ne s'appliqueront que lorsque l'écran atteint 860 pixels et plus. [ inaudible] la section du corps et nous pouvons créer un véritable initié ici. Définissons l'arrière-plan pour être la couleur du rouge, définissez-le et rechargez. Vous voyez la couleur d'arrière-plan rouge, puis passons en dessous de 860 pixels, et cette règle ne s'appliquera plus. Si vous voulez cibler tous les appareils de taille différente et pas seulement ces écrans, nous pouvons également simplifier notre requête multimédia comme ceci. Essayons ça. Rechargez le navigateur, et cela s'applique toujours. Bien sûr, nous ne voulons pas cette couleur de fond rouge juste comme ça au lieu de maintenant requête multimédia. Nous allons commencer en haut de nos projets avec nos liens de navigation. Si nous jetons un coup d'oeil à la version finale, ce sera sur le côté droit. Faisons ça maintenant. Au lieu de cibler la section du corps, nous allons cibler la navigation, puis la liste non ordonnée, et nous pouvons les déplacer vers la droite en justifiant le contenu soit la valeur de flex-end. Si nous jetons un oeil à la section nav ul en cherchant cela, ce n moins actuellement sur la ligne 43. Eh bien, ici, nous pouvons voir que nous définissons le style global. Nous avons déjà défini le type d'affichage sur flex, ce qui sera toujours le cas tout au long de notre projet. Ici, nous définissons le contenu de justification pour être dans un centre pour les petits écrans, mais maintenant à l'intérieur de notre requête multimédia plus grande en bas, nous remplissons cela avec flex-end. Maintenant, si nous sauvegardons cela, rechargez le navigateur, ce sera sur le côté droit pour la vue plus grande. Ensuite, comme nous réduisons le navigateur vers le bas, cela reviendra au centre. La prochaine chose que nous devons faire est de faire pivoter le texte de Je fais des choses, afin que nous puissions aussi l'ajouter à la requête média. Cela a la classe des rotations. Tout d'abord, je vais ajouter une certaine marge. Nous avons examiné comment ajouter de la marge aux quatre côtés. Nous avons également examiné comment nous pouvons appliquer la marge et le rembourrage en haut et en bas, ainsi que la gauche et la droite. Si nous voulons contrôler les quatre valeurs individuelles, nous pouvons également les définir séparément. À l'intérieur, nous pouvons définir quatre valeurs différentes, et ce sera la valeur du haut, de droite, bas et de gauche dans un ordre particulier. Tout d'abord, deux rems en haut, zéro à droite, en bas et à gauche. Ensuite, nous allons définir le mode d'écriture, ce qui sera important pour la mise en page de notre texte horizontalement ou verticalement. Cela va être un précieux vertical- lr. Cela définira notre texte pour être vertical de gauche à droite. Le texte est maintenant vertical comme prévu, mais si nous regardons la version finale, nous voyons que les caractères sont aussi droits. Nous pouvons le faire dans notre projet en définissant également l'orientation du texte et la valeur du droit. Nous pouvons faire usage de cette propriété lorsque notre mode d'écriture est réglé sur vertical, puis enfin, nous pouvons également définir la taille de la police pour être beaucoup plus grande, donc la valeur de cinq rem, enregistrez ceci sans modification dans le navigateur. Lorsque LCL Vertical Text est renversé dans la section parallaxe, pour corriger cela, nous allons ajouter quelque chose d'autre à l'intérieur de notre requête média. Nous allons cibler la section d'en-tête et nous allons définir la hauteur à 100 pour cent, enregistrer et recharger. Cela résout maintenant notre problème. Je ne vais rien faire avec notre section parallaxe maintenant si nous faisons défiler vers le bas, cela semble plutôt bon sur le plus grand écran aussi. Wee peut passer à la section de travail récente. Comme nous avons maintenant plus d'espace à l'écran disponible, nous allons placer le texte à côté de l'image sur chaque ligne. Nous pouvons le faire en ciblant le conteneur, ce qui est un travail récent. Ensuite, définissez la direction de flexion sur la ligne, rechargez, en plaçant le contenu à l'intérieur de nos lignes côte à côte. La prochaine chose que nous devons faire est de définir le dimensionnement de notre zone de texte et aussi de notre image. Nous pouvons le faire en définissant la propriété flex pour être une valeur. Par exemple, si la section info et l'image avaient une valeur flexible de 1, celles-ci prendraient une quantité égale d'espace. Mais nous voulons que l'image soit un peu plus grande afin que nous puissions définir la valeur flex sur la section info à la valeur d'un. Ensuite, définissez l'image pour avoir une valeur flexible de deux, ce qui prendra effectivement deux fois l'espace. Faisons cela maintenant en commençant par les informations de travail récentes. Rappelez-vous que c'est pour le texte que nous définissons la valeur flex pour être un et aussi ajouter un peu de remplissage à l'intérieur d'une RAM. L' image a la classe de l'image de travail récente. Encore une fois, en nous assurant que cela se trouve toujours dans notre section de requête média, nous définirons la valeur flexible à deux, en prenant deux fois l'espace disponible comme section info. Je vais également ajouter une bordure autour de cette image. Je vais commencer par définir la couleur pour être gris léger. L' épaisseur de la bordure doit être une RAM et aussi une ligne solide. Rechargez le navigateur, laissant l'image prendre deux fois plus d'espace disponible que notre info. Juste avant de terminer cette section, je vais également cibler l'image de sorte que l'image de travail récente, puis l'élément d'image imbriqué à l'intérieur. Juste pour vous assurer que la largeur de l'image et aussi la hauteur étire le plein 100 pour cent du conteneur. Juste au cas où nos images ne sont pas correctement dimensionnées, comme nous l'avons découvert plus tôt, passons à notre projet final et voyons comment notre image et notre contenu sont alternés. Une des façons de le faire est de changer l'ordre de notre HTML, donc si nous allons à notre page d'index, nous pourrions changer l'ordre de notre image et de notre texte. C' est une approche que nous pouvons adopter et cela fonctionnera bien pour la vue d'écran plus grand. Cependant, si nous allons à la vue d'écran plus petit en étirant le navigateur, cela affectera également l'ordre du petit écran. Ici, nous avons l'info, l'image, l'info, puis l'image, ce ne serait pas le cas si nous changeons l'ordre source du HTML. Au lieu de cela, nous pouvons utiliser une propriété flex box appelée ordre, qui nous permettra de changer l'ordre dans lequel les éléments apparaissent sur la page avec un nombre inférieur ou négatif apparaissant en premier dans le fichier HTML. Je vais ajouter une classe à la première section d'informations de travail récentes. Allons à notre premier projet et sélectionnez les informations de travail récentes. Nous allons ajouter une deuxième classe de nouveau droit. Maintenant, je peux utiliser cette classe dans notre feuille de style pour réorganiser l'ordre source. Ciblons ça. Pour aller à droite, nous pouvons définir l'ordre pour être une valeur de un. La valeur par défaut est 0, donc juste avant d'enregistrer ce fichier, regardons ce que nous avons actuellement. Pour le moment, nous avons, si nous allons à nos projets, nous avons l'info sur la gauche et l'image sur la droite. Enregistrez ce fichier, rechargez, et maintenant notre section info a été déplacée à droite de notre projet. La raison pour laquelle cela fonctionne est que notre valeur par défaut, notre ordre par défaut, est la valeur de 0. La section image aura toujours la valeur 0, ce qui fera apparaître en premier. Ensuite, nous allons définir la section info pour avoir une valeur de 1. Il s'agit d'un nombre plus élevé, il apparaîtra en dernier dans l'ordre. Ceci est également dans la requête média, donc cet ordre ne prendra effet que sur les écrans plus grands. Terminons maintenant le style de cette requête multimédia en descendant vers la section contact. Actuellement, tout est aligné dans le centre et nous devons également réintroduire nos textes rotatifs. Dans la page d'index, descendons à la section contact. Tout d'abord, nous avons la classe de tête de contact. Je vais rendre ça encore plus grand pour cette section. Nous pouvons ensuite sélectionner le conteneur entier, changer la direction de flexion à la ligne, puis ajouter un peu d'espace dans. Commençons par le titre de la classe de l'en-tête de contact. Je vais réinitialiser la marge pour être une valeur de 0, définir la taille de la police pour être encore plus grande d'une RAM, recharger. Ensuite, nous allons réintroduire le texte tourné. Faisons cela en remplaçant le type d'affichage par rapport à plus tôt. Sélectionnez la section de contact, la classe de rotation. Tout ce que nous devons faire ici est de définir le type d'affichage pour être bloc. Cela remplacera ces styles que nous avons définis plus tôt. Si nous faisons défiler vers le haut, nous définissons cette action pour avoir le type d'affichage de zéro sur la vue de petit écran, maintenant nous avons dit que cela pourrait être bloc. Cela s'affichera désormais sur les plus grands écrans. Nous voulons également que cette section soit sur le côté droit et la façon dont nous pouvons le faire est de définir la boîte flexible. Nous pouvons définir la section de contact complète pour avoir la direction flexible de la ligne, ce qui signifie que notre texte vertical sera à côté de la section ici. Sélectionnez le contact, qui est l'emballage complet de notre section. Définissez le type d'affichage pour être le flex. Ce qui signifie que nous pouvons définir la direction flexible pour être rangée, recharger le navigateur, placer cela à côté de l'autre sur la page. Nous pouvons ajouter un peu d'espace entre les deux en sélectionnant et en justifiant le contenu. La propriété de l'espace entre lequel répartira l'espace disponible entre nos deux sections. Je vais également définir l'alignement du texte soit à gauche, plutôt près du centre, ce qu'il est actuellement. Cela poussera tout le texte vers la gauche du navigateur sur l'écran plus grand. Nous conserverons toujours le texte centré sur la vue à petit écran. 15. Animations CSS personnalisées: Nous allons maintenant jeter un oeil à la façon dont nous pouvons ajouter des animations CSS à notre projet. Une animation est un moyen de changer les styles CSS sur une période de temps. Par exemple, disons deux secondes, nous voulons peut-être fonder un élément dans ou nous pourrions passer d' une couleur d' arrière-plan à une autre d'une durée définie. Nous pouvons également l'utiliser pour appliquer n'importe quel style CSS différent que nous voudrons. Je vais jeter un oeil sur la façon dont on peut les inclure maintenant. Les animations peuvent vraiment donner vie à votre projet. Je vais maintenant les utiliser dans la section d'en-tête. D' abord en s'estompant dans le texte de, salut, je suis Chris. Ensuite, après un court délai, nous allons également s'estomper dans le texte juste en dessous de deux, donnant à l'utilisateur un message de bienvenue fluide. Cette vidéo particulière, nous allons couvrir l'ajout dans nos propres animations personnalisées en utilisant CSS. Ensuite, le suivant, nous allons regarder comment utiliser une bibliothèque d'animation pour ajouter beaucoup de beaux effets lors du défilement. Pour configurer nos propres animations personnalisées, nous devons configurer le CSS que nous voulons modifier en utilisant la règle des cadres clés. La règle des cadres clés est configurée dans le fichier CSS, un peu comme les requêtes média que nous avons consultées auparavant. Nous pouvons voir un exemple sur la droite, il utilise le symbole @ juste avant suivi du nom de notre choix. Ensuite, à l'intérieur de nos accolades, nous ajoutons dans n'importe quel nom de style CSS que nous voulons appliquer à certaines étapes de l'animation. Au plus basique nous avons à et à partir, qui est l'état de début et de fin de l'animation. Ici, nous changeons la couleur de fond. Ensuite, sur la gauche, nous sélectionnons un élément à appliquer, lien dans nos cadres clés personnalisés nom de change-bg à une propriété appelée nom d'animation. Si nous voulons plus de contrôle sur les étapes d'animation, nous pouvons également appliquer différents CSS à différents pourcentages de l'animation. Nous pouvons appliquer n'importe quel CSS que nous voulons, pas seulement la couleur de fond, qui peut s'appliquer à n'importe quel stade. Dans notre HTML, nous allons ajouter une classe personnalisée pour nous permettre de le faire. Vers notre page d'index jusqu'à la section d'en-tête. Nous allons appliquer ces deux lignes de texte à l'intérieur de notre en-tête. Ajoutons notre classe à ces deux éléments ici. Le nom de la classe va être fondu dans personnalisé. Je vais en fait l'appliquer à nos textes juste en dessous aussi. Dans nos feuilles de style, nous pouvons demander nos cadres clés et cela va être juste en bas après notre requête média. Nous utilisons le symbole @, nous avons nos cadres clés en donnant à cela un nom de fondu dans. Ensuite, gardez cela simple en ajoutant nos règles de départ et de destination à l'intérieur d'ici. Tout d'abord, nous allons définir l'opacité pour commencer à zéro. Ceci est entièrement transparent, qui signifie que nous ne pouvons pas le voir sur la page. Nous pouvons alors définir la règle à où nous allons définir l'opacité pour être une. Ce qui signifie que c'est maintenant complètement opaque et pas transparent du tout. Maintenant, nous avons notre configuration de cadres clés. Nous pouvons ajouter cela à notre fondu dans la classe personnalisée juste au-dessus de ces images clés. Fade in custom que nous disons juste à l'intérieur de notre HTML. Nous avons ensuite mis en place notre animation, en passant le nom de fondu in. Ensuite, nous pouvons définir la durée de l'animation. Nous voulons que cela s'applique plus d'une seconde. Au cours d'une seconde, nous passerons de la valeur d'opacité de zéro à la valeur d'un. Nous pouvons voir cela en enregistrant et en allant sur le navigateur, rechargez la page. C' est bien et fonctionne comme prévu, mais nous pouvons améliorer encore plus les choses en ajoutant un effet d'assouplissement. Nous pouvons utiliser l'assouplissement pour ralentir le début ou la fin, en le rendant plus lisse et plus graduel et en facilitant l'animation à l'intérieur ou à l'extérieur. Nous pouvons ajouter cela dans le CSS juste après notre nom d'animation. Nous pouvons sélectionner facilité dans, recharger le navigateur et maintenant nous avons une transition plus progressive et plus lisse au fur et à mesure que notre animation commence. N' oubliez pas que ce n'est pas seulement l'opacité que nous pouvons ajouter, nous pouvons ajouter toutes les autres règles CSS que vous voulez appliquer. Ensuite, je vais ajouter un délai aux animations pour que la deuxième ligne du texte s'estompe après cette première. Commençons par ajouter des classes personnalisées à ces deux éléments. Pour le titre de niveau 1, nous pouvons ajouter au nom de classe de delay un. Ensuite, le texte sous le nom de classe de délai deux dans le styles.css. Nous pouvons maintenant cibler ces deux clusters et définir le délai d'animation. Commençons par le délai. Nous pouvons définir le délai d'animation à n'importe quelle valeur que nous voulons. Je veux commencer par définir ceci sur 0,5 seconde. Le délai deux va juste être un peu plus long en définissant le délai d'animation à 1,5 seconde. Sauvegardons ceci et plus dans le navigateur, actualisez. Nous voyons maintenant que les animations fonctionnent et il y a un retard, mais cela ne fonctionne pas comme prévu. La deuxième ligne est toujours là lorsque la page se charge, mais nous voulons que cette ligne apparaisse seulement lorsque la première animation est terminée. Cela se produit en raison de la façon dont nous configurons nos cadres clés. Si nous revenons à nos feuilles de style, une fois que notre page sera chargée pour la première fois, puisque les animations sont retardées, l'opacité ne sera pas immédiatement mise à zéro. Pour résoudre ce problème, nous devons également définir cela dans notre classe d'animation de fondu dans personnalisé. Nous définissons cette valeur sur une valeur initiale de zéro. Cela prendra effet lors du premier chargement de la page. Essayons ceci maintenant, rechargez le navigateur. Les choses ne sont pas tout à fait comme on s'y attendait non plus. Nous voyons que l'animation a un retard, mais ils disparaissent aussi après la fin de l'animation. C' est parce que par défaut, après la fin de notre animation, aucun de ces styles des images clés ne reste. qui signifie que nous sommes laissés avec l'opacité du zéro à la fin de notre animation plutôt que le volume d'une animation que nous attendons ici. Les changements que nous pouvons faire usage du mode film d'animation et définir ceci comme une valeur de avant. À l'intérieur de notre classe d'animation personnalisée, nous pouvons définir le mode de film d'animation et la valeur des avants. Rechargez le navigateur et cela fonctionne maintenant comme prévu. Régler le mode film d'animation à l'avant signifie que ces styles à partir de la fin de nos images clés resteront. Dans notre cas, l'opacité qui est définie sur un. Il y a aussi un retour à l'arrière, qui appliquera le CSS à partir de la première trame clé. Aussi deux qui appliqueront le style dès le début et aussi la fin. Enfin, nous pouvons également supprimer la section de l'opacité à zéro. C' est parce que nous avons déjà cette configuration au début de notre animation. Vérifions simplement que cela fonctionne bien, rechargez le navigateur et tout fonctionne toujours comme prévu. Les animations peuvent jouer un rôle important dans la façon dont notre site Web ressemble, se sent et aussi dans sa façon de se démarquer. Les animations sont aussi un sujet très important, donc si vous êtes intéressé, je vous encourage à approfondir le sujet. Ensuite, nous allons rester avec les mêmes sujets et inclure une bibliothèque d'animation, ce qui nous donnera un beau regard sur les effets de défilement. 16. Bibliothèques d'animations: Bonjour. Je vous encourage à continuer à apprendre à créer vos propres animations personnalisées. Une autre excellente option à utiliser est une bibliothèque pré-construite. En particulier, celui que je vais vous montrer s'appelle Animate sur le défilement. Cette bibliothèque va nous permettre d'ajouter des animations à nos éléments lorsque l'utilisateur fait défiler notre page. Nous pouvons définir différentes animations pour différentes parties de notre contenu. Par exemple, nous pouvons définir un effet de retournement sur notre contenu supérieur, ce qui est comme retourner des voitures. Nous avons également beaucoup d'autres effets, tels que le zoom avant, nous pouvons avoir le contenu s'estomper ou glisser à partir de la page à partir du côté droit ou gauche. Nous avons également d'autres options de contrôle, telles que le réglage du délai, la durée et nous pouvons également combiner ces effets aussi. Jetons un coup d'oeil à la façon dont nous pourrions appliquer cela à notre projet. Pour inclure cette bibliothèque, je vais chercher animate sur le défilement. Maintenant, nous devons passer au lien GitHub. C' est celui dont nous avons besoin, juste ici en haut, alors cliquez dessus. Ensuite, lorsque nous faisons défiler la page, nous pouvons voir beaucoup d'exemples différents, qui est inclus dans la bibliothèque. Nous avons une diapositive en effet, nous avons fondu dans et si nous allons [inaudible] nous pouvons voir plus d'animations de flip, où vous pouvez retourner vers le haut, à gauche et à droite. Nous avons ensuite quelques effets de zoom, où nous zoomons sous différents angles et nous pouvons également définir la durée et le timing aussi, faire des effets vraiment beaux sur notre page. Pour commencer avec cette bibliothèque, tout ce que nous avons à faire est d'inclure le lien CDN vers le bas. Si vous utilisez des éléments tels qu'un projet de nœud, cela peut également être inclus, avec des gestionnaires de paquets tels que yarn, bower ou NPM. Puisque nous utilisons un projet HTML régulier, nous avons les liens CSS et JavaScript en bas, que nous allons lier aux fichiers requis. Commençons par les feuilles de style. Je vais copier ce lien et ensuite nous pouvons inclure dans la section en tête de notre page d'index. À la liste juste au-dessus du lien pour nos feuilles de style personnalisées. Assurez-vous que nos styles personnalisés sont les derniers dans l'ordre. Ensuite, nous pouvons saisir le lien vers le JavaScript et cela peut également aller dans notre page d'index. Copiez ce lien. Je regarde ça au bas de la section du corps juste après nos contacts. La dernière chose que nous devons faire est d'appeler le script initialisé. Alors copions ceci. La page est juste en dessous. Cela va initialiser la bibliothèque à utiliser dans notre projet. C' est tout ce que nous devons faire maintenant pour la configuration, nous pouvons commencer à utiliser les effets, simplement en ajoutant quelques attributs à nos éléments. Tous ces noms d'attributs sont ceux que nous voyons sur le site que nous venons d'examiner. Si nous faisons défiler vers le haut, nous voyons les attributs tels que fondu haut et c'est exactement ce que nous faisons dans notre projet. Commençons en haut de notre page d'accueil. Nous avons déjà quelques animations personnalisées dans la section d'en-tête, qui ont été ajoutées dans la dernière vidéo. Donc, je vais passer à la section parallaxe, où nous pouvons ajouter quelques effets à ces éléments ici. Par cela je vais faire usage de l'animation de flip à ces éléments de liste, sorte que nous avons un flip en effet lorsque nous faisons défiler la page vers le bas. Passons à notre index et localisons la section parallaxe. À l'intérieur, pour chacun de nos éléments de liste, nous pouvons commencer à ajouter ces attributs. Le premier est data-aos. Cela va créer un lien vers le nom de l'animation que nous voulons utiliser. Je vais utiliser flip up. Comme nous venons de le voir sur la page d'accueil, nous pouvons également définir le délai et aussi la durée, qui est l'échelle de temps pour l'animation. Commençons donc par le délai qui est data-aos-delay. Nous définissons cela en millisecondes pour combien de temps il faut pour que l'animation commence. Une fois la page chargée, pour la toute première, je ne vais pas inclure le retard, ce qui va augmenter est pour tous les autres liens. Ensuite, la durée des données, qui est la durée des données aos et encore, elle est en millisecondes, avec une valeur de 1000 faisceau une seconde. Je vais définir cela égal à 800 millisecondes. C' est le temps que prendra l'animation pour terminer, copiez-la et collez-la dans le reste des éléments de la liste. Nous allons également utiliser le flip d'animation pour tous les autres éléments, mais en augmentant le délai pour chacun d'eux. Donc 100, 200, 300, puis 400. La durée peut prendre la même chose et vous pouvez également jouer autour cette valeur et voir lequel fonctionne le mieux pour votre site. Enregistrez ceci et actualisons le navigateur. Faites défiler vers le bas Nous avons maintenant un joli flip en effet que nous faisons défiler la page vers le bas. Passons maintenant à notre section de travail récente, où nous allons ajouter des animations coulissantes. Nous allons commencer avec les deux titres de projet de planètes pizzas et aussi réagir trello. Ces titres vont commencer à partir de la page, puis faire défiler vers la vue au fur et à mesure que nous passons dans cette section. Ceux-ci ont été ajoutés à l'intérieur de nos rubriques de niveau quatre. Donc, localisons le premier, qui est la planète pizza, le nom des aos de données, et ce sera l'animation appelée diapositive gauche. Nous pouvons également ajouter une durée, tout comme nous l'avons utilisé ci-dessus et définir ce champ 1,000, qui est une seconde. Je vais saisir ceci et déplacer ceci vers le bas vers le deuxième titre, qui est de réagir trello coller ceci dans et comme il est du côté opposé, nous allons glisser à droite, gardant la même durée qu'avant, enregistrer cette et testons cela dans le navigateur. Rechargez, faites défiler vers le bas, comme notre titre le glisse et le même pour le second. Rappelez-vous, c'est votre projet et vous pouvez utiliser toutes les animations et les horaires qui vous conviennent le mieux. Mais ensuite, je vais disparaître dans l'information juste en dessous. La section est juste là. Je vais les estomper. Pour ce faire, je vais envelopper tout le texte dans un div, qui va agir comme un wrapper puis je vais ajouter l'animation à ce wrapper. Donc, nous pouvons tout saisir à partir de notre site de visite lien jusqu'à juste au-dessous de notre titre, alors découpez ceci, en laissant une place, notre niveau de direction. Nous pouvons ensuite ajouter un div, qui va être un wrapper, coller dans tout ce contenu et ensuite nous pouvons ajouter notre animation à ce wrapper, le nom de données aos. Cela va être fondu et la durée d'une seconde. Prenons également ces deux attributs et nous pouvons travailler avec l'image du projet, donc juste en dessous. Nous avons aussi cette image de travail récente. Juste après notre cours, collez ceci dans, je vais aussi garder le même fondu dans l'animation ou augmenter la durée pour être 1500. Rechargez le navigateur. Nous avons accidentellement ajouté ceci au second plutôt qu'au premier, mais c'est tout à fait bien puisque nous allons dupliquer cela pour les deux projets. Faisons la même chose maintenant pour le premier projet. Nous pouvons découper un endroit, tous les textes des sites visités, jusqu'à juste au-dessous de notre titre, ajouter un div comme wrapper, coller le contenu à l'intérieur, puis ajouter notre animation, qui a été fondu en, la durée de 1000. Copiez ces attributs, puis nous pouvons également les ajouter à l'image juste en dessous. Le div qui entoure cela, collez ceci dans et gardez ceci cohérent avec l'autre image, augmentera cela à 1500, c'est une correspondance. Essayons maintenant ça. Faites défiler vers le haut et actualisez, vers le bas jusqu'à la section projet. Vous voyez la diapositive pour le titre et l'image sur le texte s'estompe maintenant. Enfin en bas, nous avons aussi la section contact, où nous pouvons ajouter quelques animations ici aussi. Je vais faire glisser le titre principal de, ne soyez pas un étranger, puis glisser dans les deux lignes de texte ci-dessous à partir de la droite de l'écran. Dans le HTML, nous pouvons descendre à la section contact et commencer par le titre. Le nom de cette fois va être glissé vers le haut, la durée, je vais mettre le mien à 1500. Voyons voir à quoi ça ressemble. Rechargez le navigateur, puis cela glisse maintenant vers le haut. Nous avons juste besoin de travailler avec nos deux lignes de texte ci-dessous et de les rapporter de dessus sur le côté droit. Nous allons également ajouter un délai à ces deux animations, étant donné la tête dans la chance d'atteindre le sommet, si toutes ces animations se déplacent. Commençons par le texte juste en dessous. Collez ceci dans et le nom de l'animation sera diapositive à gauche. Celle-ci a aussi besoin d'un retard. Il s'agit de données aos delay et 1000 millisecondes, la durée que nous allons également augmenter à 150 aussi, puis saisir ceci et nous pouvons ajouter cela pour la dernière ligne aussi. Collez ceci en tant qu'attribut. Nous pouvons augmenter le délai à 200 millisecondes, gardant la même durée et le même nom d'animation. Allez dans le navigateur et rechargez, nous laissant avec quelques bons effets d'animation. Il y a une chose à prendre en charge avant de terminer cette vidéo. Une des choses que vous remarquerez depuis l'ajout dans cette animation, c'est que nous pouvons maintenant faire défiler vers la droite de la page lors de son premier chargement. Cela est dû au fait que nos animations, qui glissent dans, vont commencer par le bord de la page, puis glisser dans notre vue. Depuis que le contenu a commencé à partir de la page, le navigateur choses maintenant que la page est beaucoup plus large que ce qu'il est censé être. Tout ce que nous devons faire pour corriger cela est de dire au navigateur de cacher tout contenu qui déborde la page. Nous pouvons le faire en ajoutant un débordement sur l'axe des x et nous allons le faire dans la section corps de nos feuilles de style. Faites défiler jusqu'à nos styles globaux. Nous pouvons déclarer comment nous voulons gérer tout dépassement sur l'axe des x, qui est de gauche à droite de la page. Modifiez ceci en une valeur de masqué. Sauvons ça. Maintenant, si nous revenons au navigateur et faites défiler vers la section de contenu principale, appuyez sur recharger et maintenant cette propriété de débordement nous empêche de faire défiler la page. Nous ajouterons également d'autres animations au fur et à mesure que nous progresserons dans le cours. Mais n'hésitez pas à échanger n'importe laquelle de ces animations avec différentes en fonction de votre style. C' est maintenant notre page d'accueil terminée, et dans les prochaines vidéos, nous commencerons à nous concentrer sur notre page de portfolio pour montrer toutes nos compétences. 17. Petit plus : Compatibilité des navigateurs: CSS évolue toujours avec l'ajout de nouvelles fonctionnalités. Ces nouvelles fonctionnalités sont souvent formidables et nous pouvons vouloir les utiliser dès que possible. Cependant, nous devons être prudents car il faut souvent du temps pour ces fonctionnalités soient pleinement prises en charge dans tous les navigateurs, et même lorsque les navigateurs prennent en charge le rattrapage et que la nouvelle version du navigateur est publiée, nous devons toujours être conscients que tout le monde utilisera la dernière version immédiatement. L' aide entre autres qui est un site vraiment utile comme caniuse.com, cela nous permettra de vérifier une fonctionnalité CSS et aussi voir à quel point il est largement pris en charge sur les principaux navigateurs, y compris les versions précédentes aussi. Par exemple, si vous voulez utiliser la Flexbox dans nos projets, nous pourrions taper ceci et ce que nous voulons est le module Flexbox, que nous pouvons voir ici. En haut, nous avons une liste de tous les principaux navigateurs et aussi le support pour chacune des versions. Par exemple, Chrome version 80 est vert et nous pouvons voir par le pop-up que cela est entièrement pris en charge et nous pouvons également voir l'utilisation globale de ce navigateur. Par exemple, ce [inaudible] actuel est de 10 pour cent pour le moment et c'est vraiment important pour déterminer quel support de navigateur vous voulez fournir pour votre projet. Si nous regardons les différentes nuances, Internet Explorer version 11 n'a qu'une Internet Explorer version 11 n'a qu' charge partielle, mais actuellement cela n'a qu'environ un pour cent d'utilisation mondiale, nous devrons donc décider si ce sera un problème pour votre public. Généralement, quelque chose avec toutes ces sections vertes comme celle-ci est assez sûr à utiliser dans un projet car il est largement pris en charge. Jetons un coup d'oeil à quelque chose d'autre comme l'opacité que nous avons récemment utilisée dans nos projets et la règle d'opacité que vous voyez ici est à peu près entièrement verte, donc c'est sûr à utiliser dans tous les navigateurs. Les animations sont également bien supportées. [ inaudible] quelque chose en elle dont il faut faire attention. Tapons les animations et voyons ce qui se passe. Si nous tapons dans l'animation, nous voyons quelque chose appelé l'AnimationAPI, et voyons que cette fonctionnalité est expérimentale. C' est parce que ce n'est pas exactement l'animation que nous avons utilisée dans notre projet. La raison en est que l'animation est un raccourci CSS pour plusieurs choses. Si nous passons à notre projet et regardons l'animation que nous avons utilisée plus tôt dans notre fondu, la propriété animation est un raccourci pour des choses telles que le nom de l'animation, que nous avons ici, et aussi l'animation-timing- fonction. Nous pourrions les ajouter séparément. Donc, nous pourrions ajouter le nom de l'animation et définir la vitesse de fondu, puis la fonction de synchronisation de l'animation, et ensuite nous pourrions définir cela pour être plus facile comme nous l'avons utilisé ci-dessus, puis supprimer tout raccourci. Cela aurait exactement le même effet, mais c'est juste une façon de regrouper diverses propriétés liées en une seule ligne. En fait, notre animation est aussi un raccourci pour la durée de l'animation, donc nous pouvons même supprimer cela, nous pouvons supprimer cette ligne de code, puis nous pouvons placer cela à l'intérieur de notre raccourci et cela fonctionnera exactement de la même manière. Prenons simplement cela en allant sur le projet et dans la section d'en-tête, rechargez et tout fonctionne toujours comme prévu. C' est quelque chose à garder à l'esprit lors de la recherche de propriétés CSS, qu'une propriété peut parfois être un raccourci pour plusieurs règles CSS. Si vous voulez savoir si quelque chose est un abrégé ou non, vous pouvez vous rendre sur le site Web de Mozilla et ensuite faire une recherche pour cette propriété particulière. Par exemple, recherchons la bordure. Nous pouvons aller dans la section CSS et nous voyons tout de suite que la bordure est une propriété abrégée qui définit la largeur de la bordure, le style de la bordure, et aussi la couleur sur une ligne. Généralement, lorsque vous traitez des propriétés CSS plus récentes, il s'agit d'équilibrer plus de fonctionnalités que vous voulez, le projet RTA, ainsi que la restauration pour vos utilisateurs cibles. Il existe également des outils qui peuvent aider avec le support du navigateur aussi, et cela utilise des préfixes fournisseur et des polyfills. Nous ne les couvrirons pas au cours de ce cours, mais n'hésitez pas à approfondir ces sujets si vous souhaitez en apprendre davantage. 18. Configurez nos pages pour les projets: Nous allons maintenant créer notre page de projet, qui sera une vitrine pour nos travaux précédents. Cela nous donnera également l'occasion d'apprendre une nouvelle technique CSS qui s'appelle la grille. Contrairement à la flexbox qui contrôle nos mises en page dans une direction, la grille CSS nous permettra de contrôler notre contenu dans les directions horizontales et verticales. Pour la version finale, je passe de notre page d'accueil. Si vous cliquez sur le lien de navigation pour les projets, cela inclut la même section d'en-tête que nous avons utilisée pour la page d'accueil, puis nous pouvons faire défiler vers le bas et les projets récents s'animeront lorsque vous faites défiler vers le bas. Nous pouvons également survoler chacun d'entre eux, et le titre s'affichera pour chaque projet. Vous pouvez voir sur cette vue complète de bureau maintenant nous utilisons la mise en page de grille CSS. Nous allons tout apprendre à ce sujet dans les prochaines vidéos, et cela est également entièrement réactif aussi. Si nous réduisons le navigateur vers le bas, nous verrons différents changements de mise en page tels que le périphérique de taille de tablette qui va ensuite changer nos projets pour être deux colonnes. Si nous réduisons cela encore plus loin, cela devient alors toute la largeur du navigateur. Pour commencer, nous allons parcourir notre projet et créer un nouveau fichier dans notre répertoire de portefeuille. Créez un nouveau fichier, et cela s'appellera les projets. Encore une fois, cela va avoir l'extension HTML. S' assure que cela se trouve à la racine du portefeuille côté de l'index et des feuilles de style. Je vais utiliser la même section d'en-tête afin que nous puissions nous faciliter la vie en allant sur le index.html, et nous pouvons copier sur tout le contenu, puis modifier ceci. Cela a déjà le lien vers notre projects.HTML que nous avons ajouté tôt lors de la création de la section d'en-tête. Commande ou Contrôle A pour sélectionner tout, Copiez le contenu sur, puis Collez ceci dans le fichier projects.HTML. À partir du bas, nous devons également garder l'animation sur la bibliothèque de défilement, mais nous allons supprimer tout le reste du contenu jusqu'à la section d'en-tête. Cela inclut notre section de travail récente, la section parallaxe. Supprimons cela en nous laissant juste avec la section d'en-tête, puis notre script en bas. Cela a également notre même lien vers la feuille de style que nous avons créée, ce qui signifie que nos styles seront également appliqués. La prochaine chose que nous devons faire est de changer le titre. Ce sera les projets de Chris Dixon, et cela nous donne maintenant un bon point de départ qui inclut toujours le même en-tête et tous les liens dont nous avons besoin vers notre propre CSS avec la bibliothèque d'animation. Sauvegardons ce fichier et la checklist fonctionne bien dans nos projets, allons Recharger le navigateur à partir de la page d'accueil, nous pouvons cliquer sur les Projets, et il est maintenant des liens vers notre projects.HTML, et nous pouvons voir l'en-tête est en place. Pour cette page, je vais maintenant configurer. Ensuite, nous allons ajouter nos projets en utilisant une première approche mobile. Rappelez-vous plus tôt dans le cours que vous aurez également besoin de télécharger des images, ou de prendre des images réelles de certains projets précédents que vous avez créés. Si vous n'en avez pas tout à fait bien, vous pouvez utiliser n'importe quelle image d'espace réservé que vous souhaitez, mais assurez-vous qu'elles sont prêtes à l'emploi dans la vidéo suivante. 19. Y compris les pages HTML pour les projets: A l'intérieur du dossier images de notre projet, nous avons toutes ces images que nous allons maintenant utiliser dans notre projects.html. Nous avons également couvert la structure de base et l'en-tête la dernière vidéo avec le script d'animation en bas. Je vais maintenant commencer avec notre section projet en créant un nouveau rappeur de section, qui va également avoir un titre de niveau you avec le texte des projets récents. Cela va également recevoir diverses classes au fur et à mesure que nous allons nous en servir dans le CSS très bientôt. La rubrique de niveau 3 aura le titre de la catégorie des projets. Ensuite, après cela, je vais ajouter un div, qui va être un rappeur pour tous nos projets, donc nous allons ajouter une classe de projets à cela. Ensuite, chaque div individuel à l'intérieur va être pour un seul projet. Chacun de ces projets va avoir une pièce d'identité. Je vais appeler le premier, travailler un, et cet ID sera utilisé plus tard dans le CSS. Chacun d'entre eux va également avoir un nom de classe cohérent de grid-item. Puis imbriqué à l'intérieur si nous regardons la version finale, nous allons avoir une image et aussi le titre du projet, qui s'affichera plus tard lorsque nous survolons chaque image. Nous devons ajouter ces deux éléments en commençant par notre image. Toutes nos images dans ce dossier d'images. Le premier que je vais utiliser, va être le lecteur de musique, aussi l'ancien texte. Ensuite, nous pouvons ajouter un lien avec les éléments a et ce sera le texte de nos projets. C' est le lecteur de musique. Il peut ajouter un lien vers une page séparée pour fournir plus de détails sur ce projet individuel, si vous le souhaitez. Je vais laisser le mien vide car nous ne couvrirons pas ça pendant ce cours, mais n'hésitez pas à le faire comme un défi. Un nom de classe de texte masqué. Puisque le texte va être initialement masqué jusqu'à ce que l'utilisateur survole, donc nous pouvons aller de l'avant et taper chacun de ces individuellement si vous le souhaitez. Mais comme j'ai beaucoup à traverser, je vais copier et coller ceci, puis changer les détails. Rappelez-vous, vous n'avez pas besoin d'inclure autant de projets que moi, et vous pouvez également en ajouter plus si vous préférez. Travailler deux, la même classe, l'emplacement de l'image, cette fois va être pour réagir trello, l'ancien texte deux, et aussi le titre. Le troisième que nous allons coller. Encore une fois, en vous assurant que cela est à l'intérieur du rappeur de projet, collez-le dans, recherchez l'ID. L' image de mon troisième sera pour l' éditeur de photos et aussi pour le texte lié deux. Le quatrième sera pour l' application de productivité et aussi l'ancien texte deux. C' est ainsi que nos projets vont être structurés. J' en ai neuf au total, donc je vais sauter de l'avant et les ajouter maintenant. Mettez la vidéo en pause et revenez une fois que vous avez terminé d'ajouter tous vos projets. Tous mes neuf projets sont maintenant en place, et j'espère que vous en avez terminé deux. Maintenant, passons au navigateur et vérifions cela dans le projects.html. Juste en dessous de l'en-tête, nous avons le titre de nos projets récents. Ensuite, pour chacun de nos projets, nous avons notre image et aussi le titre à côté. Notre contenu est maintenant en place pour notre page de portefeuille. Ensuite, nous allons appliquer un style CSS. Pour commencer, nous allons commencer par la première approche mobile et profiter de la CSS Flexbox. Ensuite, plus tard dans le cours, nous appliquerons une requête média lorsque nous aurons plus d'espace à l'écran disponible. Ensuite, nous pouvons profiter de la grille CSS pour mettre en page notre contenu dans deux directions. 20. Présentation du projet mobile first en utilisant Flexbox: Comme promis, nous allons maintenant passer au style, commençant par la vue de petit écran, puis nous pouvons jouer quand nous voulons obtenir plus d'espace à l'écran. Dans la dernière vidéo, nous avons ajouté le code HTML pour tous les projets. Si nous allons à la page HTML, nous voyons que tous nos projets individuels sont enveloppés dans cette div avec la classe de grid-item, puis tous ces éléments de grille sont imbriqués à l'intérieur de ce div projets. Ce seront les deux classes principales dont nous aurons besoin dans nos feuilles de style. Alors allons-y maintenant. Donc, je vais créer une nouvelle section juste au-dessus de notre requête média, puis créer un commentaire pour cette page de projets. C' est assez avec le titre, qui était le titre du projet, et tout ce que je vais faire ici est de définir la taille de la police à 1,6 rems, ce qui est l'équivalent de 16 pixels. Notre emballage principal était la classe des projets, et c'est ici que nous pouvons définir le type d'affichage pour utiliser la flexbox. La première vue mobile sur laquelle nous travaillons actuellement nous permettra de définir la direction flexible pour être la colonne, signifie que nos éléments seront empilés verticalement, puis changeront cela plus tard lorsque nous aurons plus d'espace à l'écran disponible. Chacun de nos projets et cette classe d'élément de grille, et nous allons l'utiliser pour définir initialement un espace entre chacun en ajoutant une marge au bas de chacun et le volume d'un rem. Si nous jetons maintenant un oeil à la version finale, nous voyons que cela a la bordure grise entourant chacun. Pour ce faire, nous allons ajouter une couleur d'arrière-plan à chacune de nos sections. Pour rendre cet arrière-plan visible à partir de l'image, nous allons ajouter un peu de rembourrage autour du bord de chacun. Cela créera un peu d'espacement, sorte que notre arrière-plan viendra sur les quatre côtés. Donc, nous pouvons définir l'arrière-plan pour être la valeur de gris ardoise clair, recharges, et nous ne pouvons voir cela que derrière le titre du projet. Donc, pour voir cela autour des quatre côtés, nous allons ajouter la valeur de remplissage d'un rem. Cela nous donne l'effet d'une frontière. Actuellement, nous voyons notre frontière est plus large sur le fond, et c'est simplement parce que nous avons actuellement le titre du projet. Nous allons supprimer ces endroits sur l'image très bientôt. Après notre élément de grille, nous allons maintenant passer à l'image et définir ceci pour être la pleine largeur du conteneur. Nous pouvons le faire en ciblant notre image de grille, puis il définit la largeur et la hauteur à 100 %. Cela permettra de s'assurer que notre image correspondra parfaitement à l'élément de la grille. Maintenant, sauvegardons ceci et rechargeons les projets. Cela semble bien sur la vue de petit écran. Cependant, si nous étirons le navigateur, ces images commencent à devenir vraiment étirées. Pour améliorer cela, nous allons modifier cette mise en page deux fois en utilisant deux requêtes média. Actuellement, nous n'avons qu'une seule requête média configurée. Je vais utiliser ces deux-là, changer la direction de flexion pour être rangée. Nous avons donc deux projets côte à côte. Ensuite, dans la vidéo à venir, nous allons encore plus large pour une vue complète du bureau, puis nous allons utiliser la grille CSS. Alors faites défiler vers le bas, nous avons déjà notre requête média en place, et je vais aller à la fin de ceci. Rempli l'accolade de fermeture juste ici. Commençons par nos projets. Rappelez-vous que c'est le wrapper principal pour tous nos projets, et nous pouvons définir la direction flexible pour être rangée. Ensuite, nous pouvons cibler l'élément de grille, qui est notre seul projet et nous pouvons définir la base flexible d'une valeur de 45 pour cent. La base flexible sera la taille par défaut de nos éléments, qui est nos projets, et cela laisse également 5 % pour tout espacement entre les deux. Si nous sauvegardons cela et rechargeons, nous voyons que les projets ne semblent pas tout à fait comme prévu, qui soudainement Flexible base pour être 45 pour cent. Nous nous attendions à avoir deux images côte à côte avec les 5 pour cent entre les deux pour l'espacement. C' est parce que par défaut nos articles sont réglés sur aucun emballage, donc tous les articles vont essayer de tenir sur la même ligne. Nous pouvons remplacer cela en définissant le flex wrap car chaque élément individuel se cassera dans sa propre ligne après avoir pris en compte la largeur. Donc, dans nos projets, si flex wrap, nous pouvons remplacer la valeur par défaut de no wrap pour simplement être wrap. Enregistrez ceci et rechargez. Maintenant, nous allons voir deux projets côte à côte, segmentés à 45 pour cent chacun. Tout l'espace supplémentaire, cependant, se trouve sur le côté droit. Mais il serait beaucoup mieux si nous répartissons l'espace plus uniformément. Pour nous permettre de le faire, nous avons une propriété flexbox appelée justification du contenu, et cela va nous permettre de déterminer où nous voulons que cet espacement apparaisse. Nous allons définir ceci pour être espacé uniformément afin que tout l'espace supplémentaire autour des éléments soit divisé également. Maintenant, l'espace blanc se divise également entre nos projets. droite. Donc, nous avons maintenant le style en place pour la mise en page de petit écran à l'aide de la flexbox, et notre site semble maintenant bien sur un appareil de petite taille mobile ou une petite tablette. Cependant, bien que nous voulions également répondre aux grands écrans et aux appareils de bureau, et nous le ferons dans la prochaine vidéo et obtenons également notre premier regard sur l'utilisation de la grille CSS. 21. Premier regard sur la grille CSS: Nous savons déjà comment utiliser la CSS Flexbox, la mise en page d'un contenu sur un axe. Par exemple, dans cette section supérieure ici, nous avons le contenu tracé sur la page dans une rangée. Juste en dessous, nous avons une disposition basée sur des colonnes où notre contenu est empilé de haut en bas. C'est une excellente utilisation pour la Flexbox, mais cela a aussi une limitation, notre contenu à l'intérieur de chaque section ne peut être disposé que dans une seule direction. Cependant, si nous regardons une mise en page basée sur une grille sur le côté droit, nous pouvons utiliser la grille CSS pour contrôler la mise en page dans deux directions. La première chose que nous devons faire est de définir la largeur et la hauteur de nos colonnes et lignes. Nous pouvons alors définir l'écart que nous voulons entre chacun de nos éléments. Nous pouvons alors définir si nos éléments doivent être tous égaux ou si nous voulons qu'ils soient fusionnés comme nous le voyons ici. Une autre grande partie de la grille est également la possibilité de placer notre contenu dans n'importe quelle section que nous voulons. Nous pouvons le faire ou nous pouvons laisser notre contenu circuler naturellement et occuper le prochain espace disponible sur la grille. Une des idées fausses sur la grille et Flexbox pour commencer est que nous devons choisir la loi IV. Au-dessus de tout cela n'est pas l'intention. La grille n'est pas destinée à remplacer la Flexbox et elle peut se compléter dans les mêmes projets. Ajoutons maintenant à notre dernière requête média, transformons nos projets en une grille. Je veux ajouter le mien autour de la marque de 1 000 pixels, mais vous pouvez bien sûr jouer avec cela pour convenir à vos projets de tous les styles de CSS. Après la dernière requête multimédia, je vais ajouter une nouvelle requête multimédia avec le réel @media. Nous pouvons bien sûr cibler différents types d'écran, tels que l'écran ou la vue d'impression. Eh bien, comme avant, je vais juste utiliser la largeur minimale, juste comme ça, et définir ceci sur 1000 pixels. Commençons par notre wrapper de projet et la façon dont nous pouvons introduire la grille CSS. Tout comme nous l'avons fait avec la Flexbox, est de définir le type d'affichage. Nous définissons l'affichage comme étant la grille, et je vais également définir la hauteur de la section à 100 pour cent de la hauteur du point de vue. La prochaine chose que nous devons faire est de déclarer nombre de colonnes et de lignes que nous voulons utiliser dans notre grille. Nous définissons les colonnes en utilisant la propriété de colonnes de modèle de grille, puis nous définissons la largeur que nous voulons que chaque colonne soit. Par exemple, si nous voulions trois colonnes, être 200 pixels le fera comme ça. Donc 200 pixels, 200 pixels, puis 200 pixels. Maintenant, si nous sauvegardons et rechargeons, nous voyons maintenant nos trois colonnes à 200 pixels chacune. Nous pouvons aussi les rendre différents afin que le milieu puisse être 500, et cela n'affectera que notre colonne du milieu. Si nous voulions en ajouter un, tout ce que nous devons faire est d'ajouter une valeur supplémentaire, juste comme ça, et cela est maintenant reflété dans le navigateur. Nous pouvons également utiliser différentes valeurs telles que pourcentage, ems, béliers, ou nous pouvons également utiliser une unité fractionnée de grille, qui prendra une partie de l'espace disponible. Si nous voulions trois colonnes égales, nous pourrions utiliser les unités FR, donc un fr, un fr et un fr et ceux-ci prendraient maintenant trois espaces égaux. Après cela, nous pouvons également définir nos lignes de modèle de grille, et vous pouvez probablement deviner ce que cela fera. Cela définira l'espacement de chacune de nos lignes dans nos projets. Par exemple, allons pour 100 pixels, 300 pixels, puis 200 pour le troisième. Recharger. Nous n'avons pas réellement besoin de définir les lignes du modèle de grille pour notre projet si nous n'avons pas du tout cet ensemble. Retirez ceci. Puisque nous avons les trois colonnes définies, le contenu prendra les trois colonnes sur une ligne, puis le contenu restant passera à la ligne suivante. Après cela, nous pouvons également ajouter un peu d'espace entre chacun de ces projets, et nous pouvons le faire en ajoutant un espace de grille. L' écart de grille est simplement l'espace entre chacune de nos lignes et colonnes. Je veux définir le mien à 20 pixels. L' une des bonnes choses à propos de l'écart de grille est qu'il n'ajoute pas d'espacement à l'extérieur non plus. Elle ne s'appliquera qu'entre chacune de nos sections. Une chose que vous remarquerez cependant, est qu'il y a plus d'espace sous chaque projet qu' entre les deux, même si nous avons défini un écart égal de 20 pixels entre chacun d'eux. C' est parce que, à partir du début, lorsque nous avons créé la première vue mobile, nous avons défini une marge sur le bas de chacun de ces éléments. Nous voulons que cela prenne effet uniquement pour la vue mobile. Par conséquent, dans cette requête multimédia, vous pouvez également réinitialiser la marge, vous êtes de retour à zéro. Ceci a été défini sur la classe d'élément de grille, et tout ce que nous devons faire est de définir le bas de la marge à zéro. Rechargez le navigateur, et cela prendra toujours effet dans le petit écran. Développez le navigateur à la plus grande taille et l'écart de grille est maintenant égal. La grille nous fournit également une fonction de répétition, qui est un raccourci. Si nous avons plusieurs lignes ou colonnes avec un espacement égal, nous ne pouvons avoir que ces trois colonnes égales, donc au lieu d'écrire ceci trois fois, nous pouvons utiliser la fonction de répétition. Ensuite, à l'intérieur des parenthèses, nous déclarons combien de fois nous voulons que cela soit répété. Par exemple, nous allons aller quatre fois, puis définit la largeur que nous voulons la colonne, enregistrer et actualiser. Celles-ci sont maintenant répétées quatre fois. Mais nous allons vouloir laisser ça comme trois, comme nous l'avons utilisé auparavant. C' est ainsi que le système de grille fonctionne à un niveau de base. Mais si nous ne voulons pas que notre grille soit aussi uniforme ? Il peut y avoir des cas où nous voulons que nos images ou nos sections chevauchent plusieurs parties de notre grille. Eh bien, pour cela, nous avons la propriété des zones de grille, et c'est ce que nous allons découvrir dans la prochaine vidéo. 22. Zones de grille pour des présentations plus avancées: Actuellement, notre grille CSS ressemble un peu à ceci. Nous avons créé des colonnes et des lignes de taille égale, et cela est conçu pour accepter des morceaux de contenu de même taille. Bien que nous ayons parfois le besoin de créer des zones de tailles différentes pour nous permettre d'utiliser des morceaux de contenu de différentes tailles. Par exemple, vous pouvez souhaiter un contenu plus large, couvrir deux zones de la grille ou faire la même chose verticalement pour un contenu plus grand. Heureusement, nous pouvons le faire avec la grille CSS, en utilisant les zones de la grille et c'est ce que nous allons jeter un oeil à utiliser maintenant. Dans notre projet de démarrage HTML, nous avons donné à chacun de nos projets un identifiant unique. Ceci est work1, work2, puis augmente pour chacun de nos articles. Cet ID peut être utilisé dans le CSS pour placer chacune de ces sections dans n'importe quelle partie de notre grille. À l'heure actuelle, nos éléments de grille circulent naturellement sur la page. Ensuite, passez à la rangée suivante. Nous pouvons utiliser ces ID maintenant et ensuite les placer dans différentes sections. Nous pouvons également leur permettre de prendre plusieurs sections, et c'est ce que nous allons couvrir dans cette vidéo. Dans ce fichier CSS, je vais maintenant revenir à notre section de page de projet où nous avons ajouté le commentaire. Défilons vers le haut. C' est la section ici. Nous ajoutons cela n'importe où, mais je vais l'ajouter après le titre, et nous pouvons sélectionner notre section par ID en utilisant le hachage et le nom du travail1. Cela peut sembler un peu déroutant au début, mais ne supporte pas avec moi car cela deviendra plus clair très bientôt. Ce que nous allons faire ici, c'est définir la zone de grille, puis nous allons donner à cette zone de grille un nom unique. Allons au travail1. Maintenant, nous avons cette section dans notre CSS assignée à une nouvelle zone de grille appelée work1. Ensuite, nous allons répéter ceci pour chacune de nos sections. work2, cela peut être n'importe quel nom que vous choisissez, mais je vais garder cela simple et cohérent. Numéro quatre, numéro cinq, et rappelez-vous que le mien va jusqu'à neuf objets. Six, sept, numéro huit, et enfin numéro neuf. Maintenant, nous avons assigné une zone de grille nommée à chacun de nos éléments. Nous pouvons les exposer de la manière que nous voulons. Revenons à notre requête média où nous avons configuré notre grille plus tôt, en bas de ce fichier. Nous pouvons ensuite utiliser la propriété zones de modèle de grille. Je veux ajouter ceci sur sa propre ligne, donc c'est plus clair. À l'intérieur, nous allons déclarer comment nous voulons que notre nouvelle grille ressemble. Plutôt que certaines choses notre poids, nos colonnes de modèle de grille, et les lignes que nous avons examinées précédemment, où le contenu va couler plus naturellement, ici nous déclarons exactement quel morceau de contenu nous voulons ajouter à chacune de nos zones de grille. Nous disposerons ceci de manière visuelle entre les citations. Par exemple, si nous voulions des colonnes libres, nous pourrions définir la première place en haut à gauche, qui est celle-ci, pour être la section appelée work1. Ensuite, je vais déclarer que le travail4 sera le deuxième élément de la première ligne, puis le troisième sera le travail7. Il s'agit des éléments que vous souhaitez afficher sur la première ligne. Sur la ligne suivante entre les citations, nous pouvons alors faire exactement la même chose. Je vais dire que c'est travail2 travail5, puis travail7 aussi. Remarquez ici que ces quatre pièces sont uniques. Ensuite, sur le côté droit, nous en avons deux avec le même nom. Cela signifie que le travail7 prendra deux parties, ce qui signifie qu'il sera beaucoup plus grand que les autres articles. Par exemple, sur notre grille ici, ce sera une section juste ici, et work7 prendra les deux places. Jusqu' à notre prochaine rangée, je vais mettre work3, work6, puis travail8. Ensuite, pour la ligne suivante, je vais ajouter une section de travail. Cela va couvrir toute la largeur de notre grille en prenant trois parties sur la même rangée. Puisque nous avons trois sections déclarées, tout ce que nous avons à faire est d'ajouter le même nom de travail9 dans chacune de nos sections. Ici, sans même voir la grille dans le navigateur, nous obtenons une représentation visuelle de la façon dont notre grille va être disposée. Nous pouvons voir que toutes ces sections sont individuelles, sauf cette dernière section ici, et aussi cette section verticale en haut à droite. Sauvegardons ça maintenant. Rechargez le navigateur. En haut à droite, nous avons cette section qui couvre les deux colonnes verticales. Nous avons ensuite nos pièces individuelles tout autour, puis en bas, la section prise toute la rangée, qui est le travail9. Nous pouvons utiliser cette technique de zone de grille pour créer de belles mises en page et aussi des conceptions plus complexes en fonction du contenu que nous avons à l'intérieur de notre grille. Dans la vidéo suivante, nous allons améliorer notre section portfolio en ajoutant de beaux effets de vol stationnaire CSS. 23. Superposition de texte CSS, effets hover et animations: Bienvenue de retour. Notre projet prend maintenant forme et presque achevé. Je vais maintenant terminer les choses en ajoutant un peu plus de style CSS et aussi des effets. Si nous prenons la couche, nous allons ajouter un effet de survol sur chacun de nos projets à l'intérieur de la grille, ce qui va également révéler le titre du projet. Nous allons également utiliser notre bibliothèque d'animation sur cette page. Commençons par supprimer le titre du projet, puis nous allons réintroduire plus tard lorsque l'utilisateur survolera nos projets. Commençons dans nos feuilles de style. Si nous examinons la section de tous les projets ou la page de tous les projets, nous allons l'ajouter au bas de la section. Assurez-vous que cela est en dehors des requêtes de médias, car nous voulons toujours que cela s'applique à toutes les tailles d'écran. Nous allons utiliser la classe de texte caché. Si vous vous souvenez dans le HTML, nous avons ajouté cette classe à chacun de nos éléments de grille, afin que nous puissions utiliser cela maintenant. La hauteur d'un texte, ce que nous allons faire pour commencer, est de définir le type d'affichage sur zéro. Cela supprimera alors cela de la page. Si nous appuyons sur rafraichir, nous voyons maintenant que notre titre a été supprimé. Maintenant, nous avons besoin d'un moyen de réintroduire cela lorsque l'utilisateur survole notre image. Nous allons le faire avec une combinaison de cours. Rappelez-vous que chacun de nos projets est entouré dans cette classe d'éléments de grille afin que nous puissions y accéder pour commencer. Ensuite, séparés par une colonne, nous pouvons utiliser ce qu'on appelle une pseudo-classe. Une pseudo-classe est utilisée lorsque nous voulons appliquer CSS pour un état particulier, par exemple quand un élément est actif, quand un lien est visité, ou dans notre cas, quand nous voulons passer le curseur sur les éléments. Lorsque nous survolons ces éléments, nous voulons affecter ces textes cachés juste au-dessus. Comprenons que juste après, maintenant tous les styles s'appliqueront à cette classe de texte cachée. Une fois que nous survolons notre élément de grille, nous avons ce type d'affichage de non-ajustement ici. Nous voulons réinitialiser le type d'affichage distribué du bloc, qui le replacera ensuite dans notre HTML. Aussi le texte-aligner pour être au centre de notre section. Nous pouvons également jouer avec la taille de la police, allons-y pour 4rem et aussi la couleur de la police du blanc. Plus sur le navigateur appuyez rafraîchir et maintenant, lorsque nous survolons l'une de nos images, nous voyons ce grand texte apparaître en bas. Maintenant, nos textes disparaissent quand le vol stationnaire. Mais cela est toujours pris l'espace au bas de la div. Cependant, nous ne voulons pas cela en bas. Nous voulons que cela soit placé au centre de notre section. La raison pour laquelle nous voyons cela au bas de notre div est que par défaut l'élément prendra de l'espace dans l'ordre où ils sont dans le HTML. Il est logique que nous ayons notre image puis notre texte. Une façon de changer cela est de définir la position CSS du texte pour être absolue. Absolu, nous supprimerons les éléments du flux ou de la page, ce qui signifie qu'il ne prendra pas de place. Nous sommes alors libres de positionner ça partout où nous le voulons. Revenons à notre feuille de style et juste après notre couleur, nous pouvons définir la position de ces éléments pour être absolue. Voyons quel effet cela a dans le navigateur. Maintenant, lorsque nous survolons nos images, cela mène maintenant le texte sur la page, mais il ne prend plus aucun espace. Nous pouvons voir cela parce que nous n'avons aucun fond gris derrière le texte, signifie qu'il n'est plus positionné à l'intérieur de notre div. Il n'est évidemment pas en bonne position. Nous pouvons maintenant le déplacer en utilisant ces propriétés CSS de haut, droit, bas et gauche. Nous pouvons alors l'utiliser pour le placer exactement où nous le voulons. Nous voulons que le texte soit posé sur le centre de l'image. C' est logique jusqu'à ce que vous posiez ce 50 pour cent du haut et 50 pour cent de la gauche. Disons ceci et optez pour la gauche de 50 pour cent et aussi la même chose pour le haut. Nous pouvons aussi, comme mesure temporaire, supprimer ce vol stationnaire, juste pour que nous puissions voir ce qui se passe pendant le test. Vers le navigateur et voyons où nous sommes maintenant. Nous ne voyons aucun des titres sur nos projets. Cependant, si nous faisons défiler vers le haut de la page, nous voyons que tous les titres sont maintenant placés dans la section d'en-tête. Pourquoi c'est ça ? Eh bien, c'est parce que lorsque nous prenons le textile, le flux du document en utilisant absolu, puis définir les valeurs haut et gauche comme nous avons juste tourner. Ces valeurs en haut et en gauche sont définies à partir de la fenêtre d'affichage du navigateur. Nous avons effectivement défini le texte à 50 pour cent du coin supérieur du navigateur. Il y a un moyen que nous pouvons remplacer cela cependant, et ceci est de définir l'un des éléments qui ont une position de relative. Chaque projet que nous avons ci-dessous est enveloppé dans un div. Cette div a la classe de l'élément de grille. Si nous allons à notre projet, c'est le div wrapper juste ici. Maintenant, si nous définissons ceci comme une position relative, ce conteneur sera maintenant notre point de référence pour notre texte plutôt que la fenêtre des navigateurs. Revenons à notre feuille de style, nous pouvons l'appliquer maintenant. C' est à propos de l'élément de grille, nous avons déjà cette classe juste ici. Définissons la position pour être relative. Vers le navigateur et actualiser. Un texte TOC est appliqué sur chacune de nos images, le texte a effectivement été poussé sur, par exemple, 50 pour cent du côté gauche. Mais cela ne tient pas compte de la largeur et de la hauteur du texte. Au lieu de cela, nous voulons que le texte soit que nous avons déplacé plus de 50 pour cent au centre de notre texte. Nous pouvons le faire en déplaçant la zone de texte de 50 pour cent de sa largeur et de sa hauteur. Puisque nous utilisons une unité de pourcentage plutôt qu'un pixel, cela va également centrer le texte quelle que soit sa taille. Revenons à notre texte caché. L' élément de grille masqué le texte et puis juste après notre positionnement, nous pouvons ensuite décaler notre texte de la moitié de la largeur et de la hauteur en utilisant une transformation CSS. Une transformation, que nous voulons ajouter va être traduite. Ensuite, à l'intérieur ici, nous pouvons compenser cela en ajoutant une valeur X et Y. Nous voulons ajouter un décalage négatif de 50 pour cent, soit la moitié du poids ou du texte. C' est sur l'axe X, qui est de gauche à droite. Nous pouvons également faire la même chose pour l'axe Y, qui est ouvert vers le bas. Rechargeons le navigateur, et maintenant toutes les taxes en cours de déplacement vers la gauche et le haut, 50 pour cent de la largeur totale et de la hauteur. Pour que notre texte se démarque maintenant, nous pouvons ajouter quelques effets de survol. Tout d'abord, nous devons réintroduire notre pseudo-classe de hover, que nous supprimons d'avant. Le texte n'apparaîtra plus que lorsque vous survolez notre image. La prochaine chose à faire est de cibler également notre image pour la rendre plus sombre afin que les balises se démarquent. Tout comme ci-dessus, nous pourrions cibler l'élément de grille lorsque l'utilisateur survolera. Mais cette fois, appliquez seulement notre CSS à l'image. Nous allons tout d'abord ajouter un effet de filtre dans la luminosité de notre image et définir cette valeur sur une valeur de 0,4. Cela aura pour effet d'assombrir notre image à seulement 40 pour cent. Enregistrez ceci et rechargez. Maintenant, lorsque nous survolons, nous avons réduit la luminosité de chacune de nos images. Nous pouvons également ajouter un petit effet pop deux, qui va rendre l'image juste un peu plus grande lorsque l'utilisateur survolera. Nous allons à nouveau utiliser cette propriété de transformation. Mais cette fois, nous allons transformer l'échelle. L' échelle est utilisée pour rendre les éléments plus grands ou plus petits et l'un est la taille régulière des éléments. Je vais rendre cela légèrement plus grand par certains que d'être une valeur de 1,01. La dernière chose que je vais ajouter, c'est l'opacité. Rendre ceci légèrement transparent avec 0,95. Donnez ceci une sauvegarde et plus au navigateur. Lorsque nous survolons maintenant nos images, nous voyons une petite augmentation de la taille et aussi l'opacité est réduite à. Le dernier morceau de CSS que je vais ajouter est de restreindre la taille globale de la page. Cela empêchera les images d'être trop tendues sur de très grands écrans. Si nous étendons le navigateur à la plus large possible, nous avons souvent une largeur maximale, que nous voulons que le site Web étire aussi. Ensuite, nous pouvons définir la couleur de fond à appliquer sur le côté gauche et à droite, une fois que le navigateur atteint la taille, nous pouvons le faire en réglant la largeur maximale tout en haut de notre feuille de style dans la section du corps. Je vais définir le mien pour être une valeur de 1 500 pixels, puis sur le projet. Nous voyons maintenant que le navigateur a dépassé les 1 500 pixels, laissant tout le contenu déplacé vers la gauche et tout notre espace blanc sur la droite. Cependant, ce que nous voulons, c'est que l'espace blanc soit divisé également entre le côté gauche et le côté droit. Nous pouvons le faire en définissant les marges pour qu'elles soient automatiques. Nous diviserons également l'espacement des deux côtés. Faisons tout ce qui est dans la section du corps. Nous avons déjà la propriété de marge mise en place juste ici. Nous pouvons ajouter ceci comme une valeur supérieure et inférieure. Aucune marge ne s'appliquera en haut et en bas. Mais nous pouvons définir les valeurs gauche et droite pour être auto. Sauvegardez ceci et maintenant nous devrions avoir un espacement égal. La dernière chose que je vais faire pour arrêter l'espace blanc du corps qui coule dans la couleur de fond, est de définir des couleurs d'arrière-plan pour le corps, qui est la section que nous voyons entre ici et le HTML, qui est la couleur d'arrière-plan à gauche et à droite. Tout d'abord, la section du corps peut avoir la couleur de fond blanc. Ensuite, si nous montons, nous pouvons ajouter au HTML2. Maintenant, la section HTML couvrira l'espace blanc sur le côté gauche et droit. Maintenant, ce que je vais faire ici est de définir la couleur de fond pour qu'elle soit légèrement différente. Je veux utiliser eee. Cela arrêtera notre page qui peut vraiment étirée sur de grands moniteurs. La touche finale de cette page est d'ajouter des animations à tous les projets. Utilisez la bibliothèque d'animation. Allons aux projets ou HTML et nous pouvons ajouter les attributs à tous nos éléments de grille. Nous le faisons en ajoutant le nom de l'animation avec des aos de données, une animation de zoom-in-up. Pour gagner du temps, je vais copier ceci et ajouter ceci à tous les autres projets. Il peut bien sûr ajouter une animation différente si vous préférez. Pour vous assurer que c'est sur chacun des projets, alors cela va zoomer lorsque nous faisons défiler vers le bas. Sous le navigateur, faites défiler vers le bas jusqu'à nos projets et ceux-ci vont maintenant zoomer au fur et à mesure que nous les atteignons. Félicitations pour avoir atteint la fin du projet de cours. Tout d'abord, n'hésitez pas à l'étendre et à le faire vôtre. Une fois que vous serez satisfait de votre projet, vous serez impatient de le mettre en ligne et c'est ce que nous allons examiner ensuite. 24. Hébergement: Une fois que vous aurez fini de perfectionner votre portefeuille, je suis sûr que vous serez impatient de le mettre en ligne pour que le reste du monde puisse le voir. Malheureusement, il y a une enquête vraiment rapide et facile pour faire cela appelé Netlify. Vous pouvez aller sur netlify.com où vous devrez vous inscrire et créer un compte. Je suis déjà inscrit à ceux-ci, mais si vous n'avez pas de compte, allez-y et créez-en un maintenant. Vous pouvez vous inscrire auprès de différents fournisseurs, tels que votre adresse e-mail et votre mot de passe ou un service tel que GitHub. Vous devrez peut-être également vérifier l'e-mail. Je l'ai déjà fait, et j'avais des codes-barres dans Netlify et annuler tous les démarrages rapides qui peuvent apparaître. Une fois que vous avez fait cela, vous serez redirigé vers une page qui ressemble à ceci, et tout ce que nous avons à faire est de glisser sur le dossier du projet. Si votre projet est stocké sur GitHub, vous pouvez également l'utiliser. Ce que vous voulez faire est de faire glisser sur les projets de portefeuille dans cette section de téléchargement ici. Après une courte période de temps, nous obtenons ensuite un lien de test que nous pouvons utiliser, que nous pouvons voir juste ici. Cela va générer une URL que vous pouvez cliquer sur ou copier puis coller dans le navigateur pour afficher. Cela nous donnera alors l'occasion de tester nos sites et de voir à quoi il ressemble sur un serveur web en direct. Malheureusement, le nôtre semble être exactement le même. Nous pouvons également tester la page des projets. Vérifiez qu'il n'y a pas d'erreurs ici aussi, faites défiler vers le bas et tout va bien sur cette page aussi. Nous pouvons également faire un domaine personnalisé qui est n'importe quel chemin avant le netlify.com. Retour au tableau de bord, cliquez sur « Paramètres du domaine », puis sur « Options », vous pouvez également modifier le nom du site. Celui-ci est généré de manière aléatoire et vous pouvez changer cela pour être quelque chose de plus mémorable si vous préférez. Appuyez sur « Enregistrer », puis cela prendra effet. Cela aura toujours le netlify.com sur les extrémités. Cependant, si vous avez un nom de domaine que vous voulez utiliser, si presque vous possédez déjà ou que vous pouvez acheter via Netlify. Il y a aussi un guide rapide pour le faire, et vous pouvez cliquer sur ce lien pour en savoir plus. Pour l'instant, c'est à quel point il est rapide et facile de commencer avec Netlify, et de pousser votre site sur un serveur web en direct vous laissant avec une URL en direct que vous pouvez maintenant partager avec le reste du monde. 25. Réflexions finales: J' espère que vous avez aimé suivre ce cours autant que j'ai aimé le construire. Merci beaucoup et j'espère que vous avez acquis de nouvelles compétences précieuses, que vous pourrez utiliser à bon escient à l'avenir. J' ai aussi hâte de voir ce que vous allez créer. N' hésitez pas à partager votre projet aussi. 26. Suivez-moi sur Skillshare !: Énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare et aussi de me suivre pour toute mise à jour et aussi d'être informé de tout nouveau cours à mesure qu'ils deviennent disponibles. Merci encore une fois, bonne chance, et j'espère que je te verrai dans un futur cours.