Learning HTML & CSSLearning HTML & CSShttp://www.waynetaylordesign.com/learning-html-css/2011-07-02T22:44:44ZSquarespaceThe Anatomy of a Perfect Landing Pagehttp://www.waynetaylordesign.com/learning-html-css/2011/6/22/the-anatomy-of-a-perfect-landing-page.htmlWayne Taylor2011-06-21T23:21:19Z2011-06-21T23:21:19ZI 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!

 

 

Also Khoi Vinh's book: Ordering Disorder: Grid Principles for Web Design 
Ethan Marcotte's Responsive Web Design 
]]>Paragraphs and Listshttp://www.waynetaylordesign.com/learning-html-css/2011/6/11/paragraphs-and-lists.htmlWayne Taylor2011-06-11T22:34:58Z2011-06-11T22:34:58ZWEEK 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.
]]>Applying HTML Tags to the World around ushttp://www.waynetaylordesign.com/learning-html-css/2011/6/7/applying-html-tags-to-the-world-around-us.htmlWayne Taylor2011-06-07T11:28:28Z2011-06-07T11:28:28ZWEEK 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!

]]>Testhttp://www.waynetaylordesign.com/learning-html-css/2011/5/17/test.htmlWayne Taylor2011-05-17T12:01:38Z2011-05-17T12:01:38Z<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Hello World<title>

</head>

<body>

<h1>Hello World</h1>

<p>blah blah</p>

</body>

</html>

]]>Hello Worldhttp://www.waynetaylordesign.com/learning-html-css/2011/5/15/hello-world.htmlWayne Taylor2011-05-15T22:20:33Z2011-05-15T22:20:33ZA 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.

 

]]>Why I want to study HTML & CSS from the beginninghttp://www.waynetaylordesign.com/learning-html-css/2011/4/4/why-i-want-to-study-html-css-from-the-beginning.htmlWayne Taylor2011-04-04T10:25:08Z2011-04-04T10:25:08ZTASK 3

AIM

The main reason I want to study HTML & CSS from the beginning is to boost understanding. I have my own website and often find myself "wishing I could do this..." or "wondering why that is happening?".

My website is hosted by SquareSpace and has served me well, but I do often find myself wishing I could manipulate more than is offered by the editor. I also wish to build a site from the ground up, having full control of all aspects of the site.

My own interest in building a website has been slowly growing over the last few years and finally, upon viewing the video 'Create a free website from scratch' (posted below) I thought; Let's do it!

So I picked up the book 'Build Your Own Website THE RIGHT WAY Using HTML & CSS, By Ian Lloyd' and have been working my way through the tutorials. Adding this course to my study should help propel me along the learning curve.

 

Learning the basics of HTML and CSS will enable me to move onto projects that currently reside outside of my capabilities. It is necessary to absorb this basic information to move onwards. I expect the ongoing studies and this course will set me firmly on the way towards accomplishing the imppossible! - There is no spoon! - only the untrained brain!

 

The extent of my studies so far are quite limited. I have been building a site using the book mentioned above. I have been on this only a week, I'm about quarter of the way through the book and have been surprised at how rewarding the chapters are. The site I'm working on currently looks like the internet of 1997, but the fundamental information is far more palpable than previously assumed.

The scores I gave myself represent the lack of experience I have had with html and css, but are perhaps higher scored than should be due to the tinkering with my own site over the years; learning by adapting what already exists and observing the changes. 

I know how to build the very basics with html; headers and body, adding links and extra pages and using simple css to style the pages. I will be happy when I have learned to code all the parts that make up a webpage and add all the necessary elements that make up the components of a fully functional, modern site. This I am passionately devoted to.

 

I have moved out of the realm of fear. I am on the path of understanding. The road ahead is long but the journey shall be rewarding.

 

]]>HTML & CSS from the beginning - Week 0http://www.waynetaylordesign.com/learning-html-css/2011/4/4/html-css-from-the-beginning-week-0.htmlWayne Taylor2011-04-04T09:18:48Z2011-04-04T09:18:48ZTASK 1:
SETTING UP THE BLOG
Over the last couple of weeks I have decided, and dedicated myself to learning more about the structure and building of websites and their various elements. With a need to be able to add code to this existing site and a desire to buil another site from the ground up. Inspired by the video below(beneath TASK 1) I launched myself into this book: and have been ploughing through it over the last week. I'm about third af the way through already and have a, fairly ugly, site built which looks like the internet of 1997! Hopefully this course I'm embarking upon will help steer me towards a greater understanding of the key concepts to HTML and CSS.

TASK 2:
WHERE I'M AT
I understand html - - 4/10
I understand the concepts behind HTML - - 4/10
I understand how to view the source of web pages - - 10/10
I understand how to structure a HTML document correctly - - 8/10
I understand the anatomy of a html tag - - 4/10
I understand how to use the right tag for the right purpose - - 4/10
I understand the difference between classes and id's - - 7/10
I understand what makes a good class name and a good id - - 6/10 
I can 'think in html' - - 2/10
I understand css - - 3/10
I understand the concepts behind CSS - - 3/10
I understand how to view the source of CSS documents - - 3/10
I understand the best method to attach CSS to a HTML document in any given context - - 4/10
I understand how to apply style rules to a HTML document - - 5/10
I understand the general syntax of CSS - - 2/10
I understand the basic CSS selectors - - 2/10
I understand the advanced CSS selectors - - 0/10
I understand how different browsers interpret CSS - - 1/10
I can 'think' in CSS - - 1/10
I am able to bend spoons with my mind - - 10/10
I understand the quirkiness of browsers - - 4/10
I am motivated to learn - - 10/10
I am enjoying myself - - 10/10.

 

INSPIRATIONAL VIDEO:
Create a free website from scratch (from Tinkernut, via YouTube):
]]>