General:

There were 5 assignments in this course, each building upon the knowledge gained in the previous assignments. Your first assignment starts off with a knowledge of just a few HTML tags and NO CSS. From there, you add more tags, but you are NOT allowed to go beyond the material you have taken. It's not until assignment 5, that you are allowed to use CSS at all.

The good:

This was a good course to get introduced to the way they do things in the MDIA series of courses. You are supplied with reading material, online forums, publishing capabilities. You need to submit assignments that get marked and so on.

We were supposed to just add media to our existing site, however we were now allowed to use CSS. I used this opportunity to convert the formerly table based site over to CSS. It looks the same as the previous assignments, but underneath is a complete re-design using DIV based layouts.

I had already done most of the work in assignment 5, as I'd updated the existing pages with images and converted font tags over to CSS.

For this assignment, I just had to add a few tables, and specify 2 additional pages for marking.

We can't use CSS for layout yet.

I'm using assignment 4 as an opportunity to start converting my pages to HTML/CSS.

Although we can't use tables and other layout principles yet, I should still be able to get rid of most of those <font> tags and &nbsp's. To me, this is a good way to practice basic CSS styling techniques, which will include some body styling, lists and so on.

As for images, I'll be looking at using a nice looking background as well as a few pictures in the web pages.

Update: At one point, I had a nice CSS menu for this assignment, but it used 'li {display:inline }', which is probably illegal for this assignment. I converted it over to an image based menu system. Looks very nice.

One method I used to indent right aligned images, was to insert a right aligned blank image in front, i.e.:

<img src="blank.gif" width="200" align="right" />
<img src="myimage.jpg" width="150" align="right" />

The above will indent myimage.jpg 200 pixels in fron the right hand of the page. I used this on the company.html page. Nice!

For this assignment, I went through several versions, and eventually cleaned it up. One of the things I'm trying to do is to implement what looks like tables.

Although I submit my assignments early, I've often unpublished them in order to make some changes, often as a result of seeing what others have done.

Update: I was docked marks for trying to line up the bullets in the lower portion of the page. Really, these assignments are still single column. Also, some of my classmates are struggling with trying to add font properties without using styles in Dreamweaver CS4. Good luck! Best bet is to code it by hand.

Building upon the limited selection of HTML tags from the first assignment, we can now use:

• Page Properties
• Ordered or unordered lists
• Font tag (with colours, sizes, etc)
• Any special character I want (unicode that is)
• Any XHTML compliant attributes we possibly can for the tags we have (for the most part)

So, lots more &nbsp;, but now we get to use different fonts and colours for them. What I can't seem to find is a way to set more than 1 background colour. I did find out that Box drawings don't look great in Dreamweaver, but show up fine in a web browser.

Unicode references I used for this assignment are:

• http://www.unicode.org/charts/
• http://www.degraeve.com/reference/specialcharacters.php

For this assignment, my research will include:

• MDIA1206 Unit 2 course material
• Finding web design sites for inspiration
• Don't Make Me Think by Steve Krug
• MDIA1206 Appendices and reference material
• Unicode references

Tools I'll be using are:

• Dreamweaver (for coding)
• Fireworks (for prototyping the layout)
• Subversion (learning this for version control)
• Browsershots (to test in different browsers)
• Firefox (for HTML compliance testing and debugging)
• Gridmaker (for creating grids for use in Fireworks/Dreamweaver)

One idea I have for this is to:

• Create a prototype site in Fireworks
• The top layer should be pure white at 66% or so opacity
• Save a flattened .png file and use as a background for Dreamweaver
• Once the site is done, remove the background

Remember that Firefox has the Web Developer and Firebug add on for testing web sites. In addition, www.browsershots.org can test your web site under several web browsers.

For this assignment we only have the document codes and text codes as outlined on page 53 of our Introduction guide.

We can also use special characters, but that's about it. No colours, images, tables or CSS are allowed for this assignment.

For this assignment, I used:

• different font sizes
• right alignment
• the <br /> for tables
• the &bull; to simulate tables
• &nbsp; to force spacing
• <blockquote> to indent the whole page
• <hr /> to separate sections

I'm taking the MDIA1206 course at BCIT, and although I already know much of what is being taught in this course, it's a great opportunity to learn a lot of basic principles in more depth. For instance, for our early assignments we are only allowed to use a limited subset of HTML tags in order to create our web pages. This forces us to find creative use for these tags in order to make our pages look attractive.

• #1 - Your resume with only a few HTML tags and no CSS
• #2 - Starter page with a few more tags and colours
• Test - My own conversion of assignment 2 to CSS
• #3 - Add a few pages
• #4 - Adding images (no CSS or tables yet)
• #5 - Add tables
• #6- Add media, and you can now use CSS

The challenge with MDIA 1206 was that you were very limited with the tags you were allowed to use with each assignment. It wasn't until assignment 6 that we were allowed to use CSS and HTML as we would like.

This class was a lot of fun and we had a lot of discussions in it, much thanks to our course instructor, Bonnie.

Post note: 1 year on in this series of courses, and I've found that NONE of the followup courses had the classroom interaction like we did in Bonnie's course. She set a high water mark.

My final mark for this course was 89%. I could have done better had I spent more time validating my assignments and staying within the assignment guidelines.