Introduction To HTML & CSS

Materials

• Lecture Slides
• Lab Non-Deliverable
• Homework Deliverable

Outline

Two 15 minute break will be given to learners.

Terminal Objective

Today we will learn about HTML, CSS, and JS

By the end of class activities, students will: Understand that all webpages are made up of code Know the name of the type of code that is used to add content to all webpages; HTML Become more familiar with editing html. Be exposed to common html tags and the format of them; opening tag, content, closing tag.

• I would start this lesson by asking if any learners knew the name of the code that is used to make a website?
• To demonstrate what I mean by this I would usually go to a website about right click and “view page source” to show them the code behind a website.
• Usually someone in the class knows this but if not it’s ok.
• I then begin by telling them about HTML and that it’s a piece of code that is used to create the content of all websites. I go on to explain that the content is the words, images, links etc on the page

Lesson Planning

• Explanation Goal - Explain to Students what HTML & CSS Are, explain some history, (use wikipedia if you choose), and tell them your experience working with it to build rapport
• Demonstration - Let them see you signup for github and codesandbox, stress that they should be relaxed, and it's just like signing up for anything else, and let them know they will always be using the static built in template from CodeSandbox. Show them how codesandbox works
• Imitation - Do Xray Goggles and Hack The News with the students in a code along fashion, leave no Learner behind, especially since it's day one. Use Slack and Zoom for students to give you emojis when they are ready to move on. The cadence is you do a little, then they do it. If you’re unsure how to use Mozzilla x-ray Goggles yourself this YouTube video demonstrates how to install x-ray goggles and change elements https://www.youtube.com/watch?v=Gx63KznqGDc
• Practice - They should do the lab together with classmates in breakout rooms, and the hw which is graded they should do by themselves

Potential Methods

I would then demonstrate to the class how to first install Mozilla x-ray Goggles on their bookmark bar as some learners sometimes struggle with this step.

I would then go onto a website, not a news website as this is the next task. So I would normally use the school website and show them how to use Mozilla X-Ray Goggles to change text only.

I would then ask learners to go onto a website so that they can then try it themselves. I usually suggest changing a movie or musicians website or ticket website to show that they are playing at a local venue or they are giving away free tickets or something.

At some point I would bring the class back together and I would show them how to edit an image, so I would get them to do the steps with me one at a time. Then get them to try it themselves with another image.

Some learners find this a little bit tricker as the length of the code from an image can sometimes be quite long and sometimes they are not sure which piece of code to replace etc. There is instructions how to do this on the website, click here.

I give learners time to explore and enjoy this task. They can try a few websites if they wish the kids usually really enjoy this task and I believe a good hock into a lesson is important so never want to rush parts that kids really enjoy.

I would make them aware of opening and closing tags so they know what parts of the code they should edit and not delete so that their modification works.

I love this task and learners really seem to enjoy it as well. The challenge is to take what they know about how to edit the text and images and hack the news.

Some learners try to edit an image but it’s actually a video or a link. So I remind learners that what they are looking for when the are trying to edit an image is the that stands for image.

Ideas how to share learners work... It’s also important to let them know that they can’t save their changes but they can take a screenshot. This is a good opportunity to test the knowledge of learners who completed the digital shortcuts lesson before this and see if they can remember what key to press to take a screenshot.

If learners are using the print screen button they can paste their project on Google slides and share this to the class. Or you could post a blank Google slide and make this accessible to the whole class and each pupil can take a new slide and paste their hacked news. Or show learners how to use a the lightshot or snipping tool and save the image.

HW Notes

Learners will be given the link to the basic happy birthday card. It will already have the basic code with image button, text etc on it. I would demonstrate to learners the card opening and closing and show them the code and make a few adjustments. For example, if it said the color grey I would change to a new color etc or a new font etc. I would also ask learners if they remembered from the previous lessons how to change color to a specific shade? (just make sure you are not showing this slide as the answer, hex color, is on the slide I’ve done this by mistake before : / ) I then ask if they can walk me through how to change the picture again to recap prior learning etc but also a useful reminder for learners who might have forgotten or need some practice as it is a bit tricky. I would also touch on the new page for JavaScript and show them the code and what it does, stating it adds interactivity to a page but nothing more than that. learners are then set the task below.

Task - Edit the code to create a new exciting card, this could be a valentines day card, halloween card, birthday card, good luck card etc.

OBJECTIVES

By completing this howmework, students will: Become more familiar with manipulating html and css. This will allow learners to become more confident in manipulating code. Understand that JavaScript adds interactivity