6 grandes ressources pour apprendre la disposition CSS moderne

Alors que Grid et Flex ont révolutionné la conception Web avec leurs moyens de disposer avec précision du contenu avec moins de hacks, ce sont des mécanismes qui peuvent être difficiles pour vous faire la tête. Si vous vous sentez perdu, essayez ces excellents tutoriels et applications pratiques de bac à sable.

1

Flexbox froggy

Près de dix ans, Flexbox Froggy est l'un des exemples les plus précoces et les plus célèbres d'apprentissage CSS interactif. Ce jeu en ligne vous apprend les principes fondamentaux de Flexbox, autrement connu sous le nom de module de mise en page CSS Flexible Box.

Le jeu fonctionne en présentant un ensemble de personnages de grenouille mignons dans une grille, malheureusement séparés de leurs coussinets. À l'aide d'une zone de texte modifiable, votre tâche consiste à remplir les blancs, en utilisant des propriétés telles que Justify-Contin et Align-Items.

Vos décisions positionneront les grenouilles à des endroits appropriés dans leur étang, espérons-le, bordant chaque grenouille avec son coussin de lys respectif. Les grenouilles sont codées en couleur pour correspondre aux coussinets spécifiques, vous devrez donc les échanger à mesure que la difficulté augmente.

Le jeu ne se prend pas trop au sérieux, vous pouvez donc sélectionner n'importe quel niveau que vous aimez à tout moment. Chaque niveau a une tâche clairement présente et le jeu affiche des indices utiles lorsque vous cliquez sur un nom de propriété CSS spécifique. Il existe même un mode daltonien qui ajoute des motifs pour différencier chaque grenouille.

La série se termine par un grand test de vos connaissances globales, ce qui est un défi très satisfaisant.

Une fois que vous avez maîtrisé Flexbox, vous pouvez passer à CSS Grid avec la suite, Grid Garden. Ce suivi enseigne les principes fondamentaux de la disposition bidimensionnelle en utilisant la même approche, cette fois, vous tâtant pour arroser un jardin et le garder libre des mauvaises herbes.

2

Apprendre la grille CSS

En parlant de CSS Grid, voici un guide complet de cette technique de mise en page plus avancée. Learn CSS Grid est un guide à une seule page autonome qui fonctionne également bien comme référence visuelle et un tutoriel pour débutant.

En travaillant des premiers principes aux techniques avancées, ce guide vous emmène à travers les complexités de la propriété CSS Grid One à la fois. Il n'est pas interactif, mais les excellents exemples compensent plus que cela, présentant exactement comment chaque propriété et chaque valeur contribue à une disposition globale. Les diagrammes d'accompagnement sont simples, mais ils illustrent chaque point efficacement.

Bien que les derniers exemples soient plus pratiques, l'accent est mis ici sur expliquer clairement chaque propriété, ses bizarreries et son comportement lorsqu'ils sont combinés avec d'autres.

Le résultat est un compagnon beaucoup plus accessible aux spécifications officielles, ce qui peut sembler un peu intimidant si vous êtes nouveau dans CSS. Mais si vous ajoutez une grille à votre répertoire CSS ou en suivant l'une des ressources les plus pratiques ici, c'est une référence parfaite pour avoir mis en signet.

3

Grille par l'exemple

Ce site promet «tout ce dont vous avez besoin pour apprendre la disposition de la grille CSS» et il offre, avec des exemples de propriétés spécifiques, des échantillons de niveau supérieur de modèles de conception communs et même des didacticiels vidéo. Créé par Rachel Andrew, un membre du groupe de travail W3 CSS, Grid By Exemple propose des démos claires allant des petits styles de composants aux mises en page entières.

Les principaux exemples incluent des codepens intégrés que vous pouvez explorer et expérimenter pour renforcer votre compréhension. Ils sont également chacun liés à la partie pertinente de la spécification officielle, vous pouvez donc plonger plus profondément si nécessaire.

