Share
CodePen est un outil précieux. Il nous aide à expliquer les choses et rend nos tutoriels de code frontaux encore plus attrayants. En guise de reconnaissance, jetons un coup d'œil à quelques stylos de tutoriels et de cours Tuts + qui ont vraiment touché la corde sensible de notre communauté.!
Ce tutoriel de George Martsoukos utilise une liste non ordonnée, affichant ses éléments sous forme de scénario vertical (réactif). George vérifie ensuite si les éléments sont entrés dans la fenêtre de défilement en les animant une fois que c'est le cas..
Avec plus de 21 000 vues et 500 goûts, ce stylo est l'un des plus populaires que nous avons publiés!
Donovan, basé à Dublin, savait exactement ce que vous vouliez tous quand il a écrit celui-ci. Suivez ce tutoriel pour débutant pour apprendre non seulement les aspects pratiques du codage de l'animation CSS, mais également la fabrication intangible de "l'appel" qui l'accompagne.
Ce cours est extrêmement populaire. Suivez Kezz Bracey alors qu'elle construit dix projets CSS3 différents, tous basés sur CodePen et tous centrés sur l'interface utilisateur et la présentation. Voici un de ces projets, où elle montre comment créer une interface utilisateur fonctionnelle et animée, sans note de JavaScript:
Le cours de suivi de Kezz s’inspire de «Branding and Presentation», qui montre une fois de plus comment construire 10 projets CSS3 dans le cadre familier de CodePen. Cette démo particulière est une présentation «PowerPoint», encore une fois sans JavaScript..
Ce tutoriel a été attendu avec impatience par beaucoup d'entre vous, désireux de transférer les enseignements de Google Matériels dans le navigateur Web. Voici un des stylos du didacticiel, mais qui a déjà été vu plusieurs milliers de fois. Cliquer tout de suite!
J'aime celui la. Mais alors, en tant que porte-drapeau du projet de traduction Tuts +, je ne le ferais pas? En tout cas, si vous n'avez jamais envisagé quoi unicode-bidi: incorporer; fera pour vos pages Web RTL, peut-être qu'il est temps de vérifier ce stylo populaire!
Dennis a fait un excellent travail de celui-ci! Essayez simplement de résister au défilement… Si vous souhaitez en savoir plus sur ScrollMagic, ceci est un tutoriel vraiment accessible pour vous aider à démarrer. Prenez un café et plongez.
De nombreux cours de Craig Campbell utilisent CodePen pour mettre en place des projets et les mener à bien. Dans ce cours, il montre différentes manières d'utiliser la plate-forme d'animation de GreenSock (GSAP), notamment ce populaire préchargeur hypnétique:
Un autre cours de Craig ici, et l’un de nos cours les plus regardés au cours des derniers mois. Il enseigne exactement ce à quoi vous vous attendez. Par conséquent, si vous ne vous êtes pas encore sali les mains avec la flexbox, ces projets (comme cette grille d'image réactive) vous permettront de démarrer.!
Que reste-t-il à dire? Profitez des stylos mentionnés ci-dessus, consultez les didacticiels et les cours qui vous ont été proposés et assurez-vous de suivre Envato Tuts + sur CodePen!
Accentsconagua