All Courses Premium Events Blog

Log in

All Courses Pricing Events Blog

Log in

Full Stack Web Development with Django 5

Introduction

Overview of the course project

Technical requirements for this course

Curriculum overview

Basic HTML Structure

The <head> and <body> elements

Block and inline elements in HTML

Common HTML Elements

Headings: <h1> to <h6>

Paragraphs: <p>

Links: <a>

Images: <img>

Lists: <ul>, <ol>, <li>

Divs and Spans: <div>, <span>

HTML Forms

Introduction to HTML Forms: <form>

Text Inputs: text, email, and password

Checkboxes and Radio Buttons: <input type="checkbox">, <input type="radio">

Textareas: <textarea>

Dropdowns: <select> and <option>

Form Submission: <input type="submit">

Accessibility considerations with forms

Semantic HTML

Introduction to Semantic HTML

<header> and <nav> Elements

<main>, <section>, and <article> Elements

<aside> and <footer> Elements

HTML Meta Tags

The <meta> Element and its Purpose

Open Graph and Twitter Card Meta Tags

CSS Fundamentals

Introduction to CSS and Selectors

CSS Fundamentals: units

The Box Model: Margin, Padding, Border

What does box-sizing do?

CSS Selector Specificity

Positioning: Relative, Absolute, Fixed, Sticky

Colors, Backgrounds, and Gradients

Typography: Font Properties and Text Styling

Pseudo-classes and Pseudo-elements

CSS Flexbox and Grid

Introduction to CSS flexbox

Flexbox container justification and alignment

Flexbox item properties

Flexbox gaps

Grid columns and rows

Grid container properties

Grid repeating and auto-fit

Grid item placement

Grid alignment and justification

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)

Django Project Configuration

Introduction to this section

How to install pyenv and Python on Windows

How to install pyenv and Python on Mac

How to install Poetry on Windows

How to install Poetry on Mac

How to install VSCode on Windows

How to install VSCode on Mac

How to install dependencies on Windows

How to install dependencies on Mac

How to start a Django project on Windows

How to start a Django project on Mac

Migrations, superusers, and admin panel on Windows

Migrations, superusers, and admin panel on Mac

How to create a Django app on Windows

How to create a Django app on Mac

A Hello World App

Intro to this section

The Model View Controller

Writing the Hello World app

The Course App

Intro to this section

How to create and register Django models

How to create and run database migrations

Showing all our articles in the homepage

Introduction to Django forms

What are cookies?

What are CSRF attacks?

Creating a view that uses a form

Creating articles with Class-Based Views

Adding the other endpoints with CBVs

Cleaning up our article URLs

HTML Escaping in Django

The Course App — Part 2

Intro to this section

Creating a base template

Updating our templates to extend the base template

What are Django filters?

Adding navigation between templates

Rendering things conditionally

Calculating word count dynamically

Adding the word count to the templates

How to customize the Django admin panel

Running with Docker

Intro to this section

Building the Docker image

Running the Docker container

App Setup Improvements

Intro to this section

The Django debug toolbar

Automating the creation of a superuser

Django authentication and social-sign on with django-allauth

Introduction to django-allauth

How to add a user relationship to a Django model

How to set the article creator in the form of a Class-Based View

How to add log in and log out pages with Django

How to require login in Django CBVs

How to set up django-allauth

How to use django-allauth URLs in our project

How to set up social authentication with django-allauth

How to create a GitHub OAuth app

How to add new social apps with django-allauth

How to set up Django to log in with email instead of username with allauth

How to customize the UserProfile admin page

How do translations and localization work in Django?

How to add translations to our Django admin panel

Create a custom UserManager to use the email field in Django

More article features and markdown editor

Intro to this section

How to add custom computed properties to our models

Displaying user article statistics in the template

How to add a markdown editor to our Django project

Removing duplication from our form templates

Running with Docker Compose

Intro to this section

How to set up PostgreSQL connections in Python with psycopg

Running the Django app and database with Docker Compose

Running database migrations with Docker Compose

Handy Docker Compose commands

Styling with TailwindCSS

How to install NodeJS on macOS

How to install NodeJS on Windows

How to install and set up TailwindCSS

Optional TailwindCSS plugins

Automatic browser reloading with django-browser-reload

Adding django_widget_tweaks

Creating button styles with TailwindCSS

Styling our navigation bar with TailwindCSS

Customize your TailwindCSS theme by creating a box shadow underline

Changing menu styles depending on which page we're on

Styling the user's dashboard

Styling the article delete form

Refactoring the base_form layout template

Styling the article form templates

Styling the log in page

A look at the django-allauth element structure

Styling the social sign on provider element

Styling the errors list in our login page

The key features of our landing and signup page

Creating a responsive structure for our sigding page

Styling the signup form in our landing page

Styling form errors in the signup page

HTML detail element for disclosures with styling

Improvements to our base.html to work across apps

Styling the main allauth layout

Allauth elements: styling the button element

Allauth elements: styling the form and fields

Allauth elements: styling the titles

Some final improvements and styles in base.html

Making the landing page our signup page

Where we are at the end of this section

Getting started with AlpineJS

Introduction to this section

Getting started with AlpineJS

Setting AlpineJS component data values from Django forms

Binding TailwindCSS classes based on AlpineJS state

Updating article status classes in the homepage

Message flashing with Django

Introduction to this section

What is message flashing?

How to display flashed messages in our templates

How to flash your own messages

Search and pagination

Introduction to this section

How to add pagination to a ListView

How to implement pagination in a template

How to add PostgreSQL full text search to our app

How to add search to the ListView

How to implement search in a template

How to get search and pagination working together

Django and HTMX

Introduction to this section

What is HTMX?

How to implement modal windows

Active search with a ListView in 4 lines of code

Adding a request indicator with HTMX, SVGs, and TailwindCSS

How to add animations using TailwindCSS

How to disable elements while requests are happening

Handling browser history changes with HTMX

Email confirmation with Mailgun

Introduction to this section

How to set up your Mailgun account

How to send an email with Python and Mailgun

Adding email confirmation to our app with allauth

Removing the password confirmation field from our signup form

Common HTML Elements

Lists: `<ul>`, `<ol>`, `<li>`

Free preview

Previous lecture

Images: <img>

Next lecture

Divs and Spans: <div>, <span>

Home

Learn

Blog

Email Us

Privacy Policy

Terms of Service

Facebook Instagram Twitter GitHub

© 2022 Teclado Ltd. All rights reserved.