Learn To Code: HTML & CSS (KIDS)

Dear Parents & Students
This page is the one-stop resource for what we work on in class!
You will be able to find links to class work, Kahoot quizzes and more resources below.

This website will be updated WEEKLY or BI-WEEKLY (BUSINESS DAYS)
- 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!



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?

L3: Intro to HTML & CSS Slides

  • What are code comments and why are they useful?

  • URLS and how to set up links to other websites

  • How to create a secret image link using NESTING

  • How to keep your code neat as you go with indents

  • What to look for when choosing images for websites

Lesson 3 reference files


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


Wait what?! Yep! Sometimes I’ll assign homework too!

Optional Homework Assignment / Due 5th November

  • Create a new .html document - Label it as Homework1.html

  • This homework helps students practice a unique type of linking called bookmarks

  • Give it a try and don’t worry if you get stuck, bring the files with you next class to ask the teacher

  • Remember: Trying is learning and counts!

Homework - Bookmarks.png

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 tags, anchor tags, and HTML document setup 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?

    • How to re-link broken images

    • How to use an anchor tag to link to other web pages you have created

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


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)