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

Activity: Create a responsive Contact Form using PHP and Bootstrap (1)

Activity: Create a responsive Contact Form using PHP and Bootstrap (2)

Activity: Create a responsive Contact Form using PHP and Bootstrap (3)

Date and Time (1)

Date and Time (2) - Activity: Day of the Week You were Born? Date in 1000 Days?

Include PHP Files

File Handling (1): Open – Read – Write - Close

File Handling (2): Open – Read – Write - Close

Upload Files Using PHP (1) – Activity: Upload PDF and Text Files Less than 3Mo.

Upload Files Using PHP (2) – Activity: Upload PDF and Text Files Less than 3Mo.

Error Handling (1)

PHP Part2

Error Handling (2) – Activity: Log PHP Errors in a File/Trigger Error Emails

Sessions

MySQL

Introduction

MySQL Chapter: Roadmap and Full Source Code

Source Code (zip)

Create a database using PHP MyAdmin

Remote MySQL (1)

Remote MySQL (2)

Create a Database Using PHP and MySQL

Add a Table to a Database

Populate a Database Table

Activity: Populate Database Once the User Submits a Form

Activity: Populate Database Once the User Submits a Form (2)

Activity: Populate an HTML Table using Database Data (1)

Activity: Populate an HTML Table using Database Data (2)

Update Database Data

Delete Database Data

Professional Project: Online Notes App (HTML, CSS, Bootstrap, PHP, MySQL, AJAX)

Introduction

Source Code

App Skeleton and Decoration (1) - Landing Page

App Skeleton and Decoration (2) - Landing Page

App Skeleton and Decoration (3) - Landing Page

App Skeleton and Decoration (4) - Landing Page

App Skeleton and Decoration (5) - My Notes Page

App Skeleton and Decoration (6) - Profile Page

App Logic - Signup, Login, Remember Me, Forgot Password

Signup/Login Code Structure (1)

Signup/Login Code Structure (2)

"Remember me" Code (1)

"Remember me" Code (2)

"Remember me" Code (3) and Logout Code

"Forgot Password" Code (1)

"Forgot Password" Code (2)

"Forgot Password" Code (3)

"Forgot Password" Code (4)

Notes Management: Logic

Notes Management: Code Structure

Load Notes: Code (1)

Load Notes: Code (2)

Create Notes: Code (1)

Create Notes: Code (2)

Edit Notes: Code (1)

Edit Notes: Code (2)

Delete Notes: Code (1)

Delete Notes: Code (2)

Online Notes App (Part 2)

Update Username Code (1)

Update Username Code (2)

Update Password Code (1)

Update Password Code (2)

Update Email Code (1)

Update Email Code (2)

WordPress (3 Professional Webpages: Blog, About Page and Contact Page)

Introduction

Installation – Activity: Create Your First Blog

Blog Posts and Comments

Activity: Beautiful About Page (Add Content to a WordPress Page)

Activity: Beautiful About Page (Typography)

Activity: Beautiful About Page (Logos)

Activity: Beautiful About Page (Buttons)

Activity: Create an Awesome Contact Page with a Google Map and Contact Form

Google Maps API's

Introduction and Embed Google Map to Your Website

Google Maps API's Chapter: Roadmap and Full Source Code

Source Code (zip)

Markers and InfoWindows

Show, Hide or Delete Markers

Animated drop of Markers

Direction Service - Activity: Driving Distance and Time between New York and Toronto

Geocoding Using the Javascript API - Activity: Get Geocoordinates of an Address,

Geocoding Using the geocoding API (1) - Activity: Format Address and Get Postcode.

Geocoding Using the geocoding API (2) - Activity: Format Address and Get Postcode.

Nearby Search

Autocomplete

Professional Project: Distance Between Cities (HTML. CSS, jQuery, Google Maps)

Introduction

Skeleton and Decoration

App Logic using an Illustrative Flowchart

Javascript Code

Distance Between Cities App Source Code

Source Code (zip)

Professional Project: Website with Social Widgets (Facebook, Google+ & Twitter)

Introduction

Skeleton and Decoration

IOS and Android Mobile Applications using jQuery Mobile

Introduction

Mobile Apps Chapter: Roadmap and Full Source Code

Source Code (zip)

Pages, Dialogs and Transitions

Professional Project: Speed Reader for IOS and Android

Introduction

App Skeleton and Decoration (1)

App Skeleton and Decoration (2)

Logic of the App using an Illustrative Flowchart

Start Reading (1)

Start Reading (2)

Pause, Resume, Restart

Change the Font Size

Change the Reading Speed

Control Reading Progress: Go Backwards and Forward

Publish Your App to Google Play

Publish Your App to the IOS App Store (1)

Publish Your App to the IOS App Store (2)

Speed Reader App Source Code (Pdf)

Speed Reader App Source Code (zip)

Professional Project: Car Sharing Website (Javascript, PHP, MySQL, AJAX, JSON)

Introduction

Final Source Code

Signup/Login Code (1)

Start Source Code

Signup/Login Code (2)

Signup/Login Code (3)

Search Page Skeleton and Decoration (1)

Search Page Skeleton and Decoration (2)

Search Page Skeleton and Decoration (3)

Search Page Skeleton and Decoration (4)

Search Page Skeleton and Decoration (5)

Profile Picture Code (1)

Profile Picture Code (2)

Profile Picture Code (3)

Profile Picture Code (4)

Trips Page Skeleton and Decoration (1)

Trips Page Skeleton and Decoration (2)

Trips Page Skeleton and Decoration (3)

Website Logic

