How to teach someone HTML/CSS?

Discussion in 'HTML' started by Nik Coughlin, Nov 27, 2008.

  1. Nik Coughlin

    Nik Coughlin Guest

    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?
     
    Nik Coughlin, Nov 27, 2008
    #1
    1. Advertising

  2. Nik Coughlin

    dorayme Guest

    In article <ggknu8$vu9$>,
    "Nik Coughlin" <> wrote:

    > 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?

    --
    dorayme
     
    dorayme, Nov 27, 2008
    #2
    1. Advertising

  3. Nik Coughlin

    Nik Coughlin Guest

    "dorayme" <> wrote in message
    news:...
    > In article <ggknu8$vu9$>,
    > "Nik Coughlin" <> wrote:
    >
    >> 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?


    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.
     
    Nik Coughlin, Nov 27, 2008
    #3
  4. Nik Coughlin

    dorayme Guest

    In article <ggkpde$e2i$>,
    "Nik Coughlin" <> wrote:

    > "dorayme" <> wrote in message
    > news:...
    > > In article <ggknu8$vu9$>,
    > > "Nik Coughlin" <> wrote:
    > >
    > >> 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?
    > >>

    ....
    > >> 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?

    >
    > 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.

    --
    dorayme
     
    dorayme, Nov 27, 2008
    #4
  5. Nik Coughlin

    Nik Coughlin Guest

    "dorayme" <> wrote in message
    news:...
    > In article <ggkpde$e2i$>,
    > "Nik Coughlin" <> wrote:
    >
    >> "dorayme" <> wrote in message
    >> news:...
    >> > In article <ggknu8$vu9$>,
    >> > "Nik Coughlin" <> wrote:
    >> >
    >> >> 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?
    >> >>

    > 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
     
    Nik Coughlin, Nov 27, 2008
    #5
  6. Nik Coughlin

    dorayme Guest

    In article <ggks0l$5eq$>,
    "Nik Coughlin" <> wrote:

    > > 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


    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!

    --
    dorayme
     
    dorayme, Nov 27, 2008
    #6
  7. Nik Coughlin

    Nik Coughlin Guest

    "dorayme" <> wrote in message
    news:...
    > In article <ggks0l$5eq$>,
    > "Nik Coughlin" <> wrote:
    >
    >> > 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

    >
    > 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.


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

    > Good luck!


    Thanks!
     
    Nik Coughlin, Nov 27, 2008
    #7
  8. Nik Coughlin

    C A Upsdell Guest

    Nik Coughlin wrote:
    > 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.
     
    C A Upsdell, Nov 27, 2008
    #8
  9. Nik Coughlin

    Nik Coughlin Guest

    "C A Upsdell" <> wrote in message
    news:ggkvck$1je$...
    > Nik Coughlin wrote:
    >> 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.


    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.

    > 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, Nov 27, 2008
    #9
  10. Nik Coughlin

    Nik Coughlin Guest

    "Nik Coughlin" <> wrote in message
    news:ggl0a2$a70$...
    > "C A Upsdell" <> wrote in message
    > news:ggkvck$1je$...
    >> Nik Coughlin wrote:
    >>> 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.

    >
    > 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/
     
    Nik Coughlin, Nov 27, 2008
    #10
  11. Nik Coughlin

    dorayme Guest

    In article <ggl0a2$a70$>,
    "Nik Coughlin" <> wrote:

    > > 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.
    >


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

    Cascading Style Sheets
    By Lie & Bos

    might be the go.

    --
    dorayme
     
    dorayme, Nov 27, 2008
    #11
  12. Nik Coughlin

    Andy Dingley Guest

    On 27 Nov, 00:00, "Nik Coughlin" <> wrote:
    > 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...
     
    Andy Dingley, Nov 27, 2008
    #12
  13. Nik Coughlin

    Jan Faerber Guest

    Andy Dingley schrieb:

    > Really this ought to be up on wikibooks...


    wiki sucks
     
    Jan Faerber, Nov 27, 2008
    #13
  14. Gazing into my crystal ball I observed "Nik Coughlin"
    <> writing in news:ggknu8$vu9$:

    > 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


    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Nov 27, 2008
    #14
  15. Nik Coughlin

    Guest

    On Nov 27, 12:00 am, Nik Coughlin wrote:
    > 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.
     
    , Nov 27, 2008
    #15
  16. Nik Coughlin

    Nik Coughlin Guest

    "dorayme" <> wrote in message
    news:...
    > In article <ggl0a2$a70$>,
    > "Nik Coughlin" <> wrote:
    >
    >> > 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.
    >>

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


    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, Nov 27, 2008
    #16
  17. Nik Coughlin

    Nik Coughlin Guest

    "Andy Dingley" <> wrote in message
    news:...
    > On 27 Nov, 00:00, "Nik Coughlin" <> wrote:
    >> 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...


    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, Nov 27, 2008
    #17
  18. Nik Coughlin

    Nik Coughlin Guest

    "Jan Faerber" <> wrote in message
    news:492ea17a$0$2622$...
    > Andy Dingley schrieb:
    >
    >> Really this ought to be up on wikibooks...

    >
    > wiki sucks


    Why?
     
    Nik Coughlin, Nov 27, 2008
    #18
  19. Nik Coughlin

    Nik Coughlin Guest

    "Adrienne Boswell" <> wrote in message
    news:Xns9B63745E052FBarbpenyahoocom@69.16.185.250...
    > Gazing into my crystal ball I observed "Nik Coughlin"
    > <> writing in news:ggknu8$vu9$:
    >
    >> 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.


    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, Nov 27, 2008
    #19
  20. Nik Coughlin

    Nik Coughlin Guest

    > <> wrote in message
    > news:...
    > On Nov 27, 12:00 am, Nik Coughlin wrote:
    > > 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.


    Yes. Especially for someone coming from a graphic design background, this
    is important.
     
    Nik Coughlin, Nov 27, 2008
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Woolly Mittens

    How to teach coworkers DIV & CSS?

    Woolly Mittens, Apr 20, 2004, in forum: HTML
    Replies:
    26
    Views:
    921
    nice.guy.nige
    Apr 22, 2004
  2. tianyi

    Can someone teach me? Thx!!!

    tianyi, Nov 9, 2004, in forum: C Programming
    Replies:
    6
    Views:
    523
    tianyi
    Nov 9, 2004
  3. mich
    Replies:
    3
    Views:
    307
  4. M
    Replies:
    2
    Views:
    498
    P E Schoen
    Apr 3, 2011
  5. Menghsiu Lee

    can someone teach me this?

    Menghsiu Lee, Jul 21, 2012, in forum: Python
    Replies:
    6
    Views:
    217
    Terry Reedy
    Jul 23, 2012
Loading...

Share This Page