Professional Project: Math Game (HTML, CSS, and JavaScript) | The Complete Web Development Course

Book Overview & Buying
Table Of Contents

The Complete Web Development Course - Build 15 Projects

By : Development Island (UK)

Buy this Video

The Complete Web Development Course - Build 15 Projects

By: Development Island (UK)

Buy this Video

Overview of this book

The course will take you from learning the basics to mastering the most advanced web development techniques. Taking this course will help you become ready to build powerful and responsive websites to a highly professional degree using today’s most advanced and up-to-date web technologies within a few weeks from now. In order to guarantee the success of your learning experience, this course is divided into perfectly structured chapters consisting of 100 hours of hands-on videos. Each chapter covers one of the major web technologies and will take you from the basics to advanced skills. You will first learn the basic concepts, and straight after that apply them in easy practical examples. Then you will easily navigate to more advanced concepts and use them to build more complex applications. Once you have finished the chapter, you will then move to a bigger challenge where you will confidently build a “real-life full professional project”, using the skills you acquired in that chapter combined with the previous ones. By the end of this course, you will have developed over 15 highly professional websites, games, and mobile apps that can be used to take your career to the next level. The complete code bundle for this course is available at https://github.com/packtpublishing/the-complete-web-development-course---build-15-projects

Introduction

Welcome to the Course

Your Journey Inside the Course

Structure of a Website

Your First Website

Get Your Free Unlimited Web Hosting

Share Your Website with the World (1)

Share Your Website with the World (2) - Cyberduck Version

Share Your Website with the World (2) - FileZilla Version

Headings

Paragraphs

Links

Images

Inline Versus Block Elements

Iframes - Activity: Embed a Nice Relaxing YouTube Video to Your Website

Unordered Lists

Ordered Lists

Description: Lists

Tables

Entities

Forms (1) - Activity: Create a Simple Login Form

Forms (2) - Activity: Create a Marketplace Checkout Form

Text Decoration

Comments

CSS

Introduction

Inline CSS

Internal CSS

External CSS

Classes and IDs

Div and Span

Box Model

Box Model Padding

Box Model: Border

Box Model: Outline

Box Model: Margin

Background

Floating

Positioning

Display

Text Decoration

Text Align

Text Font

Text Effects

Image Sprites

Image Opacity

Styling Lists

Styling Links

Gradients

2D Transforms

3D Transforms

Transitions

Animations

Professional Project: Mathematics Tutorials Website (HTML and CSS)

Introduction

Header (1)

Header (2)

Introduction Box

Sidebars (1)

Sidebars (2)

Footer and Congratulations

Advanced CSS with Flexbox, Grid, and SASS

Flexbox: Introduction

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: Math Website (1)

Flexbox Application: Math Website (2)

Flexbox Application: Math Website (3)

CSS Grid: Introduction and Basic Grid Template

CSS Grid: Implicit Versus 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 Versus .sass - Variables

Sass: @import and @extend directives

Sass: Mixins - Operators - Functions

JavaScript

Introduction

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 Constructors

Arrays

If and Switch Statements - Activity: Motorway Speed Control

For Loops

While Loops - Activity: Spend $1,000 Randomly in a Marketplace

Regular Expressions

Errors (1)

Errors (2) - Activity: Password Validation

Set Interval and Set Timeout - Activity: Create a Simple Counter

Window and Screen

Alert Boxes

Professional Project: Math 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)

Game Logic using an illustrative flowchart

JavaScript Code (1)

JavaScript Code (2)

JavaScript Code (3)

JavaScript Code (4) and Congratulations

jQuery

Introduction and Loading jQuery

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 Tooltips

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

Introduction

Page Structure and Styling

Game Logic Using an Illustrative Flowchart

jQuery Code (1)

jQuery Code (2)

jQuery Code (3)

jQuery Code (4)

Twitter Bootstrap

Introduction

Grid System

Typography

Tables

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

Forms (2)

Forms (3)

Buttons

Images

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 Such as 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

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

Introduction

Structure of Our Work

Background

Navbar

Header and Icons Section

Contact Button and Footer

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

Introduction

Structure of Our Work

Add a Background Video

Navigation Bar with Advanced Styling

Home Section

About Section

Carousel Slider (1)

Carousel Slider (2)

Adapt for Small Devices

Add ScrollSpy Feature to Navbar and Congratulations'/

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)

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)

ES6 - Modern JavaScript

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 Versus 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" Versus "Back End"

Understand the Back End (1)

Understand the Back End (2)

Node.js - Introduction and Installation

Introduction to Node.js

Node.js Installation + 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)

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)

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

App 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

Embed PHP in HTML

PHP Variables

Data Types: Strings

Data Types: Integers and Floats

Data Types: Booleans

Data Types: Arrays

Data Types: Objects

Data Types: NULL

Data Types: Resources

String Functions

If and Switch Statements

For Loops

While Loops

Functions

GET and POST

Array Functions (1)

Array Functions (2)

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 -

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

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)

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

Sessions

MySQL

Introduction

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

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)

Signup Code (1)

Signup Code (2)

Signup Code (3)

Signup Code (4)

Signup Code (5)

"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)

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 + Contact Page)

Introduction

Installation – Activity: Create Your First Blog

Blog Posts and Comments

Themes

Pages and Menus

Customize Pages (1)

Customize Pages (2)

Custom CSS

Plugins

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

Introduction and Embed Google Map to your Website

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

App Skeleton and Decoration

App Logic Using an Illustrative Flowchart

JavaScript Code

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

Introduction

App Skeleton and Decoration

Facebook Widgets

Google+ Widgets

Tweet Button

Twitter Timeline

IOS and Android Mobile Applications Using jQuery Mobile

Introduction

Pages, Dialogs, and Transitions

Navbars

Grid System

List Views

Form Inputs

Events

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 Backward 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)

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

Introduction

Signup/Login Code (1)

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)

"Load Trips" Code (1)

"Load Trips" Code (2)

"Edit/Delete Trips" Code (1)

"Edit/Delete Trips" Code (2)

"Edit/Delete Trips" Code (3)

"Edit/Delete Trips" Code (4)

"Search Trips" Code (1)

"Search Trips" Code (2)

"Search Trips" Code (3)

"Search Trips" Code (4)

"Search Trips" Code (5)

"Search Trips" Code (6)

"Search Trips" Code (7)

"Search Trips" Code (8)

"Spinner" Code (1)

"Spinner" Code (2)

Finishing Touches and Congratulations

The Complete Web Development Course - Build 15 Projects

By : Development Island (UK)

The Complete Web Development Course - Build 15 Projects

By: Development Island (UK)

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access