Codepen

How to become a codepen ninja.

New for 2020

• URL Extensions - CodePen Blog
• An activity page - leaving breadcrumbs!
• Edit & Optimize Image Assets - CodePen Blog

Fork before you tinker

The cardinal sin in Codepen is to start modifying something you worked hard on building. When it breaks you'll have to work to get it back. There is no undo button in Codepen! Is there? Trust me when I tell you with iterations, you always want to have the option to revert back to your original! Before you begin playing with an existing, pen, fork it!

Codepen Rockstars

• Will Boyd on CodePen

Codepen Templates

https://codepen.io/pen?template=CODEPENID

Pen Templates - CodePen Blog

And here's a template I created for you:

Sample Template

Codepen API

Chris pointed me to this page after I asked him about the old school Codepen Bookmarket that is no longer available:

POST to Prefill Editors - CodePen Blog

Tutorials

• Creating Editable Codepens
• Using Emmet

Reading

• How to create templates

Linking directly to CSS, JS, or HTML code

How do you link directly to a JS file in Codepen?

This feature was removed as shown in the screenshot (kept for historical purposes), but you can still achieve the result by adding a .html, .css, or .js at the end of your URL. Examples:

https://codepen.io/pubwriter/pen/bcac593defada781a1e34fd84499bc45.html

https://codepen.io/pubwriter/pen/bcac593defada781a1e34fd84499bc45.css

https://codepen.io/pubwriter/pen/bcac593defada781a1e34fd84499bc45.js

CodePen Topics

Codepen Topics

---

CodePen Walkthroughs

The best way to to learn a new tool is to watch someone use it!

Here are some users on CodePen you can shadow while they work in Codepen:

• https://www.twitch.tv/videos/466311167
• Codepen Documentation

Building off Codepen

Description of project:

Rather than use a bloated CMS like wordpress/drupal/joomal etc, use a Google Sheet!

The result is a fast, responsive static site that you edit in Google Sheets!

Example:

Any URL's added here will be added as

More Reading...

• 8 Hidden Codepen Features
• Web design

Getting Started - 5 Pens to Fork

• Tribute Page
• Product Landing Page
• Technical Documentation Page
• Personal Portfolio Page
• Survey form

Code Penners to Follow

