Learn To Code: HTML & CSS (TEENS)

Dear Parents & Students
This page is the one-stop resource for everything we do in class!
You will be able to find links to class content, Kahoot quizzes and more resources below.
This website will be updated weekly or bi-weekly.

- Please note that these resources are only available for the duration of the course -


Teachers get students working on a website project that spans several lessons and it’s always the best way to save your work
You ‘can’ save on the student laptops, however your files may be deleted. So hook a USB on a lanyard and keep it handy!


RECOMMENDED @home Typing

Students can practice their typing skills on www.typingclub.com or even introduce a bit of quirky game fun with zty.pe

So warm up those fingers and get to typing away because being able to type confidently helps when you’re first getting started as a coder!

v v Lesson Slide Links are BELOW the following images v v

Screen Shot 2019-02-09 at 12.06.37 PM.png

SLIDE LINKS & Class Activity recap

L1: Intro to HTML & CSS Slides

  • What is code? How does the internet work?

  • How is HTML used and the basics of setting up a web page with markup tags

  • Header Tags, Paragraph Tags

  • Computer Literacy Skills: Snapping Windows, Creating Folders, Renaming Files

L2: Intro to HTML & CSS Slides

  • How to quickly set up a code environment (Codeview Vs Webview)

  • What is an ordered list vs an un-ordered list?

  • What is an attribute?

  • What is a comment, how is it useful?

  • CSS - Labels, Values, Properties Vs Tag Attributes


Students can replay Kahoots done in class :) It’s a great and fun way to review!
Psst (Find a parent or sibling to compete with and show em who’s boss!)

Quiz 1 Mini
Quiz 1 Full

CLASS #4 (NOVEMBER 5, 2019)

In today’s class, we reviewed previous coding content to see how much we remembered. Repetition is key! Even though it may seem like hard work, it’s important to start from scratch every so often, just to see what you need more help with!

  • Reviewed:

    • title, h1, h2, p, and img tags

    • How to setup an HTML document from scratch

  • Learned:

    • Proper file folder setup & organization

    • Naming conventions

    • What are code editors and how do they make our coding lives easier?

    • What is an index.html page used for?

    • CSS file setup & how to link external CSS files

    • CSS:

      • background-color, color, font-size

    • What is Lorem Ipsum?

    • What are HEX colour codes?

At the end of class, students participated in a Kahoot that challenged them to remember content from some of the previous three lessons!

The code editor that we will be using in class from now on is Atom, which can be downloaded for free (for PC or Mac) here. It is very similar to other code editors (such as Sublime Text), so use what you feel the most comfortable with! Code editors have a number of useful shortcuts that help make coding quicker and easier to learn! Of course, you are also welcome to continue coding with a plain text editor. Code editors are simply fancier text editors!

You can download today’s project file here: Class Example #4


More information will be added here as we progress

If you’re interested in downloading high quality professional images, please visit www.pexels.com or www.iconarchive.com

Placeholder Text Generator Lorem Ipsum


Missed class? Lost your USB?
Look here for files you can work from!
A copy of the teacher’s filed will be uploaded on this page every few lessons!



Text Editor Download Notepad++
Code Editor Atom
Browser used in class : Google Chrome


Text Editor Download Sublime
Code Editor Atom
Browser used: Any


  • When creating your website, make sure to save it in .html format

  • To edit your website, open the .html document in your text or code editor

  • To view your website, double left click the html document (or “Open With” a browser)