How To Learn To Use CodePen

I know a decent amount about how website code works. HTML and CSS, to be more specific. JavaScript still feels beyond me. It’s a ridiculous coding language that’s just never made a lot of sense.

I don’t think I’m in the minority there either.

But I know enough HTML and CSS code to do pretty dang well with making a Squarespace website fancier than they first appear. Not to toot my own horn or anything. It’s an important skill to have as someone who works with Squarespace. If you don’t know enough CSS to get by, then you’re missing out on a lot of neat things you can do with a website.

I’ve picked up a decent amount of CSS through online tutorials and a pretty decent web design class I took while I was in film school. There’s always more to learn and master, but I’ve got a handle on things now.

And then I started realizing that I needed to completely make over the Dandy Cat Design website and business. None of it was performing as well as I’d hoped and it couldn’t keep going without making substantially more money.

The whole operation needed to change. Along the way, I needed to really learn how to make CSS work for me.

How do things stand now?

Dandy Cat Design sells CSS Plugins for Squarespace websites. When I first started the business I didn’t think I’d ever be selling products. In my mind, it was website building services all the way.

I’m good at building websites for other people, but I feel more capable tinkering around with the code that’s used to make those websites. It feels like working on a puzzle when I’m doing it. Little by little you put the pieces of your code together until you’ve made a complete thing.

To be honest, it’s more fun for me too. I enjoy working with other people on building their websites, but I like solving puzzles quite a bit.

The question I had to answer for myself was how to build and test this CSS code that I wanted to sell on my website. What I was looking for needed to have three things going for it:

1. It had to be easy to use and manage
2. It had to be really fast
3. It had to have helpful documentation/support

That’s where CodePen comes in

There are a lot of code editors out there — Dreamweaver, Sublime Text, Coda, Atom, and Brackets, to name a few. All of them are pretty decent and serve other people very well.

They were way more powerful than I needed them to be.

I’m not trying to code an entire website from scratch at this point. I don’t need something as complex as any of those code editors. Managing a heap of files brimming with hundreds or thousands of lines of code also seemed unnecessary for me.

You can build and manage an entire website on CodePen, but I don’t believe that’s actually its main purpose. It’s certainly not what I’m using it for. CodePen allows you to create small projects using HTML, CSS, and JavaScript without having to deal with a lot of the extra code that those languages require.

It’s exactly what someone like me needs. Yes, it can be used to make some startlingly intricate projects like this one:

But it can also be used for something as simple as testing out different link underline styles like this:

That’s some very simple HTML and CSS code creating all that text, but it’s wonderful to have a place where I can do whatever I want.

So…

Is CodePen easy to use and manage?

Definitely. You can start your own account there, create an infinite number of “Pens,” as they call them, and write whatever code you want.

Is CodePen really fast?

Heck yeah it is. Even with the basic free account you can get a real-time preview of the code you’re writing. Change a word in the HTML and watch as that word updates immediately in the preview window.

Does CodePen have great documentation/support?

You’d better believe it: https://blog.codepen.io/documentation/ and https://codepen.io/support/

How I’m using it

At the moment, CodePen is my testing ground for the code I’m selling on Dandy Cat Design. I could work on making the code in Squarespace, but it’s not really designed for the sort of experimentation that I feel I need. I want to be able to mess up a bunch and learn from my mistakes right away. There’s too much clicking around and saving on a Squarespace site.

It’ll slow me down like crazy.

If I can make sure that my idea will work in CodePen, then there’s a decent bet that I can make it work in Squarespace. It’s a fun system for me.

When I’ve worked out a Pen to my satisfaction, I’ll head over to my Squarespace website and adjust the code to work with the particular HTML tags that Squarespace uses. I can’t just use HTML code like this:

<section id="intro">
	<h1 class="heading">Welcome to my site!</h1>
		<p>I hope you have a great time here.</p>
	</h1>
</section>

Coupled with some CSS code like this:

.heading {
	display: block;
	margin: auto;
	padding: 20px 0px;
}

And expect it to work with Squarespace. Squarespace uses specific HTML tags for their code. It ends up looking something more like this:

<div class="content" id="yui_8_18_3_9_19874631823976_103">
	<div class="blog-item-wrapper blog-basic-grid-item-wrapper" data-content-field="main-content">
		<div class="blog-item-top-wrapper">
			<h1 class="entry-title entry-title--large">Why I Use Squarespace for My Website Creation</h1>
		</div>
	</div>
</div>

Along with appropriate CSS code that has selectors matching those HTML tags. Granted, Squarespace websites are rather complex and have a lot going on with them, but I think you see my point. I’ve got to spend time in Squarespace making sure my humble little code will play well with what they’ve got going on in their sites.

Once everything is working in Squarespace, I call it all a success and package the code up in a beautiful file to give to anyone who purchases a plugin from my website.

How can you use CodePen?

The first thing you’ll need to do is go to codepen.io and click on the button labeled “Start Coding” in their sidebar on the left side of the website. You’ll be taken to their code editor screen and you can get to it.

Easy, right?

But hold on a sec, friend. If you want to save any of the hard coding work you’ll put in, then you’ll need to make a CodePen account. That’s as easy as clicking the green “Sign Up” button located at the top right of every screen you’ll see on the website. Make an account and now you can preserve all of your beautiful work forever.

At this point, you can make individual Pens, a complete website or app Project, a text Post, or a Collection of items.

You may end up creating Pens more than anything else, so clicking on “Pen” under the “Create” heading in the sidebar is the way to go. You’ll again be taken to the code editor screen.

At this point, there’s a whole lot about this code editor that’s above my head. I don’t know much about the more advanced tools or code this service can use, so I’ll describe my process.

In the code editor screen, clicking on “Settings” in the header will pull up a window with useful options. In the HTML tab, I like to click the option named “Insert the most common viewport meta tag.” This sets up the editor in a way that’s comfortable for me. In the CSS tab, I can search for and include resources like Bootstrap for some additional layout options.

There’s a lot in those tabs and if none of it means anything to you, then don’t worry about it. Most of it doesn’t mean much to me.

You can name your Pen by clicking the word “Untitled” in the heading. I recommend doing this to keep your Pens organized. Be sure to also click “Save” often to ensure your work doesn’t disappear.

From there it’s all about just typing in the code you want to work with in one of the three boxes at the top of the editor window. The left one is for HTML code, the middle is for CSS code, and the right one is for JavaScript code.

Another couple of great features I like to use can be found in the drop down window in the upper right corner of each code box. I can choose to tidy up or analyze my code for errors. Helpful options when I’m not sure if I’m writing things as well as I can (or should be).

CodePen is a beast of a service. I may never be able to use or even need everything it offers, but I sure as heck am glad it’s available for me.

Without it I may have been slowed way down while trying to create the CSS plugins that I’m offering on my website. I’d hate to not be able to offer a plugin to somebody because I’m stuck working out how it can possibly work on a slow platform.

Squarespace was there for me when I first started building Dandy Cat Design and now CodePen is here for me as I change and grow my business into something bigger than it was when it started.

I’m really excited to see where this new tool will take me in the future.

Code away, cats.