Structure of a website

The Complete Web Development Course - Build 15 Professional Projects

Introduction - Get your free Unlimited Web Hosting - HTML

Introduction (5:55)
HTML Chapter: Roadmap and Full Source Code
Structure of a website (9:25)
Your first website (6:13)
Your passcode
Get your free unlimited web hosting (9:49)
Important note about FTP
Share your website with the World (1) (6:54)
Share your website with the World (2) Cyberduck version (12:48)
Share your website with the World (2) FileZilla version (15:55)
Headings (4:57)
Paragraphs (2:32)
Links (7:51)
Images (4:42)
Inline vs Block Elements (5:55)
Iframes - Activity: Embed a nice relaxing YouTube video to your website (5:43)
Unordered Lists (3:03)
Ordered Lists (2:09)
Description Lists (2:20)
Tables (3:55)
Entities (5:09)
Forms (1) - Activity: Create a simple Login Form (8:04)
Forms (2) - Activity: Create a Marketplace Checkout Form (20:02)
Text Decoration (3:59)
Comments (2:26)
HTML Quiz

CSS

Introduction (1:11)
CSS Chapter: Roadmap and Full Source Code
Inline CSS (2:26)
Internal CSS (2:27)
External CSS (2:34)
Classes and IDs (2:45)
Div and Span (7:27)
Box Model (2:57)
Box Model: Padding (4:27)
Box Model: Border (5:51)
Box Model: Outline (1:52)
Box Model: Margin (2:28)
Background (7:50)
Floating (4:39)
Positioning (6:23)
Display (3:01)
Text Decoration (5:02)
Text Align (1:58)
Text Font (3:51)
Text Effects (7:55)
Image Sprites (5:31)
Image Opacity (2:57)
Styling Lists (7:44)
Styling Links (7:10)
Gradients (10:08)
2D Transforms (6:24)
3D Transforms (4:55)
Transitions (4:55)
Animations (8:59)
CSS Quiz

Professional Project: Mathematics Tutorials Website (HTML & CSS)

Introduction (2:24)
Header (1) (17:48)
Header (2) (16:44)
Menu (18:24)
Introduction Box (7:05)
Sidebars (1) (19:48)
Sidebars (2) (8:40)
Footer & Congratulations (10:19)
Mathematics Tutorial Website Quiz
Maths Website Source Code

Javascript

Introduction (8:57)
JavaScript Chapter: Roadmap and Full Source Code
Buttons (7:06)
Change HTML Content (7:04)
Change HTML Style (5:53)
Variables and Data Types (11:40)
Change HTML Using Variables - Activity: Random Color Generator (10:46)
Functions: Activity: Swap the content of two divs (13:58)
Objects (9:25)
Create Objects using the "new" keyword (4:43)
Object Contructors (16:43)
Arrays (17:47)
If and Switch Statements - Activity: Motorway Speed Control (17:25)
For Loops (9:25)
While Loops - Activity: Spend $1000 Randomly in a marketplace (11:09)
Regular Expressions (16:19)
Errors (1) (3:43)
Errors (2) - Activity: Password Validation (12:50)
Set Interval & SeTimeout - Activity: Create a simple counter (10:25)
Window and Screen (13:04)
Alert Boxes (7:47)
Cookies (6:22)
Javascript Quiz

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

Introduction (2:28)
Page Structure & Styling (1) (20:00)
Page Structure & Styling (2) (18:22)
Page Structure & Styling (3) (15:30)
Page Structure & Styling (4) (7:16)
Game Logic using an illustrative flowchart (3:03)
JavaScript Code (1) (17:24)
JavaScript Code (2) (19:02)
JavaScript Code (3) (17:32)
JavaScript Code (4) & Congratulations (18:12)
Maths Game Quiz
Math Game Source Code

jQuery

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

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

Introduction (2:02)
Page Structure and Styling (12:53)
Game Logic using an illustrative flowchart (2:59)
jQuery Code (1) (17:47)
jQuery Code (2) (21:06)
jQuery Code (3) (20:10)
jQuery Code (4) (17:53)
Fruits Slice Game Quiz
Fruits Slice Game Source Code

