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!
STRONGLY 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
SLIDE LINKS & Class Activity recap
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
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 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
KAHOOT quiz LINKS
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!)
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!
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!
title tags, anchor tags, and HTML document setup from scratch
Proper file folder setup & organization
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
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!
CODING @ HOME INSTALLATION INSTRUCTIONS
HOW TO EDIT / VIEW FILES
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)