Want to create interactive content? It’s easy in Genially!
Website Project-based learning
Shelley Songy
Created on October 26, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
START >
<Website Project-based learning with HTML>
What do you already know about websites or HTML?
<Intro to Web Design with HTML>
Welcome to our project on web design!
You will learn basic HTML and create your own webpabe
By the end, you will have a functional homepage to show off
>
>
>
>
// About our students
- 8th grade students
- Exploring Computer Science
// standards
- 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.
>
>
Student tools:
- Laptops
- HTML tutorials (w3schools)
- HTML editor (codehs sandbox)
- Copy paper and colored pencils for storyboarding
Teacher tools:
- Laptop
- Projector
- HTML editor (codehs sandbox)
- Storyboard example
// Materials and Technologies
>
>
Elements of Project-based Learning
>
>
>
>
// Anchor
- 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.
// Task
- 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?
>
>
Debugging and Testing (10 min): Students experiment with HTML tags to ensure their website functions as intended.
>
>
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.
<Directions>
Journal Discussion (5 min): Students reflect on how they’ve interacted with websites.
Brainstorming Session (5 min): Students brainstorm ideas for their website (e.g., a personal portfolio, fan page, community service page).
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.
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.
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. Practice: https://kahoot.it/challenge/03262065?challenge-id=593d1325-e4f8-4052-a3da-dc0d56550e55_1733533562358
// Student Choices
Choose your website theme.
Decide on content and design elements
Select layout and structure
>
>
// Student inquiry
Research
>
>
Enhance
Investigate
Research additional HTML tags and elements using w3schools
Explore ways to enhance your website
Investigae web design best practices
// Collaboration and Teamwork
Pairs
Work in pairs to design the website
Rotate roles
Driver (typing code) and navigator (guiding code typed)
Share
Share ideas and problem-solve together
>
>
// teacher support
- Ongoing feedback during coding process with individual pairs
- Help troubleshoot HTML issues
- Guide students to resources for self-learning
>
>
>
>
<Student Reflection>
- 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?
>
>
// Public Presentation
- 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?
Possible points = 12
0 Points
1 Point
2 Points
No storyboard was turned in
Contains no required tags
Did not rotate role regularly or stay in role
Did not provide meaningful feedback or incorporate it, communicate well or overcome obstacles
3 Points
Reflection
Storyboard Design
Collaboration
// assessment plan
HTML Coding
>
>
Contains layout, navigation, content and design
Contains all required tags plus additional self-taught tags
Rotated roles regularly and stayed in role
Provided meaningful feedback to others and incorprated others' feedback & communicated well with partner & overcame obstacles
Contains 2-3 out of 4 elements
Contains only required tags
Rotated roles regularly but did not say in role
Either did not incorporate others' feedback or provide it to others but communicated well & overcame obstacles
Contains 1 out of the 4 elements
Contains most required tags
Stayed in role but did not rotate regularly
Did not communicate well or overcome obstacles but did provide meaningful feedback to others and did incorporate others'