Lesson 5: Mini-Project: HTML Web Page

This mini-project focuses on assessing knowledge and skills associated with utilizing several basic HTML concepts by having students design a webpage for a user. When designing for users, it can often require the web developer to interview the user to find out what information they would like on their page. This has been replicated by providing detailed user descriptions in the project guide. Depending on the difficulty level and time constraints, there are two project guide options to choose from.

Project Guide #1: This version has detailed user descriptions with the potential topic headings already underlined and information they should include already highlighted for them. The students can look over what has been underlined and highlighted and make their design layout from there. Choose this option if your time is limited or if you have students who might need more support.

Project Guide #2: This version has detailed user descriptions with the first three potential topic headings already underlined as a starting point for the students. The remaining topic headings and the information that should be included for each topic are left up to the student to decide as the web developer. Choose this option if you have at least 2 days (1 day for planning and design and 1 day for building the webpage) or if your students would benefit from the extra challenge and web developer experience.

Make sure you select the HTML Web Page Project Guide that corresponds to the option you choose. You will also need to go into the provided slide deck and delete the slide for the choice you did not select (either slide 9 or slide 10).

In our first lesson for this unit, we worked to design websites for others. But at the time, we were only able to design them on paper because we didn’t know any HTML yet. Today, we get to apply our HTML knowledge and skills to design a web page to meet the needs of a user.

Prompt: As a web developer, you will most likely create web pages for various users. Why might it be useful to have a process, such as the Problem Solving Process, that we follow when designing and creating websites for our users?

Discussion Goal: This quick discussion allows students to recall the steps of the Problem Solving Process and think about how each step is helpful when creating websites for others. Make sure to point out that having a process, such as the Problem Solving Process, will help ensure that you keep your user in mind and meet their needs.

Facilitating Mini-Projects: Mini-Projects act as checkpoints in the curricula and cover the subset of skills students have seen so far in the unit. They are designed for 1-2 days of implementation as a way to check-in with how well students understand the course content so far. You may decide to extend these projects as a way to support or challenge students, which could allow you to revisit difficult concepts or support students who may have missed lessons and are trying to catch up. However, we recommend deciding this ahead of time and being firm with students about how much time they have for each project - otherwise, it's easy for projects to drag-out to multiple days and for student's work to spiral beyond the scope of this project.

Question of the Day: How can I use HTML to design and build a web page for a user?

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

Ensure your students have the HTML Web Page Project Guide corresponding to the project option you chose for them.

Do This: Use the slide to go over the goals of this project

• Design a page to meet a user’s needs
• Use HTML to structure a site
• Write readable code

*Before you jump in and get started, you need to read over the different users and their needs in your Project Guide and decide which user you will create a web page for.

As you can see, you also have the option to be the “user” and create a page about how to solve or improve something at our school or in your community.*

Do This: Direct students to pick a user based on the short user descriptions on the first page of the HTML Web Page Project Guide. Once they pick a user, they should turn to the project guide's last pages to find their user’s detailed description. This includes information about what the user would like included in the web page that students will build for them.

Circulate: As you move around the classroom, encourage students to number their main topics directly on their user descriptions. This might make it easier for students to list out the topic headings on the first page of the project guide that they need to include on the web page.

Make sure you have determined which project guide option your students will complete. Information for the two options can be found in the Project Setup section above.

If you have chosen Option #1, ensure students know that their user descriptions have potential topic headings already underlined for them and that the information to be included has been highlighted. Their job as web developers is now to read through the annotated user description, jot down those topics, and understand what information would go in each topic’s section.

If you have chosen Option #2, ensure students are aware that their user descriptions have the first three potential topic headings already underlined for them, but it is their job as web developers to go through their user’s detailed description to determine what the other main topic headings should be.

Do This: Direct students to complete a sketch of their designs on the second page of the project guide.

Distribute: Give each student a copy of the HTML Web Page Rubric as they are planning the layout and tags they will use so that they can make sure they meet the requirements of the project.

