Writing and Deploying Front End Codes with Codepen and Github

This is to guide those intending to use either Codepen or Github to write and/or deploy front end codes. Basically this are platforms where you share codes but also has features such as deployment.

At CodePen.io, they describe themselves as a “playground for the front-end side of the web.” CodePen is great for testing out bugs, collaborating, and finding new inspiration. It works by allowing you to create “pens”, which are sets of HTML, CSS, and JavaScript and get a real-time preview. You can then display those pens on your profile, take feedback, and continue to edit those pens at any time.

Projects are automatically deployed and can easily be shared.

More features:


To understand GitHub, you must first have an understanding of Git. Git is an open-source version control system that was started by Linus Trovalds – the same person who created Linux. Git is similar to other version control systems – Subversion, CVS, and Mercurial to name a few.

Version control systems keeps versions of codes, and store the modifications in a central repository. This allows developers to easily collaborate, as they can download a new version of the software, make changes, and upload the newest revision. Every developer can see these new changes (review/pull), download them (clone), and contribute (push).

Basic Commands and Deployment with GitHub:

Create a repository
Head over to Github and create a new repository named username.github.io, _ where username is your username (or organization name)_ on GitHub.
If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

Clone the repository
Go to the folder where you want to store your project, and clone the new repository:

git clone https://github.com/username/username.github.io

Hello World
Enter the project folder and add an index.html file:

cd username.github.io
echo "Hello World" > index.html

Push it
Add, commit, and push your changes:

git add --all
git commit -m "Initial commit"
git push -u origin master
…and you're done!

Fire up a browser and go to http://username.github.io

Happy Coding!


Popular Posts