The first part of my course ended with the development of a 5 pages responsive website.
I decided to create a website for someone special to me: my mom! My client needs a website to show her products and for potential clients to contact her 😉
Here are the five (not so easy) steps I went through in 4 days (!!!) to get the web-site up and going.
Step 01: create a site map to get an idea of the structure of the website.
Step 2: Create a wireframe for the home page and sub-pages defining the grid system I was going to use.
Step 3: I also sketch the website on paper to get an idea on how to position the content on desktop and mobile in order to make a responsive website 😉
Step 4: Mockup of the pages defining the spaces, menu, colours, typography and using real content to design the webpages.
Step 05: Program the pages with HTML5 making sure it validates (get no errors when checked by the W3 Validator) and style the pages using CSS3.
This step is the more time consuming for me. Specially when you are learning how to code properly and trying to put it into practice. But the final result got me very excited because I could see how much I can do already with what I learnt. 😀
You can check my website online: Sweet Suzie and give me some feedback on what you think.
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 😉