The Idea

A few months ago I had this crazy idea to start my own little website combining some new technologies for research purposes. Not just because I need them at work, no. Mostly because I want to stay up-to-date and I felt, at that time, a little bit behind on schedule in this matter. There was no goal set up for my crazy invention so I figured to make a portfolio out of it. Because this is what professionals do and since I don’t have an online portfolio … Heck, let me spoil this for you, it never turned out to be a portfolio. After giving it some thought I came up with a better name for it … “Out of the blue”.

Right! So I started a new Visual Studio project. Just an ordinary web application, nothing fancy. And the technology should be somewhat familiar. Something easy to work with and because my basic skills are all about HTML and CSS, logically the following combination of HTML5, CSS3 and jQuery saw the light.

Law & Order

Before we start bashing our keyboards in the hope some “over the top” HTML rolls out just like that. We might better check our heads first. No, not your head, I mean the <head>. Just like with people, websites need a good <head> in order to function and interpret code properly … mmkay. Keep in mind that there’s one SEO rule saying: “Title first”. This is because we need to make sure that search engines find it easily or it might damage our future rank drastically.

Once done the next thing to think about is meta tagging. This element is used to provide our document with some structured metadata, telling our browser what this document is all about. One meta tag in particular tells the browser what kind of characters I can use:


<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

Another important one but so often forgotten is the type of scripting we will use.


<meta http-equiv="Content-Script-Type" content="text/javascript" />

And still there are a lot of options in meta tagging. They can be used to specify page description, keywords, document owner and so on. We’ll keep it with this for the time being.

Next on the list is the use of our script tags. In order to make use of jQuery a simple reference to jQuery will be enough. Also not many people are aware of a diffrent way to include the latest version of jQuery. Easy and without extra server bandwidth usage:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

The same goes for the UI add-on, usefull for animations, advanced effects and so on:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

Then a third script to include in our website can be anything like scripts.js or functions.js or whatever. Basic idea is to use this script as a playground. We can put any functionality in there, available after page-load.

Before you leave our village …

As with most projects where I start from scratch, it’s good practice to have a solid base of HTML code before applying any stylesheets. Maybe one exception there, a reset.css file. And as we’re talking about CSS, only one name bears into mind: Eric Meyer! The world wide, all famous CSS guru. So after some google skills … head over here and copy this stuff and link to it in the head. Easy as that! If you’re wondering why we need to do this, I will give you a valid reason: It applies standard rules to elements, and eliminates cross-browser inconsistencies. “DING”!

Similar to our javascript reference, another CSS file e.g. style.css or default.css for our own creative brain to come up with some styling.

Last but not least

One very important thing and certainly not to be forgotten is the usage of a DOCTYPE. Since HTML 4.0.1 there’s a lot available and the most common used, which will give us the most options for CSS declarations and document usage is a transitional one:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Once all done our document/webpage is ready to grow and hopefully see the daylight one day.