Web Programming

WEEK 10

This week we looked further into the design and layout.  We looked more at the 960 grid and how important it is to have a clear grid and idea of the site you want to make.  We also talked about inspect element(chrome) and how we can use this to see the the paddings and margins applied by browsers.

We looked at form validation from a jquery library, and how to style your form.

Web Programming

WEEK 10

Web Project

This week I started to code out the menu and the home page.  I aligned my links to centre of the page, which proved trickier than I first thought.  I had to use display:inline block, something I hadn't used before and something ill need to look at further.  I used some border styles to hold the content and made them flexible.

Next was the contact form. The form itself isn't to bad to do, but styling the form is tough.  I wanted this page to be empty apart from the form so I made the form quite big and bold.  Then I used absolute positioning to make the form display inputs on both sides instead of straight down, This was tricky and something that made me sit back a few times and really think of what I was doing and what the css was doing, or trying to do in some cases

Web Programming

WEEK 9.
Web Project

This week I started to mock up my site, I decided to do a minimalist site with a clear layout.  I started by sketching in my pad and soon came up with the box model for the site.  I than went to Photoshop and marked out the box model so i had a clear image of where I was going.  I then started to code the site, laying out the div's as I had in Photoshop.  With the box model already done the coding wasn't hard and the site was laid out fairly soon.  At this stage the The content was'nt important the design and layout was the main part.  I now have a layout for the home page, This page will be the template for all other pages.

Web Programming

WEEK 7 and 8

In week 7 and 8 we looked in depth at the design and structure of websites.  We looked at the importance of grids when designing a website and we were asked to use a grid to outline a web page.  Using a grid makes it a lot easier to plan the layout and gives you direction.  Without using a grid or any form of planning and jumping straight into the code is never a good idea, this is where problems occur that could have been prevented with planning.  Even a simple sketch will help the structure and make it easier to create the look you want.

We also covered the design of a web site, like the use of only a few colors used throughout the site.  For example make all the headings the same color, all the images the same style, borders etc.  Without the continuity the site can become messy and will have no real flow and users will pick up on this.