IdeaSpark ES:Creative Project

Session 7

Understanding Websites

• Congratulate students on building their first web page. Tell them that in this next project, they're going to work in pairs to build their own website about whatever topic they choose
• Help the students understand what websites are used for by discussing the difference between web content and other forms of content. This is intended to prime them for thinking of topics and ideas. As they call out ideas, write them on the board for everyone to see.
  • A website can tell a story, but how is a website different from a book?
  • A website can give you news, but how is it different from a newspaper?
  • A website can show you videos, but how is it different from TV?
  • A website can teach you how to do things, but how is this different from a textbook?
  • What else can a website do that's unique?

Choose a topic

• Now it's time to decide what kind of website you'd like to build. Here are some ideas to get you started:
  • Make a website that tells a story. Each part of the story can be a different page. Use different visual elements like images and video to help tell the story. You could even make a "choose your own adventure" game using hyperlinks.
  • Make a website that teaches something interesting. For example, maybe someone would like to know about different kinds of Dinosaurs. Think of ways to help make learning more fun for the reader!
  • Your website could help someone find other information on the web about a particular subject. You can link to other websites that are relevant to your subject.
  • Your website could be a catalog of something, for example, maybe it's an index of yummy dessert recipes, or maybe it's a collection of character bio's from your favorite TV show.

Ideate

Brainstorming: Students brainstorm and write down ideas about their website. Write the "Rules for Brainstorming" on the board:

• Generate as many ideas as possible.
• Don’t judge, don't criticize. There are no bad ideas.
• Build on the ideas of others.
• Encourage wild ideas.
• No ideas from adults - kids only!

Wireframing:' Students use pencil and paper to sketch their websites out. The final site doesn't have to look exactly like you draw it on paper - the goal is to visualize your ideas before coding.

Begin prototyping

Have students with their partner to begin coding their website. Remembered to enforce pair programming rules when possible, and use your Power Tools !

Remember that to create multiple pages in pencil code, you can click the blue folder icon as shown in the Getting Started section of the student guide

Re-using CSS code between pages

When students start building multiple pages, that would be a good time to introduce them to external stylesheets . They'll need relieved to know that they won't have to re-type their CSS code for every page!

Session 8

• Continue (or begin) prototyping
• Share your prototype idea (even if you only have sketches so far), get feedback

Session 9

• Review and understand feedback, decide on what to
• Learn how to plan your project
• Continue prototyping

Session 10

• Continue prototyping
• Share progress, get feedback

Session 11

• Review and understand feedback
• Update project plan
• Continue prototyping

Session 12

• Review progress, how to prioritize and stay on track
• Continue prototyping
• Prepare for Demo Day

Session 13

• Prepare for Demo Day
• Continue prototyping if needed

Session 14

• Reflect
• Something fun?