Capstone II

In the first lesson of this engaging and hands-on course, students embark on the journey of crafting a responsive website for Harmony Wildlife Sanctuary starting from the ground up. They delve into essential website design principles, including crafting the foundational HTML structure, constructing key elements of a website layout, mastering flexbox grids, and more. Following this lesson, they are well-prepared to dive into the next phase of the project, where they will implement responsiveness into the site.

In this lesson, students enhance the rudimentary website created in the previous session by incorporating responsive design elements into the Harmony Wildlife Sanctuary’s website. They adopt a mobile-first strategy and gain hands-on experience in utilizing media queries to tailor the website’s styling for various devices. Furthermore, they harness the power of CSS Flexbox to craft a flexible grid-based layout for the various sections of the site.

In this lesson, students are tasked with crafting the Wildlife page for the Sanctuary’s website. They skillfully integrate each animal onto the webpage, providing their respective names and concise descriptions. Throughout the lesson, they thoroughly revisit a variety of Flexbox principles, covering aspects like content alignment, element wrapping, and the arrangement of elements within a grid.

In this lesson, students conclude their work on the Harmony Wildlife Sanctuary website by constructing an “About Us” page. This page provides a comprehensive source of information about the organization and highlights its pricing details. Throughout this endeavor, students have the chance to solidify their comprehension of essential concepts, including aligning content, employing the CSS child selector, adjusting element flow, and employing keyframes to animate elements.

In this lesson, students embark on the inception of a new project known as “Dragon Crusade,” a tower defense-style game where players interact by clicking on towers to defend against dragons and safeguard the kingdom. Within this particular session, students lay the groundwork for the game, involving the creation of its game interface and the associated website. This endeavor allows them to solidify their grasp of fundamental HTML and CSS principles, encompassing aspects like website layout components and the implementation of CSS variables.

In this lesson, students advance further in their development of the Dragon Crusade tower defense game. Their primary emphasis is on incorporating a start menu and animating dragons as they traverse the screen upon initiating the game by pressing the start button. This presents them with a valuable opportunity to strengthen their understanding of various concepts, including CSS animations, jQuery click events, JavaScript arrays, and other pertinent topics!

In this lesson, students press on with the development of their Dragon Crusade game, this time focusing on the task of identifying collisions between the dragons, castles, and arrows. In the process, they revisit the art of collision detection in JavaScript, determining element positions and widths, mastering click events, and concealing elements as needed.

In this lesson, the students successfully wrap up their Dragon Crusade game by integrating victory and defeat criteria, along with an accompanying high-score monitoring system. They accomplish this by utilizing conditional statements to assess whether the player’s health dropped below a predefined threshold or if they successfully endured until the timer expired. Furthermore, the students acquire the skills to store the user’s score in their browser’s local storage and retrieve this data upon page loading.

In this lesson, students embark on the commencement of a web application called Pixel Pals. This application is designed to include both a login system and an engaging interactive pet game, offering a valuable opportunity to hone their skills in crafting web interfaces. The primary emphasis in this lesson revolves around establishing the website’s foundation and executing the login system, which involves utilizing CSS variables, HTML input boxes, fundamental website layout components, and Flexbox techniques.

In this lesson, students achieve significant milestones in the development of the Pixel Pals web application by introducing a login system. This addition empowers users to both register and access their accounts, accomplished through clever utilization of the browser’s local storage to securely store their data. Additionally, students gain valuable insights into essential concepts, including the management of input values, manipulation of objects in JavaScript, and the dynamic display of elements based on user interactions.

In this lesson, students extend their efforts on the Pixel Pals web application by incorporating the interactive pet section, accessible after user login. This involves a step-by-step process that commenced with the establishment of the game screen, followed by enabling users to select a pet through a dropdown menu. They seamlessly update the chosen pet in response to the selection using jQuery and introduce a feeding mechanism with the inclusion of a button. This task provided them with the opportunity to revisit various crucial concepts, including the creation of dropdown menus, retrieval of input values, and dynamic attribute value manipulation, among others.

In the final session of this course, students successfully complete their Pixel Pals web application by incorporating the pet’s statistics into the game. They implement functionality to load and save the pet’s data and ensure that the pet’s statistics can be updated if the user is logged in. Throughout this process, they reinforce their understanding of various key concepts, such as retrieving and modifying JavaScript objects stored in local storage, altering the attribute values of elements, and dynamically updating the text content of existing elements.