Professional Web App Development

In the first lesson of this course, students are introduced to a full-stack web framework, Flask. They explore the various aspects of the framework, like routing and using templates. In addition, they get familiarized with Python concepts like the difference between positional arguments and keyword arguments.

In this lesson, students learn to use HTML templates more efficiently. They are introduced to control statements like if-else and for loop inside the template. They create a list of Python dictionaries to create a playlist page without repeating the HTML code. Also, they learn to show images from the static folder.

In this lesson, students work on a Meme Generator project from their previous course. Now that they know frameworks, they can use the Flask framework for advanced features like login/logout functionality. Students learn about adding routes that accept both Get & Post requests. They send data from an HTML form to Python code and set up the browser session, so that they don’t have to login every time the page is refreshed. 

In this lesson, students look back at the code they wrote and work on optimizing it. They revisit the DRY principle and find the repeating code in their template files. To get rid of that repetition and improve their code structure, students learn about a new concept called Template Inheritance. With this, they can keep the common HTML code of all templates in one file and import it where needed.

In this lesson, students create new accounts by using an SQLite database. In this process, they learn about the flask app context and the g object. By the end of this class, they create a signup form and link with the database to create new accounts.

In this lesson, students secure their login functionality by using industry-standard hashing algorithms. They use the passlib python module to implement hashing into their app to securely save passwords in the database. Students also use a flask error handler to show the custom page for the 404 error. As a bonus, they customize the 404 error page to display the error name and description.

In this lesson, students learn about code refactoring. They are introduced to a new Flask feature: blueprints. A flask blueprint allows them to extend the app. With this, they can separate certain routes and methods in a blueprint and later link by registering that blueprint. By the end of this class, students will be able to separate all the routes related to logging-in in a blueprint. As a bonus, they learned how to add a URL prefix for blueprint routes.

In this lesson, students add a user profile to their meme generator accounts. They learn how to implement foreign keys to link two tables. They link the users table with a new profiles table in such a way that there has to be a user in the users table for each profile created. As a bonus, they add a navigation ink to the profile page.

In this lesson, students implement uploading files to the server. They continue working on their meme generator project and add functionality to upload a profile photo. After uploading the image, they can check that file in their project folder as well. While doing so, they learn about input type file, encoding types of form, and use timestamps to make sure each uploaded file has a unique filename.

In this lesson, students combine user accounts, profiles, and the meme generator to set up a meme feed. They use a memes table to save the generated memes in a database and create a feed filled with the memes. They’ll code an Instagram-like scrollable feed, but it will only contain the memes generated using their project.

In this lesson, students take the level of memes up by one level by adding the functionality of uploading custom memes to their project. While doing that, they reuse the existing code of uploading a profile picture. Apart from that, they learn how to get the HTTP URL of their app. As a bonus, they add the copy link to the clipboard functionality in the feed.

In this lesson, students wrap up their Meme Generator project. For a perfect ending, they explore the possibility of saving animated memes. They are introduced to Giphy API to get animated memes. All industry giants like Facebook, Slack, and Instagram use Giphy for gifs. By the end of this class, students will be able to save animated memes from giphy.com into their meme feed.