Messing around with HTML / Testing out homepage

The other day on the weekend, I decided to mess around with HTML and css and try to experiment and see what i could do, i thought of the idea that I could create a 'mock up' of my homepage and see what it looks like in action. I spent a few hours with HTML and css trying to get my main idea of the homepage out and make it real, along with having issues and then resolving them and i was able to create a simple main menu with icon navigation (Shown below).

Above is what the main homepage 'practice' looks like, and the design and layout is what i wanted for the official thing, simple and clean. I used flat colours and imagery to relate it to my ibook and simple icon navigation to access the 'home' which is essentially here and an 'about' navigation which i'm still unsure of using for the official thing.

I want my design to be simple but effective and I wanted my logo to cover most of the main page in order to but a lot of focus on it as well as create a bold impact to the site and make it look visually engaging. I For this site I will be adding extra content and navigation for the site but haven't gotten round to that yet and I will explain all of that in later posts.

With the navigation at the side of the page, if the user hovers over the icon navigation it will light up red, and i did this so the it will indicate to the user what they are hovering over on, so they know what to click or thing they are hovering over the right thing on the site. Also I made navigation when the user hovers over it that the tag will pull down slightly. I thought this was a nice touch and the way i managed to do this was add an extra bit of black block above the original tag navigation and used it as a separate image, so i had two images per navigation tag, so one for 'hover over' and another when its off the hover. This little animation makes the site slightly more interactive and enjoyable to use as well as making it easy for the user to understand and navigate through the site.

This is my official logo for my website and I really like the bold frame it has, as if its a stamp and i feel its very eye catching and would engage anyone who saw it, especially having it centred on the webpage. I also made this image a link so it would take the user back home, I also added links to the navigation but because i haven't developed my website any further yet they only like to this main homepage a the moment.

Overall this little exercise with html has made me feel slightly more comfortable and confident with using html and css and building my site, which is a good thing, and if i decide to use this, it will help me get a head start on my site and i plan on hopefully getting my main homepage with all the navigation and content on the main homepage done and sorted before i leave for Barcelona next week.