Your experiences learning HTML and CSS

mccafferty

I am undertaking a postgraduate course in E-Learning Design and Development in UL. I'm creating a course on HTML and CSS for my final project so I would be interested in hearing about your experiences with learning HTML and CSS.

What did you find most difficult? How could the difficult aspects have been better explained?

I'm interested to hear from beginners, experts and anyone inbetween.

If you have ten minutes to spare I've created a questionnaire with google docs, if not I'd love to read your replies here.

http://spreadsheets.google.com/viewf...vEPqXFNj0gObdA

Disclaimer: I've posted this message on the creative ireland message boards as well.

pauldiv

You dont give out much.

If you are designing a course then you are obviously a css expert and if so where can people see examples of your work?

What about the course? where, who, when etc. Or is it all just theoretical?

CSS is hard to teach and the best way to learn it is to sit down, concentrate and get to work. HTML you can learn id a week but CSS? - try a year or two.

I wont answer your questionaire because I don't know anything about you.

mccafferty

It will be an online E-Learning course (I'm doing an MA in E-Learning Design and Development in the University of Limerick). We have to create an E-Learning course for our final project. I decided to create a Beginner's HTML and CSS course. I am currently writing up a project proposal, which is due next week, and part of that is a needs assessment and audience analysis. I will be creating the course from February and it should be finished sometime in the Summer.

I will provide a link to the finished course to anyone who wants it.

I'm not quite a CSS expert, I'm a pretty competent intermediate. I'm more than capable of creating a beginner's HTML and CSS course. Any areas that I may struggle to explain adequately at the moment (the intricacies of Em based layouts, for example) I will be able to by the summer. I'm fully aware that CSS is difficult to teach, it may take a couple of years to learn but you have to start somewhere, right? I'll be focusing creating a foundation from which the learner can build their knowledge of CSS.

The course will have two main modules, HTML and CSS, and a third module on Accessibility. Throughout the course the learner will be building a simple website. I'm still not sure whether a personal blog type design or a corporate design would be best, though they should be able to apply the techniques they learn to any type of design.

I will be marked on my ability to apply various principles of instructional design, interaction design, usability etc.

pauldiv

Thats a very interesting project proposal and a challenging one. Have you thought about what format it might take?
Are you a programmer? Can you do decent graphics work?

At this stage I would be evaluating my skill set and setting limits to the scope of the project.
By setting limits you would know how much work you need to do to pass the course.
You could plan the project so that it will be able to adapt to incremental developments in future.
This approach could be suitable if you have aspirations of developing the course further after you graduate.

For the project I want to stick to HTML, CSS and Web Standards and exclude, but give a quick mention to: Javascript,
Accessibility and Browser issues.

For practical assignments you could maybe stick to web standards and use something like the Yahoo User Interface Library (YUI) for
page layouts because YUI works in all grade A browsers and would avoid you having to waste time explaining to students why a layout
does not work in IE. These are real world problems and could be justifiably omitted from the course because you would be sticking
to standards and proven technology. Microsoft is the problem and the students should not be abused by being subjected to the
disgraceful lack of internationally agreed browser standards among browser makers. Learning should be productive and fun.

There are lots of ways such a project could be delivered. I once used the FAS E-College to study
the Comptia A+ Computer technician course and found it was very good. It made heavy use of 2D and 3D diagrams with
a textbox along the bottom of the screen giving supplementary information to support the diagrams.
There was a test your knowledge section at the end of each lesson where you answered some multiple choice questions
and you were shown your score. You could test your progress by taking the test every other day and compare your scores.

I initially learned CSS using notepad and reading from blogs and books.
It was heavy going but I am glad I put in the time even though I often felt like giving it up for good.

Tools like Web Developer and Firebug changed the whole game for me.
The visual approach gives a lot of power to someone who is experienced but it would be difficult for a beginner because their is a big gulf
of execution and evaluation with such a tool. A learner would maybe be better off learning CSS syntax and some theory using simpler materials
before being introduced to the power of Firebug.

I feel that interactive visual learning is a great way to teach and for that reason I developed an interactive Java application
a few years ago for teaching electronic circuit theory. It had a rich interface with controls for changing circuit voltage and resistance.
Users would interact with a circuit using slider controls and be given a real time read out of the updated circuit values.

The application was developed in a Java tool called BlueJ which is part graphical programming tool and part coding editor.
This tool was developed at the University of Kent especially for teaching Java programming and it is the best tool out there for pure
programming enthusiasts. It takes a genius to make something complicated look simple and and the BlueJ team score very highly here in my opinion.
It's worth looking at purely out of interest.

With this tool you create objects that are represented graphically on screen. You interact with each object by right clicking on it and
choosing a task from a context menu. This feature was so good that Microsoft copied it for Visual Studio where they now call it a UML tool.

If something so nice and simple could be developed for learning CSS it would very popular.

p

What's the final version of this going to be. Online course or website? I think you could generate quite a bit of traffic by creating a decent site aimed at teaching HTML&CSS for beginners. There's very few and woudl be an excellent resource. Could even make some money.

mccafferty

Thanks for the great suggestions Paul. To answer some of your questions:

pauldiv wrote: »

Thats a very interesting project proposal and a challenging one. Have you thought about what format it might take?
Are you a programmer? Can you do decent graphics work?

The format of the course will be 3 modules (HTML, CSS, & Accessibility), with 5 or 6 units in the first two, and 2 or 3 units in the 3rd. Each unit will have between 3 and 6 lessons, with a final quiz at the end. Each lesson will have between 5 and 10 screens of content. There will be a blended learning aspect to the course in that the learner will be expected to be building the website as the course progresses.

I'm not really a programmer, though I have been learning Django, the python framework, in my spare time. I'm at the stage where I can make a simple blog. As I've very little spare time at the moment I don't know if I'll know enough to run my course on Django. I'll probably end up using something like Expression Engine or Textpattern for the backend.

I like to think I have an eye for design and my graphics work is decent enough I think. I may suffer a little from being a jack of all trades.

Here's one idea for the interface. I'm well aware that there's more than a few flaws with it (the search box is not obvious, it should be clearer which unit you're on etc). I've a few other, less extravagant, mockups done so far but I won't really be putting a whole lot of time into the interface until Februrary or March, but I wanted to get a few ideas out of my head.

You could plan the project so that it will be able to adapt to incremental developments in future. This approach could be suitable if you have aspirations of developing the course further after you graduate.

As far as I'm aware, the course will be the copyright of the University once I submit next summer so I don't think I'll be able use it commercially. I do plan on hosting it as a free course if the University don't object and if I think it would help people starting out with HTML and CSS.

For the project I want to stick to HTML, CSS and Web Standards and exclude, but give a quick mention to: Javascript,
Accessibility and Browser issues.

I don't think I will go near Javascript in the course. Firstly, I'm not proficient in it, I've only dabbled with jQuery, and secondly I don't think it's essential for a beginner to know a whole lot about it. Once they are comfortable with HTML and CSS they can dip their toes into Javascript. If I was to develop the course further I could then add a module on Javascript but it's out of the scope of the project at the moment.

For practical assignments you could maybe stick to web standards and use something like the Yahoo User Interface Library (YUI) for
page layouts because YUI works in all grade A browsers and would avoid you having to waste time explaining to students why a layout
does not work in IE. These are real world problems and could be justifiably omitted from the course because you would be sticking
to standards and proven technology. Microsoft is the problem and the students should not be abused by being subjected to the
disgraceful lack of internationally agreed browser standards among browser makers. Learning should be productive and fun.

I've briefly looked at the YUY interface library before. I must go back and have another look. Whatever code I provide as part of the course will be cross browser compatible. I'll explain any IE hacks I use, though I'll keep these to a minimum.

Tools like Web Developer and Firebug changed the whole game for me.
The visual approach gives a lot of power to someone who is experienced but it would be difficult for a beginner because their is a big gulf
of execution and evaluation with such a tool. A learner would maybe be better off learning CSS syntax and some theory using simpler materials
before being introduced to the power of Firebug.

I'll definitely make the learners aware of tools like Firebug at some stage during the course.

I feel that interactive visual learning is a great way to teach and for that reason I developed an interactive Java application
a few years ago for teaching electronic circuit theory. It had a rich interface with controls for changing circuit voltage and resistance.
Users would interact with a circuit using slider controls and be given a real time read out of the updated circuit values.