• Hakim El Hattab on CodePen
• Olivia Ng on CodePen
• CSS-Tricks on CodePen
• Aaron Iker on CodePen
• Adam Argyle CSS, Animation
• Adam Kuhn SVG, CSS, Animation
• Adir Slutzki CSS, SVG, Animation
• Agathe Cocco SVG, CSS, Animation, GSAP
• Alex McNerney Canvas, Particles, Generative
• Alexandre Rivaux WebGL, GLSL, Animation, Generative
• al-ro Shaders, GLSL, Three.js, Particles
• Alvaro Montoro CSS, Game, Animation
• Amelia Bellamy-Royds SVG, CSS, Animation
• Ana Tudor Animation, Canvas, Sass, Javascript
• AndyMan Canvas, Generative, Creative Code, GSAP
• Anthony Dugois SVG, Three.js, Animation, Javascript
• Bali Balo Canvas, Animation, CSS, Javascript
• Ben Evans CSS
• Blake Bowen Animation, SVG, GSAP, GreenSock, Canvas, Javascript
• Cami Williams CSS
• Cassie Evans CSS, Animation, GSAP, SVG
• Cassidy Williams CSS, Animation
• Chris Coyier SVG, CSS, Animation, Javascript
• Chris Gannon SVG, Animation, GSAP
• Chris Johnson SVG, Animation, Shader, WebGL, GLSL, Javascript
• Christina Gorton SVG, Animation, GSAP, CSS
• Christopher Wallis Animation, SVG, Javascript
• CJ Gammon SVG, Canvas, Animation, Three.js
• Dan Wilson Animation, CSS, WAAPI
• Daniel Canvas, SVG, Particles
• Daniel Del Core Three.js, 3D, WebGL
• Dave Whyte P5.js, Animation, Canvas, Javascript
• David DeSandro Animation, Canvas, Game
• David Khourshid Animation, CSS
• Diaco ML Animation, GSAP, SVG, Canvas, Javascript
• Dion Snoeijen Canvas, Javascript, Creative Code, Generative
• DPDK WebGL, Three.js, Animation, GSAP
• Drew Dahlman Canvas, P5.js
• Dudley Storey SVG, CSS, Animation, Javascript
• Eli Fitch Animation, Three.js, WebGL, Canvas
• Elior Tabeka SASS, Animation, Javascript, Games, Components
• Elliot Geno SVG, GreenSock, GSAP, Animation
• Eva Santos Animation, CSS, SVG, Javascript
• Fabio Ottaviani Animation, SVG, Three.js
• Gabi Canvas, Animation, SVG, CSS, Javascript
• Gerard Ferrandez Canvas, 3D, Physics, Animation
• Giana CSS, Animation, Sass, Canvas, Javascript, Particles
• Grant Skinner Canvas, Javascript, Particles, 3D, CreateJS
• GreenSock GSAP, SVG, Animation, GreenSock, Javascript
• Greg Hovanesyan Javascript, Web Audio, Animation, Game, CSS
• Hernan Torrisi SVG, Animation, Canvas, GSAP
• Himalaya Singh CSS, Animation
• Hornebom Animation, CSS, SVG, Three.js
• Issey SVG, Animation, GreenSock, GSAP
• Jack Rugile Canvas, Animation, CSS, Particles, Javascript
• Jackson A. Joseph 3D, Three.js, Particles, Animation, CreativeCode
• Jake Albaugh CSS, Web Audio
• Jamie Coulter CSS, Game, Animation
• Jatin Rao CSS, Javascript, Animation
• Jerome Herr Canvas, Animation, P5js, Particles, Processing, Generative
• Jhey Tompkins Animation, CSS, GreenSock, SVG
• Johan Karlsson P5.js, Fractal, Canvas, Animation, WebAudio
• Joni Trythall Animation, SVG, Sass
• Joseph Rex Animation, GSAP, SVG, CSS
• Judith Neumann Animation, CSS
• Julia Muzafarova Animation, CSS
• Julian Garnier Animation, SVG, CSS, 3D, Javascript
• Justin Windle Animation, Canvas, Particles, Physics, Javascript, WebGL
• K-T Animation, Canvas, Particles, Javascript
• Karim Maaloul Animation, WebGL, Three.js, 3D, Particles, GSAP
• Kenji Saito Animation, Canvas, WebGL, Three.js, Particle, Shader
• Kevin LEVRON WebGL, Three.js, SVG
• Kyle Brumm Animation, CSS, Javascript
• LegoMushroom Animation, Javascript, SVG, Canvas
• Liam Brummitt Animation, Canvas, Physics
• Liam Egan GLSL, Shaders, Javascript, Generative, CreativeCode, Animation
• Lisi Animation, SVG, GSAP, CSS
• Louis Hoebregts Canvas, Three.js, Particles, Shader, GSAP, Animation
• Lucas Bebber CSS, Animation, SVG
• Mandy Michael CSS, Effects, Animation
• Marco Dell'Anna Animation, Particles, GreenSock
• Mariusz Dabrowski Animation, SVG, Canvas, Physics, P5.js, GSAP
• Massimo Canvas, CSS, SVG
• Mattia Astorino CSS, Animation, Creative Code
• Michael Gehrmann CSS, SVG, Animation
• Mike Schultz Animation, SVG, CSS
• Mustafa Enes CSS, Animation, CSS
• Nat Cooper SVG, Animation, CSS, GSAP
• Noel Delgado Animation, Canvas, CSS, SVG
• Not Important Animation, Canvas, Three.js, Javascript
• Olivia Animation, CSS, Javascript
• Paul J Karlik Animation, WebGL, GLSL, Canvas, Shader, Three.js
• Peter Barr Animation, SVG, GSAP, CSS, GreenSock
• Petr Tichy CSS, Animation, GreenSock, SVG, GSAP, Canvas
• Ricardo Oliva Alonso CSS, Animation
• Rachel Bull CSS, Animation
• Rachel Nabors Animation, CSS, SVG, WAAPI
• Rachel Smith Animation, Canvas, SVG, Particles, WebGL
• Riley J Shaw Animation, Canvas, CSS, Javascript
• Rob DiMarzo Animation, Canvas, CSS, Javascript, GSAP
• Ryan Thavi Generative, Canvas, Animation, Javascript
• Sasha Tran CSS, SVG, Animation
• Sara Soueidan SVG, CSS, Animation
• Sarah Drasner Animation, SVG, Javascript, GreenSock, GSAP, Canvas
• Sarah Fossheim CSS, Animation
• Sebastian DeRossi Create.JS, Easel.JS, Canvas, Animation, Javascript
• Scott R McGann Animation, Canvas, 3D, Particles, Javascript
• Shaw Animation, CSS, SVG, Javascript, Canvas, Three.js
• Stefan Weck Canvas, Animation, WebGL, Shader
• Sullivan Nolan Animation, CSS, SVG, WebGL
• Szenia Zadvornykh Canvas, Three.js, WebGL, Shader
• Takashi P5.js, Canvas, Particles
• Tee Diang CSS, Animaiton
• Tibix Animation, Canvas, CSS, Particles
• Tim Holman Canvas, Animation, Interactive, Generative, JS
• Thepheer Canvas, Particles, 3D, WebGL, Shader
• Thibaut Canvas, Particles, Three.js, Animation
• Tiffany Rayside Animation, Canvas, Particles, SVG, CSS
• Val Head Animation, CSS, SVG, P5.js, GreenSock
• Varun Vachhar Animation, CSS, SVG, P5.js, GreenSock, GSAP
• Victor Vergara 3D, Three.js, Shader, Animation
• Yoksel Animation, CSS, SVG
• Yuán Chuān SVG, CSS, Animation, GreenSock, Javascript
• Yugam Dhuriya Animation, CSS, SVG, Canvas, P5.js
• Yusuke Nakaya Animation, CSS
• Zach Saucier Animation, CSS, SVG
• Zed Dash Animation, CSS, Javascript

Top