All Courses Premium Events Blog

Log in

All Courses Pricing Events Blog

Log in

Web Developer Bootcamp with Flask and Python

Welcome to the course

Curriculum overview

How to install Python

How to install an IDE

A Full Python Refresher

Introduction to this section

Variables in Python

Coding Exercise 1: variables

String formatting in Python

Getting user input

Writing our first Python app

Lists, tuples, and sets

Advanced set operations

Coding Exercise 2: lists, tuples and sets

Booleans in Python

If statements

The 'in' keyword in Python

If statements with the 'in' keyword

Loops in Python

Coding Exercise 3: flow control-loops and ifs

List comprehensions in Python

Dictionaries

Destructuring variables

Functions in Python

Function arguments and parameters

Default parameter values

Functions returning values

Coding Exercise 4: functions

Lambda functions in Python

Dictionary comprehensions

Coding Exercise 5: dictionaries and students

Unpacking arguments

Unpacking keyword arguments

Object-Oriented Programming in Python

Magic methods: str and repr

Coding Exercise 6: classes and objects

@classmethod and @staticmethod

Coding Exercise 7: @classmethod and @staticmethod

Class inheritance

Class composition

Type hinting in Python 3.5+

Imports in Python

Relative imports in Python

Errors in Python

Custom error classes

First-class functions

Simple decorators in Python

The 'at' syntax for decorators

Decorating functions with parameters

Decorators with parameters

Mutability in Python

Mutable default parameters (and why they're a bad idea)

Website Basics

How websites work

Front end vs. back end development

Key web technologies: HTML, CSS, JavaScript

The Browser Inspector: using the developer tools

Page structure with HTML

Elements: The basic components of HTML

A quick example of using HTML and CSS

Common HTML elements

HTML content categories

Nesting HTML elements

Starting our first HTML project

Which HTML elements can't be nested?

HTML container elements

HTML attributes

Adding images to our project

What is semantic HTML?

Document level annotations

Completing our project with document-level annotations

The best HTML resource: MDN

Page Style with CSS

How to link CSS files with HTML

How to target specific elements with CSS selectors

Representing colour

CSS colours: color and background-color

Starting to write our project's CSS file

Inheritance in CSS

Non-inherited Properties

The CSS Box Model

Basic CSS Units

Working with spacing in our project

More CSS Selectors: Descendents and Siblings

Specificity in CSS

BEM: A Better Approach to CSS Selectors

Project 1: Micro Blog (design+site)

Overview of this project

How to start a new software project

Step 1: Become A User

Step 2: Populating the Backlog

Step 3: Wireframing or Rough Design

Step 4: Better Design with Figma

Step 5: Creating the Page Structure

Step 6: Coding the Page Structure

What are SVGs?

How to include images in an HTML document

Finishing the header and navigation

HTML forms: sending form data

HTML forms: working with textareas

Creating the Microblog footer

How to style the header and menu bar

Setting the font family in our project

How to style HTML forms and inputs

How to style the Microblog entries

How to style the page footer

Introduction to Flask and MongoDB

'Hello, world!' with Flask

Using render_template to Send Longer HTML Strings

What is Jinja2?

Jinja2 Expressions

Data Structures in Jinja2

Jinja2: Conditional Statements

Jinja2: Loops

Setting up the Microblog project with Flask

Receiving form data using Flask

Displaying past entries in the Microblog project

Formatting dates correctly in our entries

Introduction to MongoDB

Accessing MongoDB with Compass & Atlas

Storing Microblog entries in MongoDB

Retrieving Microblog entries from MongoDB

Using Flask's app factory pattern

Deploying Flask Apps to Render

What is requirements.txt?

What do deployment services do for us?

Getting our app ready for Render

Deploying our app to Render

Jinja2 Mastery: Level 1

Welcome to Jinja2 Mastery, Level 1

Creating new variables in Jinja2

Working with filters in Jinja2

Simplifying your Jinja code with macros

Reducing code duplication using inheritance

Custom CSS for each Jinja template using inheritance

How to handle CSS in larger pages

What are Jinja2 tests?

The Jinja2 Environment and Rendering Context

Routing between pages with Jinja

Project 2: Habit Tracker

Project overview

Displaying and saving habits

Styling the habit tracker

Adding date navigation

Styling the date navigator

Completing habits

Adding Flask blueprints

Using MongoDB in the habit tracker

Deploying the habit tracker to Render

Jinja Mastery: Level II

Jinja Includes

Jinja Whitespace Control

Jinja Escaping

The call block

Project 3: Portfolio Page

Portfolio Project Overview

Making the Flask app for our project

Creating the base template and navbar

Adding an about page to our Flask app

Adding a contact page to our Flask app

Introduction to CSS Grid

How do CSS Media Queries work?

Displaying projects in the portfolio

Creating an individual project page

How to add error handling to a Flask app

Deploying the portfolio app to Render

Authentication in Flask Apps

What are cookies and sessions?

Register users with Flask

Logging in with Flask

Password hashing with Flask and passlib

Making a 'login required' decorator

Project 4: Movie Watchlist

Project Overview and CSS Variables

Adding a nav bar to the movie library

Adding a footer to the movie watchlist project

Putting the page layout together

Toggling dark mode in the movie watchlist project

Create a form with WTForms

Render a WTForms form with Jinja and HTML

Receive and validate data using WTForms

Displaying a table of all movies

Creating the movie details page

Setting movie ratings

Setting the last watched date

Create a custom WTForm widget

Editing movies and pre-populating a form

Adding user signups to the movie watchlist

Adding user logins to the movie watchlist

Showing only the logged in user's movies

Add user logouts to the portfolio project

Deploy the app to Render.com

Concurrency in Render with gunicorn

Website Basics

Front end vs. back end development

Free preview

Previous lecture

How websites work

Next lecture

Key web technologies: HTML, CSS, JavaScript

Home

Learn

Blog

Email Us

Privacy Policy

Terms of Service

Facebook Instagram Twitter GitHub

© 2022 Teclado Ltd. All rights reserved.