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!

Advertisements