Home>Courses>Quick Start Full Stack Web Development

Quick Start Full Stack Web Development

Beginner

165 Lessons

47h

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

94 Playgrounds

57 Quizzes

Course Overview

What You'll Learn

Course Content

Apply Your Skills

Course Overview

If you want to get into full stack web development, then you’re in the right place. This course is for anyone who wants to learn how to build a complete web application from front to back while avoiding the endless debates about product X versus product Y. Through this course you'll work with some of the most fundamental tools that full stack developers use everyday such as: React, Flask, SQL, creating APIs, testing, and more. Beyond that, you'll learn how to design an application from scratch, build th...Show More

What You'll Learn

Learn to make client side pages with React.

Learn to create server side API with Flask.

Learn to work with database.

Learn to do code documentation with Sphinx

Get familiarized with code testing.

Learn to deploy an application on Heroku.

Learn to make client side pages with React.

Course Content

Introduction

4 Lessons

What To Expect From This Course

Full Stack Development

The Elements of a Web Application

FRAP Applications

Basic Client Pages with React

7 Lessons

Introduction to React

Setting up the React Application

A Look at Necessary Files

Tinker with the Live React App

Making a Collatz Conjecture Application: String Output

Making a Collatz Conjecture Application: List Output

Working With Fonts

Dynamic Client-Side Pages with React

5 Lessons

Practical Advantages of React

Creating Input Elements

Introduction to Controlled Inputs

Further Exploring Controlled Inputs

Global State

Server-Side API Creation with Flask

9 Lessons

Why Are Rest APIs Good?

Conventions for REST APIs

Python Flask Servers

Python Decorators

Flask-RESTPlus Has What You Need

Fixing Issues

Managing the Configurations: Set Up ENV Variable

Managing the configuration: YAML File

Creating Scripts

Database Definition and Creation with SQLAlchemy

10 Lessons

PostgreSQL vs SQLite

Pros and Cons of SQLAlchemy

Working With SQLAlchemy

SQLAlchemy Data Types

Keys in SQLAlchemy

Creating Session

Using Query Method in the Session Object

Using The Query Method: Filter

Connecting Multiple Tables

From SQLite to PostgreSQL

Code Documentation with Sphinx

9 Lessons

Introduction to Sphinx

Compile to HTML: Set Up Sphinx

Compile to HTML: Important Changes

Compile to HTML: Make HTML

Get More reST: Making Changes

Get More reST: Re-run make HTML

Get More reST: Adding Files

Some More Features of Sphinx

Publish

An Introduction to Code Testing

8 Lessons

The Purpose of Code Tests: Clarity of Thought

The Purpose of Code Tests: Coding in Small parts

The Purpose of Code Tests

Unit Testing

Recommended Tests

Snapshot Testing

Making Snapshot Testing Easy

Integration, User, and Acceptance Testing

UI Testing

12 Lessons

Tools for Testing

Jest Testing

Your First Test

Importing and Exporting items

Writing Unit Tests for Our Application

Throwing an Error and Testing It

Why do we Need Storybook?

Making Custom Stories

storiesOf() and Placeholders

Creating Documentation

Snapshot Testing

Combining Snapshot Testing and Storybook

API Testing

5 Lessons

Interactive Testing: Introduction

Interactive Testing: Handling Errors

Using Pytest

Pytest on Flask: Setting up the Flask App for Testing

Pytest on Flask: Performing Tests

10.

Database Integrity Testing

8 Lessons

Common Issues with Databases

Invalid Semantics

Foreign Key

Foreign Key: Postgres

Constraints

Why We Need Integrity Tests

Integrity Tests

Integrity Tests: pytest

11.

Automatically Testing Every Update

7 Lessons

Introduction to Automated Testing

Hooking the Test into Git: Requirements

Hooking the Test into Git: Working of Git

Commands for Testing: React Applications

Commands for Testing: Flask Application

Commands for Testing: Documentation

Commands for Testing: Necessary Details

12.

Design a Web Application

7 Lessons

Introduction to Designing Web Application

Planning

Stories and Interactions for the Application

Design the UI

Design the API

Design the Data Model

Finalizing the Design of Data Model

13.

Build the Data Model

6 Lessons

Requirements of Data Model

Create Tables: Usage

Construct User and Game Class

Necessary Updates

Inspecting the Usage Database

Build Postgres Database

14.

Build the REST API

8 Lessons

Getting Started with the API of Langman

Reaching Out to the Routes and Database

DELETE: Remove the Game

POST: Starting a Game

GET: Seeing Game Status

PUT: Guessing a Letter

Handling Diacritics

Looking into the Database

15.

Build the React Client

17 Lessons

The Front-End of Our Application

Buttons, Forms, and Panels

The Gallows Component

Gallows Component: Adding the Body

App Component: Overview

App Component: Connecting to the Back-end

App Component: Changing Screens

16.

Finishing Touches for the App

11 Lessons

Introduction

Play the Game: Error Message

Play the Game: Dealing with the Error

A Quick Look Back

Replace favicon.ico

Compiling the Documentation

Creating Some Tests: Approaches

Creating Some Tests: Things to Check

Creating Some Tests: Additional Functions

Creating Some Tests: Checking the Guesses

Creating Some Tests: Running Tests

17.

Web Authentication

13 Lessons

Introduction to Web Authentication

The Role of Data Signatures

JWT: JSON Web Tokens

Creating the Authentication Table

Necessary Changes for Creating the Authentication API

Creating the Authentication API

Looking Inside a JSON Web Token

Necessary Changes for Updating the Langman API

The Langman API

Steps to Update the Langman API

Updating the Client: The Login Screen

Updating the Client: Functions

Updating the Client: `flashMessage` Component

18.

Deploy the Application

8 Lessons

Introduction to Heroku

Installing and Configuring Heroku

Create Heroku Application

Prepare the Environment to Support the Database

Configure the Production Server

Configure the Proxy Server

Deploy the Application

Deploy the Application Yourself

19.

Conclusion

5 Lessons

Coding Efficiently

Three Pillars of Web Application Development

Lessons Learned: Shortening the Feedback loop

Lesson Learned: Design Approach

What To Do Next

20.

Appendix

6 Lessons

Proficient Tool Use

Language Fluency

Python REPL and Environment Manager

Preparing Your Virtual Environment: pipenv

Preparing your Virtual Environment: Pipfile

Installation of PostgreSQL

Course Author

Erik Ferragut

Project

Build a REST API in Flask

intermediate

1 hour

Project

Build a REST API in Flask

Learn to build a REST API for movie data in Flask using Flask-RESTX and SQLAlchemy.

intermediate

1 hour

Project

Develop a REST API with Flask-RESTX

intermediate

1 hour

Project

Develop a REST API with Flask-RESTX

In this project, we’ll create a REST API in Flask using the Flask-RESTX extension.

intermediate

1 hour

Trusted by 2.5 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath