In order for my website to exist, I used Adobe Dreamweaver to hand code it from scratch. In lectures it was mentioned that we could use existing framework to construct a responsive site, although I wanted to be able to create my own, and I believe that using this site as a template I could create other sites using this as a framework, and it will be responsive as well. Before I started this construction,  I had already made a responsive website for another assignment after having learned a lot from lectures before.

This can be seen at:

As you can see I also purchased my own url and when this website is finished I will get about adding this site into my portfolio.

To begin with I created my folders:


Then I created three blank html documents and a stylesheet called:


I needed to create multiple divs to incorporate everything I wanted to put into my website. This ended up looking like this:

<!DOCTYPE html>


<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>


<link rel=”stylesheet” href=”css/nivo-slider.css” type=”text/css” media=”screen” />



<section id=”leftside”>


<section id=”rightside”>
<img id=”rightim” src=”images/tyre5.png” width=”250″ height=”250″ alt=”tyre” style=”-webkit-transform: rotate(0deg);”/>

<div id=”container”>


<div id=”logo”>


<div id=”title”>



<div class=”gap”>


<div id=”nav1″>

<div id=”nav2″>

<div id=”nav3″>


<div class=”gap”>

<div id=”hero”>


<div id=”left”>



<div id=”aside2″>


<div id=”aside3″>


<div id=”aside4″>



<div id=”right”>

<div id=”article1″>


<div id=”article2″>


<div id=”article3″>


<div id=”article4″>



<div class=”gap”>


<P>Created by Daniel Tooley &copy;2013</P>





This gave me a header, a footer, a container containing these as well as 8 content divs separated in two left and right divs in the container as well. I also had two divs either side of the container where I want to include some jquery animation on an image, but undecided what this will be yet. Finally, there was a hero div which I will use to incorporate a slider and/or another hero object.

Once I had this, I went into the css document and styled it to make it responsive and look like my design. I wanted to make sure it was responsive before I properly styled it and make sure stuff worked as I put it in rather than doing it all and realising loads of stuff isn’t responsive or not compatible at all. Basically I wanted to go through one element at a time and gradually get a finished website.

My next stage will be to style each div individually and make it look nice!