Pawsitive Web Design
Created byHrishi Vora
16 views0 downloads

Pawsitive Web Design

Grade 5Computer Science7 days
Fifth-grade students will design and build an interactive website for a local animal shelter to help connect animals with loving homes. Students will learn HTML, CSS, and JavaScript to create a user-friendly website with key information about the shelter, adoptable animals, and adoption procedures. The project culminates in a functional website prototype with interactive elements like image slideshows and adoption forms, enhancing students' web development skills and promoting community engagement.
Website DesignHTMLCSSJavaScriptAnimal ShelterUser InterfaceInteractivity
Want to create your own PBL Recipe?Use our AI-powered tools to design engaging project-based learning experiences for your students.
📝

Inquiry Framework

Question Framework

Driving Question

The overarching question that guides the entire project.How can we design and build an interactive and informative website to help a local animal shelter connect animals in need with loving homes?

Essential Questions

Supporting questions that break down major concepts.
  • How can we use technology to help animals in need?
  • What information is essential for a website about animal shelters?
  • How can we make the website easy to navigate and visually appealing?
  • What are the key features of a successful animal shelter website?
  • How can we use multimedia to enhance the website's effectiveness?

Standards & Learning Goals

Learning Goals

By the end of this project, students will be able to:
  • Students will be able to design and develop a functional website using HTML and CSS.
  • Students will be able to identify and incorporate key information about a local animal shelter, including animal profiles, adoption procedures, and contact information.
  • Students will be able to create interactive elements on the website, such as image galleries, videos, and interactive maps.
  • Students will be able to evaluate the effectiveness of their website based on usability and visual appeal.
  • Students will be able to collaborate effectively in teams to achieve a shared goal.

Computer Science Standards

CSStandard1
Primary
Create basic websites using HTML, CSS or other web design tools to present informationReason: This standard directly aligns with the project's focus on designing and building a website.

Entry Events

Events that will be used to introduce the project to students

Virtual Shelter Visit

Imagine walking into a crowded animal shelter where the noise is overwhelming, and it's hard to see each animal. How could we use a website to create a calmer, more inviting experience for potential adopters and showcase each animal's unique personality?
📚

Portfolio Activities

Portfolio Activities

These activities progressively build towards your learning goals, with each submission contributing to the student's final portfolio.
Activity 1

Building Blocks of the Web

Students will learn about the basic structure of an HTML document and create a simple webpage with headings, paragraphs, and images. They will use this webpage as the foundation for their animal shelter website.

Steps

Here is some basic scaffolding to help students complete the activity.
1. Introduce the basic structure of an HTML document (<!DOCTYPE html>, <html>, <head>, <title>, <body>).
2. Teach students how to create headings using <h1> to <h6> tags.
3. Guide students in creating paragraphs using the <p> tag.
4. Show students how to insert images using the <img> tag with the src attribute.
5. Have students create a simple webpage about a favorite animal, incorporating these elements.

Final Product

What students will submit as the final product of the activityA simple webpage containing text, headings, and an image, saved as an HTML file.

Alignment

How this activity aligns with the learning objectives & standardsCSStandard1 - Create basic websites using HTML, CSS or other web design tools to present information. This activity introduces students to the basic structure of a website and allows them to experiment with HTML elements.
Activity 2

Styling with Style: Introduction to CSS

Students will explore the power of CSS to style their webpages. They will learn how to add colors, change fonts, and create layouts to make their website visually appealing and well-organized.

Steps

Here is some basic scaffolding to help students complete the activity.
1. Introduce CSS and how to link a CSS file to an HTML file.
2. Teach students how to select HTML elements using tags, classes, and IDs.
3. Show how to style text using properties like color, font-family, and font-size.
4. Introduce the concept of CSS selectors and properties to change the appearance of the webpage elements.
5. Guide students in adding CSS styles to their existing webpage to change colors, fonts, and layout of their animal webpage.

Final Product

What students will submit as the final product of the activityA visually appealing webpage styled using CSS, saved as an HTML and a CSS file.

Alignment

How this activity aligns with the learning objectives & standardsCSStandard1 - Create basic websites using HTML, CSS or other web design tools to present information. This activity focuses on enhancing the visual appeal and organization of the website.
Activity 3

Structuring the Shelter: HTML and CSS Layout

Students will learn how to organize content into different sections using HTML elements such as <div> and <span>, along with CSS for layout. This will help create a clear structure for their animal shelter websites.

Steps

Here is some basic scaffolding to help students complete the activity.
1. Introduce the concept of using <div> for block-level content and <span> for inline content.
2. Explain how to apply CSS to <div> and <span> elements for layout purposes, using properties like display, position, and float.
3. Guide students in structuring their webpages using these elements, creating separate sections for information about adoptable pets.
4. Show examples of effective website layouts to inspire students and promote best practices.
5. Have students organize their animal shelter website content into clear sections: Home, About Us, Adoptable Pets, and Contact Us.

Final Product

What students will submit as the final product of the activityA well-structured webpage with clear sections for different types of content, like headings, images, descriptions, contact information, and adoption procedures.

Alignment

How this activity aligns with the learning objectives & standardsCSStandard1 - Create basic websites using HTML, CSS or other web design tools to present information. This activity helps students structure their website content effectively.
Activity 4

