Created byHrishi Vora

30 views0 downloads

School Event Planner Website Design

Grade 11Computer Science7 days

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 an interactive website using HTML, CSS, and JavaScript that effectively organizes, tracks, and promotes school events while ensuring usability, accessibility, and student engagement?

Essential Questions

Supporting questions that break down major concepts.

How can we effectively use HTML, CSS, and JavaScript to create an interactive and user-friendly website for planning school events?
What information is essential to include on an event planning website, and how can it be organized for accessibility and usability?
In what ways can we ensure our website is engaging and encourages student participation in school events?
How can we implement features that allow users to track and manage multiple events simultaneously?
What are the best practices for collaborating as a team in web development projects like this one?

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, CSS, and JavaScript that meets specified usability and accessibility standards.
Students will demonstrate their ability to work collaboratively to plan and implement features for an event planning website.
Students will effectively organize and present information relevant to school events on their website to enhance user engagement and accessibility.
Students will research best practices in web design and incorporate this knowledge into their site development.

Common Core Standards

CCSS.ELA-LITERACY.W.11-12.6

Primary

Use technology, including the Internet, to produce and publish writing and to interact and collaborate with others.Reason: Developing a website involves writing and publishing content online, while also incorporating collaboration in the development process.

CCSS.ELA-LITERACY.W.11-12.7

Secondary

Conduct short as well as more sustained research projects to answer a question or solve a problem.Reason: Students will need to conduct research to effectively organize and present their website content.

CCSS.ELA-LITERACY.W.11-12.9

Supporting

Draw evidence from literary or informational texts to support analysis, reflection, and research.Reason: Students may need to refer to guidelines and best practices in web development, which requires drawing on various texts.

CCSS.ELA-LITERACY.SL.11-12.1

Primary

Initiate and participate effectively in a range of collaborative discussions with diverse partners, building on others' ideas and expressing their own clearly and persuasively.Reason: Collaboration is essential in the project to ensure effective team communication and brainstorming.

CCSS.ELA-LITERACY.SL.11-12.4

Primary

Present information, findings, and supporting evidence clearly and effectively.Reason: Students will need to present their final project and findings from their research in a coherent and engaging way.

Entry Events

Events that will be used to introduce the project to students

The Great Debate: Event Planning Edition

Divide students into teams and present them with differing viewpoints on why certain types of events (e.g. dances vs. academic showcases) should be prioritized. They must gather evidence, create presentations, and defend their stance, simulating the initial steps in event planning and community engagement.

📚

Portfolio Activities

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

Activity 1

CSS Design Challenge

Students will learn CSS to enhance the styling of their previously created HTML webpage.

Steps

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

1. Introduce CSS concepts, focusing on selectors, properties, and how to link stylesheets to HTML.

2. Students will choose a color scheme and font styles for their webpage to make it visually appealing.

3. Students will implement CSS styling into their webpage, including layout adjustments, typography, and colors.

4. Conduct a gallery walk to showcase each other's styled webpages.

Final Product

What students will submit as the final product of the activityA styled webpage using CSS that includes proper layout, color scheme, and typography tailored to their event theme.

Alignment

How this activity aligns with the learning objectives & standardsThis activity supports the standard of website creation by emphasizing visual design through CSS, essential for web development.

Activity 2

JavaScript Interactivity Quest

Students will introduce JavaScript to their webpage to add interactivity such as event tracking.

Steps

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

1. Discuss JavaScript basics, including variables, functions, events, and DOM manipulation.

2. Students will brainstorm interactive features related to their event planning—like countdown timers, or RSVP forms.

3. Implement a simple JavaScript function to improve their webpage, such as a button that changes text or displays an alert.

4. Test and debug each other’s JavaScript functionality.

Final Product

What students will submit as the final product of the activityAn interactive webpage with JavaScript that includes at least one functional interactive feature related to the school event planning theme.

Alignment

How this activity aligns with the learning objectives & standardsThis activity meets the standard for website creation by incorporating JavaScript, showcasing dynamic behavior in web applications.

Activity 3

Event Portfolio Presentation

Students will compile their work into a portfolio and present their website project to the class.

Steps

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

1. Organize all sections of the website project into a digital portfolio, including HTML, CSS, and JavaScript components.

2. Create a presentation highlighting the event planning aspect and the technical features implemented on their site.

3. Rehearse individual presentations to provide a clear summary of their project.

4. Conduct a presentation day where each student shares their portfolio with the class.

Final Product

What students will submit as the final product of the activityA digital portfolio that includes the website link and presentation slides, showcasing their learning and project journey.

Alignment

How this activity aligns with the learning objectives & standardsThis activity ensures students meet the standard by reflecting their comprehensive understanding of web development in a coherent portfolio presentation.

Activity 4

Website Foundations Bootcamp

Students will learn the fundamentals of HTML by creating a basic webpage structure.

Steps

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

1. Introduce HTML basics including elements, tags, and structure.

2. Students will brainstorm topics they can use for their webpage—ideas can include school events, sports, clubs, or personal interests.

3. Students will use an HTML template to create their first webpage, incorporating headings, paragraphs, and images.

4. Peer review each other's webpage structure for feedback.

Final Product

What students will submit as the final product of the activityA simple static webpage that demonstrates proper HTML structure and incorporates at least one image and two headings.

