Website Project-based learning
Shelley Songy
Created on October 26, 2024
More creations to inspire you
ANCIENT EGYPT
Learning unit
MONSTERS COMIC "SHARING IS CARING"
Learning unit
PARTS OF THE ANIMAL CELL
Learning unit
PARTS OF A PROKARYOTIC CELL
Learning unit
PARTS OF THE PLANT CELL
Learning unit
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