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 -
USB REQUIRED
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
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
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!)
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
CLASS #5 (NOVEMBER 12, 2019)
In this class, we learned how to use “div” tags! These tags are super useful for styling content on your web page without affecting the positioning or adding any awkward spacing! In order to style each individual div, we also learned about Ids (and a little about Classes, but don’t worry, we’ll get into those more in a later class!). Ids can only be used once per page, so they’re great for keeping a theme consistent across your entire website!
Learned:
Div tags
Ids – #mainBackground
CSS:
margin
padding, padding-left, padding-right, padding-top, padding-bottom
border (weight, style, and colour)
border-radius (to add rounded corners)
If you want to practice more CSS before next week’s class, try adding CSS to different tags on your web page! If you’re feeling ambitious, try adding more content to your website using what we’ve learned so far! Don’t worry if you make mistakes – I can help you debug your project (and help you fix it) at the beginning of the next class!
You can download my class example file here: Class Example #5
CLASS #6 (NOVEMBER 19, 2019)
In this class, we started off with a little Kahoot reviewing and refreshing content from our previous classes! Then we hopped straight into Atom to code more of our web pages!
Learned:
Ordered Lists
Unordered Lists
How to create the HTML for a custom navigation using an unordered list
What is a Header tag used for?
Nav Tag
CSS:
text-decoration: none; (gets rid of the underline below our links)
list-style-type: none; (gets rid of the bullet points on our list items)
display-block: inline; (displays the block of code in a single line instead of as a list)
We sure covered a lot of new content during class this week! Keep adding new content to your websites at home and feel free to style it too! I’ve also added more comments to my class example file so you remember what each part does!
You can download my updated class example file here: Class Example #6
Feeling up for an extra challenge? Try creating a new HTML document and fill it with some basic content! You can then link your pages together with your custom navigation the same way we added the index.html page to the HOME button!
CLASS #7 (NOVEMBER 26, 2019)
In this week’s class, we continued working on our custom navigation! Using the CSS we have learned so far (as well as some cool new CSS), we added style and animations to our navigation!
Learned:
The proper way to name and save images for our website
How to add images to our HTML
CSS:
border (reviewed)
padding & margin (reviewed)
How to override built-in CSS styling with margin and padding: 0
text-align: center; (used to center any text content within its container on the page)
the :hover effect (we added it to our links, but it can be added to other content as well!)
transition: 0.3s; (used to smoothly animate the tag from its default style to its new one)
As always, be sure to check out my class example file as I have added additional notes in the form of HTML and CSS comments throughout the code! You can download my updated class example file here: Class Example #7
CLASS #8 (DECEMBER 3, 2019)
In this week’s class, we reviewed how to turn images into links, but this time, with a twist! If you have your own website, you don’t want your visitors to leave your website when they click on outgoing links. So, we use the _blank target on our anchor tag to create a link that opens in a new tab! We also learned more CSS that can be applied to various elements, and not just image tags!
Learned:
How to create a custom styled “Back to Top” button with hover effects using Ids (index.html#top)
How to use break <br> tags to easily add simple spacing to your HTML
What are “classes” and how do you use them?
Classes are similar to Ids, but, instead of only being able to use them once per page, classes can be used an unlimited amount of times, making them handy for adding the same CSS styles to multiple different tags!
CSS:
How to resize images with width, height, and “auto” values (using both pixels and percentages)
With just two more lessons left in this class, keep on practicing and reviewing your code! Don’t forget, the final class will be a massive review that will test all your HTML and CSS coding knowledge!
You can download my updated class example file here: Class Example #8
CLASS #9 (DECEMBER 10, 2019)
In this week’s class, we added some custom flair to our web pages using a few of my favourite resources!
Learned:
How to add custom fonts using Google Fonts
Make sure to link your fonts above your CSS file link in the head of your HTML document! This will ensure that everything displays correctly when the web page is loaded.
How to add custom repeating background patterns from Subtle Patterns
Unzip the image files and add them to your IMG folder before linking them with “background” in your CSS.
CSS:
background: url(img/background.png) repeat;
You can download my updated class example file here: Class Example #9
Remember, next week is our final class! We will add some final touches to our websites before having a massive review Kahoot on all the content we learned these past few weeks! Don’t forget to download all class example files and bookmark any external resources from this page before the end of the session!
FINAL CLASS #10 (DECEMBER 17, 2019)
In this week’s final class, we learned how to modify our pre-existing web page so that it can be used as a template for new pages! We used this template to create new pages and link them to our navigation. After that, we dove into a giant review Kahoot to test our knowledge on the HTML & CSS we’ve learned over the past ten weeks!
Learned:
How to create a template from our pre-existing HTML page
Reviewed:
How to create internal and external links for our navigation
Everything from the past ten classes… Wow!
You can download my final class example file here: Class Example #10
Don’t forget to download all class example files and bookmark any external resources from this page before the end of the session!
We would like to thank you for joining us at The Cube School to learn HTML & CSS! We hope everyone had fun and learned a lot about coding – we had an amazing time! If you have any questions, feel free to contact us. We hope to see you all again soon!
ADDITIONAL RESOURCES
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
DOWNLOADS
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
WINDOWS OS
Text Editor Download Notepad++
Code Editor Atom
Browser used in class : Google Chrome
MAC OS
Text Editor Download Sublime
Code Editor Atom
Browser used: Any
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)