top of page

Create an Interactive CS Hero Website

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.



  • ​Students will need to be signed up to a class on Wix Education. If you haven’t already, you can apply for a Wix Education Account at

  • To join Wix Education, students will need to be aged 13+ (middle/high school), and located in the US or Canada

  • Students will need access to a computer (rather than an iPad or mobile device) and an internet connection.

Explore (20 mins)

Create (1 hour)

Share & Reflect (15 mins)

Reference Materials

CSEdWeek CS Heroes page

My CSEdWeek CS Hero Poster Activity

1. Explore (20 mins)

Who is your CS Hero?


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 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.


bottom of page