Avant d’arriver à l’article, je veux juste partager que je construis un produit, et j’aimerais collecter des données sur la façon de mieux servir les développeurs Web. J’ai créé un court questionnaire à consulter avant ou après la lecture de cet article. Veuillez vérifier — merci! Et maintenant, revenons à notre programmation régulière.
Le blog que nous allons construire. Vous préférez la vidéo? Cliquez ici pour ouvrir dans Scrimba
Si vous êtes comme moi, vous êtes intéressé par le Web et sa portée écrasante, mais vous êtes également inondé du gâchis d’informations qu’est l’apprentissage du HTML et du CSS. Le fait est que ces langages ne ressemblent pas à d’autres domaines, comme les traitements de texte et les langages de programmation. Le web est un autre monde, et ce n’est pas la plus jolie chose autour.
Après m’avoir appris du web, je suis ici pour donner un léger coup de pouce d’encouragement, car, avec un peu de conseils, ces domaines peuvent être beaucoup plus faciles que vous ne l’imaginez. Continuez à lire, et nous construirons un beau blog à partir de zéro. Nous allons également apprendre une grille CSS, une Flexbox et un design réactif.
Le but est de faire pour vous ce que j’ai fait pour moi-même; apprendre le HTML et le CSS à partir des premiers principes.
Vous préférez la vidéo? Cliquez ici pour ouvrir dans Scrimba
J’ai également enseigné un cours HTML / CSS gratuit sur Scrimba où j’enseigne comment créer un beau blog à partir de * zéro *. Cliquez ici pour vous inscrire ! ?
Scrimba.com est une plate-forme frontale interactive où les sites Web sont enregistrés sous forme d’événements — et non de vidéos — et peuvent être modifiés! ?
Alors d’où vient le HTML?
HTML est un descendant du premier langage de méta ou de balisage : GML. Les lecteurs de la génération Y découvrent maintenant que GML signifie Langage de balisage généralisé, mais ce n’est pas tout ce qu’il représente. C’est Charles Goldfarb, Edward Mosher et Raymond Lorie qui ont créé ce que nous connaissons maintenant comme un langage de méta ou de balisage chez IBM. Et en 1996, Charles Goldfarb écrivait :
« J’ai donné à GML son nom actuel pour que nos initiales prouvent toujours d’où il venait. L’une des vérités laides du transfert de technologie est que les développeurs ont tendance à être reconnaissants pour le travail de recherche lorsqu’ils le reçoivent pour la première fois, et pratiquement inconscients à la fin d’un long cycle de développement… «
— Charles Goldfarb, en 1996
GML est devenu plus tard standardisé, devenant ainsi SGML. Ensuite, Tim Berners-Lee, qui travaillait au CERN, a emprunté le ML à SGML (non, pas à l’apprentissage automatique, ou comme l’appellent les hipsters) pour créer du HTML, où HT signifie hypertexte.
Whoa, mot cool. Et si je comprends bien, il a des racines dans un environnement de création interactif appelé HyperCard, de Bill Atkinson qui a travaillé chez Apple. Pour une exploration plus approfondie, je soumets les vidéos suivantes:
Cliquez sur l’un ou l’autre pour en savoir plus
Alors récapitulons. HTML n’a pas seulement envahi le monde. En fait, il y avait tout un monde avant HTML. WUT? Je sais, je tremble sous le choc — mais je n’étais pas né — donc, il n’y avait en quelque sorte pas de monde.
Et, HTML doit beaucoup à ses prédécesseurs. Comme nous le faisons tous à nos parents. Néanmoins, c’est ainsi que nous fabriquons du code à partir de texte. Maintenant, en quatre leçons d’une minute, j’enseignerai les bases du HTML, du CSS et du Responsive Design.
HTML et CSS en 4 minutes
Première minute: Un site Web peut être mieux compris comme un webtree
<html> <head></head> <body></body></html>
Tous les sites Web commencent leur vie en tant que tels. Cependant — et c’est terrible – il n’y a pas de contenu. Néanmoins, nous commençons ici car nous devons d’abord comprendre ce qu’est un site Web. Considérez-le comme un arbre – un arbre à l’envers * — un arbre Web. L’élément html est la racine, alors que head et body sont les premières branches de notre arbre Web:
html <- root / \head body <- branches
L’élément head (ou balise — même chose) est destiné aux métadonnées ou aux informations sur notre site Web. L’élément body, en revanche, concerne le contenu de notre site Web. Et parce que CSS est le style de notre site Web, il va dans l’élément head, alors que le contenu, comme les paragraphes, les vidéos de chats (≧∇≦), etc., va dans l’élément body.
Deuxième minute : les éléments, ou balises, ont plusieurs apparences
Le premier élément est un élément à fermeture automatique, où nous communiquons quelque chose au navigateur, mais il n’a pas non plus de valeur. Un exemple de ceci est l’élément < br >, qui insère un saut de ligne.
Le deuxième élément est un élément commun, où nous communiquons une valeur comme appartenant à un élément. Par exemple <p>hello, worl d!</p > est la valeur « bonjour, monde! » comme appartenant à l’élément paragraphe.
Enfin, nous avons un élément avec un attribut. Et un attribut est ce à quoi ressemble — bon sang, c’est un attribut! Cela donne à un élément plus de contexte ou de sens. Les attributs peuvent avoir plusieurs valeurs et les éléments peuvent avoir plusieurs attributs. Attribut-ception.
Maintenant – je dois le mentionner – nous ne créons pas les noms de nos éléments HTML. Nous les empruntons à partir d’une liste de plus de 100 éléments prédéfinis. Bien sûr, cela rend certaines choses plus faciles, et certaines choses beaucoup, beaucoup plus difficiles, comme la mémorisation!
Troisième minute : Comment HTML et CSS communiquent
Le !DOCTYPE html spécifie que nous écrivons HTML5 – comme supposé pour toutes les autres versions de HTML que nous voulons éviter. Et étant donné l’élément à fermeture automatique meta avec l’attribut charset et la valeur UTF-8, notre texte est codé en Unicode. UTF-8 signifie Format de transformation Unicode 88. Maintenant, on peut écrire????! Une fois, papa a décidé de texter en emoji.
\_(ツ)_/
Nous avons également ajouté un élément style qui est l’un des points d’entrée disponibles pour CSS. Où le selector sélectionne un élément et lui applique un property avec un value correspondant. Nous explorerons cela et plus encore dans la prochaine minute.
Encore une fois – je dois le mentionner — nous ne créons pas les noms de nos propriétés CSS. Nous les empruntons à partir d’une liste de quelques centaines de propriétés prédéfinies. Bien sûr, cela rend certaines choses plus faciles, et certaines choses beaucoup, beaucoup plus difficiles, telles que ____________!
Notre site Web n’est plus terrible! Ce que nous avons, c’est « bonjour, monde! »en texte vert, et si la largeur de notre site Web était redimensionnée à 8,5 pouces ou moins, il serait lu en bleu et à 5 pouces ou moins, en rouge. Ici, nous avons utilisé des requêtes multimédia pour remplacer CSS dans certaines circonstances, comme la largeur de notre site Web.
Qu’est-ce qu’une réinitialisation et un débogueur CSS ?
Vous préférez la vidéo? Cliquez ici pour ouvrir dans Scrimba
Nous utilisons une réinitialisation pour garantir la cohérence de notre conception et un débogueur pour exposer les incohérences.
Nous avons besoin de notre réinitialisation, car les navigateurs sont opiniâtres et nous définissent certaines propriétés CSS que nous voulons désactiver. Les réinitialisations CSS populaires existent, mais nous ferons les nôtres. Et nous avons besoin de notre débogueur pour maintenir facilement la conception de notre site Web.
Nous pouvons créer un dossier nommé styles pour héberger notre réinitialisation et notre débogueur:
styles/ reset.css debug.css
Et pour lier nos nouveaux fichiers CSS à nos index.html, nous ajoutons link éléments:
Ignorer la ligne 1. pour l’instant — commençons par body, body * { … } où nous sélectionnons le body et tous les éléments du body avec un *. L’astérisque signifie sélectionner tous les enfants. Vous vous souvenez de notre webtree?
html / \head body <- selected / \ \… … p <- selected
body, body * { … } sélectionne les body et —a , dénote et –p car c’est l’un des enfants de body. Ceci est connu sous le nom de relation parent-enfant, où body est le parent et p est l’enfant. Et nous indiquons à ces éléments des propriétés communes unset. Les propriétés que j’ai choisies ne sont qu’une liste restreinte. Voici un exemple de l’une des réinitialisations CSS les plus célèbres:
Yikes! Retour à notre réinitialisation. Au sommet, nous avons :root { font: 20px/1.2 sans-serif; }. Qu’est-ce que :root? Vous vous souvenez de notre webtree? C’est la racine, en d’autres termes, l’élément html. Ce pseudo-élément appartient à une classe spéciale d’éléments appelés psuedo-classes, qui peuvent être utilisés pour mieux organiser et comprendre notre CSS.
WAAAIT! N’avons-nous pas besoin d’un * pour sélectionner tous les éléments enfants, afin que leurs propriétés font soient définies? Bonne question – certaines propriétés, telles que les propriétés de texte héritent de leurs parents, et font le fait. Donc, à la place, nous pouvons définir font une fois dans :root, ce qui se propage à tous ses enfants. Propriété-ception.
Notre débogueur CSS
Un débogueur met l’accent sur le contenu et la bordure des éléments:
Voici! En seulement trois lignes, notre débogueur. Cette technique astucieuse remplace trois propriétés communes : color, background et outline. Nos couleurs sont composées de valeurs hsla(), abréviation de teinte, saturation, luminance et alpha. Pour activer notre débogueur, nous lions le fichier.
Si nous voulons désactiver notre débogueur, nous pouvons taper le nom de fichier de manière à le cacher du système de fichiers de notre ordinateur, par exemple:
<link rel="stylesheet" href="styles/-debug.css">
Ou supprimez simplement la ligne. Our(^^^)
Notre débogueur utilise des valeurs hilarantes !important afin d’indiquer que, dans aucune condition, ces propriétés ne peuvent être remplacées. Vous vous souvenez des requêtes des médias?
p { color: green !important; }
@media (max-width: 8.5in) { p { color: blue; } }@media (max-width: 5.0in) { p { color: red ; } }
Si nous avions spécifié que notre couleur p est !important, nos requêtes médias seraient inertes, en raison de leur moindre importance.
Rencontrez la grille CSS et la Flexbox
Vous préférez la vidéo? Cliquez ici pour ouvrir dans Scrimba
Je dirais qu’avant CSS Grid et Flexbox, la conception pour le Web était le voyage d’un héros.
Le fait est que la conception Web était autrefois un acte de jonglerie de hacks où nous trompons le navigateur pour qu’il restitue nos conceptions. Cela devient de moins en moins vrai avec le temps. Je ne suis pas religieux, mais Dieu merci!- ou, merci aux ingénieurs du navigateur!- c’est pourquoi nous pouvons maintenant nous appuyer sur CSS Grid et Flexbox pour lancer notre conception.
Si vous ne le savez pas, CSS Grid et Flexbox sont des technologies plus récentes intégrées aux navigateurs modernes qui font sortir le héros de la conception Web. Et CSS Grid et Flexbox sont des amis – nous les utiliserons ensemble pour créer une grille et des éléments flexibles dans notre grille.
Notre première grille : HTML
… <body> <article> <p>ARTICLE</p> </article>
<article> <p>ARTICLE</p> </article> </body> …
Vous vous souvenez de notre webtree?
body / \article article / \ p p
Nous créons un blog, de sorte que chaque article peut être considéré comme un article. Et nos article contiennent un p de ARTICLE, ce qui est une autre astuce intelligente que nous pouvons utiliser. Utiliser le nom de l’élément comme valeur de l’élément pour nous aider à comprendre où et quelles sont les choses. Valeur -ception.
Entrez la grille CSS. Tout d’abord, nous avons sélectionné l’article et appliqué trois propriétés : display définit l’élément comme une grille, grid-template-columns colonnes de modèles et height simule chaque article comme ayant la hauteur d’une page. Cependant, height est un code de colle et sera supprimé.
Concentrons-nous sur les deux lignes les plus importantes:
Tout d’abord, si nous avions défini grid-template-columns sur 1fr 1fr 1fr, où fr est l’abréviation de fraction-unité, nos trois colonnes seraient divisées en tiers. Pourtant, notre colonne centrale a une largeur minmax, ce qui signifie qu’elle est réactive. À 8.5in ou moins, notre colonne centrale s’affiche à 100% de largeur, et nos colonnes les plus à gauche et à droite disparaissent, car il n’y a pas de reste.Barre latérale
: notez que la conception réactive ne se limite pas aux requêtes multimédias. C’est un exemple où notre conception est implicitement réactive, par opposition à explicitement réactive. C’est le meilleur type de design réactif, car il n’est pas codé en dur. Et c’est l’une des raisons pour lesquelles CSS Grid et Flexbox sont si puissants.
Deuxièmement, pour communiquer que les enfants de article appartiennent à la colonne centrale, ou commencent à la deuxième colonne et se terminent à la troisième, nous définissons grid-column à 2 / 3. Notez la différence subtile entre grid-template-column et grid-column, pour les colonnes de modèle ou les colonnes de span.
La grille CSS est géniale — et c’est le cas – mais nous allons maintenant nous appuyer sur Flexbox pour centrer notre texte ARTICLE. Ce que nous allons faire, c’est créer une classe utilitaire, et c’est un autre paradigme pour écrire du CSS. Ici, nous utilisons le fait que les éléments peuvent avoir des attributs de style en ligne à l’élément p:
<p class="debug-center">ARTICLE</p>
CSS en HTML?!
(╯°□°）╯︵ ┻━┻
Voici ce qui se passe: les éléments ont un attribut de classe. Et nous pouvons utiliser cet attribut pour écrire non seulement du CSS dans des éléments, mais dans une sorte d’élément ou de classe d’élément. Cela signifie que nous pouvons réutiliser des classes sur plusieurs éléments, quelle que soit leur ressemblance. Hélas – rien n’a changé — nous devons également créer une classe .debug-center quelque part dans notre CSS. Que diriez-vous de notre débogueur:
Notez que nous utilisons un préfixe . pour différencier les classes des éléments.
Maintenant, partout où un élément est attribué à notre classe debug-center, son texte sera centré. Tout d’abord, nous définissons display sur flex en faisant de l’élément un élément Flexbox par opposition à un élément de grille CSS. Ensuite, nous définissons justify-content à center pour centrer horizontalement et align-items à center pour centrer verticalement. Aaagh!
Imaginez ceci: nous utilisons Grid pour mettre en page la conception de notre site Web, et Flexbox pour fléchir les éléments de notre grille à la position souhaitée.
Itérer notre grille
Vous préférez la vidéo? Cliquez ici pour ouvrir dans Scrimba
Nous avons un problème: sans .debug-centerARTICLE étreint les murs gauche et droit. Ce dont nous avons besoin, ce sont des gouttières verticales et horizontales pour que notre contenu puisse respirer. Ahah. Sinon, la lecture deviendrait frustrante et conduirait à une mauvaise expérience utilisateur. ヾ(*д*;)
Pour le remplissage vertical:
article { padding: 0.5in 0; …}
Et pour le rembourrage horizontal, nous pourrions utiliser un rembourrage, et l’un ou l’autre fonctionnerait:
padding: 0.5in 0.5in;padding: 0.5in;
Cependant, nous voulons que nos gouttières soient réactives, nous utiliserons donc une grille CSS:
Ici, nous avons fait trois choses: 1. nous avons défini nos gouttières horizontales comme étant 0.5in (celles-ci deviendront réactives — je le promets!). 2. notre colonne de contenu est passée de 8.5in à 7.5in, la somme étant toujours 8.5in, et 3. identifiants composés start et end pour nommer le début et la fin de notre colonne de contenu.
Lorsque nous avons ajouté de nouvelles colonnes, nous devions également mettre à jour article *:
article * { grid-column: 3 / 4; }
Mais compter les colonnes n’est pas idéal. Au lieu de cela, utilisons nos identifiants inventés:
article * { grid-column: start / end; }
Nous avons mis à jour notre grille sans casser le flux de contenu, tant que nous continuons à utiliser les identifiants start et end que nous avons constitués. ◉◉◉◉
Dernier – comme promis – nous avons besoin que nos gouttières soient réactives. minmax() pour une raison ou une autre ne fonctionne pas ici, nous utiliserons donc des requêtes multimédias:
Maintenant à ou moins de 8.5in, article utilisera % au lieu de in pour diviser nos colonnes, et les colonnes les plus à gauche et à droite disparaîtront car — encore une fois — il n’y a pas de reste. Malgré tout cela, nous aurions pu définir padding sur 0.5in 5% pour obtenir le même effet, alors qu’est-ce qui donne? Lisez la suite!
Itérer notre grille, encore une fois
Vous préférez la vidéo? Cliquez ici pour ouvrir dans Scrimba
Pour comprendre notre grille, utilisons des images pour couvrir des colonnes, de 100% à 8.5in à 7.5in sur ordinateur de bureau, et de 100% à 90% sur mobile. Cependant, pour la dernière image, celle de gauche en bas, nous devons ajouter encore quelques colonnes à notre grille. AF) UBQWF * VBQPWIFB, ai-je raison?
Ne vous laissez pas intimider — la grille CSS est géniale. Ajoutons deux autres colonnes:
Nous avons divisé notre colonne de contenu en trois colonnes: 1.25in 5in 1.25in. Nous avons également ajouté des pourcentages proportionnels pour notre requête média : 15% 60% 15%. Le plan est que le texte couvre notre colonne de contenu 7.5in d’origine et que les petites images couvrent notre nouvelle colonne 5in.
Pour ajouter des images, nous utilisons l’élément img et son attribut src—source:
Ce sont des locaux, c’est-à-dire qu’ils sont sur notre ordinateur. Et étaient-ils distants, c’est-à-dire sur un serveur:
<img src="https://website.com/images/cosmos.jpg">
Notez que chaque img a l’une des quatre classes suivantes : size-*. Et parce que nous voulons plus que des images, comme des vidéos, pour couvrir la grille de notre site Web, il est préférable que nous utilisions des classes afin de pouvoir réutiliser le CSS. Ces size-* classes sont également des classes utilitaires, donc changer la taille que nous voulons est simple.
Faisons en sorte que nos size-* classes couvrent différents ensembles de colonnes:
Étant donné que les img rendent à leur taille réelle, par exemple un rendu d’image de 400 × 400 à 400 pixels, nous devions remplacer ce comportement par le nôtre : width: 100%. Ainsi, lorsqu’une image est attribuée à une classe size-*, elle peut être redimensionnée à toutes les colonnes qu’elle couvre. Notez que nous n’avons pas besoin de définir height.
Ajout d’éléments de texte
Vous préférez la vidéo? Cliquez ici pour ouvrir dans Scrimba
Liens vers le site Web et le contenu
Maintenant que nous devenons sérieux avec notre article, formalisons les choses:
… <article></article> …
Maintenant, chaque article est liable. Liable ? Bien – les sites web sont des liens:
https://website.com/index.html
Et le contenu de notre site Web, par exemple article s, peut également être lié à:
https://website.com/index.html#article
Ici article est la valeur d’un attribut id, analogue à la liaison d’un horodatage dans une vidéo YouTube (par exemple, celle-ci). Mieux que de suggérer « commencer à 4 minutes et 7 secondes » ou « lire à partir du deuxième article », nous pouvons lier le contenu de notre site Web, comme un horodatage dans une vidéo.
Pour lier un site Web ou un contenu, nous utilisons l’élément a et l’attribut href:
Le texte « Le Cosmos » relie maintenant le début de l’article : #the-cosmos.
Cette idée de lien (lier des sites Web et du contenu dans des sites Web) est l’un des points du HTML. HyperCard maîtrisait cela, mais au lieu de lier des sites Web et du contenu, s’intéressait aux idées et aux associations. À l’époque, c’était en 1987 et HTML a été proposé pour la première fois en 1989. Regardez quelques secondes de la vidéo que j’ai postée plus tôt — ici, j’ai lié un horodatage:
Éléments de texte
Ajoutons des en-têtes, une date de publication, un texte fort et accentué et des liens:
<article>
<h1><a href="#the-cosmos">The Cosmos is all there is</a></h1> <h2>Or ever was, or ever will be</h2>
<time datetime="03-09-2014">MAR. 9, 2014</time> <p><em>A generation ago</em>, the astronomer <a href="https://en.wikipedia.org/wiki/carl_sagan">Carl Sagan</a> stood here and launched hundreds of millions of us on a great adventure the exploration of the universe revealed by science. It's time to get going again. We're about to begin a journey that will take us from the infinitesimal to the infinite, from the dawn of time to the distant future. We'll explore galaxies and suns and worlds, surf the gravity waves of space-time, encounter beings that live in fire and ice, explore the planets of stars that never die, discover atoms as massive as suns and universes smaller than atoms. </p>
<img class="size-4" src="images/cosmos.jpg">
<h3>COSMOS IS ALSO A STORY ABOUT US</h3> <p>It's the saga of how wandering bands of hunters and gatherers found their way to the stars, one adventure with many heroes. To make this journey, we'll need imagination. But imagination alone is not enough because the reality of nature is far more wondrous than anything we can imagine. This adventure is made possible by generations of searchers strictly adhering to a simple set of rules test ideas by experiment and observation, build on those ideas that pass the test, reject the ones that fail, follow the evidence wherever it leads and question everything. <strong>Accept these terms, and the cosmos is yours.</strong> </p>
</article>
Ce sont les lignes d’ouverture de notre astrophysicien personnel — Neil deGrasse Tyson — Cosmos 2014: Une Odyssée dans l’espace-Temps, une réimagination du Cosmos original de Carl Sagan en 1980: Un Voyage personnel. C’est de la science-fiction sans le fi. Et il se renouvelle en 2019 !
Ci-dessus, nous avons introduit quelques éléments: h1, h2, h3, time, strong, et em.
h1–h6 les éléments sont des gros titres.
L’élément time horodate notre article. Nous pouvons mettre ce que nous voulons pour la valeur de l’élément, car les ordinateurs lisent la valeur de l’attribut datetime, qui doit être lisible par machine.
L’élément strong est pour le texte fort et l’élément em est pour le texte accentué. De plus, les éléments h* sont forts.
Notez que les éléments h* et p se séparent d’une ligne à l’autre, ou se bloquent, alors que les éléments time, strong et em ne le font pas. En effet, les navigateurs définissent les éléments h* et pdisplay à block, et les éléments time, strong et em éléments display à inline.
Rems et ems
Lorsqu’il ne suffit pas de bloquer des éléments d’une ligne à l’autre, nous utilisons des sauts de ligne afin qu’il soit plus facile de différencier les éléments les uns des autres, un peu comme le rembourrage ou les gouttières. Nous pourrions utiliser des éléments br ici, mais il est préférable d’utiliser du CSS étranger plutôt que du HTML étranger.
Voici comment pousser le contenu deux sauts de ligne, suivant les éléments h2 et p:
h2, p { margin-bottom: 2.4rem; }
2.4 rem ?
Rappelez-vous notre réinitialisation? Nous définissons font sur 20px/1.2 sans-serif. Je ne l’ai pas expliqué à l’époque — et honte à moi — mais 2.4 est un saut de deux lignes à 1.2 hauteur de ligne, par exemple, un texte à simple interligne. Un texte plus lisible pourrait être 1.5 et un texte à double interligne pourrait être 2.
* Ahem * Que sont les REM ?
* Ahem ahem * Et que sont les ems?
rem est la racine em et les deux sont des multiplicateurs. 1rem est 20px et 1em est font-size du parent. Si nous avions défini nos sauts de ligne en ems, pas en rems, et défini h2 et p sur des font-size différents, leurs sauts de ligne seraient différents! Par conséquent, les sauts de ligne cohérents utilisent rem s et les sauts incohérents utilisent em s.
Et c’est un CSS puissant qui écrit des idées de sorte que le design est connecté. Compte tenu de cette illumination, je pense qu’il est beaucoup plus sage de penser au CSS non pas dans les règles mais dans les relations. Ainsi, si nous faisons un changement quelque part, nous pouvons faire un changement partout.
make faire un changement quelque part
… faire un changement partout…
Un vrai emoji Pomme. Il avait un communiqué de presse
Responsive Responsive design
Et si nous écrivions CSS en rem s et em s, et utilisions des requêtes multimédias pour modifier :root ‘s font-size? Ensuite, tout — et je veux dire tout – sera redimensionné proportionnellement. Nous pouvons aller encore plus loin et avoir plusieurs requêtes multimédia pour plusieurs largeurs:
Ce qui est étonnant à ce sujet, c’est que nous ne remplaçons pas simplement une propriété, nous remplaçons la propriété pour rem s et em s. Nous pouvons maintenant écrire du CSS qui n’est pas seulement réactif, mais qui répond à notre conception réactive. C’est peut-être la phrase la plus importante de tout ce post:
Nous pouvons écrire des CSS qui ne sont pas seulement réactifs, mais qui répondent à notre conception réactive.
Ce n’est pas seulement cool, c’est comme ça que nous devrions écrire du CSS. Les sites Web ont tendance à être terribles, et je pense que cela peut se résumer à ceci: lorsque nous écrivons du CSS, nous devons écrire dans des systèmes de conception et non du code en silo. Lorsque nous utilisons rem s et em s en tandem avec des requêtes multimédia, c’est un système de conception et le code n’est pas cloisonné.
Les propriétés peuvent avoir des raccourcis comme nous l’avons vu auparavant ; padding: 0.5in, équivalent à padding: 0.5in 0.5in. Et ici, nous utilisons font pour combiner font-weight, font-size et line-height. Après font, nous avons color avec hsl valeurs, comme hsla valeurs dans notre débogueur.
Un problème non résolu est notre élément a. Dans notre réinitialisation, nous désactivons color et text-decoration en rendant les liens indiscriminés du texte. Nous désactivons ces propriétés car text-decoration: underline est trop subtil. Voici donc comment nous pouvons leur donner un accent fort:
a { box-shadow: inset 0 -0.25em hsl(55, 100%, 75%); }
Nous inversons box-shadow pour créer un soulignement qui se trouve à l’intérieur de l’élément. Si nous avions défini inset sans valeur négative, notre soulignement serait une overline. Nous utilisons également em pour que le soulignement s’étale avec son font-size. C’est un exemple de quand nous voulons une mise à l’échelle incohérente, comme le supposent nos sauts de ligne.
Il y a beaucoup plus à box-shadow que cela: cliquez pour en savoir plus.
Dernière étape: dégradés
Vous préférez la vidéo? Cliquez ici pour ouvrir dans Scrimba
Wohoo! Tout ce dont nous avons besoin est un repère pour nos lecteurs quant à l’endroit où un article commence et se termine. Sans cela, les extrémités de chaque article ressembleront à une continuation sans fin, ce qui conduira à une mauvaise expérience utilisateur. Nous devons donc donner un indice à nos lecteurs… (◔◔)
Ce que je propose est simple: un dégradé qui s’étend du haut de chaque élément article au bas de son élément h2. Et nous pouvons écrire notre dégradé en em s de sorte que notre site Web se redimensionne, notre dégradé aussi:
article { … background: linear-gradient(hsl(55, 100%, 96%), white 6.83em);}
Ici, nous avons défini un dégradé de couleur à blanc et utilisé 6.83em pour que notre dégradé n’étende pas tout article mais se termine à l’équivalent du bas de notre élément h2. Cependant, la valeur exacte dépend.
Vous pouvez soit faire des calculs pour déterminer la taille, par exemple 6.83em, mais une autre technique consiste à définir une taille sur la couleur supérieure, par exemple hsl(55, 100%, 96%) 6.83em. Une fois qu’elle est égale ou supérieure à la taille de la couleur du bas, elle apparaîtra sous la forme d’une ligne et non d’un dégradé, ce qui rend intuitive la façon de la changer.
Félicitations?
Le blog que nous avons construit! Vous préférez la vidéo? Cliquez ici pour ouvrir dans Scrimba
Félicitations! ٩(˘.) You Vous êtes entré dans un monde qui a désespérément besoin de meilleurs concepteurs et ingénieurs. Et avec CSS Grid, Flexbox, le Responsive Design et les débogueurs au niveau du navigateur, le développement pour le web n’a jamais été aussi accessible.
N’oubliez pas qu’il y a un cours gratuit sur Scrimba où j’enseigne comment créer le même site Web à partir de *zéro *. Cliquez ici pour vous inscrire !
