How to use CodePen in Web Development part 1

Posted on

Codepen.io describes itself as a social development environment for developers and a ‘Front End Developer Playground’. It is used by many web developers for testing bugs, collaboration, forking repositories(repos), and open-source coding. Codepen has pens, projects, Collections, challenges, and what’s trending in the development field. It also has a personal dashboard with their activities and work.

In this article, I am going to explain how to sign up for a codepen account, create files, fork repos and utilize it for your front-end development.

How to create a Codepen account

  1. Sign up by searching code.io. .
  2. You can sign up using twitter,github,facebook or email account.
  3. Then using the sign up credentials , log in to access Codepen.
  4. Search for pens( a web display of CSS, HTML, and javascript code)and projects that you are interested in . You can type anything that you wish to add to your project or learn. The pens include sliders, about sections, forms, animations, and other front-end sections.

Searching and using a pen in Codepen

1. Type the pen you want on the search bar, for example, I’m searching for a footer.

I have chosen the first one. It opens in another tab where you can see the HTML and CSS that has been used.

2. Code extraction

After searching and finding the pen you want, do not just copy and paste it into your project. This is because sometimes the pens use external libraries hosted by the Codepen but invisible to the users. To extract the code with accuracy, navigate to the bottom right corner of the screen and click on export. Export as a zip file so that you can download the pen to your computer.

3. Extract the content of the zip folder to access the files by right-clicking on the zip folder and choosing ‘extract all’.

4. The dist folder contains the HTML and CSS used to make that section. Open the files using your code editor. Different pens contain different files according to the project. There many code editors but I have demonstrated how to install vs Code here.

How to use CodePen in Web Development part 1

How to practice coding by running code on Codepen

  1. Open code.io
  2. At the top corner of the screen, click on the Pen option.
  3. Click on Let’s go make one if you wish to create a new Pen.
  4. Now, type in or copy and paste the HTML, CSS, and Javascript code from your editor.
  5. Save the code, preview the changes, and continue coding as much as you like.

How to fork a pen

A fork is a copy of a project or pen that one can access and save to their personal profile and make necessary changes. One can add their code to the fork by typing directly into the Codepen editor,pasting from the code editor, or uploading a file. To fork a repo,follow the following steps.

  1. Search the pen link from the browser. The link is shared to you by the own of the repo. It opens a pen in a read only view.
  2. Click on the bottom right corner of the page and choose fork.
  3. Confirm that you want to fork. Forking copies all the project files to your account.
  4. Click on fork project and save it.
  5. To add a new file click on the ‘+New File’ option.
  6. choose the type of the file.

Your file will appear beside your other files.

In Codepen one is allowed to create only one project on a free membership. To get more from Codepen, has to upgrade the account to PRO.

Gravatar Image
Justina Kageni is an information scientist with passion for Information Technology.She is on a mission to share her knowledge and skills.

Leave a Reply

Your email address will not be published. Required fields are marked *