The Complete Web Development Bootcamp
Loại khoá học: Web Development
Practical Full Stack Web Development Bootcamp: JavaScript, React, Python, Docker, Flask, API, Bootstrap, Git and Postman
Mô tả
This is the React and Python Flask Full Stack Web Development Bootcamp. It is a practical course where you will start building real application from the first lecture. Application will consist of the frontend and backend parts. The frontend will be built using JavaScript React. The backend API will be built using Python Flask.
The practical full stack web development bootcamp includes: JavaScript, React, Python, Flask, API, Git and VS Code
During the creation of the frontend app you will perform the following practical tasks:
Initialize a React app using create-react-app
Create different React Components
Use useEffect and useState React hooks
Adjust favicon.ico in the frontend app
Create and insert an svg logo
Making API request to the Unsplash API
Using React props and state
While making an API app you will perform the following practical tasks:
Create a Python virtual environment using pipenv
Install and use Python packages such as Flask, dotenv and Requests
Creating Flask routes
Making external API calls from the Flask app
Accepting requests from the clients
You will also learn how to use following applications:
Visual Studio Code
Git and GitHub
Postman
With this course you will get lifetime-long access to more than 100 lectures and tens of practical exercises. After the course you will become a full stack web developer with practical knowledge about JavaScript React and Python Flask.
You will also get 30-days money-back guarantee. No questions asked!
Don't wait and join the course now!
Bạn sẽ học được gì
Yêu cầu
Nội dung khoá học
37 sections
Introduction
04:15
Let's get connected! Join the Learning Community
00:26
☝️Grab HOW-TO-GUIDE☝️
00:05
Course Project Files Overview
01:03
Course project GitHub Repository
01:45
COURSE STRUCTURE
00:28
Frontend vs Backend
31:38
Supplementary sections
00:19
Installing Visual Studio Code
00:57
Visual Studio Code Setup
06:32
Overview of the initial Application version
02:25
How to create new React Application
06:00
Installing Node along with NPM and NPX
03:07
BEGIN - Creating React Application using create-react-app
05:08
Starting React Application
06:29
Structure of the Frontend app
11:07
Reinstalling npm dependencies
04:21
Creating and serving optimized build of the Frontend app
06:27
Basic Frontend Application Implementation Steps
04:26
Cleaning up default React application
04:48
How React works and what is JSX
09:41
React Functional Components
03:47
Installing and Configuring Git
09:26
END - Creating first commit
05:55
BEGIN and END - Adding eslintcache file to the gitignore
05:01
Publishing repository to the GitHub
08:03
BEGIN and END - Changing Favicon
11:02
BEGIN - Creating Header component
11:27
END - What are React props
04:19
BEGIN - Plan for creation of the Search component
03:57
Creating Search component with input form
08:04
Styling Search component
10:04
Submission of the search form
06:40
Controlled Search component
09:12
END - Search Component Summary
03:20
Disabling GitLens blame annotations feature
02:16
BEGIN - Creating account at Unsplash and registering new App
07:21
Adding local file with Environment Variables
08:39
How to make Unsplash API request and what is URL
05:51
END - Making first API request for random photo
08:37
Analyzing API requests and responses
07:05
BEGIN - CHALLENGE - Clear search input
01:01
END - CHALLENGE SOLUTION - Clear search input
03:03
BEGIN - What is code formatter
03:36
What is linter
06:06
Configure ESLint validation
06:38
Installing and enabling Prettier ESLint Plugin
07:04
Adjusting Prettier configuration
05:01
Enabling ESLint errors fixing on File Save
04:44
END - Adding NPM linting scripts
05:13
BEGIN and END - Fixing all linting errors
05:13
BEGIN and END - Changing editor tabSize in VS Code
01:07
ESLint with Prettier setup Summary
04:14
BEGIN - Planning next steps in building frontend app
02:38
Saving images in the state
08:21
END - State in React is updated asynchronously
06:13
BEGIN - Adding React Developer Tools Chrome extension
04:45
Creating ImageCard component
06:16
Adding props to the ImageCard component
09:50
Displaying all images in the UI using map method
06:18
Adjust layout of the image cards
06:58
END - Adding delete images functionality
10:44
BEGIN - Creating SVG logo from text
09:32
END - Editing SVG logo
04:14
BEGIN and END - Adding Welcome component
08:25
Basic frontend app Summary
03:31
Basic frontend app codebase review
11:57
BEGIN and END - Updating create-react-app application
07:33
Which problems API does solve
05:37
Client-server communication
04:56
REST API
02:01
URL is unique resource identifier
02:51
Requests and Responses
03:41
Analyzing requests and responses in our Frontend app
11:02
HTTP Methods Overview
07:38
CRUD Operations
02:51
Idempotent HTTP Methods
10:29
HTTP Response Status Codes
02:22
Most common Success and Redirect HTTP status codes
06:01
Most common Client and Server Error status codes
08:03
REST API and HTTP methods Summary
07:00
Frontend and API services Overview
01:52
Installing Python, Pip and Pipenv on MacOS
12:53
Installing Python, Pip and Pipenv on Windows
08:27
Python Flask API Implementation Steps
03:48
BEGIN - Creating api folder and running basic Python app
03:41
Creating Python virtualenv and installing Flask
10:49
END - Exploring Python virtualenv and changing VS Code Python interpreter
06:37
NOTE for Windows Users
00:04
BEGIN - Simple Flask application
09:43
Imports in Python and __name__
05:39
Import from other Python module and __name__
05:11
Decorators in Python
06:13
END - Starting Flask app inside of the module
05:23
Consistent launch of python modules on Mac and Windows
04:50
BEGIN - Creating new-image API endpoint
08:58
Testing new-image API endpoint using Postman
07:33
Making API request to the Unsplash API
12:18
Finalize and test API request to the Unsplash API
10:43
Extracting UNSPLASH_KEY to the env file
11:38
END - Verifying usage of the env variables from the file
05:38
BEGIN and END - Enabling Debug mode in the Flask app
05:34
BEGIN - Changing API in the frontend React app
05:34
Trying to test Frontend app with Flask API
03:23
What is CORS
02:45
Comparing responses from the Flask API and Unsplash API
06:18
END - Enabling CORS in the Flask app
07:30
BEGIN - Installing and enabling Pylint linter and Black formatter
05:07
END - Enabling formatting on save and fixing all mistakes in the Python app
05:35
Basic API Summary
05:49
It is time to save images data to the database
02:28
Application structure with database
02:18
Implementation steps for saving images data in the database
06:01
All API endpoints in the current implementation phase
02:40
Installing Docker and hello-world using Docker
05:31
BEGIN - Creating Dockerfile for the Python API service
16:34
How to properly generate requirements.txt file
00:09
Building Docker image for the API service
08:57
Running API containers based on the built Docker image
08:17
Analyzing API Docker container from inside
13:33
END - Docker image for the API service Summary
02:49
BEGIN - Creating Dockerfile for the frontend application
06:26
Building Docker image for the frontend app
04:38
END - Running Docker container for the frontend service
03:14
Exploring frontend container from inside
04:07
Why you need to have node_modules folder and python venv folder locally
07:59
Running both frontend and api containers in background
06:04
BEGIN - Creating basic docker-compose file
04:50
Bringing up both containers using docker-compose
08:08
END - How to operate containers using docker-compose
03:32
BEGIN - Creating volumes mapping for the frontend service
10:12
Fix volumes sync in the React container
03:38
Enabling volumes mapping for the api service
07:54
END - Enabling auto-restart and docker-compose Summary
03:59
Why do we need mongo and mongo-express services
03:28
Mongo and mongo-express official Docker images Overview
06:08
BEGIN - Adding mongo and mongo-express services to the docker-compose file
04:39
Starting all services including mongo and mongo-express using docker-compose
04:36
Docker Desktop Overview
07:18
Using MongoDB shell and mongo-express GUI
07:13
MongoDB data is now deleted after docker-compose restart
04:05
Configuring persistent data volume for the mongo container
05:57
Verifying persistent MongoDB storage using volume
03:38
END - Mongo and mongo-express setup Summary
03:55
How docker-compose containers communicate with each other
04:18
Exploring networking between Docker containers
06:50
Plan for the integration of the MongoDB and Flask API Service
01:49
BEGIN - Installing pymongo
05:06
Creating instance of the MongoClient
08:44
Adding insertion of the document to the MongoDB by Python API service
04:58
Rebuilding api service Docker image
05:44
END - Pymongo and mongo connectivity testing Summary
04:28
BEGIN - New API endpoint for reading and creating images in the database
01:46
Adding images endpoint and handling GET requests
12:07
Handling POST requests to the images endpoint
04:16
Testing GET and POST methods in the images API
05:28
Fixing errors in the images API
12:27
END - Finalize with testing of the images API after errors fixing
04:00
Images API endpoint Summary
04:31
Save and get images in the frontend implementation Overview
02:57
BEGIN - Installing Axios in the frontend app and rebuilding frontend image
07:35
Start of the replacement of the fetch with Axios
06:05
END - Continue replacement of the fetch with Axios
10:41
BEGIN - Adding some images to the Mongo database using Postman
04:37
Retrieving saved images when React app loads
09:58
END - Examining how useEffect works
03:38
BEGIN and END - Explaining ESLint error and extending ESLint config
08:58
BEGIN - Saving images in the database from the frontend app
12:58
END - Hiding Save button for already saved images
10:09
Saving images in the database Summary
10:22
Plan for the improvements section
03:09
How to handle deletion of the images
03:51
BEGIN - Delete image API endpoint CHALLENGE
03:54
Delete image API endpoint SOLUTION
09:57
END - Error handling for the delete image API endpoint
03:54
BEGIN - Delete image request in the frontend CHALLENGE
01:22
END - Delete image request in the frontend SOLUTION
07:01
BEGIN - Spinner CHALLENGE
06:09
Spinner SOLUTION
11:20
END - Finalize with Spinner SOLUTION
05:57
BEGIN - Image Author Information CHALLENGE
05:07
END - Image Author Information SOLUTION
11:39
BEGIN - Toast notifications CHALLENGE
06:13
Toast notifications SOLUTION
12:19
END - Finalize with toast notifications SOLUTION
06:56
Improvements Challenges section Summary
09:19
Welcome to the Crash Courses
00:52
Shell vs Terminal
02:03
Command Line Interface
00:51
User and root directories
02:07
Current and parent directories
00:54
Navigation between directories
02:33
Listing files
01:09
Creating and removing files and directories
02:04
Executable files
01:39
Multiple tabs
01:17
Installing VS Code
00:44
Getting familiar with VS Code User Interface
01:03
Opening existing project in the VS Code
00:58
Editing files and navigating between files
03:03
Creating and deleting new files and folders
01:16
Quick Setup and Themes
02:18
Changing Icon Theme
01:10
Programming Languages Support
00:32
Executing commands in VS Code
01:34
Integrated Terminal
01:30
Extensions
00:26
Modifying User Settings
00:57
Modifying Workspace Settings
00:53
Interactive Playground
01:11
Code Snippets
00:41
Emmet
01:34
Shortcuts in the VS Code
01:36
VS Code Summary
00:30
Git and GitHub Overview
01:49
Installing Git
01:07
Initializing new Git Repository
03:47
Git Object Types
01:18
Hashes of the Git Objects
01:31
Adding changes to the Staging Area
07:16
Configuring Git author name and email
03:47
Committing changes
02:58
Exploring commits history
05:45
Basic Git Commands
02:05
Checking out commits and branches
04:22
File tracking statuses in Git
03:26
Staging and Committing changes using one command
02:45
Branches and merging of the branches
06:04
Branches merging in action
07:45
Exploring commits tree using graph option
01:54
GitHub and repository hosting services Overview
02:39
Creating remote repository at GitHub
02:30
Pushing from the local repository to remote
03:36
Committing at GitHub and pulling to the local repository
02:35
Exploring and reading Git Objects
04:11
Reading contents of the HEAD file
01:15
Git Crash Course Summary
00:58
JavaScript Crash Course Overview
00:44
Creating course project and starting Live Server
03:51
Variables declaration using let and const
03:12
Naming conventions in JavaScript
01:34
Adding Comments
00:48
Primitive Types and typeof operator
01:52
Plus operator and types coersion
01:55
What are Operators in JavaScript
03:42
JavaScript Expressions
02:09
Comparison Operators
02:32
Logical Operators
01:10
Falsy values
01:04
Continue with logical operators
03:23
Short-circuit evaluation in AND and OR operators
03:54
Ternary Operator
03:08
Objects creation and modification
03:43
Object is Reference type in JavaScript
01:30
Square brackets notation, keys and values of the object
01:43
Arrays and proving that arrays are objects
03:19
Adding elements to the arrays
02:30
Prototype methods and removing elements from the array
02:29
Functions
05:09
Function scope and variables
00:45
Function parameters
02:31
Default values for the parameters and operations inside of the function
01:54
Arrow function expressions
02:31
Syntax options in the arrow functions
04:12
Callback functions
01:53
Order of operations in JavaScript
01:20
Methods in the objects
02:50
Methods syntax variations
01:07
Properties vs Methods in the objects
01:20
Arrays Destructuring
02:42
Objects Destructuring
02:50
Object destructuring of the function parameters
05:01
Function parameters destructuring and default values
00:39
Template String Literals
02:46
If and if else statements
04:52
NPM Crash Course Overview and NPM Installation
01:54
Initializing NPM in the new project
02:19
Updating NPM
00:55
Overview of the package file
01:12
Running NPM Scripts
01:29
Installing first NPM dependency
01:37
Overview of the node_modules folder
00:51
NPM installs also other dependencies
03:23
NPM packages versioning
01:43
Semver - Major, Minor and Patch versions
03:10
Creating and running basic Node.js application
02:10
Creating custom NPM scripts
02:39
Node.js project Summary
02:00
Limit updates of the packages by using tilda and caret signs
02:45
How semver impacts NPM packages installation process
04:04
Bootstraping React application using create-react-app
01:43
React app Overview
02:09
Running different NPM scripts in the React application
01:53
Creating VUE.js project at the codesandbox
01:33
Development Dependencies
02:51
NPM key features Summary
02:00
NPM Crash Course Summary
01:04
React Crash Course Overview
01:50
Getting familiar with React application and JSX
05:16
Inserting HTML elements into the JSX
00:43
Styling JSX elements
02:21
Functional Components in React
04:12
Inserting JavaScript code into the JSX
01:47
Creating new React Component
03:10
Using React Components in the other Components
02:49
Component props in the React
02:53
Destructuring Component props
02:32
Using Component props in the JSX
01:09
Reusing same React Component
01:53
Using Template String Literal as value of the Component prop
02:17
Trying to use regular variable for the state changes
04:32
React state must be used instead of the regular variables
01:41
Introducing useState React hook for the state management
02:12
Changing Component State via hook
02:30
Parent and child components are re-rendered upon each state change
01:03
React state and props Summary
02:39
React Crash Course Summary and Challenge
00:40
Python Crash Course Overview
01:45
Hello from Python
01:17
Base Types
01:21
Conversion between types
00:58
Falsy values
00:49
Naming conventions for variables and constants
01:03
Variables and Dynamic Typing
01:19
Base types are copied by value
01:02
Incrementing and Decrementing variables
01:17
Lists
03:13
Tuples
01:52
Dictionaries
06:18
Copy by Reference
02:34
Sets
02:36
Container Types Summary
02:56
Installing and configuring Code Runner in the VS Code
06:17
Functions
05:18
Positional arguments
02:14
Keyword (Named) arguments
01:23
Gathering all arguments to the tuple
01:56
Iteration over container type values using for in loop
02:08
Function kwargs
04:23
Function Description
01:30
Comparison Operators
01:57
Logical operator AND
02:37
Short-circuit evaluation
02:52
Logical operator OR
02:33
Logical operator NOT
01:01
Chaining operators and precedence
01:25
If conditional statements
04:37
Strings formatting
02:09
Exceptions handling using try except
02:37
Python Modules
04:38
Docker Overview
01:55
Installing Docker Desktop or Docker Engine
02:49
Virtual Machines vs Docker Containers
01:31
Virtual Machines Architecture
03:37
How I use Virtual Machines
10:20
Docker Containers Architecture
05:57
How Docker is running on different Operating Systems
04:01
Container processes and resources
05:52
Docker Components Overview
02:55
Docker Client
04:18
Docker Server
03:42
Docker Host
05:18
Docker Image
01:52
Docker Container
02:40
Docker Repository
02:36
Docker Registry
03:48
Docker Components Summary
02:27
Docker Commands vs Management Commands
04:40
Alternative Commands
03:48
Basic Container and Images commands
03:32
Cleaning up my Docker setup
04:49
Pulling images from the Docker Hub
03:46
What is Docker Image
06:04
Creating new Container from the Image
03:34
What is CMD in the Docker Image
02:41
What is Docker Container
09:43
What is ports mapping
07:39
Enabling ports mapping for the NGINX container
13:28
Environment variables for containers
13:36
Volumes and volumes mapping
10:36
Enabling volumes mapping for the NGINX container
15:49
Running applications inside of the containers
15:30
What is Dockerfile
09:23
Creating Dockerfile
13:10
Launching container based on the custom image
11:32
Trying to connect Python and Mongo containers
08:59
Attaching containers to the custom bridge network
09:35
Docker Compose and YAML
06:04
Launching services using Docker Compose
16:04
Writing documents to the database
09:43
Enabling Ports Mapping in the Docker Compose
04:09
Using Volumes in the Docker Compose
08:48
Docker Crash Course Summary
02:36
Publishing course project files to the GitHub
02:44
Bonus Lecture
00:44
Viết Bình Luận
Khoá học liên quan
Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!
Get khoá học giá rẻ ngay trước khi bị fix.
Đánh giá của học viên
Bình luận khách hàng