GitHub Pages, CSS3, and HTML5

Recently, I decided to take a look at HTML5 and CSS3 and build a website on GitHub, which offers many cool features in addition to being a social code repository. Website hosting on GitHub is called Pages.

GitHub Pages

First, you need to have a GitHub account. Next, you need to create a repository named <username> to correspond to your GitHub user account.

You can also create Pages for your individual GitHub projects. For example, I have a project called dvdflex. So I’ve created a new branch called gh-pages, which contains regular HTML files and static elements, i.e. images, etc. The gh-pages branch is used for the website, whereas the “main” branch stores the project source code. Hence, my project’s web pages can be seen at:

GitHub also provides an Automatic Page Generator feature, allowing you to import a project’s Readme file. The steps are simple:

  1. Click the project’s “Admin” tab.
  2. Click the “Automatic Page Generator” button.
  3. Click the “Load Readme” button.
  4. Select your layout template and publish.

(You can view detailed instructions here.)

It does take several minutes before GitHub is ready to serve up your website. You will be notified by email and on GitHub.

If you set up DNS forwarding for your domain, this can be your free website!

Now let’s talk about HTML5 and CSS3.


HTML5 is being hailed as the new venue for rich media integration / presentation and mobile device support.

It offers many neat features, some of which are:

  1. Liberation from SGML: It now provides a <canvas> element, allowing you to add free from visual elements (here are some cool examples).
  2. Extensive rich media support: It’s a good alternative to Adobe Flash. Key tags include <audio> & <video>.
  3. Geo-location support: The browser can detect a user’s current position with the navigator.geolocation.getCurrentPosition() javascript API.
  4. Web storage: Previously, web browsers used cookies to store client-side information, and were limited to approximately 4 KB (~4096 characters) of data. Web storage means being able to store much more information at the client side, using either localStorage or sessionStorage. (Of course, browsers have different storage limits, usually 5-10MB.
  5. Web worker: In pre-HTML5 days, web browsers could be bogged down by complex javascript. This issue is particularly noticeable in AJAX calls, when response times from external servers are not guaranteed. HTML5 solves this problem by introducing a new “Worker” javascript object, allowing multiple tasks to be executed in parallel. (More on the “worker” object)

Some useful new tags include: <article>, <nav>, <section>, <header>, <footer>, <figure>, <aside>, <progress>, <meter>.

Several new form types include {date time}, {datetime-local}, {date}, {month}, {week}, (more on new form types).

It’s worth noting that Chrome and Safari offer the most support for HTML5, while Firefox lags behind. (Check out Safari’s cool HTML5 demo here)


CSS3 makes your website really sharp. Some of the highlights include:

  1. Round corners: Via -moz-border-radius (Firefox) or -webkit-border-radius properties.
  2. Background content: Via background-origin and background-clip.
  3. Web fonts: Beautiful text layout and effects (view some examples here).
  4. More colour choices: HSL, HSLA and RGBA are the new colour schemes.
  5. Transition and text effects: Like shadows, transparency, fade-in, dissolve, slide-in.
Tagged , , ,

Leave a Reply


You are commenting using your account. Log Out / Change )

Twitter picture


Facebook photo


Google+ photo


Connecting to %s

%d bloggers like this: