Backlog - First Coding Unit

After forgetting to blog my first website unit, i'm going to back-log it now...

In this unit i learned to hand-code in HTML and CSS for the first time, this turned out to be something i really enjoy. 

Here are some examples of coding techniques i learned to use on the unit:

'Unordered lists' - (

• ) I used this code to create my Navbar, the code is a simple way of laying things out in order, but combined with the right CSS it can become very animated (rollovers, button design and spacing etc)
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  'Headings' - (

  ) This code is very useful for simple text sizing and style, i used it to turn certain sections of text into obvious headings and sub-headings.
  

  
  

  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  This code is CSS, the 'h1' tag is targeting h1 headings in my HTML that i explained above. This is how i changed the stylistic properties of each of the tags. Below it, the 'cent' tag is a 'class' which can be applied to anything in the HTML, in this case it was applied to certain lines of text to stylize them.

  
  

  

  
  

  
  

  
  

  
  

  
  

  This code is more CSS, targeting 'anchors' (anchors being clickable elements that can be linked to toher pages - best used for buttons and such) in my HTML. This screenshot really illustrates the stylistic capabilities of CSS - as you can see i have fine-tuned the width and the height, the position, the image displayed, and the image displayed when the mouse is hovering over the image (creating a 'rollover' effect).

  
  

  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  This technique is simply keeping things organized, the '/*--------*/' is code to ensure the web browser does not read it, it is purely for the coder. As you can see i have used it to create categories within my documents, this is always a huge help when trying to find specific sections of code (which i quickly learned was an almost constant activity)

  
  

  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  Here you can see what a web browser does specifically with the heading tags, which i talked about at the top of this post. The orange text is

  , the grey text is

  .
  

  
  

  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  Here you can see my 'Unordered List' which i talked about further up. After applying some stylistic CSS the list manifests as a traditional navbar, the orange square has a mouse hovering over it, this is a 'rollover' effect.

  
  

  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  In a lot of ways this project was my favourite, as i discovered coding within it. Coding has really turned out to be one of my favourite aspects of digital media and i hope to repeatedly build webpages and such using it. I think what i like about it the most is how it's so rigid as a format, you can do so much with it but really it's all mathematics, and one tiny typo can make a massive segment of code invalid. The files, like the code, must be properly organized as everything is referencing other things all the time. The whole thing is very satisfying to me, and with very fine-tuned software at my disposal (TextWrangler) and such small file sizes it's actually very easy to get on with. Here's a screen grab of my finished home page: