Lesson Outline
Before you begin Happy CSEdWeek! If this is your first time with a Wix Education Lesson plan, welcome! This guide will walk you through everything you need to create a CS Hero Website with your students.
Requirements | Agenda |
| Explore (20 mins) Create (1 hour) Share & Reflect (15 mins) Reference Materials My CSEdWeek CS Hero Poster Activity |
1. Explore (20 mins)
Who is your CS Hero?
Intro
This Lesson Plan builds on CSEdWeek’s CS Hero Poster series, which encourages students to choose and celebrate a “CS Hero” — computer scientists who are making advancements in computer science, with a special focus on computer science efforts for social impact. Before you dive into this lesson plan, make sure to explore the CSEdWeek site!
Show an example
Before students get started, it’s helpful to have a sense of what they’re doing. Explain to students that they’ll be creating websites to celebrate CS Heros in honor of CSEdWeek. You may ask that class “What is a CS Hero?” to get the conversation started, and surface answers from students.
Next, show students an example website that celebrates a CS Hero. You might display this website on your board, or share the URL with your students to explore on their own. While students explore the site, you might ask what they notice about how the site was made, what they like, what they might change, and what they would do with their own sites to get ideas flowing.
Choose a CS Hero
You may have walked through the Welcome Activities on the CSEdWeek site to introduce your students to the idea of selecting and creating a website for their CS Hero. Or, your students may have already created posters for their CS Hero. Either way, the first step in this project is selecting a hero! You have a couple of options here:
Encourage your students to explore the CS Heros (scroll down on this page)
Support your students in researching a different CS Hero. They can choose a CS Hero from the past, or profile a person currently working in the world of CS.
↪ Teacher tip
If your students are choosing their own CS Heros, you may want to compile a list beforehand, or links they can check out, that include a diverse range of folks working in CS. Representation is important — the more our students can see themselves in their CS Heros, it’s likely that they’ll feel more connected.
Surface a few details about your CS Hero
Once students have chosen a CS Hero, encourage them to pull out a few facts to include in their website. CSEdWeek has a graphic organizer here to help think about what kind of information they might want to research.
2. Create (1 hour)
Create a website to honor your CS Hero!
Optional: Take a tour of Wix Education If this is your students’ first time using Wix Education, you may want to give students time to get acclimated to the platform before you dive in, perhaps having all students log in and sign up at the same time. (Reminder: you’ll need to add students to a class for them to be recognized by the Wix Education system!) For this lesson, they’ll be using the Templates tab.
Use a template to create an interactive website on a CS Hero
Students can follow these steps to create their own interactive CS Hero Websites:
1. Choose a template
For students more familiar with Wix Education: Encourage them to choose a template that speaks to them.
For students beginning with Wix Education: Curb decision fatigue by asking students to navigate to a specific template, such as the “Overlapping Layout” template used in the example website.
2. Add in the essentials
Students can begin by adding in basic information about their CS Hero, such as their name, where they work or what they do, and an image of their hero. Here are a few Wix Education Activities you might point students to if they get stuck or need ideas:
3. Customize the site and make it your own
Students can add their own personal flair by adding decorative vector art, playful backgrounds, and adjusting the site’s color scheme and/or fonts to reflect their personalities.
4. Add some interactivity
Remember, websites are so much more than virtual posters! This is a chance for students to truly bring their CS Heros to life by adding animations, links to external resources, and custom interactions. Check out these activities for a few ideas:
5. Make it accessible and mobile friendly
As students work on their sites, you might remind them to ensure that their sites are accessible by adding alt text to media, giving their site a heading structure, and making sure their color contrast is high. They can also make sure that the mobile view of their site is designed the way they’d like it to look.
Check out these two activities to learn more:
↪ Teacher tip
There’s no “right” way to complete this activity: students can design their CS Hero posters however they’d like, with as much or as little content as you and your students see fit. However, if students finish quickly, you might encourage them to think about what additional sections or designs they can add to their site, or even take their sites further with code!
3. Share & Reflect (15 mins)
What did you create?
Invite students to share their sites with each other
When students are done, it’s time to celebrate! If students feel comfortable, they can publish their sites and add the URLs to a document for others to check out their work. You might even share their sites with your greater school community, like parents, caregivers, and other students. If sharing URLs is not possible, you might have students show their sites on their computer screens (if you are in person), and have students walk around the room to check out each others’ sites, Gallery Walk style. Or, you can invite students one at a time to share their sites with the class on a large screen.
Share your students' sites with the Wix Education team!
We’d love to see what your students create. You can share student sites with us by emailing education@wix.com for a chance to be featured!
ISTE Standards
6b: Students create original works or responsibly repurpose or remix digital resources into new creations.
6d: Students publish or present content that customizes the message and medium for their intended audiences.