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>.github.com 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: http://raygao.github.com/dvdflex/

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

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

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

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: