How to teach someone HTML/CSS?

[Nik Coughlin]

I have 3-4 days to teach a graphic designer as much as possible about HTML
and CSS - obviously not long enough, but I should be able to teach them
enough to feel comfortable taking it from there themselves, yes?

Luckily I have until mid January to prepare.

This is what I'm thinking:

HTML structure
HTML elements, marking content up semantically
Styling content with CSS
Validation and testing against different browsers
Internet Explorer bugs
Turning a PSD into an HTML/CSS layout (this is very important to them) - how
to build a fluid design from a fixed size PSD
Optimization (images etc)
Organizing content so that it's easy to find things and pages aren't too
cluttered/not too many levels of navigation etc.
Where to find help on the Internet, how to post an example and ask the right
questions

Does anyone have any further suggestions or advice?

Is this too much for 3-4 days, if so what would you cut?

Am I forgetting anything important?

 

[dorayme]

I have 3-4 days to teach a graphic designer as much as possible about HTML
and CSS - obviously not long enough, but I should be able to teach them
enough to feel comfortable taking it from there themselves, yes?

Luckily I have until mid January to prepare.

This is what I'm thinking:

HTML structure
HTML elements, marking content up semantically
Styling content with CSS
Validation and testing against different browsers
Internet Explorer bugs
Turning a PSD into an HTML/CSS layout (this is very important to them) - how
to build a fluid design from a fixed size PSD
Optimization (images etc)
Organizing content so that it's easy to find things and pages aren't too
cluttered/not too many levels of navigation etc.
Where to find help on the Internet, how to post an example and ask the right
questions

Does anyone have any further suggestions or advice?

Is this too much for 3-4 days, if so what would you cut?

Am I forgetting anything important?

What will this person do after mid Jan? Is the idea to give him the
ability - ultimately after perhaps even further study - to make web
pages himself? Or to just understand some of the difficulties that pros
will face with various designs and how he might help the webpage maker?

 

[Nik Coughlin]

What will this person do after mid Jan? Is the idea to give him the
ability - ultimately after perhaps even further study - to make web
pages himself? Or to just understand some of the difficulties that pros
will face with various designs and how he might help the webpage maker?

The idea is that they'll be able to make at least a start on doing the HTML
markup and CSS themselves, but I think that it will also be helpful for the
second reason that you point out. But primarily the first.

 

[dorayme]

The idea is that they'll be able to make at least a start on doing the HTML
markup and CSS themselves, but I think that it will also be helpful for the
second reason that you point out. But primarily the first.

In that case, yes, HTML structure, keep it simple and I suggest tell him
that for a while (unless he really finds out better) to always use 4.01
Strict and that whatever he creates should make sense to users with the
basic default look or sound when CSS and js is off. And to do as much as
possible to make the CSS work on this minimal markup.

You will explain that he will fail as we all do to keep to minimal
markup and to show him a lot about background images.

Frankly, in 3 days, I would not do much on IE bugs... but he might be a
quick learner? I would instead tell him to see what he comes up in FF
and have a lesson later on IE. Otherwise it will put up too many
roadblocks in his mind.

 

[Nik Coughlin]

In that case, yes, HTML structure, keep it simple and I suggest tell him
that for a while (unless he really finds out better) to always use 4.01
Strict and that whatever he creates should make sense to users with the
basic default look or sound when CSS and js is off. And to do as much as
possible to make the CSS work on this minimal markup.

You will explain that he will fail as we all do to keep to minimal
markup and to show him a lot about background images.

Frankly, in 3 days, I would not do much on IE bugs... but he might be a
quick learner? I would instead tell him to see what he comes up in FF
and have a lesson later on IE. Otherwise it will put up too many
roadblocks in his mind.

Sensible. I think I am going to have to try and get 4-5 days

 

[dorayme]

Frankly, in 3 days, I would not do much on IE bugs... but he might be a
quick learner? I would instead tell him to see what he comes up in FF
and have a lesson later on IE. Otherwise it will put up too many
roadblocks in his mind.

Sensible. I think I am going to have to try and get 4-5 days [/QUOTE]

Sure... but I don't know if you know this, 2 or 3 days once and one or
two days after a period of a few weeks, packs more power of good into
the teaching process than all at once. The earthling brain needs to be
working things out internally for a while to absorb new info
efficiently. I'd say it is your job to set up a basic mindset and him to
go from there and then come back to you for a few days. Good luck!

 

[Nik Coughlin]

Sensible. I think I am going to have to try and get 4-5 days

Sure... but I don't know if you know this, 2 or 3 days once and one or
two days after a period of a few weeks, packs more power of good into
the teaching process than all at once. The earthling brain needs to be
working things out internally for a while to absorb new info
efficiently. I'd say it is your job to set up a basic mindset and him to
go from there and then come back to you for a few days.[/QUOTE]

That makes perfect sense. Unfortunately it's going to have to be all at
once

Good luck!

Thanks!

 

[C A Upsdell]

I have 3-4 days to teach a graphic designer as much as possible about
HTML and CSS - obviously not long enough, but I should be able to teach
them enough to feel comfortable taking it from there themselves, yes?

Luckily I have until mid January to prepare.

Step 1: find a good book which teaches the basics well.

Step 2: teach to the book.

Step 3: afterwards, he/she is on their own, but can continue using the
book -- with which he/she should then be comfortable -- to learn more.

 

[Nik Coughlin]

Step 1: find a good book which teaches the basics well.

Does anyone have any recommendations? I have a heap of books but none of
them are aimed at the beginner.

I've looked at a couple but they (the authors) were pillocks.

 

[Nik Coughlin]

Does anyone have any recommendations? I have a heap of books but none of
them are aimed at the beginner.

I've looked at a couple but they (the authors) were pillocks.

One of my colleagues has this book, I'm going to have a look at it tomorrow:

Head First HTML with CSS & XHTML
http://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/059610197X/

This one looks OK too:
Build Your Own Website The Right Way Using HTML & CSS
http://www.amazon.com/Build-Your-Website-Right-Using/dp/0975240293/

 

[dorayme]

Step 1: find a good book which teaches the basics well.

Does anyone have any recommendations? I have a heap of books but none of
them are aimed at the beginner.

I've looked at a couple but they (the authors) were pillocks.
[/QUOTE]

Head First HTML with CSS & XHTML
By Elisabeth Freeman, Eric Freeman

Cascading Style Sheets
By Lie & Bos

might be the go.

 

[Andy Dingley]

I have 3-4 days to teach a graphic designer as much as possible about HTML
and CSS

* Where to find the GOOD tutorials and the accurate references
* The right principles and mindset.
* Fluid design and accessibility

* HTML
** Semantic HTML
** Validation for consistency
** Needs for and priniciples of accessibility
** Cool URIs. Why they don't change, why RESTful coding and meaningful
URLs are so important to a usable and indexable site.

* CSS
** Minor set of CSS properties
** CSS syntax & stylesheet organisation
** Cascade, how to structure around it, and good HTML markup styles to
ease doing this
** Fluid design: needs, principles, and how different approaches
change behaviour on resize
** Text sizing & units
** Box model
** Need to add HTML elements to a document for purely presentational
"hooks"
** Get your stinking hands off my browser: Why it's not your choice of
window size or font size
** Porting a <table>
** Implementing a PSD, and how to start chopping a rough layout into
the largest content units to achieve good fluid behaviours
** Why PSD-design is evil. Crayons on paper, no more!


Really this ought to be up on wikibooks...

 

[Jan Faerber]

Really this ought to be up on wikibooks...

wiki sucks

 

[Adrienne Boswell]

Gazing into my crystal ball I observed "Nik Coughlin"

I have 3-4 days to teach a graphic designer as much as possible about
HTML and CSS - obviously not long enough, but I should be able to
teach them enough to feel comfortable taking it from there themselves,
yes?

Does anyone have any further suggestions or advice?

Is this too much for 3-4 days, if so what would you cut?

Am I forgetting anything important?

1. A link to the W3C HTML and CSS specifications, with a quick lesson in
how to read it.
2. A good text editor. Check to see that your student isn't going to
unlearn everything by using a bad editor.
3. Firefox and Firebug for debugging

 