"Create a Trip" Code (1)

"Create a Trip" Code (2)

"Create a Trip" Code (3)

"Create a Trip" Code (4)

Sass: Introduction - Installation - Nesting Syntax

The Complete Web Development Course: Build 15 Projects Advanced CSS with Flexbox, Grid and SASS

By: Development Island

19 minutes

Share the link to this page

Copied

Facebook

Twitter

Add the class to your calendar

Add to Google Calendar

Add to Apple Calendar

Add to Yahoo Calendar

Add to Outlook Calendar

Completed

You need to have access to the item to view this lesson.

One-time Fee

$69.99

List Price: $99.99

You save: $30

€61.05

List Price: €87.23

You save: €26.17

£52.31

List Price: £74.73

You save: £22.42

CA$96.51

List Price: CA$137.88

You save: CA$41.36

A$109.71

List Price: A$156.74

You save: A$47.02

S$90.50

List Price: S$129.30

You save: S$38.79

HK$549.42

List Price: HK$784.92

You save: HK$235.50

CHF 57.29

List Price: CHF 81.85

You save: CHF 24.55

NOK kr712.85

List Price: NOK kr1,018.40

You save: NOK kr305.55

DKK kr455.48

List Price: DKK kr650.71

You save: DKK kr195.23

NZ$118.86

List Price: NZ$169.81

You save: NZ$50.94

د.إ257.03

List Price: د.إ367.20

You save: د.إ110.17

৳8,584.97

List Price: ৳12,264.77

You save: ৳3,679.79

₹6,074.75

List Price: ₹8,678.58

You save: ₹2,603.83

RM300.60

List Price: RM429.45

You save: RM128.85

₦108,741.36

List Price: ₦155,351.46

You save: ₦46,610.10

₨19,918.47

List Price: ₨28,456.18

You save: ₨8,537.71

฿2,311.45

List Price: ฿3,302.21

You save: ฿990.76

₺2,780.09

List Price: ₺3,971.73

You save: ₺1,191.64

B$389.20

List Price: B$556.03

You save: B$166.82

R1,268.01

List Price: R1,811.52

You save: R543.51

Лв119.33

List Price: Лв170.48

You save: Лв51.15

₩97,275.28

List Price: ₩138,970.65

You save: ₩41,695.36

₪243.43

List Price: ₪347.78

You save: ₪104.34

₱4,028.41

List Price: ₱5,755.12

You save: ₱1,726.70

¥10,357.27

List Price: ¥14,796.73

You save: ¥4,439.46

MX$1,347.41

List Price: MX$1,924.96

You save: MX$577.54

QR256.01

List Price: QR365.75

You save: QR109.73

P946.10

List Price: P1,351.63

You save: P405.53

KSh9,046.20

List Price: KSh12,923.70

You save: KSh3,877.50

E£3,546.92

List Price: E£5,067.25

You save: E£1,520.32

ብር9,652.75

List Price: ብር13,790.23

You save: ብር4,137.48

Kz63,827.73

List Price: Kz91,186.38

You save: Kz27,358.65

CLP$66,028.30

List Price: CLP$94,330.18

You save: CLP$28,301.88

CN¥503.08

List Price: CN¥718.72

You save: CN¥215.64

RD$4,162.67

List Price: RD$5,946.92

You save: RD$1,784.25

DA9,135.85

List Price: DA13,051.78

You save: DA3,915.92

FJ$159.14

List Price: FJ$227.36

You save: FJ$68.21

Q539.49

List Price: Q770.74

You save: Q231.24

GY$14,685.80

List Price: GY$20,980.62

You save: GY$6,294.81

ISK kr8,732.65

List Price: ISK kr12,475.75

You save: ISK kr3,743.10

DH640.68

List Price: DH915.30

You save: DH274.61

L1,202.48

List Price: L1,717.90

You save: L515.42

ден3,753.05

List Price: ден5,361.73

You save: ден1,608.68

MOP$567.56

List Price: MOP$810.83

You save: MOP$243.27

N$1,267.39

List Price: N$1,810.63

You save: N$543.24

C$2,583.22

List Price: C$3,690.47

You save: C$1,107.25

रु9,723

List Price: रु13,890.60

You save: रु4,167.59

S/252.07

List Price: S/360.11

You save: S/108.04

K293.46

List Price: K419.25

You save: K125.78

SAR262.60

List Price: SAR375.17

You save: SAR112.56

ZK1,623.33

List Price: ZK2,319.15

You save: ZK695.81

L308.01

List Price: L440.03

You save: L132.02

Kč1,518.01

List Price: Kč2,168.68

You save: Kč650.67

Ft24,664.42

List Price: Ft35,236.40

You save: Ft10,571.97

SEK kr681.60

List Price: SEK kr973.75

You save: SEK kr292.15

ARS$81,503.71

List Price: ARS$116,438.86

You save: ARS$34,935.15

Bs485.03

List Price: Bs692.94

You save: Bs207.90

COP$287,371.35

List Price: COP$410,548.10

You save: COP$123,176.74

₡35,438.13

List Price: ₡50,628.07

You save: ₡15,189.94

L1,833.30

List Price: L2,619.11

You save: L785.81

₲560,279.44

List Price: ₲800,433.50

You save: ₲240,154.06

$U2,861.83

List Price: $U4,088.51

You save: $U1,226.67

zł261.09

List Price: zł373

You save: zł111.91

Already have an account? Log In

The Complete Web Development Course: Build 15 Projects

Sass: Introduction - Installation - Nesting Syntax

Sign Up

Sign Up

Share