App Skeleton and Decoration (2) - Landing Page

The Complete Web Developer Bootcamp - Build 15 Projects

Introduction - Setup your Free Unlimited Web Hosting - HTML

Introduction (5:53)
HTML Chapter: Roadmap and Full Source Code
Structure of a website (9:23)
Your first website (6:13)
Get your web hosting (8:53)
Important note about FTP
Share your website with the World (1) (6:34)
Share your website with the World (2) - Cyberduck version (12:48)
Share your website with the World (2) - FileZilla version (15:55)
Headings (4:55)
Paragraphs (2:31)
Links (7:49)
Images (4:40)
Inline vs Block Elements (5:53)
Iframes - Activity: Embed a nice relaxing YouTube video to your website (5:41)
Unordered Lists (3:02)
Ordered Lists (2:08)
Description Lists (2:19)
Tables (3:54)
Entities (5:07)
Forms (1) - Activity: Create a simple Login Form (8:02)
Forms (2) - Activity: Create a Marketplace Checkout Form (19:59)
Text Decoration (3:58)
Comments (2:25)
HTML Quiz

CSS

Introduction (1:11)
CSS Chapter: Roadmap and Full Source Code
Inline CSS (2:25)
Internal CSS (2:25)
External CSS (2:33)
Classes and IDs (2:44)
Div and Span (7:25)
Box Model (2:56)
Box Model Padding (4:25)
Box Model: Border (5:49)
Box Model: Outline (1:52)
Box Model: Margin (2:27)
Background (7:48)
Floating (4:37)
Positioning (6:21)
Display (3:00)
Text Decoration (5:00)
Text Align (1:58)
Text Font (3:50)
Text Effects (7:53)
Image Sprites (5:29)
Image Opacity (2:56)
Styling Lists (7:42)
Styling Links (7:08)
Gradients (10:06)
2D Transforms (6:22)
3D Transforms (4:53)
Transitions (4:53)
Animations (8:57)
CSS Quiz

Professional Project: Mathematics Tutorials Website (HTML & CSS)

Introduction (2:23)
Header (1) (17:46)
Header (2) (16:42)
Menu (18:22)
Introduction Box (7:03)
Sidebars (1) (19:46)
Sidebars (2) (8:38)
Footer & Congratulations (10:17)
Maths Website Source Code
Mathematics Tutorial Website Quiz

Javascript

Introduction (8:55)
JavaScript Chapter: Roadmap and Full Source Code
Buttons (7:04)
Change HTML Content (7:02)
Change HTML Style (5:51)
Variables and Data Types (11:38)
Change HTML Using Variables - Activity: Random Color Generator (10:44)
Functions: Activity: Swap the content of two divs (13:56)
Objects (9:23)
Create Objects using the "new" keyword (4:40)
Object Contructors (16:41)
Arrays (17:45)
If and Switch Statements - Activity: Motorway Speed Control (17:23)
For Loops (9:23)
While Loops - Activity: Spend $1000 Randomly in a marketplace (11:07)
Regular Expressions (16:17)
Errors (1) (3:42)
Errors (2) - Activity: Password Validation (12:48)
Set Interval & SeTimeout - Activity: Create a simple counter (10:23)
Window and Screen (13:02)
Alert Boxes (7:45)
JAVASCRIPT20.cookies (6:20)
JavaScript Quiz

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

Introduction (2:27)
Page Structure & Styling (1) (19:58)
Page Structure & Styling (2) (18:20)
Page Structure & Styling (3) (15:28)
Page Structure & Styling (4) (7:14)
Game Logic using an illustrative flowchart (3:02)
JavaScript Code (1) (17:22)
JavaScript Code (2) (19:00)
JavaScript Code (3) (17:30)
JavaScript Code (4) & Congratulations (18:10)
Maths Game Quiz
Math Game Source Code (pdf)

jQuery

