Build interactive websites for your business or project using Flask, PostgreSQL, HTML, and CSS.
The best way to share your work is by putting it online. Whether you've made a app you want others to use, or you want to put your business online and start selling, a website is the tool for the job.
It's easy to make a website public, to collect data from your users, and to make sales.
In this course you'll learn how build the front-end of a website with HTML and CSS, and then how to serve it using Flask. You'll also add user authentication and collect user data with PostgreSQL.
By the end of the course you'll have built 4 complete web projects that you can add to your portfolio or simply take inspiration from when you build your own website.
Build complete, dynamic websites for your freelance projects or business
Master HTML and CSS
Connect your Python applications to a MongoDB database on the cloud
Allow your users to sign up and log in to your applications
Personalize every web page's content to each logged-in user
No prerequisites for this course.
Welcome to the course
3 LESSONS
A Full Python Refresher
47 LESSONS
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
4 LESSONS
Page structure with HTML
14 LESSONS
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
13 LESSONS
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)
19 LESSONS
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
16 LESSONS
'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
4 LESSONS
Jinja2 Mastery: Level 1
10 LESSONS
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
9 LESSONS
Jinja Mastery: Level II
4 LESSONS
Project 3: Portfolio Page
11 LESSONS
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
5 LESSONS
Project 4: Movie Watchlist
20 LESSONS
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
9 More Sections
I feel confident that I can create any web app I wish after taking this course. Thank you so much, Jose! I will definitely take another one of your courses!
”- Miles
Very clear and concise.
”- Paul McKinley
Amazing course with excellent knowledge.
”- Ahmad Raza
Well explained, straight to the point and covers the fundamentals in depth. Excellent course!
”- Kyle Christiaan van Eeden
The best course on web development with Flask you could take. Jose is a great teacher and knows his stuff. You'll be taught all the technical parts and industry best practices.
”- Eduardo Ruiz
After years of tutorials and courses, this guy made me see the light. I have previous intermediate Python knowledge but he demystifies all the obscure ins and outs of Python in a couple of hours. He's simply the best out here on Udemy. 5 Stars for this young Sean Connery of code. No doubt.
”- Sven Wittoeck
This is an amazing course!! The instructor has an unparalleled teaching ability, I can understand everything.
”- Daniel Marques de Almeida
Jose Salvatierra
Hi, I'm Jose! I love helping students learn to code and master software development. I've been teaching online for over 7 years, and I founded Teclado to bring software development to everyone—my objective is for you to truly understand everything that goes on behind the scenes.
How does the course work? When does it start and end?
Do I get lifetime access if I buy the course?
Is this course suitable for beginners?
What support is available while taking the course?
Is this course available on Udemy? How is it different from buying it here?