Vous voulez s'améliorer dans le code? Enseigner à quelqu'un CSS.

Récemment, un ami m'a demandé des conseils de programmation. C'est une débutant absolu qui ne sait rien de la programmation. J'ai décidé de commencer avec mon propre point de départ: HTML et CSS. Nous utilisons Codepen et commençons à copier et à modifier les extraits de code existants. Bientôt, un chemin d'apprentissage nous a clairement été présenté.

Le but de cet article n'est pas d'enseigner les bases du CSS aux lecteurs qui ont maîtrisé les bases du CSS, mais de se concentrer sur le contenu qui inspire les débutants à apprendre et, espérons-le, vous inspire à transmettre les connaissances aux autres lorsque vous en avez l'occasion. C'est tellement gratifiant d'aider les autres, et à mon tour, j'ai appris des expériences précieuses qui ont changé ma façon de penser le code. Gagnant-gagnant!

Voici cinq leçons que j'ai apprises après avoir enseigné aux autres CSS:

Leçon 1: ne commencez pas de zéro

Lorsque j'ai commencé à apprendre la programmation Web il y a 12 ans, j'ai commencé avec des dispositions - en utilisant des flotteurs, des marges, des remplissages et des déclarations de position pour le positionnement. Cela peut sembler un peu daté de nos jours, mais c'est là que j'ai commencé avec mon nouveau partenaire de programmation à l'époque.

Le résultat n'est pas idéal.

Comme vous pouvez le deviner, commencer par "c'est comment localiser une boîte vide au centre de l'écran" est une erreur. Comme c'est ennuyeux! Bien que j'ai été impressionné par ma capacité à démontrer comment Flexbox a positionné les éléments au centre de l'écran (plus à ce sujet plus tard), j'ai immédiatement rencontré de nombreux autres problèmes qui n'étaient pas liés à l'emplacement.

"Alors, comment changer la couleur?"

«Cela peut-il changer de forme lorsqu'il oscille?»

«Quelles polices peuvent être utilisées sur la page Web?»

Je pensais que cela nous prendrait quelques semaines de plus pour l'apprendre.

Donc, mon plan pour enseigner 12 colonnes de grilles a été suspendue, nous avons élevé la table de couleur nommée de Chris avec quelques extraits de code copiés et avons commencé à essayer. Tout d'abord, nous avons changé la couleur du logo Cassidy Williams Netflix / Netlify. Ouah! Cela a instantanément attiré son attention.

<code><a href="https://www.php.cn/link/2080dd731c0a27c6944f58acae270b81" target="_blank"> 
</a></code>
<div></div>
<div></div>
<div></div>

<div>Plus joli</div>

