Article original : Learn Responsive Web Design by Building 20 Projects – a Major freeCodeCamp Curriculum Update
Nous venons de publier une refonte significative de notre Certification en Responsive Web Design (la première des 10 certifications actuellement disponibles de freeCodeCamp). Nous avons également mis à jour notre éditeur de code.
Au lieu de leçons de codage, vous apprendrez les concepts et la syntaxe à travers une série de 15 projets pratiques + 5 projets de certification.
Voici la certification complète, que nous estimons prendre environ 300 heures à compléter pour la plupart des débutants en développement web :
- Apprenez le HTML en construisant une application de photos de chats
- Apprenez les bases du CSS en construisant un menu de café
- Apprenez les couleurs CSS en créant un ensemble de marqueurs
- Apprenez les formulaires HTML en construisant un formulaire d'inscription
- Projet de certification : Construisez un formulaire de sondage
- Apprenez le modèle de boîte CSS en construisant une peinture Rothko
- Apprenez le CSS Flexbox en construisant une galerie photo
- Apprenez la typographie en construisant une étiquette nutritionnelle
- Apprenez l'accessibilité en construisant un quiz
- Projet de certification : Construisez une page hommage
- Apprenez davantage sur les sélecteurs CSS pseudo en construisant un bilan comptable
- Apprenez le CSS intermédiaire en construisant une peinture Picasso
- Apprenez le Responsive Web Design en construisant un piano
- Projet de certification : Construisez une page de documentation technique
- Apprenez les variables CSS en construisant une silhouette de ville
- Apprenez le CSS Grid en construisant un magazine
- Projet de certification : Construisez une page de destination de produit
- Apprenez les transformations CSS en construisant un pingouin
- Apprenez les animations CSS en construisant une grande roue
- Projet de certification : Construisez une page web de portfolio personnel
Notez que pour obtenir la Certification en Responsive Web Design, vous devez uniquement construire les 5 projets de certification en gras et faire passer leurs suites de tests. Le reste de ce cours est facultatif.
Nous avons réparti ces projets de certification tout au long du parcours. Ils sont ouverts. Vous commencez avec un éditeur de code vide et construisez le projet ligne par ligne pour finalement faire passer l'ensemble de la suite de tests. Notez que actuellement, nous utilisons toujours CodePen pour ces projets, mais début janvier 2022, nous les transférerons vers notre propre éditeur de code.
Notez également que les 5 projets de certification sont les mêmes que dans l'ancienne version de cette certification. Tout est entièrement rétrocompatible, et vous n'avez pas besoin de refaire ces projets si vous les avez déjà réalisés.
Notez également que toutes les anciennes certifications que vous avez obtenues resteront valides à l'avenir. Vous n'avez pas à vous soucier des liens brisés sur votre CV ou votre profil LinkedIn.
Comment fonctionnent les nouveaux projets pratiques : Notre nouvel éditeur de code
J'ai annoté manuellement certaines des fonctionnalités du nouvel éditeur de code. C'est ici que vous construirez les projets pratiques ligne par ligne, en faisant passer les tests au fur et à mesure.
J'ai eu l'idée de ce design en 2017. C'est le temps que nous avons passé à le construire et à l'itérer. Mais je suis ravi du résultat.
Chaque étape d'un projet pratique a ses propres tests. Et nous avons également des indices spécifiques au contexte. Ceux-ci vous aideront à vous orienter dans la bonne direction sans complètement donner la réponse.
Une fois que vous avez fait passer les tests de l'étape, vous passerez sans effort à l'étape suivante, et nous vous ferons défiler vers la partie de votre base de code où vous devez ajouter votre prochaine ligne de code.
Notre objectif est que vous puissiez entrer dans un état de flux et y rester. Nous voulons que vous parcouriez des dizaines de ces étapes – ou des projets entiers – en une seule session de codage.
Nous avons construit un éditeur multi-fichiers, et vous pourrez coder des projets front-end assez compliqués à l'intérieur.
Bientôt, nous déployerons notre bac à sable complet, et vous pourrez l'utiliser pour construire vos divers projets de certification. Plus besoin d'utiliser CodePen ou JSBin – tout fonctionnera directement sur freeCodeCamp.org.
Nous avons incorporé des tonnes de retours et de leçons d'expérience utilisateur que nous avons apprises au fil des ans.
En plus du nouvel éditeur de code, les principales améliorations que nous avons ajoutées sont :
Plus de pratique
Le programme compte désormais beaucoup plus de projets, qui vous guideront à travers l'écriture de milliers de lignes de code.
Celles-ci vous maintiendront dans une boucle de feedback serrée – avec des tests échoués, des messages d'erreur et des indices – tout au long du parcours.
Au début de chaque projet, nous vous donnons également un aperçu de ce que vous allez construire.
Un aperçu de l'un des projets que vous construirez – un pingouin CSS.
Plus de répétition pour aider à la rétention
Notre objectif initial était de donner aux gens une exposition large et rapide aux concepts clés de la programmation. Mais beaucoup de retours que nous avons reçus indiquaient que nous allions trop vite.
La plupart des gens semblent préférer prendre les choses plus lentement et obtenir beaucoup plus de pratique avec chacune de ces technologies.
Ce programme nouvellement mis à jour vous donnera beaucoup plus de pratique pour vous aider à mieux retenir les concepts clés et la syntaxe de programmation.
Chaque projet a un tableau d'étapes. Les étapes complétées sont mises en évidence en bleu. Vous pouvez sauter à n'importe quelle étape à tout moment, mais nous recommandons de les faire dans l'ordre.
Moins de lecture. Plus de codage.
Cela a pris un travail incroyable, mais nous avons pu restructurer le programme pour vous enseigner "juste à temps" avec seulement quelques phrases d'explication à la fois. Voici la boucle de "gameplay" générale du programme :
Lisez quelques phrases -> déterminez à quoi devrait ressembler votre prochaine ligne de code et tapez-la -> Exécutez les tests et faites-les passer -> répétez ce processus des milliers de fois
Voici à quoi ressemble une étape typique :
Chaque étape vous amènera à la partie de votre code où vous devez ajouter une nouvelle ligne de code ou modifier le code existant. Et il y aura beaucoup de tests. Selon les tests qui échouent, il vous donnera un indice spécifique au contexte pour vous aider à vous débloquer et à continuer d'avancer.
Des "Minibosses" répartis tout au long des niveaux
Il y a une autre amélioration majeure que nous avons apportée. Auparavant, vous faisiez les 5 grands projets d'une certification à la fin, après avoir terminé toutes les leçons.
Maintenant, vous aborderez ces projets de certification périodiquement au fur et à mesure que vous apprendrez de nouvelles technologies. Ainsi, après 3 ou 4 projets pratiques, qui ont des tests plus guidés, vous ferez face à un éditeur de code vide et à 10 ou plus de tests "user story". Vous devrez déterminer comment faire passer chacun de ces tests en utilisant les compétences que vous venez d'apprendre.
Nous sommes optimistes quant au fait que cela lissera la difficulté associée à l'obtention de ces certifications. Et cela aidera à renforcer davantage vos compétences et votre rétention, en réduisant le temps entre le moment où vous les apprenez et celui où vous devez les rappeler et les appliquer.
Vous pouvez voir combien d'étapes il y aura dans chaque projet et combien vous en avez complétées. Les certifications – "minibosses" – sont une seule étape. Ce sont essentiellement un éditeur de code vide avec une suite de tests. Vous devez coder l'ensemble du projet vous-même pour faire passer tous ses tests.
Vous pouvez essayer la nouvelle Certification en Responsive Web Design maintenant
Elle est encore en bêta. Si vous êtes bloqué, je vous encourage à demander de l'aide sur le forum freeCodeCamp. Qui sait – vous pourriez découvrir un bug. Cela sera en développement actif.
Nous terminerons la construction de la certification mise à jour JavaScript Algorithms & Data Structures en 2022. Et nous publierons la certification mise à jour Front End Libraries après cela.
Si vous êtes prêt, vous pouvez plonger directement dans la nouvelle Certification en Responsive Web Design.
Bon codage.