Les approches alternatives signifient qu'il existe un moyen facile d'apprendre, quelle que soit votre préférence. Que vous appreniez par une compréhension approfondie de chaque dernier détail ou en se forgeant à partir d'un concept de haut niveau, vous trouverez la grille par exemple que vous avez couvert. Le site a une multitude de matériel supplémentaire, au-delà de ses guides de base, avec des liens avec les projets GitHub de Rachel qui suivent les bogues CSS et répondent aux FAQ.

4

Un guide interactif de Flexbox

Ce guide obtient un grand nombre sur ses exemples interactifs qui incluent des onglets et des curseurs que vous pouvez utiliser pour ajuster les propriétés. Au fur et à mesure que vous modifiez ces widgets, le CSS l'accompagnement s'adapte à la correspondance, et vous verrez l'effet en temps réel sur un composant d'échantillon. Cela rend l'apprentissage immédiat et c'est une démonstration précise de ce qui se passe réellement dans votre navigateur.

Un guide interactif de Flexbox a d'excellents diagrammes pour éliminer toute confusion et utilise une métaphore de barbecue amusante pour expliquer les axes, un concept couramment mal compris.

Cet article d'une seule page se termine par une excellente exploration pratique d'une tâche commune: disposer une forme de connexion. Il utilise Flexbox pour fournir quatre dispositions différentes, selon l'espace disponible, sans utiliser du tout des requêtes multimédias. La technique est présentée de trois manières: un exemple interactif, un codepen et une vidéo explicative.

L'auteur a suivi ce guide avec, prévisible, un guide interactif de la grille CSS, qui fait tout aussi bien un travail pour expliquer la disposition bidimensionnelle.

5

Guide de disposition de la grille CSS

Tôt ou tard, vous êtes obligé de rencontrer le guide de mise en page CSS Grid de Chris House – et son partenaire, le guide de mise en page CSS Flexbox – à CSS-Tricks. Ce site a beaucoup d'articles et de guides utiles, mais cette paire représente le meilleur qu'il a à offrir, et ils sont probablement la ressource CSS la plus citée disponible. Presque chaque fois que je me retrouve avec une question sur Grid ou Flexbox, je semble finir ici.

Ces deux guides sont pratiquement la norme pour apprendre sur CSS Grid et Flexbox. Ils font d'excellentes références, avec des diagrammes simples et des explications claires des propriétés, regroupées en fonction de leur objectif. Ils ne sont pas nécessairement pour les débutants absolus, mais sont bien adaptés à quiconque passant des dispositions basées sur le flotteur ou des alternatives plus anciennes.

Chaque guide présente des propriétés en deux colonnes, l'une pour celles qui s'appliquent aux conteneurs parents et l'autre pour les enfants. Il s'agit d'une façon pratique d'approcher le matériau, ce qui aide à renforcer votre compréhension de la façon dont ces différents mécanismes abordent le problème de la présentation du contenu.

Bien que les deux ressources aient de nombreuses sections, y compris des notes sur la terminologie, la prise en charge du navigateur et les bogues, ce sont les sections de propriété qui sont les plus utiles. Le site élargit en fait ces sections par défaut, laissant les autres contractés, ce qui souligne à quel point ils sont l'objectif principal.

6

Qu'est-ce que le Flexbox ?!

Qu'est-ce que le Flexbox ?! est un plus ancien cours vidéo qui reste pertinent aujourd'hui. Présenté par Wes Bos, un développeur Web et enseignant hautement expérimenté, cet ensemble de vidéos couvre tout, de la direction flexible à la disposition des «colonnes à hauteur égale et égale».

Wes est un présentateur engageant qui explique chaque partie des exemples de code au fur et à mesure, et la série est bien adaptée aux débutants et à ceux qui connaissent les bases du CSS. Si vous aimez apprendre d'une voix expérimentée, à un rythme qui vous aidera à suivre facilement, cette série de tutoriels est parfaite pour vous. La plupart des vidéos durent 5 à 10 minutes, donc ils ne sont pas trop enlisés en détail, couvrant chaque sujet avec précision, mais concise.

Bien que les vidéos soient hébergées gratuitement sur le site de WES, qui nécessite votre adresse e-mail pour un accès complet, vous pouvez également les regarder sur sa chaîne YouTube. Comme beaucoup de ressources ici, il y a aussi un guide correspondant pour la grille.