Puis quelques ajustements simples à CSS:

 <code>body { background: #F9F2DB; color: #092935; font-size: 50px; } a { color: #092935; } .logo .uno, .dos, .tres { background: #C61561; } .logo .dos { box-shadow: 0 0 20px #F9F2DB; } .logo::before { background: #F9F2DB; } .name { letter-spacing: 8px; }</code>

En quelques minutes, mon ami était fasciné! Il n'y a pas de positionnement ennuyeux à craindre, juste quelques lignes de code simples peuvent transformer les choses familières en quelque chose de complètement différent.

Puis elle a réalisé qu'elle pouvait changer la couleur de n'importe quoi! Nous avons chargé des sites Web bien connus dans notre navigateur et modifié des couleurs de texte et d'arrière-plan à l'aide de Devtools, qui ont tous été réalisés en quelques minutes. La mission est terminée! Mon ami était fasciné.

Leçons apprises: ne vous inquiétez pas d'essayer de construire à partir de zéro. Essayez d'utiliser les ressources existantes!

Leçon 2: Commentaires

Cela ne fait pas partie de mon plan pour le cours, mais la question se pose des raisons pour lesquelles certaines sections CSS commencent par / et se terminent par / donc nous en discutons.

Cela m'a fait commencer à penser à mon travail. Je n'ai vraiment pas écrit suffisamment de commentaires de code. L'observation d'un nouveau programmeur annotant tout (je veux dire tout ) m'a fait réaliser à quel point les commentaires sont utiles, non seulement pour vous-même, mais pour une équipe plus large, et même pour vous à l'avenir . (Sarah Drasner a un excellent discours sur ce sujet).

Voici la chose: avant cela, je pensais que j'avais été assez diligent dans l'écriture de commentaires. Cependant, l'observation des autres faisant cela m'a fait réaliser combien de fois j'ai regardé un morceau de code (en particulier JavaScript) et j'aurais aimé y avoir ajouté une ligne ou deux pour me rappeler ce que je faisais à l'époque. Une tâche de dix secondes pourrait me faire économiser cinq minutes (ou plus) de temps. Cela s'accumule, et c'est maintenant où je travaille pour m'améliorer.

Leçons apprises: écrivez plus de notes.

Leçon 3: positionnement

Nous avons commencé avec du HTML de base et honnêtement, j'ai presque immédiatement perdu ma gloire quand j'ai vu les yeux de mon ami. (Contrairement à l'édition de CSS pré-écrits), il a l'air trop ennuyeux lorsque vous ne pouvez pas le voir fonctionner immédiatement. Cependant, nous avons persévéré et obtenu des résultats.

Croyez-moi, n'utilisez pas de bordure de 1 pixel autour de vide

L'élément est positionné. Vous perdrez très rapidement l'attention de votre public. Mettez une photo du chien - ou du bébé Yoda ou de la pizza - tant qu'il n'est pas vide. Ensuite, nous nous sommes tournés vers Flexbox. Au début, nous avons découvert qu'il y avait un peu trop de grilles CSS. Nous avons brièvement examiné la grille CSS, mais lorsque nous lisons beaucoup d'articles à ce sujet, il est évident que beaucoup de gens supposent que les lecteurs connaissent déjà CSS, en particulier Flexbox. Mon ami a décidé de commencer par Flexbox.

J'avoue: je suis tellement habitué à utiliser des frameworks d'interface utilisateur (en particulier Bootstrap) que j'écris rarement CSS moi-même pour le positionnement. Je sais comment cela fonctionne et (surtout) des déclarations, mais je l'écris toujours rarement moi-même, même dans des situations relativement faciles. L'enseignement m'a fait réfléchir à ma dépendance à l'égard des cadres d'interface utilisateur. Oui, ils sont sans aucun doute géniaux et économisent beaucoup de temps sur notre projet, mais je me souviens avoir utilisé Bootstrap dans un projet récent qui n'a essentiellement que deux pages et n'en a probablement pas besoin du tout!

Leçons apprises: si le projet est petit et que le nombre d'éléments qui doivent être positionnés est minime, envisagez d'abandonner le cadre et d'écrire du code à partir de zéro! Le résultat final sera plus léger, plus rapide et plus satisfaisant!

Leçon 4: composition

J'aime la typographie. J'ai eu la chance de travailler avec de grands designers au cours des dernières années, et cela m'a vraiment aidé à saisir les nuances de la typographie. Il est étonnant de voir comment les modifications à des choses comme la hauteur des lignes et l'espacement des mots peuvent passer la conception de la normale à excellente. C'est quelque chose que je veux que les étudiants de première année que j'apprends à maîtriser. Eh bien, je n'ai pas à déranger parce que la seule chose qui m'intéressait au départ était de changer les polices, et puis, ce qui était crucial pour moi, c'était le nombre de polices que nous pouvions utiliser. Le choix est presque illimité, les services qui fournissent des polices et des fonderies ont augmenté au point où tout est possible au cours des dernières années, à un rythme très rapide et a un petit impact sur le temps de chargement.

Mais la chose au sujet des concepteurs (et des développeurs front-end comme moi) est la suivante: nous pouvons être un peu étroits en ce qui concerne la sélection des polices. Les conceptions ont tendance à s'en tenir aux mêmes polices (roboto et sans-sans?) Du même service, car nous savons qu'ils sont faciles à mettre en œuvre et à travailler. Explorer les polices avec un débutant m'a forcé à aller au-delà des anciennes normes et à essayer quelque chose de nouveau. Je recherche maintenant de nouvelles combinaisons et peaufinant la façon dont ils fonctionnent à l'écran et l'impact sur l'apparence globale de la conception. En bref, enseigner aux autres la typographie a amélioré ma propre histoire de typographie, qui peut être coincée vers 2017.

Leçons apprises: suivez les dernières mises à jour de la typographie.

Leçon 5 :: Hover rend tout amusant

Jusqu'à présent, tout se passe bien, mais comme vous pouvez l'imaginer, les choses sont encore assez statiques. Sans plans réels, nous avons accidentellement ajouté l'effet de volants de l'élément, ce qui a immédiatement attiré son attention, comme la première fois à changer la couleur!

Hover ajoute des interactions et facilite l'impressivité, ce qui les rend parfaits pour les débutants à essayer. Échelle des objets, changez la boîte de carré en cercle, masquez le contenu - qui peuvent tous être faits facilement, donc le plan de planage est le moyen idéal pour les nouveaux programmeurs d'obtenir des résultats instantanés. Voici la chose: "" Jouez comme ça "" ouvrira d'autres portes. "Et si je fais juste ça?" C'est une question que beaucoup d'entre nous nous posent rarement dans notre travail quotidien. Avec des conceptions claires, il y a peu d'occasions de jouer, et il y a aussi peu d'occasions d'expérimenter.

Donc, voici la dernière leçon: prendre le temps de jouer. On vous demande simplement: «Comment faites-vous cette chose?» m'oblige à apprendre de nouvelles choses, à apprendre de nouvelles choses sur le CSS et à comprendre ce que je peux ramener dans ma routine quotidienne. L'expérience (ou mieux encore, le jeu) fait de moi un meilleur designer et je ferai plus.

Leçons apprises: prenez le temps de jouer.

en conclusion

Si mon temps d'enseigner le débutant CSS m'a appris quelque chose, c'est que j'écris rarement du code à nouveau à zéro. Les extraits de code et la saisie semi-automatique m'ont fait gagner des heures, mais ce sont ces commodités qui m'ont fait oublier quelque chose de très basique. Quelque chose que je devrais savoir. En enseignant aux autres, mon codage s'est amélioré dans l'ensemble même s'il ne prend que 15 minutes à l'occasion, et mon horizon est ouvert à de nouvelles idées et techniques qui n'ont peut-être pas été considérées auparavant.

Quant à mes amis? Eh bien, elle était tellement obsédée par CSS pendant une courte période, nous étions ensemble qu'elle suivait maintenant un cours en ligne qui comprenait HTML, et maintenant qu'elle savait ce que HTML pouvait faire, cela ne semblait pas si ennuyeux!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!