Learn To Code: HTML & CSS (KIDS)
- Cube Game (the Space Key) Mac Os X
- Cube Game (the Space Key) Mac Os Catalina
- Cube Game (the Space Key) Mac Os 8
- Cube Game (the Space Key) Mac Os Catalina
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 -
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!
Mac users note that this game may be initiated in two ways also. First, by opening a terminal, navigating to the install-directory, and typing 'rufascubeosx' on the command line. Second by navigating to the installation directory in Finder and clicking the 'rufascube.app' icon named 'RufasCube'. DOWNLOAD Game Cube Raiders PC Game Free Download. Cube Raiders PC Game Free Download for Mac/Win. Cube Raiders Game Download Full version highly compressed via direct link available. Cube Raiders Free Download PC Game Cracked in Direct Link and Torrent. Cube Raiders It Is a Full And Complete Game. Just Download, Run Setup, And Install.
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
Lesson 3 reference files
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!)
Quiz 1 Mini
Quiz 1 Full
Homework
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!
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
CLASS #5 (NOvember 12, 2019)
In this class, we focused on CSS, or 'Cascading Style Sheets'. Don't worry if that's a mouthful, it's the 'style' part that's the most important to remember! Simply adding a few lines of CSS can bring an HTML document to life!
Reviewed:
Paragraph tags and Heading tags
Learned:
What does CSS stand for?
What is CSS used for?
CSS external document setup
How to link CSS documents to your HTML file(s)
CSS:
background-color, color, font-family, font-size
How to use HEX colour codes
If you want to practice more CSS before next week's class, try adding CSS to different tags on your web page! 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! If you want to add more custom colours, all you have to do is Google 'HEX Colour Picker'!
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 page.
Learned:
Ordered Lists
Unordered Lists
What are div containers used for?
What is an ID?
How to create unique CSS tags using IDs (#mainDiv).
CSS:
Margins
We sure covered a lot of new content during class this week! I know some of you wanted to add more to your lists but ran out of time, so feel free to expand on them (or even create new lists) at home! 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
CLASS #7 (NOvember 26, 2019)
In this class, we learned how to add even more styling to our content! We added padding to our website, which is very similar to margins. But, instead of adding space between the page edge and the div we applied it to, it adds space between the text and the edge of the div! By default, using 'padding' adds more space to the top of the page. I don't like how it does this, so I add a separate line of 'padding-top' to adjust the top padding separately! Remember, code order matters as CSS runs its code from the top down, and whatever is listed last will be applied to your HTML! Untitled rhythm game mac os.
Learned:
CSS:
padding, padding-top, padding-left, padding-right, padding-bottom
margin (reviewed)
border (the order you list the style, size, and colour doesn't matter!)
How to properly save and store images for your website
How to add images to your HTML with the img tag (reviewed)
What the 'alt' text on an img tag is for (it allows screen readers to identify what is in the picture)
At home, if you want, you can save more images to your img folder! When saving and renaming images, do your best to avoid using spaces or any symbols other than underscores and hyphens! Also, remember to rename your images to something that makes sense! We will continue styling our images next week! U.d. mac os.
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 turn images into links (review)
How to open links in new tabs instead of in the same window (target='_blank')
How to use break
tags to easily add simple spacing to your HTMLWhat is a 'class' and how do you use it?
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 session, 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 learned how to create custom navigations for our websites!
Learned:
What is a
?How to use the
tag.How to use an unordered list to create a custom navigation in HTML.
How to style the navigation with CSS (see the new CSS we learned below)
CSS:
text-decoration: none;
list-style-type: none;
display: inline-block;
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 navigations 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 add custom fonts to add some flair to our websites! Then 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 add custom fonts using Google Fonts
Remember: 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.
Reviewed:
Everything from the past ten classes… Wow!
You can download my updated class example file here: Class Example #10
Cube Game (the Space Key) Mac Os X
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
Downloads
Cube Game (the Space Key) Mac Os Catalina
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
Cube Game (the Space Key) Mac Os 8
Text Editor Download Notepad++
Code Editor Atom
Browser used in class : Google Chrome
Text Editor Download Sublime
Code Editor Atom
Browser used: Any
Cube Game (the Space Key) Mac Os Catalina
When creating your HTML pages, make sure to save them in .html format
When creating your CSS files, make sure to save them in .css 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)
Don't forget to link your CSS document to each of your HTML files!