Alignment

How this activity aligns with the learning objectives & standardsThis activity aligns with the standard of creating a website using HTML, laying the groundwork for subsequent CSS and JavaScript use.

🏆

Rubric & Reflection

Portfolio Rubric

Grading criteria for assessing the overall project portfolio

Web Development Project Evaluation Rubric

Category 1

Technical Skills and Implementation

Assessment of students' application of HTML, CSS, and JavaScript to create an interactive, functional website that aligns with web development standards.

Criterion 1

HTML Structure and Content

Evaluate the correct use and organization of HTML elements to create a structured webpage layout.

Exemplary

4 Points

HTML is correctly structured, demonstrating a clear, logical hierarchy with extensive use of semantic elements.

Proficient

3 Points

HTML structure is well organized with appropriate use of elements, enhancing readability and functionality.

Developing

2 Points

HTML structure is generally correct, but lacks coherence or logical organization.

Beginning

1 Points

HTML structure lacks organization, with frequent errors in tagging and hierarchy.

Criterion 2

CSS Design and Usability

Assess the use of CSS for styling, including layout adjustments, color schemes, and typography to enhance user experience.

Exemplary

4 Points

CSS styling is highly effective, greatly enhancing visual appeal and usability with creative and consistent design choices.

Proficient

3 Points

CSS is effectively used, with good visual consistency and appropriate styling that supports usability.

Developing

2 Points

CSS is used with some effective elements, but there are inconsistencies in style and layout.

Beginning

1 Points

CSS application is basic with frequent inconsistencies and limited impact on visual and user experience.

Criterion 3

JavaScript Functionality and Interactivity

Evaluate the use of JavaScript to implement dynamic and interactive features that enhance user engagement on the website.

Exemplary

4 Points

JavaScript is used innovatively to implement complex, engaging features that significantly enhance interactivity.

Proficient

3 Points

JavaScript is effectively used to create functional interactive elements, enhancing user engagement.

Developing

2 Points

JavaScript is applied with basic functionality; some features may not work consistently.

Beginning

1 Points

JavaScript features are limited with frequent errors and minimal impact on interactivity.

Category 2

Research and Planning

Evaluation of the research conducted to inform website content and the planning process involving feature development and user engagement strategies.

Criterion 1

Research Quality and Application

Assess the extent and usefulness of research conducted to support the website’s content and functionality.

Exemplary

4 Points

Conducted comprehensive research, utilizing diverse sources to enrich content and inform design decisions innovatively.

Proficient

3 Points

Conducted thorough research, applying it effectively to enhance content and feature planning.

Developing

2 Points

Conducted basic research; application to the project is limited or lacks depth.

Beginning

1 Points

Minimal research conducted with little to no impact on the website's content or features.

Criterion 2

Project Planning and Time Management

Assess the effectiveness of planning and time management strategies used to complete the project within determined deadlines.

Exemplary

4 Points

Demonstrated excellent planning and time management, consistently meeting or exceeding deadlines with well-organized project stages.

Proficient

3 Points

Managed time and project stages effectively, mostly adhering to deadlines with organized workflow.

Developing

2 Points

Inconsistencies in planning and time management, impacted project timelines.

Beginning

1 Points

Lacked effective project planning and time management, resulting in missed deadlines and disorganization.

Category 3

Collaboration and Presentation

Evaluate students' collaboration throughout the project and their ability to effectively present their final website and learning journey.

Criterion 1

Collaboration and Teamwork

Assess students’ abilities to work collaboratively, leveraging diverse skills and opinions to enhance project outcomes.

Exemplary

4 Points

Exhibited leadership and actively engaged in collaborative teamwork, significantly contributing to project success.

Proficient

3 Points

Effectively contributed to team efforts, demonstrating solid teamwork skills and collaboration.

Developing

2 Points

Participated in team efforts, but with limited contribution or engagement.

Beginning

1 Points

Minimal participation in team activities, hindering collaborative success.

Criterion 2

Presentation and Communication Skills

Evaluate the ability to effectively present the final product and key learnings from the project development process.

Exemplary

4 Points

Presented with clarity, confidence, and engagement, using persuasive communication that effectively conveyed project insights.

Proficient

3 Points

Communicated project details clearly, with moderate engagement and coherence.

Developing

2 Points

Presentation lacked clarity or engagement, with some difficulty conveying key project aspects.

Beginning

1 Points

Presentation was unclear and lacked engagement, failing to convey key information.

Reflection Prompts

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

Question 1

Reflect on the process of developing a website using HTML, CSS, and JavaScript. What were the most challenging aspects, and how did you overcome them?

Text

Required

Question 2

How well do you feel your final website project meets the usability and accessibility standards?

Scale

Required

Question 3

Which feature of your website are you most proud of, and why?

Text

Required

Question 4

In what ways did collaborating with classmates enhance your web development project?

Multiple choice

Required

Options

Enhanced a lot

Enhanced a little

Did not enhance

Made it difficult

Question 5

Reflect on how the entry event, 'The Great Debate: Event Planning Edition,' influenced your understanding of event planning and how it applied to your web project.

Text

Required

Question 6

Rate your confidence in using HTML, CSS, and JavaScript at the end of this project.

Scale

Required