What is and How to use CodePen?

Now it´s time to learn some tools. Even though we could technically write HTML and CSS on any text editor, I find it much more productive to use one with great extensions and functionality that allow us to be more productive. I will present you with 2 tools I use regularly, one online (CodePen, in this article) and one that you will have to download as an app (Visual Studio Code, in the following article). Let´s get started!

Codepen

CodePen is a website that allows you to create, share, and modify websites in a controlled environment with some nuances already resolved for us by the site. For example. in the previous article, we learned all the boilerplate for a new HTML site. Well if you use codepen you only have to write what goes inside the < body > tag and therefore we don´t need any of the boilerplate mentioned code. Another example is that codepen automatically binds an HTML, a CSS and a Javascript file for us, so we can jump from one to another and not worry about the linking of them (we will learn about this later). And one more advantage of CodePen is that it allows us to define frameworks, libraries, and processors that we want to use, but that is a little bit more advanced and we will skip it for now. Once you are finished with your project you can share it and make your code public to get feedback or to help others. Of course you can also check other´s people code, which is great for learning. You can browser Pens like they are posts in Instagram and if you see a site that you like you can enter and see the code that produced it and try to understand it and learn new things. This is in my opinion what makes CodePen great. Lets see some images of how this works:

Codepen home page

This is the landing page once you sign up (don´t worry, it is free). There you will see the gallery I was talking about before where you can take a look at different Pens and pick the one you like and take a look under the hood. Let’s see how a CodePen looks inside:

example of codepen page with HTML, CSS and JS editors open on top and the result Webpage on the bottom.

That´s a CodePen I shared the other day. It´s a responsive dashboard with some basic structure, a topbar, a sidebar, and some panels. It´s done mostly in HTML and CSS. And there you can see the window get´s split up in HTML, CSS, JS, and a preview of what your code does. After you created your account you can just enter to any Pen and modify it and Save (ctrl + s) and it will automatically save a copy of that Pen with your modifications in your profile. So feel free to modify and test as many things as you want, you are not changing the original Pen of the owner.

Create your own CodePen

Just to test things out go-ahead to this link. Create your account on CodePen and try creating your own CodePen with the following HTML code:

contextual menu to create a new pen.
Click on your avatar at the top right corner, then New Pen.
<h1> Hello World! </h1>

<p> Some text you would like to see on your page </p>

If you do this you will see a Title with the text Hello World! and then some text that you should modify. Of course, it won´t have styles but for now, that is good enough. We are learning HTML and with CodePen under your belt, you have a great way to practice what you will be learning in the next article. Also, h1 stands for heading 1, which is the most important heading and should be the “biggest” in your website, and p stands for paragraph. We will be introducing new tags whenever we can and this was a good opportunity to do so.

Those are the basics about CodePen, I hope you liked the site and if you don´t or if you are interested in looking for other non-online option for creating your sites the following article will help you install and configure Visual Studio Code. See you there!

Click on the image above so you don’t miss out on future content.