HTML/CSS - Lesson 1

[kabaros]

https://code-your-future.github.io/syllabus/html-css/lesson1.html

Based on the discussions on #2

[NateWr]

#17

Some changes to the first lesson which fleshes out the lessons. My main goal was to ensure each topic was explained in simple language and backed up by exercises we can work through with them.

I'm going to work on a mentor's guide to accompany this lesson now before moving on to lessons 2/3. @kabaros take a look and merge where appropriate.

[kabaros]

Hey @NateWr .. I think we should start something very basic at lesson 1, like this https://www.w3schools.com/html/html5_syntax.asp - just covering how the syntax looks like and so on. While most people are comfortable with all of that, there might be few who are still confused.

(I know I diss'ed w3schools but this is the best link I found)

[NateWr]

I was under the impression that much of this will have been covered during their application process, in some of the introductory courses they will have completed. Maybe this is something we can address on a case-by-case basis through their homework assignment, correcting syntax and style issues as they make them?

I'll try to look for a better introductory syntax guide that we can include as a resource. That W3Schools link contains a lot of out-dated information.

[NateWr]

This looks like a really promising resource: http://marksheet.io/

Chapter 2 looks like it could be good reading material to cover these basic syntax and style guide issues. Should we maybe assign it for homework after Week 0?

[NateWr]

btw, it looks like marksheet was built by someone in London: http://jgthms.com/ Maybe one of our London folks knows him?

[NateWr]

Some notes from teaching HTML/CSS Lesson 1 in Glasgow:

• Explaining :focus, and keyboard-based navigation, was a challenge. Tim recommended we consider using forms to illustrate this.
• Jumping into Semantic HTML at the top was tough. Students struggled to navigate the large HTML page, and there's genuine ambiguity around the best place to put some of the tags in the example project. It might be better to introduce this with a stripped-back example.
• We skipped the section on inheritance. This class introduces several abstract concepts (selectors, cascade, box model, semantic HTML). Spending time on practical things, like CSS properties, might help break up the heavy cognitive load.