Search

GS Web-design Blog

Webdesign Developement and Mantainance

Month

October 2015

Protected: MOCKUP – Design to Code…

This content is password protected. To view it please enter your password below:

Advertisements

Sweet Suzie Website: concept and development

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.

website site map
Sweet Suzie Website Site-map

Step 2: Create a wireframe for the home page and sub-pages defining the grid system I was going to use.

Sweet Suzie Website Wireframe
Sweet Suzie Website Wireframe using a 12col. grid system

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.

Sweet Suzie Mockup
Sweet Suzie Home page Mockup

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 the my website online: Sweet Suzie and give me some feedback on what you think.
Thanks!

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:

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 😉

Create a free website or blog at WordPress.com.

Up ↑