Using Float to arrange my web page columns

So, like I said in my previous post, I am going to use divs and the float ability to arrange my columns which will be the back bone of my web page.

This has been very tricky for me to learn, I am not good at this (really not good) so it has taken me quite a while to read and understand the actual functions of some of these functions. From what I gather, I need to apply the float:left; mechanic to all my boxes within a ‘container’ div to allow them to function correctly.

I have been using this guide HERE, to show me what I am exactly doing, copying what they say and replicating it on my Dreamweaver document. However once I have got their tutorial piece of code to work, I am tweaking it to my own advantage.

Obviously, once they are aligned how I want them to be, I need to look at adding a margin or some padding, so the content of each div doesn’t clash with the content from its neighbor.  I have gone with two columns on the main page,  a header and a footer. So I have given my menu bar a margin right of 25px which will give me some clearance between the content and the menu.

The footer I have given a top margin so I have some clearance above, and the header some bottom margin for the same reason. It is really starting to take shape. I am very please with the ‘layout’.

Now the next step for me is to add some color, and start identifying the columns with some great color options and some different styles.  I haven’t picked a font or anything like that yet but once Im done with getting the layout sorted as in where everything is going I will return to pick my font at a later time. Im still unsure as to what I want to use!

Guys, remember if you are new to all this like me, then why don’t you check out some of the sites I have used to help you along the way. There are plenty of free resources which will give you a great helping hand!

My first website journey – the starting point

Welcome everyone to my newest venture on the internet. With this wonderful blog, I plan to record and track how I go about creating my first website. Bare in mind I am a complete newbie to all things web design related I have no idea what I am doing. So if you are a fellow newbie, It may be worth following along to get some hints and ideas how not to do certain things!

I am going to start simply, by creating a basic HTML website. I really want to look at using some kind of software that will allow me to update it easily. However I plan on learning the very basics first.

I have been looking around websites like w3school.com for great tips on the basics of HTML, however it is definitely more complicated than I had previously thought it would be. It doesn’t deter me tho, I am in this for the long run and will proceed slowly but steadily.

My stage 1 (initial strategy) for completing such a huge task is:

1. Learn the basics of HTML.
2. Start putting it into practice on a Free web hosting site
3. learn about anything else HTML related, how to create cool unique pages with some different abilities on
4. lean about javascript to try and help my pages be a bit more dynamic

This is the basics of where I will start, however while completing my step 1 strategy, If I come across something important more so that I think I should incorporate into my knowledge, I will add in along the way.

To complement what I plan on doing I have bought a copy of Dreamweaver, the HTML editing program. Hopefully this may give me a bit more of an idea of layout and things like that. Either way I need to learn it from the bare bones so to speak.

After my mastery of the basics like HTML, I would love to learn PHP. This is where it will really start to get tricky I imagine.  However there is a wealth of resources all over the internet which should give me a great head start into the world of web design. I will probably also end up buying a PHP & MySQL book to help me as it is a lot more complex and complicated than basic HTML.