The Complete Web Development Course: Build 15 Projects

Introduction - Get your free Unlimited Web Hosting - HTML

Professional Project: Mathematics Tutorials Website (HTML and CSS)

Introduction

Header (1)

Footer and Congratulations

Maths Website Source Code

Advanced CSS with Flexbox, Grid and SASS

Flexbox: Introduction

Chapter Source Code

Flexbox: Basic Flexbox

Flexbox: Align Flex Items

Flexbox: Align Flex Lines

Flexbox: Resize Flex Items (1)

Flexbox: Resize Flex Items (2)

Flexbox Application: Photo Gallery (1)

Flexbox Application: Photo Gallery (2)

Flexbox Application: Amazon Checkout (1)

Flexbox Application: Amazon Checkout (2)

Flexbox Application: Amazon Checkout (3)

Flexbox Application: Maths Website (1)

Flexbox Application: Maths Website (2)

Flexbox Application: Maths Website (3)

CSS Grid: Introduction and Basic Grid Template

CSS Grid: Implicit vs Explicit Grid

CSS Grid: Grid Areas and Responsive Design

CSS Grid: Master the "Grid-column" Property

CSS Grid: Grid Coordinates

CSS Grid: Align Grid Items

CSS Grid Application: Photo Gallery

CSS Grid Application: Picture Grid

Sass: Introduction - Installation - Nesting Syntax

Sass: .scss vs .sass - Variables

Sass: @import and @extend Directives

Sass: Mixins - Operators - Functions

Javascript

Introduction

JavaScript Chapter: Roadmap and Full Source Code

Buttons

Change HTML Content

Change HTML Style

Variables and Data Types

Change HTML Using Variables - Activity: Random Color Generator

Functions: Activity: Swap the Content of Two Divs

Objects

Create Objects using the "New" Keyword

Object Contructors

Arrays

If and Switch Statements - Activity: Motorway Speed Control

For Loops

While Loops - Activity: Spend $1000 Randomly in a Marketplace

Regular Expressions

Errors (1)

Errors (2) - Activity: Password Validation

Set Interval and SeTimeout - Activity: Create a Simple Counter

Window and Screen

Alert Boxes

Professional Project: Maths Game (HTML, CSS and JavaScript)

Introduction

Page Structure and Styling (1)

Page Structure and Styling (2)

Page Structure and Styling (3)

Page Structure and Styling (4)

JavaScript Code (1)

JavaScript Code (2)

JavaScript Code (3)

JavaScript Code (4) and Congratulations

Math Game Source Code (PDF)

Math Game Source Code (zip)

jQuery

Introduction and Loading JQuery

JQuery Chapter: Roadmap and Full Source Code

Select HTML Elements (1)

Select HTML Elements (2)

Respond to Events

Change HTML Content and Attributes (1)

Change HTML Content and Attributes (2)

Change Styling (1)

Change Styling (2) - Activity: Random Position and Color Generator

JQuery Effects

Ajax

JQuery UI Introduction

Draggable and Droppable (1) - Activity: Leave Me Alone. Please Drop Me

Draggable and Droppable (2) - Activity: Drag Items to Your Basket

Resizable

Selectable - Activity: Append selected Car Makes to a Box

Sortable - Activity: Sort and exchange Car Makes Between Two Groups

Accordion - Activity: Create a Resizable Accordion with Collapsible Sections

Autocomplete - Activity: City Input with Prepopulated Options

Button

Date Picker - Activity: Outbound and return Flight Date Picker just like Expedia

Dialog - Activity: Are You Sure You Want to Go to the Previous Page?

Progress Bar - Activity: Animated Progress Bar Filled From 0% to 100%

Select Menu

Slider - Activity: Car Mileage Range using a Slider

More Widgets: Spinners, Tabs and Tool Tips

Professional Project: Fruits Slice Game (HTML, CSS and JQuery)

Introduction

Page Structure and Styling

Game Logic using an Illustrative Flowchart

Fruits Slice Game Source Code (PDF)

Fruits Slice Game Source Code (zip)

Twitter Bootstrap

Introduction

Bootstrap Chapter: Roadmap and Full Source Code

Grid System

Typography

Tables

Forms (1) - Activity: Inline and Horizontal Responsive Login Forms

Navs - Activity: Website Design using Nav Tabs and Nav Pills

Navbars - Activity: Website Design using a Responsive/Collapsible Navigation Bar

Pagination - Activity: Pagination and Pager Examples Like Google/Ebay

Jumbotron

Thumbnails

Dropdown Menus

Modals (1) - Activity: I have an Inquiry about My Order

Modals (2) - Activity: I have an Inquiry about My Order

Scrollspy

Tabs

Tooltips

Popovers - Activity: Create a Popover Just Like the One You See on an IPAD

Alerts - Activity: Create an Alert Box to Show a Warning or Success Message

Button plugin - Activity: Loading, Download Complete

Collapse Plugin

Carousels - Activity: Create an Interactive Carousel Slider

Affix plugin - Activity: Interactive Website with Content Affixed to a Menu

Professional Project: App Landing Page (HTML, CSS and Bootstrap)

Introduction

Header and Featured Content (1)

Header and Featured Content (2)

Header and Featured Content (3)

Trial Section, Footer and Congratulations

