| Full lesson | Create for a teacher a set of content for giving a lesson, beginning with the lesson plan. Each new block of materials must begin with an H1 heading (other subheaders must be H2, H3, etc). When you describe required pictures, write those descriptions in curly brackets, for example: {A picture of a triangle} |
| Which subject | Computer science |
| What topic | Website |
| What length (min) | 30 |
| What age group | Year or Grade 11 |
| Class size | 20 |
| What curriculum | |
| Include full script | |
| Check previous homework | |
| Ask some students to presents their homework | |
| Add a physical break | |
| Add group activities | |
| Include homework | |
| Show correct answers | |
| Prepare slide templates | |
| Number of slides | 5 |
| Create fill-in cards for students | |
| Create creative backup tasks for unexpected moments |
Website
Year 11 (Grade 11)
Computer Science
20 students
30 minutes
This lesson aligns with the national curriculum for Computer Science, focusing on web development and coding skills.
| Step Number | Step Title | Length | Details |
|---|---|---|---|
| 1 | Introduction to Websites | 5 min | Discuss what a website is and its importance. Use examples to illustrate different types. |
| 2 | HTML Basics | 10 min | Provide handouts on HTML tags. Introduce basic tags (e.g., <html>, <head>, <body>). |
| 3 | CSS Fundamentals | 5 min | Explain the role of CSS in styling a webpage, providing examples of CSS rules. |
| 4 | Hands-On Activity: Creating a Simple Webpage | 5 min | Distribute printable cards for students to fill in as they follow instructions to code. |
| 5 | Collecting Cards | 5 min | Randomly collect or check what students have filled in on their cards to assess progress. |
| 6 | Wrap-Up and Q&A | 5 min | Recap the key concepts learned, answer questions, and set homework assignment for practice. |
"Good morning, everyone! Today, we're diving into an exciting topic: websites. Can anyone tell me what a website is? [Pause for responses] Excellent! A website is a collection of web pages that are typically accessed through the internet. It can serve various purposes—from sharing information to selling products. For instance, think about your favorite website. What makes it important or appealing to you? [Encourage students to share examples] Great examples! Websites can vary widely—from personal blogs to large company sites. Now, let’s move on to the building blocks of a website: HTML."
"Now that we have an understanding of what websites are, let’s talk about HTML—HyperText Markup Language. This is the fundamental language used to create web pages. I’m handing out a quick reference guide that outlines some of the basic HTML tags. [Distribute handouts]
On your handout, you’ll see tags like <html>, <head>, and <body>. The <html> tag indicates the start of an HTML document. The <head> tag contains meta-information about the webpage, like its title, while the <body> tag holds the content that will be displayed on the page. Let’s look at an example together. [Show a simple HTML structure on the projector] I want each of you to familiarize yourself with these tags—remember, they're the backbone of your webpage!"
"Next, we’ll explore CSS, which stands for Cascading Style Sheets. While HTML is about the structure, CSS is all about style! It allows us to customize how our webpage looks—adding colors, fonts, and layouts. Let’s take a look at some common CSS rules. [Show a few examples on the projector]
For instance, if you want to change the color of your text, you can use the color property. For background colors, you use the background-color property. Here’s a quick demo: watch how changing just one line of CSS can change the look of this webpage! [Demonstrate with examples in an online code editor]
Does anyone have any questions about how CSS works? [Allow questions] Awesome! Let’s put this knowledge into practice.”
"Now it’s time for some hands-on experience! I’m going to distribute printable cards that contain step-by-step instructions for creating a simple webpage. [Distribute cards]
Pair up with a partner and follow the instructions to code your first HTML webpage using the basics we just discussed. Don’t forget to include some CSS to style your page! Use the online code editor tool, CodePen. I’ll be walking around to help if you encounter any challenges. Let’s spend the next five minutes on this task. Ready, set, go!"
"Alright, time’s up! Please finish typing your final changes. Now, I’d like to collect your cards to see your progress. You can either hold them up or pass them to me. I’ll quickly check them to ensure you’re heading in the right direction. Great job collaborating with your partner! [Collect and review the cards briefly]
Now that I've had a chance to look at your work, it seems like most of you got the hang of it! Let’s quickly discuss any common issues or outstanding questions you might have."
"As we wrap up today’s lesson, let’s review what we learned. We discussed the definition and importance of websites, how to use HTML for structure, and how CSS allows us to style our webpages.
Does anyone have any questions before we finish? [Address any questions]
Your homework for this week is to take these skills and create a simple webpage project of your own using HTML and CSS. You'll submit it online through our school's learning management system. Remember, this will be checked for completion, so no presentations are required. I’m excited to see what you come up with! Have a great day!"
| Question | Answer |
|-----------------------------------------------------------------------------------------------|--------|
| What is a website and what are its main purposes? | |
| Can you name some examples of different types of websites? | |
| What does HTML stand for, and what is its role in web design? | |
| What are the three basic HTML tags mentioned in the lesson? | |
| How does CSS differ from HTML in terms of its purpose for web design? | |
| What is the function of the `color` property in CSS? | |
| How do you change the background color of a webpage using CSS? | |
| What was the activity we did to practice creating a simple webpage? | |
| Why is it important to collaborate with a partner on the hands-on activity? | |
| What are some common issues you experienced while creating your webpage? | |
| What are the key takeaways from today’s lesson about websites, HTML, and CSS? | |
| What is the homework assignment related to today’s lesson? | |