HTML Learning Objectives Discussion

Learning objectives for HTML/CSS/Git module

CYF do not currently have learning objectives for the HTML/CSS module (any city's version).

Here are the HTML/CSS topics studied.

I've started to add some suggested learning objectives under each of these topics.

These are a very rough start.

• The questions come primarily from @NateWr's progress-tracker documents.
• We are really missing statements about what we want the students to be able to do, in practice.
• The learning objectives under a given topic may well be achieved over the multiple weeks of the module, rather than in the first week the topic is introduced.

Week 1

HTML Syntax

tags vs attributes

• Can answer: What is a HTML attribute?

Forming a hierarchy by nesting tags

• Can answer: What are "parent" and "child" elements?
• Can: write a simple html fragment, correctly observing syntax when nesting one tag within another.
  • e.g. "Create an article which contains a h2 header and two p (paragraph) tags." [detail the text that the tags should include]

Semantic HTML tags

• Can answer: What is semantic HTML?

Separation of concerns (HTML/CSS/JS)

• Can answer: "Why do we separate HTML, CSS and JavaScript?"

Linking Resources

• Can: recognise a link element linking a css file, and can explain its purpose.

CSS Selectors

• Can answer: What is a selector in CSS?
• Can answer: What is the difference between a tag, class, and ID selector?
• Can answer: What is an attribute selector in CSS and how does it relate to the HTML code?
• Can: recognise some simple attribute selectors and state their purpose.

CSS Properties

• Can answer: What is a property in CSS?
• Can answer: What is the cascade?

The Box Model

• Can answer: What is the CSS box model?
• Can answer: What properties modify the box model in CSS?

Week 2

Responsive web design

• Can answer: What is it?
• Can answer: what are some ways we might want to have a layout change as we reduce or increase screen size?

Media queries

• Can answer: What is a media query?
• Can answer: When would you use a media query?
• Can answer: How can I test how a website looks on different screen sizes?

Flexbox

• Can answer: What is flexbox?
• Can answer: When would you use flexbox?
• Can answer: What are the different ways to arrange elements using flexbox?
• Can answer: In what ways can you position individual items using flexbox?
• Can answer: When would you not want to use flexbox?

Week 3

Note:

Forms

What are forms?

• Can answer: what are HTML forms used for?

The HTML Form

• Fields
• Labels
• Buttons

• Can answer: what happens when the user clicks on a form's Submit button?

• More Field Types

• Can: identify the type of form input likely in use in a sample form.
• Can: select the correct form inputs when building a simple form.

• Fieldsets
• Form field Attributes

• Can answer: What's the purpose of a form field's required attribute? Its readonly, value, or checked attributes?

• Can answer: When should you use GET or POST as a form's method attribute?

Accessibility

• Can answer: What are some ways to make an HTML form more accessible to someone who needs to use a screen reader?

On Git

During this module when it is presented first, students learn about HTML, CSS, and Git!

Week 1 (Git)

Git Branching

• Can: fork a project on GitHub
• Can: commit changes locally and push to their fork

Week 2 (Git)

Git Merging

• Can answer: What is the difference between a Local and Remote repository?
• Can answer: What is the difference between the Workspace and the Index?
• Can answer: Why do we keep a “clean” master branch when working in teams?

Week 3 (Git)

Git Merge Conflicts

Sources

• syllabus summaries (glasgow, london, master branches)
• https://codeyourfuture.github.io/syllabus-master/html-css/mentor-guide.html
• @NateWr's (old) weekly progress guides for Scotland's HTML/CSS module

TODO incorporate the exercises from syllabus