Transcription
1. Intro: Bonjour, je suis Aga et je suis un concepteur de codage. Si jamais vous vouliez avoir votre propre site web mais que vous étiez fatigué d'apprendre constamment le codage et que vous pensiez qu'en fait ce n'est pas pour vous, il est grand temps de rejoindre mes cours. Je vais vous montrer que le codage est amusant, et vous pouvez réellement coder votre propre site Web dans un court laps de temps. Le résultat des classes serait le site créé. J' ai préparé une mise en page spéciale pour vous. Je voulais vraiment le garder funky, frais et coloré. Nous allons coder en HTML et CSS, mais ne vous inquiétez pas, je vais vous montrer tout ce qui est nécessaire. J' espère que vous aimez le design, et j'espère que vous aurez beaucoup de plaisir tout en apprenant à coder. J' ai hâte de te voir sur la liste des étudiants. se voit dans les cours. Au revoir.
2. Outils: Parlons donc des outils que nous allons utiliser dans ces classes. Tout d'abord, nous allons utiliser notre navigateur web préféré. J' utilise habituellement Chrome. Nous vous pouvez également utiliser Firefox. Nous allons beaucoup utiliser les outils de développement. Que sont les outils de développement ? Ce sont des outils de développement web et ils sont intégrés directement dans chaque navigateur. J' aime vraiment utiliser les outils de développement dans Chrome mais peut-être que vous avez des préférences différentes. Voyons comment nous pouvons les lancer et ce qui est réellement à l'intérieur. Donc, nous avons le Chrome ouvert. Nous faisons un clic droit, inspectons et bang, nous avons les outils de développement ouverts sur notre côté droit de la fenêtre. Ce que vous pouvez voir ici est l'ensemble du code HTML de notre site Web. C' est ici. Le site Web de Skillshare est ouvert. Vous pouvez simplement vérifier quelle partie du code est responsable de la mise en page. Par exemple, si vous voulez savoir et décoder où se trouve la navigation, vous suffit de cliquer sur cette flèche et d'y accéder. Maintenant, vous savez que ce morceau de code est responsable du rendu de la navigation. Ici, nous avons des styles. Nous pouvons arriver au fichier CSS. Nous pouvons revenir aux éléments, donc notre code HTML et voir quels styles sont appliqués ici. Pour l'instant, cela peut sembler compliqué mais ne vous inquiétez pas, je vais tout expliquer étape par étape. Si vous voulez avoir cette fenêtre dans une autre position, vous pouvez décider si elle doit être dock à gauche, ou peut-être qu'elle devrait être dans une fenêtre séparée. Nous pouvons également ouvrir des outils de développement dans Firefox. La règle est la même. Cliquez avec le bouton droit de la souris, inspecter
l'élément, et vous pouvez voir la fenêtre des outils de développement qui font partie du navigateur Web Firefox. Encore une fois, nous avons le code HTML. On a le CSS. Nous pouvons également changer la position des outils de développement. Par exemple, les ancrer à droite. Une autre chose que nous devons avoir est un éditeur de code. Je vous recommande d'utiliser Atom. Vous pouvez le télécharger gratuitement à partir du site web atom.io. Il est disponible pour macOS et Windows. Si vous aimez d'autres éditeurs de code comme Sublime Text, n'hésitez pas à utiliser ce qui convient à vos besoins. Donc, en résumé, nous allons utiliser le navigateur web, les outils de développement et l'éditeur de code.
3. Matériaux: Je vais vous montrer où vous pouvez trouver le matériel que nous allons utiliser pendant nos cours. Sous l'onglet de votre projet, vous pouvez trouver les fichiers joints sur la droite. Il y a package.zip et hello-colors-psd.zip. Dans un package.zip, vous pouvez trouver exercice un dossier et hello-colors, où vous trouverez des tonnes de matériaux utiles comme le guide de style, et il y a des couleurs et des tailles de police. Vous pouvez trouver le squelette HTML, CSS, et tout le texte de la mise en page sont conservés dans le fichier texte hello-colors. Il y a aussi un dossier d'image, où tous les actifs sont déjà préparés. Si vous voulez jouer avec le fichier PSD de la mise en page que j'ai préparée pour vous, vous pouvez télécharger le paquet hello-colors-.zip.
4. Ingrédients des sites Web: Commençons par découvrir comment les sites Web sont construits. J' aime toujours utiliser des métaphores tout en apprenant quelque chose parce qu'il est plus facile de comprendre certaines notions abstraites. Imaginons que notre site est comme humain. Il a un squelette. Il existe de nombreux mécanismes qui contrôlent notre corps et nous avons différentes couleurs de peau, les cheveux et notre propre style en termes de vêtements que nous aimons porter. Le site Web est comme la même chose. Ce plan squelettique ici est le langage HTML. Il construit la structure de la page et a le contenu. Pour toutes les interactions comme l'affichage, le masquage d'éléments, filtrage, la recherche et les animations complexes, nous avons JavaScript. Bien sûr, on ne peut pas oublier l'esthétique. Pour tous les styles, appelons-les vêtements pour notre site Web, nous utilisons CSS. Voila ! Au cours de ces cours, nous apprendrons les langages HTML et CSS, les bases et la chose la plus pratique que vous devez savoir. Ainsi, nous serons en mesure de construire le squelette du site, de le remplir avec les données,
et finalement de le styliser comme nous le voulons. Nous déciderons de la typographie, des couleurs, des atouts comme le fond et les images. Ça a l'air amusant ?
5. Principes de base du HTML – Partie I: Il est grand temps de commencer à coder. Rencontrez HTML d'abord. HTML signifie un langage de balisage hypertexte. Ce langage, comme déjà mentionné, construit la structure de notre site Web. C' est le squelette. Chaque site Web est construit avec des éléments HTML, et chaque élément a quelque chose comme du texte ou de l'image. Nous avons différentes balises HTML et elles représentent différents types de contenu. Nous avons des en-têtes, des paragraphes, des tables, images, donc nous devrions écrire nos codes sémantiquement. Qu'est-ce que ça veut dire ? Cela signifie que chaque élément HTML a sa propre signification. Si vous souhaitez utiliser le paragraphe, nous devons utiliser l'élément p. Il est temps de coder. Ouvrons l'exercice un. Ceci se trouve dans votre dossier de package. Ce que je fais habituellement, c'est que je dépose le dossier sur l'icône Atom. Donc, le dossier entier est déjà ouvert. Cliquez sur un index.html et nous avons ce squelette de notre site Web. Laissez-moi vous expliquer ce qu'il y a à l'intérieur. Tout d'abord, nous avons commencé notre document HTML avec la déclaration DOCTYPE. Je n'entrerai pas dans les détails, mais c'est quelque chose qui est nécessaire. Grâce à ça. Notre navigateur Web nous comprendrons quelle version de HTML nous
utilisions et ce qui est possible de rendre dans le navigateur Web. Chaque site Web doit commencer par un élément HTML. suffit de le regarder, il a la balise d'ouverture et la balise de fermeture. Vous pouvez voir que la balise de fermeture avait une barre oblique. Tout ce qui est à l'intérieur du site sera rendu. Quelle est la prochaine ? Ensuite, on a la section de la tête. Tu te rappelles quand je te disais que le site est humain ? Eh bien, ça a l'air assez similaire parce qu'il a la tête et le corps. C' est pourquoi je mon analogie est assez proche. À quoi sert la tête ? Ce sont les éléments qui ne sont pas visibles sur le site, mais qui sont très cruciaux. Par exemple, nous avons le titre ici, nous avons le jeu de caractères, les types d'encodage que nous allons utiliser. Eh bien, je n'ai pas assez de temps pour expliquer ce que c'est dans le codage et comment cela affecte notre site, mais il faut juste me croire que c'est important. Plus tard, nous allons utiliser la section de tête pour lier les feuilles de style et les polices externes, mais pour l'instant gardons cette section de tête comme ça. Tout ce que ce corps a est rendu sur le site. Cela signifie qu'il est visible même si nous tapons quelque chose ici, l'enregistrons, et ouvrons notre fichier d'index, vous allez voir que tout est rendu. Mais pour chaque texte, nous allons utiliser la balise html afin que notre contenu soit sémantique. Commençons par le titre. Nous avons différents types de cap. Chaque titre commence par h et un nombre. L' un signifie que c'est le titre le plus important, le titre supérieur. Si vous avez un appel urgent, vous l'utiliseriez probablement pour le titre. « Bonjour les étudiants de Skillshare. » D' accord. Qu'est-ce qui manque ici ? On doit fermer l'étiquette. Maintenant, notre code est correct. Vous pouvez le sauver. Ouvrez le navigateur Web, actualisez-le, et voyez que « Hello Skillshare étudiants » est affiché. Savez-vous comment ouvrir DevTools ? Laissez-moi vous le rappeler. clic droit, inspectez, et nous voyons notre site Web. On a la section de la tête. Comme je vous l'ai dit, il n'est rendu nulle part. Donc, vous ne pouvez pas voir ce que signifie ce code. Mais pour le corps, nous pouvons voir le titre et nous pouvons voir les styles appliqués ici. Ce sont les styles par défaut de notre navigateur Web. Si vous souhaitez le modifier, veuillez
simplement être patient car nous commençons le CSS en dernier et en prévisualisons bientôt. Vous pouvez modifier le texte ici et il sera affiché. N' oubliez pas que tout ce qui est modifié ici ne sera pas enregistré dans votre fichier local. C' est seulement un changement temporaire, seulement dans le navigateur Web, et seulement sur votre ordinateur. Après avoir actualisé la page, la modification a disparu. Vous devez revenir à votre fichier, avoir modifié, l'enregistrer, puis l'actualiser.
6. Exercice HTML - Partie II: Nous savons comment lancer DevTools, ce qu'est HTML, et où nous devrions écrire notre texte HTML. Il est temps de faire de l'exercice. Créons un site Web très basique qui contiendra en-tête, paragraphe, lien vers un site Web externe, image et liste d'éléments. Comme nous ne connaissons pas encore CSS, ne vous inquiétez pas de l'esthétique pour l'instant. Nous commençons par l'exercice un dossier, où nous avons un index HTML. Ouvrons les fichiers dans Atom. Nos fichiers sont ouverts dans Atom. La première chose est de créer un titre. Nous utilisons h1 tag car c'est la rubrique principale, la plus importante sur le site. Pour le bloc de texte, nous utilisons la balise p qui signifie paragraphe. Collons ici un bloc de texte. Je colle la description de mes classes à partir de Skillshare. Le texte est assez long, donc nous pouvons utiliser ici une très belle fonctionnalité Atom. Nous cliquons sur la vue, bascule enveloppement souple, de sorte que le texte est enveloppé. Qu' est-ce qui manque ici ? Eh bien, l'étiquette de fermeture. Lorsque vous cliquez sur la balise, vous pouvez voir à souligner. Si nous supprimons la balise de fermeture, nous ne pouvons pas voir le soulignement. Donc, c'est un indice pour nous qu'il manque quelque chose. Rappelez-vous de l'enregistrement du fichier
et plus tard, nous pourrons ouvrir le fichier HMTL et voir que nous avons l'en-tête et le paragraphe. Notre site Web est assez bien défini, alors ajoutons une image. Nous ajoutons une image en écrivant la balise img. Cependant, nous devons ajouter quelques attributs. Par conséquent, les attributs sont d'autres propriétés qui sont connectées à la balise. Donc, pour img, ce sera src qui signifie source, et comme vous pouvez le voir l'indice d'Atom, c'est l'attribut local de l'onglet img. Donc, maintenant, nous voulons ajouter la source de notre image. Nous devons ajouter le chemin à notre image. Les chemins pointent votre fichier que vous souhaitez afficher. Nous aimerions afficher le fichier qui est une image. Nous aimerions afficher le fichier qu'il est dans le dossier img, et a le nom Skillshare.png. Si vous ouvrez l'exercice un dossier, vous pouvez voir que nous avons indexé HTML, et img tag avec ce fichier, et nous voulons afficher ce fichier. Une chose délicate ici est d'ajouter un chemin approprié. Donc, nous devons entrer le dossier img, et sélectionner le fichier. Dans notre cas, c'est Skillshare.png. Il est très important de ne pas faire l'erreur ici, les fautes de frappe, ou le mauvais chemin est toujours la cause de l'image non chargée. Je vous dois aussi une définition d'une balise vide. Comme vous pouvez le voir, img il n'est pas fermé en fermant la balise. Habituellement, nous écririons quelque chose comme ça, mais ça n'arrive pas. C' est parce que img est vide, ou balise vide. Donc, il n'a pas le contenu. Au lieu de cela, nous écrivons la barre oblique dans cette balise. Une autre chose importante est l'attribut alt. Alt est la description de l'image, et c'est très utile pour les personnes qui utilisent lecteurs
d'écran et aiment savoir ce qui est présenté dans l'image. Si l'image a sa signification, a son but, nous l'écrivons juste en alt, parce que ce sont des dossiers de vignettes Skillshare classes, nous pouvons écrire la vignette des classes Skillshare. Si l'image est plus à des fins décoratives et qu'elle n'a pas d'informations très importantes, nous pouvons simplement laisser l'alt vide. Mais du point de vue de l'accessibilité, il est très important d'avoir cet alt écrit. Nous économisons. Donc, réécrivons l'alt, la miniature des classes Skillshare, sauvegardons. Nous pouvons voir que l'image est chargée, nous avons le titre, le paragraphe. Une autre chose avec attribut alt est que si nous avons le mauvais chemin vers l'image, ou est-ce tout simplement pas chargé en raison de certains problèmes de performance de votre propre bande passante faible. Donc, laissez juste gâcher le chemin, vous pouvez voir que l'alt ici est affiché. Donc, si les gens ne peuvent pas voir votre photo, au moins ils savent ce qui est présenté ici. Maintenant, nous aimerions ajouter un lien sur notre site web.Laissez-le avant l'image. Nous utilisons une balise, et la même chose avec img nous avons besoin d'un autre attribut que nous écrivons à l'intérieur d'une balise. Ici, c'est l'attribut href, qui pointe vers l'adresse du site Web que nous allons lier. Nous allons avoir le site Web Skillshare. Fermez la balise. Sauvegardons et voyons ce qui se passe sur notre site Web. Eh bien, nous ne pouvons voir aucun lien, bien que le code soit généré, et nous pouvons le voir dans DevoTools. n'y a rien sur lequel vous pouvez cliquer. La raison en est que nous n'avons pas ajouté de texte entre l'ouverture d'une et la fermeture d'une balise. Donc, ici, nous pouvons écrire tout ce que nous voulons, et ce sera le lien hypertexte. Nous sommes en train d'écrire ce qui va être affiché. Donc, cliquez ici pour visiter le site Web Skillshare. Sauvegardons et actualisons la page. Comme vous pouvez le voir, nous avons le lien ici. Si je clique dessus, le site Web de ce Skillshare s'ouvre. Nous pouvons également ouvrir le site dans une nouvelle fenêtre. Pour ce faire, nous devons définir un autre attribut qui est vide cible. Grâce à cela, le site Web de Skillshare sera ouvert dans une nouvelle fenêtre. Il existe deux types de liste en HTML. Il y a une liste non ordonnée commencée avec u pour la liste non ordonnée et ordonnée. Donc, pour notre but, nous allons choisir la liste non ordonnée. Listons toutes les compétences que vous pouvez acquérir en participant à ces cours. Par exemple, HTML, il s'agit d'un élément de cette liste. Un autre élément sera CSS, et un autre Web Design. Nous devons fermer notre liste, sauvegarder, et nous allons voir ce qui est généré sur notre site Web. Vous pouvez voir que chaque élément commence par le point de puces. Donc, nous avons notre liste prête. Si nous aimons le changer en liste ordonnée, nous avons juste besoin de changer u en o, la même chose pour fermer la balise, enregistrer, recharger, et la liste commence par les nombres.
7. Envoyez votre site Web au styliste - CSS Basics - Part I: Voici donc à quoi ressemble notre site Web après avoir ajouté un titre, paragraphe, un lien, une image et une liste. Eh bien, vous devez admettre que c'est plutôt réglé donc il est temps d'envoyer notre site à la styliste. Grâce à CSS, nos sites Web sont si beaux et colorés, alors ne perdez pas de temps et nous allons écrire du code CSS. Il y a deux façons d'ajouter du style au site Web. Il y a en ligne CSS, nous pouvons l'écrire dans un fichier externe ou incorporer le code CSS dans le fichier html. Il se concentrera sur un fichier de feuille de style distinct style.css. Nous devons d'abord créer le fichier. Nous sommes dans notre répertoire d'exercice. Nous créons un nouveau dossier appelons que les styles et maintenant créons le fichier. On peut le faire directement dans Adam. Donc, nous ouvrons Adam, nous cliquons sur les styles qui vous suivent. Fichier, Enregistrer sous, vous devez ouvrir le dossier de styles et écrire styles.css. Comme vous pouvez le voir, le fichier est créé mais il est vide. Ajoutons tout premier sélecteur CSS. Avant de commencer à écrire du code CSS, divisons notre fenêtre dans Adam en deux colonnes afin
que nous puissions voir le code html et CSS en même temps. Nous devons cliquer sur les volets d'affichage et diviser à droite. Grâce à cela, nous aurons index.html sur la gauche et notre fichier de bateau de style sur la droite. Alors créons notre tout premier sélecteur. Qu' est-ce que ça veut dire ? Le sélecteur sélectionne le contenu que nous aimerions styliser. Donc, notre sélecteur est P comme vous pouvez le voir c'est le nom de la balise donc c'est le paragraphe et à l'intérieur nous écrivons toutes les déclarations. Chaque déclaration se compose de la propriété et de sa valeur. Disons que nous aimerions avoir notre texte et le paragraphe plus grand, nous utilisons la taille de la police de propriété et nous devons lui donner une valeur, par
exemple 20 pixels. Nous devons l'enregistrer, et maintenant nous pouvons rafraîchir notre site Web. Rien ne se passe, non ? Lorsque nous sélectionnons un élément avec DevTools, nous ne pouvons voir aucun style appliqué, sauf pour les styles par défaut du navigateur Web. Pourquoi c'est ça ? Eh bien, nous devons d'abord lier notre fichier CSS dans un document HTML. Donc, nous devons lier notre fichier styles.css dans le document HTML. Je vais agrandir la fenêtre et nous le faisons dans la section chapeau. Je colle le lien de balise. Nous avons l'attribut de feuille de style à href et type. Donc, dans href, nous écrivons le chemin vers notre fichier CSS, qui est des styles parce que les styles sont dans notre dossier de styles et le nom du fichier, style- styles.css. Sauvegardez-le et nous adorons le site. Maintenant, vous pouvez voir que le paragraphe est plus grand. Vérifions dans les DevTools. Oui, nous pouvons voir que nos styles sont chargés et que la taille de la police est de 20 pixels. Maintenant, ce sera génial de centrer notre propre cap. Je vais vous montrer ça dans les DevTools. Par conséquent, nous créons la règle de nouveau style de sélecteur. C' est l'élément H1, donc c'est correct. Il suffit de cliquer sur la ligne et d'écrire l'attribut. Donc, pour l'alignement sur le texte, nous avons la propriété CSS text-align. Maintenant, nous voulons avoir son volume. DevTools nous donne quelques conseils. Je choisis centre et tada, notre cap est centré. Cependant, si nous actualisons la page, le changement a disparu,
parce qu'il n'est pas sûr n'importe où, c'est juste un changement temporaire dans les DevTools. Nous pouvons le faire à nouveau, le centre de l'alignement du texte. On peut copier l'ensemble des règles. Nous pouvons le coller dans notre CSS, l'enregistrer et rafraîchir la page et les modifications déjà enregistrées. Quelles que soient les autres propriétés CSS, vous demandez comme comment nous pouvons agrandir les marges entre les éléments, comment nous pouvons définir différentes couleurs. La meilleure façon d'apprendre tout cela est juste de pratiquer mais il y a une grande page cssdreference.io où vous avez toutes les propriétés catégorisées. Entraînons plus. Nous savons comment agrandir la taille de la police. Nous savons comment aligner le texte mais maintenant nous aimerions avoir un plus grand espace entre le lien et notre image.
8. Les bases du CSS - Partie 2: Maintenant, je voudrais utiliser plus de propriétés CSS et les voir en action. Donc, nous allons avoir plus d'espace entre le lien et une image. Nous devons utiliser la propriété de marge. Créons d'abord le sélecteur, et ajoutons la marge supérieure et la marge inférieure. Dites, 30 pixels et marge inférieure, 30 pixels aussi. Nous pouvons l'écrire d'une manière différente. Nous pouvons utiliser la marge de raccourci 30 et zéro. Cela signifie que, la même quantité de pixels, donc 30, sera de haut en bas. La deuxième place est la marge pour une droite et une gauche. Si nous écrivons 50 pixels, nous verrons que 50 pixels sont du côté gauche et du côté droit. Nous pouvons également utiliser l'ordinateur et nous pouvons voir l'élément ici, marge comme souligné par la couleur orange. Ainsi, vous pouvez voir instantanément que de haut en bas nous avons 30 pixels et de gauche et de droite 50. Donc encore une fois, nous devons copier le reconstructeur coller dans notre fichier CSS, nous pouvons supprimer le code CSS inutilisé, l'enregistrer. Nous pouvons diminuer à zéro, rafraîchir, et nous pouvons voir que la carte est plus grande. Quoi d'autre ? Ce sera génial de voir comment les couleurs
changent , mais découvrons comment nous pouvons utiliser les couleurs en CSS. Nous pouvons appliquer des couleurs au texte, mais aussi pour les éléments où nous pouvons définir la couleur de fond. Ajoutons de l'arrière-plan en bas. Donc, sur l'ensemble de notre site, nous notons le sélecteur, en ajoutant des propriétés d'arrière-plan. Vous pouvez voir que les outils de profondeur ont déjà une liste prédéfinie de couleurs en CSS. Vous pouvez en choisir un, mais vous n'avez pas une grande flexibilité ici. Donc, nous pouvons reprendre les routes d'une manière différente. Vous pouvez écrire ici ce code hexadécimal. Quel est le code hexadécimal ? Ainsi, le code hexadécimal se compose de six chiffres hexadécimaux. Tous les deux sont pour le canal rouge, vert et bleu. Ainsi, notre couleur est composée du mélange de rouge, vert et bleu. Bien sûr, vous n'avez pas besoin de là et les codes hexadécimaux par cœur. C' est génial parce que dans les outils de profondeur, nous avons la couleur de profondeur et nous pouvons choisir les couleurs que nous aimons. Sélecteur de couleur et choisissez celui de l'image. Disons qu'on veut avoir un rose. Maintenant encore, nous pouvons copier le code et le mettre dans nos feuilles de style. Parce que le corps est un peu l'étiquette la plus importante. C' est tout en haut et c'est comme le parent de tous les autres composants, nous le basons simplement sur le dessus. Enregistrer, rafraîchir la page, et nous pouvons voir que les couleurs ont changé. Et le texte ? Bien sûr, nous pouvons changer la couleur du texte. Nous avons déjà h1 sélecteur préparé. Nous avons déjà h1 sélecteur créé. Donc, nous pouvons simplement ajouter une autre propriété qui est la couleur et ici nous pouvons écrire le code hexadécimal. Six Fs, ça veut dire que c'est blanc. Mais encore une fois, vous pouvez choisir ce que nous voulons dans la palette de couleurs. Je suis d'accord avec le blanc, alors gardons ça comme ça. Pour le lien, nous pouvons également créer le sélecteur et changer la couleur. Je choisis juste la première couleur,
plus faible, et en utilisant à travers l'orange. Pour rendre le lien plus visible, nous pouvons également ajouter les poids de police. Donc, comme la police serait lourde, nous pouvons ajouter les deux. Comme vous pouvez le voir, c'est la version la plus audacieuse du texte. Maintenant, bien sûr, nous devons le copier et le coller à nos styles. Nous avons également ajouté la couleur à notre titre, gardons la couleur, et nous avons enfin quelques couleurs sur le site.
9. Typographie dans CSS: Nous aimerions rendre notre site plus joli. qui est très important, c'est la typographie. Heureusement, nous pouvons sélectionner beaucoup de belles polices qui sont disponibles gratuitement. Très souvent, j'utilise des polices Google. Vous pouvez parcourir toutes les polices étonnantes. Alors, choisissons l'un d'entre eux et appliquons-le à notre site Web. Allons choisir Lora. Nous cliquons sur sélectionner cette police, nous cliquons sur la fenêtre en bas, et voyons comment nous devrions intégrer la police. Il y a deux façons. Nous pouvons coller ce lien dans la section tête ou coller cette ligne dans notre CSS. Collons-le dans notre section de tête dans le fichier HTML. Juste après les styles, nous collons le code copié à partir des polices Google. Pour que la police fonctionne, nous devons l'ajouter en tant que propriété aux sélecteurs donnés. Par exemple, vous aimeriez que h1 soit écrit en caractères Lora. Vous pouvez copier ceci via la règle CSS et le coller dans le sélecteur. Enregistrez-le et actualisez la page. Nous utilisons des outils de profondeur, et vous pouvez voir que la police de caractères Lora est appliquée. Si on le décommande,
ça revient au Times New Roman. Choisissons une police différente pour un texte différent, comme un paragraphe, un lien ou une liste. Nous avons appelé cela le texte du corps. Donc, on peut choisir Roboto, peut-être. Choisissons Roboto Mono. Encore une fois, nous sélectionnons cette police. Nous avons deux polices combinées. Nous allons copier coller dans notre document HTML. On voit qu'il y a Lora et Roboto ici. Nous voulons appliquer Roboto à l'ensemble du site. Donc, nous copions ce code, font-family, et nous collons la propriété font-family dans le corps. Grâce à cela, tout le corps aura Roboto. Maintenant, nous pouvons actualiser la page et voir que la police a changé. Le paragraphe hérite de la famille de polices du corps. Si on le décoche, Roboto sera parti. Nous pouvons également seulement ajouter ceci au paragraphe, et le commander à partir du corps, et voir que cela ne fonctionne que pour le
paragraphe parce que la famille de caractères est appliquée uniquement au paragraphe. Bien sûr, vous pouvez choisir beaucoup de polices différentes. Tout dépend du style que vous souhaitez atteindre à la fin. N' oubliez pas que si vous souhaitez avoir plus de polices de caractères, généralement, le chargement de la page prend plus de temps. Les polices Google ont un type de mesures. Donc, si vous ouvrez la fenêtre, vous verrez quel est le temps de chargement, qu'il
soit raisonnablement rapide ou lent. Nous pouvons également joindre différentes polices non seulement à partir de polices Google, mais elles doivent être des polices web, et elles doivent être hébergées quelque part. Donc, pour ces classes, pour rester plus simple, nous utiliserons uniquement les polices Google.
10. Sélections CSS - Cours: Il s'agit de l'état actuel de notre site Web. J' ai besoin de mentionner d'autres sélecteurs CSS parce que nous n'avons pas déjà parlé d'eux. Donc, nous avons appris qu'il existe des sélecteurs d'éléments comme p, h1, img. Donc, c'est le nom de cette balise en HTML. Si vous souhaitez styler un paragraphe, nous ajoutons simplement p, mais ce p style chaque paragraphe qui est inclus sur le site Web. Ainsi, pour tous les paragraphes, la taille de la police sera de 20 pixels. Que se passe-t-il si vous souhaitez avoir deux paragraphes et qu'un seul aura une taille de police de 20 pixels ? Pour cela, nous pouvons utiliser des classes CSS. C' est un autre sélecteur. Comment devrions-nous le créer ? Nous le créons toujours avec point, puis le nom de la classe. Par exemple, intro-paragraphe. La règle est la même, nous ajoutons juste ici les propriétés CSS, mais nous avons également besoin d'ajouter la classe à l'élément HTML. Nous pouvons ajouter à cela par attribut de classe. Copions le paragraphe, donc nous en aurons deux. Sauvegardons ça. Rafraîchissons notre page. Nous avons deux paragraphes. Alors maintenant, nous allons styler que celui en haut aura 20 pixels, et celui en bas sera de 14 pixels. Nous avons l'intro-paragraphe de classe déjà créé. Alors maintenant, nous ajoutons la classe au premier paragraphe, qui va être l'introduction. Donc, nous tapons juste le nom de la classe, comme vous pouvez le voir, nous avons cet attribut de classe et maintenant, nous devons ajouter la propriété. Donc, nous pouvons définir que tous les paragraphes que nous avons auront 14 pixels, mais l'introduction aura 16. Actualisons la page, et comme vous pouvez le voir, en utilisant les outils DAC, intro-paragraphe a 16 pixels, 14 pixels sont remplacés. C' est l'indice ici que la propriété pour p est appliquée à tous les paragraphes, mais nous avons la classe qui a une plus grande priorité, sorte que le paragraphe sera écrit en taille de police de 16 pixels. Le paragraphe ci-dessous contient 14 pixels car il n'a pas de classe. Si vous souhaitez ajouter cette classe au deuxième paragraphe, nous pouvons le faire, pas de problème. Vous pouvez simplement copier, coller,
enregistrer, recharger, et les travaux de classe. J' espère que vous êtes plus familier maintenant avec la création des classes.
11. Déconstruction de la mise en page: Je me concentre seulement sur la construction de notre plan. Donc, j'ai la mise en page ouverte. Appelons ça Hello Colors. Donc, ce que je voudrais faire maintenant, est de vous montrer comment je pense en termes de structure HTML. Je regarde cette mise en page en ce moment et je vais
rapidement dessiner les composants de la page. Quelles sections avons-nous ? Je vais vous montrer ici comment je déconstruit la mise en page. Donc, plus tard, il est plus facile pour moi de le coder parce que je sais quels sont les composants et quels éléments HTML je devrais utiliser. Alors, commençons par le début. Je peux voir en haut que nous avons la navigation. Donc, ce morceau de papier est mon éditeur de cloud actuel. Donc, j'ai écrit sur le dessus que nous
avons l'élément nav et plus tard, nous avons l'en-tête. Ici, nous avons l'en-tête du site web. Donc, j'ai l'en-tête, et l'en-tête est divisé en deux colonnes. Gauche, droite et tous ensemble, c'est un en-tête. Lorsque nous faisons défiler, nous avons un paragraphe ici, et tout ce qui se trouve sous l'en-tête se trouve dans la section principale, car c'est comme le contenu principal du site Web. Donc, je peux créer ici principal. Main se compose de plusieurs sous-sections. Donc, le premier sera la section de travail. Donc, nous avons une section pour les travaux. Il y a trois lignes libres. Ci-dessous, nous avons ma section équipe, donc un autre. Ensuite, dans mon équipe, nous avons une section de contact et le dernier est le pied de page. Donc, les anciennes informations comme les médias sociaux et e-mail. Donc, ci-dessous, nous avons pied de page. Donc, ici, nous avons des travaux, mon équipe et des sections de contacts, et nous allons utiliser ces types de texte HTML.
12. Créer un squelette HTML - Partie 1: Nous sommes prêts à coder en HTML et CSS étape par étape. Ouvrons le modèle HTML qui est inclus dans le package. Nous avons dans ce HTML, tous les actifs requis pour la mise en page, toute
la mise en page que nous allons coder, et voir CSS, style.css, et bootstrap grid. Donc, nous allons utiliser bootstrap. Bootstrap est un type de framework, et je ne veux pas entrer dans les détails, mais nous n'utiliserons que cette bande de bootstrap. Donc, grâce à cela, nous n'avons pas besoin d'entrer dans flex box, ou comment construire les colonnes, nous allons juste utiliser un type de grille que nous avons déjà créé. Donc, on peut gagner du temps. Si vous vous souvenez de la façon dont nous divisons cette mise en page, nous avons quelques sections comme la navigation, l'
en-tête, la
section pour les travaux, la section pour mon équipe et la section pour le contact. Tout en bas, le pied de page. Donc, créons-le en HTML. J' ouvre l'index html. Pour l'instant, je peux fermer ces styles. Alors, commençons par nav. Nav est la balise de navigation. A l'intérieur, nous allons créer une liste. Ce sera notre menu. Donc, nous avons l'offre, le
portefeuille, à propos de nous, contact. Je peux juste le lire. L' offre, un autre élément dans la liste, portfolio, à propos de nous, et contact. D' accord. Donc, nous avons créé la navigation. Nous pouvons enregistrer la page et l'ouvrir dans le navigateur Web. Comme vous pouvez le voir, ce n'est pas encore très attrayant, mais ne vous inquiétez pas. Une autre chose que nous voulons terminer, est la section d'en-tête. Quelque chose qui est sur le dessus. Donc, en-tête, et à l'intérieur nous avons deux colonnes. Section un sur la gauche, nous pouvons utiliser le commentaire, et HTML que vous faites est juste comme ça et ça. Vous écrivez ce morceau de texte à droite, colonne de
gauche et vous le fermez comme ça. Une autre chose, c'est qu'on a la bonne colonne. Donc, nous pouvons l'ajouter, « bonjour » et ci-dessous, nous avons le paragraphe du texte. Rendons le code plus propre. D' accord. Donc, c'est notre colonne de gauche. Sur la droite, on a l'image et une légende. Donc, nous ajoutons une image. L' image est dans le dossier img. C' est du cactus. Nous fermons la pile d'image avec une barre oblique à l'intérieur de la balise d'élément, et nous ajoutons également l'attribut alt. Enregistrez dans la légende ci-dessous. Je colle et ferme. Rafraîchissons la page. Ce n'est qu'une colonne, mais ne vous inquiétez pas. Lorsque nous ajouterons des colonnes à partir d'un script bootstrap, vous verrez que la mise en page sera la même que sur une image. Donc, ajoutons plus de sections. Nous devons ajouter des paragraphes simples. Vous pouvez l'ajouter à la section principale. Donc, tout ce qui est en dessous de l'en-tête, et en dessous du principal, nous avons le pied de page. Donc, dans l'ensemble, nous créons le paragraphe du texte. En dessous du paragraphe, nous avons la section pour les travaux, section, je le ferme. Maintenant, nous pouvons ajouter des commentaires, « travaux ». Ci-dessous, nous avons mon équipe, et en dessous de mon équipe, nous avons un contact. A l'intérieur des travaux, nous avons trois rangées de projets différents. Nous pouvons créer cette ligne en utilisant div. Div est une sorte de conteneur, il peut
donc se composer de divers éléments. Il n'a pas besoin d'être taxé, il peut s'agir d'une image. Donc, c'est comme un composant générique. Donc, nous avons le premier si, donc nous avons le premier, deuxième et le troisième projet dans la section de travail. Ajoutons du texte. Nous pouvons utiliser le titre h2 pour les travaux, vous pouvez utiliser le même titre pour la section, « mon équipe », et le dernier, contact. Rafraîchissons la page. On a du travail, mon équipe, des contacts. Ajoutons plus d'éléments à la section de travail. Nous avons une image, un titre, un autre titre, une partie d'un texte et un lien. Nous pouvons voir ici que, c'est un titre plus petit que celui-ci et celui-ci. Donc, si c'est h2, ce serait h3, et c'est h4. Donc, premier élément h4, laissez-moi vérifier le texte c'est la marque et le web et l'image. L' image il y a un ananas. Ananas, JPEG, alt, ananas. Sauvegardons ça. Nous avons le titre et l'image, et il nous manque le texte ici avec le titre et un lien. H3 pineapp, paragraphe. Nous utilisons break, br, pour séparer le contenu. C' est notre nouvelle ligne, et nous allons clore les paragraphes. Rafraîchissons et voyons. Comme vous pouvez le voir, chaque nouvel élément est dans la nouvelle ligne. Grâce à Break. Le dernier est le lien. Nous ne savons pas où le site sera lié, donc vous pouvez simplement ajouter un href vide, ou une fermeture et à l'intérieur du lien, insérer le nom de l'action. Alors, visitez le site Web. Notre section est codée. Le second est juste le même mais l'ordre est changé. Donc, nous aurons d'abord h3, lien de
paragraphe, h4, et une image. Donc, h3, je ferme le paragraphe et le dernier, le lien. Nous pouvons copier le même article, et la première section est vos devoirs parce que vous regardez, c'est exactement la même que la première section. Donc, tu ne peux pas copier. Oh, et j'ai oublié l'image bien sûr. Donc, c'est ici, c'est manger sain, et bien sûr h4 branding et mobile. Nous sauvegardons et rechargeons la page.
13. Créer un squelette HTML - Partie 2: Codions ma section équipe. Donc, nous avons une colonne qui se compose de deux images et une colonne avec titre et paragraphe de texte. Alors, commençons par les images. Mon équipe, donc image, équipe désolé,
équipe 1, alt, photo de l'équipe, autre image, photo de l'équipe. Nous avons le titre et un bloc de texte, donc un paragraphe. Comme vous pouvez le voir, c'est un peu désordonné. Alors, rendons le plus propre, et mettons pause ou mettons deux pauses. Ici, nous pouvons fermer le paragraphe et créer une liste. Donc, ce serait notre article de liste. Un autre, fermant, et un autre et le dernier. Bien sûr, lorsque vous fermez la liste, cliquez sur Enregistrer et actualiser. Nous avons deux photos, titre, paragraphe, texte et liste. Une autre section, contact, donc nous avons un paragraphe, deux images. Donc, nous avons un e-mail, un autre paragraphe. Faisons aussi le nettoyage et le paragraphe pour l'adresse. Casser, casser, cliquer sur enregistrer et deux images. Contact1.jpg, nous pouvons le laisser vide. Contacte2, c'est tout. suffit de le rafraîchir et il nous manque le pied de page. On a quatre icônes, donc quatre images. L' arrière-plan, comme vous pouvez le voir les médias sociaux. Nous pouvons le faire comme un arrière-plan et non comme un texte et le paragraphe tout en bas. Mettons paragraphe parce qu'il est plus facile pour le moment et les icônes. Nous avons Twitter svg alt icône Twitter. Un autre serait Facebook, icône Facebook, Facebook. On a Pinterest. Au fait, je prends les noms des fichiers de ce répertoire. Je ne les connais pas par cœur, bien que leur nom soit assez simple. Avons-nous un Instagram ? Icône Instagram. Tous seront reliés aux médias sociaux. Ainsi, nous pouvons ajouter un nom à chaque image. Bien sûr, n'oubliez pas de fermer l'étiquette. Rafraîchissons ça. Eh bien, vous pouvez voir maintenant que l'espace est blanc. Pourquoi c'est ça ? C'est parce que nous utilisons des icônes SVG et elles sont assez grandes. Donc, nous allons nous en occuper dans CSS. Si nous ajoutons de l'arrière-plan au corps, par exemple ,
rose, vous pouvez voir que l'icône est très grande et large, donc c'est pourquoi elle n'est pas vue sur le fond blanc. SVG prend toute la quantité d'espace qu'il peut prendre, donc il s'étire généralement à 100 pour cent de largeur, mais nous allons le changer en CSS. Alors, ne vous inquiétez pas pour ça. Donc, rafraîchir la page et nous sommes prêts à ajouter notre style et notre grille de bootstrap.
14. Grille bootstrap - Partie 1: Dans cette leçon, nous allons apprendre à utiliser la grille d'amorçage. Il y a un site web de grille qui rassemble toutes les informations les plus importantes. Je vais me concentrer uniquement sur certaines parties parce que nous voulons terminer notre site le plus rapidement possible. Mais si vous souhaitez explorer ce sujet, vous êtes plus que invité à consulter la documentation d'amorçage. Donc, le premier que nous devons faire, donc la première chose que nous devons faire est d'ajouter une grille bootstrap à notre HTML. Si nous ouvrons notre dossier de modèle HTML, et entrer dans le dossier CSS, nous pouvons voir qu'il y a deux fichiers ; style CSS et bootstrap grille CSS. Nous devons donc ajouter cette feuille entière à notre document HTML tout comme l'ajout de style CSS. Donc, nous copions la balise de lien et nous ajoutons le nom propre. C' est une grille de bootstrap, et on la sauve. Donc maintenant, nous pouvons enfin commencer à utiliser la grille. Créons le disque 2 colonnes en ce moment. Dans la documentation, si vous faites défiler un peu vers le bas, vous verrez que nous pouvons créer deux colonnes. C' est le code, donc nous avons un conteneur qui limite la largeur. On a la ligne. Donc tout ce qui est à l'intérieur de la rangée va essayer de s'empiler l'un près de l'autre. Nous avons div avec le charbon de classe et un autre, et ils sont proches l'un de l'autre parce qu'ici nous
avons 100% de largeur donc c'est comme une pause. C' est comme si cet élément irait à la nouvelle ligne. Ce qui se reflète ici. Alors essayons. Nous allons utiliser la classe de ligne et nous allons l'ajouter à notre en-tête. La section En-tête est ici. Alors passons à l'éditeur de code, nous ajoutons une ligne. La prochaine chose est d'ajouter du charbon de classe à notre colonne de gauche et à la colonne de droite. Donc, grâce à cela, ils seront proches les uns des autres. Rafraîchissons et voyons. Et nous avons deux colonnes. On peut inspecter. Peut-être que ce serait plus facile d'avoir sur le fond. On a toute la ligne, charbon 1 et le charbon 2 là juste près l'un de l'autre. Nous pouvons également ajouter de l'arrière-plan comme un arrière-plan de dépôt pour voir que les colonnes sont créées. Dis jaune. Ici, nous avons deux colonnes et tout,
ce qui est à l'intérieur de la balise de section. Donc, chaque titre, le paragraphe, ils seront dans cette colonne. Ok, rafraîchissons et prenons les couleurs du projet. J' utilise Photoshop, j'utilise Photoshop et le sélecteur de couleurs, mais vous pouvez également utiliser mon document qui est dans un dossier. Bonjour couleurs, document texte où vous trouverez toutes les couleurs et le texte. Il serait donc plus facile pour vous de coder rapidement le site Web. Donc, pour la première colonne de gauche, que nous devons ajouter le fond bleu marine. Nous devons ajouter une autre classe pour la différencier. Donc ici, nous devrions ajouter, charbon gauche. L' espace, c'est comme combiner les classes. Cela signifie donc qu'il y a du charbon de classe et il y en a un autre, le charbon à gauche. Donc, nous allons le créer dans les styles CSS. Charbon gauche. Peut-être dans le texte bonjour, couleur d'
arrière-plan et je colle du code texte de Photoshop. Sauvegardons ça. Je suis l'indice d'épargne HTML, rafraîchissant et dada. Mon site a un fond bleu marine. Faisons la même chose pour la deuxième colonne. Je crée la bonne classe de charbon. Couleur d'arrière-plan. C' est la couleur turquoise et en ajoutant cette classe à cette section. Voici ma section Hello, la section bleu
marine et la section turquoise. Et c'est fait. On se rapproche. Maintenant, nous pouvons travailler sur le, un autre sur la section de travail. Voir sur la disposition,
ce contenu est centré. Donc, cette largeur n'est pas 100% du navigateur Web. C' est par exemple 1000 pixels et il est centré quelle que soit votre résolution. Donc, nous allons utiliser la classe conteneur. C' est ce qui est écrit et la documentation. Ainsi, les conteneurs fournissent un moyen de centrer et d'emballer horizontalement le contenu de vos sites. Utilisez la classe de conteneur pour la largeur de pixel réactive ou le liquide de conteneur pour la largeur de 100 pour cent. Nous allons utiliser une largeur de pixels réactive. Alors ajoutons le conteneur à l'ensemble principal. Actualisons la page et vous pouvez voir que le conteneur fonctionne. Vous pouvez également vérifier cela et inspecter. Main. Vous trouverez ici plus d'informations sur la largeur et la grille d'amorçage. Si vous êtes curieux, vous pouvez vérifier cela. Donc, la largeur actuelle du conteneur pour moi c'est 1140 pixels. Je parle de ça, c'est mon cas parce que je ne sais pas quelle est votre résolution d'écran. Si vous modifiez la largeur de votre navigateur, vous verrez immédiatement que la largeur du conteneur change. Ok donc nous avons le conteneur, maintenant nous aimerions créer deux colonnes dans la section de travail. Laissez-moi le montrer sur la mise en page. Nous avons donc une colonne pour l'image et la seconde pour le texte. Voici la section largeur. On doit diviser ça en deux conteneurs. Donc un conteneur serait une colonne et nous le fermons après. Je suis GTAC parce que c'est dans la première colonne. On peut le copier. Et la deuxième colonne avec le texte et la fermeture. Pourquoi avons-nous besoin d'un autre div ? Donc, un autre conteneur denari pour créer la ligne. Donc, dans une rangée, nous avons deux colonnes l'une près de l'autre. Permettez-moi d'enregistrer ceci et d'actualiser la page. Et bang, on a deux colonnes. Alors faisons la rangée suivante. On a un repas sain. Il s'agit d'une ligne, d'une colonne pour le texte et de la seconde pour l'image. Donc, nous pouvons copier la ligne et la coller ici. Et encore une fois ce serait une colonne et ce serait la deuxième. Alors nous allons coder le charbon de classe div. Bien sûr que nous devons le fermer. S' il vous plaît rappelez-vous à ce sujet, c'est super important. Et le second charbon. Donc, dans une ligne qui est, qui commence ici et se ferme ici, nous avons la colonne de gauche et la colonne de droite. Et bang, ça marche. Donc le fruit serait vos devoirs. Vous devez créer une ligne, une colonne pour l'image et la seconde pour le texte. Je peux vous donner un indice. C' est la même chose que celle-ci, mais la seule chose qui est différente est l'image et le texte. Cela fonctionne simplement comme copier et coller. Si nous actualisons, vous pouvez voir que nous avons presque la même mise en page. Revenons à mon équipe. Nous avons le titre et ici nous avons une colonne avec les images et la deuxième colonne avec le texte. Encore une fois, la situation est la même. On peut copier la ligne. Donc, je colle la ligne. Je vais faire l'onglet ici juste pour voir quel est l'onglet est le parent. Donc ici nous créons, charbon et nous le fermons après les images parce que ce charbon ne comprend que des images et le second charbon. Ok, donc on a un charbon avec les photos et le second qui se ferme ici avec un très long texte. Et tout devrait être dans la rangée, mais comme vous pouvez le voir, je ne l'ai pas fermé parce que ce n'est pas souligné. Donc c'est ma faute. Laisse-moi le réparer. Oui. Maintenant, c'est souligné. Super. Sauvez-le. actualiser. Lorsque nous le rafraîchissons, nous voyons qu'il n'y a pas deux colonnes. Il n'y en a qu'un. Et la raison en est que les images sont assez grandes. Donc, si nous tapons du charbon, cela prendra autant que la quantité de la plus grande image. Donc, une autre chose peut bootstrap ici est de taper combien de charbons il devrait prendre. Imaginez que nous ayons une grille de 12 colonnes. Et nous voulons avoir cette partie, et cette partie devrait être la moitié. Donc six d'entre eux. Donc nous écrivons. Medium est pour les tailles d'écran moyennes. Et maintenant soudainement si nous avons le texte à l'intérieur, sur l'image. Nous pouvons également ajouter la propriété CSS, largeur max 100%. Notre image sera plafonnée à l'intérieur du conteneur. Même s'il a une plus grande taille, il sera ajusté à la largeur maximale qu'il peut prendre. Ici, c'est notre conteneur. Faisons les modifications. Nous devons ajouter du charbon, moyen six, l'enregistrer et nous devons ajouter et dimensionner cette image devrait prendre une largeur maximale de 100 pour cent de son parent, du conteneur parent. Rafraîchissons et nous avons enfin deux colonnes. Ok, alors contact nous avons...
15. Grille de bootstrap - Partie 2: Dans cette leçon, nous allons couvrir les sections contact et pied de page. Donc, nous allons y ajouter la grille. Cordons ça. Encore une fois, nous pouvons copier la ligne. Nous allons à la section de contact, donc rangée, nous fermons la rangée. Créons une colonne, classe col. Donc, pour chaque image, nous créons une autre colonne. Rafraîchissons et bang ! On a trois colonnes. Parfait. C'est donc le moment pour le pied de page, celui qu'il est rempli d'icônes blanches. Ainsi, le pied de page a quatre icônes de médias sociaux et un texte tout en bas. Il a aussi de l'arrière-plan, donc nous pouvons l'ajouter. Nous pouvons également définir la taille des médias sociaux. Créons le pied de page du sélecteur CSS, couleur d'
arrière-plan, et je colle la couleur d'arrière-plan que j'ai prise dans le document. Je sauve et rafraîchissante. Comme vous pouvez le voir, l'arrière-plan a cette couleur de saumon, mais les icônes sont assez grandes, alors nous allons les rendre plus petits. Chaque image aura classe d'icône
sociale, et l'enregistrement. J' ai besoin de créer une classe d'icône sociale. Disons que la hauteur sera de 60 pixels. C'est mieux. On peut encore voir des espaces blancs ici. Utilisons Inspecter pour vérifier quelle est la raison de cela. Si nous sélectionnons Corps, vous pouvez voir ce contour orange. Nous pouvons accéder à l'onglet de l'ordinateur et voir que le corps a une marge de huit pixels. Donc, pour la marge, c'est le style par défaut du navigateur. Donc, pour un corps, nous aurons besoin de réinitialiser les marges et les rembourrages, et c'est presque là. On peut encore voir des espaces blancs ici. Je suppose que c'est du HTML. Ce sont des trucs, mais ne vous inquiétez pas. Quand nous ajouterons la hauteur 100 pour cent, ça ira maintenant. Alors appliquons les styles. Donc, pour le corps, nous aurons la marge zéro, donc nous allons réinitialiser les paramètres par défaut par le navigateur et le sélecteur HTML tout en haut à cause du remplissage de la page entière. Nous ajoutons la hauteur 100 pour cent. Donc, il prend toute la hauteur du navigateur Web de la fenêtre d'affichage. Rafraîchissons et presque là. Donc, maintenant nous aimerions centrer ces icônes, et ce texte devrait être dans le même conteneur que le reste du contenu. Donc, commençons par ajouter un conteneur. C' est dans un autre div. C'est mieux. Centrage. Malheureusement, nous n'avons pas assez de temps pour nous concentrer sur tous les problèmes avec CSS, comment centrer horizontalement ou le rendre verticalement, mais je vais vous montrer quelques astuces. Donc, nous aimerions centrer ce conteneur avec les icônes. Nous pouvons le faire en créant la classe div, conteneur d'icônes sociales. Nous créons la même classe en CSS. Donc, l'autre chose que nous allons faire ici est d'écrire le centre d'alignement de texte car il centrera le contenu qui se trouve dans le conteneur de contenu. Fonctionne. Bien sûr, nous avons besoin de quelques espaces entre les icônes. Nous pouvons le faire ici en ajoutant la marge, le haut, le bas et la droite/gauche. Vérifions. Ouais, c'est mieux. Presque là, très près de là. Maintenant, il est grand temps de prendre soin de la typographie, des couleurs et des tailles. On se voit dans les prochains cours.
16. Styliser la navigation: Avant d'entrer dans la typographie et les couleurs, résolvons le problème de la navigation. Comme vous pouvez le voir, c'est vertical, pas horizontal. Donc je vais vous montrer une chose ici. Nous avons donc notre navigation créée en haut du document HTML. La liste ici est, par défaut, verticale, donc nous devons la rendre horizontale. Je peux créer un sélecteur. En affichant chaque li, donc chaque élément de la liste comme inline-block. Il passe du bloc d'affichage à l'affichage inline-block. Les blocs d'affichage de la valeur du bloc signifie qu'il prend toute la quantité d'espace. Comme vous pouvez le voir, il faut 100 pour cent de largeur. Pour vous montrer qu'il est bloqué par défaut, je peux le taper et rien n'a changé. Mais si nous appliquons inline-block, il change ses propriétés et chaque élément qui a display inline-block placé près l'un de l'autre. Donc on y est presque. Créons une navigation de classe, et écrivons la navigation de sélecteur CSS. Donc la navigation, c'est notre classe. C' est toute la liste, mais nous voulons cibler li, qui est l'élément de cette navigation. Le navigateur Web fonctionnera comme ça. Trouvons la navigation de classe, et trouvons chaque élément li, donc chaque élément de la liste. Afficher le bloc en ligne. Presque là. Nous aimerions également avoir ul centré. Ainsi, nous pouvons ajouter le centre d'alignement du texte. Vous pouvez le copier, et nous pouvons créer la navigation, text-aligner centre. Donc la navigation, c'est notre liste et elle va être centrée, et presque là. Une autre chose est que la navigation est placée comme une nouvelle couche sur ces deux colonnes. Ici, nous avons l'espace blanc. Donc, pour le changer, nous devons changer la position. On n'a pas le temps d'apprendre toute la théorie sur les positions, mais laissez-moi vous montrer un truc. Si nous ajoutons à la position de navigation entière, fixe. Il est parti. C'est quelque part là-bas. Mais nous devons aussi le mettre sur le devant. Nous l'avons fait avec l'index z. Donc zéro, il est caché par les éléments suivants, donc par l'en-tête entier. Nous devons donc ajouter plus haut, par exemple un. Maintenant, vous pouvez le voir. Si nous faisons défiler, le menu est fixe. Donc c'est comme un en-tête collant, mais il n'est pas centré. Alors maintenant, nous aimerions centrer la navigation. Il y a un autre truc. Nous devons donc écrire zéro gauche et zéro droit, et le contenu sera centré. Vous pouvez voir que la navigation superpose tous les autres éléments, alors copions-le et c'est à la navigation, nav, et cela fonctionne. Nous pouvons ajouter plus d'espaces entre les éléments, sorte que nous pouvons ajouter la marge zéro du haut et du bas, mais 15 pixels de gauche et de droite, et c'est là. Donc, je mets aussi la couleur. On dirait ça. Alors maintenant, c'est l'heure des couleurs, de la typographie, des espaces.
17. Typographie et couleurs - Partie 1: Maintenant, pour prendre soin de la typographie et des couleurs, et je suis très excité pour cette partie parce qu'il peut totalement changer le caractère du site Web. Donc, commençons par chercher les polices que nous avons faites, nous allons avoir besoin. Donc, dans la mise en page, j'ai utilisé Prata et Inconsolata. Donc, j'ouvre les polices Google et je cherche Prata exactement. Je l'ajoute et Inconsolata, oui. Je sélectionne également cette police. Je suis en train de personnaliser. J' ai besoin des deux pour Inconsolata aussi, et ici pour l'intégration, je copie le lien. J' ai deux polices et je le colle dans la section chapeau. Donc, le lien de police est incorporé mais nous n'avons toujours pas à la famille de polices nulle part. Alors, vérifions les noms. On a Prata et Prata est utilisé pour toutes les rubriques. Donc, je peux écrire un sélecteur de groupe comme
h1, h2, h3, h4, h5, tous les titres, et j'applique la police Prata. Maintenant, nous pouvons actualiser la page et cette police a changé. Super. Donc maintenant, nous pouvons ajouter Inconsolata parce que Inconsolata est utilisé partout dans le corps du texte. On peut l'appliquer au corps. Ainsi, le HTML entier sera écrit dans la police Inconsolata, sauf pour les en-têtes, qui seront dans Prata. Laissez-moi vous rafraîchir et nous avons les polices chargées. Il est donc temps d'ajouter des couleurs et des tailles de police appropriées à notre texte. Comme nous le savons, cela devrait être blanc. Donc, nous allons à la section de code de gauche et nous
pouvons trouver en CSS et ajouter la couleur blanche. Nous voulons également que ce texte soit centré. D' accord. Bonjour devrait être certainement plus grand, 150 pixels, sorte que nous pouvons ajouter des informations que l'actuel est de 150 pixels. C' est aussi audacieux ici. Laisse-moi vérifier ça dans les outils de doc. Par défaut, le poids de la police est gras, mais dans le projet, c'est normal. Donc, vous écrivez normal. Tu vois la différence ? Donc, nous le copions aussi, en fait tous les en-têtes. Donc, c'est normal ici. Je viens de réaliser que pour la navigation, nous utilisons Prata aussi, donc nous devons faire le changement, donc nous prenons Prata. Donc, nous avons Prata pour ça et il devrait avoir 22 pixels. On se rapproche. Ce texte doit être centré et blanc. Donc, en fait, nous pouvons ajouter les mêmes propriétés CSS aux deux classes, donc left-col et right-col, et nous le faisons en ajoutant une colonne. Je prends les propriétés CSS, collage, l'enregistrement et l'actualisation. Vous pouvez voir que c'est beaucoup mieux. On s'occupera de cette partie plus tard. Maintenant, nous devrions nous concentrer sur la typographie et les sections ci-dessous. Faites défiler vers le bas pour en savoir plus sur moi-même. Il est dans le bleu et il est centré, donc on peut créer de la classe ici, intro. En fait, c'est défiler et nous ajoutons ces classes. Couleur, c'est la couleur que j'ai copiée, et text-align : centre. Voila. Ok, donc maintenant nous pouvons nous concentrer sur les titres comme les travaux, mon équipe, et le contact, et ils ont tous les mêmes tailles et les mêmes espaces de lettrage, mais ils ont des couleurs différentes. Alors, voyons. Nous utilisons h2. Donc, pour h2, nous devons définir la taille de la police. Il devrait être de 100 pixels, mais nous devrions également créer des classes qui nous
aideront à différencier les en-têtes et nous serons en mesure d'ajouter des couleurs. Donc, ma proposition est d'ajouter de la classe à toute la section. Donc, l'équipe de section suivante, class="mon équipe ». Rappelez-vous, que vous pouvez faire des espaces tout en ajoutant le nom de la classe et nous arrivons à la dernière section, contact. Donc, nous pouvons écrire le sélecteur de combinaison comme les œuvres h1, h2, devrait avoir cette couleur. Mon équipe h2 devrait avoir une couleur différente et la dernière section contact h2 couleur. Rafraîchissons. Contact, donc ajouter, enregistrer. On a des travaux. Nous avons mon équipe et mon contact. Maintenant, nous pouvons nous occuper de ces rubriques. Ils ont tous la même couleur ici. Celui-ci est différent. Encore une fois, nous devrons créer des sélecteurs combinés.
18. Typographie et couleurs - Partie 2: Donc, nous allons maintenant créer le style pour h3. Ainsi, h3 a une taille de police de 50 pixels. Pour les travaux, il a la couleur de celui-ci. Pour myteam, il a une couleur différente. Comme vous pouvez le voir, c'est bleu, pas vert. Sauvegardons ça, et oui, c'est le bon. Les autres changements qui sont nécessaires sont le h4. Ainsi, h4 a son arrière-plan et sa couleur. Donc, nous écrivons h4, taille de
police 32 pixels. Couleur, nous avons la couleur de fond. Laisse-moi le sauvegarder et le rafraîchir. Nous sommes très proches, mais nous n'en avons pas besoin, mais si nous voyons dans les outils de brouillon, le titre est un élément bloc, donc il prend toute une largeur. Nous devons le définir pour afficher inline-block. Oui, et nous devons réinitialiser toutes les marges. Nous aimerions également ajouter du rembourrage, sorte que nous aurons plus d'espace autour du texte et dans le conteneur turquoise. Donc, ajoutons 10 pixels. Voyons, il n'y en a que quelques, c'est comme trois pixels. Laissez-moi le copier et coller dans le code qui est là. Sauver. On y est presque. Et les liens ? Il y a un espacement des lettres et il a une couleur différente. Ainsi, tous les liens auront un espacement, deux pixels, couleur et taille, 18 pixels. Il n'a pas le soulignement dans le projet, et c'est audacieux. Donc, souligner sa décoration de texte. Donc, nous devons le réinitialiser, et bien sûr, font-weight bold. Je pense qu'on peut augmenter l'espacement des lettres. J' ai fait le mauvais, donc, changer. Ce sont les liens. Nous pouvons également voir le changement dans le corps du texte parce que pour les œuvres, il est vert. Donc, créons ça pour les travaux. La couleur est celle-là. Il a changé. Le texte ici est assez pressé, donc je voudrais ajouter une plus grande hauteur de ligne pour ajouter plus d'air. Donc, définissons que pour chaque paragraphe, la hauteur de ligne sera de 134 pour cent. Donc, maintenant, il est plus facile de le voir. Je vais le copier et le coller. Rafraîchissant. Dans les prochaines leçons, nous allons travailler sur les modifications de mise en page finales.
19. Ajustements de la mise en page - Partie 1: Maintenant, nous allons nous concentrer sur la partie supérieure de la mise en page, pour l'avoir très similaire à celle que nous avons dans le projet. Donc, j'aimerais avoir deux boîtes. Comme vous pouvez le voir, nous avons plus d'espace autour. Ici, on peut le voir. Donc, nous devrons ajouter le conteneur pour le titre et le paragraphe, et nous aurons besoin d'un conteneur pour l'image et la légende. Donc, nous allons chercher l'index, nous allons chercher le col gauche et le col droit. Maintenant, nous allons créer div pour la section hello et la section image. Donc, appelons le conteneur supérieur, nous fermons le div, en prenant soin d'avoir notre colonne propre, vous pouvez copier ce div, et l'ajouter à la colonne de droite. Maintenant, nous devons le créer dans des styles. L' ordre en CSS n'a pas d'importance, mais il est bon de le garder d'une manière logique afin que nous puissions commencer avec les éléments très basiques en haut et plus tard avoir en-tête et nous allons tout en bas au pied de page. Revenons à notre nouvelle classe, qui est le meilleur conteneur, OK. Donc, maintenant ajoutons des propriétés CSS à notre classe de conteneur supérieure. J' ai mesuré qu'il devrait avoir une largeur d'environ 500 pixels. Je suis en train d'enregistrer, puis de rafraîchir la page. Presque terminé, maintenant nous devons le centrer en utilisant la marge zéro auto, économiser et nous sommes très proches. Nous devons ajouter plus d'espace entre l'image et le bord supérieur et nous devons également diminuer l'espace entre le titre et le texte. Donc, je vérifie les espaces, et puis je peux voir que le titre a une marge. Donc, si je modifie à zéro, vous pouvez voir qu'il y a [inaudible]. Nous pouvons également ajouter de la hauteur pour le col gauche et le col droit. Nous pouvons définir la hauteur minimale doit être 90vh, ce qui est une hauteur de clôture. Cela signifie qu'il faudra 90 pour cent de la fenêtre de notre navigateur. Donc, nous pouvons avoir cet effet que nous pouvons voir cela là-bas comme une couverture et si nous faisons défiler vers le bas, les projets sont ci-dessous. Donc, ajoutons ceci, col
gauche et droit, hauteur 90vh, unité de hauteur de la fenêtre. J' oublie d'ajouter la marge zéro à laquelle ? Et maintenant besoin de centrer ces éléments. On va utiliser la flexbox. Malheureusement, je ne vais pas entrer dans les détails, mais juste suivre mes étapes. Donc, nous devrons ajouter à notre col gauche et col droit, cette propriété flex d'affichage. Donc, revenons au col gauche et au col droit, sélectionnez-les et tapez display flex. Cela signifie que la flexbox sera un vol. Flex box nous aide à aligner les éléments pour les centrer horizontalement ou verticalement. C' est une chose très utile donc si vous aimez l'explorer plus, vous êtes totalement encouragé. Nous voulons également le centrer dans l'axe principal, qui est l'axe horizontal et aussi dans l'axe vertical. Sauvegardons et actualisons. Les éléments sont centrés. D' accord. Donc, maintenant, concentrons-nous sur la section de mon travail.
20. Ajustements de la mise en page - Partie 2: Donc, nous allons maintenant nous concentrer sur la superposition de ces titres sur l'image. Il suffit de regarder le projet et vous saurez instantanément quel est notre objectif. Donc, pour faire du bien, je dois vous parler des positions très rapidement. Donc, nous allons utiliser la position relative et la position absolue en CSS. Donc, pour l'image, nous allons appliquer une position relative et pour les titres, position absolue. Comme vous pouvez le voir, il a disparu, mais pas de soucis, nous allons ajouter zéro supérieur, zéro
gauche et z index un et retour. Soudain, notre cap superpose l'image. Donc, grâce à cela que nous avons appliqué le conteneur parent comme notre position relative et cet élément qui doit superposer le parent de la position absolue, nous pouvons obtenir ce type d'effet. Donc, appliquons-le dans notre code. Cherchons l'ananas. Oui, on est là. Donc, nous devons ajouter de la classe pour l'image. Donc, ce serait l'image de travail et nous devons ajouter ceci à chaque image que nous avons dans la section de travail, et nous devons créer la classe sous les travaux. Donc, fonctionne l'image. Donc, works-img, position relative et pour chaque h4 dans la section des travaux, nous appliquons la position absolue, z-index un. Rafraîchissons la page. Dans le projet, le titre superpose l'image mais il est aussi au-delà, donc nous pouvons le faire en ajoutant haut, disons, moins cinq pixels. Alors, voyons. Oui, c'est un peu mieux, mais je suppose que ce serait 25. C' est beaucoup mieux. Donc, copions-le, collons-le et sauvegardez. Une autre chose est que nous avons des espaces entre les images, et si nous les comparons à notre projet, vous pouvez voir que les images ici sont adjacentes les unes aux autres. Nous pouvons le faire en ajoutant une classe sans gouttière. classe sans gouttière est déjà définie dans la grille CSS de Bootstrap. Donc, la chose que nous devons ajouter est la classe sans gouttières et nous l'ajoutons, par exemple, à notre ligne et grâce à elle, la gouttière entre les colonnes et les lignes, qui est généralement de 15 pixels en termes de rembourrage horizontal, il sera réinitialisé. Alors, essayons. Donc, nous avons notre section de travail. Nous ajoutons la première ligne. Donc, nous ajoutons sans gouttières. Désolé. Je vais le copier et le coller sur le deuxième élément et le troisième. Je suis en train de sauvegarder et de rafraîchir la page. Eh bien, vous pouvez voir que quelque chose a changé, mais les images sont toujours éloignées les unes des autres. Je vais utiliser DevTools. Maintenant, c'est mieux, mais peut-être que je vais mettre sur le fond que vous
puissiez voir qu'on veut diminuer cet espace. La raison de cela c'est probablement la largeur de l'image parce que c'est l'image et c'est la colonne entière. Donc, la colonne est plus grande. Donc, nous devons étirer complètement cette image au conteneur. Donc, nous ajoutons avec 100 pour cent et l'image est ajustée. C' est génial, mais maintenant nous devons faire une autre chose qui consiste à ajouter des pagaies à tout le texte parce que, comme vous pouvez le voir, il colle sur le côté gauche de l'image. Donc, laissez-moi copier ceci et l'ajouter à works-img. Donc, maintenant pour chaque rouleau des œuvres, nous devons créer div qui enveloppera le texte ici et celui-ci et celui-ci. Donc, ouvrir le code. C' est notre premier travail et ici nous avons le texte, alors créez des gouttières supplémentaires de classe div. On devrait fermer la div, bien sûr. Nous le copions et collons pour les autres sections et la fermeture ainsi. Maintenant, nous devons bien sûr créer cette classe et définir les propriétés CSS. Donc, ce sont des gouttières supplémentaires et nous voulons avoir un rembourrage zéro de haut en bas et 60 pixels de gauche à droite. Rafraîchissons la page et enfin notre texte a des paddings. Nous pouvons également vérifier dans les DevTools, gouttières
supplémentaires et vous pouvez voir qu'il y a 60 pixels paddings. En le comparant au projet, nous pouvons voir que ce texte est à gauche et ce texte est à droite, et aussi ce texte est à droite et non à gauche. Donc, pour cela, nous allons utiliser le texte aligner avec les gouttières entières. Textons pour aligner. Donc, nous devons l'appliquer à nos styles. Nous pouvons créer la classe, aligné
à droite, aligner le texte. Ajoutez ceci à notre travail qui est au milieu de sorte que le second. Nous ajoutons bien aligné, enregistrez-le, actualisez et c'est fait. Donc, voici les dernières choses dans la section de travail est d'avoir les en-têtes sur le côté gauche et sur le côté droit. Donc, voici à gauche et voici à droite. Donc, nous prenons l'image de marque et le mobile. Si nous ajoutons, zéro droit, parce que c'est la position absolue, donc le texte aligné ne fonctionnera pas comme dans l'exemple précédent, je peux vous montrer, mais cela ne fonctionne pas. Donc, nous devons ajouter le zéro droit, donc il positionnera notre élément sur le côté droit maximum de l'extrémité éloignée, donc nous créons le sélecteur maintenant, fonctionne h4, la classe alignée à droite sera à droite zéro. Donc, cela signifie que trouver la section avec la classe de travail et me trouver h4, dans cette section qui a la classe de travail et que h4 devrait avoir cette classe. Nous devons également ajouter à ce H4. Donc, c'est H4 dans la deuxième rangée des œuvres, nous devons également ajouter cette classe, alignée à droite. Tout va bien. Je rafraîchis la page et c'est fait. Donc, la section des travaux est terminée, la section
bonjour est terminée et c'est maintenant le moment pour mon équipe.
21. Ajustements de la mise en page des sections inférieure: C' est le moment pour mon équipe, et le contact, et le dernier, le pied de page. Donc, en comparant à notre site Web, la chose sur laquelle nous devons travailler est l'espace entre
les images et l'espace que la rubrique a du haut. Nous devons donc ajouter de la marge aux images dans la section équipe. Donc, nous pouvons ajouter class="img-margin » et nous pouvons ajouter la classe img-margin, et nous aurons margin-bottom, disons 20 pixels, et nous aurons juste besoin de rafraîchir, et aussi, nous aurons besoin de réinitialiser la marge qui est dans h3, marge zéro. Donc, nous l'ajoutons à notre section « mon équipe », et nous avons un plus grand espace entre le titre et le texte. Donc, en fait, nous pouvons ajouter la marge zéro, qui est supérieure, zéro qui est la marge de droite, 50 pixels ou même plus, 90 pixels du bas ou peut-être nous allons l'avoir moins, 70 pixels, et zéro pixels. C' est le raccourci. Donc, mon équipe h3, c'est là. Sauver. Nous avons commencé cela dans notre nouvelle ligne, donc nous devrions aussi ajouter une pause comme celle-ci. Rafraîchissant et nous l'avons, mais la hauteur de ligne est trop grande, alors passons à 130 ou peut-être 100 en police. Oui, 100 hauteur de ligne, 100 suffira. Presque là. Nous pouvons également agrandir l'espace entre les images afin que le texte soit en ligne avec les images. Donc img-margin, ajoutons 40. Toujours pas là. Ajoutons 60. C'est un peu mieux. Et nous pouvons également ajouter avec 100 pour cent. D' accord. Alors maintenant, concentrons-nous sur le contact. Bien sûr, nous devons ajouter une police en gras à l'adresse, afin que nous puissions utiliser une nouvelle balise, qui est forte. Donc, nous ajoutons fort. Cela signifie que le texte serait sur une version plus audacieuse. C' est ici et pied de page. Donc, le pied de page devrait avoir des hauteurs différentes. Il devrait avoir de l'arrière-plan et vérifions quoi d'autre. Oui. Donc, il devrait en avoir au moins 200. Oui, donc notre pied de page a un arrière-plan, est plus élevé, et il y a un espace entre le contact et le pied de page. Donc nous ne l'avons pas dans notre page, alors ajoutons-le. Donc, au pied de page, disons que la hauteur sera de 220 pixels au moins. Nous aurons backround et je vais vous montrer comment ajouter de l'arrière-plan en CSS. Nous allons plafonné pour ajouter la fonction url et le chemin vers notre image, qui est img et socialmedia.svg, mais nous sommes ici en CSS, donc nous devons revenir au dossier principal et ensuite, entrez img. On est revenus en utilisant deux points et une barre oblique. Et maintenant, nous sommes ici dans le dossier actuel, donc nous entrons img et prenons l'image correcte, donc socialmedia.svg. Ça marche, génial, mais nous ne voulons pas que nos antécédents se répètent, donc pas de répétition. Nous aimerions étirer notre arrière-plan, donc la taille de l'arrière-plan contient ou peut-être la taille de l'arrière-plan 60 pixels, 60 pour cent, mais la position de l'arrière-plan serait centrée. s'agit donc d'une image de fond, et grâce à elle, nous serons en mesure d'avoir l'image d'arrière-plan et la couleur d'arrière-plan car si vous supprimez l'image, elle écrasera la couleur d'arrière-plan, alors s'il vous plaît rappelez-vous à ce sujet. Nous sommes très proches. Nous devons également ajouter des blancs de couleur. Nous pouvons centrer le texte parce qu'il semble mieux. Nous pouvons également ajouter une boîte flexible pour centrer les éléments, nous avons
donc ce flex de remplissage, justify-content centre, align-items centre. Parfait, et marge du haut pour augmenter l'espace entre les images de la section de contact, disons 60 pixels, pixels, et nous sommes prêts. Je copie tout ce code et le colle dans le pied de page. Sauvegardez. Ceci est notre site web codé. La dernière chose que nous allons faire est d'ajouter des liens à notre navigation.
22. Ajouter des liens à la navigation: Donc, maintenant, nous allons lier la navigation à la section de notre page. Mais d'abord, allons à nav, et passons à bonjour, et travaille, et mon équipe, d'accord. Donc, pour ce faire, bien sûr, nous devons ajouter un, donc la balise hyperlien. Oups, c'est mon erreur. D' accord. Nous devons créer des identifiants. Donc, la section où nous allons lier aura un ID. Donc, nous avons cette secte l'en-tête, qui est notre bonjour. Donc, nous écrivons id hello, et id est étape pour un hachage. Donc, nous avons la classe, c'est le point, et pour l'identification, nous avons le hachage. Donc, ce sera bonjour de hachage pour cela fonctionne que nous avons id fonctionne. L' identité est une chose unique. Donc, ce n'est qu'un seul ID, voulez un ID spécifique sur la page. Donc, nous avons un ID bonjour, un ID fonctionne, et nous pouvons avoir beaucoup d'occurrences de la même classe CSS, mais pour ID, ce n'est pas possible. Bien sûr, nous avons myteam id, myteam et contact id. Alors, nous allons le lier. Fonctionne avec mon équipe, contact. Rafraîchissons la page. Comme vous pouvez le voir, les étoiles ont changé. C' est arrivé parce que nous avons créé un sélecteur. Donc, toutes ces règles sont appliquées à tous les huit. Donc, nous allons devoir le réinitialiser. Peut limiter ce huit seulement à la section de travail. Donc, laissez-moi trouver cet A. Donc, nous pouvons écrire que cela ne fonctionne que pour la section des travaux. Donc, pour tous les A qui sont dans la section des travaux. Donc, presque là, nous n'avons pas perdu ce style pour les liens ici dans la section travaux. Mais maintenant nos liens sont bleus, et nous ne voulons pas arriver. C' est pourquoi, parce que chaque navigateur a par défaut un bleu. Nous devons appliquer notre couleur de LE. Ainsi, nous pouvons ajouter la navigation LEA, appliquer cette couleur. Vous pouvez supprimer cette couleur d'ici, rafraîchir, et presque là. Le fait est que nous voulons nous débarrasser du soulignement. Donc, text-décoration aucun. Je suppose que c'est ça. Donc, laissez-moi fermer les outils de développement, et laissez-moi essayer si cela fonctionne. Ça marche ? Ainsi, vous pouvez naviguer à travers le site Web. Donc, c'est comme une seule page de destination. Tu aimes ça ? J' espère que vous le faites, et j'espère que vous avez eu beaucoup de plaisir en mettant ce site avec moi. Je vais vous montrer différentes versions de couleurs et de typographie dans la prochaine leçon, et ce sera l'une des dernières leçons à entendre ces cours. Je suis si contente que tu restes avec moi si longtemps. J' aimerais voir vos pages, alors s'il vous plaît les poster dans la section communauté.
23. Mot de fin et autres versions du site Web: Félicitations pour avoir terminé mes cours. Je suis super fier de vous, et j'espère que vous l'aimerez, si vous êtes satisfait du résultat final, votre site Web. Donc, j'ai préparé deux autres versions pour vous. Je n'ai changé que les couleurs CSS et les
visages de type pour illustrer que vous pouvez très facilement réutiliser
cette couleur bonjour , ce modèle, ce modèle HTML pour vos propres fins. Donc, que vous pouvez choisir votre propre style. Voici donc à quoi ressemble notre site Hello Colors. ce moment, selon mon projet. Mais vous pouvez également changer la couleur en dégradés, changer les faces de type et il change instantanément son style et son vipe, et une autre version, la bleue. Donc vous pouvez faire beaucoup d'expériences avec elle et j'espère que vous vous êtes amusé. Mon but n'était pas de vous enseigner HTML et CSS mais de créer un site web pour vous. J' ai également préparé un cours plus court. Donc, si vous souhaitez vous amuser avec les animations CSS et SVG, n'hésitez pas à les rejoindre. J' adorerais voir vos sites Web venir. Alors, faites-le moi savoir en m'écrivant ou en l'affichant dans la section de la communauté. Merci encore et j'espère vous voir dans les prochains cours.
Aga Naplocha, Creative coder & designer
