Resources for the i9 Web Workshop

i9webworkshop

Have you setup your laptop for the session? if not see instructions further..
------------------------------------------------------------------------------

Welcome!

Today we are going to make a basic website using some of the main components 
of HTML with a little CSS to give you an idea.

As I want you focussed on writing good HTML and CSS, I don't want you 
too fussed on the aesthetics(look and feel) and the actual content of the site.

As such today you will be designing 'The ULTIMATE FAN PAGE!!!!!' 
for your favorite show which is about good guys vs bad guys.

So pick a show you can wax lyrical about like a star struck 15 year old. Eg.
AUTOBOTS vs DECEPTICONS (Transformers)
DR WHO vs DALEKS

Today we won't care how the site looks, but we will care how the code looks.

If others are looking for this page tell em to look up http://tinyurl.com/i9webworkshop

WHILE YOU WAIT FOR THE SESSION TO START HERE'S SOME LIGHT READING :)
How to Grok Web Standards - http://www.alistapart.com/articles/grokwebstandards

WEB TOOLS
Color Scheme Designer - http://colorschemedesigner.com (Awesome color picker)
(pick color then copy the RGB code and add a hash symbol to the front and replace that in your CSS)
ie I picked a red, copied it's RGB code of FF0000. Use it like so.......... background-color: #FF0000;

CSS tags reference - http://www.w3schools.com/css/css_reference.asp

HTML5 tags reference - http://www.w3schools.com/html5/html5_reference.asp

ARTICLES OF INTEREST
Dive into HTML5 - http://diveintohtml5.org

What is a doctype - http://www.alistapart.com/articles/doctype

CSS Positioning 101 - http://www.alistapart.com/articles/css-positioning-101

Sites to watch
A List apart - http://www.alistapart.com

PRESENTER NOTES
Stage 1 Basic - https://gist.github.com/772441

Stage 2 Divs - https://gist.github.com/772453

Stage 3 Everything - https://gist.github.com/772454

SETUP FOR THE WORKSHOP

Firstly, you will need to bring a laptop along to participate in the workshop.

You will also need some software installed on your laptop. Just follow these steps:

1. Install 'Firefox' web browser
   http://getfirefox.com
2. Open firefox and install firebug plugin.
   http://getfirebug.com
3. Install web developer firefox plugin.
   https://addons.mozilla.org/en-US/firefox/addon/60
4. Install a programming text editor

Windows/PC users

• Install notepad++ text editor http://notepad-plus-plus.org/release/5.8.6 (Notepad++ v5.8.6 Installer)

Mac users

• Install Textmate text editor http://macromates.com (30 day trial version)

Linux users

• We'll just use the preinstalled gedit for the tutorial. http://projects.gnome.org/gedit (Yup it's plain old gedit)