Share
CodePen är ett ovärderligt verktyg. Det hjälper oss att förklara saker och gör våra front-end-kodtutorials allt mer engagerande. I erkännande av det faktum, låt oss ta en titt på några pennor från Tuts + tutorials och kurser som verkligen har slagit ett ackord med vårt samhälle!
Denna handledning av George Martsoukos tar en oordnad lista, som visar sina föremål som en (responsiv) vertikal tidslinje. George fortsätter sedan med att kontrollera om artiklarna har kommit in i visningsporten på bläddra och animerar dem på plats, när så är fallet.
Med över 21K visningar och 500 gillar, är denna penna en av de mest populära vi har lagt upp!
Dublin-baserade Donovan visste exakt vad du alla ville ha när han skrivit den här. Följ den här nybörjarens handledning för att inte bara lära sig om de praktiska aspekterna av att koda CSS-animering, utan också den immateriella utformningen av "överklagande" som går med det.
Kursen är enormt populär. Följ Kezz Bracey eftersom hon bygger tio olika CSS3-projekt, allt på CodePen, och alla inriktade på användargränssnitt och layout. Här är ett sådant projekt, där hon demonstrerar hur man bygger ett funktionellt animerat flik-gränssnitt, utan ett JavaScript-ställe:
Kezzs uppföljningskurs tog inspiration från "Branding and Presentation", en gång till och demonstrerade hur man bygger 10 CSS3-projekt allt från CodePens kända omgivning. Denna speciella demo är en "PowerPoint" som presentation, igen utan några JavaScript alls.
Denna handledning väntade ivrigt av många av er, angelägna om att överföra Googles materialundervisning till webbläsaren. Här är bara en av pennorna från handledningen, men en som har sett ett bra få tusen visningar. Klicka bort!
Jag älskar den här. Men då skulle jag, som flaggbärare för Tuts + Översättningsprojektet, inte jag? Hur som helst, om du aldrig har övervägt vad unicode-bidi: inbädda; kommer att göra för dina RTL webbsidor, kanske är det dags att kolla in den här populära penna!
Dennis gjorde ett bra jobb av den här! Försök bara att motstå rullning ... Om du är intresserad av att lära dig om ScrollMagic är det här en väldigt tillgänglig handledning för att komma igång. Ta en kaffe och dyka in.
Många av Craig Campbells kurser använder CodePen som ett sätt att sätta upp projekt och se dem igenom till slut. I den här kursen demonstrerar han ett antal sätt att använda GreenSocks animationsplattform (GSAP), inklusive denna populära mesmeriska preloader:
En annan av Craigs kurser här och en av våra mest kända kurser under de senaste månaderna. Det lär dig exakt vad du kan förvänta dig, så om du ännu inte har smutsat dina händer med flexbox kommer dessa projekt (som det här lyhörda bildgalleriet) att få dig att gå!
Vad finns kvar att säga? Njut av de ovanstående pennorna, kolla in de handledningar och kurser de togs ifrån och se till att du följer Envato Tuts + på CodePen!
Accentsconagua