HTML & CSS module review

[LucyMac]

What is the hypothesis?

The HTML & CSS module content needs updating - it uses old, confusing material / exercises, and I have personally been using my own material for some time now, which I keep iterating on. Having taught this module 3 times, I have learned a fair amount about what works and what doesn't, and I'd love to share my thoughts and get a conversation going.

Why is this important?

Some teachers have highlighted issues with the current syllabus, and for me the syllabus does not reflect the way I teach the module, so I think it's worth looking over the topics we want to teach and why, and looking into the material we use to support the lessons, as well as the exercises.

An important point is how 'basic' we start. Input from other cities might be relevant here - in London we've had the issue that a lot of students find week 1 too basic, while others struggle. The uneven level of the class has always been a challenge.

Supporting Resources

My own personal lesson plans - apologies they look a mess:
Week 1: Semantic HTML and CSS
Week 2: Responsive web development, media queries, thinking 'mobile-first'
Week 3: Using a 12-column grid system and how Bootstrap implements this

[40thieves]

Copying a comment over from Slack: some while ago I started an effort of translating the notes linked above to the syllabus. The branch I made is here: https://github.com/CodeYourFuture/syllabus-archive/compare/c61ce82..281d269. Unfortunately this was written on the old syllabus, and with some major merge conflict problems. We might be able to salvage of some of the files as a starting point for new work.

[illicitonion]

Thanks for putting this all together and sharing, @LucyMac!

I love week 1, and I think week 2 makes a lot of sense. I'd love to see us flesh those out into full syllabus pages (after checking with folks from other cities), with more background (right now I suspect a lot of the "why" would come across really well when you are delivering the class, but it's not down on paper for others, like "why semantic HTML?", which will naturally come out when syllabus-ising!)

I'm not quite as sure about week 3... How much weight do you give to each of the goals:

1. Learn about grid systems
2. Learn about frameworks in general
3. Learn about Bootstrap specifically

?

It feels like we can explain grid systems reasonably well with just flexbox, without Bootstrap, and I'm not sure Bootstrap pulls its weight to justify a full week... I think I'd probably lean more towards a week of "let's do lots of flexbox, and try to think about it at a higher level"... On the other hand, I think the best looking exercises I've seen later in the course (e.g. TV episodes, hotel page) have used bootstrap... How do you feel?

[LucyMac]

@illicitonion apologies for slow reply. I would weight each of those goals in that exact order - however I would stress that by 'grid system' I include the 12-column grid and therefore how that translates in a CSS framework (using col-... classes). So they sort of go hand in hand.
This is the first time I've taught Bootstrap - in the past I had created a simplified grid system which works just like Bootstrap but doesn't distract students with all the other Bootstrap stuff. This came with pros and cons:

Pros of using 'simple grid' rather than Bootstrap:

• Teaches the concept of importing existing, pre-written CSS that is 'ready to use' and will make coding faster and UIs more consistent (also that it should not be tampered with!)
• Learn to use within the context of a 12-column grid system with 'column' classes as well as the need to wrap each block inside a row class and the purpose of containers
• Very similar to Bootstrap and would translate well into other formal frameworks easily / would prime students to understand other such frameworks which they might come across in their jobs.
• Strips out just the grid and doesn't clutter with other utilities: Bootstrap offers loads of other CSS for spacing, forms, buttons etc which distracts students from writing their own styles. Bootstrap also has a load of JS components which also distracts - although it could be argued it gives the more ambitious students an opportunity to play around with JS components like hamburger navs etc.

Cons of using 'simple grid' rather than Bootstrap

• Limited documentation or resources. The real Bootstrap has complete docs and LOADS of resources online to help students - who on the whole all struggle with the container/row/col concept and usage rules and need direction for their homework.
• Students don't perceive it as a CSS framework in its own right because it's not 'official' / published etc.
• Class 6 students were really positive about the addition of Bootstrap to the syllabus, as opposed to the 'simple grid' version they learned last year - those who were TAing that day voiced a lot of excitement and support for teaching Bootstrap going forward.
• It's nice for students to be able to list Bootstrap on their CVs / portfolios (although they'd be just as well off saying they had experience with 'CSS frameworks and responsive grid systems'!)

[LucyMac]

Thoughts/ideas if deciding to continue teaching Bootstrap:

• Explicitly tell students to use Bootstrap for layout only / ban students from using anything other than the Bootstrap grid system? Seems harsh and hard to justify, though would make things a lot easier.
• Or, just stress the importance of styling your own buttons, form fields etc. and to not rely on Bootstrap for anything aesthetic.