Share
CodePen er et uvurderlig verktøy - det hjelper oss med å forklare ting og gjør våre front-end-kodeopplæringer enda mer engasjerende. Til gjengjeld for det faktum, la oss ta en titt på noen penner fra Tuts + tutorials og kurs som virkelig har slått en akkord med samfunnet vårt!
Denne veiledningen av George Martsoukos tar en uordnet liste, og viser sine elementer som en (responsiv) vertikal tidslinje. George fortsetter å sjekke om elementene har kommet inn i visningsporten på rulle, og animerer dem på plass når det er tilfelle.
Med over 21K visninger og 500 liker, er denne pennen en av de mest populære vi har lagt ut!
Dublin-baserte Donovan visste nøyaktig hva du alle ønsket da han skrev denne. Følg denne nybegynners veiledning for å lære ikke bare om de praktiske aspektene ved koding av CSS-animasjon, men også den immaterielle utformingen av "appell" som følger med.
Dette kurset er enormt populært. Følg Kezz Bracey da hun bygger ti forskjellige CSS3-prosjekter, alt på CodePen, og alt er fokusert på brukergrensesnitt og layout. Her er et slikt prosjekt, hvor hun demonstrerer hvordan man bygger en funksjonell, animert tab UI, uten et jot av JavaScript:
Kezzs oppfølgingskurs tok inspirasjon fra "Branding and Presentation", en gang til å demonstrere hvordan man bygger 10 CSS3-prosjekter alt fra innenfor de kjente omgivelsene til CodePen. Denne spesielle demo er en "PowerPoint" som presentasjon, igjen uten noen JavaScript i det hele tatt.
Denne opplæringen ble ivrig ventet av mange av dere, ivrige etter å overføre Googles materialundervisning til nettleseren. Her er bare en av pennene fra opplæringen, men en som har sett en god få tusen visninger. Klikk unna!
Jeg elsker denne. Men da ville jeg, som flaggbærer for Tuts + Oversettelsesprosjektet, ikke jeg? I alle fall, hvis du aldri har vurdert hva Unicode-Bidi: Embed; vil gjøre for dine RTL nettsider, kanskje det er på tide du sjekket ut denne populære pennen!
Dennis gjorde en god jobb med denne! Bare prøv å motstå rulling ... Hvis du er interessert i å lære om ScrollMagic, er dette en virkelig tilgjengelig opplæring for å komme i gang. Ta en kaffe og dykk inn.
Mange av Craig Campbells kurs bruker CodePen som en måte å sette opp prosjekter på og se gjennom til ferdigstillelse. I dette kurset demonstrerer han en rekke måter å bruke GreenSocks animasjonsplattform (GSAP), inkludert denne populære mesmeriske forhåndslaster:
En annen av Craigs kurs her, og en av våre mest besøkte kurs i de siste månedene. Det lærer nøyaktig hva du kan forvente, så hvis du ennå ikke har smittet hendene dine med flexbox, vil disse prosjektene (som dette responsive bildestativet) få deg til å gå!
Hva er igjen å si? Nyt pennene som er nevnt ovenfor, sjekk ut veiledningene og kursene de ble tatt fra, og pass på at du følger Envato Tuts + på CodePen!
Accentsconagua