Full stack Web Development Bootcamp course complete guide

Full stack Web Development Bootcamp course  complete guide

Full stack Web Development Bootcamp course complete guide

Web development, Learn HTML, CSS, Javascript, Nodejs, MongoDB, API development, React JS & more by building 26+ projects

Language: english

Note: 4.9/5 (11 notes) 2,109 students  New course 

Instructor(s): i novotek Academy

Last update: 2022-07-05

What you’ll learn

  • Build 26+ projects plus new project every week
  • Build real world Authentication app from scratch
  • Build full-stack web applications from scratch
  • Build a blog application from scratch using Node, Express, and MongoDB.
  • Master Node JS module system
  • Build your own typing game app using vanilla Javascript
  • Build book API using only Node js file system
  • Build Employees database using MongoDB and Mongoose
  • Build your first basic portfolio project
  • Build beautiful and responsive website for book directory website using html/css/js
  • Build your own Youtube search app using html/css/js
  • Build Image Gallery App using Node js and mongodb
  • Build Full stack Book Directory app using html, css, javascript, node js, mongodb
  • Build Expenses Tracker Application using html, css and javascript
  • Build Music Finder app using html, css and javascript
  • Build a fulls tack Blog app using html, css, javascript, node js and mongodb
  • Build a Responsive Navbar from scratch
  • Build Book Directory API using Node js and Mongodb
  • Build Temperature Converter App using html, css and javascript
  • Build Image Expander App using html, css and javascript
  • Build modern responsive Blog website HTML Template using html, css and javascript
  • Build Student Grade Calculator using html, css and javascript
  • Build Task Manager App using html, css and javascript
  • Build Random Joke Generator using html, css and javascript
  • Build Counter App using html, css and javascript
  • Build Random User app using html, css and javascript
  • Build Alarm Clock App using html, css and javascript
  • Build very basic Quiz App using html, css and javascript
  • Build Background Color Changer app using html, css and javascript
  • Basic concepts of HTML and CSS
  • Learn how to build RESTful API using Node JS
  • Advance concepts of HTML and CSS
  • Introduction to Javascript
  • Learn how to make decision with code
  • Understand the basics of Github
  • Master Authentication & Authorization
  • Use NodeJS to write server-side JavaScript
  • Use common JS data structures like Arrays and Objects
  • Master how to make HTTP Request
  • Use Postman to develop and test APIs
  • Advanced topics in Javascript
  • Make REAL web applications using cutting-edge technologies
  • Use NPM to install all sorts of useful packages
  • Become a DOM (Document Object Model) Master
  • Understand JavaScript variables, conditionals, loops, functions, arrays, and objects
  • Understand Javascript number methods
  • Master Express Js to build fast node js application
  • Master Mongodb and Mongoose
  • Understand import and export in Node JS
  • Learn how to upload file to cloudinary using Node js
  • Implement responsive navbars on websites
  • Master Database relationship
  • Understand and master Express js middleware
  • Master Asynchronous programming in JS
  • Master FLEXBOX to layout content easily
  • Learn how to deploy application easily
  • Learn how to use EJS template engine
  • Learn how to serve static file using node js
  • Learn how to use Bootstrap

 

Requirements

  • No programming experience is needed. You will learn everything from scratch
  • No computer related course is required

 

Description

This course is perfect for anyone looking to learn web development in 2022. It covers all the latest technologies and frameworks that you’ll need to know to build today’s modern websites and web applications.

We’ll start by learning HTML, CSS, and JavaScript, the fundamental technologies of the web. Then we’ll move on to more advanced topics like React, Node js, and MongoDB. By the end of the course, you’ll have built 26+ different projects ranging from a simple website to a fully-fledged web app.

This course is designed for you to build your own business or a new career, and become an expert web developer. You don’t need any previous experience in website development or programming as this course is designed in such a way that it can be done even if you have no coding or web development background.

It’s all explained in an easy to understand way with step by step instructions, video tutorials, and live examples. This is a hands-on course, where you get immediate access to every lesson,


So whether you’re a complete beginner or an experienced web developer looking to stay up-to-date with the latest changes, this course is for you. Enrol now and let’s get started!

 

Who this course is for

  • Have a computer with Internet
  • No knowledge in programming is required
  • Anyone interested to become a web developer
  • Beginner or advance programmers

 

