Go from zero skills to building powerful web applications on a highly professional level using web technologies
About This Video
In Detail
The course will take you from learning the basics to mastering the most …
Go from zero skills to building powerful web applications on a highly professional level using web technologies
About This Video
In Detail
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.
Who this book is for
This course is designed for people with no web development knowledge or experience. This course is also for people with web development knowledge but want to learn new skills and enrich their portfolio with 15 highly professional interactive websites, games, and mobile apps.
Chapter 1 : 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
Chapter 2 : 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
Chapter 3 : Professional Project: Mathematics Tutorials Website (HTML and CSS)
Introduction
Header (1)
Header (2)
Menu
Introduction Box
Sidebars (1)
Sidebars (2)
Footer and Congratulations
Chapter 4 : 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
Chapter 5 : 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
Cookies
Chapter 6 : 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
Chapter 7 : 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?
Menu
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
Chapter 8 : 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)
Chapter 9 : 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
Chapter 10 : 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
Chapter 11 : Professional Project: Company Website (HTML, CSS, and Bootstrap)
Introduction
Structure of Our Work
Background
Navbar
Header and Icons Section
Contact Button and Footer
Chapter 12 : 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'/
Chapter 13 : 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)
Chapter 14 : 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)
Chapter 15 : 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
Chapter 16 : “Front End” Versus “Back End”
Understand the Back End (1)
Understand the Back End (2)
Chapter 17 : Node.js - Introduction and Installation
Introduction to Node.js
Node.js Installation + REPL (Read-Eval-Print-Loop)
Chapter 18 : 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)
Chapter 19 : 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
Chapter 20 : 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
Chapter 21 : 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)
Chapter 22 : Deploy Your App to Heroku
Deploy Your App to Heroku
Chapter 23 : 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 - Close
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.
Cookies
Error Handling (1)
Error Handling (2) – Activity: Log PHP Errors in a File / Trigger Error Emails
Sessions
Chapter 24 : 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
Chapter 25 : 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)
Login Code
“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)
Chapter 26 : 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
Chapter 27 : 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
Chapter 28 : Professional Project: Distance Between Cities (HTML, CSS, jQuery, Google Maps)
Introduction
App Skeleton and Decoration
App Logic Using an Illustrative Flowchart
JavaScript Code
Chapter 29 : Professional Project: Website with Social Widgets (Facebook, Google+ and Twitter)
Introduction
App Skeleton and Decoration
Facebook Widgets
Google+ Widgets
Tweet Button
Twitter Timeline
Chapter 30 : IOS and Android Mobile Applications Using jQuery Mobile
Introduction
Pages, Dialogs, and Transitions
Navbars
Grid System
List Views
Form Inputs
Events
Chapter 31 : 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)
Chapter 32 : 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