Introduction and Loading JQuery (9:03)
JQuery Chapter: Roadmap and Full Source Code
Select HTML Elements (1) (12:59)
Select HTML Elements (2) (11:17)
Respond to Events (12:07)
Change HTML Content and Attributes (1) (11:47)
Change HTML Content and Attributes (2) (7:11)
Change Styling (1) (11:49)
Change Styling (2) - Activity: Random Position and Color Generator (13:59)
JQuery Effects (14:44)
Ajax (13:00)
JQuery UI Introduction (8:09)
Draggable and Droppable (1) - Activity: Leave me alone! Please drop me! (19:05)
Draggable and Droppable (2) - Activity: Drag Items to your basket (10:09)
Resizable (9:20)
Selectable - Activity: Append selected Car Makes to a Box (9:47)
Sortable - Activity: Sort and exchange Car Makes between two groups (9:03)
Accordion - Activity: Create a resizable accordion with collapsible sections (10:04)
Autocomplete - Activity: City Input with prepopulated options (7:11)
Button (13:16)
Date Picker - Activity: Outbound and return Flight Date Picker just like Expedia (13:56)
Dialog - Activity: Are you sure you want to go to the previous page? (13:58)
Menu (6:05)
Progress Bar - Activity: Animated progress bar filled from 0% to 100% (10:50)
Select Menu (7:45)
Slider - Activity: Car Mileage Range using a Slider (17:54)
More Widgets: Spinners, Tabs and Tooltips (12:06)
jQuery Quiz

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

Introduction (2:01)
Page Structure and Styling (12:51)
Game Logic using an illustrative flowchart (2:58)
jQuery Code (1) (17:45)
jQuery Code (2) (21:04)
jQuery Code (3) (20:08)
jQuery Code (4) (17:51)
Fruits Slice Game Source Code (pdf)
Fruits Slice Game Quiz

Twitter Bootstrap

Introduction (7:46)
Bootstrap Chapter: Roadmap and Full Source Code
Grid System (9:33)
Typography (12:13)
Tables (6:01)
Forms (1) - Activity: Inline and Horizontal Responsive Login Forms (12:23)
Forms (2) (11:26)
Forms (3) (19:27)
Buttons (12:51)
Images (2:24)
Navs - Activity: Website Design using Nav Tabs and Nav Pills (8:47)
Navbars - Activity: Website Design using a responsive/collapsible navigation bar (19:58)
Pagination - Activity: Pagination and Pager Examples like Google/Ebay (8:56)
Jumbotron (3:12)
Thumbnails (10:00)
Dropdown menus (7:19)
Modals (1) - Activity: I have an inquiry about my order (16:14)
Modals (2) - Activity: I have an inquiry about my order (7:12)
Scrollspy (8:38)
Tabs (14:24)
Tooltips (6:36)
Popovers - Activity: Create a popover just like the one you see on an IPAD (6:41)
Alerts - Activity: Create an alert Box to show a warning or success message (7:34)
Button plugin - Activity: Loading … Download Complete (8:50)
Collapse plugin (16:46)
Carousels - Activity: Create an interactive carousel slider (17:28)
Affix plugin - Activity: Interactive Website with Content Affixed to a Menu (12:52)
Twitter Bootstrap Quiz

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

Introduction (2:41)
Header and Featured Content (1) (15:21)
Header and Featured Content (2) (15:49)
Header and Featured Content (3) (9:01)
Trial Section, Footer & Congratulations (14:02)
App Landing Page Source Code (pdf)
App Landing Page Quiz

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

Introduction (2:19)
Structure of our work (9:00)
Background (6:30)
Navbar (17:33)
Header & icons section (14:00)
Contact Button & Footer (13:45)
Company Website Source Code (pdf)
Company website Quiz

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

Introduction (3:06)
Structure of our work (14:22)
Add a background video (8:06)
Navigation bar with advanced styling (17:04)
Home Section (8:12)
About Section (11:18)
Carousel Slider (1) (17:12)
Carousel Slider (2) (7:03)
Adapt for Small Devices (8:52)
Add ScrollSpy feature to navbar & Congratulations (7:14)
Our Lovely Course Website Source Code (pdf)
Our Lovely Course Quiz

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

Introduction (2:20)
App Skeleton and Decoration (1) (11:14)
App Skeleton and Decoration (2) (11:46)
App Logic using an illustrative flowchart (5:51)
jQuery Code (1) (13:32)
jQuery Code (2) (9:21)
jQuery Code (3) (19:51)
StopWatch App Source Code (pdf)
Stopwatch Quiz

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

Introduction (2:25)
App Skeleton and Decoration (1) (18:25)
App Skeleton and Decoration (2) (10:06)
App Skeleton and Decoration (3) (15:21)
Learn HTML5 Canvas (10:14)
App Logic using an illustrative flowchart (2:32)
jQuery Code Structure (5:21)
jQuery Code (1) (7:48)
jQuery Code (2) (16:56)
jQuery Code (3) (17:53)
Drawing App Source Code (pdf)
Drawing App Quiz

