Introducing the course
The incredible power of web
What is fullstack development?
Student expectations and pre-reqs
The technologies we will learn
What can you build with Python?
Course topics
Meet your instructor
What app will we build for this course?
Video player: A quick feature tour
Do you have Python 3? How do you get it?
Our code editor
Git the source code
Following along
What are microframeworks?
Building blocks of Flask
Building block: Views
Building block: Routes and URLs
Building block: Models
Building block: Dynamic HTML Templates
Get the back story
Introduction to creating a Flask website
Demo: CLI starter site
Concepts: CLI starter site
Demo: Creating the starter project PyCharm
Concept: Creating the starter project PyCharm
Project structure
Template chapter introduction
Jinja2 template example
Create the PyPI site
Our first jinja template
Concept: Jinja2 templates
Layout: Motivation
Jinja2 autocomplete in PyCharm
Adding a simple nav element
Creating a common layout page
Better organization for your template files
Concepts: Common layout
Project structure with shared layout
Demo: @response a better render_template
Concept: @response a better render_template
Routing visualized
Demo: Routing, loading the project
Refactoring view methods with Flask blueprints
Concept: Refactoring view methods with Flask blueprints
Adding a constrained route
The account management routes
Concept: Create route from url
How to build a CMS in 8 minutes
Concept: Routing to add a custom CMS
What we'll cover
CSS Front-end framework survey
Introduction to using Bootstrap
Running in a real web server
Intro to grid layout
Responsive browser tools
Grid layout in action
Adding to the grid
Concept: Grid layout
Buttons and forms
Buttons and forms in action
Style the login form
Concept: Buttons and forms
Why Bootstrap themes are awesome
Bootstrap theme tour
Our site design
Home page HTML
The making of the hero
Stats slice
New releases
Adding the navigation
Final footer
Introducing...
Please Whitelist JSFiddle in your content blocker.
Help keep JSFiddle free for always by one of two ways:
Whitelist JSFiddle in your content blocker (two clicks)
Go PRO and get access to additional PRO features →
Join the 4+ million users, and keep the JSFiddle dream alive.
Ad-free
All ads in the editor and listing pages are turned completely off.
Use pre-released features
You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections
Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles
You can make as many Private Fiddles, and Private Collections as you wish!
Console
Debug your Fiddle with a minimal built-in JavaScript console.