Bringing the Website to Life: Adding Interactivity

Students will create interactive elements like image slideshows and clickable adoption forms. This step helps create a more engaging and user-friendly website.

Steps

Here is some basic scaffolding to help students complete the activity.
1. Research and select JavaScript libraries or create custom JavaScript code for image slideshow functionality.
2. Implement the chosen JavaScript code to display images of shelter animals in an interactive slideshow.
3. Design a simple adoption interest form with fields for potential adopters' names and contact information.
4. Incorporate the adoption interest form into the website, making it functional for users to submit their information.
5. Integrate the interactive elements into their animal shelter websites.

Final Product

What students will submit as the final product of the activityAn interactive website prototype including an image carousel and a contact/adoption form.

Alignment

How this activity aligns with the learning objectives & standardsCSStandard1 - Create basic websites using HTML, CSS or other web design tools to present information. This activity teaches students to enhance user experience with interactive elements.
🏆

Rubric & Reflection

Portfolio Rubric

Grading criteria for assessing the overall project portfolio

Website Design and Development Rubric for Grade 5

Category 1

Website Design and Layout

Assess the structure, organization, and visual appeal of the website designed by the student.
Criterion 1

HTML Structure

Evaluate the use of HTML elements to create the webpage structure.

Exemplary
4 Points

Demonstrates a sophisticated and fully correct HTML structure with all required elements correctly used and organized.

Proficient
3 Points

Displays thorough understanding and mostly correct use of HTML structure with minor issues in organization.

Developing
2 Points

Shows emerging understanding with correct use of basic HTML elements but struggles with complex structures.

Beginning
1 Points

Shows initial understanding with frequent errors in HTML structure and organization.

Criterion 2

CSS Styling

Examine the application of CSS to enhance the text, color, and overall visual appeal of the website.

Exemplary
4 Points

Applies CSS in an innovative and advanced manner, resulting in an exceptionally appealing design.

Proficient
3 Points

Successfully applies CSS to style text and design, achieving overall visual appeal.

Developing
2 Points

Shows basic application of CSS with inconsistent style choices impacting visual appeal.

Beginning
1 Points

Applies minimal CSS with significant weaknesses in design elements.

Criterion 3

Layout Organization

Judge the clarity and usability of the website's layout.

Exemplary
4 Points

Exhibits an advanced and intuitive layout that enhances user navigation and engagement.

Proficient
3 Points

Presents a clear and functional layout that supports user navigation.

Developing
2 Points

Features a basic layout with some navigation issues.

Beginning
1 Points

Lacks an organized layout, resulting in difficult navigation.

Category 2

Content and Information Accuracy

Evaluate the relevance, completeness, and presentation of the content provided on the website.
Criterion 1

Content Relevance

Assess the appropriateness and alignment of website content with the animal shelter theme and goals.

Exemplary
4 Points

Provides comprehensive and highly relevant content that thoroughly supports the shelter's goals.

Proficient
3 Points

Delivers appropriate content that effectively addresses the shelter's theme.

Developing
2 Points

Includes suitable content with occasional misalignment with the shelter's goals.

Beginning
1 Points

Presents irrelevant or minimal content not aligned with project goals.

Criterion 2

Information Accuracy

Determine the accuracy of the informational content displayed on the website.

Exemplary
4 Points

Exhibits thorough research resulting in accurate and updated information across all sections.

Proficient
3 Points

Reflects correct and reliable information with minor inaccuracies.

Developing
2 Points

Contains some correct information intermixed with several inaccuracies.

Beginning
1 Points

Includes misleading or largely incorrect information.

Category 3

Interactivity and Engagement

Judge the effectiveness and functionality of interactive elements included in the website.
Criterion 1

Interactive Elements

Evaluate the functionality and engagement level of interactive components like slideshows and forms.

Exemplary
4 Points

Implements highly effective and user-friendly interactive elements that significantly enhance user engagement.

Proficient
3 Points

Includes functional and engaging interactive elements with minor usability issues.

Developing
2 Points

Attempts basic interactive features with major issues in functionality.

Beginning
1 Points

Lacks functioning interactive components or presents non-functional interactivity.

Category 4

Collaboration and Teamwork

Evaluate students’ ability to work collaboratively in achieving project goals.
Criterion 1

Team Collaboration

Assess the level of participation and teamwork in collaborative settings.

Exemplary
4 Points

Leads effectively in collaborative environments, contributing innovative ideas and fostering team dynamics.

Proficient
3 Points

Contributes positively to team goals, actively participates, and communicates effectively.

Developing
2 Points

Participates in team activities but with limited contributions or communication.

Beginning
1 Points

Engages minimally in team tasks and requires constant support.

Reflection Prompts

End-of-project reflection questions to get students to think about their learning
Question 1

What were your biggest challenges in designing and building the animal shelter website, and how did you overcome them?

Text
Required
Question 2

How did your website design choices contribute to the overall goal of helping the animal shelter?

Text
Required
Question 3

How effective was your teamwork in this project?

Scale
Required
Question 4

How did your understanding of HTML, CSS, and JavaScript improve during this project?

Text
Required
Question 5

If you were to continue working on this website, what improvements or additional features would you implement?

Text
Required