TABLE OF CONTENTS
TABLE OF CONTENTS
Embedded Files
GENERAL INFORMATION
GENERAL INFORMATION
Dates & Times:
Mondays: 8:40-9:35 (9B)
Wednesdays: 09:35-10:30 (9C)
Fridays: 08:40-09:35 (9A)
Reorganization of Documents
Reorganization of Documents
As walking around the classroom when saving files I have seen that the organization of your documents at times leaves something to be desired. We will spend the upcoming lesson looking at reorganizing the files there and creating an appropriate folder structure and naming of files and folders.
STEP 1.
Create a folder named the year you are in DRIVE/Documents e.g. Year7
STEP 2.
Create a folder FOR EACH SUBJECT inside that folder for YearX so DRIVE/Documents/Year7/Art, DRIVE/Documents/Year7/Drama etc.
STEP 3.
In EVERY SUBJECT folder you should place three empty folders. One called Assignments one called Notes and one called Projects
STEP 4.
Inside DRIVE/Documents/YearX/ICT/Projects you should create the following folders: HEDYCODE, HTML, JAVASCRIPT, MICRO-BIT, PYTHON, PODCAST, ANIMATION
LESSONS
LESSONS
HTML
HTML
LESSON 1 - GENERAL INTRODUCTION
LESSON 1 - GENERAL INTRODUCTION
ACTIVITIES:
Introduce yourself and get to know the students.
Set expectations and ground rules for computer use.
Introduce the class website and Teams platform.
Start with the first unit if time permits.
BONUS:
Read HTML Intro
You can see the Hello World example run. By clicking the play button.
LESSON 2 - INTRO TO HTML
LESSON 2 - INTRO TO HTML
ACTIVITIES:
Introduce students to the basics of HTML, including structure, editors, and comments.
Familiarize them with the tools they'll use to create HTML pages (GeeksforGeeks online editor and VS Code).
Save first 'Hello World' in their Drive/Documents/Year9/ICT/Projects/HTML/Lesson 2/ folder on their OneDrive (Create the folders first).
Save and test the Hello World code you received in Lesson Resources. The file can be named (HelloWorld.html, Lesson2.html or any other sensible name)
LESSON RESOURCES:
Hello World code:
<!DOCTYPE html>
<html>
<head>
<title>Lesson 2</title>
<style>
h1 {
color:#E30613;
}
</style>
</head>
<body>
<h1>We are doing HTML in our ICT class</h1>
</body>
</html>
LESSON 3 - PARAGRAPHS, HEADINGS AND IMAGES
LESSON 3 - PARAGRAPHS, HEADINGS AND IMAGES
ACTIVITIES:
Read about Attributes, Doctypes, Headings and Paragraphs in Lesson Resources.
Create a webpage Lesson3.html inside ONEDRIVE/Documents/Year9/Documents/ICT/Lesson3
Three paragraphs (<p>) with titles above them (<h1>) about your favourite school subject.
Download and use an image on the page related to the subject. (try to scale the image)
LESSON RESOURCES:
EXTRA:
LESSON 4 - LINKS AND LISTS
LESSON 4 - LINKS AND LISTS
ACTIVITIES:
Read about Links, Formatting and Entities (see Lesson Resources).
Copy the code from Lesson 3/Lesson3.html to a new file and rename Lesson 4/[subject name].html (create first the 'Lesson 4' folder)
Add a new file Lesson 4/[Second favourite subject].html inside this new folder Lesson 4
For the new webpage for the second subject (only after fully reading the provided links in Lesson Resources!!):
Add some text on your second favourite subject
Use some italic and bold text
Add an [ENTER] somewhere in a paragraph so that a sentence is broken up into two (use <br/> to do so)
Add an ordered list where you describe the reasons you like the subject.
Add an unordered list where you describe the details of the subject (who's the teacher? when do you have lessons? etc.)
Add a link from the second subject to the first subject. (How to do links? with <a href>)
Add a table with your school timetable (days of the weeks, periods, classes) to both subject pages and highlight with a different colour the specific subject you have chosen subject.
LESSON RESOURCES:
LESSON 5 - TABLES
LESSON 5 - TABLES
ACTIVITIES:
Read about Links, Images and Entities.
Copy the entire Lesson 4 folder, paste it and rename to Lesson 5.
For both webpages for your favourite subjects you (only after fully reading the provided links in Resources!!):
Add a table with your school timetable (days of the weeks, periods, classes) to both subject pages (e.g. Art.html and Science.html and highlight with a different colour the specific subject that page is about, you can highlight however you want but I recommend using the <mark></mark> tags.
LESSON RESOURCES:
CSS
CSS
LESSON 6 - INTRO TO CSS
LESSON 6 - INTRO TO CSS
OBJECTIVE:
Understand the basic syntax of CSS.
Learn about different types of CSS selectors.
ACTIVITIES:
Read about CSS Syntax and Selectors (see Lesson Resources).
Copy the the entire Lesson 5 folder and paste it, to then rename new folder as Lesson 6.
Create a new CSS file named styles.css inside the ‘Lesson 6’ folder.
Link the styles.css file to your HTML files. (for linking make sure to check how to do it? use Google/W3Schools)
Apply the following styles using different selectors:
Element Selector: Change the background colour of the <body> elements to a HEX code for light violet
Class Selector: Create a class highlight and apply it to the first paragraphs you want to highlight with a yellow background (find out how)
ID Selector: Create an ID #main-title and apply it to the main heading ( neaning the biggest titel(s) on your page ) with a font size of 24px and colour red.
LESSON RESOURCES:
LESSON 7 - TEXT AND FONTS
LESSON 7 - TEXT AND FONTS
OBJECTIVE:
Learn how to style text and fonts using CSS.
ACTIVITIES:
Read about CSS Text and Fonts (see Lesson Resources)
Copy the the entire Lesson 6 folder and paste it, to then rename new folder as ‘Lesson 7’.
In your styles.css file, apply the following styles:
Font Family: Set the font family of all text to Arial, sans-serif.
Font Size: Change the font size of all paragraphs to 16px.
Text Alignment: centre-align all headings (<h1>, <h2>, etc.).
Text Colour: Change the colour of all links (<a>) to #0066cc.
Text Decoration: Underline all links on hover and change color to red (a:hover {color: yellow; text-decoration: underline;}).
LESSON RESOURCES:
LESSON 8 - DIVS AND POSITIONING ELEMENTS
LESSON 8 - DIVS AND POSITIONING ELEMENTS
OBJECTIVE:
Learn about divs and positioning. .
ACTIVITIES:
PART A:
For Lesson 8 create a new 'Lesson 8' folder but not a copy just an empty folder.
Read about CSS divs and click the 'Try it out yourself' button to examine it better.
Then watch & follow along with the first video in Lesson Resources with subtitles instead of audio (or headphones).
The code goes in the Lesson 8 folder that you just have created.
PART B:
Create a new 'Lesson 8 part 2' folder but not a copy just an empty folder.
This time you will start with some code. The code is linked below.
Watch & follow along with the second video in Lesson Resources with subtitles instead of audio (or headphones) .
NOTE: In the second video the programmer is not consistent with the indentation but please be consistent and use TABs to indent your code.
LESSON RESOURCES:
JS (Algorithms & Datastructures)
JS (Algorithms & Datastructures)
LESSON 9-15 - A COMPLETE GUIDE TO JS ALGORITHMS
LESSON 9-15 - A COMPLETE GUIDE TO JS ALGORITHMS
OBJECTIVE:
JavaScript makes HTML pages more dynamic and interactive. While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. You'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions. Once you have the fundamentals down, you'll apply that knowledge in a group project where you will create your own website.
ACTIVITIES:
If this is the first time you are doing Javascript please have a look at the 'A Taste of JavaScript' section on W3Schools (see Lesson Resources)
Read and do the 'Basic JavaScript' section on the JS tutorial website (see Lesson Resources)
IF YOU ARE VERY FAMILIAR AND CONFIDENT WITH JS: You can do the do the 'Basic Algorithm Scripting' section.
IF IT'S STILL NOT CHALLENING ENOUGH: You can do the do the 'Intermediate Algorithm Scripting' section.
LESSON RESOURCES:
WEBSITE PROJECT PART 1
WEBSITE PROJECT PART 1
LESSON 16 - START OF PROJECT
LESSON 16 - START OF PROJECT
OBJECTIVE:
We will be working on a project where you will be creating a website based on a specific topic and in groups. From designing, to coding and presenting it. However, parts of the website will require JavaScript to be able to make it dynamic./interactive (think about sliders, expanding cards, search functionality etc.). We will learn at the same time as you are working on the project also JS with Scrimba Interactive Video Tutorials you will learn the basics of JavaScript by solving interactive coding challenges. Along the way you will build a game. These skills will be used in your website. For students already familiar with JS they can skip ahead in the parts they know or set the playback speed to >1.0
ACTIVITIES:
Choose your project from the available in the list.
Design your website (pages) on paper. (A3 Paper)
Organize your files. There should be ONE folder with the website. This folder will contain the actual files (.html, .css, .js, images, audio)
Students can work on separate parts of the website and then copy paste the code/images into this folder
Organize your files:
Create ONE main folder for the website.
This folder should contain all the actual files: .html, .css, .js, images, audio, etc.
Students can work on separate parts of the website and then copy and paste the code/images into this main folder.
Use a consistent naming convention for your files to avoid confusion.
Collaboration Tools:
Microsoft Teams: Create a team for your project to facilitate group chats and discussions.
OneDrive: Use OneDrive to store and share your files. Each student can upload their part of the project here, and you can easily access and merge the files.
Once done start with 'Build a passenger Counter App' on Scrimba.
POSSIBLE PROJECT CHOICES:
1. Interactive Quiz Website
Description: A website that hosts a quiz on a topic of their choice (e.g., movies, sports, science).
Features:
Multiple-choice questions with instant feedback
Score tracking
Timer for each question
Fun animations and sounds for correct/incorrect answers
2. Recipe Sharing Website
2. Recipe Sharing Website
Description: A site where users can share and browse recipes.
Features:
Recipe submission form
Search functionality
Interactive elements like expanding recipe cards
Rating system for recipes
3. Travel Guide Website
3. Travel Guide Website
Description: A guide to a city or country, highlighting attractions, restaurants, and activities.
Features:
Interactive map with markers
Photo gallery
Reviews and ratings
Weather widget
4. Event Countdown Website
4. Event Countdown Website
Description: A site that counts down to a specific event (e.g., a school event, holiday, or fictional event).
Features:
Countdown timer
Event details and schedule
Interactive calendar
Fun facts or trivia related to the event
5. Fitness Tracker Website
5. Fitness Tracker Website
Description: A site to track fitness activities and goals.
Features:
Activity log
Goal setting and progress tracking
Interactive charts and graphs
Tips and motivational quotes
6. Pet Adoption Website
6. Pet Adoption Website
Description: A site to showcase pets available for adoption.
Features:
Pet profiles with images and details
Search and filter options
Contact form for inquiries
Interactive elements like sliders and carousels
7. Music Playlist Website
7. Music Playlist Website
Description: A site where users can create and share music playlists.
Features:
Playlist creation and editing
Embedded music player
Search and filter options
Interactive elements like drag-and-drop for song ordering
8. Science Experiment Website
8. Science Experiment Website
Description: A site that explains and demonstrates simple science experiments.
Features:
Step-by-step experiment guides
Interactive elements like videos and animations
Quiz or trivia section
Comment section for feedback and questions
LESSON RESOURCES:
LESSON 17 - PROJECT STRUCTURE
LESSON 17 - PROJECT STRUCTURE
OBJECTIVE:
Finish the design and start working on the code. While you can't make the dynamic parts if you are not familiar with JS you can do many things already including writing text, creating the HTML file and elements inside, giving your page colour and a nice layout using CSS, looking up images to use on the page, creating a logo etc. etc. Please divide the tasks. well so every member knows what to do.
ACTIVITIES:
Finish initial design of your website (pages) on paper. (A3 Paper)
Start working on the website. Text, Images, Name, Logo, HTML structure, colours etc.
Place the files in the shared folder.
HOW TO WORK ON THE PROJECT:
I have created a folder for each group on OneDrive and shared it with all group members. Please follow the structure and guidelines below to keep your project organized:
FOLDER STRUCTURE :
Each group folder contains the following subfolders:
Design
Wireframes
Mockups
A3 Paper Designs (scanned or photographed)
HTML
index.html
Other HTML files (e.g., about.html, contact.html)
CSS
styles.css
Additional CSS files (if any)
JS
scripts.js
Additional JS files (if any)
Assets
Images
All image files (e.g., .jpg, .png)
Audio
All audio files (e.g., .mp3)
Other
Discussion points
To-do list
Any other relevant files
USAGE GUIDELINES :
Do Not Rename or Change Existing Folders: Please keep the existing folder names and structure as they are. This helps maintain consistency and makes it easier for everyone to find files.
Adding Extra Folders: You are welcome to add extra folders if needed, but please ensure they are clearly named and relevant to the project.
Consistent Naming: Use clear and consistent naming conventions for all files and folders.
Regular Updates: Make sure to regularly update the shared folder with your latest work. This ensures that all team members have access to the most recent versions of files.
Collaboration Tools: Use Microsoft Teams for group chats and discussions. Store and share your files on OneDrive/Teams to facilitate easy access and collaboration.
LESSON 18 - GUIDANCE ON FIRST STEPS
LESSON 18 - GUIDANCE ON FIRST STEPS
OBJECTIVE:
Make the first steps on your project and upload it to the correct folder.
ACTIVITIES:
Showing example website for Fitness Tracker:
Create a basic structure for 'Fitness Tracker Website Description: A site to track fitness activities and goals. Features: Activity log Goal setting and progress tracking Interactive charts and graphs Tips and motivational quotes' also with CSS. (you are allowed to use using AI but for this basic structure part)
Add example text using Lorem Ipsum Generator (https://www.lipsum.com/)
For the logo and business name Looka, Namelinx work well. (using the free version you make the image as big as possible and then create a screenshot and crop the image)
Find pictures. Pixabay, Freepik, Pexels all work well (https://pixabay.com/)
Create a nice form of navigation (links can lead to specific sections on the same page). FreeFrontend can work well. (https://freefrontend.com/css-menu/)
Upload initial design of your website (photograph / scan) to the Design folder.
Start working on the website. Text, Images, Name, Logo, HTML structure, colours etc.
HOW TO WORK ON THE PROJECT:
I have created a folder for each group on OneDrive and shared it with all group members. Please follow the structure and guidelines below to keep your project organized:
FOLDER STRUCTURE :
Each group folder contains the following subfolders:
INTRO TO JS
INTRO TO JS
LESSON 18 & 19 - INTRO TO JS
LESSON 18 & 19 - INTRO TO JS
OBJECTIVE:
With Scrimba Interactive Video Tutorials you will learn the basics of JavaScript by solving interactive coding challenges. Along the way you will build a game. These skills will be used in your website. For students already familiar with JS they can skip ahead in the parts they know or set the playback speed to >1.0
ACTIVITIES:
Showcasing Scrimba. Do the first part together.
Start with 'Build a passenger Counter App' on Scrimba.
You can use headphones or turn the captions on.
RESOURCES
RESOURCES
Google Sites
Report abuse