Catégories
Astuces et Design

Vous voulez améliorer le code? Enseignez à quelqu'un le CSS.

Un de mes amis m'a récemment demandé de lui apprendre à coder. Elle était une débutante absolue, n'ayant aucune idée de ce que le codage implique vraiment. J'ai décidé de commencer là où j'ai commencé: HTML et CSS. En utilisant CodePen, nous avons commencé à forger des stylos et à les modifier. Bientôt, un parcours d'apprentissage a commencé à se dérouler.

Le but de cet article n'est pas d'enseigner le CSS de base à ceux qui le connaissent déjà, mais plutôt de mettre en évidence les choses qui ont inspiré un nouveau venu et, espérons-le, vous inciter à transmettre certaines connaissances à d'autres si l'occasion se présente. Cela faisait du bien d'aider quelqu'un et, à mon tour, j'ai appris des leçons vraiment précieuses qui ont changé ma façon de penser mon code. Gagnez, gagnez!

Alors, on y va: cinq leçons que j'ai apprises en enseignant le CSS à quelqu'un.

Leçon 1: Ne partez pas de zéro

Quand j'ai commencé à coder pour le Web il y a 12 ans, j'ai commencé par la mise en page – positionnement avec des flottants, des marges, des marges et des déclarations de position. Cela peut sembler dépassé ces jours-ci, mais c'est quand même là que je suis allé tout de suite avec mon nouveau copain de codage.

Cela ne s’est pas très bien passé.

Comme vous pouvez le deviner, commencer par quelque chose comme "Voici comment positionner une boîte vide au milieu de l'écran" était une erreur. Comme c'est sans intérêt! Et même si j'ai été impressionné par ma propre capacité à démontrer comment Flexbox peut positionner un élément au centre de l'écran (plus à ce sujet plus tard), j'ai été immédiatement confronté à de nombreuses questions supplémentaires non positionnelles.

«Alors, comment changez-vous les couleurs?»

"Peut-il changer de forme lorsqu'il est survolé?"

"Quelles polices pouvez-vous utiliser sur le Web?"

Je pensais que nous étions à des semaines de tout cela.

Donc, mes plans d’enseignement de la grille à 12 colonnes sont sortis de la fenêtre et nous avons sorti le nuancier nommé de Chris à côté de quelques stylos fourchus et avons commencé à jouer. Tout d'abord, nous avons changé les couleurs du logo Cassidy Williams Netflix / Netlify. Hou la la! Coup instantané.

 
  
  
Prettier

Ensuite, quelques ajustements simples au CSS:

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;
}

En quelques minutes, mon ami est devenu accro! Il n'y avait pas de positionnement ennuyeux à s'inquiéter, juste un exemple clair de la façon dont quelques lignes de code simples peuvent changer quelque chose de si familier en quelque chose d'entièrement différent.

Ensuite, vous pouvez changer la couleur de n'importe quoi! Nous avons chargé quelques sites bien connus dans le navigateur et changé les couleurs de certains textes et arrière-plans avec DevTools, le tout en quelques minutes. Mission accomplie! Mon ami était accro.

Leçon apprise: Ne vous inquiétez pas d’essayer de créer quelque chose à partir de zéro. Jouez avec ce qui existe déjà!

Leçon 2: Commentaires

Ce n’est pas là que j’avais prévu d’aller avec mon cours prévu, mais la question de savoir pourquoi certaines parties de CSS commencent par /* et terminer par */ est venu, alors nous sommes allés avec.

Celui-ci m'a vraiment fait réfléchir à mon propre travail. je vraiment ne commentez pas assez mon code. Regarder un nouveau codeur commenter tout (et je veux dire tout) m'a rappelé à quel point les commentaires sont utiles, non seulement pour vous-même, mais aussi pour une équipe plus large, ou même futur toi. (Sarah Drasner a un excellent discours sur ce sujet).

Et voici la chose: jusque-là, je pensais que je commentais assez diligemment. Cependant, regarder quelqu'un d'autre le faire m'a fait réaliser combien de fois je regardais un morceau de code (en particulier JavaScript) et j'aurais aimé y mettre une ligne ou deux pour me rappeler ce que je faisais. Une tâche de dix secondes aurait pu me faire gagner cinq (ou peut-être même plus) minutes sur la route. Cela s'additionne et c'est quelque chose sur lequel je travaille maintenant.

Leçon apprise: Commentez plus.

Leçon 3: Positionnement

