Want to make creations as awesome as this one?

Transcript

<Website Project-based learning with HTML>

START >

>

>

By the end, you will have a functional homepage to show off

3

You will learn basic HTML and create your own webpabe

2

Welcome to our project on web design!

1

<Intro to Web Design with HTML>

What do you already know about websites or HTML?

4

  • 8th grade students
  • Exploring Computer Science

// About our students

>

>

>

>

  • AP.2.4a Students should break down problems into subproblems, which can be further broken down to smaller parts.
  • AP.2.6a Students should begin to seek diverse perspectives through the design process to improve their computational artifacts.
  • ISTE 1.4c Students develop, test and refine prototypes as part of a cyclical design process.
  • ISTE 1.6b Students create original works or responsibly repurpose or remix digital resources into new creations.

// standards

>

>

// Materials and Technologies

Teacher tools:

  • Laptop
  • Projector
  • HTML editor (codehs sandbox)
  • Storyboard example

Student tools:

  • Laptops
  • HTML tutorials (w3schools)
  • HTML editor (codehs sandbox)
  • Copy paper and colored pencils for storyboarding

>

>

Elements of Project-based Learning

  • Discuss the role websites play in everyday life and industries like e-commerce, media, and education.
  • Show examples of websites with good and bad design and ask students to share experiences of websites they've interacted with (both positive and negative).
  • Anchor the project by explaining that students will create their own personal website, which could help them showcase their interests or ideas to a global audience.

// Anchor

>

>

>

>

  • Design and develop a homepage using HTML
  • Start with a storyboard on paper to map out the layout, content, navigation and design
  • Translate storyboard into HTML code
  • What kind of website would you like to create?

// Task

HTML Demo (15 min): The teacher demonstrates how to use an HTML editor, covering basic tags like <html>, <head>, <body>, <h1>, <p>, <br/>, and <hr/> while students take notes on their guided notes page.

5

Gallery Walk (15 min): Students display their storyboards on the wall and provide feedback to peers using post-it notes, noting 2 positives and 1 improvement.

4

Create Storyboard (20 min): Using copy paper and colored pencils, students sketch out their homepage layout, identifying key sections like navigation, design elements, and content.

3

Brainstorming Session (5 min): Students brainstorm ideas for their website (e.g., a personal portfolio, fan page, community service page).

2

Journal Discussion (5 min): Students reflect on how they’ve interacted with websites.

1

<Directions>

HTML Page Decision and Creation (30-40 min): As a pair, students decide one storyboard to create this time. Students work in pairs to build one of their homepages based on their selected storyboard.

6

>

>

Debugging and Testing (10 min): Students experiment with HTML tags to ensure their website functions as intended.

7

>

>

Select layout and structure

Decide on content and design elements

Choose your website theme.

// Student Choices

Investigae web design best practices

Explore ways to enhance your website

Research additional HTML tags and elements using w3schools

Investigate

Enhance

>

>

Research

// Student inquiry

>

>

Share ideas and problem-solve together

Share

Driver (typing code) and navigator (guiding code typed)

Rotate roles

Work in pairs to design the website

Pairs

// Collaboration and Teamwork

>

>

  • Ongoing feedback during coding process with individual pairs
  • Help troubleshoot HTML issues
  • Guide students to resources for self-learning

// teacher support

  • Reflect on gallery walk feedback and make changes accordingly
  • Reflect on challenges faced while coding and partner communication throughout the project
  • Discuss how you overcame obstacles and miscommunication
  • Consider what you've learned about web design
  • How has this project changed your view of websites?

<Student Reflection>

>

>

  • Present storyboards and websites in gallery walk
  • Provide and receive peer feedback
  • Explain your design choices and HTML implementation
  • What aspect of your site are you most proud of?

// Public Presentation

>

>

Did not communicate well or overcome obstacles but did provide meaningful feedback to others and did incorporate others'

Stayed in role but did not rotate regularly

Contains most required tags

Contains 1 out of the 4 elements

Either did not incorporate others' feedback or provide it to others but communicated well & overcame obstacles

Rotated roles regularly but did not say in role

Contains only required tags

Contains 2-3 out of 4 elements

Provided meaningful feedback to others and incorprated others' feedback & communicated well with partner & overcame obstacles

Rotated roles regularly and stayed in role

Contains all required tags plus additional self-taught tags

Contains layout, navigation, content and design

>

>

HTML Coding

// assessment plan

Collaboration

Storyboard Design

Reflection

3 Points

Did not provide meaningful feedback or incorporate it, communicate well or overcome obstacles

Did not rotate role regularly or stay in role

Contains no required tags

No storyboard was turned in

2 Points

1 Point

0 Points

Possible points = 12

/

Project completed