Wizard Level II Capstone

In the first lesson of the course, students are introduced to the capstone format of more extensive, four-lesson projects. Their first challenge will be to build a voice-activated assistant using HTML, CSS, and JavaScript. The app will recognize spoken words and can be programmed for verbal commands and dictation. In part one, students lay the foundation for the project by creating the basic HTML structure, adding styles, and picking a custom font.

In this lesson, students are introduced to the Web Speech API, a powerful feature used to create apps that respond to voice commands. For this lesson’s primary task, the students will implement a voice command which allows them to navigate between different web pages. Topics covered include checking browser compatibility, JavaScript functions, and event handling.

In this lesson, the students create an opening animation for the “Dictation App” page and implement basic voice-to-text dictation. This feature of the app recognizes spoken English words and then transcribes them to text on the page using the WebSpeech API. Once they complete this lesson, they will have a fully functioning dictation app to show off to friends and family!

In this lesson, students finish the Wizard Assistant app they began in lesson one. To explore the other possibilities with the Web Speech API, they add a final feature that changes the background color when the user speaks a color command. To make the user experience more consistent, students implement user input validation by checking if the color is one of the140 supported CSS color names. 

In this lesson, the students began work on the second capstone project. This project will further develop their skills with the Python web framework Flask. The app will serve data from an open API provided by NASA. In part one, students practice creating Flask apps, URL routing with view functions, and Flask HTML templates.  

With the initial setup of the app completed in the previous class, this phase of the project adds the first major feature: an astronomy photo explorer. The photos will be provided by NASA’s photo of the day API. The students practice integrating HTML form data, POST routes, and API requests into a web app. 

The third phase of the NASA app adds a Mars Rover camera viewer. NASA provides API access to their database of photos taken by the array of cameras mounted on the Mars rover Curiosity. The students added an HTML form that allows the user to select a date and camera. The students’ code will retrieve the photos from the API and display them to the user using advanced HTML template techniques like conditionals and for-loops.

In this lesson, students put the finishing touches on their NASA app by designing an eye-catching homepage and adding a navigation bar. They also practice basic error handling by programming error messages for the astronomy photo explorer.

In this lesson, students begin work on the final project of the capstone course: a blog app that knits together everything they have learned in Wizard Level II. The finished app will allow the user to create posts and upload them to the blog. In part one, students are challenged with creating a login form and styling it with the Bootstrap CSS framework.

In part two of the Bootstrap Blog project, students pass a programming milestone by finalizing their implementation of user authentication which restricts access to the blog editor by requiring a username and password. For this lesson students focus on the server code, working with user sessions, validating form data, and URL redirecting.

In this lesson, students add a significant feature to the blog app: storing blog posts permanently in a SQL database. The students will create a blog post editor with an HTML form and send the data to the server to be stored. They build essential programming skills by connecting to and querying a database server to store and retrieve data. 

In the final lesson of the capstone class, students complete their Bootstrap Blog by retrieving saved posts from the database and displaying them to the user. A blog is considered a rite-of-passage for beginning programmers because it represents the foundation of the modern web environment from which many other apps may be built: a browser interface, a server, and a database. This project, and the others in this course, demonstrate an understanding of multiple layers of technology and how they interact.