Développement web réactif : HTML et CSS pour les concepteurs de sites Web

1. Introduction: Bonjour et bienvenue au développement web responsive, HTML et CSS pour les concepteurs Web. Je suis Chris, un développeur Web indépendant et enseignant ici sur SkillShare.com. Dans ce cours, je vais vous apprendre comment passer du design au développement quand il s'agit de créer des sites Web. La première section du cours portera sur les différences entre la conception web et le développement web. Nous allons passer en revue le design réactif, parler de code et terminer avec un peu de référencement. Dans la deuxième section, nous allons prendre un design prêt à l'emploi créé dans Photoshop et le transformer en une page web réactive. Malgré le titre, cette classe est configurée pour bénéficier à la fois aux concepteurs Web et aux développeurs Web. Pour les concepteurs Web, vous apprendrez comment vos conceptions se traduisent en sites Web de travail afin que vous puissiez mieux communiquer avec les développeurs ou créer vous-même vos propres designs. Pour les développeurs Web, vous apprendrez à travailler avec les concepteurs et créer une copie précise de leurs conceptions en HTML et CSS. Que vous soyez un développeur souhaitant travailler avec un concepteur, un concepteur souhaitant travailler avec un développeur ou simplement quelqu'un qui souhaite développer des compétences dans les deux domaines. Ce cours est pour vous. Donc, si vous êtes prêt à commencer, cliquez sur la vidéo suivante et je vous verrai à l'intérieur. 2. Design ou développement - Réactivité: Avant de commencer à créer notre site Web, il est important de comprendre les différences entre conception Web traditionnelle et le développement web frontal. La principale révélée dans le titre de cette classe est la réactivité. Dans le contexte du web, Responsive Web Design and Development signifie que la mise en page et la conception de votre page Web répondent aux dimensions de la fenêtre dans laquelle elle est contenue. Souvent, nous pensons à Responsive Web Design en termes de trois appareils les plus courants, un ordinateur portable ou de bureau, une tablette ou un téléphone mobile. Certains concepteurs peuvent confondre la version mobile d' un site Web particulier avec un site Web différent. Mais généralement, le site mobile est tout simplement le même que la version de bureau, mais il est fait pour être réactif de sorte qu'il s'adapte à cette taille d'écran plus petite. Vous voyez, alors que la tablette mobile et le PC sont les principaux exemples, ils représentent simplement différents points sur un spectre de fluides. Si je prends la fenêtre de mon navigateur ici, par exemple, vous pouvez voir que la page Web répond déjà au changement de largeur d'écran. Sur Google Chrome, je peux simuler la largeur et la hauteur d'écran d' un téléphone mobile en ouvrant mes outils de développement et en cliquant sur la barre d'outils de basculement de l'appareil. Maintenant, vous pouvez voir la même version du site Web, mais avec un design adaptatif qui mettra à jour à n'importe quelle taille d'écran. Cela peut être une zone de confusion entre les concepteurs et les développeurs, car les concepteurs créent généralement leurs conceptions avec une toile de jeu. À tout le moins, les concepteurs créeront une version de bureau du site Web. Mais idéalement, les développeurs devraient recevoir des conceptions distinctes pour les trois tailles d'écran communes, PC, tablette et mobile. dehors de ces dimensions d'écran particulières, il appartient au développeur de s'assurer que la mise en page de la page Web reste fluide et que tous les problèmes qui apparaissent entre certaines tailles d'écran sont résolus. Pour les concepteurs, ils peuvent généralement utiliser un outil comme Adobe InDesign ou Photoshop pour créer des sections et insérer du texte et des images. Une façon de conceptualiser cela est d'avoir chaque élément représenté par une boîte. Ce concept se traduit plutôt bien dans le développement web, sauf que les boîtes vont changer de dimensions ou changer position en fonction des tailles d'écran différentes. Bien sûr, ces éléments ou boîtes, si vous voulez, sont déterminés par la façon dont HTML et CSS, et c'est exactement ce que nous allons obtenir dans la prochaine leçon. 3. Conception et développement - Programmation et présentation visuelle: Dans la leçon précédente, nous avons parlé de la façon dont les concepteurs créent généralement conceptions Web sur un Canvas statique pendant que dans le développement web, tailles d'écran et les éléments jusqu'à fluidifier, ce qui signifie que leurs dimensions et leur position peuvent changer à tout moment, ce comportement est rendu possible via HTML et CSS. J' ai largement couvert le HTML et le CSS dans ma classe précédente, Web Development Fundamentals, HTML et CSS, mais pour ceux d'entre vous qui ne veulent pas approfondir ces sujets, HTML est un langage de balisage qui donne la structure au web pages et applications sur le Web. CSS est le langage de feuille de style utilisé pour décrire la présentation du HTML. Lorsqu' un non-développeur regarde un site Web, c'est ce qu'il peut voir, mais pour créer ce que vous voyez ici, vous devez écrire ce que vous voyez ici. Ceci est HTML et ceci est CSS. Nous allons aller sur la façon d'utiliser chacun de ceux-ci dans la section pratique de cette classe, mais pour l'instant, le point que je fais est que le web, comme nous le savons, il, est composé de contenu contenu dans les balises HTML, nous avons des règles appliquées à partir de CSS, qui leur donnent du style et de la mise en page. Ceci est différent de la façon dont un concepteur créerait un balisage de page Web statique. Par exemple, en utilisant un outil comme Photoshop, ils choisissent parmi une variété de contrôles interactifs, puis ces sélections seront stockées dans un fichier Photoshop, dont vous ne verrez jamais le code interne. Maintenant, cette information n'est pas destinée à vous confondre, mais simplement à mettre en lumière une différence majeure entre Web Design et Développement. En tant que développeur, j'ai eu des problèmes dans le passé, avec la communication avec des clients qui ne comprennent pas le langage technique. Par exemple, les couleurs, les couleurs dans le développement Web sont représentées par des codes hexadécimaux, des codes RGBA, des codes HSLA ou un ensemble d'étiquettes reconnues comme le blanc ou le noir. Idéalement, les concepteurs devraient permettre aux développeurs de savoir facilement quelles couleurs utiliser en étant explicites sur la couleur exacte requise. Un autre exemple est les dimensions. Semblable aux couleurs, il serait idéal pour les concepteurs de transmettre des dimensions spécifiques aux développeurs, plutôt que de compter sur le développeur pour pouvoir le ramasser visuellement. Dans le développement Web, les unités les plus courantes sont les pixels pour les hauteurs et les largeurs absolues, et EM ou pourcentage pour les hauteurs et largeurs relatives. Dans ces deux exemples, concepteurs peuvent généralement aller dans leur logiciel et noter les couleurs ou dimensions spécifiques utilisées, mettre cela à la disposition du développeur. L' exception étant, bien sûr, les largeurs et les hauteurs relatives. Mais ne vous inquiétez pas si vous êtes un peu confus par tout ce discours technique dans la section pratique de ce cours, nous allons réellement plonger et traduire un design en une page web réelle, alors restez à l'écoute pour cela. Jusque-là, nous avons juste une considération de plus pour aller plus et c'est SEO. 4. Conception et développement - SEO: Le dernier point sur le développement web que les concepteurs devraient considérer est le référencement. SEO est synonyme d'optimisation des moteurs de recherche. Dans le développement web, nous devrions nous préoccuper avant tout d'un côté du référencement. Référencement à froid sur page. Alors que le référencement sur page comprend un grand nombre de facteurs différents aux zones communes qui peuvent causer des problèmes sont les images et les en-têtes. Couvrons d'abord les images. Les concepteurs peuvent être utilisés pour exporter des images et des documents de la plus haute qualité possible, mais ce n'est pas idéal pour le web. Lors de la création de sites Web, les images ne doivent être aussi grandes qu'elles le doivent. La raison pour laquelle est sur la vitesse de la page. Lorsque vous liez une image en HTML, vous pouvez définir une largeur et une hauteur même dans un document CSS ou directement dans l'élément. Ce code est exécuté chaque fois que le site Web est accessible qui signifie que l'image à cette adresse est chargée en entier à chaque fois. Bien sûr, il y a quelques exceptions à cela, mais c'est le comportement par défaut. Le fait est si vous prenez une image et la redimensionnez à une taille plus petite dans votre code, vous gaspillez simplement des données et plus l'image est grande, plus la page prendra de temps à charger. C' est pourquoi il est important pour le concepteur d'exporter les images à la résolution la plus élevée possible. Ou le développeur calcule la résolution la plus élevée requise et redimensionne les images en conséquence. Ensuite, texte et en-têtes. Quand il s'agit de texte, votre choix de balises est important pour le référencement sur page, nous entrerons dans les balises lorsque nous commencerons à travailler directement avec HTML. Mais pour l'instant, il est important de noter que l'utilisation des bonnes balises ne se résume pas simplement à son apparence. En termes de balises de titre, parfois je vois les développeurs faire l'erreur d' utiliser qui a jamais la taille de police prévue. Mais si vous regardez dans le système de numérotation des en-têtes en HTML, vous constaterez que la balise h1 est censée définir le titre le plus important et h6, le titre le moins important. Les concepteurs Web et d'autres non-développeurs pourraient ne pas comprendre ce concept. Il est donc important de suivre la bonne structure des en-têtes et mettre à jour les styles de chaque balise si leur apparence n'est pas correcte. Enfin, quand il s'agit de texte dans les images, essayez d'éviter cela dans la mesure du possible. Les images ne sont pas réactives et les moteurs de recherche ont du mal à lire le texte sur eux, plutôt que le texte réel sur la page. Dans le passé, l'utilisation d'images pour obtenir une mise en page ou un style particulier aurait pu être essentielle. Mais de nos jours, HTML et CSS contribuent beaucoup à réduire tout effet désiré. C' est tout pour la section théorique de cette classe. Dans la section suivante, nous allons devenir pratique et nous construire une page web à partir d'une maquette créée dans Photoshop. Je te vois sur la prochaine vidéo. 5. De PSD au HTML - Avant de commencer: Donc, avant de commencer, il est important que nous parlions des connaissances et des outils requis. En termes de logiciel, vous allez avoir besoin juste d'un navigateur web et l'éditeur de code et pour ceux d'entre vous qui sont nouveaux dans le développement web, c'est ce que ces deux principaux. Un navigateur n'est pas seulement ce que vous utilisez pour naviguer sur le Web, mais aussi ce que vous utilisez pour afficher des documents HTML sur votre ordinateur. Un éditeur de code est ce que vous allez utiliser pour écrire votre code et le modifier. Ces deux sont essentiellement les outils essentiels nécessaires à l'une de mes classes de développement web. Vous avez certainement besoin d'un endroit pour écrire du code et d'un endroit pour le voir. En outre, une copie d'Adobe Photoshop est souhaitable, mais pas essentielle. Dans la section suivante, je vais utiliser Photoshop pour examiner la conception du site Web, inspecter les couleurs et les polices, et déterminer le remplissage et les marges. Cependant, si vous n'avez pas Photoshop, vous pouvez toujours suivre. Enfin, en termes de connaissances, je vous recommande de connaître déjà les bases du HTML et du CSS. Pour une connaissance fondamentale du HTML et du CSS, je vous recommande de prendre ma classe Skillshare précédente, les fondamentaux de développement web, HTML et CSS. Mais si vous êtes à court de temps, les sections HTML et CSS de mon premier cours, comprenant le développement web, un guide des débutants sur le web devrait suffire à fournir une introduction de base dans ces deux langues. Autre que cela, je vais fournir les fichiers nécessaires pour que vous puissiez terminer la construction dans la leçon suivante. 6. De PSD au HTML - Configuration: Donc maintenant, vous devriez avoir un éditeur de code, un navigateur Web, et même Photoshop prêt ou comme alternative, tout logiciel qui lit des documents. Pour prendre une conception pour une page Web et la transformer en une page Web réelle, vous aurez besoin de la maquette réelle de la page Web, images requises et des polices, couleurs et marges requises. Pour ceux d'entre vous qui ne travaillent pas sur un fichier Photoshop, vous aurez besoin de votre design et de vous fournir les images, les couleurs spécifiques, les noms des polices souhaitées et, si possible, les tailles de police et les marges entre les éléments. Dans ce cas, je vous fournirai cette information. Dans le cas où vous avez Photoshop et que le concepteur vous fournit un fichier Photoshop, vous serez en mesure de récupérer toutes ces informations du fichier Photoshop lui-même. C' est ce que je vais faire dans cette classe. Pour commencer, nous devons aller à une adresse dans notre navigateur. J' ai stocké les fichiers de projet pour ce projet sur GitHub. Donc, vous avez juste besoin d'aller à github.com/Christopherdodd/SkillShare. Une fois que vous arrivez à cette page, vous verrez un dépôt ici, et juste ici est Cuda Project.zip. Cliquez dessus, puis ici, cliquez sur « Télécharger ». Je vais mettre le mien sur le bureau. Donc, je vais sélectionner Bureau et cliquez sur « Enregistrer ». Celui-ci est un fichier zip bien sûr, donc nous allons devoir aller dans notre Finder ou l'Explorateur Windows, si vous utilisez Windows. Allez dans Desktop et développez le projet. Nous pouvons nous débarrasser du fichier zip à ce stade. Lorsque nous ouvrons le projet Cuda, il y a deux dossiers, un est les fichiers de conception. Nous avons le fichier Photoshop ici comme indiqué par the.psd. Donc, si vous n'avez pas Photoshop, ne vous embêtez pas à l'ouvrir. Ici, nous avons le PDF qui représente le design, donc si je l'ouvre, vous pouvez voir le design que nous allons faire aujourd'hui. C' est ce que nous allons être en mesure de faire à la fin de cette classe en utilisant HTML et CSS. Bien sûr, il y a aussi quelques images ici, et c'est là que notre dossier d'actifs entre en jeu. Dans notre dossier d'actifs, nous avons ces images à la disposition de notre projet. Si vous n'utilisez pas Photoshop, et que vous avez juste la maquette pour démarrer, vous aurez besoin des couleurs et polices spécifiques. Je les ai mis dans un document PDF pour vous, également dans un document RTF, si vous voulez aller et copier coller, vous devriez pouvoir copier et coller avec la plupart des navigateurs PDF de toute façon. Donc, si j'ouvre cela, vous pouvez entrer et copier des codes de couleur et les coller directement dans votre projet. Maintenant que nous avons notre design prêt, il est temps de commencer à coder ce projet, et c'est ce que nous allons faire dans la prochaine vidéo. 7. De PSD au HTML - Structure: Maintenant que nous avons tous nos fichiers de conception prêts, nous pouvons réellement aller de l'avant et commencer à construire ce projet en HTML et CSS. Dans cette leçon, nous allons poser la structure en utilisant HTML. Ensuite, dans les leçons suivantes, nous allons utiliser CSS pour le styliser. Vous verrez bientôt comment le projet se réunit avec CSS alors qu'avec HTML seul, il ne ressemblera pas à ceci. J' ai donc mon fichier Photoshop ouvert devant moi mais, bien sûr, comme je l' ai mentionné précédemment, si vous n'avez pas Photoshop, vous pouvez toujours suivre dans notre dossier Projets ici. J' ai la maquette en PDF. Donc ce que je vais faire en utilisant le fichier Photoshop, et si vous avez Photoshop n'hésitez pas à suivre. Évidemment, ce que je peux faire avec le fichier Photoshop est en fait aller et inspecter les éléments. Donc, je peux aller ici et je peux voir que la police est Titilium Web, que le poids de la police est en gras, que la taille de la police est de 42,16 pixels et si je regarde ici, il semble être blanc mais ce n'est pas un blanc pur. Il est proche du blanc mais pas pur. Donc, ce que j'ai fait, c'est que si vous allez à nouveau dans le dossier et que vous cliquez sur Couleurs et polices, ce que j'ai fait, c'est que je vous ai dit explicitement ce que tous ces différents éléments ont en termes de tailles de police, de poids et de couleurs. Espérons que, et c'est une leçon pour les concepteurs et les développeurs, les concepteurs devraient fournir ceci pour développer car nous n'avons pas Photoshop, et les développeurs qui n'ont pas Photoshop devraient demander cette information aux concepteurs. Parfois, les concepteurs s'attendent à ce que les développeurs jettent un coup d'oeil à cela et soient en mesure de comprendre la police juste par taille ou de déterminer la taille ou le poids de la police, ce qui est tout simplement impossible. Alors assurez-vous que si vous êtes le développeur ou le concepteur, ces détails ont été écrits ou sont disponibles dans le fichier Photoshop, d'accord ? D' accord, donc l'autre chose que j'ai mentionnée précédemment, à part les couleurs et les polices, c'est les dimensions. Même en utilisant un outil gratuit comme Aperçu, vous pouvez toujours inspecter les cotes. Vous pouvez cliquer sur la sélection rectangulaire ici et faire glisser une sélection, et il y a en fait un outil dans Preview si vous utilisez Mac ou je ne sais pas ce que vous utiliseriez dans PC, mais vous pouvez réellement aller et trouver Inspector. Maintenant que je fais glisser, donc je dois faire la sélection à nouveau. Vous pouvez voir ici, je reçois une largeur et une hauteur pour cette sélection. Donc, il est environ 145 entre ce logo et le début de ce texte ici. Donc c'est vraiment tout ce qu'on a besoin de savoir. Le reste, nous pouvons choisir visuellement, mais des choses comme des dimensions spécifiques, tailles de police spécifiques, familles de polices, poids de polices, certains d'entre eux est souvent difficile à identifier en tant que développeur. Il est donc important d'obtenir ces informations où qu'elles se trouvent dans un document comme celui-ci ou d'obtenir le fichier Photoshop complet. Très bien, donc sans plus tarder, commençons à construire notre HTML. Je vais ouvrir ATOM qui est mon éditeur de code. Comme vous pouvez le voir ici, j'ai eu un projet précédent ouvert, mais je vais juste fermer ça. Ce que je vais faire est de créer un nouveau fichier. Je vais ouvrir une nouvelle fenêtre dans Google Chrome qui est mon navigateur préféré. Ce que je vais faire, c'est que je vais aller vers [inaudible] HTML. C' est là que j'obtiens mon modèle HTML de niveau de base à partir de. Donc je vais copier ça, et je vais le mettre ici. Tout comme dans mes autres cours sur HTML et CSS, je vais creuser dans mon fichier Project et je vais appeler ce cuda.html. Comme nous ne construisons qu'un fichier HTML dans cette classe particulière, je le nomme juste Cuda. Mais si je construisais plusieurs pages, j'appellerais cet index pour la page d'accueil. Juste une note de côté là. Donc, une fois que j'ai enregistré ce document, j'ai toutes les belles couleurs et je suis aussi capable d'ouvrir cela dans mon navigateur. Donc je vais déplacer ça de l'autre côté. Je vais faire glisser ça dans mon navigateur et, voilà, nous avons accès à notre projet maintenant. Si je les mets côte à côte, je peux voir le code et je peux voir la sortie ici. D' accord, donc la première chose que je vais vouloir changer, c'est le titre Cuda. Qu' est-ce que Cuda fait ? Je vais lui donner plus de mots clés, des sites Web impressionnants et des applications mobiles, allons-y avec ça, des sites Web impressionnants et des applications mobiles. Maintenant, juste un avertissement avant d'entrer là-dedans, ça pourrait prendre un peu de temps pour vous envelopper la tête autour de ce que je vais faire. Ce n'est pas un cours de base HTML et CSS, donc je vous recommande certainement d'aller suivre ces cours si vous ne l'avez pas déjà fait. Mais ce que je suis sur le point de faire, c'est d'établir la structure qui, je crois, aurait du sens pour ce design. Il y a plusieurs façons de le faire, et vous pourriez ne pas l'obtenir correctement la première fois. Comme vous l'avez mis en CSS, vous devrez peut-être modifier votre HTML. Tout ça va bien. J' ai déjà créé ce projet, donc j'ai une bonne compréhension de ce que HTML a fonctionné et ce qui n'a pas fonctionné, et j'ai dû faire quelques changements. Alors gardez ça à l'esprit au fur et à mesure que nous traversons. Une partie de mon processus de pensée peut ne pas être immédiatement claire pour vous, mais, encore une fois, cela vient de mes connaissances fondamentales et mon expérience dans la construction de projets similaires. Donc, oui, en regardant comme je le fais et si vous avez des questions, hésitez pas à poser dans la discussion. C' est ma petite clause de non-responsabilité avant qu'on commence. En fait, passons à travers et construisons ceci. Ce que je vois ici, c'est trois sections, d'accord ? Donc si j'ouvre ça, il y a cette section ici qui est représentée par cette boîte violette. Il y a cette section ici qui est la jolie boîte verte. Vous avez cette section qui est belle et bleue, et en bas est en fait une quatrième section, mais c'est plus un pied de page. Vous avez donc la Section 1, la Section 2, la Section 3, et un pied de page. Comme vous pouvez le voir, l'en-tête, que nous pouvons considérer cette partie ici, fait partie en fait de la première section. Donc je vais imbriquer ça dans la Section 1, d'accord ? L' autre chose que je remarque tout de suite, c'est qu'il n'y a rien en dehors des limites de ces deux lignes de grille, ok ? C' est quelque chose de commun dans le développement web appelé un conteneur. Maintenant, tout ce que nous mettons sur la page, si c'est une taille d'écran assez grande, il ne s'étend pas à toute la largeur de l'écran. Il se trouve dans un conteneur d'une largeur maximale de, eh bien, regardons juste et voyons quelle est la largeur maximale de ceci. Vous pouvez voir ici je fais juste glisser mon outil de sélection d'un côté à l'autre. Donc, ce que nous allons faire dans notre HTML, c'est d'avoir des conteneurs intégrés dans chaque section de 1140 et vous verrez que cela se passe dans la pratique très prochainement, ok ? Cela pourrait se transformer en une longue leçon, donc je pourrais le diviser en deux, mais commençons tout de suite. Donc je vais m'en débarrasser, et je vais mettre ça en retrait, avoir plus d'espace dans notre document, j'aime beaucoup d'espace blanc. Ce que nous allons faire est la première section donc je vais mettre en retrait, créer une section. Je vais donner à cette section une pièce d'identité de la Section 1, très inventive, je sais. Puis fermez cette balise. Si vous êtes nouveau au format HTML, vous avez besoin d'une balise d'ouverture et de fermeture, et vous allez avoir du contenu entre les deux. D' accord. Alors nous avons deux autres sections comme ça. Donc je vais nommer cette section 2, section 3 et ensuite on a un pied de page. Voici donc les éléments de haut niveau de notre page web, trois sections et un pied de page. Maintenant, dans cette section particulière, ce que je vais faire est de créer un conteneur, et c'est juste un div avec une classe de conteneur. Cela permettra de s'assurer que tout le contenu à l'intérieur ne dépasse pas 1140 pixels. Je vais juste copier et coller cela dans tout, y compris le pied de page parce que comme vous pouvez le voir, le pied de page est également dans ces limites. D' accord. Maintenant, nous avons une section et un conteneur. La prochaine chose que je veux est un en-tête. Donc, pour créer cet en-tête, je vais ouvrir et fermer les balises d'en-tête, et la première chose dans l'en-tête est une image, donc img-src. C' est là que je peux cibler un logo. Donc, si je vais dans un répertoire, nous pouvons voir des actifs ici et ensuite nous pouvons voir le logo là-bas. Donc assets/logo.png. Maintenant, à tout moment, vous pouvez réellement aller recharger la page et voir ce que vous avez en train de se passer. Comme vous pouvez le voir ici, l'image ne traverse pas. Je me demande pourquoi. Alors allez inspecter ici. L' image est en fait à travers, mais elle est blanche. Donc, parce qu'il y a un fond blanc et qu'il y a une image blanche, vous ne pouvez pas vraiment le voir. Pour ceux d'entre vous qui ne le savent pas, c'est l'inspecteur et je suis capable de regarder n'importe quelle page Web et d'inspecter ce qui se passe en temps réel. Donc c'est vraiment cool si tu n'as pris aucun de mes cours précédents. Donc ce que je vais faire parce qu'on va avoir un tas de petits problèmes comme ça. Je vais juste construire le HTML en premier, et ensuite nous allons regarder à quoi il ressemble en tant que document purement HTML, puis nous allons construire le CSS et vous aurez une idée de pourquoi nous avons certainement besoin de CSS. Donc on a l'image. Ce que je vais faire maintenant, c'est faire un nav. Donc, vous avez une navigation d'ouverture et de fermeture, et à l'intérieur je vais faire une liste non ordonnée. Ensuite, pour les éléments de liste leur LI, Donc, je vais en créer un, puis dupliquer. Donc, le premier est à la maison, et l'autre chose à propos de ces liens n'est pas seulement qu'ils listent des éléments là, bien sûr, des liens, et pour désigner un lien, nous avons juste besoin d'utiliser la balise a. Donc, lorsque vous créez des liens et que vous n'avez pas encore la page vers laquelle lier, souvent, vous utilisez simplement un hachage, et vous devez la fermer. On y va. Maintenant, nous pouvons copier ceci, et nous pouvons juste changer le nom. Donc à la maison, et si vous vous demandez pourquoi je ne le fais pas dans les capitales, nous pouvons réellement le faire en CSS, et cela va en fait juste pour nous rendre les choses plus faciles. Quand nous écrivons notre code, nous n'avons pas à le regarder en majuscules, et si nous voulions le changer pour une raison quelconque pour ne pas les capitales après, nous pourrions simplement changer un style et cela reviendrait en arrière. L' autre chose ici est que le premier lien est actif. Il y a une boîte autour. C' est ce que cette boîte va vouloir dire. Vous l'auriez vu sur d'autres sites Web. Lorsque vous êtes sur la page active, il y a une sorte d'indication, et dans cette conception particulière, il y a une boîte autour de l'emplacement où vous vous trouvez. Nous sommes sur la page d'accueil pour le moment donc il y a une boîte autour de la maison, donc la façon la plus simple de le faire dans la convention habituelle est d'ajouter une clause à l'élément de liste d'actif. Donc maintenant, nous avons notre navigation et notre image dans un en-tête. Maintenant, nous pouvons descendre et créer cette section suivante, qui est le titre principal et l'appel à l'action. Je vais lui donner une carte d'identité, j'ai réfléchi longtemps et dur à ce sujet, mais je ne pouvais pas trouver un meilleur nom, titre principal et CTA. Je sais que c'est long et probablement pas le meilleur nom, mais c'est le plus descriptif. Donc, je vais avec ça. Maintenant, cette rubrique particulière ici, c'est l'en-tête de haut niveau de notre page Web. Donc c'est h1 que nous devons utiliser. L' autre bonne chose à propos d'avoir Photoshop est que je peux directement copier le texte du fichier Photoshop dans mon document HTML. La dernière chose autre que le titre est bien sûr le bouton, et en HTML, si vous utilisez la balise button, vous allez obtenir des styles qui semblent assez laid. Je vais vous montrer ce que je veux dire par là. Je vais changer ça en bouton, puis je dirai travailler avec nous. Vous verrez ici que c'est le format standard pour un bouton. Il est donc plus facile de styliser parfois si vous faites simplement cela un lien et ensuite le styliser comme un bouton. Donc, il va probablement faire un lien vers une autre page de votre site web de toute façon, donc nous voulons créer cela comme un lien de toute façon. Je vais juste donner un cours à ça parce qu'il y a en fait deux de ces boutons, et nous allons vouloir les coiffer de la même manière. Je vais donner un cours à ça, qu'on puisse le cibler de gros bouton. C' est à peu près la première section. Maintenant, nous allons à la deuxième section, identifions quels sont les éléments. Ce que nous avons est cette section d'en-tête avec un titre, une ligne et un paragraphe, puis nous avons ces quatre colonnes avec une icône, un en-tête et un paragraphe à nouveau. La première chose que je vais faire, c'est que nous avons déjà notre conteneur ici. Je vais créer cette première petite section, que je classe comme section de titre. En fait, n'utilisons pas la section parce que nous utilisons la section ici. Appelons ça une boîte de titre, boîte est un peu différente, donc je ne la confonds pas avec la section. Dans la boîte de titre. Comme je l'ai dit, nous avons un titre, et nous avons déjà un titre de premier niveau, donc nous allons devoir aller plus loin dans la liste et utiliser la rubrique 2, je vais taper les services que nous fournissons. Encore une fois, je vais attendre jusqu'à la fin pour changer tout cela en capitales parce que nous pouvons le faire avec un style. Ensuite, nous avons cette ligne ici, et généralement pour faire une ligne de base en HTML, tout ce que nous pouvons faire est juste d'utiliser cette règle horizontale de balise, mais il sera difficile de le styliser exactement comme ceci. Donc, ce que je vais faire est d'avoir un div, lui donner une classe de ligne, et ensuite nous pouvons utiliser CSS pour lui donner tous ces styles qui le feront ressembler à une ligne. Ensuite, en dessous, nous aurons juste une balise de paragraphe, et comme je l'ai fait avant, je peux juste sélectionner tout ce texte et le coller directement dans. Donc nous avons notre boîte de titre ici, et maintenant nous pouvons commencer à construire nos colonnes. Donc ce qu'il nous faut d'abord, c'est une section tout pour cela. Ce que ces choses sont généralement appelées Blurbs. Donc, je vais appeler la chose qui les contient tous comme une ligne de flou, puis à l'intérieur de cela je vais créer quatre divisions avec la classe de blurb. Avant de dupliquer ça quatre fois, ces blurbs sont à peu près la même chose. Donc, ce que je vais faire est de construire l'un d'entre eux d'abord, puis de copier et de coller. Le premier, nous avons une image. Si je vais dans les actifs et alors quel est le nom de celui-ci ? Indicateur icon.png. Un petit hack c'est que vous pouvez y aller, cliquer pour essayer de renommer, et puis en fait juste copier le nom, pour que nous puissions le mettre là dedans. Ensuite, nous allons à un autre titre et je vais en faire un titre 3 parce que nous descendons de la hiérarchie, et je vais appeler ça branding. Ensuite, je vais mettre le paragraphe, et vous avez un blurb. Créez de l'espace ici, et dupliquons cela trois fois. Je vais m'étendre pour celle-là aussi. Maintenant, nous devons passer par et changer seulement l'adresse de l'icône, le titre et le texte. Pour revenir à ici, le prochain sera l'icône de crayon. Donc je vais juste copier et coller ce nom de fichier, et nous allons l'appeler design. Je pourrais avancer rapidement ici parce que je fais essentiellement la même chose pour les quatre. Très bien, à la fin de tout ça, nous avons notre deuxième section. Nous avons notre boîte de titre avec un titre, une ligne et un paragraphe. Ensuite, nous avons notre rangée de blurbs avec quatre blurbs chacun avec une image, un titre et un paragraphe. Donc, revenons juste en arrière et regardons ces côte à côte. Vous pouvez voir comment le HTML se traduit par les éléments que nous avons identifiés sur la conception elle-même. Maintenant, nous avons la troisième section pour entrer en contact. Ce sera le plus délicat parce que les formes sont toujours délicates avec un design réactif. Donc, comme les derniers, je vais descendre ici, et je peux en fait copier et coller cette boîte de titre parce que c'est la même chose. Je peux changer l'en-tête pour entrer en contact, puis je peux copier le texte du paragraphe et le remplacer. D' accord, les boîtes de tittle sont déjà dedans. C' est génial. Maintenant, ce que je vais faire est de créer un div pour le formulaire. n'y a qu'un seul formulaire de contact, donc je vais lui donner un identifiant de formulaire de contact. Puis à l'intérieur, je vais ouvrir un formulaire. C' est ce qui fait fonctionner un formulaire. Vous devez le mettre dans un formulaire. Ensuite, ce que je vais faire, ce qui pourrait ne pas avoir sens parfait en ce moment, mais quand nous commencerons à le styliser avec CSS, est de créer des lignes pour chacune de ces différentes lignes dans le formulaire. Ça va juste le rendre plus facile à coiffer. Nous pouvons utiliser le style flex, que je vous montrerai dans une vidéo plus tard. Je vais appeler ça une ligne de formulaire. Je veux trois de ces lignes de formulaire. Un pour le nom et l'email, un pour le message et un pour le bouton. Maintenant, nous avons trois lignes de formulaire. Le premier, nous allons mettre deux entrées. Premièrement, type d'entrée, texte, va lui donner un nom de « nom » et un espace réservé de « votre nom ». Le texte qui va dans cette zone est appelé un espace réservé au cas où vous ne l'auriez pas réalisé. C' est tout ce dont nous avons besoin. Ensuite, nous pouvons aller et créer une entrée pour e-mail. Votre e-mail sera l'espace réservé pour celui-ci. Maintenant ici, cette zone de texte est en fait pas une balise d'entrée, croyez-le ou non, donc je suis arrivé à faire zone de texte.Comme un attribut sur la zone de texte, nous sommes capables de dire espace réservé. Par souci d'exhaustivité, je lui donnerai aussi un nom, qui sera un message. Le dernier, nous allons faire un autre gros bouton, mais cette fois, il doit être une entrée pour que le formulaire puisse être soumis. Nous allons mettre dans un autre type d'entrée de soumettre, classe de gros bouton parce qu'il va être formaté de la même manière, et la valeur déterminera ce qui va dans le contenu réel des boutons. Dans ce cas, ce sera « envoyer un message ». Très bien, je suis sûr que cette leçon a été longue mais supporte un peu plus avec moi parce qu'il ne nous reste qu'une section, et c'est la section pied de page. Donc encore une fois avec la section pied de page, c'est similaire à la section navigation car nous avons une liste de liens. Mais je ne l'appellerais pas nécessairement un nav parce qu' il ne navigue pas vers d'autres endroits sur le site. C' est en fait un lien vers des sites de médias sociaux externes. Sémantiquement, je vais juste appeler ça un div au lieu d'un nav pour contenir tous ces liens. Je vais donner à cette div une classe de liens de pied de page. Maintenant, comme je l'ai mentionné, c'est une liste, donc je vais créer une liste non ordonnée et ensuite avoir les différents éléments. Tout comme celui ci-dessus, ce sera des listes avec des liens à l'intérieur d'eux. Donc très rapidement, et je pourrais avancer rapidement à travers un peu de ça. Je vais mettre les liens. D' accord. La dernière étape, comme vous pouvez le voir ici, est Twitter est en bleu. Je suppose que c'est pour le lien actif. Je ne sais pas comment cela pourrait être un lien actif où si vous n'êtes pas réellement sur la page twitter, mais nous allons le traiter de la même manière et nous allons lui donner une classe d'actifs. Fondamentalement, l' un de ces liens avec une classe d'actif va avoir cette couleur différente. Tout comme ici, n'importe lequel de ces liens avec une classe d'actifs va avoir cette boîte autour d'elle. C' est la façon habituelle de le faire, alors on s'en tient à cette convention. Douce. Donc c'est à peu près les gars. Pour le HTML, j'ai déjà mis beaucoup de classes, mais aucune de ces classes n'est liée à CSS. Jetons un coup d'oeil à ce que cela ressemble dans le navigateur. J' ai juste besoin de rafraîchir ma page, et walah regarder ce beau design. Donc les gars ce que vous regardez en ce moment est HTML sans aucun style que ce soit. n'y a pas de styles en ligne, il n'y a pas de fichier CSS, et c'est à ça qu'il ressemble. Comme vous pouvez le voir, CSS va faire tout le levage lourd pour nous quand il s'agit de transformer ce que c'est en cela. D' accord, c'est pourquoi ce n'est qu'une leçon, mettre le HTML, et ensuite le reste des leçons sera sur CSS. Ce que nous allons faire, c'est nous allons le diviser section par section. Nous allons réellement créer des règles de style. Ensuite, vous verrez cette structure se réunir et regarder assez près de ce que nous avons ici. J' espère que je ne t'ai pas perdu dans cette vidéo. Désolé si c'était un peu long. J' espère vous voir dans le prochain où nous commencerons à faire en sorte que cela ressemble à notre design ici. Je te vois dans la prochaine vidéo. 8. CSS - Section 1: D' accord. Dans la dernière leçon, nous avons présenté la structure HTML de notre nouvelle page Web. Comme vous pouvez le voir, HTML fait un peu pour obtenir le contenu sur la page, mais nous avons besoin de beaucoup de CSS pour le faire ressembler à ceci. C' est le sujet des trois prochaines leçons. Nous allons le diviser en trois sections, Section 1, Section 2, Section 3, y compris le pied de page, et ensuite nous allons travailler à le rendre réactif. Bien sûr, nous allons faire des choix CSS qui garantiront les meilleures chances d'être réactif lorsque nous descendons à des tailles d'écran inférieures. Mais inévitablement, il y a toujours peu de problèmes qui surgissent. Nous allons apprendre à résoudre ces problèmes avec les requêtes des médias. Enfin, nous allons transformer ce menu en quelque chose qui est basculable. Je ne sais pas si c'est un mot, mais fondamentalement ce qui va se passer est que cela va contracter et ensuite nous pouvons activer et désactiver sur mobile, ce qui est assez standard fonctionnalité sur beaucoup de sites Web ces jours-ci. Dans cette première leçon, nous allons faire la première section et cela devrait nous tenir occupés. Tout d'abord, allons dans notre éditeur de code, et ce que nous devons faire est de créer un nouveau fichier pour héberger tout notre CSS. Je vais cliquer sur Nouveau fichier, et je vais l'enregistrer tout de suite pour obtenir notre coloration, alors naviguez dans votre répertoire de projet, et mettons-le juste avec notre fichier HTML. Je vais l'appeler styles.css. Maintenant, la deuxième partie de ceci est de lier ce fichier CSS à notre document HTML. façon dont nous faisons cela est en allant à l'intérieur des balises de tête, créant une balise de lien avec un rel de feuille de style et un lien vers le fichier styles.css. Parce qu'il est dans le même dossier, nous n'avons pas besoin de mettre de dossiers ou quoi que ce soit. Nous pouvons juste aller styles.css. La première chose que je vais vouloir faire est ce conteneur, je vais commencer par mettre dans une définition CSS de classe. Encore une fois, ce n'est pas une classe CSS fondamentale et HTML, mais des points pour les classes. Voyez comment nous avons mis la classe en tant qu'attribut sur certaines de ces balises. Nous pouvons cibler cette classe en mettant un point, puis le nom de cette classe, puis entre crochets bouclés, tous nos styles. Même chose pour id. Si nous identifions un seul élément sur la page, nous utiliserons id, et pour cibler un identifiant, nous utiliserons le hachage, puis le nom. Par exemple, pour ce titre principal dans CTA, que nous allons obtenir un peu, nous le ciblons correctement comme ça. Maintenant, la première chose que je veux faire est de créer une largeur maximale pour ce conteneur. Je me souviens que nous avons dit, 1140 pixels. La deuxième chose que nous allons vouloir faire est assurer que ses centres au milieu de la page. Je vais lui donner une marge gauche de voiture et une marge droite de voiture. Fondamentalement, lorsque vous avez un élément d'une largeur fixe, vous êtes capable de le centrer dans son élément parent en utilisant margin-left auto et margin-right auto. Si nous retournons sur notre site Web maintenant et rechargeons, vous pouvez voir qu'il y a un bon espacement de chaque côté. Si nous faisons glisser cela, il continuera à maintenir cette belle boîte, ce joli conteneur au milieu de la page jusqu'à ce que nous atteignions un point où la largeur de l'écran est inférieure à ce nombre ici, 1140. Nous avons notre conteneur, qui va affecter toute la page, et maintenant nous allons travailler sur la première section. Ce que je voudrais utiliser, ce sont des commentaires pour étiqueter les différentes parties de mon document CSS, donc je vais mettre un commentaire ici. Cela ne fera rien. C' est juste pour nous en regardant le code, et donc vous pouvez mettre un commentaire en commençant par une barre oblique et un astérisque et en terminant par une barre oblique d'astérisque. Maintenant, je vais cibler ma première section en utilisant le symbole de hachage, que je vous ai montré juste un instant avant. Ce que nous allons faire, c'est donner à cette section ce fond violet. Pour ceux d'entre vous qui ont Photoshop, vous pouvez réellement cliquer dessus, et avec quelques clics différents, vous pouvez aller dans et trouver le code hexadécimal. Je peux en fait maintenant créer un attribut pour la couleur d'arrière-plan, mettre dans le hachage, mettre dans le code. Si vous deviez le faire sans le fichier Photoshop, il sera dans votre document de couleurs et de polices, et vous devriez juste regarder l'arrière-plan de la Section 1 là où il est. Même si vous n'avez pas Photoshop, rappelez-vous, vous pouvez toujours suivre. Mais je vais utiliser Photoshop à partir de maintenant pour découvrir ces choses. Nous lui avons donné la couleur d'arrière-plan, voyons ce qui se passe lorsque nous actualisons la page. Voila, on a ce beau fond. Mais nous avons un problème ici. Le corps a une marge. Je ne sais pas pourquoi ça arrive tout de suite, mais on peut facilement réparer ça, encore une fois, je monte ici parce que je mets tous nos styles universels au sommet. Nous pouvons cibler tout le corps de notre document HTML. Je vais m'assurer qu'il n'y a pas de marge ou de rembourrage en mettant juste marge, rembourrage zéro. Maintenant, ça va aller sur les bords. Comme vous pouvez le voir ici, nous avons toujours notre conteneur. Nous pouvons voir notre logo maintenant, parce que nous n'avons pas de fond blanc, mais nous avons encore un long chemin à parcourir. En ce qui concerne la section 1, je veux également m'assurer qu'elle est assez grande parce qu'il y a beaucoup d'espace dans notre conception. Je vais cocher la case sur Photoshop ou je peux faire glisser une sélection et voir la hauteur approximative de cet élément, et nous pouvons réellement fixer notre section pour être la même. Il mesure environ 595-596. Ce que je vais faire est de revenir à notre définition de section ici, donnez-lui une hauteur min de 595. On y va. Ça ne va évidemment pas avoir de sens en ce moment, mais ce que nous allons faire c'est déplacer ça ici, déplacer ça au milieu, faire de ça un joli gros bouton. Pour revenir à la conception, toujours en se référant à la conception, nous avons la première section de notre section, ou la première zone de notre section est cet en-tête. Comme vous pouvez le voir, il y a un peu de marge au-dessus. Ce que je vais faire, c'est rejoindre une autre sélection pour comprendre combien c'est, et disons que c'est environ 55. J' aime l'arrondir aux cinq pixels les plus proches. On va aller dans l'en-tête cible. N' oubliez pas que si vous ciblez une balise ou un élément HTML, vous les ciblez simplement tous. Vous n'avez pas besoin d'utiliser un hachage ou un point. Vous pouvez simplement mettre explicitement dans importe quel élément que vous ciblez et cela affectera tous les éléments. En ce moment, nous n'avons qu'une balise d'en-tête, donc cela ne va affecter que celui-là. Ce que je vais faire, c'est lui donner un haut rembourrage de 55 pixels. Je sais que j'ai dit marge, mais si on change ça en marge, ce qu'il va faire est de pousser toute la section vers le bas et ensuite vous aurez cet espace blanc ici. On ne veut pas ça, on veut un top rembourré. Développez ça. La prochaine chose sur laquelle nous allons travailler, c'est ce menu. En ce moment, ça ressemble à une liste standard de liens. Ce que je veux dire par là, c'est que nous avons ce style standard pour les liens où notre navigateur, va le transformer en un texte bleu et le donner souligné, et puis aussi ces points laids, c'est le comportement standard de faire des listes de choses et de faire les liens. Nous devons remplacer ça. Je vais cibler les éléments de la liste en sélectionnant d'abord nav, puis en allant dans la liste non ordonnée, puis en ciblant tous les éléments de liste dans ces listes non ordonnées. Ce que je vais faire, c'est d'abord changer le style d'affichage. Au lieu du bloc d'affichage, qu'il est actuellement, je vais lui donner le bloc d'affichage en ligne. Je sauve ça. Vous verrez maintenant, il est maintenant en ligne plutôt que de bloquer. Encore une fois, ce n'est pas une classe CSS fondamentale, mais une explication rapide de l'inline versus bloc. Vous pouvez penser à bloc comme quelque chose qui étend toute la largeur de la page , puis empile les uns sur les autres comme notre page Web est maintenant, vous pouvez voir tout est juste empilé les uns sur les autres. C' est le comportement standard de la plupart des éléments à afficher comme un bloc. Mais l'utilisation du bloc en ligne nous permet d'avoir ces éléments en ligne. Si l'écran arrive à un point où il ne peut pas prendre en charge tous ces éléments en ligne, il reviendra à bloquer. C' est une méthode d'affichage très courante, bloc en ligne. Maintenant, je veux me débarrasser de cette décoration de texte comme il est connu en CSS. Je vais cibler un calque plus profond et désactiver la décoration de texte. Décoration de texte, aucun. On y va. On est toujours bleu. Je vais entrer et rendre la couleur blanche, et on y va. Une des choses que je remarque maintenant c'est que nous avons des polices assez laides. C' est probablement quelque chose que j'aurais dû mettre en place au début, mais je le ferai, je le découvre maintenant. Notre police que nous utilisons telle qu'écrite ici est Titillium Web. Comment pouvons-nous Titillium Web dans notre projet ? Ce que nous allons faire est d'aller dans notre navigateur et de rechercher la police Titillium Web. Maintenant, nous pouvons aller dans Google Fonts, et Google Fonts stocke cette police dans ce qu'on appelle un CDN. Une adresse publique à laquelle nous pouvons lier et apporter cette police. Je vais sélectionner cette police, puis je vais cliquer sur Personnaliser. Sinon, il va juste nous donner régulier, donc je vais cliquer sur Personnaliser. Ça va nous donner un tas d'options différentes. Je veux être en mesure de sélectionner léger, régulier et audacieux. Voilà ce dont nous avons besoin pour le projet. Mais si vous pensez que nous aurons besoin de plus, vous pouvez simplement les sélectionner tous. Nous pouvons également télécharger ces polices et les héberger sur notre site Web. Mais dans le but de ce cours, je vais juste utiliser cette balise ici, que nous allons lier à la police de Google, puis nous le spécifions dans notre CSS. Google nous facilite les choses. Nous devons juste prendre ce qu'il dit ici et le mettre dans notre projet. Tout d'abord, ça va. J' ai oublié de faire la balise de fin là-bas. Eh bien, ça marchait toujours. Quoi qu'il en soit, je fais maintenant référence aux polices externes. Cela devrait maintenant être lié. Ce que je peux faire maintenant, c'est établir le fonds du corps. Ce seront les polices standard de tout ce qui se trouve dans le corps de notre document. Je peux copier cela et changer la famille de polices en Titilium, je trouve vraiment difficile de prononcer celui-ci sur Titillium Web. Clôtons ça, revenons à notre projet et voyons ce qui se passe. Bonjour, nous avons maintenant une police différente. Il va y avoir certains points où nous allons utiliser l' audace et nous allons utiliser des lumières, je pense. Mais pour l'instant, nous pouvons tout mettre sur Titillium Web. La prochaine chose que je veux faire est de flotter le NAB vers la droite. Comme vous pouvez le voir ici, il vient sous le logo et je ne veux pas ça. Je veux qu'il flotte à droite. Maintenant, c'est sur la droite. Il a l'air un peu restreint dans cette vue. Mais comme vous pouvez le voir, quand nous sommes plus grands que 1140 pixels, il a une belle marge. Nous allons arriver à un écran plus petit dans une leçon ultérieure. Mais en partant de ce que nous avons ici, je vais continuer à travailler pour les amener à la façon dont nous les voulons. Encore une fois, je veux juste vous rappeler avant de continuer que vous pouvez faire quelques essais pour l'obtenir exactement comme ça, et c'est tout à fait bien. J' avais un peu d'entraînement à l'avance. Certains de mes processus peuvent ne pas être immédiatement clairs pour vous, mais donnez simplement un coup d'envoi et essayez différentes choses si le remplissage ne fonctionne pas, essayez les marges. Si les marges ne fonctionnent pas, continuez à essayer et vous y arriverez éventuellement faire quelques recherches. C' est ainsi que la plupart d'entre nous apprennent le développement web. Mais pour l'instant, vous m'avez pour vous guider à travers comment je l'ai fait et j'espère que ce sera logique sinon comme toujours boîte de discussion ci-dessous, si vous avez des questions. Ensuite, le rembourrage et la boîte. Je vais aller dans l'élément de la liste et je vais lui donner un peu de rembourrage. Jetons juste un coup d'oeil à la conception à nouveau. Comme vous pouvez le voir, il y a un peu de rembourrage en haut et en bas, mais il y a plus de rembourrage à gauche et à droite. Je vais juste estimer ça. Faisons simplement glisser un peu d'un orteil de sélection. Vous pouvez voir la largeur il y a environ 17 pixels, et le haut est d'environ 15 pixels. C' est environ 16 pixels de chaque côté en fait. Commençons par ça. Commençons par un rembourrage de 16 pixels. Pour actif, je vais cibler cet élément spécifique avec une classe d'actif en utilisant ceci, lui donner cette couleur d'arrière-plan. Encore une fois, j'utilise Photoshop pour le faire, mais vous pouvez archiver dans le document cette couleur particulière. Je vais y aller, hacher cette couleur particulière, et ensuite on peut la voir sur l'écran. Comme vous pouvez le voir maintenant, il suffit de mettre ce rembourrage et cette couleur de fond, et nous avons déjà fait une grande différence. Bien sûr, une chose que je vois ici, c'est que nous avons ces bords durs. Ce que nous pouvons faire pour les lisser est utilisé ce qu'on appelle le radius border-radius. Je vais ajouter cela à notre élément de lien actif. Border- rayon, cinq pixels est généralement une bonne quantité. On y va. Maintenant, comme vous pouvez le voir, le rembourrage est un peu plus rectangulaire ici. Je vais le modifier légèrement. Ce que je vais faire est de changer le rembourrage par rapport au haut et au bas à gauche et à droite. Je pense que c'est un peu plus proche. Peut-être un peu moins de rembourrage sur le dessus. Un peu plus de rembourrage sur la droite. Encore une fois, ce n'est pas dans les capitales. La façon dont nous pouvons le faire est d'utiliser la transformation de texte, et nous pouvons sélectionner des majuscules. Maintenant, chaque élément de liste dans un nav aura des lettres majuscules. Comme vous pouvez le voir, il y a encore un peu de différence là-bas, mais je vais passer à autre chose parce que je ne veux pas passer trop de temps sur un tout petit élément. Bien sûr, l'attention aux détails est importante, mais vous pouvez passer par et expérimenter avec cela pour le rendre parfait. Jetons un coup d'oeil. On dirait qu'une tête est assez bonne en ce moment. L' étape suivante est toute cette section. J' ai étiqueté cela dans un document HTML comme titre principal et CTA. Ce que je vais faire, c'est créer un style pour ça. Titre principal et CTA. Qu' est-ce que je veux de ma rubrique principale et du CTA ? Tout d'abord, j'ai remarqué que tout est centré sur la page. J' ai également remarqué qu'il y a une certaine marge ici. Si j'ai un coup d'oeil à cela, les marges d'environ 150 pixels. Ce que je vais faire, c'est lui donner une marge supérieure de 145 pixels. Maintenant, c'est plus au centre. Mais alors aussi je vais lui donner un alignement de texte du centre afin qu'il apparaisse au centre. On y va. La prochaine chose dans cette rubrique principale et la CTA est la position réelle. Je peux cibler la position qui se trouve dans la position principale et CTA en mettant dans la position principale et le CTA avec un h1 par la suite. La première chose que je remarque est que la couleur est blanche, pas noire. On y va. La taille de la police est en fait beaucoup plus grande. Si je rentre ici, je peux vérifier 42.16. Je vais juste y aller avec 42 pixels. Taille de la police, 42 pixels. Vous remarquerez qu'il s'agit d'un poids de police, gras. Heureusement, nous avons également installé ce poids de police. On peut descendre ici et faire du poids de la police en gras. Maintenant, jetons un oeil. Wow, regarde ça. C' est si souvent que le plus petit des changements peut avoir un impact assez important. C' est fou de penser que nous avons commencé avec ce que nous regardions avant, c' est-à-dire si je me débarrasse de ce lien de feuille de style. C' est ce que nous regardions avant. Je ne sais pas depuis combien de temps on a fait 15 minutes de codage. Nous avons maintenant cette belle paix. Évidemment, je prends de l'avance sur moi-même. Il y a encore une chose de style ici et c'est le bouton. Mais je voulais juste le faire brièvement. Comme le bouton va être stylé à peu près la même chose que le bouton d'envoi de message ici. Je vais mettre un style au-dessus de la section un pour gros bouton. Grand bouton a quelques styles différents dessus. Plus particulièrement, il a beaucoup de rembourrage. Encore une fois, en dessinant l'outil de sélection sur le dessus, il a environ 27. Sur les côtés. Il a comme 83. Ces chiffres ne seront pas exacts, mais ils nous donnent un bon point de départ. Je vais y aller et faire des rembourrages de 25, 90, 25, 90. Aussi pour le texte, nous voulons qu'il soit de White. Jetons un coup d'oeil maintenant. Nous pouvons voir le rembourrage fonctionner pour nous encore. Nous avons aussi ce soulignement, donc nous devrons réparer ça. Mais ce que nous pouvons faire est d'ajouter un style pour spécifiquement ce bouton pour en faire le fond orange. Ensuite, nous pouvons voir le rembourrage fonctionner. Ce que je vais faire est de commencer avec ce sélecteur et c'est un tag, donc je vais le sélectionner en utilisant un a. Une chose que j'ai remarqué est le souligné, donc je vais me débarrasser de la décoration de texte. Ensuite, la deuxième chose que je vais faire est de lui donner cette couleur de fond. La couleur de fond est, si je vais dans et inspecte cet élément sur Photoshop, il est là, mettez-le dedans. Voyons ce qui se passe. On a ce gros bouton orange. Je remarque quelques choses. Le travail du bouton US est en majuscules et la taille de la police est en fait un peu plus grande aussi. entrant ici, je peux voir que c'est en fait 18 pixels. Tout comme avant pour la capitaliser, nous pouvons utiliser la transformation de texte en majuscule. Nous pouvons fixer la taille de la police à 18 pixels. Maintenant, il devient un peu plus grand. Malheureusement, la majuscule n'est pas la même que les majuscules. Désolé pour ça. Capitalisez au cas où vous vous demandez, mettez simplement en majuscule la première lettre de chaque mot. On y va. Travaillez avec nous. Une autre chose que je remarque est qu'il y a une certaine marge entre le bouton et le texte. C' est environ 60 pixels de marge. Comme vous pouvez le voir, il y a déjà un peu de marge avec la balise de titre qui est intégrée. Mais nous pouvons l'étendre à 60 pixels. Je vais aller à la rubrique, marge inférieure de 60 pixels. Ça pousse un peu le bouton vers le bas. Une autre chose, le rayon de la frontière pour lui donner ce joli bord incurvé. On y va. Il y a autre chose ? Je pense que c'est plutôt bien, les gars. Notre première section est assez complète. Évidemment, lorsque nous redimensionnons, cela fonctionne assez bien jusqu'à un certain point, nous allons arriver à résoudre les problèmes réactifs dans une vidéo ultérieure. Mais pour la première partie, je pense qu'on est en bon état. Il y a peut-être quelques divergences, mais je suis plutôt content de ça. J' espère que vous avez pu suivre cette leçon, nous allons maintenant faire à peu près exactement la même chose, mais avec cette section et cette section, puis bien sûr le pied de page, et puis vous allez voir tout ce projet devenir comme ça. Mais en plus de cela, nous allons également le rendre réactif et bien fonctionner sur toutes les tailles d'écran. C' est l'avenir passionnant de cette classe. J' espère vous voir dans la prochaine leçon. On se voit alors. 9. CSS - Section 2: Bon, bienvenue les gars. Dans cette leçon, nous allons continuer à créer le CSS pour notre page d'apprentissage afin de le prendre de ceci à ceci. Nous allons nous concentrer sur cette deuxième section dans cette leçon. Ensuite, dans la leçon suivante, nous ferons la dernière section. Comme avant, je vais commencer par la section elle-même. Si je clique ici et cliquez sur le rectangle, si j'utilise Photoshop, je peux comprendre le remplissage, donc la couleur de la boîte et la hauteur de celui-ci. Composez ces styles tout de suite. Tout d'abord, je vais créer de l'espace ici pour que vous puissiez voir ce que je tape plus facilement. Je vais tricher un peu et copier ce que nous avons ici. Je vais continuer à séparer chaque section avec un commentaire juste pour lisibilité pour moi-même et quiconque vient et regarde cette feuille de style plus tard sur la piste. Pour la Section 2, comme je l'ai mentionné, couleur de fond comme je viens de copier, malheureusement j'ai déjà rempli mon presse-papiers avec autre chose, donc je dois aller et copier cela à nouveau. Ensuite, les hauteurs qui sont ici sont de 747 pixels. Je vais aller avec 745 juste parce que j'aime arrondir et je vais utiliser min-height. Maintenant, j'utilise min-height ici aussi, et vous vous demandez peut-être pourquoi j'utilise min-height et pas la hauteur. C' est à voir avec la réactivité. heure actuelle, nous voulons qu'il ait une hauteur minimale lorsque tous les éléments, je suppose, peuvent facilement s'intégrer à l'intérieur. Mais quand nous descendons à une taille d'écran plus petite, vous pouvez voir ici avec Section 1, vous voyez que la hauteur de la boîte devient plus grande et nous voulons que les hauteurs de la section deviennent plus grandes, pour inclure tous les éléments. Maintenant, nous allons rendre ce texte plus petit et changer certaines des dimensions des éléments à mesure que nous entrons dans des tailles d'écran plus petites. Mais peu importe, nous voulons que ce soit une hauteur minimale, mais sur tailles d'écran plus petites, nous sommes heureux qu'il s' étende aussi longtemps qu'il doit l'être pour inclure tout le contenu. Espérons que ça éclaircit ça si tu te demandais. Si je fais défiler vers le bas jusqu'à la deuxième section, enregistrer sur le document, actualiser la page, maintenant vous pouvez voir que nous avons un fond vert. Si j'étends la page complète, le contenu est en fait plus grand que la hauteur minimale dans ce cas, donc nous ne voyons pas réellement cette hauteur min-en effet. Mais une fois que nous commencerons à les mettre côte à côte, vous verrez ça. Une chose que je remarque qui n'est pas tout à fait juste est qu'il y a un écart entre ici. Je sais par expérience que les balises de titre ont une marge supérieure et inférieure par défaut. Dans l'inspecteur, nous pouvons voir ça par cette zone orange. Si je survole le titre 2, nous pouvons voir une zone orange en haut et en bas. Je sais que ça cause cet espace blanc ici. Ce que je vais faire, c'est faire ce H2 ensuite. Dans notre HTML, nous l'avons appelé une boîte de titre, je vais à nouveau l'espace vers le bas, sélectionnez title-box, H2. Ce que je vais faire est de me débarrasser de la margin-top, nous puissions nous en débarrasser, et ce que je ferai plus tard, c'est de mettre un peu de rembourrage, ce que je ne ferai pas maintenant, mais je vais mettre du haut de rembourrage, donc il a encore un peu d'espace à partir de ce à l'en-tête. Je prends un peu d'avance sur moi-même en travaillant sur cette rubrique, mais je voulais juste me débarrasser de ce petit espace blanc tout de suite. Pour revenir à notre section générale, une chose dont nous avons besoin pour toute la section est que la couleur doit être blanche. Encore une fois, mettre en couleur blanche, sauver ça, et voilà. Maintenant que nous avons mis dans les styles pour toute la section, travaillons sur les parties individuelles. Nous avons d'abord cette zone de titre avec la ligne d'en-tête et le paragraphe. Comme nous l'avons vu un peu plus tôt, la zone de title-box a la classe de title-box, et nous avons un H2 un div avec une classe de ligne et une balise P. Quelques choses que j'ai remarquées au sujet de la conception de cette boîte de titre est numéro un, il est centré, donc cela flotte vers la gauche ou s'aligne vers la gauche, donc nous devons centrer le texte. Ensuite, la deuxième chose est que si j'élargis la taille de l'écran, vous pouvez voir que le saut de ligne se passe assez serré, et comment nous pouvons obtenir cela est en mettant une largeur maximale afin qu'elle ne s'étend pas plus longtemps qu'environ cette largeur. Tout d'abord, je vais espacer, mettre dans un style de boîte de titre ici, centre d' alignement du texte, et regardons la largeur de ce texte. Si je dessine un outil de sélection autour d' elle, c'est environ six ou neuf. Encore une fois, j'aime arrondir, donc je vais faire une largeur maximale de 609 pixels. Maintenant, ce que cela va faire est d'aligner le texte et de lui donner une largeur maximale, mais il va toujours apparaître sur la gauche. Maintenant, comment nous pouvons corriger cela est maintenant que nous avons une largeur fixe, nous pouvons mettre dans l'ordre margin-gauche et margin-droite, et maintenant cela va apparaître au milieu. Rappelez-vous, si nous avons un élément de bloc de largeur fixe, nous pouvons le centrer dans son élément parent en utilisant l'ordre margin-gauche et margin-droite. Maintenant, je vais revenir à ce H1 et ce que je veux, c'est un rembourrage sur le dessus. Ici, vous pouvez voir qu'il y a beaucoup de rembourrage entre le haut de la section et le titre. Nous nous sommes débarrassés de la marge donc il n'y aura plus de marge inhérente maintenant. Mais c'est cool. Nous pouvons composer notre propre hauteur de rembourrage, et il semble que c'est environ 120 pixels. Je vais aller ici, créer un haut de rembourrage de 120 pixels. Heureusement, mon logiciel de codage chaque fois que je sauve, tue ces lignes supplémentaires. Je pourrais juste mettre un commentaire, juste pour qu'il cesse de le faire. Désolé pour ça. Revenons à notre page web. Maintenant, nous pouvons voir qu'il y a un grand espace ici. Ce n'est pas tout à fait correct tant que nous n'aurons pas bien compris ce cap. Ce que nous devons faire pour cela, c'est le rendre plus grand et le faire capitaliser. Si je sélectionne ce texte, je peux voir qu'il fait 40 pixels gras, et il est évidemment en majuscules. Allons et faisons ça. Taille de la police, 40 pixels, poids de la police, gras, transformation du texte en majuscules. Revenons dans notre projet, voyons ce qui se passe. On y va. C'est à peu près le titre de section fait. La prochaine chose est la ligne, et en ce moment il n'y a pas de ligne qui s'affiche, donc nous devons créer cette ligne en utilisant CSS. Tout d'abord, nous devons le cibler, donc title-box, puis line, et je vais à nouveau utiliser le fichier Photoshop comme référence. Nous pouvons jeter un oeil aux dimensions de cette boîte en cliquant ici. Nous pouvons voir que la largeur de celui-ci est de 87 et la hauteur est de quatre. Mettons-les dans notre CSS. Largeur 87 pixels, hauteur, quatre pixels. Maintenant, il ne va pas encore apparaître. L' espace va être créé, comme vous pouvez le voir, mais il ne va pas apparaître tant que nous lui donnons une couleur, comme n'importe quel div en HTML. Il ne montrera aucune couleur à moins qu'on ne lui donne une couleur. Si nous regardons cette boîte, nous pouvons voir que le remplissage est à peu près complètement noir, mais ce qu'il a c'est une opacité. Je suis capable de le dire en regardant les couches et en vérifiant ici l'opacité. Si c'était 100 pour cent, ce serait juste une ligne noire solide. Mais voyez comment il s'estompe un peu en arrière-plan. C' est parce qu'il a une opacité de 15 pour cent. La façon dont nous pouvons composer cela, en CSS est en utilisant RGBA. RGBA est un moyen de mettre dans un code couleur. Pour cette petite fonction, il y a quatre paramètres. Le premier est le canal rouge, le second est le canal vert, le troisième est le canal bleu, et le dernier, je ne sais pas ce que signifie « A », mais c'est là que nous pouvons mettre dans le opacité. Le code RVB pour le noir est juste des zéros tout autour car il n'y a pas de rouge, de vert ou de bleu. Je vais faire est zéro ; zéro ; zéro, et puis pour l'opacité, je vais le mettre en décimal, donc 0,15. Si je sauvegarde cela, rechargez la page, vous pouvez voir que nous avons une ligne, mais bien sûr c'est sur la gauche ici. Ce que nous allons faire, c'est de nouveau, ordre de la marge gauche et de la droite, peu importe l'ordre dans lequel vous les faites, et maintenant c'est au centre. Nous avons obtenu notre titre, nous devons nous aligner et nous devons maintenant travailler sur ce paragraphe. Je pense que ce sera juste une question de changer la taille de la police. Si je creuse ici, je peux voir que la taille de la police est de 18 pixels et que le poids est juste régulier, donc nous n'avons pas besoin de changer cela. En entrant dans la zone de titre, ciblant la balise P à l'intérieur, je vais définir la taille de la police à 18 pixels. revenir en arrière, nous voyons maintenant notre boîte de titre travailler assez étroitement avec ce que nous avons dans notre fichier de boutique photo. La seule chose que je peux vraiment remarquer ici qui est différente dans la nôtre est qu'il y a un peu moins de rembourrage ici, alors jetez un oeil à ces 20 pixels. Je vais retourner dans la ligne. Encore une fois, c'est à cause de ce titre avec sa marge d'héritage, il va avoir intrinsèquement un peu de marge inférieure. Comme vous pouvez le voir ici, cet espace orange est l'espace entre le texte et la ligne. Ce que je vais faire est de changer la marge inférieure de l'en-tête à 20 pixels. Maintenant, vous pouvez voir que ce n'est pas exactement parfait parce qu'il y a une certaine hauteur de ligne ici aussi, donc nous pouvons changer la hauteur de la ligne. Sinon, nous pouvons simplement composer le bas de la marge jusqu'à ce qu'il soit plus proche de la conception réelle. Je pense que c'est assez proche. Douce. C'est la boîte de titre. Si je développe la fenêtre, semble plutôt bon. Maintenant, nous devons faire en sorte que ces colonnes se produisent. Ce que je vais faire, c'est retourner dans mon HTML et jeter un oeil à ce que nous avons. Nous avons un div appelé blurb row, et à l'intérieur, nous avons quatre blurbs. Pour les amener tous à s'asseoir l'un à côté de l'autre, ce que je vais faire est de leur donner une largeur plus serrée , puis d'utiliser l'attribut display inline-block. En passant à notre fichier CSS, je vais créer une règle pour le blurb, et ce que je vais faire, c'est qu'il y a en fait quatre colonnes ici. Maintenant, théoriquement, si nous avons 100 pour cent de largeur pour travailler, nous pouvons faire 25 pour cent toutes ces colonnes, et ensuite cela va s'ajouter jusqu'à 100. Mais en réalité, il y a d'autres choses comme la marge, le rembourrage et les bordures qui ajoutent à la largeur et à la hauteur horizontales des éléments. Pour être sûr, un bon nombre, qui est un peu moins de 25 est 23,33 pour cent. Je vais fixer la largeur de ceci à 23,33 pour cent, et parce que c'est une largeur relative, cela signifie que la largeur de ces éléments va répondre si le conteneur devient plus petit que 1,140 pixels, ce qui est ce que nous voulons et vous verrez que cela fonctionne en une seconde. Bien sûr, nous avons la largeur, mais il ne va pas s'afficher en ligne à moins que nous définissions le style d'affichage sur inline ou inline-block donc je l'ai fait. Maintenant, je vais revenir à mon navigateur, appuyer sur rafraichir et voilà. Maintenant, vous pouvez voir qu'ils sont tous bien assis l'un à côté de l'autre. Juste pour vous montrer, si nous ne faisions pas 25 pour cent, il y aurait un petit saut de ligne parce qu'il y a toujours des marges de remplissage et des bordures qui gênent le chemin. 23,3 pour cent lui donne un peu d' espace pour respirer afin qu'ils puissent tous s'asseoir bien ensemble. L' autre chose est centré à l'intérieur de ces colonnes. Comme vous m'avez vu le faire à maintes reprises, je vais lui donner un style de centre d'alignement de texte, et là vous pouvez voir que nous avons parcouru un chemin assez loin. Si nous revenons à notre conception, nous pouvons voir que cela est en fait un peu trop proche du paragraphe ci-dessus. Encore une fois, je vais juste vérifier la hauteur de ceci, que 80 pixels. Je vais donner à la ligne de blurb une marge supérieure de 80 pixels. On y va. Pour revenir à la conception, maintenant je pense qu'il est temps de travailler sur les blurbs, et ce que nous pouvons faire pour les blurbs est de mettre à jour la taille de ces en-têtes et paragraphes et de mettre en majuscule ces en-têtes. Ce que je vais faire pour ça, cibler le titre dans le blurb, qui je pense est un H3. Vérifions juste ça. Oui, donc H3 dans les divs avec une classe de blurbs, nous allons changer la taille de police de ceux-ci, alors déterminons ce que ceux-ci sont. Vingt-quatre pixels et aussi gras, nous devrons donc changer le poids de la police. La taille de la police, 24 pixels et le poids de la police gras, et bien sûr, le texte transforme en majuscules. Sauvegardez ça, et maintenant nous avons un texte plus grand. Il y a un peu de problème d'alignement ici, mais nous y arriverons dans une seconde. La dernière chose que je veux faire avant de corriger cela est juste de m'assurer que ces paragraphes sont la bonne taille de police. Ce que je vais faire pour cela, c'est aller à Photoshop, sélectionner la police, dire que 16 pixels, et juste composer cela pour flurb. Encore une fois, en commençant par blurb et en ciblant tous les Ps dans le blurb, je vais fixer la taille de la police à 16 pixels. Si nous actualisons la page, nous pouvons voir qu'il n'a pas fait de changement et que le texte doit avoir tout prêt été 16 pixels. La dernière chose que je pense que nous devons faire sur cette section est de travailler sur cette marge ici. Je vais jeter un oeil à nouveau avec mon outil de sélection, voir que c'est environ 60 pixels, et donc ce que je vais faire est de revenir dans ce style pour le titre 3 et de lui donner une marge supérieure de 60 pixels. Si je l'enregistre et actualise la page, vous pouvez maintenant voir que tout commence à se déplacer vers le bas. Mais il y a un dernier problème, c'est que cette rubrique pour l'image de marque est hors de la ligne avec le reste des titres. Maintenant, pourquoi c'est ça ? Eh bien, si vous prenez une seconde pour regarder les paragraphes ici, chacun d'eux est sur deux lignes, sauf celle-ci. Si nous étions en mesure d'entrer et de changer la quantité de texte dans ce paragraphe, allons juste nous débarrasser de tout ce qui est au-delà de cette virgule là, vous verrez que tout est à nouveau aligné parce que le texte ne dépasse que deux lignes. Nous pourrions supprimer du texte et ils s'aligneraient bien, mais ce n'est pas vraiment une bonne solution, surtout si nous voulons mettre plus de texte pour différents blurbs, et il peut aussi se briser quand nous abaissons la taille de l'écran comme c'est le cas maintenant . La meilleure façon et la meilleure façon de faire fonctionner cela est d'utiliser la table d'affichage. Tout ce que nous avons à faire est de revenir ici et pour blurb au lieu de inline-block, inline-table, sauvegardez cela, rafraîchissez la page, et même avec cette deuxième ou troisième ligne de texte, tout est bien aligné comme s'il s'agissait d'une table avec trois lignes. C' est un joli petit hack disponible pour nous dans cette version de CSS. S' il s'agissait d'une table avec trois lignes, vous pouvez voir que chaque ligne est à peu près la même hauteur maintenant, et bien sûr, nous avons nos colonnes que nous avons déjà configurées. C' est un petit piratage pour que ça marche. Parfois, il faut expérimenter le style d'affichage pour résoudre de petits problèmes comme ça. Dans la section suivante, nous allons regarder un autre appelé display flex. Ces différents styles d'affichage peuvent vous aider à résoudre ces problèmes. Ouais, ça résume à peu près la Section 2. Si je regarde en arrière, ça a l'air assez bien à part une autre chose et c'est que, comme vous pouvez le voir ici, la même chose que nous parlions ici. Il semble y avoir une largeur maximale sur ces paragraphes, ou si je dessine simplement mon curseur autour, je peux voir qu'il fait environ 200 pixels de large. Nous allons entrer, lui donner une largeur maximale de 200 pixels et comme vous pouvez le voir, il se déplace vers la gauche. Nous devons entrer et faire ce que nous avons toujours fait pour mettre les choses au centre, et c'est l'ordre de la marge gauche, de l'ordre de la marge droite. Enregistrez cela, et comme vous pouvez le voir maintenant, il crée cet espace entre cette largeur maximale, ce qui provoque la rupture de ces mots sur une nouvelle ligne. Vérification finale. Je pense que ça a l'air assez proche du design. Encore une fois, une petite attention aux détails. Vous pourriez y aller et vous assurer que, si les choses sont de cinq pixels de différence, vous pouvez entrer et les rendre parfaits. Mais je pense que pour nos besoins et pour le but de cette classe, nous sommes assez proches de l'endroit où il doit être, et si je fais glisser ma fenêtre, vous pouvez voir l'effet de ces tailles de largeur relative. Rappelez-vous que nous avons utilisé 23,33 pour cent au lieu d' une largeur de pixel et ce qui permet, c'est lorsque nous sommes sur ces plus petites tailles d'écran, nous pouvons commencer à les voir s'adapter en raison de la taille de leur conteneur. Comme vous pouvez le voir, nous sommes déjà en train de mettre en place certaines pratiques qui garantiront la meilleure chance que notre page Web soit aussi réactive que possible. Encore une fois, une fois que nous avons atteint une taille comme celle-ci, ça commence à devenir un peu désordonnée, donc nous devrons réparer ça. Mais sinon, il est assez réactif à un certain point et c'est l'avantage de penser à l'avenir et d'utiliser ces styles relatifs. C' est la section 2. Dans la vidéo suivante, nous allons faire la Section 3 et aussi le pied de page. J' ai hâte de vous voir sur ce coup. 10. CSS - Section 3: Bon, bienvenue les gars. Nous sommes maintenant sur le tretch pour obtenir cette page Web belle apparence sur au moins bureau. Nous avons fait la section 1 et la section 2 maintenant. Maintenant, il s'agit juste de rendre ça agréable. Comme vous pouvez le voir, nos styles que nous avons créés pour la boîte de titre sont déjà parvenus, donc nous n'avons pas à refaire cette section. C' est la grande chose à propos des classes et de créer des styles pour eux, vous arrivez à réutiliser ces styles. La chose qui va prendre le plus de travail dans cette leçon ici sera cette forme ici. Tout d'abord, comme nous l'avons fait dans toutes les leçons précédentes, nous allons définir les styles globaux de cette section et nous allons suivre le même format que les précédents. Je vais juste copier l'ensemble de la section 2 parce que nous allons utiliser les mêmes attributs. Renommez cela à la section 3, et ce que nous allons changer est la couleur d'arrière-plan et la hauteur min. Comme toujours, je vais aller dans mon fichier Photoshop pour comprendre ce que cela devrait être. Comme toujours, je peux cliquer sur « Remplir » ici et obtenir le code hexadécimal exact de la couleur. Je peux voir la hauteur ici ses 820 pixels de haut. Mettons-les tout de suite. Je vais changer ce code hexadécimal pour cela et changer la hauteur min-820 pixels. Pour revenir à notre projet, vous pouvez maintenant voir que la hauteur a pris affecter la couleur du texte est différente et nous avons ce beau fond bleu. Avec les styles de section et aussi les styles de boîte de titre déjà fait pour nous, la seule chose qu'il nous reste à travailler pour cette section est le formulaire lui-même et cela va nous garder assez occupés parce que comme vous pouvez le voir, ce formulaire ne semble pas n'importe quoi comme ce que nous avons ici. Tout d'abord, jetons un coup d'oeil à notre HTML. Comme vous pouvez le voir ici, nous avons un div conteneur avec l'identifiant du formulaire de contact. Nous avons le formulaire réel à l'intérieur, et ensuite nous avons trois lignes de formulaire, chacune avec des entrées différentes. Comme vous pouvez le voir ici, nous avons ces deux existant sur une ligne, ceci existant sur une ligne, et le bouton de soumission existant sur une ligne également. Maintenant, il y a quelques petits problèmes ici comme vous ne pouvez pas voir le texte sur le bouton parce qu'il est de couleur blanche et le bouton est de couleur blanche. On y arrivera dans une seconde. Mais pour commencer avec l'élément parent, pour commencer, créons un style pour le formulaire de contact. Dans mon CSS, je crée une règle de style pour tout ce qui a un identifiant de formulaire de contact, qui va être ce div ici. Ce que je veux faire est juste comme nous l'avons fait ici pour la boîte de titre est de lui donner une largeur maximale et de le centrer. Je vais aller dans mon fichier Photoshop et comprendre à quel point ce formulaire est grand. arrondissant au pixel le plus proche, c'est 871, 870, désolé. Je vais y aller et lui donner une largeur maximale de 870 pixels. Maintenant qu'il a une largeur fixe, nous pouvons utiliser l'ordre de la marge gauche, et l'ordre de la marge droite pour le centrer dans son élément parent. En ce moment, tout est aligné sur la gauche, mais si nous devons l'inspecter à l'avant, vous pouvez voir qu'il existe dans un conteneur maintenant centré et limité à 870 pixels. Maintenant que nous avons cette base, il est temps de styliser les éléments réels à l'intérieur et nous pouvons le faire en utilisant la balise Sélecteur de niveau. Toutes les entrées et les zones de texte, je veux que la couleur du texte entré soit blanche. Je veux aussi que le contexte soit le contexte que nous avons ici. Si je regarde ces boîtes et dans Photoshop, allez, prenez le code hexadécimal. Je peux échanger sur mon code. Logiciel, changez la couleur de fond pour cela. En revenant à notre conception, vous pouvez voir qu'elle affecte chaque entrée et chaque zone de texte. Maintenant, le problème avec cela est que notre bouton Soumettre est aussi un élément d'entrée donc il va affecter ce bouton aussi, qui n'aurait pas été prévu et certainement pour cela, nous ne voulons pas les mêmes styles que nous avons dans notre entrée pour affecter notre bouton Entrée. Ce que nous allons faire, c'est que nous allons devoir mettre des sélecteurs d'attributs ici pour nous assurer qu'il sélectionne seulement ces deux et non cette entrée. Cela va sembler un peu bizarre si vous n'êtes pas habitué à CSS auparavant, mais nous pouvons cibler un attribut et une valeur en utilisant ces crochets en CSS. Nous allons cibler les entrées avec un type de texte. Ensuite, nous devons en créer un autre parce que c'est en fait un type d'e-mail afin de copier cela et de changer le type en e-mail. Si j'enregistre cela, vous verrez que cela n'affecte plus le bouton Soumettre. Juste ces entrées et cette zone de texte. L' autre chose que j'ai remarqué, c'est qu'il y a une frontière laide. Je vais dire frontière aucun pour que ça se débarrasse de ça. Je remarque que l'espace réservé, malgré entrer et être en mesure de taper avec la couleur blanche. Comme vous pouvez le voir ici, nous avons changé la couleur blanche ne change pas réellement l'espace réservé. Il ne modifie que le texte que vous tapez dans ces zones. Pour ce faire, nous allons devoir utiliser un peu d'un type de sélecteur spécial, et c'est un pseudo sélecteur. façon dont nous faisons cela est en tapant et je vais sélectionner tous ces deux-points, deux-points, espace réservé. C' est ainsi que nous pouvons cibler l'espace réservé de certains éléments dans CSS. Je sais que ça peut sembler bizarre, mais c'est comme ça. Je vais colorer ça en blanc et ensuite Wallah, vous pouvez voir ici que l'espace réservé ne vient pas et il y a déjà un peu de texte là-dedans. C' est parce que n'importe quel espace que vous mettez ici, n'importe quel espace blanc qui va se croiser. Fermons ces balises et voilà. Textarea, est étrange parce que c'est une entrée, mais il n'agit tout simplement pas de la même manière qu'une entrée. Pour revenir au CSS, il y a quelques autres changements que nous devons apporter ici. Nous voulons nous assurer que la taille de la police est la même que notre conception. Nous voulons également ajouter une certaine marge. Alors bien sûr, nous devons les rendre aussi grands qu'ils le doivent, donc ils sont assez petits pour le moment, nous voulons que celui-ci soit 50 pour cent de large, celui-ci soit environ 50 pour cent de large, et celui-là pour étendre l'ensemble largeur de notre conteneur. Entrer dans notre feuille de style ici, en fait entrer dans notre design d'abord. Nous pouvons entrer, utiliser l'outil de texte pour sélectionner le texte ici et voir qu'il est 18 pixels. Entrée, taille de police, 18 pixels. Maintenant, la taille de la police est plus grande, mais les champs sont tout simplement trop proches les uns des autres. Mettons-le dans un peu de marge. Je vais faire un calcul approximatif de la marge. L' espacement entre dit environ 28. Ici, c'est environ 44, ça va aller avec 26 pour l'instant. Marge, et cela pourrait changer à l'avenir, mais faisons seulement 26 pour la marge. Comme vous pouvez le voir, c'est un peu trop, alors je vais le recomposer à peut-être 16. On va devoir changer ça, mais c'est bon pour l'instant. Ce que je veux faire est de m'assurer que ceux-ci s'étendent sur toute la largeur du conteneur, donc maintenant je vais travailler sur ceux-ci, ligne par ligne. Nous devons fixer le, non seulement la largeur, mais aussi la hauteur d'entre eux. Pour les deux premiers, entrez du texte et de l'e-mail de saisie. Je vais créer de l'espace ici. Nous allons faire la largeur 50 pour cent et la hauteur. Que devrions-nous faire pour la hauteur ? Si nous allons à nouveau dans la boîte, il suffit d'effacer cette sélection. Allez dans la boîte, nous pouvons voir la hauteur est de 56 pixels. Composez cette hauteur ici. Maintenant, quand nous actualisons la page, comme vous pouvez le voir, comme je l'ai mentionné précédemment avec les colonnes ici étant 25 pour cent chacune. Si nous les faisons 50 pour cent chacun, avec le style d'affichage en ligne, il va casser à une nouvelle ligne et nous aurons besoin lui donner un peu moins de largeur pour qu'il puisse rester ensemble. Voilà, avec 45 pour cent. Nous allons devoir changer ça dans un moment et je vais vous montrer comment nous allons le faire dans une seconde. Mais pour l'instant, nous devons faire en sorte que celui-ci prolonge 100 pour cent et ensuite nous allons également déterminer la hauteur de celui-ci aussi. Donc, en entrant ici, en cliquant sur le « Rectangle Tool » pour que nous puissions voir la hauteur. On peut voir que c'est 200 pixels. Je vais cibler ma zone de texte dans mon CSS, fixer la hauteur à 200 pixels, et définir la largeur à 100 pour cent. Maintenant, vous pouvez voir que la ligne supérieure et la deuxième ligne, va à peu près toute la largeur du conteneur. Comme je vous l'ai déjà montré, il faut que ce soit 50-50. Mais à cause de la marge, cause de tout le reste, ce n'est pas aligné, donc nous avons eu ce bord qui n'est pas parfaitement aligné avec ce bord. Ce qu'on va faire pour réparer ça, c'est ramener ça à 50. Mais on a encore le même problème. Comment pouvons-nous dépasser ça ? Eh bien, c'est là que nous pouvons utiliser notre flex d'affichage d'amis. Si vous vous demandez avant pourquoi j'ai créé ces lignes pour commencer, Class="Form-Row">, c'était pour ce but précis. Donc, si je vais ici et crée une règle de style pour form-row, je peux vous montrer la magie du flex d'affichage. Je vais définir ceci pour afficher flex. Je vais rafraîchir la page et voilà. Maintenant, vous pouvez voir que les bords s'alignent parfaitement et qu'il fléchit, je suppose que vous pourriez dire, pour obtenir ce résultat. Même si je redimensionnais la page, elle reste parfaitement alignée de bord à bord. C' est la beauté du flex. On se rapproche de l'endroit où on veut qu'il soit. Je remarque deux choses en ce moment qui sont différentes entre le fichier Photoshop et notre document, et c'est border-rayon et aussi un remplissage ici sur la gauche. Je vais aller réparer ça maintenant. Pour toutes les entrées, je vais entrer et changer le rayon de bordure à cinq pixels, comme nous l'avons fait partout ailleurs et je vais avoir un remplissage d'environ 16. Si je rafraîchis la page, vous pouvez voir commence à paraître un peu plus agréable. Maintenant, il y a aussi cette marge ici pour la zone de texte, et c'est environ 24 pixels. Donc, sur la zone de texte spécifiquement, je vais lui donner un haut rembourrage de 24 pixels. Là, vous pouvez voir que nous avons un joli rembourrage confortable. En fait, c'est assez proche de ce que nous avons ici. Il peut y avoir un peu de différence avec la marge, mais dans l'ensemble, je suis plutôt content de ça. Je suis prêt à passer à notre bouton ici. Parce que nous avons déjà défini un style pour le gros bouton ici, nous pouvons recycler ces styles, et donc il va s'agir principalement de changer la couleur de fond. Donc, la couleur de fond du bouton, si nous allons dans et sélectionnez la boîte ici, trouver son attribut de remplissage et copier. Nous pouvons changer la couleur d'arrière-plan de notre type d'entrée soumettre. Donc, vous allez ici et le cibler de la même manière que nous avons ciblé notre texte et notre e-mail. Il suffit de dire [type="submit "], puis couleur de fond le code # de 30bae7. D' accord. Comme vous pouvez le voir, il est beaucoup plus agréable maintenant que nous avons mis dans cette couleur de fond. Mais ce que nous devons faire aussi, c'est de nous débarrasser de cette horrible frontière. D'accord. Tout comme ici, nous devons nous assurer que le texte est plus grand et capitalisé, je crois. Aussi, nous devons centrer ce bouton et nous allons travailler sur un peu de la marge aussi. Si je retourne dans mon design, je peux vérifier quelle est la taille de police de mon bouton. C' est 18 pixels. Composez cela, taille de police 18 pixels. Et comme je l'ai déjà dit, c'est capitalisé. Donc, nous allons devoir utiliser la transformation de texte en majuscules, et puis bien sûr, nous voulons qu'elle soit centrée. Margin-gauche : auto, margin-droite : auto. Sauve ça. Venez à travers et vous y allez. C' est plus au centre. Nous avons juste besoin de réparer encore une fois le rayon de frontière. Jetons un coup d'oeil à cela par rapport à notre conception. Plutôt proche. La seule chose, comme je l'ai mentionné précédemment, est la marge, donc c'est environ 60 pixels et nous pourrions lui donner une marge supérieure de 60 pixels ici. Mais si nous inspectons et nous verrons que nous agrandissons la ligne en ayant une marge ici. Ce que j'aime faire dans ce cas, mettre en place une marge supérieure sur la soumission d'entrée. Je vais mettre un style en ligne sur la ligne de forme avant, et lui donner une marge de fond de 60. Cela garantit simplement que les hauteurs de ces lignes de formulaire restent les mêmes, et la marge est définie entre ces lignes. Ce que je pense est plus approprié, mais en même temps, ça n'a pas vraiment d'importance. Vous auriez pu aussi mettre la marge sur le bouton. D' accord. C'est notre forme faite. Passons rapidement au pied de page et terminons cette section, puis passons aux requêtes multimédias. Pour cela, nous devons faire une chose similaire à ce que nous avons fait ici. C' est juste un tas de liens qui sont actuellement organisés comme une liste, donc nous devons faire une chose similaire à ce que nous avons fait pour cela. Je vais en fait copier et coller ce que nous avons ici. Faites défiler vers le bas, collez-le dans. Au lieu de nav ul li, ce que nous ciblons est des liens de pied de page, et vous pouvez donc vérifier cela ici. On a des liens de pied de page avec un ul, puis un lis. Nous ne voulons pas qu'ils soient en majuscules, donc je vais lui donner une transformation de texte en majuscules, mais voyons ce qui se passe quand nous faisons ça. Super. Maintenant, nous devons aussi nous débarrasser de la décoration de texte et les rendre blancs. Donc, je vais copier et coller ça. Encore une fois, changer nav en liens de pied de page. Maintenant, vous ne pouvez pas les voir malheureusement, car nous devons réellement changer la couleur d'arrière-plan du pied de page. pied de page n'est donc qu'une balise, donc nous pouvons accéder à notre fichier Photoshop comme nous l'avons fait tout au long de cette section. Cliquez sur la boîte, déterminez la couleur de fond de cela, puis composez la dans notre CSS. Alors, voilà. Nous avons la couleur d'arrière-plan appropriée, mais nous ne sommes pas encore là, car nous avons cette marge au-dessus et au-dessous de la liste. Donc, si je dois inspecter cela, je peux trouver que la liste non ordonnée réelle, comme vous pouvez le voir ici par ces lignes orange, crée cette marge. Donc, je vais aller et cibler ces listes non ordonnées particulières comme celle-ci, et mettre la marge à zéro. Maintenant, si je reviens, rafraîchissez la page, maintenant, c'est de retour à la normale. Donc deux choses que je remarque maintenant de ceci à ceci est, numéro 1, nous devons agrandir la police. Alors inspecte ça en une seconde. Aussi que nous avons cette accroche sur le côté ici, où nous aimerions qu'elle soit plus centrée. Donc, nous allons donner au conteneur une largeur maximale et le centrer comme nous l'avons fait avec d'autres éléments ici. Donc, si je retourne à mon fichier Photoshop ici, je peux aller inspecter ce texte et voir qu'il fait 24 pixels. Alors faisons ça maintenant. La taille de la police, 24 pixels. Maintenant, avec le conteneur, si je regarde ici, il s'agit de prendre un outil de sélection et de le mettre d'un côté à l'autre, c'est d'environ 945 largeur, donc je vais créer un style sur pour les liens. Largeur maximale de ce montant, qui était 945, et comme d'habitude l'ordre margin-gauche, ordre margin-droite, sauf cela. Retournez à notre document ici. Maintenant, vous pouvez voir qu'il se centre. La seule autre chose vraiment évidente ici est que Twitter est une couleur différente dans ce design, et c'est parce que pour autant que je sache, c'est un lien actif, comme je l'ai mentionné précédemment, je ne sais pas comment ça pourrait être lorsque nous ne sommes pas réellement sur le site Web de Twitter en ce moment. Mais peu importe, nous avons décidé de le styler comme un lien actif. J' ai donc copié ce code hexadécimal, et ce que je vais faire, c'est cibler la même chose que j'ai ciblé juste au-dessus, mais cette fois mettre point actif sur le li, puis le hachage de couleur 30bae7, et voilà. Maintenant, pour le rendre parfait, il y a quelques problèmes de remplissage et de marge ici, donc comme vous pouvez le voir, il y a un peu de marge entre ici et là, environ 45 pixels, et en bas à peu près la même chose. Puis aussi entre eux, il y a environ 50 pixels entre eux aussi. Donc, pour obtenir un résultat similaire à cela, ce que je vais faire est de mettre un peu de rembourrage sur la liste elle-même. Dessus de rembourrage. Qu' est-ce que c'était encore ? Environ 50 meilleurs pixels de rembourrage, le bas de rembourrage, 50 pixels, et puis entre les éléments de la liste eux-mêmes, nous avons déjà un peu de rembourrage, mais peut-être que nous pouvons le rendre un peu plus grand, donc je vais pour les changer de 16 à 20. En revenant à notre conception, vous pouvez maintenant voir qu'il y a beaucoup plus de rembourrage, et il y a plus de marge entre chacun de ces éléments. En fait, c'est un peu trop, alors ce que je pourrais faire c'est composer ça à environ la moitié. Donc rembourrage haut, rembourrage bas 25. Ça commence à ressembler beaucoup plus à ce que nous avons ici. Encore une fois, il peut y avoir quelques petites différences, mais pour le but de cette leçon, je pense que nous l'avons assez proche de ce qu'il doit être, et si vous redimensionnez, vous pouvez voir que cela se passe assez bien, de manière réactive aussi. Mais comme je l'ai mentionné dans les leçons précédentes, vous pouvez commencer à voir le saut de page à différents points sur toutes les sections, si nous l'apportons un peu. Donc, avec celui-ci, le texte devient un peu gros et coincé ensemble. Le menu se casse sur une nouvelle ligne. Ce bouton tombe et passe au-delà de la hauteur de la section. Ici, ces colonnes deviennent super serrées et puis une rupture forcée sur une nouvelle ligne, et bien sûr, cela, forme ici, et le pied de page, nous allons devoir apporter quelques modifications à cela. La façon dont nous pouvons le faire est d'utiliser ce qu'on appelle des requêtes média. Donc, en ce moment, vous pouvez voir un site Web ou une page Web que nous avons développé pour le bureau qui fonctionne assez bien et qui est réactif à un certain point, mais ce que nous allons devoir faire, c'est d'ajouter ces requêtes multimédias pour s'assurer qu'il ressemble Parfait sur toutes les tailles d'écran. Donc, dans la prochaine vidéo, je vais vous montrer comment faire ça, mais je suis très excité que maintenant nous ayons transformé ce qui était. Je vais le faire à nouveau juste pour montrer la différence. Qu' est-ce que c'était pour maintenant cela juste en mettant dans certains styles CSS. C' est la puissance de CSS juste là. Alors donne-toi une tape sur ton dos pour venir aussi loin. Nous avons seulement un peu à faire en termes de requêtes médias, alors je vais vous montrer comment faire le menu mobile, ce qui est assez commun sur les sites mobiles. Parlez un peu de bootstrap aussi, et puis nous terminerons la classe. Pas longtemps maintenant, restez là les gars, et je vous verrai sur la prochaine vidéo. 11. CSS - Requêtes médias: Bienvenue les gars. Dans cette leçon, nous allons parler des requêtes des médias, et nous allons utiliser les requêtes des médias pour rendre notre page Web pleinement réactive. Rappelez-vous, quand je redimensionnais la page dans certaines leçons précédentes, elle a commencé à devenir un peu bizarre, commence une pause un peu, et nous pouvons corriger tout cela avec des requêtes média. Que sont les requêtes des médias ? Eh bien, il y a en fait quelques choses que vous pouvez faire avec les requêtes des médias. J' ai la définition ici de w3schools.com. Vous pouvez utiliser les requêtes de médias pour vérifier de nombreuses choses comme la largeur et la hauteur, l'orientation, la résolution. Mais dans le contexte du développement web responsive, nous pouvons utiliser des requêtes média pour modifier les règles de style de nos éléments en fonction d'une gamme de tailles d'écran. Pour la gamme de tailles d'écran, nous parlons généralement de largeurs d'écran. Nous allons plonger et vous montrer un exemple tout de suite. La première chose que je connaissais est la rupture, et j'aime mettre mes requêtes multimédias en haut de mes fichiers CSS afin qu'ils se chargent en premier. La première chose que je remarque est, ce que je vous ai montré avant quand je redimensionnais la fenêtre et que je reçois en dessous de 1140 pixels, je commence à obtenir des marges serrées de chaque côté, et je ne veux pas cela. Ici, il n'apparaît pas vraiment, mais là-haut dans l'en-tête, c'est le cas. Ce que je veux faire est au lieu d'avoir margin-left auto, margin-right auto parce que cela ne prend plus effet parce qu'il est plus petit que le conteneur. Je veux vraiment fixer une marge. Ce que je viens de faire là-bas a été inspecté un élément, et cela a soulevé les outils de développement. Je vais garder les outils de développement ouverts pour le reste de cette leçon. La raison pour laquelle est que je redimensionne, vous pouvez voir dans le coin ici, il arrive bien que très brièvement avec une largeur d'écran, alors je peux réellement voir à quel point les largeurs d'écran se cassent. Pour ce conteneur particulier, je sais que ce sera quand il fera moins de 140 pixels. Je ne suis pas sûr du navigateur que vous utilisez, mais si vous utilisez Chrome, vous pouvez rechercher les outils de développement. Je crois qu'ils sont dans le menu Affichage, Développeur, Outils de développement. Je les ai déjà ouvertes, donc elles ont fermé. Une autre vue que vous pouvez utiliser pour afficher à nouveau ces dimensions est de cliquer ici sur la barre d'outils du périphérique bascule, puis vous êtes sur le nœud Responsive. Vous pouvez redimensionner la fenêtre, et cette largeur restera là haut. Une chose que vous devez noter sur la vue réactive dans les outils de développement Google Chrome est qu'il simule un environnement mobile. Si vous voulez l'utiliser en allant de l' avant, avant d'entrer dans les plus petites tailles d'écran comme ici où c'est plus comme un téléphone ou une tablette, nous allons devoir mettre une balise supplémentaire dans notre HTML, et nous allons avoir pour en arriver à cela de toute façon, alors nous pourrions aussi bien le faire maintenant. Nous devons mettre dans la balise meta pour viewport. Je ne m'attends pas à ce que vous sachiez ce que c'est, mais si nous tapons juste balise meta pour viewport ou viewport meta tag dans Google, ça viendra pour nous. J' ai été à ce lien avant, qui est une assez bonne ressource de Mozilla. Ici, si nous faisons défiler vers le bas, nous pouvons voir la balise d'affichage que nous devons mettre dans ce projet. Avant de le mettre, qu'est-ce que c'est ? Eh bien, voici un peu d'arrière-plan si vous voulez en savoir plus à ce sujet. Fondamentalement, cela force la clôture à être la même que la taille de l'écran. Si vous vous demandez pourquoi ce ne serait pas par défaut, c'est un moyen de rendre sites optimisés non mobiles mieux en général sur des tailles d'écran étroites. Il s'agit en fait de quatre pages qui ne sont pas optimisées pour mobile. Bien sûr, en cette époque où le développement de tous nos sites Web est mobile responsive, donc c'est presque une donnée que nous voudrions mettre cette balise dans notre HTML. Un petit peu t'a amené là. C' est juste quelque chose dont nous devons nous souvenir lors du développement de sites web mobiles réactifs. Assurez-vous que la fenêtre d'affichage est égale à la largeur de l'appareil. C' est tout ce que nous avons besoin de mettre dans notre HTML. Revenons à nos styles, et construisons effectivement quelques requêtes média. J' aime mettre mes requêtes multimédia en haut afin qu'elles se chargent rapidement. façon dont vous écrivez un est en utilisant un support de symbole à, écran, puis c'est lorsque vous mettez dans votre largeur max-ou min-width. Vous pouvez également mettre des hauteurs, mais dans le but de cette leçon, nous avons juste besoin de faire des largeurs. Comme je l'ai mentionné précédemment, la marge de ce conteneur commence à se casser une fois où inférieure à 1140 pixels. Je vais définir ceci sur la largeur maximale, 1140 pixels. Ensuite, vous ouvrez la requête multimédia en utilisant à nouveau ces crochets bouclés. Ensuite, à l'intérieur des crochets bouclés, vous pouvez faire une règle CSS comme d'habitude. Je peux créer une règle pour conteneur au lieu de margin-left auto, margin-right auto, je vais faire margin-left, environ 15 pixels, margin-right 15 pixels. Si je sauvegarde ça, rechargez la page, vous pouvez voir que rien ne s'est passé. Laisse-moi vérifier ça. Si je vais dans le conteneur et que je l'inspecte, vous verrez que les styles arrivent, mais ils sont barrés. Ça veut dire qu'ils sont écrasés par ceux-là. Si je les décoche, vous verrez que ceux-ci s'appliquent maintenant. Bien sûr, nous ne pouvons pas les décocher pour chaque utilisation de site Web. Nous allons devoir trouver un moyen de corriger cela pour tous les utilisateurs. Un hack facile que nous pouvons utiliser est le point d'exclamation, important. Si vous mettez cela juste après la valeur de l'attribut, enregistrez cela, actualisez la page, puis il remplacera ce que nous avons ici. Maintenant, il y a toute une hiérarchie de spécificité en CSS, que j'ai parcourue dans mon cours sur CSS et HTML. Si vous voulez en savoir plus sur la hiérarchie, vous pouvez aller voir ce cours, comme je l'ai déjà mentionné. Fondamentalement, nous avons seulement besoin de mettre dans un important afin de passer au-dessus de cette règle dans la hiérarchie. Maintenant, il existe une autre façon de le faire, et c'est en plaçant cette règle dans une autre requête multimédia qui ne s'applique pas à cette taille d'écran, car cela s'appliquera à chaque taille d'écran car il ne se trouve pas dans une requête multimédia. Je pourrais simplement le faire pour ce cas particulier, moins à des fins de démonstration. Ce que je peux faire est de mettre une requête multimédia assez similaire au-dessus de celle-ci, mais au lieu de max-width, je mets min-width, et je vais composer la même valeur, mais un supplément. Maintenant, je vais copier ces styles. La largeur maximale peut rester la même sur les deux tailles d'écran. Mais je vais supprimer l'auto margin-gauche et margin-droite, et ne l'avoir que lorsque la taille de l'écran est supérieure à 1141 pixels. Si elle devient inférieure à cela, alors elle sera dans cette plage, et la marge gauche et la marge droite seront de 15 pixels chacun. Si je sauvegarde cela, actualisez la page ici, vous pouvez voir le même effet. Faites glisser cette fenêtre réactive un peu plus et voyez les changements que nous pourrions avoir à apporter sur les plus petites tailles d'écran. Une chose que j'ai remarqué est que le pied de page commence à se casser sur une nouvelle ligne à environ, appelons-le et voyons, à 932, c'est quand cela commence à se casser sur une nouvelle ligne. Maintenant, nous devons prendre une décision de conception ici. Que va-t-on faire quand la taille de l'écran est trop petite qu'elle ne puisse pas avoir tous ces éléments avec la même taille de police et le même remplissage. Eh bien, ce que je pense est le plus approprié, c'est d'avoir le saut de ligne, mais d'avoir tout le texte centré. Vous voyez ici comment GitHub flotte à gauche. Nous voulons que GitHub flotte au milieu, et nous voulons que les lignes soient aussi uniformes que possible, en termes de nombre de liens qu'ils ont sur chaque ligne. Encore une fois, c'est juste ma pensée. Vous pouvez le faire comme vous voulez, mais c'est ce que je pense être la meilleure façon de le faire. Je vais le simuler ici dans mes outils de développement. Ce que je peux faire est de composer la largeur maximale des liens de pied jusqu'à ce que nous commencions à voir plus d'entre eux tombés dans la deuxième ligne. Actuellement, on est sur 900, donc ça va devoir être plus bas que ça. Composez le 850 et voyons ce qui se passe. Espérons que vous êtes à l'aise avec l'utilisation des outils de développement. Je les utilise largement tout au long de ce cours, évidemment, parce qu'ils sont un excellent outil et vous pouvez expérimenter en temps réel avec différents styles. Si vous n'êtes pas à l'aise avec le faire de cette façon, vous pouvez toujours aller directement à votre fichier CSS, enregistrer, recharger la page, enregistrer, recharger la page, mais c'est un peu plus rapide. Nous en avons une seconde pour passer à une nouvelle ligne en ramenant cette largeur max-width vers le bas. Maintenant, nous avons en fait un nombre inégal de liens, donc nous n'allons pas avoir exactement la même chose sur chaque rangée, mais quatre et trois sont assez proches. Je vais monter jusqu'au moment où il se casse. C' est 676. Maintenant, nous devons nous souvenir des largeurs. J' ai oublié les points d'arrêt, donc je vais juste créer un framework de requête média pour l'instant. Je vais juste créer un espace vide pour le mettre. Mais nous savons que nous voulons que les liens soient entièrement mis à jour à une largeur maximale de cette valeur. Quand voulons-nous que ça arrive ? Si je recharge la page, nous pouvons réidentifier le point où elle se casse sur une nouvelle ligne. En utilisant la vue responsive, je compose les numéros et il semble que c'est 932. On va le mettre ici 932 pixels. Actualisez la page. Nous pouvons voir ici que notre style est à nouveau écrasé. Nous allons utiliser ce hack de l'important, et si je me rafraîchis à nouveau, vous pouvez voir qu'une fois qu'on sera descendu de 933 à plus bas, ça va se briser en deux lignes. Bien sûr, je veux que tout cela soit centré. Une chose que je peux faire à ce sujet est de mettre dans un style de centre d'alignement de texte. Encore une fois, c'est juste dans mes outils de développement pour vérifier si cela fonctionne. Ouais, ça a l'air bien. Allons ici, et alignons le texte au centre. Rechargez la page pour voir que ces modifications ont été rendues permanentes. Oui, maintenant on l'a décomposé sur une nouvelle ligne. Avant de faire défiler vers le haut et de travailler sur les plus petites tailles d'écran, je remarque en fait un petit problème que vous avez peut-être manqué. C' est qu'il y a plus d'espace à gauche ici qu'à droite. Ce n'est pas exactement assis au milieu, et cela va devenir plus prononcé si nous abaissons la largeur de l'écran. Comme vous pouvez le voir ici, c'est définitivement sur le côté. Si je reviens à 908 et j'ai un oeil à l'inspecteur pour les liens semble correct en termes de cases apparaissant à l'écran. Mais si je vais dans UL, je peux voir que le rembourrage, qui est représenté par la boîte verte, est en haut, en bas et à gauche. Nous définissons explicitement le rembourrage supérieur et inférieur, mais pour une raison quelconque, il y a un rembourrage gauche. Cela doit être quelque chose qui vient standard avec des listes non ordonnées. Mais c'est quelque chose que nous pouvons nous débarrasser en mettant une règle, le rembourrage a laissé 0. Là, vous pouvez voir que nous avons résolu le problème. Bien sûr, pour rendre cela permanent, nous devons le mettre dans notre fichier CSS. Je vais créer un style pour les liens de pied de page UL et changer le rembourrage gauche à 0. Maintenant, lorsque nous actualiserons la page, ce changement sera permanent. Maintenant que nous avons cet espace supplémentaire qui a été pris par le rembourrage, nous pouvons réellement changer cette largeur max si nous le voulons. Je peux le composer encore plus pour que plus de liens cassent sur la nouvelle ligne. C' est 636, semble être là où il est. Je vais le mettre à jour ici. 636. Actualisez la page. Maintenant, vous pouvez voir notre pied de page et nos liens de pied de page en ligne joliment au centre de la page. revenant à 908, Enrevenant à 908, et en regardant la page lorsque nous abaissons la largeur de l'écran, regardons quels problèmes surgissent. Cela devient un peu serré, mais je ne suis pas encore trop inquiet à ce sujet. On descend à environ 800. allait toujours bien. Descendre encore plus loin jusqu'à environ 750. Jetons un coup d'oeil maintenant. Tout va bien à part ici, on peut voir cette marée se briser en deux lignes, donc ça gâche un peu l'alignement. Une façon de corriger cela est de réduire la taille de la police. Je vais juste le composer dans le vrai inspecteur. 22 devrait suffire à régler cette question. Mais bien sûr, je dois savoir quand ce problème commence à se produire. Je vais me concentrer sur ce titre, faire sortir ma fenêtre, et on dirait que ça se produit à une largeur maximale de 797. Comme toujours, je vais faire une requête médiatique pour ça, et juste comme une petite note, les gars. Vous n'avez pas besoin de faire autant de requêtes médiatiques, nous pourrions combiner certaines d'entre elles en fait. Mais c'est comme ça que j'aime le faire. Traditionnellement, vous voudrez peut-être les combiner ou même avoir certains points de rupture, comme dans Bootstrap, que je vous montrerai plus tard. Mais pour moi, j'aime juste passer à travers et ne réparer les choses qu' une fois qu'il arrive à la largeur exacte de l'écran. C' est comme ça que j'aime le faire, n' hésitez pas à le faire dans l'autre sens. Cette note est terminée. Je vais créer un style pour le titre du blurb pour le faire 22 pixels. Taille de police 22 pixels, et parce que nous écrasons un style précédent où vous devez mettre important dessus, et là vous allez. À 797 étaient assez bons, allons glisser dans notre fenêtre encore plus vers le bas à environ 735. Oui, 700 ou 695. Maintenant, vous pouvez voir que ce saut de ligne commence à se produire à nouveau avec le titre. Mais cela étant dit, au lieu de changer la taille de la police de titre. Encore une fois, je pense qu'il est temps que cette ligne de quatre colonnes se transforme en une situation à deux colonnes, deux lignes. La façon dont nous pouvons le faire est de doubler la largeur de la ligne. Évidemment, lorsque nous allons dans des tailles d'écran plus petites et plus petites, il y aura un point où la colonne se casse vers une nouvelle ligne. Nous pourrions aussi bien le nicher à l'arrière tôt et ensuite nous pouvons résoudre ce problème de titre aussi. Ce que je vais faire est d'expérimenter avec 46,66 pour cent dans mes outils de développement juste pour voir que cela fonctionne. Vous pouvez voir que c'est le cas. Je vais choisir une largeur d'écran quand cela commence à se casser à nouveau. Ça semble arriver à 732. Encore une fois, en utilisant des requêtes de médias, largeur maximale 732, largeur de blurb 46,66 pour cent, et il est important de s'assurer qu'il remplace le style précédent. Actualisez la page. Maintenant, vous pouvez voir qu'une fois qu'il atteint 732, il va se diviser en deux lignes avec deux colonnes chacune. Une autre chose que je remarque que nous n'avons pas vraiment vu avant quand ils sont tous alignés l'un à côté de l'autre, c'est que nous avons besoin d'un peu de marge sur le fond. Ici, vous pouvez voir que c'est un peu trop proche de la section suivante, et ces deux sont un peu trop proches ensemble. Je vais donner au blurb un peu de marge aussi. Marge inférieure 30 pixels. Là, vous pouvez voir qu'il y a un peu plus de marge de respiration entre les éléments. Je n'ai pas eu à mettre de l'importance là-dessus parce que nous n'avons pas encore défini de règle pour le bas de la marge. 704, appelons vers le bas à environ, allons-y avec 50 incréments, 650. Je suis plutôt d'accord avec ça. Allons à 600, la forme semble bien. Maintenant, nous avons un problème. Nous pouvons voir que notre bouton se prolonge dans la section suivante. Je vais appeler pour voir quand ce changement se produira. Ça semble arriver exactement à 619. Comment je vais résoudre cela, que ce texte est un peu gros de toute façon. Je peux réduire la taille de cela et cela ramènera ce bouton dans la section. Vous devriez être habitué à écrire des requêtes médiatiques maintenant parce que nous avons déjà écrit beaucoup d'entre elles. Il suffit de composer dans une largeur maximale de 619, et pour la taille du titre, c'est sur 42 maintenant, je pense que 35 suffira. Mettons-le dans les outils de l'inspecteur. Ouais, ça a l'air plutôt bien. Je vais aller dans le titre principal et CTA, taille de police H1 35 pixels, et bien sûr, important de remplacer ce style précédent. Maintenant, si nous actualisons la page, ça va être permanent. Comme vous pouvez le voir, une fois qu'il atteint ce point, le texte devient plus petit et nous n'avons pas ce bouton dans la section suivante. Une autre chose que vous remarquerez est notre menu ici. C' est une nouvelle ligne et ça n'a plus l'air génial. C' est quelque chose que vous pouvez réparer maintenant, mais nous allons en fait construire un menu mobile spécifiquement pour mobile. Je ne m'inquiète pas à ce stade, ça va être la prochaine leçon. Mais regardons tout le reste sur notre page. Tout le reste est tout à fait bien encore. Je vais continuer, 550. Maintenant, nous entrons dans les tailles que vous pourriez voir sur votre téléphone. Ici, vous pouvez voir que le texte est un peu gros, nous allons avoir ce bouton qui se casse à nouveau. Je peux juste le dire. 450. C' est bon, 400 et maintenant vous pouvez voir ce bouton se briser dans cette section à nouveau. Je vais à peu près faire le même style, mais juste ajouter un nouveau point d'arrêt. Au point de rupture de 404, je veux que le cap devienne encore plus petit. Je vais le composer jusqu'à 25, juste pour que cela nous donne un peu de place pour travailler lorsque nous allons dans les tailles d'écran encore plus petites. Je peux essentiellement copier ce que nous avons déjà ici, changer ceci à 25 et changer le point de rupture ou la largeur maximale à 404. Maintenant, si je rafraîchis la page, vous pouvez voir une fois qu'elle arrive à ce point où le bouton allait se casser, elle revient maintenant en alignement. Comme vous pouvez le voir ici sur les services que nous fournissons, Il commence à être un peu serré avec ces colonnes, donc ce que je vais faire est d'en faire une ligne à une colonne à partir de maintenant. Faisons le 404 juste pour nous sauver écrire une autre requête média. Ce que je vais faire, c'est aller ici, blurb, largeur et faisons 90 pour cent. Cela fera en sorte qu'un seul va sur chaque rangée. On va devoir mettre cette étiquette importante comme d'habitude. Enregistrez, actualisez la page, et voilà. Maintenant, nous avons un problème avec la marge et si vous pouvez le voir mais il y a un peu plus de place à droite qu'à gauche, donc ce que je vais faire est de lui donner une marge égale gauche de 5 pour cent et une marge sur le droit de 5 pour cent. condition qu'il n'y ait pas de rembourrage, 5 plus 5 plus 90 ajouteront jusqu'à 100 et il devrait bien s'aligner. Comme vous pouvez le voir, il l'a fait. Défilant vers le bas, il devient un peu serré ici mais laissez-moi juste aller un peu plus bas taille d'écran à 350. N' oubliez pas d'ignorer le menu ici. Sur notre formulaire, ça devient un peu serré, mais tout va bien. Je vais le composer jusqu'à 300 et à 300, vous pouvez commencer à voir comment les boutons se gâchent. Ici, le message d'envoi et le bouton de travail avec nous sont un peu foutus. Maintenant, vous ne voulez pas optimiser les tailles d'écran qui sont comme ridiculement petites, comme 200. Une fois que nous entrons dans ces plus petites tailles d'écran, j'aime simuler les tailles d'écran des appareils populaires. Sur le Galaxy S5, voici à quoi ressemblera notre site Web à 360 pixels de largeur. Sur le pixel 2 avec une largeur 411, c'est à quoi ça va ressembler. Au pixel 2 Excel, c'est à quoi ça va ressembler, et ainsi de suite et ainsi de suite. Si nous allons sur la vue pour iPhone 5, vous pouvez voir les téléphones mobiles vont aussi bas que 320. Je pense que c'est à peu près aussi bas que ça arrive et c'est là que vous pouvez voir ce bouton déconner et aussi en bas. Ce que je vais faire, c'est travailler sur ce bouton et peut-être que ça pourrait finir pour nous. Si je fais quelques expériences ici, si j'abaisse la taille de la police, peut-être que ça marchera. Oui. Alors je vais le faire. Voyons à quel moment. On peut toujours composer le 320, mais je vais trouver le point exact qu'il gâche pour qu'il soit réactif sur toutes les tailles d'écran. En le composant, il semble que cela arrive autour de 314 mais pour une raison quelconque, si nous actualisons la page sur 320, iPhone 5, ça devient un peu foiré. Faisons simplement 320 à l'écran multimédia et la largeur maximale 320. Nous allons réduire la taille de police du gros bouton à, qu'est-ce que nous avons décidé ? Je pense que c'était 15 pixels et nous allons mettre un important à la fin de cela. Maintenant, si je rafraîchis la page, vous pouvez voir que les boutons ne sont plus cassés. Si je descends ici, ce bouton n'est pas cassé non plus. Maintenant, ce que vous pourriez vouloir faire est de rendre le détenteur de place et le texte que vous tapez ici plus petit et peut-être que vous voulez réellement tester sur mobile pour voir si vous devez le faire. Mais dans le but de ce cours, je pense que nous sommes assez proches de la réactivité mobile. Jetons un coup d'oeil à notre travail en revenant en mode responsive et faisant glisser d'une taille d'écran large à une taille d'écran serrée. Faisons-le section par section et faisons une vérification finale pour voir si quelque chose de majeur se sépare du menu bien sûr. Ici, vous pouvez voir comme si ça allait bientôt se briser, mais nous avons mis dans ces requêtes médiatiques. Encore une fois, comme nous allons de plus en plus petits, il casse en dessous de 300, mais je ne pense pas qu'il y ait des tailles d'écran inférieures à 300, donc nous n'avons probablement pas besoin d'optimiser pour cela. Jetons un coup d'oeil à notre deuxième section. Comme vous pouvez le voir, il commence comme une rangée à quatre colonnes, devient plus serré et plus serré. Le titre devient plus petit, puis on se casse en une ligne à deux colonnes, puis à une certaine taille d'écran, on se casse en une ligne à une colonne. Ensuite, pour le formulaire, le formulaire que nous n'avons pas eu à faire beaucoup de changements. Je ne pense pas qu'on ait changé quelque chose à ce sujet. C' est la beauté du flex et la façon dont nous l'avons mis en place. Si nous allons de plus en plus bas et de plus en plus bas, cela continue à regarder bien. Peut-être que nous voulons réduire la taille du texte de cette adresse ici et bien sûr, le pied de page. Si nous descendons vers le bas, nous pouvons voir qu'une fois que nous sommes forcés de casser sur une nouvelle ligne, il en casse deux supplémentaires, relie une nouvelle ligne, le centre au milieu, puis que vous faites glisser l'intérieur et l'intérieur, ça reste centré et ça a l'air bien. Voilà, les gars. C'est notre site web maintenant réparé pour mobile avec des requêtes média. Encore une fois, comme je l'ai mentionné, le menu est la dernière chose à régler. Ce que nous allons faire est d'avoir ce qu'on appelle une icône de hamburger ici, afin que vous puissiez activer et désactiver le menu et que nous allons le formater plus bien. C' est assez standard dans les sites Web modernes et les applications Web. Je pense que c'est une leçon importante à avoir. Espérons que cette leçon n'a pas été trop longue sur les requêtes des médias. Comme je l'ai dit, j'aime avoir beaucoup de requêtes médiatiques, mais vous pouvez combiner certaines d'entre elles aussi et avoir moins de points d'arrêt, moins de points où les choses se passent. Mais comment j'aime le faire est de commencer large, baisser la largeur de l'écran et fixé au fur et à mesure que vous allez. Différents coups pour différents types, il n'y a pas de mauvaise façon de le faire. Tant que le site Web apparaît bien sur toutes les tailles d'écran, c'est la chose la plus importante. Merci de regarder les gars, j'ai hâte de vous voir dans la prochaine vidéo où nous allons travailler sur ce menu mobile. 12. Créer un menu mobile: Pour terminer notre projet de page web responsive, ce que nous allons faire dans cette leçon est de transformer ce menu en un menu réactif mobile. Comme nous abaissons la largeur de l'écran ici, je peux voir qu'il colle autour et se casse sur une nouvelle ligne et à une certaine taille d'écran, l' un des éléments se casse sur une troisième ligne. Maintenant, cela ne semble pas trop mal sans 1, 2, 3, 4, 5 liens de menu, mais sur d'autres sites, nous pourrions avoir six éléments de menu ou plus et une fois que nous atteignons une largeur d'écran par ici, cela commence à devenir un peu bondé. Il commence à être plus difficile pour les gens d'appuyer avec leurs pouces sur mobile et nous avons besoin d'une solution. Une chose très courante, et celle que nous allons construire dans ce projet, est quelque chose que vous avez probablement vu auparavant. Je vais ouvrir mon propre site web, christhedeveloper.com et vous pouvez voir que nous avons un menu de niveau supérieur ici que lorsque nous réduisons la taille de l'écran devient une icône de hamburger, que nous pouvons maintenant basculer le menu de manière verticale. C' est la différence entre une version de bureau et une version mobile. Pour ce faire, nous allons avoir besoin de HTML et CSS bien sûr, mais nous allons aussi avoir besoin de JavaScript. Parce que si j'active et désactive les choses, je rend la page Web interactive et pour toute interactivité sur le front end, nous devons utiliser JavaScript. La première chose que je vais vouloir faire est de créer le lien pour développer et contracter le menu, et ce dont nous avons besoin pour cela est l'icône du hamburger. Maintenant, comme nous l'avons fait avec l'importation de la police pour Titilium Web pour utiliser cette police dans notre projet, nous allons devoir importer ce qu'on appelle une police d'icône. Une police d'icône est à peu près la même chose qu'une police de texte ordinaire, sauf qu'au lieu de ces lettres de l'alphabet, nous allons avoir différentes icônes. La police d'icônes que nous allons utiliser pour ce projet et probablement la plus populaire au monde est appelée Font Awesome, et vous pouvez y accéder en allant sur fontawesome.com. Il suffit de cliquer sur Commencer à utiliser gratuitement, et voici le moyen le plus simple de le mettre en place dans votre page Web, juste en copiant ce morceau de HTML. Je vais copier cela et comme je l'ai mentionné, quand nous avons fait la balise Google, nous allons juste la lier à partir d'un CDN externe, ce qui signifie que nous n'avons pas à télécharger la police nous-mêmes. Voilà, c'est une étiquette assez longue, il y a quelques attributs ici que nous n'avons pas vraiment besoin de comprendre. Cela va importer le fichier dont nous avons besoin pour accéder à l'icône de hamburger. Pour revenir au site Font Awesome, nous avons juste besoin de rechercher la référence pour l'icône de hamburger. On peut aller dans les icônes et il y en a plus de 5 000, donc on peut filtrer ici. Celui que nous recherchons s'appelle barrs et vous pouvez voir ici c'est le premier élément. Je vais cliquer sur celui-ci et il va me donner le HTML exact que nous devons mettre dans ce projet afin de le faire apparaître. Je vais cliquer pour copier et ce que je vais faire est, dans notre en-tête, créer un peu d'espace et je vais le mettre après le nav. Je vais mettre une balise de lien, et pour l'instant je vais juste l'avoir vide. Je vais lui donner un ID d'icône de menu, et plus tard, je vais mettre du code JavaScript là pour qu'il fasse quelque chose quand on clique dessus. Dans cette balise de lien, je vais mettre le code que nous venons de copier à partir de là. Si nous retournons sur notre site Web et actualisons la page, vous pouvez voir que nous avons l'icône du hamburger là, mais c'est juste contre le logo et c'est bleu et il n'est pas vraiment formaté correctement. C' est ce que nous allons devoir faire ensuite, et l'autre chose est que nous ne voulons pas qu'il apparaisse sur EVA de bureau. Je vais ajouter un attribut de style au lien et le définir pour n'afficher aucun. Ce que cela va faire est de s'assurer que par défaut il ne s'affiche pas lorsque nous chargeons notre site Web. Maintenant, bien sûr, nous voulons qu'il s'affiche sur une taille d'écran plus petite. Ce que je vais faire est de trouver un point de rupture qui s'aligne avec l'une de nos requêtes médias juste pour le rendre plus facile, puis je vais le faire apparaître sur mobile. ouvrant à nouveau nos outils de développement pour que nous puissions voir les fouets d'écran, je vais amener la largeur de la fenêtre à un point où je pense qu'il doit se briser dans le menu mobile. Maintenant, parce que nous n'avons pas beaucoup de liens de menu, nous pouvons en fait aller assez loin sans entrer dans le menu mobile. Sur d'autres sites Web, vous pouvez avoir six liens ou plus, sorte que vous voulez faire le point de rupture plus tôt ou même masquer certains des liens. Mais pour nous, je vais juste choisir autour de 797. Encore une fois, vous pouvez choisir où vous voulez le mettre, nous pourrions le faire beaucoup plus tard ici comme 619, ou ici à 797, c'est à vous de décider. C' est plus facile si nous utilisons un point de rupture que nous avons déjà déterminé ici dans nos requêtes médias. En passant à notre code, j'ai dit que nous allions basculer à 797 pixels. Ce que je vais faire, l'icône du menu cible et le définir pour afficher inline-block, et nous devons le rendre important parce que nous avons déjà placé le style d'affichage none sur l'élément réel. Nous allons avoir besoin d'utiliser important pour remplacer cela. Maintenant, rafraîchissant la page, vous verrez que l'icône ne s'affiche pas, mais si nous abaissons la largeur de la fenêtre à moins de 797, vous pouvez voir qu'elle commence à apparaître là-bas. Maintenant, nous devons mettre beaucoup plus de styles pour que cela fonctionne, alors commençons avec ça. Si nous apportons l'écran que nous avons à nouveau, la première chose que je remarque est qu'il est bleu et il est petit. Afin de corriger cette couleur blanche et la taille de la police, je vais définir à 25 pixels. Maintenant, si vous êtes un peu confus pourquoi nous utilisons la taille de la police, n' oubliez pas que nous utilisons des polices d' icônes et simplement parce que ce ne sont pas des lettres alphabétiques, il agit toujours comme une police dans HTML. Si je rafraîchis la page, vous pouvez voir qu'elle a l'air beaucoup plus grande et qu'elle est maintenant blanche. Il a l'air comme nous le voulons, mais la position de celui-ci reste un problème. Maintenant, une chose que nous pourrions être enclins à faire est de la flotter vers la droite. Maintenant, vous pouvez voir qu'il flotte entre l'image et le menu ici. Mais le truc est sur mobile, nous ne voulons pas que ce menu apparaisse. Nous voulons qu'il apparaisse verticalement lorsque nous activerons et désactivons cela. Une autre chose que nous allons devoir faire dans cette requête multimédia est de désactiver complètement le menu. Si nous regardons ici, c'est juste à l'intérieur de ce nav, auquel nous n'avons pas donné d'ID, et nous n'avons utilisé nav qu'une seule fois donc il est sûr pour nous d'utiliser le sélecteur de niveau de balise. Ce que nous allons faire est de définir le NAV pour n'afficher aucun sur cette taille d'écran. Maintenant, si je rafraîchis la page, vous pouvez voir qu'une fois que nous aurons atteint cette taille d'écran, le menu du bureau se cachera et puis une icône de hamburger apparaîtra. On a juste besoin de lui donner une certaine marge parce qu'il est coincé à la limite ici. Je vais lui donner 15 pixels de marge sur la droite. Maintenant, vous pouvez voir qu'il commence à se détacher du côté. Il est également aligné un peu plus haut que notre logo ici, donc vous pourriez vouloir donner une certaine marge au sommet aussi, peut-être environ 10 pixels. Il y a une autre façon de le faire en utilisant la position absolue, mais je ne vais pas vous confondre davantage. Il y a en fait quelques façons de faire apparaître cette icône. Je vais réduire cette marge en haut à cinq. Je pense que c'est un peu plus dans la ligne. Douce. Maintenant que nous avons le menu de bureau caché sur mobile, et au lieu de cela, nous avons cette icône de hamburger à la place, la prochaine chose que nous allons devoir faire est d'obtenir cette icône de hamburger pour réellement basculer le menu. Sinon, quel est le but de masquer le menu du Bureau pour commencer ? Pour cela, nous allons devoir utiliser JavaScript parce que chaque fois que nous devons accepter l'entrée de l'utilisateur et changer quelque chose sur la page, nous devons utiliser JavaScript. Ce que je vais faire est de copier et coller du JavaScript parce que ce n'est pas exactement un cours JavaScript. Mais je vais expliquer quelle est la fonction que nous allons utiliser et comment cela fonctionne réellement. abord, avant de créer la fonction, je veux ajouter un attribut à notre lien ici. Cet attribut va être appelé sur clic, et à l'intérieur je vais ajouter une fonction JavaScript. La fonction JavaScript va s'appeler Toggle Menu, et pour définir une fonction, nous devons mettre des crochets ouverts et fermant et un deux-points. Maintenant, ce que cela va faire dans le discours technique est d'ajouter cette fonction à l'événement sur clic de cette balise de lien. Mais vraiment tout ce que vous devez savoir est que cette fonction se déclenchera lorsque nous cliquerons sur ce lien. Maintenant, pour désactiver ce menu et activer, nous allons devoir l'étiqueter d'une manière ou d'une autre. Nous pourrions l'étiqueter en utilisant nav, donc juste un sélecteur de niveau de balise, mais il y a une chance qu'il puisse y avoir plusieurs balises de navigation. Je vais juste être un peu plus diligent ici et définir cela avec un ID. Je vais appeler ce menu principal. C' est tout ce que nous devons faire dans notre HTML pour que cela fonctionne. Maintenant, pour le JavaScript que je vais mettre en bas de la page. Nous pouvons mettre du JavaScript dans notre document HTML en utilisant des balises de script, puis entre les deux je vais copier et coller ma fonction. C' est la fonction que j'ai préparée plus tôt. C' est ce qu'on appelle le menu à bascule. Comme vous pouvez le voir, cela correspond au nom ici, et ce qu'il va faire est de saisir l'élément par l'ID du menu principal, qui est juste ici, le nav et va vérifier s'il est actuellement affiché, c'est-à-dire est le bloc de style d'affichage. Si c'est le cas, définissez l'affichage sur zéro. Si ce n'est pas le cas, il va être réglé pour bloquer. Un simple morceau de code. Il va juste basculer le style d'affichage de zéro à bloc selon qu'il est actuellement en bloc ou actuellement en aucun. Une fonction assez basique là-bas. Maintenant, si je sauvegarde et recharge la page, maintenant tout est le même. Mais si je clique sur cette icône, vous pouvez voir qu'elle désactive et active le menu. Maintenant, le problème ici est que nous avons le même menu que nous le faisons sur le bureau. C' est exactement le même menu du bureau, juste sur une taille d'écran différente. La prochaine chose que nous allons devoir faire est de changer le style de ce menu. Ce que je vais faire pour qu'il n'affecte pas menu du bureau est de le définir dans cette requête multimédia. Dans cette requête multimédia, l'icône de menu va s'afficher. Il va avoir tous ces attributs. Le nav va s'éteindre par défaut, mais si nous cliquons dessus, cela change alors pour afficher inline-block. Pour finir, nous avons juste besoin de donner des styles à cela pour le rendre vertical. Nous avons déjà défini un ID, donc je peux aller et cibler le menu principal en utilisant son ID et pour obtenir les résultats que je veux, je vais faire le menu pleine largeur, et je vais faire chaque élément dans le menu. En utilisant un sélecteur de descendant ici, je cible les éléments de liste dans une liste non ordonnée dans le menu principal. Je vais définir cela pour afficher le bloc au lieu du bloc inline-block. Si je sauvegarde cela, actualisez la page maintenant que vous pouvez voir lorsque vous basculez sur le menu, vous obtenez une liste verticale. Maintenant, le problème avec ce menu vertical est qu'il pousse aussi notre icône de hamburger vers le bas. C' est parce que tous nos éléments flottent. Rappelez-vous que nous avons défini cette icône de menu pour flotter à droite et si nous faisons défiler vers le bas jusqu'à l'endroit où nous avons défini le nav, nous l'avons réglé pour flotter à droite aussi. Si ces éléments flottants, si l'un change l'autre va changer. Nous avons juste besoin de fixer cette icône à droite plutôt que de l'avoir flottante. Ce que je vais faire est d'utiliser la position absolue, et au lieu de la marge supérieure, nous allons le définir à 5 pixels supérieurs et à droite 15 pixels. Vous n'êtes peut-être pas familier avec la position absolue, mais c'est juste un moyen que nous pouvons changer le positionnement d' un élément pour le fixer dans une certaine position et utiliser le haut, droite, la gauche et le bas pour le positionner en fonction de la fenêtre. Actualisation de la page. Maintenant, ça va être trop loin, mais au moins ça reste au seul endroit. Je vais expérimenter avec des sommets ici. Peut-être 20 pixels, pas beaucoup plus. Essayons 50 pixels. Essayons 55. Maintenant que j'ai expérimenté avec ça, je vais ajouter 50 à notre sommet, en faire 55 pixels. Voilà, les gars. C'est une façon de contourner le flotteur est de le fixer à ce bord de la fenêtre en utilisant la position absolue. Cela semble assez bien jusqu'à présent, mais ce que je veux faire pour le rendre plus évident où le menu commence et se termine est de lui donner une bordure. En descendant dans notre menu principal ici, je vais définir une bordure et ce sera une ligne blanche unie de 1 pixel. Essayons ça. Rafraîchir la page, puis l'activer. Vous pouvez maintenant voir une bordure autour du menu. Mais je ne l'aime pas tout à fait sur les côtés et sur le dessus, donc je vais changer ça en bordure inférieure pour qu'il aille seulement sur le fond. Actualisez la page, et maintenant vous pouvez voir qu'il y a une ligne ici pour vous dire que c'est la fin du menu. Nous pourrions également mettre des bordures sur les éléments de ligne eux-mêmes, mais cela me semble correct. Peut-être qu'on veut en mettre un sur le dessus. Bordure, en haut, 1 pixel. Encore une fois, les gars, beaucoup de choses sont subjectives, donc si vous voulez y aller, affiner un peu plus et le rendre plus agréable et mobile, faites certainement ça. Je voudrais probablement ajouter un peu plus de marge au sommet. C' est comme la saison au goût. Il y a beaucoup de subjectivité impliquée et ouais, utilisez simplement votre propre discrétion sur la façon dont vous voulez qu'elle ressemble. Mais dans l'ensemble, je suis plutôt content de ça. Si nous avons testé sur ordinateur de bureau et mobile maintenant, sur bureau si nous redimensionnons, il ne va pas apparaître. Mais si nous actualisons la page, elle va apparaître et si nous allons dans tailles d'écran plus petites, nous pouvons l'activer et la désactiver. Si on l'a allumé et qu'on y retourne, on peut le voir allumé. Si nous voulions résoudre ce petit problème, nous pourrions créer un autre événement JavaScript qui détecterait quand l'écran devient plus grand, puis réactiver ce menu. Mais je pense que c'est un petit problème parce que beaucoup de gens ne vont pas redimensionner leur fenêtre comme ça. Ils vont probablement charger leur largeur de fenêtre à la largeur à laquelle ils vont l'utiliser. C' est un peu plus que nous pouvons mettre, mais dans le but de cette classe, je pense que nous avons fait assez pour montrer la mécanique de la façon dont vous feriez fonctionner ce menu mobile et comment vous le feriez se cacher sur le bureau et ensuite apparaître sur mobile. C' est tout pour cette conception de page web réactive. J' espère que ça n'a pas été trop long pour vous. J' ai une leçon de bonus après celle-ci sur Bootstrap. Si vous êtes intéressé par la façon dont vous pouvez rationaliser et gagner du temps sur la création de tous ces styles, restez certainement autour de la leçon bonus. La leçon bonus sur Bootstrap va être sur l'utilisation de styles pré-faits. Comme vous pouvez le voir ici, la majeure partie de cette classe a écrit ces styles CSS. Mais en utilisant Bootstrap, nous pouvons écrire notre HTML d'une certaine manière avec certaines classes et ne pas avoir à écrire autant de CSS. Si vous êtes intéressé à faire ce que nous venons de faire, été d'une manière plus rapide en utilisant Bootstrap, certainement rester autour. Je te vois dans la prochaine vidéo. 13. Bonus : Introduction à Bootstrap: Bienvenue à tout le monde dans notre leçon bonus sur Bootstrap, la bibliothèque HTML, CSS et JavaScript la plus populaire au monde. Qu' est-ce que tout ça veut dire ? Eh bien, Bootstrap est juste un tas de code que nous pouvons brancher dans notre projet qui nous permet de gagner du temps en écrivant tous ces styles, et aussi du JavaScript. Si nous allons sur getbootstrap.com ou rechercher Bootstrap dans Google, nous pouvons accéder au site Web Bootstrap. Maintenant, si vous voulez creuser, ce ne sera pas une vidéo approfondie sur Bootstrap. N' hésitez pas à lire la documentation, regardez quelques exemples. Ce que je voulais faire dans cette vidéo particulière est montrer comment Bootstrap affecterait notre projet actuel, et comment nous changerions notre HTML pour utiliser des styles qui sont déjà intégrés dans Bootstrap pour nous faire gagner du temps en créant des pages Web à partir de décors ou de maquettes de sites Web. Je vous ai montré cela quelques fois tout au long du cours, mais si je vais ici et supprimer le lien ou le commenter, donc cela ne s'applique plus à la feuille de style, et je rafraîchis la page, c'est à quoi ressemble notre page Web comme sans CSS. Maintenant, ce que nous pouvons faire est d'ajouter dans Bootstrap et de voir comment cela affecte notre page HTML, puis nous pouvons utiliser les styles et les classes Bootstrap pour le rendre semblable à ce que nous avions avec Bootstrap. Revenons à notre Bootstrap Home et cliquez sur « Commencer ». Maintenant, comme nous l'avons fait avec Google Fonts et Font Awesome, nous pouvons télécharger la police, le CSS, tout cela nous-mêmes, puis le référencer. Mais j'aime utiliser le CDN, nous évite d'avoir à le télécharger sur notre ordinateur. Si je copie juste la balise HTML qu'ils ont définie ici, cela chargera CSS dans notre document. Dans le but de cette leçon, je ne vais pas m'embêter avec le JavaScript. C' est juste le CSS. Une fois que nous l'avons chargé, je vais actualiser cette page et voir ce qui se passe. Comme vous pouvez le voir, nous voyons déjà quelques changements de style. La police est différente, et nous pouvons également voir qu'elle utilise aussi notre conteneur. Mais dans la version Bootstrap d'un conteneur, il y a beaucoup plus de points d'arrêt et de pièces où il change la largeur du conteneur. entrant dans notre documentation pour Bootstrap, recréons l'en-tête en utilisant Bootstrap. Je vais cliquer sur « Composants » ici, et nous pouvons commencer à utiliser certains des composants Bootstrap. Pour l'en-tête, je vais trouver Navbar, qui est l'équivalent de l'en-tête dans Bootstrap. Ici vous pouvez voir le code HTML requis pour faire cette barre de navigation ici. Pour que le nôtre ressemble à ça, nous n'aurions pas à changer de CSS parce qu'il est déjà intégré. Nous aurions juste besoin de mettre dans ce HTML. Ce que je vais faire est de copier ceci, je vais placer ces code-à-côte juste pour que je puisse copier les tags ul. Accueil sera le même ensemble de fonctionnalités. Nous allons mettre sur. Ensuite, au lieu de travail de tarification, et puis c'est un lien désactivé. Nous n'avons pas vraiment besoin de ça, donc je vais supprimer ça. Copiez et collez ces deux à nouveau pour nos autres liens. Blog et contact. Je vais mettre Blog et Contact. Maintenant que nous avons copié à travers les éléments de menu, nous pouvons simplement supprimer notre ancien nav complètement. Si je garde cela, retournez à notre projet, voyons comment il a affecté. Maintenant, vous pouvez voir que nous avons créé cette barre de navigation pour nous. Ce n'est pas exactement comme notre conception, mais cela nous fait gagner beaucoup de temps avec la création de CSS. Comme vous le verrez si vous êtes allé dans des exemples ici, tous les sites Bootstrap ressemblent car ils utilisent les mêmes styles, donc vous obtiendrez un peu d'aspect Bootstrap. Vous êtes peut-être familier avec le look Bootstrap maintenant quand vous le voyez. Si vous voyez un site Web qui ressemble à ceci, vous pourriez soupçonner qu'il s'agit de Bootstrap. Vous pouvez réellement vérifier en entrant dans le code source et en vérifiant la référence à Bootstrap. Ici, vous pouvez le voir juste là. Encore une fois, il ne va pas montrer exactement comme notre design, mais ce qui est une caractéristique vraiment puissante de Bootstrap, c'est le système de colonnes. Mais avant d'arriver à ces colonnes, je veux réparer ce bouton. Dans Bootstrap, vous avez des styles Button dès la sortie de la boîte. Je vais cliquer sur « Boutons » ici, et vous pouvez utiliser une classe de btn btn-primary pour transformer n'importe quelle balise de lien en un bouton qui ressemble à ça. C' est ce que je vais faire. Au lieu de gros bouton de classe, je vais remplacer cela par la classe btn, btn-primary, recharger la page, et maintenant vous pouvez voir que nous avons un bouton de style Bootstrap où si nous mettons notre curseur dessus, curseur se transforme en un pointeur, et aussi la couleur du bouton change, sorte que nous sachions qu'il s'agit d'un bouton. Comme je l'ai dit, cependant, ce sont les colonnes qui rendent Bootstrap très puissant. En termes de services que nous fournissons, nous pouvons changer cela en un système de colonnes dans Bootstrap. Afin de voir comment vous feriez cela, nous pouvons cliquer sur « Mise en page » ici, et nous pouvons en apprendre davantage sur la grille. Ici, vous pouvez voir les différents points de rupture lorsqu'un style finit par changer à ces points spécifiques. Rappelez-vous, dans la vidéo précédente, j'ai parlé façon dont dans mon approche, nous avons utilisé beaucoup de points d'arrêt différents. Dans Bootstrap, ils ont juste 1, 2, 3, 4 points d'arrêt majeurs. Quoi qu'il en soit, ce n'est qu'une note d'accompagnement. Si nous faisons défiler vers le bas, ils n'ont pas réellement de section sur les lignes et les colonnes. Je pense que ça pourrait être dans un menu différent ici. Laissez-moi chercher dans cette boîte, lignes, système de grille. On y va. Il se trouve dans l'élément de menu Grille dans Mise en page. Ici vous pouvez voir comment cela fonctionne. Je vous encourage à aller lire ceci si vous êtes intéressé par Bootstrap. C' est assez en profondeur, et c'est une excellente ressource pour apprendre comment cela fonctionne. Mais fondamentalement, ce que vous avez est divs avec une classe de rangée, et puis à l'intérieur, vous avez des divs avec une classe de col. Ensuite, pour définir la largeur que vous voulez ces colonnes, vous pouvez mettre dans un autre style qui indiquera à l'élément HTML la taille que vous voulez qu'il soit. Il s'agit, bien sûr, d'un système réactif. Cela va garder ces proportions au fur et à mesure que vous redimensionnez la page. On y va. Des cours réactifs. En ce qui concerne notre projet, nous avons cette ligne de blurb, puis nous avons des blurbs. Donc, au lieu de blurb row et blurb, je vais juste me débarrasser du blurb et l'avoir comme ligne, puis changer tous les blurbs en colonnes. Parce que nous avons quatre colonnes que nous voulons de largeur égale, et Bootstrap fonctionne sur un système à 12 colonnes, nous devons diviser 12 par 4, et cela déterminera quelle classe nous utilisons. Donc 12 divisé par 4 est 3, donc nous pouvons mettre dans un tiret ici et en faire une mise en page à trois colonnes, puis mettre dans le numéro 3. Je garde ça, actualise la page ici. Vous verrez maintenant que nous avons une jolie colonne tout de suite. Si nous redimensionnons la page, regardez ceci, ils commencent à redimensionner. À un certain moment, il tombe en panne. Une fois qu'il tombe en panne, cependant, nous n'avons pas besoin de créer de nouvelles règles CSS. Tout ce que nous devons faire est d'ajouter plus de classes à nos colonnes ici. Nous voulons qu'il se casse sur une nouvelle ligne à un certain point d'arrêt. En utilisant les points d'arrêt de Bootstrap comme référence, ici vous pouvez voir extra small, medium, large et extra large. Disons, à moyen terme, nous voulons que ce soit une mise en page à deux colonnes par ligne. En plus du col 3, avoir col md pour moyen, puis au lieu de trois, six ; ce qui double ce nombre. Maintenant, quand nous actualisons la page, cela change la colonne. Malheureusement, lorsque nous redimensionnons la page de cette façon, cela ne changera pas de cette mise en page col-mid 6. Ce que nous allons devoir faire, c'est ajouter de gros entre les deux. Le code pour le plus grand est lg. Je vais enregistrer cela, rafraîchir la page, et maintenant quand elle sera sur ce support, ce sera une mise en page à deux colonnes. Ensuite, quand il est sur les tailles d'écran moyen sont plus faibles, il va être une mise en page à deux colonnes. Vous pouvez effectivement voir qu'il se casse en une mise en page d'une colonne plus tard également. Il suffit de le traîner à nouveau. Vous pouvez voir que nous avons ces colonnes réactives sans avoir à écrire de CSS nous-mêmes est juste à propos d'utiliser les bonnes classes ici. Si vous regardez réellement le fichier Bootstrap, il est énorme. Il y a tellement de styles CSS différents. Il faudrait beaucoup temps pour l'écrire nous-mêmes. Il y a beaucoup de choses que nous pouvons faire avec seulement des classes et des ID dans Bootstrap. Tout le CSS est essentiellement écrit pour nous, à part les choses que nous voulons personnaliser nous-mêmes. Comme, par exemple, les arrière-plans que nous avions, nous n'avons pas ces couleurs d'arrière-plan en ce moment. Nous aurions encore à écrire des styles nous-mêmes. Nous relions toujours une feuille de style externe et écrivons nos propres styles en plus de cela. Mais comme vous pouvez le voir, nous pouvons prendre soin de certains des aspects de style courants en utilisant des classes Bootstrap. Une autre chose que je veux attirer votre attention est qu'il nous a donné un menu mobile par défaut. Voyez comment, quand on va plus loin, ça se contracte. Mais le problème et la raison pour laquelle il ne bascule pas est parce que nous avons besoin d'importer ce JavaScript aussi. Rappelez-vous, nous n'avons lié que la feuille de style, pas le JavaScript. Juste pour réparer cela rapidement, je peux copier tous ces liens JavaScript, aller à ma tête, je vais étendre ici, mettre tous ces liens JavaScript, enregistrer, revenir à notre projet, et le rendre plus petit. Maintenant, vous pouvez voir que notre menu est basculant. Je ne vais pas parcourir toute la page et la recréer en utilisant Bootstrap, cela prendrait juste trop de temps, et c'est juste une leçon bonus. Je voulais juste vous montrer que vous pourriez utiliser Bootstrap pour gagner du temps, tirer parti de certains styles déjà créés, et, espérons-le, vous éviter d'écrire une feuille de style aussi grande que vous l'avez fait ici. La chose que Bootstrap aide vraiment, c'est ce que je vous ai montré, le système de colonnes est incroyable. Les colonnes et les conteneurs, nous n'aurons pas à nous mettre à jour. Bootstrap est très bon pour faire tout s'adapter bien sur différentes tailles d'écran. Il prend soin de beaucoup de ce travail réactif pour nous. Si vous développez avec Bootstrap comme point de départ, vous avez de bonnes chances que tout fonctionne bien sur mobile et bureau. C' est à peu près les gars. C' est la leçon bonus où nous parlons de Bootstrap. Si vous voulez que j'aille en profondeur avec Bootstrap, faites-le moi savoir. Ça pourrait être une idée pour un futur cours. Quoi qu'il en soit, j'espère que vous avez appris une chose ou deux sur la création de pages Web basées sur des conceptions. Encore une fois, s'il y a une zone particulière qui vous a confondu, soit le JavaScript, cesoit le JavaScript,que ce soit le CSS HTML, allez certainement vérifier mes autres classes, si vous êtes intéressé, vous pouvez obtenir un compréhension de ce que tout fait. Malheureusement, je n'ai pas eu le temps de passer en revue tous les principes fondamentaux du HTML et du CSS, et de m'en tenir au projet de classe. Mais si vous êtes intéressé, vous pouvez entrer et renforcer vos connaissances en utilisant ces cours. Encore une fois, merci de me rejoindre dans ce cours. Nous allons terminer avec la conclusion dans la prochaine vidéo. C' est ça, les gars. Merci d'avoir regardé. 14. Conclusion: Donc, cela conclut à peu près cette classe sur le développement Web Responsive. Pour votre projet de classe, je veux que vous preniez une conception de site Web, qu'il s'agisse d'un modèle que vous avez trouvé en ligne ou d'un site Web existant, et que vous teniez de le répliquer avec HTML et CSS. Une fois que vous avez terminé, assurez-vous de le partager avec le reste de la classe. Rappelez-vous les gars, traduire des conceptions en HTML et CSS, comme nous l'avons fait dans cette classe, est une compétence qui va s'améliorer avec la pratique. Donc, je ne m'attends pas à ce que vous sachiez exactement quel élément HTML ou le style CSS à utiliser dans chaque scénario. Très probablement, ce sera un peu d'essai et d'erreur, et bien sûr, une bonne quantité de bon vieux googling. Cela dit, si vous avez besoin de conseils ou de conseils, assurez-vous de laisser un commentaire dans la boîte de discussion ci-dessous, et je ferai de mon mieux pour vous orienter dans la bonne direction. Bref, les gars, merci d'avoir regardé. J' espère vous revoir dans certains de mes autres cours.