WEB DEVELOPMENT CLASS (PRIMARY 5 & 6)
Goal: Create a Simple Web page
How do the do it?
Do the following steps.
Step 1: Create an empty folder and call it ‘Mid-Term Assignment’
Assumption 1: I have forgotten how to create a folder!
Step 1.1: Click on the File (or Windows) Explorer
Step 1.2: Click on the Desktop or Document icon at the left
Step 1.3: Make sure the Home icon in the Menu bar is click, then click on
New Folder and change the name to ‘Mid-Term Assignment’
Step 2: Download this picture ‘green_diamond’ and put it inside the folder called ‘Mid-Term
Assignment’
Assumption 2: I dont know how to get the ‘green_diamond’ picture!
Step 2.1: Ask your parent or guardian to download the picture in your
WhatsApp to your phone and save it as a PNG file. That is with the name
green_diamond.png
Step 2.2: Move the picture from the phone to your laptop either via USB cord
or Bluetooth.
Step 2.3: Copy the picture from its current location and paste it inside the
Mid-Term Assignment folder
Step 3: Open a text-editor (e.g. Notepad or Sublime) and type this code.
Assumption 3: I have forgotten how to open or use a text-editor
Step 3.1: Go to Search bar and type either Notepad or Sublime and it will
appear, click on it and it will open.
Step 3.2: When the text-editor (i.e. Notepad or Sublime) opens type the
HTML code sent to you via WhatsApp.
Step 3.3 (Optional): To put the code inside your computer for better viweing, I
recommend you follow the instructions stated in Steps 2.1 and 2.2 above.
Step 4: Save the code you have created as ‘project.html’ inside the ‘Mid-Term Assignment’
folder.
Assumption 4: I have forgotten how to save my webpage!
Step 4.1: In your text-editor (either Notepad or Sublime) click on Save As,
make sure you go to the folder named Mid-Term Assignment and click Save.
Step 5: Use a web browser ‘project.html’ inside the ‘Mid-Term Assignment’ folder.
Assumption 5: I have forgotten how to open my webpage using a browser!
Step 5.1: Go to the folder named Mid-Term Assignment and right click
project.html and select the Open option or the Open With option.
SCRATCH CLASS (PRIMARY 2 - 4)
Goal: Make a Clicker Game
How do the do it?
Do the following steps.
Step 1: Open Scratch
Assumption 1: I have forgotten how to open Scratch!
Step 1.1: Type Scratch on your Search bar, and click on the Scratch icon when
it shows
Step 2: Save your work with the name Mid-Term Project
Assumption 2: I have forgotten how to save in Scratch!
Step 2.1: Look at the Menu bar you will see Scratch Project, click it and type
the name Mid-Term Project.
Step 2.2: Then go to the upper right corner and save it by clicking on “Save to
your computer”
Step 3: Click Tutorial, and select Clicker Game
Assumption 3: I have forgotten how to go to the Tutorial section of Scratch!
Step 3.1: Look at the Menu bar you will see the Tutorial bar in between the
Edit and Scratch Title bars
Step 3.2: Click on Tutorial bar
Step 3.3: Scroll down and you will see the ‘Clicker Game’ at the second row,
and fourth column, or in between the ‘Animate A Character’ and the ‘Make
it Fly’ tutorials.
Step 3.4: Click on the ‘Clicker Game’ and a new window in pop out.
Step 4: Follow the instructions
Assumption 4: I have forgotten how to go to follow the Tutorial instructions!
Step 4.1: Just do what you see inside the window.
Step 4.2: Once you feel you are done doing it click on the arrow to the right to
do the next task.
Step 4.3: Repeat Steps 4.1 and 4.2 until you finish.
Step 5: Save your work.
Assumption 5: I have forgotten how to save in Scratch!
Step 5.1: Go to the upper right corner and save it by clicking on “Save to your
computer”