Wednesday, 30 April 2014

The Start of the Journey - HTML5 & CSS3

I have started the development of my website, after a short tutorial from George on tuesday morning all of my previous HTML & CSS knowledge starting coming back to me, everything has changed slightly since I lasted built my website at A-Level; it is not longer considered good practise to code 'in-tag' or use div id's and even coding at the top of the HTML document is a nono. Everything is styled in the CSS3 styling sheet, everything is created in the HTML5.index. After a short practise session getting grips with the basics again I really wanted to just get straight into it, so I did.

I spent the rest of the lesson working on the skeleton frame work and trying to make sense of all this foreign code that we have been given to work on after looking at it for an hour or two I started to see what controlled what and immediately this gave me a clearer idea of how to manipulate my webpage into what I wanted, not by what I could do. Below is a screenshot of my website thus far with about 30 minutes of work.

CSS3 Code:


This piece of code above is the code I used to get the filling background image. Basically it is telling the background at the URL of: to not repeat, to be in the center vertically and the center horizontally and be fixed in that position. The 'cover' code makes the background cover the view port size and when resizing animate with a 'zoom' a really nice a simple piece of code.



HTML5 Code:














In my HTML code it is currently very simple it has a <div> which is taking on the class of the .nav class in my CSS (more on that later) with two paragraphs within that <div>, one for my main title and one for my lesser subheading which both have different opacities and colours.

For my navigation I have a simple unordered <ul> list <li> with links to each of my other content pages and then the closing </div> tag, obviously this is barebones stages and I want to completely re-do the navigation but still a good start!

No comments:

Post a Comment