ES6 - Modern JavaScript (A must in 2019)

Download Chapter Source Code
Introduction to Modern JavaScript (ES6) (3:39)
Variables & Scoping: Review of "var" (4:03)
Variables & Scoping: Let Scope and Temporal Dead Zone (5:27)
Block Scoping in ES6 (8:39)
Functions and Block Scoping (10:53)
Functions and Block Scoping – use let (3:22)
Let Scope vs Closures (6:45)
Closures Challenge (5:00)
Read only variables - const (3:25)
New Features that make your life easier: Template Literals (4:54)
New Features that make your life easier: Arrow functions – ‘this’ lexical scope (19:04)
Destructuring - Arrays (10:56)
Destructuring - Objects (7:54)
Destructuring - Functions (4:37)
Functions – Default Parameter Values (9:58)
Functions – Rest Parameters (16:54)
Spread Operator (4:32)
Objects New Features (9:10)
Iteration: For of loop (5:52)
Iterators - next() - Generators (19:03)
Maps - Iteration (19:44)
Sets - Iteration (10:44)
Sets – Challenge: Intersection and Difference (10:12)
Symbols (16:47)
Symbol.iterator (11:49)
Array.from: collections, strings, arguments (9:32)
Array.from: optional map, length property, Maps & Sets (8:10)
Array.of (1:52)
More Array Methods (10:55)
ES6 Classes: Back to ES5 Constructors (9:22)
ES6 Classes: Syntax (2:54)
ES6 Classes: Static Methods (3:18)
ES6 Classes: Getters & Setters (6:32)
Class Inheritance – extends - super (6:18)

"Front End" vs "Back End"

Understand the Back End (1) (18:29)
Understand the Back End (2) (7:16)

Node.js - Introduction & Installation

Introduction to Node.js (5:11)
Node.js Installation + REPL (Read-Eval-Print-Loop) (9:16)
How to run Unix commands on Windows

The "super" Command Line Crash Course

Command Line Crash Course (1) (18:19)
Command Line Crash Course (2) (19:54)
Command Line Crash Course (3) (19:16)
Command Line Crash Course (4) (19:23)

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

Download Chapter Source Code
Your First Node Application (17:55)
File Exports (12:47)
HTTP Built-in Module (1) (18:56)
HTTP Built-in Module (2) (10:09)
HTTP Built-in Module (3) (13:00)
Fs Built-in Module - Blocking Mode (16:03)
Fs Built-in Module - Non Blocking Mode (19:18)
Fs Built-in Module - Use ES6 Promises (14:55)
Fs Built-in Module - Use ES7 Async Await (5:37)
Fs Built-in Module - More Features (9:14)

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) (8:22)
Skeleton and Decoration (19:32)
App Logic (9:54)
Create the Server (18:55)
Decode the path name and convert it to a full static path (19:57)
Display folder content and print the title (16:45)
Show the path inside a "Breadcrumb" (19:55)
Loop through folder elements (18:31)
Print Icons - Get introduced to the child_process module (19:31)
Calculate folders' size using the child_process module (16:27)
Convert folders' size to Bytes - Retrieve items' last modified time (18:40)
Calculate the size of files (18:54)
Get the mime type of files (17:04)
Serve files to the Client (19:55)
Serve PDF files on the browser - Serve Media content in chunks using a stream (19:30)
Re-order folder elements by name (18:37)
Re-order folder elements by name (2) (19:23)
Add the up and down arrows after sorting elements by name (7:22)
Sort elements by size and last modified (9:19)
Fix projects bugs (10:56)

Git & Github

Introduction to Version Control using Git (12:02)
Git using the Command Line (17:10)
Git Branching & Merging (11:20)
Github - Introduction (12:01)
Github - Cloning, Forking & Pull Requests (1) (10:29)
Github - Cloning, Forking & Pull Requests (2) (13:44)
Github - Cloning, Forking & Pull Requests (3) (2:26)

Deploy your App to Heroku

Deploy your App to Heroku (16:14)

PHP

