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:

wireframe

And this is the end result:

Screen Shot 2015-10-08 at 7.48.20 PM

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

Screen Shot 2015-10-08 at 8.05.16 PM

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.

css tranformation effect

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

Advertisements