Created byHrishi Vora

23 views0 downloads

Pawsitive Web Design

Grade 7Computer Science7 days

In the Pawsitive Web Design project, 7th-grade students learn to create a user-friendly website for a local animal shelter, using HTML and CSS. By focusing on key website components such as animal profiles, adoption applications, and clear navigation, students address both technical skills and ethical considerations in portraying animals online. This project combines learning objectives in computer science with real-world implications, guiding students to build a visually appealing and functional adoption platform while reflecting on the impact of their work on potential adopters and the shelter.

HTMLCSSWeb DesignAnimal AdoptionEthical ConsiderationsUser Experience

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 develop a user-friendly website, using HTML and CSS, that effectively showcases adoptable animals, facilitates online adoption applications, and addresses ethical considerations for a local animal shelter?

Essential Questions

Supporting questions that break down major concepts.

How can we use HTML to structure the content of a website for an animal shelter?
How can CSS be used to style the website to make it visually appealing and user-friendly?
What are the key elements of an effective animal adoption website (e.g., animal profiles, adoption application forms)?
How can we organize website information to ensure easy navigation for potential adopters?
What are the ethical considerations when showcasing animals online for adoption (e.g., responsible portrayal, avoiding misrepresentation)?

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 structure website content using HTML elements like headings, paragraphs, lists, and images.
Students will be able to style website elements using CSS properties such as font, color, layout, and responsiveness.
Students will be able to create an online adoption application form.
Students will demonstrate understanding of ethical considerations related to online animal adoption, such as responsible portrayal and avoiding misrepresentation.

teacher_provided

Primary

How to make a simple website using Html and CSSReason: This standard directly aligns with the project's focus on creating a website using HTML and CSS.

Entry Events

Events that will be used to introduce the project to students

A Pawsitive Mission

Imagine a world where every paw finds a home. Sadly, many animals in our local shelters are waiting for their forever families. What if *you* could be their voice? We're partnering with the [Local Animal Shelter Name] to revolutionize their adoption process by building them a state-of-the-art website!

📚

Portfolio Activities

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

Activity 1

Building Blocks: Laying the Foundation with HTML

Students will learn the basics of HTML and create the fundamental structure for their animal shelter website. They will use HTML elements like headings, paragraphs, lists, and image placeholders to organize the website's content.

Steps

Here is some basic scaffolding to help students complete the activity.

1. Introduction to HTML and its purpose in website development.

2. Hands-on practice with basic HTML tags: headings (<h1> to <h6>), paragraphs (<p>), lists (<ul>, <ol>, <li>), and images (<img>).

3. Creating the HTML structure for the website's homepage, animal profiles section, and adoption application section.

Final Product

What students will submit as the final product of the activityA basic HTML file with the core structure of the website, including sections for a homepage, animal profiles, and an adoption application form.

Alignment

How this activity aligns with the learning objectives & standardsCovers HTML structure, a key component of the standard: How to make a simple website using HTML and CSS.

Activity 2

Styling with Flair: Bringing the Website to Life with CSS

Students will delve into CSS and use it to style the website they structured in the previous activity. They will learn to control fonts, colors, layout, and basic responsiveness.

Steps

Here is some basic scaffolding to help students complete the activity.

1. Introduction to CSS and its role in website styling.

2. Experimenting with CSS properties for fonts, colors, backgrounds, and basic layout (using properties like `display`, `padding`, `margin`).

3. Applying CSS to the HTML structure created in the previous activity to enhance the visual appeal and user experience of the animal shelter website.

Final Product

What students will submit as the final product of the activityA visually appealing and user-friendly website with styled elements like headings, paragraphs, lists, images, and navigation.

Alignment

How this activity aligns with the learning objectives & standardsCovers CSS styling, another key part of the standard: How to make a simple website using HTML and CSS.

Activity 3

Content is King: Showcasing Adorable Adoptables

Students will populate their website with compelling content, including images and details of adoptable animals, adoption stories, and information about the animal shelter. They will also finalize their online adoption application form.

Steps

Here is some basic scaffolding to help students complete the activity.

1. Gathering images and information about adoptable animals from the local animal shelter.

2. Creating engaging animal profiles, including high-quality images, descriptions, and personality traits.

3. Developing the online adoption application form with relevant fields (e.g., name, contact details, reasons for adoption).

4. Adding informational content about the animal shelter, its mission, and adoption procedures.

Final Product

What students will submit as the final product of the activityA complete website with engaging content showcasing adoptable animals and a functional online adoption application.

