English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 185 lectures (20h 3m) | 3.97 GB
Become a Full Stack Web Developer using Flask, Python, HTML, CSS, and MongoDB! Fully updated for 2022 and beyond.
Welcome to the Web Developer Bootcamp with Flask and Python! In this course, you’ll learn how to build and deploy dynamic websites using Python, Flask, MongoDB, HTML, and CSS!
If you want to share your projects online and become a full stack web developer, you’re in the right place! I will teach you the latest and most popular technologies, including Python 3.10, Flask, HTML 5, and CSS 3.
I won’t teach you jQuery or Bootstrap since those are old technologies! Instead, I focus on giving you a solid HTML and CSS foundation, so that you can be truly independent, and build anything you want.
I’ll help you write many real-world projects that test your skills and build your understanding. By the end of the course, you’ll be able to design and code any feature on any website!
This course beats attending any live bootcamp or workshop because I’ve put hundreds of hours into planning, recording, and editing. Plus you get lifetime access, and I provide outstanding support—I answer dozens of questions every day!
Why learn Flask?
Flask is a microframework for web development, written in Python.
It’s lightweight and simple, so you can start using it straight away. As you go through the course and learn more about it, you’ll realize it’s also really powerful!
Flask provides everything we need for building websites: a good way to organize our apps, helpers for user authentication, a large selection of plugins and extensions to do dozens of other things, and much more!
What you’ll learn!
Here’s an overview of what you’ll learn in this course:
- A super-strong HTML 5 and CSS 3 foundation
- How to plan your software projects and make them successful
- Design websites using design software like Figma
- Semantic HTML, and how to code in HTML like a professional
- Build backend applications with Flask and Python
- Make your HTML websites dynamic with Flask and Jinja2
- Become a CSS professional: learn about flex, grid, CSS animations, and much more
- Store and retrieve data with MongoDB on the Cloud
- Deploy your web applications (using both free and paid solutions)
- Implement user authentication on your Python and Flask websites
- Much, much more!
- But most importantly, learn to code from a professional software developer, and like a professional software developer
I won’t cover JavaScript in detail, but that’s because you just don’t need it! With HTML, CSS, and a backend (written with Flask and Python) you can do almost anything your users want. Later on, you can always learn JavaScript for extra functionality. Trying to learn JavaScript and Python together leads to problems, and everything becomes a bit more difficult than it has to be.
If you already know a little bit about programming (with Python or any other language), you’re ready to start this course! Also, I’ve included a complete Python Refresher section to help you get up to speed with Python if you don’t know it well already.
What you’ll learn
- Build complete, dynamic websites for your freelance projects or business
- Design, develop, and deploy full-stack web apps using Flask, Python, HTML, and CSS
- Create your own portfolio website to showcase all your projects
- Become a true HTML and CSS professional without the need for complicated JavaScript, or stop-gap solutions like Bootstrap and jQuery
- Publish your websites online with Heroku for free
- Connect your Python applications to a MongoDB database on the cloud
- Allow your users to sign up and log in to your applications
- Change the content of your web app’s pages dynamically depending on the user that is logged in
Table of Contents
Welcome to this Course!
Welcome to the course!
Curriculum overview
Access the code and e-book here!
How to install Python on your computer
How to install your IDE
A Full Python Refresher
Introduction to this section
Access the code for this section here
Variables in Python
String formatting in Python
Getting user input
Writing our first Python app
Lists, tuples and sets
Advanced set operations
Booleans in Python
If statements
The in keyword in Python
If statements with the in keyword
Loops in Python
List comprehensions in Python
Dictionaries
Destructuring variables
Functions in Python
Function arguments and parameters
Default parameter values
Functions returning values
Lambda functions in Python
Dictionary comprehensions
Unpacking arguments
Unpacking keyword arguments
Object-Oriented Programming in Python
Magic methods __str__ and __repr__
@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 do websites and the internet work
Front end vs. Back end development
Key web technologies HTML, CSS, and JavaScript
The Browser Inspector using the developer tools
Page structure with HTML
Elements the basic components of HTML
Reminder where to find code and notes
A full example HTML and CSS
Some of the most common HTML elements
What are HTML content categories
Nesting elements in HTML
Starting our first HTML project
Which HTML elements can’t be nested
An overview of HTML container elements
A detailed look at HTML attributes
Adding images to our project
What is semantic HTML
Document-level annotations in HTML
Completing our HTML project with document-level annotations
The best HTML resource MDN
Page style with CSS
How to link a CSS file
Basic CSS selectors targeting specific elements
How colours work RGB, Hexadecimal, and HSL
Colours in CSS text and background
Starting to write our project’s CSS file
Inheritance in CSS
What properties can’t be inherited
The CSS Box Model
Overview of CSS units
Working with spacing in our project
Descendent selectors in CSS
What is specificity in CSS
BEM a simpler approach to CSS targeting
Project 1 Micro Blog (design+site)
Overview of this section’s project
Access the finished code here
From our YouTube channel How to start a new software project
Step 1 becoming a user
Step 2 populating the backlog
Step 3 wireframing or rough design
Step 4 pixel perfect design
Step 5 creating the page structure
Step 6 coding the page structure with HTML
example-svg
What are SVGs
How to include images in our HTML site
Finishing the header and navigation
HTML forms sending data
HTML forms working with textareas
Creating the footer with multiple columns
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 micro blog entries
How to style the page footer
A CSS reference for what we’ve used in this section
Backend Development with Flask
Hello, world with Flask
Using render_template to send longer HTML strings
What is Jinja2
expressions
Jinja2 Expressions
data-structures
Working with data structures in Jinja2
Conditional statements in Jinja2
conditionals-basics
for-loop
loops-and-conditionals
Using loops in Jinja2
Setting up our 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 and Atlas
Small update to pymongo affecting the next video
Storing Microblog entries in MongoDB
What happens when you hit Refresh
Retrieving the Microblog entries from MongoDB
How to use Flask’s app factory pattern
Deploying Flask Apps to Heroku
What is the requirements.txt file
What is Heroku
The end result of this section a fully deployed app
Access the finished code here
Getting our app ready for Heroku
Deploying our app to Heroku
Hiding the MongoDB connection details from our code
Jinja2 Mastery Level I
Defining Jinja variables using the ‘set’ keyword
Jinja filters to call inline functions using the pipe operator
Jinja macros to improve reusability and remove duplication
Jinja inheritance using ‘extends’ and ‘block’
How to use CSS style tags with inheritance
Handling CSS in larger apps with inheritance
Jinja tests using the ‘is’ keyword
The Jinja Environment and Rendering Context
Routing with Jinja using url_for in your templates
Project 2 Habit Tracker
Habit tracker project overview
Displaying and saving habits
Styling the habit tracker
Adding date navigation
Styling the date navigation
Completing habits
Adding Flask blueprints
Setting up MongoDB
Using MongoDB in the habit tracker
Introduction to Git and GitHub
Deploying our app to Heroku
Jinja Mastery Level II
Jinja Includes with the include keyword
Whitespace control in Jinja
Jinja escaping and unescaping
The call block for Jinja macros
Project 3 Portfolio
Portfolio Project Overview
Making our Flask app for this project
The base template and nav bar
Adding an about page to our Flask app
Adding a contact page to our Flask app
Introduction to CSS Grid
Media queries with CSS for responsive development
Displaying projects in the homepage using CSS Grid
Creating the individual project pages
Error handling with Flask using app.errorhandler
Authentication in Flask Apps
What are cookies What are sessions
Registering users in your Flask apps
Logging users in with Flask
Password hashing (or encryption) with passlib
Creating a ‘login required’ decorator
Project 4 Movie Watchlist
Project overview and CSS variables
Adding a nav bar
Adding a footer
Putting the page layout together
How to toggle dark mode in a Flask app
Create a form with WTForms
Render a WTForm in our template
Receive and validate data using WTForms
Displaying a table of all movies
Creating the movie details page
Setting movie ratings
Set the last watched date
Create a custom WTForm Widget
Editing movies and pre-populating a form
Add user signups to a Flask app
Add user logins to a Flask app
Personalize pages based on the logged in user
Add user logouts to a Flask app
Deploy our Flask app to Heroku
Concurrency in Heroku with gunicorn
Download the legacy course content here
Bonus lecture and conclusion
Resolve the captcha to access the links!