Introduction (15:57)
PHP Chapter: Roadmap and Full Source Code
Embed PHP in HTML (7:49)
PHP Variables (9:46)
Data Types: Strings (6:12)
Data Types: Integers and Floats (7:04)
Data Types: Booleans (5:25)
Data Types: Arrays (17:32)
Data Types: Objects (10:58)
Data Types: NULL (2:18)
Data Types: Resources (5:35)
String Functions (8:52)
If and Switch Statements (12:27)
For Loops (9:42)
While Loops (5:59)
Functions (7:59)
GET & POST (20:00)
Array Functions (1) (14:23)
Array Functions (2) (13:01)
Send Emails – Activity: Send a styled email in HTML format (9:54)
Filter User Inputs (1) – Protect Yourself from Hackers (7:42)
Filter User Inputs (2) – User Input Validation (7:14)
Activity: Create a responsive Contact Form using PHP & Bootstrap (1) (17:28)
Activity: Create a responsive Contact Form using PHP & Bootstrap (2) (19:27)
Activity: Create a responsive Contact Form using PHP & Bootstrap (3) (14:00)
Date and Time (1) (13:07)
Date and Time (2) - Activity: Day of the week you were born? Date in 1000 days? (15:58)
Include PHP files (12:39)
File Handling (1): Open – Read – Write - Close (18:03)
File Handling (2): Open – Read – Write - Close (11:25)
Upload Files Using PHP (1) – Activity: Upload PDF & Text Files Less than 3Mo. (19:30)
Upload Files Using PHP (2) – Activity: Upload PDF & Text Files Less than 3Mo. (17:26)
Cookies (6:24)
Error Handling (1) (7:37)
Error Handling (2) – Activity: Log PHP errors in a file / Trigger error emails (15:46)
Sessions (6:40)
PHP Quiz

MySQL

Introduction (4:26)
MySQL Chapter: Roadmap and Full Source Code
Create a database using PHP MYADMIN (10:51)
Remote MySQL (1) (12:43)
Remote MySQL (2) (7:14)
Create a database using PHP & MySQL (8:40)
Add a table to a database (10:04)
Populate a database table (6:58)
Activity: Populate Database once the user submits a form (19:56)
Activity: Populate Database once the user submits a form (2) (18:43)
Activity: Populate an HTML table using Database Data (1) (11:52)
Activity: Populate an HTML table using Database Data (2) (15:05)
Update Database Data (9:23)
Delete Database Data (4:42)
MySQL Quiz

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

Introduction (7:28)
Source code
App Skeleton and Decoration (1) - Landing Page (19:57)
App Skeleton and Decoration (2) - Landing Page (16:47)
App Skeleton and Decoration (3) - Landing Page (17:33)
App Skeleton and Decoration (4) - Landing Page (12:05)
App Skeleton and Decoration (5) - My Notes Page (19:58)
App Skeleton and Decoration (6) - Profile Page (19:49)
App Logic - Signup, Login, Remember Me, Forgot Password (17:07)
Signup/Login Code Structure (1) (13:38)
Signup/Login Code Structure (2) (6:31)
Signup Code (1) (17:52)
Signup Code (2) (20:00)
Signup Code (3) (15:43)
Signup Code (4) (19:59)
Signup Code (5) (18:46)
Login Code (19:58)
"Remember me" Code (1) (19:47)
"Remember me" Code (2) (20:02)
"Remember me" Code (3) and Logout Code (20:03)
"Forgot Password" Code (1) (18:01)
"Forgot Password" Code (2) (15:36)
"Forgot Password" Code (3) (16:23)
"Forgot Password" Code (4) (16:32)
Notes Management: Logic (6:12)
Notes Management: Code Structure (16:22)
Load Notes: Code (1) (19:01)
Load Notes: Code (2) (15:49)
Create Notes: Code (1) (17:04)
Create Notes: Code (2) (12:15)
Edit Notes: Code (1) (16:59)
Edit Notes: Code (2) (14:54)
Delete Notes: Code (1) (16:43)
Delete Notes: Code (2) (11:26)
Update Username Code (1) (18:49)
Update Username Code (2) (13:23)
Update Password Code (1) (19:37)
Update Password Code (2) (10:17)
Update Email Code (1) (19:59)
Update Email Code (2) (16:11)

WordPress (3 Professional Webpages: Blog + About Page + Contact Page)

Introduction (3:34)
Installation – Activity: Create your first Blog (5:02)
Blog Posts and Comments (4:36)
Themes (2:35)
Pages and Menus (6:49)
Customise pages (1) (9:09)
Customise pages (2) (7:14)
Custom CSS (4:18)
Plugins (3:42)
Activity: Beautiful About Page (Add Content to a WordPress Page) (13:35)
Activity: Beautiful About Page (Typography) (9:38)
Activity: Beautiful About Page (Logos) (14:10)
Activity: Beautiful About Page (Buttons) (7:33)
Activity: Create an Awesome Contact Page with a Google Map and Contact Form (12:33)
WordPress Quiz

Google Maps API's

Introduction & Embed Google Map to your Website (19:38)
Google Maps API's Chapter: Roadmap and Full Source Code
Markers and InfoWindows (14:11)
Show, Hide or Delete Markers (15:40)
Animated drop of Markers (8:18)
Direction Service - Activity: Driving distance & time between New York & Toronto (18:59)
Geocoding using the Javascript API - Activity: Get Geocoordinates of an address, (11:13)
Geocoding using the geocoding API (1) - Activity: format Address & get postcode. (12:53)
Geocoding using the geocoding API (2) - Activity: format Address & get postcode. (18:12)
Nearby Search (16:51)
Autocomplete (8:49)
Google Maps APIs Quiz

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

Introduction (1:56)
Skeleton and decoration (19:56)
App Logic using an illustrative flowchart (3:34)
Javascript Code (16:58)
Distance Between Cities App Source Code
Distance between cities Quiz

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

Introduction (1:32)
Skeleton and decoration (16:07)
Facebook Widgets (3:50)
Google plus Widgets (4:24)
Tweet Button (5:24)
Twitter Timeline (4:39)
Website Source Code
Social Widgets Quiz

IOS and Android Mobile Applications using jQuery Mobile

Introduction (5:51)
Mobile Apps Chapter: Roadmap and Full Source Code
Pages, Dialogs and Transitions (13:39)
Navbars (8:07)
Grid System (5:03)
List Views (7:21)
Form Inputs (1:53)
Events (8:25)
jQuery Mobile Quiz

Professional Project: Speed Reader for IOS and Android

Introduction (2:07)
App Skeleton and Decoration (1) (15:52)
App Skeleton and Decoration (2) (19:21)
Logic of the App using an illustrative flowchart (11:34)
Start Reading (1) (8:50)
Start Reading (2) (19:55)
Pause, Resume, Restart (4:58)
Change the font size (5:20)
Change the reading speed (5:14)
Control Reading Progress: Go backwards and forward (6:07)
Publish your app to Google Play (22:44)
Publish your app to the IOS App Store (1) (12:42)
Publish your app to the IOS App Store (2) (9:40)
Speed Reader App Source Code (Pdf)
Speed Reader App Quiz

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

Introduction & Final Source Code (5:22)
Signup/Login Code (1) (11:02)
Signup/Login Code (2) (10:42)
Signup/Login Code (3) (17:12)
Search Page Skeleton & Decoration (1) (11:19)
Search Page Skeleton & Decoration (2) (13:57)
Search Page Skeleton & Decoration (3) (16:02)
Search Page Skeleton & Decoration (4) (12:07)
Search Page Skeleton & Decoration (5) (15:07)
Profile Picture Code (1) (10:56)
Profile Picture Code (2) (19:04)
Profile Picture Code (3) (12:01)
Profile Picture Code (4) (18:09)
Trips Page Skeleton & Decoration (1) (17:45)
Trips Page Skeleton & Decoration (2) (17:38)
Trips Page Skeleton & Decoration (3) (16:35)
Website Logic (14:44)
"Create a Trip" Code (1) (19:56)
"Create a Trip" Code (2) (6:59)
"Create a Trip" Code (3) (18:33)
"Create a Trip" Code (4) (19:35)
"Load Trips" Code (1) (17:10)
"Load Trips" Code (2) (19:48)
"Edit/Delete Trips" Code (1) (19:11)
"Edit/Delete Trips" Code (2) (12:54)
"Edit/Delete Trips" Code (3) (17:25)
"Edit/Delete Trips" Code (4) (8:55)
"Search Trips" Code (1) (13:56)
"Search Trips" Code (2) (14:20)
"Search Trips" Code (3) (8:40)
"Search Trips" Code (4) (13:10)
"Search Trips" Code (5) (19:30)
"Search Trips" Code (6) (8:37)
"Search Trips" Code (7) (19:34)
"Search Trips" Code (8) (19:43)
"Spinner" Code (1) (18:54)
"Spinner" Code (2) (12:13)
Finishing Touches & Congratulations (7:54)

App Skeleton and Decoration (2) - Landing Page

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock