Individual Curriculum – H31
-

1. Revisiting Flask Routes
In this lesson, students go back in time while revisiting the basics of building a Flask app. They learn about an exciting service that allows them to view archived versions of web pages. Using this service, they create their own Flask app to go back to the early version of some famous apps like YouTube. In the process, they refresh their skills with URL routing and also learn about the HTML iframe tag to embed external HTML in their page.
-

2. Template Macros
In this lesson, students learn how they can reuse HTML template code with the help of Flask template macros to make customizable and reusable component patterns. Using macros, they create a blog post component. They also revisit variable routes, and conditional rendering using if-statements.
-

3. Decorators
In this lesson, students learn about a new concept called Python decorators. With decorators, they can modify the behavior of existing functions without changing their structure. They have been using inbuilt decorators to add routes to their app. They learn how to create custom decorators to add a welcome page. In addition to that, they also revisit session variables to show the welcome page only once.
-

4. MVC approach
In this lesson, students explore the term MVC. MVC stands for Model, View, Controller. It’s a programming architecture used by professionals while creating apps. They observe how MVC works in Flask and how it makes it easier for multiple developers to collaborate on the same codebase. In addition to that, they revisit SQL queries to insert the post data in the database.
-

5. UI Improvements
In this lesson, students revisit the Bootstrap CSS framework, exploring how a framework facilitates the rapid development of complex, well-designed interfaces. The students gain practical experience by using the built-in components of Bootstrap to add a navigation bar and icons to the blog.
-

6. UI Improvements Continued
In this lesson, students add an editor for creating new posts for their blog. First, they revisit building a webpage form using Bootstrap. Then they add a rich text editor using Quill, an open-source text editor designed for the web and used by companies like Slack and Microsoft. Finally, they integrate the form with the backend to store new posts on the database.
-

7. Pagination
In this lesson, students tackle design problems related to displaying large amounts of data. They learn how to retrieve data selected data in pages, making the app more efficient and improving the user experience. While doing so, they revisited SQL functions like count(), limit, and offset. As a bonus, they use Bootstrap to style the pagination links.
-

8. Logging and Messaging
In this lesson, students explore the Flask app’s log, giving them insight into how developers debug, maintain, and operate an app. They view the app’s default log of regular network traffic and then log some messages of their own. In addition to that, they also learn how to send messages from one route to another using flash messages
-

9. Adding the Login
In this class, students revisit the critical skills of user authorization by adding a login feature to their existing blog project. To secure the blog post editor, students create a custom decorator that restricts the route to logged-in users. They revisit session variables to save the login status of the user.
-

10. Database Migrations
In this lesson, students learn a fundamental concept of database management, updating the structure of an existing table. They add a new column to a table to save the publish date. Other topics include error handling with try-except blocks and date formatting using Python’s datetime module.
-

11. Final Iteration – I
In this lesson, students add a new feature to the blog and take a quick review of the concepts they have learned so far. Students work toward completing a standard CRUD app that knits together frontend, server, and database skills by adding the ability to update existing posts.
-

12. Final Iteration – II
For the final lesson of the MVC course, students complete their blog project. In this class, students implement user comments to the blog posts. Instead of saving the post comments in their local database, they used a popular third-party service called Disqus.