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.
- Which month of which year will you choose?
- 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?
- What will be the overall theme of the calendar?
- 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:
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 😉