Capstone III

In the first lesson of the M34 Capstone, students begin developing a website inspired by a digital news platform showcasing technology articles. They complete the navigation and header sections, applying their HTML, CSS, and semantic tag knowledge. By the end of this lesson, students also gain hands-on experience with FIGMA, a popular web design tool used by industry professionals to create websites and web applications.

In this lesson, students integrate a database into their SpellBound News website and create a table to store subscriber data. This data is collected through a subscription form, enabling users to sign up for the newsletter with their email. By the end of the lesson, students will have strengthened their SQL skills by creating a database table, inserting data, and managing database requests from their web page.

In this lesson, students enhance their news web page by displaying the latest computing and technology stories. They obtain a free API key to connect to an external news API, reinforcing their ability to integrate external data sources into their projects. Finally, they used a loop to dynamically display the news articles on their web page.

In this lesson, students develop a contact page where users can send messages or leave feedback on the news website. They create a database table to store the submitted information, further enhancing their skills in table creation. Additionally, students practice handling form inputs and designing a user-friendly form interface.

In this lesson, students embark on their second capstone project: developing a Dance Game that incorporates fun poses, music, and AI. They begin by creating a signup form using HTML and CSS, enabling users to register for the game. Students then apply their SQL knowledge to integrate a database table with the signup form for account creation. 

In this lesson, students use Google’s Teachable Machine AI with their webcams to create dance models and poses for their game. With guidance, each student designs four unique poses for their project. After training their dance model, they integrate the code and test its ability to accurately recognize the poses. This hands-on experience provided insight into the use of AI and Machine Learning. To complete the session, students also add one or two songs to their game. 

In this lesson, students further develop their Dance Game project by fine-tuning the dance model and adding interactive arrows to guide users on which pose to perform. They also begin integrating a scoring system to track user points. Finally, students implement code to highlight arrows, indicating the next move, which repeats on an interval for continuous gameplay. 

In this lesson, students complete their Dance Game project. They implement a new database table to store users’ high scores and add functionality to play a song when the start button is clicked. Additionally, they program the game to detect “game over” when the song ends. Finally, students update the scoreboard to replace an existing user’s high score only if the new score is higher, reinforcing their understanding of conditional logic and data management. 

In this lesson, students begin their final project, Mystic Videos—a website where users can browse, like, comment, and interact with videos. During this lesson, they implement database functionality to authenticate new users and log them in. This process reinforces key concepts such as working with APIs and databases, using AJAX to send requests, filtering data from the database, and inserting new records. 

In this lesson, students continue working on their final project, Mystic Videos. They integrate Pexels API, a platform for sharing photos and videos, by creating an account, obtaining an API key, and using it to fetch trending videos for their website. This activity deepens their understanding of API key registration and integration. 

In this lesson, students continue developing their final project, Mystic Videos, by creating a dedicated video page accessible through individual videos in their video feed. During this lesson, students review HTML and CSS practices while implementing functionality to load the correct video on the video page. They utilize the video ID stored in the database, using SQL and AJAX to retrieve and display the specific video. 

In the final lesson of this course, students complete their Mystic Videos project by building a comments section for the video page. This feature enables users to leave comments about their experiences and thoughts on each video. The lesson covers SQL concepts for database functionality and jQuery for retrieving and manipulating comment data.