Nous avons commencé avec du HTML basique, et honnêtement, j'ai vu les yeux de mon ami se briller presque immédiatement. Cela a l'air si terne quand vous ne pouvez pas le voir faire quoi que ce soit tout de suite (contrairement à l'édition de CSS pré-écrit). Cependant, nous nous y sommes tenus et avons obtenu des résultats.

Croyez-moi sur parole, ne commencez pas par positionner vide

éléments avec des bordures de 1 pixel autour d'eux. Vous perdrez votre audience très rapidement. Mettez une photo d'un chien là-dedans – ou de bébé Yoda ou d'une pizza – à condition que ce soit autre chose qu'un élément vide.

Nous nous sommes ensuite tournés vers Flexbox. Nous avons en fait trouvé un peu trop CSS Grid au début. Nous avons brièvement examiné CSS Grid, mais en lisant de nombreux articles à ce sujet, il est clair que beaucoup supposent que le lecteur est déjà familiarisé avec CSS, Flexbox en particulier. Mon ami a décidé de commencer avec Flexbox.

Un aveu de ma part: je suis tellement habitué à utiliser les frameworks d'interface utilisateur (en particulier Bootstrap) que je positionne très rarement quoi que ce soit dans Flexbox en écrivant moi-même le CSS. Je sais comment cela fonctionne et (la plupart des) déclarations, mais je l'écris encore très rarement moi-même, même dans des situations où ce serait relativement facile. L'enseignement m'a fait réfléchir à ma dépendance à l'égard des cadres d'interface utilisateur dans leur ensemble. Oui, ils sont sans aucun doute incroyables et nous font gagner beaucoup de temps sur les projets, mais je me suis souvenu avoir utilisé Bootstrap sur un projet récent qui comptait essentiellement deux pages et n'en avait probablement pas besoin!

Leçon apprise: Si le projet est quelque chose de petit avec un nombre minimal d'éléments à positionner, envisagez d'abandonner le cadre et le code à partir de zéro! Le résultat final sera léger, rapide et bien plus satisfaisant!

Leçon 4: Typographie

J'adore la typographie. J'ai eu la chance de travailler avec de grands designers ces dernières années et cela m'a vraiment aidé à saisir les nuances de caractères. Il est étonnant de voir à quel point les modifications apportées à des éléments tels que la hauteur de ligne et l'espacement des lettres peuvent vraiment aider à faire passer un design de moyen à incroyable. C'était quelque chose que je tenais à impressionner mon nouvel étudiant enthousiaste. Eh bien, je n’avais pas besoin de me déranger, car la seule chose qui nous intéressait (au départ) était de changer les polices, puis, surtout pour moi, le grand nombre de polices disponibles pour nous. Les choix sont presque illimités et les services et fonderies proposant des polices Web ont explosé ces dernières années à un point tel que tout est possible, à une vitesse sans impact sur les temps de chargement.

Mais voici le problème avec les designers (et les développeurs front-end comme moi): nous pouvons être un peu bornés dans nos choix de polices. Les conceptions ont tendance à s'en tenir aux mêmes polices à partir des mêmes services (Roboto et Open Sans n'importe qui?) Parce que nous savons qu'elles sont faciles à implémenter et qu'elles fonctionnent. Explorer les polices avec quelqu'un de nouveau dans le métier m'a obligé à regarder au-delà des anciennes agrafes et à essayer de nouvelles choses. Je suis maintenant à la recherche de nouvelles combinaisons qui fonctionnent ensemble et je m'intéresse à la façon dont elles fonctionnent à l'écran et ont un impact sur l'apparence et la convivialité d'un design. En bref, enseigner le type à quelqu'un d'autre a amélioré mon propre parcours avec le type, qui était probablement coincé dans quelque chose comme 2017.

Leçon apprise: Restez à jour avec le type.

Leçon 5. :hover rend tout amusant

Les choses allaient bien jusqu'à présent, mais comme vous pouvez probablement l'imaginer, les choses étaient encore assez statiques. Sans vraiment planifier, nous sommes tombés sur l'ajout d'un effet de survol sur un élément et c'était un accrochage instantané, tout comme il changeait de couleur pour la première fois!

Les survols ajoutent de l'interaction et impressionnent facilement, ce qui les rend parfaits pour un nouveau venu. Mettre à l'échelle des objets, changer une boîte de carré à rond, masquer le contenu – ce sont les types de choses qui peuvent être faites si facilement que les survols sont un moyen idéal pour un nouveau codeur d'obtenir des résultats instantanés. Et voici le truc: «jouer» comme ça ouvre d’autres portes. «Et si je fais juste ça?» est quelque chose que beaucoup de nous avons rarement à nous demander dans notre travail quotidien. Avec des conceptions définies sur lesquelles travailler, il y a souvent peu de chances de jouer et également moins de chances d'expérimenter.

Alors, voici la dernière leçon: prenez le temps de jouer. Juste en vous demandant: «Comment faites-vous cela?» m'a obligé à apprendre de nouvelles choses, à voir les nouveautés en CSS et à voir ce que je peux apporter dans mon travail quotidien. Expérimenter (ou mieux encore, jouer) a fait de moi un meilleur designer, et je ferai plus.

Leçon apprise: Prenez le temps de jouer.

Conclusion

Si le temps que j'ai passé à enseigner le CSS à un débutant m'a appris quelque chose, c'est que j'écris rarement du code à partir de zéro. Les extraits de code et la saisie semi-automatique me font gagner des heures, mais ce sont ces mêmes commodités qui me permettent d'oublier certaines choses vraiment basiques. Des trucs que je devrais savoir. En enseignant à quelqu'un d'autre, même si ce n'est que pendant 15 minutes de temps en temps, mon codage s'est généralement amélioré et mes yeux sont ouverts à de nouvelles idées et techniques que je n'aurais peut-être pas envisagées autrement.

Et quant à mon ami? Eh bien, elle a été tellement attirée par CSS pendant notre peu de temps ensemble qu’elle suit maintenant un cours en ligne qui comprend du HTML, ce qui ne semble pas si ennuyeux maintenant qu’elle sait ce qu’il est capable de faire!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *