1. Introduction FREE CHAPTER

• 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

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

3. Professional Project: Mathematics Tutorials Website (HTML and CSS)

• Introduction
• Header (1)
• Header (2)
• Menu
• Introduction Box
• Sidebars (1)
• Sidebars (2)
• Footer and Congratulations

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

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

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

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

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)

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

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

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

• Introduction
• Structure of Our Work
• Background
• Navbar
• Header and Icons Section
• Contact Button and Footer

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'/

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)

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)

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

16. "Front End" Versus "Back End"

• Understand the Back End (1)
• Understand the Back End (2)

17. Node.js - Introduction and Installation

• Introduction to Node.js
• Node.js Installation + REPL (Read-Eval-Print-Loop)

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)

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

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

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)

22. Deploy Your App to Heroku

• Deploy Your App to Heroku

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 -
• 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

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

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)

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

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

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

• Introduction
• App Skeleton and Decoration
• App Logic Using an Illustrative Flowchart
• JavaScript Code

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

• Introduction
• App Skeleton and Decoration
• Facebook Widgets
• Google+ Widgets
• Tweet Button
• Twitter Timeline

30. IOS and Android Mobile Applications Using jQuery Mobile

• Introduction
• Pages, Dialogs, and Transitions
• Navbars
• Grid System
• List Views
• Form Inputs
• Events

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)

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