Front-end Web Development — Get started easily with a GitHub repository

Recently at a boot camp in Nairobi, we had this task that required campers to come up with a GitHub repository containing a clone of a simple user interface created using HTML and CSS. As simple as it sounds, I didn’t get a feel of the work involved until my team mates started tackling this task.

Then, I discovered a secret. You may have heard about it before, or it’s new to you like it was to me, but here is how you can start developing a fully functional website easily with GitHub Pages without setting up a framework on your computer.

Step 1: Create a New Repository
This is nothing new if you are conversant with a few GitHub basics. If not, then you might consider reading my previous post on How I Learnt to use Git and GitHub at Andela. However, do not clone the new repository yet. Instead, jump to settings tab on the right most part of the repository’s tabs as shown below.

Scroll down until you reach the GitHub Pages section and then change the source to point to master branch. This allows you to use the master branch for GitHub pages.

Then click Save button to save the changes. You will see a message on the screen similar to Your site is ready to be published at https://koyowe.github.io/Frontendwebdemo.

Scroll further down to the Overwrite site section and click on the Launch automatic page generator. This will automatically start a new project for your site. Fill in the Project name and Tagline as shown below.

Next, scroll down to the body section and replace the contents of the body with yours as illustrated in the example below then click the continue to layouts button.

From the Layouts you can publish your page, or edit the page to add content. But most importantly, you can apply a theme for your web page based on the several available theme templates. Select one of the theme templates and then click Publish page. This will take you back to the repository.

At this point you have successfully created a github repository for a fully functional web site with directories for images, javascripts, and the index file. Next, we will clone this repository into our local computer and work on it from there.

Step 2: Cloning the Repository
Again, this is nothing new if you are conversant with the GitHub basics. If not, you may want to consider reading my previous post. Here is a sample output after a successful clone.

Now, we move into our local repository using the cd command so that we can perform git operations from within the repository. Here is how.

Step 3: Building our Web Page
We want to build a few things into our page so that it can meet the requirements laid out in the Front-end Lab, which is basically just a simple user interface created in HTML with CSS support. So to begin with, fire up your favorite code editor (Sublime Text 2 in my case) and open the repository by clicking File, then Open Folder. Below is how my editor looks like with the style.css file selected and open.

First we want to add a simple <form> that contains a few data controls into our index.html file. However, we will build a <table> inside the <form> to assist us with the page layout. (There are a number of ways to layout your controls, I just picked the <table> because it is the simplest). To do this, we will require a css class for the table in our style.css. So, add the following code to the css file as shown above.

table, th, td {
 border: 0px solid black;
 vertical-align: top;
}

Switch to the index.html file and add code for the form as shown in the following screenshot. (This is just an example).

When you are done, click File and then Save All in the editor. (Make sure you save all since we have edited more than one file).

Testing our web page
We can easily test if the page is up to our expectations locally before uploading our changes to the online repository. Using File Explorer, you can browse to the repository. Right click on the index.html file and choose open with to open it with your favorite browser (Mozilla Firefox, or Google Chrome). Here is our local repo as opened in File Explorer.

And here is our web page as opened in Mozilla Firefox. (Click on the image to enhance it)

Step 4: Uploading our code to GitHub
Uploading our code to GitHub is now a fairly simple process which was covered in my previous post here. The screenshots below illustrates how I uploaded my codes.

Run the git status command followed by git add
Then run the git status command followed by git commit
And finally, run the git push command

Our online repository is now updated and if you refresh the the repository on GitHub, we can see the commits as shown below.

Step 5: Share your web site
The beauty of this approach is that you can now share the url of your website hosted on github with anyone by using the link we were given in step 1. For example, you can easily click https://koyowe.github.io/Frontendwebdemo/ 
to see my web page.

Here is the screenshot.

It’s all a matter of learning. You can do more if you properly learn.

All the Best,

Kevin Oyowe