Front-End Learning and Exploration with CodePen

Front-end designers and developers learn from each other. The community is essentially built around this attitude. The more experienced folks in the field help to teach the next crop coming up through the ranks, and so on. It’s an incredibly open and engaging field. However, looking at source code and reading blog posts only goes so far into explaining web design and development techniques.

A fairly new development in this area has been the introduction of more interactive type web apps built specifically to help us play in the code. The live interaction makes a world of a difference to understanding what is happening and why it is happening. This playing around is a huge part of learning all this front-end trickery and today we’re going to take a look at a new playground in the neighborhood: CodePen.

What Is It?

CodePen is a project built and operated by three front-end design and development powerhouses, Alex Vazquez, Tim Sabat and Chris Coyier. The focus is a mix of showing off cool things you’ve made, working through some bugs in a social environment as well as being a platform for learning from each other. Chris Coyier described CodePen on a recent podcast interview as a combination of jsFiddle and Dribbble. That’s a solid way of putting it, but I think you’ll agree after reading this that it’s truly its own thing.

codepen-homepage

From a technical standpoint, CodePen allows you to mess with HTML markup, CSS and Javascript all on the same screen. You’ll see three boxes (one for each) and a window displaying the result. That basic functionality is quite simple and not necessarily groundbreaking, but the fact of the matter is that it is a really powerful learning device. Coupling that core functionality with everything else CodePen has to offer is where things get interesting.

Browsing

Browsing the pens (this is what posts are called on CodePen) posted by others is a huge part of what CodePen is all about and it’s definitely the easiest way to check things out. You’ll find pens on all sorts of front-end development techniques. It’s a really fun mix of extremely helpful, more standard type stuff such as navigation bars and menu and layouts as well as really crazy, experimental type things. You know, the type of thing that makes you feel totally inadequate about your skill level? What, that’s only me? Ok, moving on.

Pens are organized by using tags so it’s quite easy to find examples in your areas of interest. The tag list is quite broad already and with the library growing steadily it’s safe to say you’ll be able to find an example technique of just about any aspect of front-end development before long. Popular pens are also pulled out of the mix and the guys behind CodePen also regularly update some of their favorite pens and feature them on the homepage. Exploring is really quite easy and a pretty entertaining experience. It’s as easy to aimlessly wander as it is to find something specific.

codepen-tags

A really important aspect of browsing the pens posted by other users is the ability for others to play around with the code in a live environment. You can modify it, remove things, add things, whatever you’d like and see exactly what happens as you do so. You won’t be able to modify that pen specifically, but you do have some options to fork it and put your own twist on what someone else has already done. More on that in a bit.

codepen-pen

Make Your Own

A community like ours is only as good as it is because so many people contribute, and without those contributors CodePen wouldn’t be nearly as useful as it is.

Contributing a pen is incredibly easy. There’s a huge New Pen button at the top of just about every view daring you to add something to the mix. Let me take you through creating a pen as there are some really cool features that aren’t completely evident.

codepen-blankpen

The layout that you see when you begin a new pen is essentially the same as what you see when you are checking out another contributor’s pen, except this time you’ve got a blank slate. Three boxes across the top. One to hold your markup, another your styles and another to house Javascript if you so desire. Your code will be rendered on the fly and displayed in the window below the code panes.

By default you’ll be writing in HTML, CSS and Javascript, but each of these panes have a few configuration options to up the ante a bit. In the HTML pane you can choose to write in straight HTML or switch to a different markup language. The currently available languages are HAML, Slim and Markdown. You’re also able to add classes straight to your HTML or add elements to the should that be necessary.

codepen-htmloptions

You’ll find similar options in the CSS pane. Options to switch to styling your markup in either straight CSS, LESS, SCSS with Compass, or SASS with Compass. I’ve gotten quite attached to SCSS myself and I was immediately searching for that option and was quite excited to find it so easy to make the switch. The options to drop in a normalize file or reset file is also just a checkbox away. You can even choose to use Prefix Free (little JS plugin) to take care of all those browser prefixes for you. And (yes, there’s more) you’re able to attach your own external stylesheet as well.

codepen-cssoptions

As you may be guessing, there are some interesting configuration options available to you on the JavaScript pane as well. You can write your code in standard JavaScript or flip over to CoffeeScript if you’d like. Connect up one of seven different JavaScript libraries or add in your own external JS file if you see the need. Adding Modernizr is also just a checkbox away.

codepen-jsoptions

There are a lot of different options, but trust me when I say that they are all very welcome capabilities. If you don’t understand what some of the options even are, don’t worry about it, you can still keep things very basic if you’d like. But, I will say, having the extra level or two of configuration capability makes it even more fun and easy for developers to play around which is really what CodePen is all about.

There’s Even More

One the surface CodePen looks pretty simple, and it is in a general sense, but when you start digging around so many more features come to light.

If you’re familiar with Github or code management in general, you’re probably aware of the term “forking.” This simply means that you’re taking what someone else has done and using that as a starting point for doing something different or further expanding upon what has already been done. And of course, CodePen enables that activity.

Signing in with Github credentials is built right in and a handy little feature connected to this is that you’re able to store pens in your own gists. That way your code or anything that you want to save isn’t totally dependent on CodePen and accessible via Github.

And past that there’s even more. In fact, the more time I spend with it the more great features I discover. You can share a pen in several ways, including displaying a full screen version, embedding, or even exporting the project. There are several social features built right in that allow for the following of other users, commenting on and loving pens. That’s a pretty fantastic feature set and I’m positive I’m missing others.

Wrapping Up

I’ve had a serious blast digging into CodePen. Learning from others’ experiments and even standard techniques is so valuable and certainly can’t be understated, but I found the platform so generally engaging and flexible and just fun that I found myself getting lost playing around and that’s really what it’s all about. We have fun, we experiment, we learn, we teach, we laugh, we “Ooo and awe and CodePen is a perfect place for all of this to happen.

I will definitely be spending much more time on CodePen in the future. There are always new things to learn from how other folks in the industry do things and I personally feel the need to start to give back some myself. CodePen fosters those two tenants of our community and for that it is truly an awesome product.

Good Design is Environmentally-Friendly

Fashion and Tech

Designer as Architect

Good Design is Thorough Down to the Last Detail

What I Would Wear on My Wrist

Metis NYC Product Design Bootcamp: Acquire Skills, Build a Career

Good Design is Long-Lasting (Part 7)