Skip to main content

Instructor Notes

Want to make a change to this week but don't have the time? Click here

Want to report a bug in this week? Click here


Questions and Help

We highly recommend joining the relevant Slack Channel for this module. In this channel you can ask questions, get advice from previous teachers and discuss lesson content.

cyf-module-html-css

For general Syllabus feedback and help you can post in cyf-syllabus

Resources

Articles

Quizzes

Overview

This outline provides tips to help mentors guide trainees to the best answers or outcomes for the lesson topics and exercises.

Open-source HTML/CSS Frameworks

Using the Navbar color schemes, use the browser's dev tools to show how changing the navbar classes in the example website changes the look based on Bootstrap.

Using the Card example, try to illustrate the way tags are nested inside of each other in a specific hierarchy. Emphasise the practice of paying close attention to documentation and picking up on minor details.

Personal Websites

The goal of this exercise is to identify trainees who are struggling to keep up. Try to identify where a trainee is struggling:

  • Can they find their files quickly?
  • Are they using the command line when appropriate?
  • Do they understand how their HTML and CSS interact?
  • Do they seem to understand syntax, or are they writing code in the wrong place?

If you find a trainee who is struggling with any of these basics, try to work through them together, then give them a short assignment where they need to do something on their own.

There will be several trainees who have the basics down. If they do, push them on some of the higher-level abstract concepts, like re-usable HTML/CSS components, and using CSS specificity cleverly (eg - basic and primary buttons). Beyond that, let them read up on HTML Forms (links in the resources), do some of the advanced suggestions in the syllabus, or challenge them to read and implement BEM naming syntax.

Retrospective

Try to use a tool such as MetroRetro to facilitate this discussion.

It is very important to reinforce the fact tha criticizing the course makes us better. Remind the trainees that there are 100s of trainees coming after them at CodeYourFuture - every bit of critical feedback makes us better for them.

You can prompt them with questions such as:

  • What did you not understanding for the module?
  • What else do you with you learnt?
  • What do you wish we did more of?
  • What do you with we did less of?