I'll use visual aids like diagrams wherever they will help explain a concept. I'll include interactive elements using jQuery (or flash) where appropriate, e.g. I can see how explaining the box model might be helped if the user could interact with a diagram to adjust the padding, margins, bordersetc and see how this affects the elements width.

The application was developed in a Java tool called BlueJ which is part graphical programming tool and part coding editor.

I'll take a look at that, thanks.

p wrote:

What's the final version of this going to be. Online course or website? I think you could generate quite a bit of traffic by creating a decent site aimed at teaching HTML&CSS for beginners. There's very few and woudl be an excellent resource. Could even make some money.

It will be an online course in the form of a website. As I said at the beginning of this reply, the University will own the copyright of the course so I won't be able to do anything commercially with it. However, it may be helpful as a portfolio piece when I'm looking for a job next summer.

p

Good luck with the project. I think you should try do something commercially with it, just tell the uni you'll give them a cut if it's a success. Seems like a waster otherwise. You've very little to lose.

Also, once comment out the structure, I think it's a little bit silly to teach HTML, CSS then Accessibility. Accessibility is not a seperate topic, it's just something that should be comes naturally if you're teaching best practice HTML.


Again, I can't recommend the Heads First XHTML & CSS book enough. That is structured so well you should use all it's good ideas.

Good luck & let us know how you get on.

mccafferty

p wrote: »

Also, once comment out the structure, I think it's a little bit silly to teach HTML, CSS then Accessibility. Accessibility is not a seperate topic, it's just something that should be comes naturally if you're teaching best practice HTML.


Again, I can't recommend the Heads First XHTML & CSS book enough. That is structured so well you should use all it's good ideas.

I know what you mean about Accessibilty not being a separate topic. I'm in two minds whether or not to merge it with the other modules or not. Maybe it would work better as a unit in the HTML module. Either way I'll be covering basic accessibility throughout (alt text etc) but I want to focus on it in more depth at some stage during the course.

A couple of people have recommended the Heads First book to me so I'll definitely have a look at it. Thanks.

pauldiv

I like your mockup Gary and think it has a lot of potential. I reckon you will end up producing something that is very good because you seem to be the type of guy that plans a project well before spending time developing it.

Your questionaire should get you some good data about potential users.
As Usability is one of core areas that you are being tested on then you will be able to show that you understood the profile of the ideal user before going into development.

CSS and HTML would be starters for sure but Accesibility is one of those topics that seems to be causing you some uncertainty at this early stage.
You will find a place for Accesibility eventually so you should not worry too much about it at this time. The project can still be a great success even if Accesibility is incorporated into an existing module rather than a being added as a complete module in it's own right.

I think that accesilibily does not really sit well with the other topics and looks slightly un-inspiring and out of place sitting alongside CSS and HTML on the Menu. Imagine a newbie finds the site and sees the following. You can laugh if you like but at this stage we are only brainstorming:

University of Limerick

HTML - CSS - JAVASCRIPT

"build a complete standards compliant web site in three easy modules. Learn at your own pace and develop your understanding of current internet technologies".

You could then promise them that by doing your course that they are going to end up building a great looking web site if they do the modules.

This would be a huge incentive for people and if there was something similar available when I was learning then I would have been very interested.

You could maybe even design the course so that the users build the same site that they visit for their lessons. In that case the tag line above could say
"build THIS complete standards compliant web site in three easy modules".

All the web pages, stylesheets, javascript files and graphics that you put together during the project could them be downloadable for people to start taking the lessons as they begin build the site. That way they would be taking a practical tutorial approach. For people who do not have time to do the full course they could come to the site and take a few quizzes.

I read earlier that you have dabbled in jQuery. Think of the effect it would have on the users if you replaced Accesibility with that. Would they be impressed? I would find that out soon but I suspect that they would because people love things that they can interact with.

I hope the above comments have help in some way.

mccafferty

Thanks Paul,

Yea I've decided to drop Accessibility as a module. Accessibility will be considered throughout and I'll include a unit looking at the finer details at the end of the HTML module.

As for a Javascript module, it's definitely something I'll put on the ToDo list. I think I'll stick with just HTML and CSS for the moment as I've already started writing up the proposal which is due on Friday. I can always add a Javascript module after completing the initial two modules. I can see how it would be a much more attractive course with that module but I'm trying to limit the scope of the project for the moment.

Thanks again for your feedback, it's been very helpful.