[mynameisnobodyodyssea]

This is what I'm thinking:
.....
Turning a PSD into an HTML/CSS layout (this is very important to them) - how
to build a fluid design from a fixed size PSD
....
Am I forgetting anything important?

You could give some examples of PSD features easy
to transform into HTML + CSS,
and others that are difficult.
For example a layout with oblique edges can require a lot
of time and effort to transform to HTML+CSS, and the resulting
files would be large, etc., while a layout with square edges is
much simpler to transform to HTML+CSS, etc.
Or text fonts: elaborate fonts for text might not be supported by a
web browser when transformed to text in an HTML page, etc.
Probably the moral of this would be that it is a good idea
for a graphic designer to have a few Photoshop alternatives
for the graphical representation of a web page,
some of them easy to transform to HTML+CSS.
And for this your course will have to show the importance
of basic principles of HTML+CSS,
like separating presentation from content, or
accessibility to people with disabilities (or to people that use
text-only browsers, mobile phones), etc.

 

[Nik Coughlin]

Does anyone have any recommendations? I have a heap of books but none of
them are aimed at the beginner.

I've looked at a couple but they (the authors) were pillocks.

Head First HTML with CSS & XHTML
By Elisabeth Freeman, Eric Freeman[/QUOTE]

A copy is finding its way into my hot little hands shortly

Cascading Style Sheets
By Lie & Bos

I'll look into it, thanks

 

[Nik Coughlin]

* Where to find the GOOD tutorials and the accurate references
* The right principles and mindset.
* Fluid design and accessibility

* HTML
** Semantic HTML
** Validation for consistency
** Needs for and priniciples of accessibility
** Cool URIs. Why they don't change, why RESTful coding and meaningful
URLs are so important to a usable and indexable site.

* CSS
** Minor set of CSS properties
** CSS syntax & stylesheet organisation
** Cascade, how to structure around it, and good HTML markup styles to
ease doing this
** Fluid design: needs, principles, and how different approaches
change behaviour on resize
** Text sizing & units
** Box model
** Need to add HTML elements to a document for purely presentational
"hooks"
** Get your stinking hands off my browser: Why it's not your choice of
window size or font size
** Porting a <table>
** Implementing a PSD, and how to start chopping a rough layout into
the largest content units to achieve good fluid behaviours
** Why PSD-design is evil. Crayons on paper, no more!


Really this ought to be up on wikibooks...

Yes. Yes it should. Thanks for your input, it's very much along the lines
I was already thinking

It's grown to 3-4 designers instead of one. I'm getting paid enough to put
some reasonable preparation into it, will certainly consider putting the
work I do somewhere under a CC license, but I may not have time enough to
clean it up to the degree where I'd feel happy turning it loose

 

[Nik Coughlin]

wiki sucks

Why?

 

[Nik Coughlin]

Gazing into my crystal ball I observed "Nik Coughlin"


1. A link to the W3C HTML and CSS specifications, with a quick lesson in
how to read it.

I hate the way that they're written, it's horrible. But yes.

2. A good text editor. Check to see that your student isn't going to
unlearn everything by using a bad editor.

Agreed. Will probably go with Notepad++ as it's what I'm most familiar with

3. Firefox and Firebug for debugging

Again, agreed

 

[Nik Coughlin]

You could give some examples of PSD features easy
to transform into HTML + CSS,
and others that are difficult.
For example a layout with oblique edges can require a lot
of time and effort to transform to HTML+CSS, and the resulting
files would be large, etc., while a layout with square edges is
much simpler to transform to HTML+CSS, etc.
Or text fonts: elaborate fonts for text might not be supported by a
web browser when transformed to text in an HTML page, etc.
Probably the moral of this would be that it is a good idea
for a graphic designer to have a few Photoshop alternatives
for the graphical representation of a web page,
some of them easy to transform to HTML+CSS.
And for this your course will have to show the importance
of basic principles of HTML+CSS,
like separating presentation from content, or
accessibility to people with disabilities (or to people that use
text-only browsers, mobile phones), etc.

Yes. Especially for someone coming from a graphic design background, this
is important.