Introduction
This guide is for people who are brand new to the world of programming websites and want to get started in coding with HTML, CSS and JavaScript. You only need the web browser that you would normally use such as Google Chrome or Microsoft Edge or Safari.
Normally a website developer would code with a code editor application and a local web server which runs the website on the PC however that requires setup which can be complicated if you're a newbie to coding. Instead, you can simply use a website which acts as an online web editor, this will also show the website based on the code you add and edit.
How to use CodePen to code
Open up your web browser and go to https://codepen.io and the CodePen website will load up. Next, you will see a button on the left-hand menu with the multi-coloured border with the text Start Coding, click it.
After the page loads, you will see the online code editor. You have three black boxes at the top which are text areas you use to write your code, from left to right the panels are for HTML, CSS and JavaScript code.
In the bottom white area is where the website will show based on the code you enter in the three boxes.
You can adjust how all the panels are presented. Click the view switcher button as shown in the image below.
In the pop-up window click the left button.
The code blocks will switch over to the left-hand side which would be a better layout as you have more space to view the website. Use the right option in the Change View window instead to switch the code blocks to the right-hand side.
From this point on you can start coding and practising coding HTML, CSS and JavaScript using the CodePen code editor. If you want to know about other features available with CodePen then keep reading through the rest of this guide.
Registering an account
It's recommended that you create an account with CodePen, the main reason is so that you can write and save your code examples into your CodePen account. The benefit of the CodePen account is that these projects can be accessed at any time and on multiple devices.
To create an account go to the sign up page at https://codepen.io/accounts/signup/user/free. You can sign in if you have an existing Google, GitHub or Facebook account, or if you don't have any of those you can create an account using an existing email address.
If you decide to create a new account then fill in the details for the Sign up with Email form and click the Submit button to register the account.
Go to and log in to your email account as you have to verify your CodePen account. Check your inbox, open the e-mail and click the Click to Verify Email button.
Back in CodePen, you will be presented with a Dashboard where you have access to more options. The trending section shows other people's projects that you can view with the HTML, CSS and JavaScript code being viewable and editable.
Click on the Your Work tab and in this section you will see your own projects, CodePen refers to projects as Pens. Click the Go make one! button to create a new Pen that can be saved to your account.
You will be redirected to the online code editor.
Click on the top left on the pen icon to name the Pen
Next, add some HTML code and then save the change. You can hold down the Left Control (Ctrl) and then press the S key to save or an easier way is to click the Save button in the top right menu.
If you check the top of the web browser you can see the link for the current project. This link can be used to access this project and is open for everyone to view your project so I would recommend not putting any private or sensitive data in your projects.
You can go back to your project list by clicking the profile avatar image to show a menu. Left-click the Your Work option to go back.
You can see that the project is now available in your dashboard and will be accessible every time you log in to CodePen.
You can also group your projects by creating Collections, select the Collections link below the Your Work tab to access the page.
How to copy a project
Another feature of CodePen is the ability to copy code from other public pens, the benefit of copying a pen is you can edit and make use of the code that has already been written by other developers.
The Trending section referenced earlier is a good place to browse projects that can be copied to your account.
Here is a sample project that can be used to copy to your account. You can access the project at https://codepen.io/requiredev-tester/pen/dyrmQgW.
This project is a simple list of PHP developer websites coded with HTML and CSS.
Make sure you are still logged into your CodePen account, in the bottom right there is a list of buttons, click the Fork button to copy the pen.
If you go back to the Your Work section of your dashboard you will see the pen added and accessible at any time.
Conclusion
This guide has shown you how you can start coding easily without any kind of setup needed on your PC. All that's needed is the Internet and the web browser which is used to go to https://codepen.io.
CodePen is an online code editor where you can write HTML, CSS and JavaScript code, the code will translate to a website that is also be viewed in the same editor.
CodePen also allows you to create an account that can be used to save projects that are stored online in CodePen. This allows you to access your code whenever you want and not worry about saving the code yourself on your PC. You can also view other public pens and copy them which creates a duplicated version in your account that you can view and edit.
Using the CodePen online code editor is a great way to start learning as you research the different HTML tags, CSS properties and JavaScript syntax while simultaneously experimenting by writing code.