Learning HTML & CSS - Character Design & Figurative Sculpture

Wednesday

Jun222011

The Anatomy of a Perfect Landing Page

Wednesday, June 22, 2011 at 0:21

I have always had an interest in design. I studied Graphic Design at college and almost begun a Degree in Typography. I had dreams of working on magazine layouts and album covers.

I ended up with a career as a sculptor!

But I digress, this post is is a collection of inspirational links pertaining to slick landing pages, clean layouts and resources for grid systems.

First a look at The Anatomy of a Perfect Landing Page. Somewhat contrived but a good example of what should be in mind when designing your site. There is no such thing as perfection but there is certainly a wrong way to do layouts.

Here we have some examples of super clean, minimal layouts. There are some beautiful examples here and enough inspiration to keep all happy.

There are rules to follow when designing layouts. Web Pages can be intuitively composed but the best way to build the content of the page is to first create a layout grid.

“ The grid system is an aid, not a guarantee.
It permits a number of possible uses and each
designer can look for a solution appropriate to his
personal style. But one must learn how to use the
grid; it is an art that requires practice. ”
Josef Müller-Brockmann

First have a look at this site http://fluid.newgoldleaf.com/ and try switching on the SHOW GRID button in the header. The button reveals the underlying structure of the layout.; six columns and a fixed line heights.

This site http://960.gs/ shows many examples of 960px web layouts, each that you can switch on and off the grid. And here a site based on a 1140px Fluid Grid. http://cssgrid.net/

Next is an example of a 'square' framework for your layouts. This introduces a very interesting concept for contstructing your pages. http://thesquaregrid.com/

Ok - that's more than enough information for anyone begining to deal with grid systems. Anyone who would like to learn more about grid systems can dive down the Rabbit Hole with the below resources. Enjoy your research!

http://www.thegridsystem.org/

http://webdesignledger.com/tools/13-excellent-tools-and-systems-for-css-grid-based-layouts

Mark Boulton article: Five Simple Steps to designing grid systems and his upcoming book

Also Khoi Vinh's book: Ordering Disorder: Grid Principles for Web Design

Ethan Marcotte's Responsive Web Design

A List Apart article: http://www.alistapart.com/articles/responsive-web-design/

Wayne Taylor |

2 Comments |

tagged

HTML & CSS from the beginning,

Layouts,

P2PU,

grids,

landing page,

reference,

resource in

CSS,

HTML,

P2PU,

Resource

Saturday

Jun112011

Paragraphs and Lists

Saturday, June 11, 2011 at 23:34

WEEK 02: Paragraphs and Lists

Here's the link to the Marked up Paragraphs and Lists document, stashed in dropbox:

http://dl.dropbox.com/u/8154279/P2PU/Paragraphs_and_Lists.html

I found the task pretty straight forward so have little comment on this.

I have been away on Holiday and been non-stop busy since my return so I'm eager to move on to Week Three's tasks.

That's all for this post.

Wayne Taylor |

Applying HTML Tags to the World around us

Tuesday, June 7, 2011 at 12:28

WEEK 02: Anatomy of Tags

A Paragraph of Habaneros

Head, Body and Title of Dunnys!

Header

A Header of Dinosaurs and Paragraph of books

Another Header and Paragraph

10 points (and a 'PEDANT' badge) to anyone who spots the mistake above!

Wayne Taylor |

Test

Tuesday, May 17, 2011 at 13:01

<!DOCTYPE html>

<head>

<title>Hello World<title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

Wayne Taylor |

Hello World

Sunday, May 15, 2011 at 23:20

A bit late getting this post up; I've had a hell of a busy week and next week will be no better. The week after that I'm holiday so that post will spill into the following week - but I should keep up to date after that.

Ok excuses done, on with the show...

First off i'd like to say hello to everyone, especially those in my Group: Sam, David, Melvin and Igor - Hey guys!

Week 01: Reflection

This first section seemed simple enough. Copying the opening HTML, by rote, is a good idea. The indenting of the HTML to divide up the content is a simple idea. Using an advanced editor (notepad++) makes the visual flow of the code easy to understand and differentiate the different elements within the body of the code.

The <head>, <body> and <p> tags are simple enough to remember and if you add the closing tag at the same time as creating the opening, then adding the content between; makes for a simple a furmulaic way of creating the code.

Less easy to remember is the opening DOCTYPE and meta which I had to refer back to, every time.

I'm enjoying the Mark Norman Francis article although having read half of the book 'Build Your Own Website THE RIGHT WAY Using HTML & CSS, By Ian Lloyd' I find revisiting the basic material some what of a chore to approach. However; once I begin reading I find myself reinforcing things that have been quickly forgotten or half understood in the first place.

One thing I like not one bit, and never will, is the IRC chat room. You won't find me in there much, if at all.

So if anyone needs contact me - please use the comments below my posts here, email me at wayne@foolsroad.com or hunt me down on Twitter or Facebook.

Ok I'm signing off. Keeping it brief this week - I'll see you all during the week at some point.

Wayne Taylor |

3 Comments |

tagged

HTML & CSS from the beginning in

CSS,

HTML,

P2PU