App Landing Page Source Code (PDF)

App Landing Page Source Code (zip)

Professional Project: Company Website (HTML, CSS and Bootstrap)

Introduction

Structure of Our Work

Background

Navbar

Header and Icons Section

Contact Button and Footer

Company Website Source Code (PDF)

Company Website Source Code (zip)

Professional Project: Our Lovely Course (HTML, CSS, jQuery and Bootstrap)

Introduction

Structure of Our Work

Add a Background Video

Navigation Bar with Advanced Styling

Adapt for Small Devices

Add ScrollSpy Feature to Navbar and Congratulations

Our Lovely Course Website Source Code (PDF)

Our Lovely Course Website Source Code (zip)

Professional Project: Stopwatch App (HTML, CSS, jQuery and Bootstrap)

Introduction

App Skeleton and Decoration (1)

App Skeleton and Decoration (2)

App Logic using an Illustrative Flowchart

jQuery Code (1)

jQuery Code (2)

jQuery Code (3)

StopWatch App Source Code (pdf)

StopWatch App Source Code (zip)

Professional Project: Drawing App (HTML, CSS, jQuery UI, Canvas, Local Storage)

Introduction

App Skeleton and Decoration (1)

App Skeleton and Decoration (2)

App Skeleton and Decoration (3)

Learn HTML5 Canvas

App Logic using an Illustrative Flowchart

jQuery Code Structure

jQuery Code (1)

jQuery Code (2)

jQuery Code (3)

Drawing App Source Code (pdf)

Drawing App Source Code (zip)

ES6 - Modern JavaScript (A must in 2019)

Download Chapter Source Code

Introduction to Modern JavaScript (ES6)

Variables and Scoping: Review of "var"

Variables and Scoping: Let Scope and Temporal Dead Zone

Block Scoping in ES6

Functions and Block Scoping

Functions and Block Scoping - Use Let

Let Scope vs Closures

Closures Challenge

Read Only Variables - Const

New Features that Make Your Life Easier: Template Literals

New Features that Make Your Life Easier: Arrow Functions – ‘This’ Lexical Scope

Destructuring - Arrays

Destructuring - Objects

Destructuring - Functions

Functions – Default Parameter Values

Functions – Rest Parameters

Spread Operator

Objects New Features

Iteration: For of Loop

Iterators - next() - Generators

Maps - Iteration

Sets - Iteration

Sets – Challenge: Intersection and Difference

Symbols

Symbol.iterator

Array.from: Collections, Strings, Arguments

Array.from: Optional Map, Length Property, Maps and Sets

Array.of

More Array Methods

ES6 Classes: Back to ES5 Constructors

ES6 Classes: Syntax

ES6 Classes: Static Methods

ES6 Classes: Getters and Setters

Class Inheritance – Extends - Super

"Front End" vs "Back End"

Understand the Back End (1)

Understand the Back End (2)

Node.js - Introduction and Installation

Introduction to Node.js

How to Run Unix Commands on Windows

Node.js Installation and REPL (Read-Eval-Print-Loop)

The "super" Command Line Crash Course

Command Line Crash Course (1)

Command Line Crash Course (2)

Command Line Crash Course (3)

Command Line Crash Course (4)

Node.js - Let's Dive in (using ES6 + ES7)

Download Chapter Source Code

Your First Node Application

File Exports

HTTP Built-in Module (1)

HTTP Built-in Module (2)

HTTP Built-in Module (3)

Fs Built-in Module - Blocking Mode

Fs Built-in Module - Non Blocking Mode

Fs Built-in Module - Use ES6 Promises

Fs Built-in Module - Use ES7 Async Await

Fs Built-in Module - More Features

Professional Project: Online File Explorer App (Pure Node.js, Bootstrap 4)

Download Chapter Source Code

Project Introduction: Online File Explorer App (Pure Node.js, Bootstrap 4)

Skeleton and Decoration

App Logic

Create the Server

Decode the Path Name and Convert it to a Full Static Path

Display Folder Content and Print the Title

Show the Path Inside a "Breadcrumb"

Loop through Folder Elements

Print Icons - Get Introduced to the Child_process Module

Calculate Folders' Size using the Child_process Module

Convert Folders' Size to Bytes - Retrieve Items' Last Modified Time

Calculate the Size of Files

Get the Mime Type of Files

Serve Files to the Client

Serve PDF Files on the Browser - Serve Media Content in Chunks using a Stream

Re-order Folder Elements by Name

Re-order Folder Elements by Name (2)

Add the Up and Down Arrows After Sorting Elements by Name

Sort Elements by Size and Last Modified

Fix Projects Bugs

Git and Github

Introduction to Version Control using Git

Git using the Command Line

Git Branching and Merging

Github - Introduction

Github - Cloning, Forking and Pull Requests (1)

Github - Cloning, Forking and Pull Requests (2)

Github - Cloning, Forking and Pull Requests (3)

Deploy Your App to Heroku

PHP

Introduction

PHP Chapter: Roadmap and Full Source Code

Data Types: Integers and Floats

Data Types: Resources

String Functions

If and Switch Statements

Send Emails – Activity: Send a Styled Email in HTML Format

Filter User Inputs (1) – Protect Yourself From Hackers

Filter User Inputs (2) – User Input Validation