Twitter Bootstrap

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

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

Introduction (2:41)
Header and Featured Content (1) (15:23)
Header and Featured Content (2) (15:51)
Header and Featured Content (3) (9:03)
Trial Section, Footer & Congratulations (14:05)
App Landing Page Source Code

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

Introduction (2:19)
Structure of our work (9:00)
Background (6:30)
Navbar (17:35)
Header & icons section (14:02)
Contact Button & Footer (13:48)
Company Website App Landing Page Source Code

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

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

Introduction (2:20)
App Skeleton and Decoration (1) (11:16)
App Skeleton and Decoration (2) (11:48)
App Logic using an illustrative flowchart (5:53)
jQuery Code (1) (13:34)
jQuery Code (2) (9:23)
jQuery Code (3) (19:53)
StopWatch App Source Code

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

Introduction (2:26)
App Skeleton and Decoration (1) (18:27)
App Skeleton and Decoration (2) (10:08)
App Skeleton and Decoration (3) (15:23)
Learn HTML5 Canvas (10:16)
App Logic using an illustrative flowchart (2:32)
jQuery Code Structure (5:23)
jQuery Code (1) (7:50)
jQuery Code (2) (16:58)
jQuery Code (3) (17:55)
Drawing App Source Code

PHP

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

MySQL

Introduction (4:28)
MySQL Chapter: Roadmap and Full Source Code
Create a database using PHP MYADMIN (10:53)
Remote MySQL (1) (12:45)
Remote MySQL (2) (7:16)
Create a database using PHP & MySQL (8:42)
Add a table to a database (10:06)
Populate a database table (7:00)
Activity: Populate Database once the user submits a form (19:58)
Activity: Populate Database once the user submits a form (2) (18:43)
Activity: Populate an HTML table using Database Data (1) (11:54)
Activity: Populate an HTML table using Database Data (2) (15:07)
Update Database Data (9:25)
Delete Database Data (4:44)

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

Introduction (7:30)
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:37)
"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:04)
Blog Posts and Comments (4:38)
Themes (2:36)
Pages and Menus (6:51)
Customise pages (1) (9:11)
Customise pages (2) (7:16)
Custom CSS (4:20)
Plugins (3:43)
Activity: Beautiful About Page (Add Content to a WordPress Page) (13:37)
Activity: Beautiful About Page (Typography) (9:40)
Activity: Beautiful About Page (Logos) (14:12)
Activity: Beautiful About Page (Buttons) (7:35)
Activity: Create an Awesome Contact Page with a Google Map and Contact Form (12:35)

Google Maps API's

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

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

Introduction (1:56)
Skeleton and decoration (19:58)
App Logic using an illustrative flowchart (3:35)
Javascript Code (17:00)
Distance Between Cities App Source Code

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

Introduction (1:32)
Skeleton and decoration (16:09)
Facebook Widgets (3:51)
Google plus Widgets (4:26)
Tweet Button (5:24)
Twitter Timeline (4:39)
Website Source Code

IOS and Android Mobile Applications using jQuery Mobile

Introduction (5:53)
Mobile Apps Chapter: Roadmap and Full Source Code
Pages, Dialogs and Transitions (13:41)
Navbars (8:09)
Grid System (5:05)
List Views (7:23)
Form Inputs (1:53)
Events (8:27)

Professional Project: Speed Reader for IOS and Android

Introduction (2:08)
App Skeleton and Decoration (1) (15:54)
App Skeleton and Decoration (2) (19:23)
Logic of the App using an illustrative flowchart (11:36)
Start Reading (1) (8:52)
Start Reading (2) (19:57)
Pause, Resume, Restart (5:00)
Change the font size (5:22)
Change the reading speed (5:16)
Control Reading Progress: Go backwards and forward (6:09)
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

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

Introduction (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:39)
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:44)
"Spinner" Code (1) (18:54)
"Spinner" Code (2) (12:13)
Finishing Touches & Congratulations (7:54)

Structure of a website

Complete and Continue