http://colorschemedesigner.com/ - This was used to find a colour scheme that I liked and enabled me to look at contrasting colours.

Zen garden image - http://www.csszengarden.com/

Resources

Css Zen Garden

What went well? 

I feel that the colour scheme designer was really useful and the colour scheme that I used went really well, I Like keeping the majority of the content in the container and it constrained it to the middle of the page. I really enjoyed experimenting with different elements to see what they did and also looking at other peoples work.

What did go so well? 

The main thing I didn't like was you couldn't edit the Html and create div Id's of your own, This would have made things clearer when changing something as I would know exactly what i'm changing. I didn't like editing their original Css page either as it was confusing at first as there was a lot of things that I didn't know about included within the sheet. Finding out what was what took some time, If i was to do it again I'd scrap their style sheet and then go through and rename the elements in the HTML so I could easily go back and change things quickly.

Final thoughts and improvements

As a whole I really liked the idea of Css Zen Garden, being able to view what others had done with the same resources was really interesting and inspired me to take some time to find out how to do more things in Css, I enjoyed looking through their work and thinking about how certain things could be done. When going through my own work I enjoyed experimenting with different elements to see what they did when I changed things in the Css and when I finally came up with a design I was happy with looking back through the process on my Hotglue site to see how much it had changed from the basic page that was given to us. If I was to improve anything I think i'd change the space of the text sections as I feel the page is extremely cluttered, I'd also like to change the title of the page so that it stood out more.

Review process

This was the starting point for the project, a basic html page with no styling. My task was to style this and make it look good purely by using the Css style sheet.

Once I linked their style sheet this was how the page was styled, they had given us a basic layout and then we had to implement our own styling methods.

I then tried out some things such as adding boxes and borders around some of the text, I used a dotted border and filled the box in another colour, this was how it looked once I tried this out on one of the elements on the page.

I quite liked how this looked, so I thought i'd continue with this them and add the style to other elements in the page, below is how the page looked after I did this.

On the colour scheme you can click on a colour and then click on compliment, this will find a colour tht compliments your chosen colour, this is what I did and the outcome was a lime green and pink colour.

Below is the colour grid that I chose as you can see the complimenting colour are below the original colour that I chose, this will then find colours around your chosen colour and then colours around the compliment colours.

Following this I thought I'd make the text stand out more, I thought a good way to do this was by adding a text container, which had a lighter colour to the background.

I decided to remove to remove the underlining of links as I feel it made the text look to cluttered in the small space.

Finally I underlined the subheadings and made them white so they were more clear to read.