WEBSITE DEVELOPMENT

To build my website I started from these HTML and CSS files HTML and CSS files downloaded from an open source website.
Using Brackets to work on the code, I got more comfortable with the HTML and CSS elements, also checking tutorials online at W3school.
I structured the website in folders:
1. css folder
2. images folder
3. moving.htm

Brackets is a really nice program because it allows you to see on which part of the page you are working on, highlighting it in the Live Preview.



Getting started!

Thanks to this feature I was able to start cleaning up the index.htm file and leave only couple elements in the homepage:
1. title
2. topbar
3. a content section with the menu list
4. footer

I then played with the fonts and created new text styles for titles and subtitles in the CSS files for both index and 01_week page. This part was quite OK although my inexisting experience in coding websites.

I struggled a bit more with creating an interactive menu. The main problem was that the Cash menu was just a list, wherease I wanted to create a grid of images, one for each week, with a hover element that would show the weekly title on a blue background.
I initially managed to insert an image in the existing cash list, first on the CSS file, in the linksmenu part, which meant that all elements listed in my menu would have shared the same image... Not of much use.... Then I tried to insert the images directly in the content part of the index.html file, however I was not able to make the text appear only after hovering on the image...

I then found a very useful website containing lots of examples of Hover Effects.
I chose to work on Effect one.
First I isolated the elements of interest, meaning getting ridd of everything apart from one single page, with one single image and its hover on effect.
I was left with:

1. css folder containing:
components.css
default.css

2. htm file:
moving. htm

3. images folder:
1.png

4. js folder containing:
modernizr.custom.js
toucheffects.js



Hover element bones!

Then I moved these elements in my webpage:
1. added the 2 css pages to my folder
2. inserted the html code from moving.htm in the relevant parts in my code
3. added the image to my images folder
4. copied the js folder

I then deleted the cashmenu list.

The development of the about page and week one page was then a lot easier to implements, since it maintained the title, topbar and footer elements from the home page. I only added text, images and videos to the content section.