Alignment

How this activity aligns with the learning objectives & standardsIntegrates all elements of the standard: How to make a simple website using HTML and CSS.

🏆

Rubric & Reflection

Portfolio Rubric

Grading criteria for assessing the overall project portfolio

Animal Adoption Website Project Rubric

Category 1

HTML Structure

Evaluation of the organization and structure of HTML used in the website.

Criterion 1

HTML Element Usage

Assesses the appropriate and effective use of HTML elements such as headings, paragraphs, lists, and images.

Exemplary

4 Points

Uses a wide range of HTML elements effectively, integrating them seamlessly to create a logically structured website.

Proficient

3 Points

Uses a variety of HTML elements appropriately, demonstrating a clear understanding of content organization.

Developing

2 Points

Uses a limited range of HTML elements, with occasional errors or gaps in content structure.

Beginning

1 Points

Struggles to apply basic HTML elements, resulting in a disorganized content structure.

Criterion 2

Content Structure

Assesses the logical organization of the website's content across different sections.

Exemplary

4 Points

Demonstrates an exemplary content structure across all website sections, ensuring intuitive navigation.

Proficient

3 Points

Content is logically structured, with sections clear and easily navigable.

Developing

2 Points

Content structure shows basic organization with some sections unclear or hard to navigate.

Beginning

1 Points

Content structure is confusing or lacking logical flow, making navigation difficult.

Category 2

CSS Styling

Assessment of students' ability to apply CSS to enhance the website's visual appeal and usability.

Criterion 1

Styling Techniques

Evaluates the range and effectiveness of CSS styling techniques applied.

Exemplary

4 Points

Applies a wide variety of CSS styling techniques, enhancing aesthetics and functionality.

Proficient

3 Points

Applies CSS styling effectively, resulting in a visually cohesive website.

Developing

2 Points

Uses basic CSS styling with some errors or inconsistent application.

Beginning

1 Points

Lacks understanding in CSS styling, resulting in a plain or unformatted website.

Criterion 2

Responsiveness

Assesses how styling choices affect the responsiveness and adaptability of the website.

Exemplary

4 Points

Demonstrates exceptional responsiveness across all device types, enhancing usability.

Proficient

3 Points

Shows good responsiveness, works well on most devices.

Developing

2 Points

Limited device responsiveness, with some issues in layout or functionality on different screens.

Beginning

1 Points

Struggles with responsiveness, causing usability issues on multiple devices.

Category 3

Content Development

Examination of the website content focusing on informational accuracy, engagement, and ethical considerations.

Criterion 1

Animal Profiles

Assesses the quality and effectiveness of the animal profiles created.

Exemplary

4 Points

Provides detailed, compelling animal profiles, showcasing personalities and needs effectively.

Proficient

3 Points

Creates clear and informative animal profiles, adequately representing animals' attributes.

Developing

2 Points

Animal profiles are basic with minimal details or appealing elements.

Beginning

1 Points

Animal profiles are incomplete or inaccurate, lacking important information.

Criterion 2

Adoption Application Form

Evaluation of the comprehensiveness and functionality of the adoption application form.

Exemplary

4 Points

Develops a thorough and functional adoption application form, incorporating all relevant fields.

Proficient

3 Points

Form is comprehensive and functional, with most necessary fields included.

Developing

2 Points

Form lacks some key fields or has functionality issues.

Beginning

1 Points

Form is incomplete or not functional, hindering application processes.

Criterion 3

Ethical Considerations

Assesses understanding of ethical portrayal and representation in animal adoption.

Exemplary

4 Points

Demonstrates insightful consideration of ethical representation and privacy of animal data.

Proficient

3 Points

Shows good awareness of ethical considerations and portrays animals responsibly.

Developing

2 Points

Addresses some ethical concerns without comprehensively covering them.

Beginning

1 Points

Fails to consider necessary ethical issues in presenting animal data.

Reflection Prompts

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

Question 1

Reflect on the overall process of designing and developing the animal shelter website. What were the most challenging aspects, and how did you overcome them?

Text

Required

Question 2

How well did your final website meet the needs of the local animal shelter and potential adopters?

Scale

Required

Question 3

What ethical considerations did you encounter while creating the website content, specifically regarding the portrayal of animals and adoption information?

Text

Required

Question 4

How did your understanding of HTML and CSS evolve throughout this project?

Text

Required

Question 5

What did you learn about user experience (UX) and user interface (UI) design while creating the website?

Text

Required

Question 6

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

Text

Optional