Course content

  • IMPORTANT !
    • Welcome
    • Course Update
    • Join the community
    • View Live Projects
    • Download Course slides
  • GETTING STARTED
    • Setting up environment
    • Section introduction
    • How to start creating a website
    • Creating your first html website
  • HTML BASICS 1
    • Anatomy of HTML
    • HTML attributes
    • Practice time
  • HTML BASICS 2
    • Section introduction
    • Anatomy of HTML document
    • Comments in HTML
    • HTM Tags
    • HTML heading tags
    • HTML Images
    • HTML links
    • HTML List Tags
    • HTML DIV Tag
  • HTML BASICS 2 : MEDIA
    • How to play audio
    • How to play videos
    • How to play youtube videos
  • HTML BASICS 2: TABLE
    • HTML table introduction
    • What is a table?
    • Table and column
    • Table record and field
    • Creating your first table
    • Table cellpadding
  • HTML BASICS 2: FORMS
    • Form section introduction
    • Form explained
    • Whats is form element?
    • Form input types
  • HTML BASICS PROJECT: PORTFOLIO WEBSITE
    • Portfolio project
  • CSS BASICS
    • Section introduction
    • What is CSS?
    • Requirement to learn CSS
    • Inline CSS
    • Embedded CSS
    • External method of using CSS
    • CSS comment
    • CSS rules
  • CSS BASICS 2: SELECTORS
    • Class selectors
    • ID selector
    • Universal selectors
    • Descendant selector
  • CSS BASICS 2: COLORS
    • Section introduction
    • RGB colors
    • RGBA colors
    • Hexadecimal colors
  • CSS Specificity
    • CSS Specificity
  • CSS BASICS 2: UNITS
    • CSS unit section introduction
    • Relative unit explained
    • CSS unit demo
  • CSS BASICS 2: TEXT
    • Text transform
    • Text decoration
    • Text shadow
    • Box model
  • CSS BASICS 2 PROJECT: PORTFOLIO
    • Practice: Improving our portfolio website
  • CSS INTERMEDIATE: POSITIONING/LAYOUT
    • Block elements
    • Inline display
    • Inline block elements
    • Static positioning
    • Relative positioning
    • Fixed positioning
    • Absolute positioning
    • Sticky positioning
  • CSS INTERMEDIATE: IMAGES
    • Images
    • Background images
  • CSS ADVANCE: ANIMATION
    • Animation introduction
    • Animation keyframe
    • Animation delay
    • Iteration count
    • Animation timing function
  • CSS ADVANCE: RESPONSIVE DESIGN
    • What’s responsive design?
    • What is ViewPort?
    • Media query
    • Commonly used breakpoints
  • CSS ADVANCE: FLEXBOX
    • Flexbox basics
    • Flex container
    • Flex items properties
    • Main and cross axis
  • Bootstrap
    • Types of CSS frameworks
    • Why bootstrap?
    • Bootstrap side effects
    • How to install bootstrap
    • Bootstrap Typography
    • Bootstrap colours
    • Bootstrap padding and margin
    • Bootstrap buttons
    • Bootstrap containers
    • Bootstrap Grid
    • Bootstrap custom GRID
    • Bootstrap breakpoint with GRID
  • JS BASICS
    • JS section introduction
    • What is Javascript ?
    • Requirement to learn JS
    • How to connect JS to HTML
    • .What is console.log() ?
    • Variable Explained
    • Reserved Keywords
    • Data-types
    • Variable declaration
    • Variable naming rules
    • Updating variable
    • Primitive values
    • Typeof Operator
  • JS BASICS 2: STRINGS
    • Section introduction
    • String length() method
    • String charat() method
    • String concatenation
    • IndexOff() method
    • LastIndexOf() method
    • ToLowerCase() method
    • ToUppercase() method
    • Trim() method
    • Split() method
    • Slice() method
    • Replace() method
  • JS BASICS 2: NUMBERS
    • Section introduction
    • Tofix() method
    • ParseInt() method
    • ParseFloat() method
    • IsNAN() method
  • JS BASICS 2: OPERATORS
    • Section introduction
    • Arithmetic Operators
    • Assignment Operators
    • Comparison Operators
    • Unary operators
    • Logical operators
  • JS BASICS 2: MAKING DECISION
    • Section introduction
    • If statement
    • Else if statement
    • Else statement
    • Truthy and falsy values
    • Type coercion
    • Double vs triple equal signs
  • JS BASICS 2: ARRAYS
    • Arrays Explained
    • Ways of creating arrays
    • Accessing Arrays
    • Updating Arrays
    • Removing array – pop()
    • Push method
    • Shift method
    • Length method
    • Concat method
  • JS BASICS 2: OBJECTS
    • Objects explained
    • How to create object
    • Accessing objects
    • Nested objects
    • Accessing nested object
    • Delete and update object properties
  • JS ADVANCE: FUNCTIONS
    • Functions Explained
    • Function syntax
    • My first function
    • Function declaration vs expression explained
    • Function invocation
    • Return keyword
    • Argument s VS paramenters
    • Default Parameters
    • Arrow functions
    • Function scope variable
    • Destructuring
  • JS ADVANCE: ITERATION & LOOPS
    • Loops Explained
    • For Loop
    • while loop
    • do while loop
    • for in loop
    • for of loop
  • JS ADVANCE: MATH OBJECT
    • Math.PI
    • Math Absolute
    • Math.Ceil
    • Math.Floor
    • Math.Min
    • Math.max
    • Math.Power
    • Math.Random
  • JS ADVANCE: WINDOW OBJECT
    • Window object explained
    • Quiz app
    • Changing background color using javascript
  • JS ADVANCE: ARRAYS OF OBJECTS
    • forEach Callback Explained
    • Callback argument
    • map
    • filter method
  • JS ADVANCE: ASYNCHRONOUS PROGRAMMING
    • Synchronous vs asynchronous programming
    • how javascript works (callstack)
    • single threaded explained
    • how async code works
    • synchronous code example
    • Async Code using setTimeout
    • How async code works
    • async code with callback
    • async code with promise
  • JS ADVANCE: MAKING HTTP REQUEST
    • http Request explained
    • AJAX Explained
    • Ways of making http request
    • JSON vs XML
    • XML HttpRequest
  • JS ADVANCE: DCUMENT OBJECT MODEL (DOM)
    • Document Object Model (DOM) Explained
    • Examine the DOM
    • Single selectors
    • Multiple selectors
    • changing properties
    • innerHTML vs textContent vs innerText
    • Creating Element
    • Transversing the DOM
  • NODE JS: GETTING STARTED
    • How The Web Works
    • CommandLine Explained
    • Install command-line tool
    • common Command line commands
    • what is Node js?
    • How node js works
    • Why node js
    • installing node js
    • my first node js app
    • Node JS REPL
  • NODE JS: MODULE SYSTEM
    • what is Node JS module?
    • custom Node JS modules
    • Create file using File System (FS module)
    • Reading file using File System (FS module)
    • Rename using File System (FS module)
    • Delete file using File System (FS module)
    • OS modules
  • NODE JS: NODE PACKAGE MANAGER-NPM
    • Node Package Manager (NPM)
  • NODE JS: NODE JS SERVER
    • what is a server?
    • Request and Response explained
    • Creating Node JS server
  • NODE JS: IMPORT & EXPORT
    • import and export
  • NODE JS: EXPRESS JS
    • What is express JS ?
    • what is an API?
    • HTTP Methods
    • express JS server part 1
    • express JS server part 2
  • NODE JS PROJECT: EXPRESS JS – CREATE BOOK API USING FILE SYSTEM
    • Section introduction
    • Server
    • install postman
    • fetch All Books endpoint
    • passing incoming data
    • create a Book
    • install nodemon
    • Book Details
  • NODE JS ADVANCE: EXPRESS MIDDLEWARE
    • What’s is a middleware?
    • Uses of middleware
    • custom middleware part 1
    • Custom middleware part 2
    • How to use Middleware
    • Login middleware
    • Third Party Middleware
  • NODE JS ADVANCE: SERVING STATIC FILES
    • Creating Server
    • Creating routes
    • creating HTML Templates
    • rendering html templates
  • NODE JS ADVANCE: TEMPLARE ENGINE-EJS
    • What is template engine?
    • creating server
    • Configuring EJS
    • How to render template engine
    • EJS Syntax
    • Passing Dynamic data
    • Rendering dynamic data
    • Looping through Data
    • EJS conditionals
  • MONGODB: GETTING STARTED
    • what is a Database ?
    • Types of Databases
    • Terminologies
  • MONGODN & MONGOOSE PROJECT : CREATING EMPLOYEES DATABASE – CRUD
    • mongoose vs mongoDB
    • Creating mongoDB Account
    • create server
    • connect to mongodb
    • model and schema Explained
    • Server
    • Connect to Database
    • creating schema
    • Creating Model
    • Create Employee
    • fetch all employees
    • update an employee
    • delete an employee
    • Find single employee
  • MONGODB & MONGOOSE: DATABASE RELATIONSHIP
    • Database Relationship Explained
    • one-to-one database relationship explained
    • one-to-one-relation & Database connection
    • one-to-one database relationship modelling
    • one-to-one database relationship endpoints
    • one-to-one database relationship using embed
    • one-to-one database relationship by referencing
    • Database population
    • One-to-many database relationship using embed
    • One-to-many database relationship by referencing
    • populate virtual fields
    • many-to-many database relationship 1
  • NODE JS ADVANCE: RESTful API
    • RESTFul API Explained
    • Creating a server
    • Connect to database
    • Creating dummy routes
    • modelling data and schema
    • create customer
    • Fetch All Customers
    • Download mongodb compass
    • Fetch single customer
    • update a customer
    • delete customer
  • NODE JS ADVANCE: FILE-UPLOAD
    • create a server
    • configuring multer and cloudinary
    • upload file to cloudinary
    • save uploaded image into database
    • fetch all images
  • NODE JS ADVANCE: AUTHENTICATION & AUTHORIZATION
    • Authentication vs Authorisation
    • Types of authentication method
    • cookies explained
    • Creating a server
    • create and send cookie
    • Cookie Parser signed cookie
    • Verify a cookie
    • session explained
    • session server
    • signing with session
  • GITHUB BASICS
    • What is GITHUB?
    • How to create GITHUB account
    • How to create Repository
    • Git push part 1
    • Git push part 2
  • DEPLOYMENT
    • Deployment explained
    • Create Netlify Account
    • deploy to netlify
    • How to Heroku Account
    • create repository
    • configure package.json file
    • Environment Variable
    • create a server
    • push to heroku
    • deploying app to heroku
    • Fixed deploying error
  • project: Portfolio project (beginner)
    • Build a simple portfolio website
  • PROJECT: Responsive Navbar
    • Structuring HTML
    • navbar css
    • Adding icons
    • media query
    • adding javascript
  • PROJECT: BLOG APP TEMPLATE
    • Project intro
    • How to start a project
    • Hero Banner HTML
    • Styling Hero Banner
    • Adding custom Fonts
    • Post List Page html
    • Post item css
    • Hero Banner media query
    • All Post Page
    • Navbar html
    • How to use icons
    • Styling Navbar
    • Navbar Responsive CSS
    • Navbar Javascript
    • Post details page html
    • Post details page CSS
    • Navigation
    • Profile page HTML
    • Profile page CSS
    • Register form HTML
    • Login page html
    • Create post html
    • Create post Styling CSS
    • Add Comment page
    • Edit Post page
    • Adding navbar to all pages
    • Conclusion
  • PROJECT: Book Directory Template
    • Demo
    • Structuring the project
    • Installing bootstrap
    • Styling the navbar using Bootstrap
    • Header HTML
    • Styling the header
    • Styling the header 2
    • Card HTML
    • Styling the Card
    • Styling the Card 2
    • Login form HTML
    • Styling the login form
    • Register page
    • Profile page
  • PROJECT: Background Colour Changer
    • Demo
    • HTML Structure
    • Styling
    • Adding Javascript
  • PROJECT: Calculator App
    • Calculator app
  • PROJECT: Counter App
    • Structuring with HTML
    • Adding CSS
    • Adding Javascript
  • PROJECT: Student Grading calculator
    • Demo
    • HTML Structure
    • Styling
    • Adding javascript
    • Display results
  • PROJECT: Typing Game
    • Demo
    • HTML Structure
    • Adding CSS
    • Adding Javascript
    • Update score difficulty level
    • Game Over Logic
  • PROJECT: Alarm Project
    • Demo
    • Requirement
    • HTML Structure
    • Styling with CSS
    • Adding javascript part 1
    • Adding javascript part 2
  • PROJECT: Image Expander
    • Demo
    • HTML Structure
    • Styling
    • Adding Javascript
  • PROJECT: Temperature Converter
    • Demo
    • HTML Structure
    • Styling
    • Adding Javascript
  • PROJECT: Random User Generator
    • Demo
    • HTML Structure
    • Styling
    • Adding Javascript
  • PROJECT: Music Finder
    • HTML Structure
    • Styling header
    • Styling card
    • Exploring Rapid API
    • Search Artist
    • Using Custom Fonts
    • Display artist photo
  • PROJECT: Youtube clone app
    • Demo
    • HTML Structure
    • Styling Navbar
    • Styling Video container
    • Exploring Youtube API
    • Fetch videos
    • Display videos
    • Search for videos
    • Display loading and error
  • PROJECT: Task Manager App
    • Demo
    • HTML Structure
    • Styling
    • Selecting Elements
    • Create task part 1
    • Create task part 2
    • Display all tasks
    • Delete task
  • PROJECT: Expenses Tracker App
    • Demo
    • HTML Structure
    • Styling
    • Creating expenses part 1
    • Creating expenses part 2
    • Get expenses from local storage
    • Display all expenses
  • PROJECT: Book API Project (File system)
    • Introduction
    • Create server
    • Install postman
    • fetch All Books endpoint
    • passing incoming data
    • Create Book
    • Auto restart sever
    • Book Details
  • PROJECT: Authentication App
    • Demo
    • Creating routes
    • Basic Authentication
    • Connect to Database
    • User Schema
    • Register User
    • Hash User Password 1
    • Hash User Password 2
    • Express Session
    • Save session using connect-mongo
    • EJS Partials
    • Logout User Route
    • Configure EJS
    • Register /Login/profile page
    • Register user
    • Login user
    • Redirect
    • Display profile
    • Logout
    • Display Error message
  • PROJECT: Book Directory Project API
    • Demo
    • Creating server
    • Design pattern and Mongodb Connection string
    • Connect to Database
    • Data modelling
    • User dummy routes
    • User Registration part 1
    • User Registration part 2
    • Error Handling
    • 404 Handler
    • Login part 1
    • Login part 2
    • Fetch all users
    • User profile and user details
    • Create book dummy routes
    • Create book route
    • Fetch all books
    • Fetch single book
    • Delete a book
    • Update book
    • Express session
    • Save session into database
    • Logout
    • Database association
    • Mongoose Population
    • Preparing for deployment
    • Push to Github
  • PROJECT: Full-Stack Book Directory app
    • Getting started
    • Serving static files
    • Styling
    • Render home page
    • Login user
    • Redirect to profile page
    • Profile Page
    • EJS Partials
    • Public and Private Navbar
    • Display Error
    • Register user
    • Create a book
    • Fetching all books
    • Delete Book
    • Update book
    • Hide edit/delete button from a user
  • PROJECT: Fullstack Blog App Project
    • App flow
    • Requirement
    • How to start this project
    • Create server
    • Mongodb connect string
    • Connect to database
    • Create post route
    • Fetch all posts route
    • Post details route
    • Delete post route
    • Update post route
    • Serve static files
    • Dynamic home page posts list
    • Render create post form
    • Create post frontend 1
    • Create post frontend 2
    • Express routing
    • Post image file upload
    • Post details frontend
    • Refactoring express routing
    • Delete post frontend
    • Update post frontend
    • Fetch all post frontend
    • Redirect after update error fixed
    • User dummy route
    • Refactor user routes api
    • User registration model
    • User registration part 1 api
    • user registration part 2 api
    • Login endpoint api part 1
    • Login endpoint api part 2
    • Save session into Database
    • Save user into session
    • Logout endpoint
    • Render register form frontend
    • Register user – frontend
    • Login user – frontend
    • User profile page – frontend
    • Display error messages
    • Frontend navigation
    • Display navbar using ejs partials
    • Public and private navbar frontend
    • Display create post error frontend
    • Display Edit Post Error frontend
    • Profile photo upload frontend
    • Display user avatar on posts
    • Display user profile posts lists
    • Show delete and edit button to post owner.
    • Update user profile route
    • Update user render form
    • Update user details
    • Fixed login error after updating user
    • Display error when updating user details
    • Update user password
    • Logout after password update
    • Update user profile photo
    • Update user render form
    • Update user details
    • Fixed login error after updating user
    • Display error when updating user details
    • Update user password
    • Logout after password update
    • Update user profile photo
    • Comment Logic blog-app
    • Render comment form
    • Comment model
    • Comment logic part 1
    • Comment logic part 2
    • Display comments
    • Deployment introduction
    • Securing sensitive data using dotenv
    • Configuring package.json File
    • Pushing project to GitHub
    • Deploy to heroku
  • WELCOME TO REACT JS: REACT CONCEPT
    • Whats is React JS ?
    • Facts about React JS
    • React JS is declarative explained
    • Advantages of React JS
  • GETTING STARTED
    • Setting up environment
    • React JS: Requirement to learn react
    • React JS: How to create react app
  • REACT JS: COMPONENTS PART 1
    • What is react component?
    • Why use react component?
    • Installing react app
    • How to create functional component
    • How to create class base component
  • REACT JSX
    • What is JSX?
    • How to create JSX
    • Nesting JSX
    • Differences between expression and statement
    • Embedding expression in JSX
  • REACT JS: NEXT SECTION COMING SOON
    • Coming soon

 

Time remaining or 1 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate