Calendar Assignment 101

At the end of this class we had to create a Calendar using HTML5 and CSS3.

The entire layout of the calendar should be created using a valid HTML table, as it is one of the few legitimate uses for that markup.

Before jumping into building my web page, I decided to answer a few questions and to draw a wireframe so I don’t start from zero and ended up changing  on the way.

Questions:

• Which month of which year will you choose?
  September 2015

• What is notable about that particular month?
  My birthday is on September and it is also the beginning of my favorite season: Fall!

• What holidays are present in that month?
  Labour day

• What will be the overall theme of the calendar?
  Fall

• What colour scheme would be most appropriate for that month?
  Colours on beginning of fall: red, brown, green

• What kinds of typefaces will help set the tone for your calendar?
  Kaushan Script for the Month and Year
  PT Serif Caption for the rest

• Are there images that can be used to help establish the theme?
  My Fall photos

This is my wireframe:

And this is the end result:

Gisele’s September Calendar

To  program my Calendar I used HTML5 to create a table: <tr> <td>number goes here…</td></tr>. And the Month and year where put inside paragraph tags <p> Text goes here</p> giving a different class name to them so I could style them up  differently on my CSS3 file

To add colours, fonts, images, background and also the positioning of everything I used CSS3. The mouse effects were also added on the CSS3 file.

This is the CSS of my Month and Year texts. Note that I was able to rotate the Year 90 degrees using the transformation effect rotate. I also used this effect on photos to make the ’tilt effect’ when the mouse goes over them.

Hope you found this interesting!
More explanations… ask me 😉

Advertisements