Assignment 1: The Calendar.

calendar

Thomas: So yeah, it’s due on April 6th, so you’ll have about three weeks to complete it.”

Me: “Three weeks? COOL. That’s more than enough time to do a calendar!”

“Well, that was easy. ” – said Nobody Ever.

Meeting the specs

The challenge? Create a calendar using HTML tables, lists or some alternative. The calendar must feature at least one month, all holidays, at least one background image/colour and validate in the W3C validator.

I decided to create my calendar with an HTML table as opposed to lists or divs. I’m new to the JavaScript, jQuery and PHP world, so I stayed where I was comfortable and stuck to the tried and tested HTML-CSS format.  I’m pretty darn proud of it considering three weeks ago I was doubtful I could create something decent enough to post online.

Choosing the month of April kept things simple. It’s current and features four holidays: Good Friday, Passover, Easter Sunday and Easter Monday, which reveal themselves on hover.

hoverjpg

I also included April Fool’s Day because some weirdos consider it to be a “holiday. Initially, I coded in the moon phases, but removed them a couple of days ago as they didn’t add to the design. And finally, Animate.css provided a little movement and made the layout more interesting. I used “SlideinRight”, “SlideinLeft”, “SlideinDown” and “SlideinUp” to animate the outer cells and “Pulse” for the header when the page loads or is refreshed.

April showers bring monotonous black circles

I chose a strong, black and white image depicting a grey, somewhat dreary skyline with lots of negative space. It’s a rainy day and captures what comes to mind when I think of April. The image comes from Unsplash.com, an excellent resource for absolutely free, high resolution photography. My new best friend!

Beyond, the month of April, my main goal was to create a strong composition, using suitable elements and principle of design, including fonts, shapes and colours.  For me, choosing fonts is a “kid-in-a-candy-store” type of situation, but I eventually settled on ‘Open Sans’ which has become a new favourite of mine. It’s minimalist and clean and has a condensed alternative which is always nice for variation. I think my hover effects and animations are subtle as is my intentionally limited colour palette. The rows of circle forms echo the monotony of April.

Challenge #1: Learning curves and restraint

The structural HTML was the easiest part. When I began coding the calendar,  I was still high on the fumes of the Mondrian Table and drew upon my new-found knowledge (hard-won, might I add). Styling it to “look” and “do” what I wanted was a bit trickier, but I enjoyed the challenge. There was tons of trial and error. Lots of coffee. Very little sleep.

A new credo was born:  “When in doubt, comment it out!”. Don’t give up.

As the composition began to take shape, it was hard to know when the composition was complete.  How many hovers, transitions and effects are too many? Just because you CAN do something, doesn’t mean that you should. I believe my design is interesting, but shows some measure of restraint.

Challenge #2: My layout broke in Firefox!

Only I would wait until last minute to browser-test my layout. After uploading my site, I noticed that the layout was broken in Firefox.

FirefoxLast night, I assumed the transitions I used were not supported by FF, but they were, plus I had used all the vendor prefixes. I went into some online forums and saw that FF can ignore “display: inline-block;” in some instances. The fix was supposedly, to add “display: -moz-inline-stack;” on the line above it. That didn’t work. So I gave up and went to sleep.

Next day: Thomas to the rescue! First he suggested I change “border-collapse: collapse” (in my table) to “border-collapse: separate”. This didn’t work either… yet.

Finally, he commented out both “display: inline-block” and “stack” and it worked! I also kept border collapse at “separate” because without it, the layout broke in all browsers:

Stoked! My layout is now consistent in all browsers.

I like it.

I’m pretty satisfied with what I have created, which never happens. I have already begun working on the other 11 months. The layout is bold, but versatile enough to be customized with other backgrounds and colours:

calendar_y

I am delighted to have met the requirements, but look forward to completing the whole year and adding some programming logic to it.

Next up? Composite 1: A five-page website to be completed in just one week. One week???? The masochist in me has already turned off my ringer and begun picking out fonts.