STEM Village Course: HTML and CSS

Web Development: HTML and CSS

Program Outline:

  • Session 1: Introduction to HTML and CSS
  • Sessions 2 and 3: HTML Basics 1
  • Session 4 and 5: HTML Basics 2
  • Session 6 and 7: HTML Basics 3
  • Session 8 and 9: CSS Basics
  • Sessions 10-14: Capstone Project – Create your own webpage

Session 1

Class Discussion

  • Provide a few examples of web page designs that you enjoy
  • List some of the elements that these web pages superior
    • Strong visual design – logo, layout, colour scheme, white space, font, etc…
    • Meaningful content – answer the “what’s in it for me?”
    • Simple navigation – ease of use, intuitiveness
    • Clear “call to action” – user knows what to do next
    • Trustworthy – is there a feeling of legitimacy?
    • Mobile friendly – will this work on my phone?

Session 2 Preparation

Session 2

STEM Village Learning Block (Complete Activities)

Helpful Hints

Session 3

STEM Village Learning Block (Complete Activities)

Helpful Hints

Session 4

STEM Village Learning Block (Complete Activities)

Helpful Hints

Session 5

STEM Village Learning Block (Complete Activities)

Helpful Hints

Session 6

STEM Village Learning Block (Complete Activities)

Helpful Hints

Session 7

STEM Village Learning Block (Complete Activities)

Helpful Hints

Sessions 8 & 9

Optional CSS Coding

STEM Village Learning Block (Complete Activities)

Helpful Hints

  • CSS is helpful to add consistnecy to multi-page websites
  • Not all learners will have sufficient time to cover the CSS learning – be sure to have a firm grasp of HTML elelments before proceeding to CSS

Capstone Project: Setup

Project Setup

The capstone project will be created using Thimble by Mozilla. Thimble is simple online code editor where learners can create and publish projects. Setup a Thimble account for each learner.

Click HERE to access Thimble.

Considerations

  • Theme
    • Set a theme to increase focus and narrow options – e.g. personal interests page, school club or team page, page related to a specific learning topic, etc…
    • In schools, tie project to a core strand can help create additional opportunities for “in class” work time
  • Draft and Pre-work
    • Build a “paper prototype” of the page – rough layout and content ideas
    • Gather relevant resources (images, links, content) for page(s) before starting to code
  • Frustration
    • Frustration will occur, encourage patience
    • Continue to build – refinment can come later
    • The visual appeal of a page usually comes together in final stages of the project (i.e. it looks terrible while building)

Capstone Project: Intro

Kickoff Video

The capstone project is a great opportunity for learners to demonstrate skills learned throughout the program. As part fo the capstone project, learners will create a personal webpage using a code editor.

Capstone Project: Examples

Coded help examples are also available

  • HTML “tags” Cheat Sheet
    • Access the Cheat Sheet and REMIX to see the code


  • Sample Thimble Project
    • Access the project and REMIX to see the code