Learn css

HTML & CSS
1

Hey,

I’m throwing around the idea of a site to teach CSS.
Not that I am the best css-er in the world, but I haven’t found a good resource to teach css to beginners and get people up to speed quickly. The reference here is great but I’m thinking of more interactive sequenced tutorials where people can write css and see the demos updated whilst being pointed in the right direction.

CSS is hard. It takes a long time to get up to speed and unlike other languages there’s isn’t really room for entry level coding. You need to know how a lot of different types of rules work together, you need to know about specific browser quirks etc… The current browser scene is changing at a faster rate than in the past too so you also have to be interested enough in continued learning and research.

I suspect a lot of designers/developers give up and focus on other disciplines or technologies.

So, what would be a logical progression of ideas to teach?

Without much thought I came up:

  • A very brief intro into CSS syntax, class id element selectors and where styles go.
  • Making use of pre-written css by writing HTML
  • Positioning - height, width, float
  • box model - padding, margin, border
  • colours and backgrounds.
  • The cascade
    …
  • working up to Hacks, filters and browser quirks.

Do you think it’s a worthy idea to pursue?

2

Well, a Google search for “CSS Tutorial” gives 16M+ results, so if your goal is to become a leading site you’ll have your work ahead of you.

However, IMHO, if CSS is truly a great love and interest of yours, I’d say go for it. Even if you don’t take over the niche, you should be able to get some following and interaction. Just be certain you have enough drive to keep you going no matter what and sooner or later you’ll get somewhere with it.

3

Hi Mark,

That’s not a bad list. Personally, I would reverse items one and two. It’s worth starting with simple HTML elements, pointing out that their default look (such as large, bold H1s) is determined by a set of browser styles.

Then you go on to show how you can override these styles with your own CSS. A dramatic way to start would be to demonstrate the effect of

* {padding:0; margin:0}

… and then perhaps

h1, h2, p {
    font-size: 1em; 
    font-weight: normal
}

That’s my “teacher’s” outlook, anyhow.

4

but I haven’t found a good resource to teach css to beginners and get people up to speed quickly

Hi Mark,
As far as a basic beginners resource I often point people to Ben’s site.
http://www.cssbasics.com/

The reference here is great but I’m thinking of more interactive sequenced tutorials where people can write css and see the demos updated whilst being pointed in the right direction.

You do realize that the SP Reference has a live playground for a lot of the properties. Just click the “Play” tab at the upper right of the page.

For example, here is a live demo of the background property.

Do you think it’s a worthy idea to pursue?

If you want to cover everything thoroughly then you are crossing over from a beginners resource to a complete reference for all stages of css knowledge levels. That would get quite involved, but if it something that you have the time to do and you are passionate about it then by all means give it your best shot. :slight_smile:

5

Thanks guys,

The Reference here and Ben’s site are very similar to other resources I have seen on CSS. I don’t mean any disrespect by that - I think Paul and Tommy have done an excellent job on covering all the details and touching all bases. I just think if the aim is to learn CSS from scratch it could be a lot simpler. They all require you to do a lot of reading and a lot of small bits of learning without much reward. The concept I have in mind will get to the heart of what designers would really want to be able to do with CSS and not bother will all the details.

6

Unfortunately the devil is in the detail :slight_smile:

However, I think that perhaps if you concentrated on layout, positioning schemes etc first and brought the required details into play where appropriate you could find a middle route.

The online reference that Tommy and I did wasn’t meant to be a tutorial as such but more a ‘programmers reference’ type of book that you could dip into and see how something is supposed to work and also see where it doesn’t.

It was never meant to teach you how to create a whole webpage although there are tutorial aspects to it in some places.

I think you actually touched on the real issues in your introduction:

You need to know how a lot of different types of rules work together, you need to know about specific browser quirks etc.

There is a steep learning curve with CSS and until those issues are understood then it means that beginners can’t actually start to do anything constructive. A lot of beginners think they have the right to create a webpage from scratch without any effort. Unfortunately, as with most things of worth, it does take some groundwork first.

I think that there is room for a site that teaches layout techniques specifically so that beginners can at least have something they can work with quite early on. I was commissioned to do an article on converting a PSD into css/html but it ended up taking 4 articles and could have been a book in it’s own write (to quote John Lennon :)). So even taking something relatively easy ends up encompassing a lot of aspects to produce the finished product.

You should probably look at some existing css sites and identify where you think they are lacking and then concentrate on those areas. If you do it well then there will be room for another css site :slight_smile:

7

Of course you are right, and I know about the learning curve - I want to to try to lower the entry barrier and see how low designers can limbo.

I have had what alcoholics refer to as a moment of clarity :wink:

I’ll post an example of what I have in mind soon and get your feedback, then all will become clear.

8

Personally the problem with all the css tutorial is that they don’t apply to real cases. And professional CSS sites are too hard to understand.

9

Maybe if you take a “game” approach to the css possibilities to display a given html.

First level could be a head-content-footer html to play with.
Give a set of rules to apply interactively to the elements to achieve the result.

Next level could add a navbar in the html.
Another level could add text in the html to float clear of an image.
Then maybe the navbar could be changed into a sidebar.

Completed level adds rules to your weaponry. The arms could be like positioning, display, margin-border-padding, background, etc. Maybe the ammo-rules should be predefined for the level to be applied by buttons to the correct target element.

Of course there should be a bonus round after reading an explanation why the goal was achieved.

I would love scoring. :smiley:

10

Okie, here’s a start: Use Firefox for now please.
http://yellowshoe.com.au/learncss/

My premise is that:

  • People are smart enough to join a few dots without needing to be explicitly told.
  • I think people will learn faster and remember things better if they are not given the answers directly but have to play with something and make some discoveries.
  • People from a design background will respond and keep at something if there’s some visual reward.
  • Books like Jeffery Zeldman and Dan Cederholm’s are the best current resources for learning web design. But because they’re not interactive a website will be better.
  • The details aren’t important up front.

I realise that I haven’t actually taught any ‘real css’ in this first lesson but the first thing is just to familiarise someone with html and how styles can be applied.
I think this simple demo can familiarize someone with html and infer what CSS can do without explicitly saying so.

What do you think?

11

That’s a cool idea too, though I don’t know it’s the audience I’m aiming at - I don’t think designers would be that interested in a game. They want to know how to get what they have in their minds onto a web page.

12

Hi Mark,

That’s a good start :slight_smile:

I think you need to make it clearer where the editing takes place as I was clicking all over the shop before I realised. You only mention briefly to click in the yellow area but that is above the instructions for “the task”.

Otherwise it looks good.

Can you build in error checking so that only valid code is allowed or that errors are highlighted? (Could be quite task I know)

13

Yes, I realise I haven’t got to hard part yet :wink:

Point taken, I might make the task points brief and fixed on the side as well as adding a ‘Editable’ Flag or something hanging off the editable area.

Hmm, I’ll see what I can find in the way of client-side parsers. I imagine I could make it check well-formedness by seeing if I add the content to an XML document I can get at it.

In any case I’ll be getting to validation pretty short in the piece so they won’t be able to be led astray too quickly.

14

This looks interesting: http://ejohn.org/blog/pure-javascript-html-parser/

15

Maybe you plan on including it in a later lesson, but I’d include some other properties for #media like color, font properties etc so that people can get an understanding of how the cascade works.

16

If you’re going to accept user supplied input, be careful with “url:”.
You don’t want anything like
http://my.blackhat.site/really_javascript_code.css
sneaking in.

In fact, instead of filtering out potentially mal input, you would be better off to only allow certain modifications. i.e. dropdown select options

17

Thanks, I’ll keep that in mind. I haven’t found the need to save the user input at this stage, Each lesson will be small enough that the users won’t mind losing the changes - I’ll aim to keep it purely client-side

I found a awesome syntax highlighter too http://shjs.sourceforge.net/
Oh how I love open-source :slight_smile:

18

Ok, so the million dollar question: http://yellowshoe.com.au/learncss/1.html

Do you think people would be able to pick this up if they don’t know what a p inside angled brackets is, or am I asking too much?

19

That’s a difficult question to answer and you probably need to find a beginner to do some user testing for you :slight_smile:

I’m guessing that you may need to go into a bit more detail or have a link somewhere near the top that identifies the structure explicitly. e.g. what is a “tag”? What is an element? what’s the difference between the two? etc.

If you are assuming no understanding of html and css then it may be a bit of a jump to start manipulating code like that. Maybe a help system of some sort?

20

Never assume anything. An absolute beginner will have no concept of markup. They are used to typing paragraphs, such as in Word, with no P tags. It’s worth at least telling them why markup is needed at all…

(I’m coming at this not only as a teacher of 5-year-olds and above, but as one who is trying to teach computer basics to a septuagenarian mother…)