Circulate: As you move around the classroom, encourage students to add numbers in the margins and within the user’s description for the information they think needs to be included in each numbered topic on page 1. This might make it easier for students to list the content on the second page of the project guide that they need to include on the web page. Also, ensure your students identify which tags will be needed for different text on the web page. They are given a quick example of this in their project guide.

Scoping Student Projects: Students may ideate projects that are beyond their current skills or would take longer than the allotted time to implement. Rather than asking students to choose a different user, consider asking students to imagine a more scaled-down version of their initial idea. As an analogy, if students' initial idea is the "Run" step, imagine a less intense version representing what the "Walk" step would look like. If necessary, you can keep going back further to a "Crawl" step as well.

Digging Deeper: This is sometimes referred to as the Minimal Viable Product - you can learn more about this process and adapt it to your project strategies by reading this article: Making Sense of MVP by Henrik Kniberg

Many of you are ready to start creating your own projects. One thing that could make this challenging is the blank screen effect: unlike previous levels, the only starter code you have is the tags needed to start an HTML page, like the body tag. This means you might not be sure what exactly you’re supposed to do, or you might run into bugs you need to fix which can be frustrating. Luckily, we can also use the problem-solving process to help with these types of problems as well!

Distribute: Hand out a copy of the Problem Solving Process with Programming to pairs of students. Encourage students to look over the guide.

Display: Show the slide with the Problem Solving Process graphic

If you feel stuck or are unsure what to do next, remember you can always follow the steps of the problem-solving process to help you when you’re stuck. Don’t forget though, when working with the Problem-Solving Process, not all bullets in the steps will apply to every problem, so pick out one or two from each step to see if they help.

Do This: Direct students to start building the web page for their users. Let students know that if they would like to review the tags they have learned so far before they start on their web pages, they can go to Level 1 to complete these review activities or use them as resources while they work on their projects.

Transition: Send students to Code Studio Lesson 5, Level 2 to build their pages.

Circulate: Encourage students to use the steps in the Problem Solving Process for Programming when they get stuck or are unsure of what to do next. Not all bullets in the Problem Solving Process will be applicable to every problem a student has. Instead, encourage them to pick one or two from each category to try each time they are stuck

Debugging Strategies: As students design and implement their own project ideas, they may find themselves with new bugs that they need to untangle and you may find yourself looking at completely unfamiliar code as students look for help troubleshooting their errors. To help smooth out the debugging experience, consider the following strategies:

• Review the Teacher Guide to Debugging for some common questions and strategies to help support students in debugging their code
• Have students follow the steps in the Student Guide to Debugging and use the Bug Report Quarter-Sheets as an initial step in the debugging process. This helps students prepare and communicate their issue before asking for help.
• If students haven't seen it yet, consider showing the Debugging Video to the class to reinforce debugging best practices.

Digging Deeper: Consider supplying students with an object to talk to as part of the debugging process. This is sometimes known as Rubber Duck Debugging - you can learn more on the website https://rubberduckdebugging.com/

As part of this project, you may choose to allow students to give feedback to their peers using the Peer Review form. This will likely extend the project by at least one day but will allow students to reflect and make any needed improvements in Level 3 based on feedback.

Do This: Direct students to review the page they built for their users. They should use Level 3 to ensure they have included everything their user needs and met the requirements of the project by consulting the project rubric one last time.

Circulate: As you walk around the class, encourage students to refer to the project rubric to ensure they have met all the requirements at a level they are happy with.

Do This: Direct students to complete the reflection questions on their project guide. These questions allow students to think about what they liked best about their pages, what was challenging, and what they would do differently next time. You may also want to allow students to formally or informally present their work to the rest of the class.

Use the project rubric attached to this lesson to assess student mastery of learning goals.

Question of the Day: How can I use HTML to design and build a web page for a user?

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

As students share 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.

Discussion Goal: Use this share out to get students excited about what 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 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.