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

Presentations​

Overview​

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

Articles​

Responsive Web Design​

Devices to brainstorm together:

  • Phones
  • Tablets
  • Laptops
  • Desktop computers
  • Gaming consoles (Playstation/Xbox)
  • Apple Watch
  • Smart devices (fridges, washing machines, TVs)
  • Screen readers
  • Crawlers (search engines)

Use this list to illustrate the range of device sizes we build for. Reinforce the separation between data and display.

Media Queries​

When completing the exercises, make sure they use a "mobile-first" technique. They shouldn't shrink the text on small screens, but enlarge it on bigger screens.

/* Don't */
@media (max-width: 480px) {
  .jumbotron .display-3 {
    font-size: 3rem;
  }
}

/* Do */
.jumbotron .display-3 {
  font-size: 3rem;
}
@media (min-width: 480px) {
  .jumbotron .display-3 {
    font-size: 4.5rem;
  }
}

When completing the second exercise, make sure they're only modifying the buttons in the jumbotron. The button in the header shouldn't be effected.