My thoughs about the html css beginners

[bitboxer]

I tried this yesterday with some girls at the RailsGirls Workshop and after doing it with them I sadly must say: this tutorial needs serious work. The didactic behind it is not very good 😭 . They coudn't work on it for more than 10 minutes without help from a tutor.

Things I would love to see changed:

• You need to explicit say what the reader has to do. At first it should say "open the text editor, create a new file". After that you should give a small working html to copy and paste and explain what it does. The girls didn't know what to do at the beginning or where to copy the stuff. You need to show a basic structure at first so that everyone sees the nesting. It was totally confusing and not doable without a tutor. Take the reader by a hand and explain everything. They need clear language from you what to do.
• Do not do a small example html and a project afterwards as 2nd step. Say at the beginning what you want to build and build it with the reader. One page at a time. The "okay this is done, let's do a project with this" is confusing. It's an unnecessary break in the flow.
• Some css examples don't match the HTML and some examples (div in a h1?!) are confusing for the reader
• Don't put too much stuff into each step. margin-left, float, list-style-type: none...all in one step and explaining it all?! Why not something simple and step by step add stuff? And I really would remove list-style-type from the first day of learning HTML.
• The layout of the example app is way too complicated. aside, section, navbar...and all without real explanations...I would change this to a much much easier thing. Why not just p, a, h1, div ? You can do lot's with that on your first day. And don't forget: don't add more than one unknown element into each example and explain it before adding the next one.
• You shouldn't do a layout with display: inline and display:inline-block, width: 44% ... as the first step learning HTML.
• The clear: both element is bad practice and should NEVER be teached. It breaks the "HTML should not contain elements that are needed for the style" rule. The better solution with the :after element is the way to go. But I don't think this should be in the first day of learning HTML. As I said: dumb it down a little. You can do lot's of stuff with a few margins, colors, paddings and float left/right.

[xMartin]

I basically agree with your criticism and suggestions. Especially the layout thing which we already discussed yesterday with a few coaches. Let's open issues for each topic and work on it.

Just want to point out that I don't find it to be that terrible that with this material learners need a lot of help. True, the material should be improved. Still, providing a lot of personal support while learning is an important aspect of how we run workshops and is more important to us than excellent material.

[bastianalbers]

Thanks for the feedback! You basically addressed everything we discussed to change. The layout stuff is too much and also just...wrong. I'd say we restructure it a bit so the result will be a single-column layout that looks good. That way we can spare them of floats completely and avoid confusion about all the weird calculations you need to do with the box model.

I completely agree with the first steps thing: i saw some of them confused as to where to save files and so on. A clear path should exist for that so they can get through to what they really need to learn quickly.

I also agree with that the divide between project and preparation pages doesn't make much sense. We discussed this before the workshop, but like with everything else no one had time to address this and there was some dissent about it. I think it would be much nicer to not throw away anything on the go.

[bitboxer]

@xMartin the problem with bad material: the girls got confused and thought the problem was that they haven't understood it correctly. That leads to unnecessary frustration. We want them to have fun and a learning environment that removes as much frustration as possible. If we can't offer that the amount of people continuing this path will be not as many as it could (and should).

[xMartin]

@bitboxer We're on the same page.

[Ivoz]

I've been busy trying to get a translatable version of this up online (so that german translations contributed don't just get left in the dust when its improved), but I'm hoping to work on the content soon as well.

[timaschew]

I created a feedback form for the first day (html+css), here are the results: https://docs.google.com/spreadsheet/ccc?key=0AhBhpxgEmPGPdFB1R3hScjZYU2h6MDNzMkNNa2RUZXc&usp=sharing

Furthermore I also some points to optimize in future:

• there should be a completely finished page with source code, at least for the coaches to know what the result should looks like and to compare it with the students code. This is really problem when coach A say X and coach B say Y and I got this situation at rails girls.
• the coaches need to be briefed before starting coaching (last year at the javascript workshop at immoscout this was very good!) but this time at rails girls there was nothing.
• The other coach on our table do some things which were not really productive:
  • show at the first day a rails book and give it in a circuit
  • wrote some links at the board, w3schools included 🌋 why? the materials have already some great ressources!
  • show a website on her computer with an fancy music equalizer to all students while they were reading and coding the materials

You need to explicit say what the reader has to do. At first it should say "open the text editor, create a new file".

Yep, my student had this problem, too.

Silly question: Why we don't use codecademy materials?

[Ivoz]

Silly question: Why we don't use codecademy materials?

The main reason, AFAIK is because our materials are generally tailored to being taught in a specific time period, in a workshop format. Whereas CodeAcademy is designed to be completed at someone's leisure and may take too long or be too short.

That is not to say one should immediately disregard all teaching materials around simply because they are not designed with OTS' primary teaching format in mind, if you think any would work well in a future session you should probably suggest that to your chapter and/or on discourse :)

[xMartin]

@timaschew Thanks a lot for doing the feedback! About the coaches briefing: yes, that should be done. Seems it got lost in the organization. I thought we had it planned.