📖 Upload as Material in Google Classroom:
- Slides (make a copy for your program - upload the copy)
- There are no coding exercises for this lesson. Students will continue project planning.
📝 Upload as Assignment in Google Classroom (Ungraded):
- Project Submission Form (DO NOT MAKE A COPY - upload as link)
This lesson is designed to guide students through the essential phases of building a website for a topic they're passionate about. Focus is on importance of research in gathering ideas and resources, understanding and selecting a wireframe to sketch the website's layout, and utilizing starter code to begin the development process. Additionally, the lesson emphasizes the real-world application of these skills in UI/UX design, providing a contextual framework for students to understand the relevance of what they're learning.
-
👋 Welcome & Do Now (3) :
- Welcome students & review the day's agenda.
- Welcome students & review the day's agenda.
-
🔍 Brainstorming & Research (20) :
- Discuss the chosen project topic.
- Guide students in researching the topic, using articles, images, videos, etc.
- Help students identify what message they want to convey and what resources are needed.
- If unfinished, reassure students that they will have more time later.
-
⿳ Wireframing & Starter Code (6) :
- Explain what a wireframe is and its importance in UI/UX design.
- Discuss why layout matters and share an example (e.g., YouTube).
- Review common features of wireframes.
- Lead students through choosing a wireframe and customizing the starter code.
-
💡 Project Planning (10):
- Instruct students on how to invite collaborators to their Replit project.
- Guide students to choose a wireframe, open the associated starter code, and rename it.
- If students finish early, they may start outlining their website in the Planning Document.
- Reflect on the day's work, addressing what was completed, challenges, and next steps.
- Recognize any outstanding efforts with shoutouts.
-
👋 Exit Ticket & Closing (1)
- Direct students to the Exit Ticket in Google Classroom and ensure they submit their project plan.
- Engage students in discussions and encourage them to think critically about their projects.
- Provide opportunities for students to share their thoughts and ideas with the class.
- Ensure the provided materials, like the starter code and wireframes, are accessible to all students.
- Monitor students' progress during the research and planning stages, providing support as needed.
- Utilize volunteers to facilitate small group or individual support.
- Be flexible with timing, as some sections may take more or less time depending on the students' needs.
- n/a