Lesson 7: Mini-Project: Your Personal Style

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please click here to access modifications that can be used during this lesson.

Prompt: What is special about your personal style that you would like to share with the world?

Allow volunteers to share out aspects of their personal style that they think are important.

This discussion allows students to share ideas for their websites, but it is not necessary for everyone to share if they prefer not to. The goal of the discussion is to start students thinking about the topic and encourage them to think of websites as a way to express themselves.

Websites allow us to share our style in creative ways. Today, we are going to work on using what we have learned about CSS to share our style with the world.

Question of the Day: How can you express your personal style on a web page?

Distribute: Give each student a copy of the Project Guide.

Students will already have described personal style in the warm-up, but this is a chance for them to refine what they want to say, or even change their minds about their website style.

As students answer questions about the design of the page, ensure that they are differentiating between the content of the page and the way that content is styled. After they have completed their designs, ensure that they can identify which CSS properties will be needed for different text on the web pages.

After you have checked the designs, allow students to log into code studio and code their pages. They will have a chance to review all of the tags they have learned before they start on their web pages. They can complete these activities as a review or use them as resources while they work on their projects.

New Style, New Project: In order to create opportunities for students to develop a variety of projects and help emphasize their newfound CSS skills, this project is not linked to the previous HTML Mini-Project in Lesson 4. If students would like to build off of their previous work, they can return to their previous project and copy-and-paste their HTML Code into this project. Or, they can use this as an opportunity to build a completely new website to suit their personality.

Students should have a chance to think about what they liked best about their pages. You may also want to allow students to formally or informally present their work to the rest of the class.

As part of this project, you may give students the opportunity to give feedback to their peers using the Peer Review form. This will likely extend the project by at least one day.

How can you express your personal style on a web page?

Prompt: What's one thing that would make your web page better that you don't know how to do yet?

As students share out their ideas, put them on the board or a poster, and try to call out any skills that they will be learning in the next few lessons.

Use this share out to get students excited about the things that they will learn in upcoming lessons. If you create a poster, you may also want to cross off topics as you teach them. For topics that are not covered in the curriculum, you can point students to similar topics that are covered or, if appropriate, direct them to outside resources that will guide them in learning those skills.