Introduction

Start with reviewing the previous lesson by asking the following questions and gathering responses from the class. 

• What did we do in the last lesson? 
• What new code did we learn about?
• What is the difference between HTML and CSS? 
• What jobs do they do when building a web page? 
• What things were we able to change with the CSS code for the page?

 

Main task

Tell the students that in this lesson they’ll be doing another HTML remix based around a Movie Poster. Go to our example at glitch.com/~sunsetmovieposter

 

 

Click the Remix This button to create your own version of the project. Just like the Keep Calm poster from the last lesson.

 

 

Remind the students of the layout of the Glitch interface. The files for the project are in the left hand window, the editor is the central window and the live preview is on the right. 

What do you think we could change on this page? Well everything really! But we do want to retain the style of a movie poster. 

Explain that the students will be creating a web poster for a fictional movie of their own. They should try to:

 

In the HTML

• Change the background image with a free to use image they find themselves (that is appropriate for their movie) - Line 60.  The following sites have excellent royalty free stock images to use:
  • www.photosforclass.com
  • www.pexels.com
  • pixabay.com

• Change the title of the movie - Line 41
• Change the strap line below the title - Line 42
• Change the star actors at the top of the poster (add their own names and friends) - Lines 13 to 15
• Change the review quotes - Lines 21 to 38
• Change the credits at the bottom of the poster - Lines 47 to 50

 

In the CSS (it’s at the bottom of the HTML index page - scroll down)

• Change the text colour - Line 65.
• Change the text shadow. Try adjusting the values and see what happens - Line 77. 
• Change the font. Try changing it from "Trebuchet MS" to "Georgia" (or any other font) - Line 66 and line 80 (main body and title)

 

Reinforce that they can’t break anything and shouldn’t be afraid of tinkering to see what happens when they make a change. They can always undo things if needed, or worse case, start again. 

When they are finished they might have something a bit like this:

 

 

Saving

Near the end of the lesson, save an image of their work by pressing the print screen key and pasting their image into a document (as described in the previous lesson). Ask them to add their name and perhaps a short description of their task or learning objective and then save the document.  

 

Plenary

Ask them to find a partner, look at each other's work and talk through what they have edited and how they did it, where they found each part in the code etc. 

Briefly revisit the lesson objectives as a class and ask them to consider their success in the lesson. What have you managed to change in your project today? 

Review the students' understanding of the lesson and the key elements of this unit of work. Ask the class:

• What is the difference between the internet and the world wide web?
• Can you describe in your own words what happens with data when you try to access a website on your device?
• What are HTML and CSS code?
• What job does each do?

 

Still want more? 

If you would like to take things further, there is a great collection of projects to remix in a similar way on Glitch. Search for HTML and filter it to Projects. 

This Beautiful Burger project is fun for exploring CSS a bit more. The comments in the code should be enough to get students started. 

https://glitch.com/~beautfulburger

 

 

The Raspberry Pi foundation have also created a fantastic range of HTML and CSS projects which you can find here. 

 

What did you think of this unit?

When you have completed the unit with your class, please take a moment to leave us some feedback with this short form, it'll really help us create more content you love in the future. Thank you!