The Complete Web Developer Course
Categories: Web Development
About Course
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.
Disclaimer!
The content utilized in this material solely for educational purposes.
Course Content
Introduction
-
Structure of a website
09:23 -
Your first website
06:14 -
Headings
04:56 -
Paragraphs
02:32 -
Links
07:49 -
Images
04:41 -
Inline vs Block Elements
05:54 -
Iframes – Activity: Embed a nice relaxing YouTube video to your website
05:42 -
Unordered Lists
03:02 -
Ordered Lists
02:09 -
Description Lists
02:19 -
Tables
03:55 -
Entities
05:07 -
Forms (1) – Activity: Create a simple Login Form
08:02 -
Forms (2) – Activity: Create a Marketplace Checkout Form
20:00 -
Text Decoration
03:59 -
Comments
02:26
CSS
-
Introduction
01:11 -
Inline CSS
02:26 -
Internal CSS
02:26 -
External CSS
02:33 -
Classes and IDs
02:45 -
Div and Span
07:26 -
Box Model
02:57 -
Box Model: Padding
04:26 -
Box Model: Border
05:49 -
Box Model: Outline
01:52 -
Box Model: Margin
02:28 -
Background
07:48 -
Floating
04:37 -
Positioning
06:21 -
Display
03:00 -
Text Decoration
05:01 -
Text Align
01:58 -
Text Font
03:51 -
Text Effects
07:53 -
Image Sprites
05:30 -
Image Opacity
02:57 -
Styling Lists
07:43 -
Styling Links
07:08 -
Gradients
10:07 -
2D Transforms
06:22 -
3D Transforms
04:53 -
Transitions
04:54 -
Animations
08:57
Professional Project: Mathematics Tutorials Website (HTML & CSS)
-
Introduction
02:23 -
Header (1)
17:47 -
Header (2)
16:42 -
Menu
18:22 -
Introduction Box
07:04 -
Sidebars (1)
19:46 -
Sidebars (2)
08:39 -
Footer & Congratulations
10:17
JavaScript
-
Introduction
08:56 -
Buttons
07:04 -
Change HTML Content
07:03 -
Change HTML Style
05:52 -
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:57 -
Objects
09:23 -
Create Objects using the “new” keyword
04:41 -
Object constructors
16:41 -
Arrays
17:45 -
If and Switch Statements – Activity: Motorway Speed Control
17:24 -
For Loops
09:23 -
While Loops – Activity- Spend $1000 randomly in a marketplace
11:07 -
Regular Expressions
16:18 -
Errors (1)
03:43 -
Errors (2) – Activity: Password Validation
12:48 -
Set Interval & SeTimeout – Activity: Create a simple counter
10:24 -
Window and Screen
13:02 -
Alert Boxes
07:46 -
Cookies
06:20
Professional Project: Maths Game (HTML, CSS & JavaScript)
-
Introduction
02:28 -
Page Structure & Styling (1)
19:59 -
Page Structure & Styling (2)
18:20 -
Page Structure & Styling (3)
15:29 -
Page Structure & Styling (4)
07:14 -
Game Logic using an illustrative flowchart
03:02 -
JavaScript Code (1)
17:23 -
JavaScript Code (2)
19:00 -
JavaScript Code (3)
17:31 -
JavaScript Code (4) & Congratulations
18:11
jQuery
-
Introduction and Loading JQuery
09:03 -
Select HTML Elements (1)
12:59 -
Select HTML Elements (2)
11:17 -
Respond to Events
12:07 -
Change HTML Content and Attributes (1)
11:48 -
Change HTML Content and Attributes (2)
07: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
08:09 -
Draggable and Droppable (1) – Activity- Leave me alone! Please drop me!
19:06 -
Draggable and Droppable (2) – Activity: Drag Items to your basket
10:10 -
Resizable
09:20 -
Selectable – Activity: Append selected Car Makes to a Box
09:47 -
Sortable – Activity: Sort and exchange Car makes between two groups
09:04 -
Accordion – Activity: Create a resizable accordion with collapsible sections
10:04 -
Autocomplete – Activity: City Input with prepopulated options
07:12 -
Button
13:16 -
Date Picker – Activity: Outbound and return Flight Date Picker just like Expedia
13:57 -
Dialog – Activity: Are you sure you want to go to the previous page?
13:59 -
Menu
06:05 -
Progress Bar – Activity: Animated progress bar filled from 0% to 100%
10:50 -
Select Menu
07:46 -
Slider – Activity: Car Mileage Range using a Slider
17:54 -
More Widgets: Spinners, Tabs and Tooltips
12:07
Professional Project: Fruits Slice Game (HTML, CSS & JQuery)
-
Introduction
02:01 -
Page Structure and Styling
12:51 -
Game Logic using an illustrative flowchart
02:58 -
jQuery Code (1)
17:45 -
jQuery Code (2)
21:05 -
jQuery Code (3)
20:08 -
jQuery Code (4)
17:51
Twitter Bootstrap
-
Introduction
07:47 -
Grid System
09:33 -
Typography
12:14 -
Tables
06:02 -
Forms (1) – Activity: Inline and Horizontal Responsive Login Forms
12:23 -
Forms (2)
11:27 -
Forms (3)
19:27 -
Buttons
12:51 -
Images
02:25 -
Navs – Activity: Website Design using Nav Tabs and Nav Pills
08:47 -
Navbars – Activity: Website Design using a responsive/collapsible navigation bar
19:58 -
Pagination – Activity: Pagination and Pager Examples like Google/Ebay
08:56 -
Jumbotron
03:12 -
Thumbnails
10:00 -
Dropdown menus
07:19 -
Modals (1) – Activity: I have an inquiry about my order
16:15 -
Modals (2) – Activity I have an inquiry about my order
07:12 -
Scrollspy
08:39 -
Tabs
14:24 -
Tooltips
06:37 -
Popovers – Activity: Create a popover just like the one you see on an IPAD
06:41 -
Alerts – Activity: Create an alert Box to show a warning or success message
07:35 -
Button plugin – Activity: Loading & Download Complete
08:51 -
Collapse plugin
16:47 -
Carousels – Activity: Create an interactive carousel slider
17:29 -
Affix plugin – Activity: Interactive Website with Content Affixed to a Menu
12:52
Professional Project: App Landing Page (HTML, CSS & Bootstrap)
-
Introduction
02:41 -
Header and Featured Content (1)
15:22 -
Header and Featured Content (2)
15:49 -
Header and Featured Content (3)
09:01 -
Trial Section, Footer & Congratulations
14:03
Professional Project: Company Website (HTML, CSS & Bootstrap)
-
Introduction
02:20 -
Structure of our work
09:00 -
Background
06:31 -
Navbar
17:33 -
Header & icons section
14:00 -
Contact Button & Footer
13:46
Professional Project: Our Lovely Course (HTML, CSS, jQuery & Bootstrap)
-
Introduction
03:07 -
Structure of our work
14:23 -
Add a background video
08:07 -
Navigation bar with advanced styling
17:05 -
Home Section
08:13 -
About Section
11:19 -
Carousel Slider (1)
17:13 -
Carousel Slider (2)
07:04 -
Adapt for Small Devices
08:53 -
Add ScrollSpy feature to navbar & Congratulations
07:14
Professional Project: Stopwatch App (HTML, CSS, jQuery & Bootstrap)
-
Introduction
02:20 -
App Skeleton and Decoration (1)
11:15 -
App Skeleton and Decoration (2)
11:47 -
App Logic using an illustrative flowchart
05:51 -
jQuery Code (1)
13:33 -
jQuery Code (2)
09:22 -
jQuery Code (3)
19:52
Professional Project: Drawing App (HTML, CSS, jQuery UI, Canvas, Local Storage)
-
Introduction
02:26 -
App Skeleton and Decoration (1)
18:26 -
App Skeleton and Decoration (2)
10:06 -
App Skeleton and Decoration (3)
15:22 -
Learn HTML5 Canvas
10:14 -
App Logic using an illustrative flowchart
02:33 -
jQuery Code Structure
05:22 -
jQuery Code (1)
07:48 -
jQuery Code (2)
16:56 -
jQuery Code (3)
17:53
PHP
-
Introduction
15:58 -
Embed PHP in HTML
07:50 -
PHP Variables
09:46 -
Data Types: Strings
06:13 -
Data Types: Integers and Floats
07:05 -
Data Types: Booleans
05:25 -
Data Types: Arrays
17:33 -
Data Types: Objects
10:58 -
Data Types: NULL
02:19 -
Data Types: Resources
05:35 -
String Functions
08:53 -
If and Switch Statements
12:28 -
For Loops
09:42 -
While Loops
06:00 -
Functions
07:59 -
GET & POST
20:00 -
Array Functions (1)
14:23 -
Array Functions (2)
13:02 -
Send Emails Activity: Send a styled email in HTML format
09:54 -
Filter User Inputs (1) Protect Yourself from Hackers
07:43 -
Filter User Inputs (2) User Input Validation
07:14 -
Activity: Create a responsive Contact Form using PHP & Bootstrap (1)
17:29 -
Activity: Create a responsive Contact Form using PHP & Bootstrap (2)
19:28 -
Activity: Create a responsive Contact Form using PHP & Bootstrap (3)
14:01 -
Date and Time (1)
13:07 -
Date and Time (2) – Activity: Day of the week you were born? Date in 1000 days?
15:59 -
Include PHP files
12:40 -
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:31 -
Upload Files Using PHP (2) Activity: Upload PDF & Text Files Less than 3Mo.
17:27 -
Cookies
06:24 -
Error Handling (1)
07:38 -
Error Handling (2) Activity: Log PHP errors in a file / Trigger error emails
15:47 -
Sessions
06:41
MySQL
-
Introduction
04:26 -
Create a database using PHP MYADMIN
10:52 -
Remote MySQL (1)
12:44 -
Remote MySQL (2)
07:14 -
Create a database using PHP & MySQL
08:40 -
Add a table to a database
10:04 -
Populate a database table
06:59 -
Activity: Populate Database once the user submits a form
19:56 -
Activity: Populate Database once the user submits a form (2)
18:44 -
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
09:23 -
Delete Database Data
04:43
Professional Project: Online Notes App (HTML, CSS, Bootstrap, PHP, MySQL, AJAX)-Part1
-
Introduction & Source Code
07:29 -
App Skeleton and Decoration (1) – Landing Page
19:58 -
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:59 -
App Skeleton and Decoration (6) – Profile Page
19:50 -
App Logic – Signup, Login, Remember Me, Forgot Password
17:08 -
Signup/Login Code Structure (1)
13:39 -
Signup/Login Code Structure (2)
06:32 -
Signup Code (1)
17:53 -
Signup Code (2)
20:00 -
Signup Code (3)
15:44 -
Signup Code (4)
19:59 -
Signup Code (1)
18:46 -
Login Code
19:59 -
Remember me Code (1)
19:48 -
Remember me Code (2)
20:03 -
Remember me Code (3) and Logout Code
20:04 -
Forgot Password Code (1)
18:01
Professional Project: Online Notes App (HTML, CSS, Bootstrap, PHP, MySQL, AJAX)-Part2
-
Forgot Password Code (2)
15:37 -
Forgot Password Code (3)
16:24 -
Forgot Password Code (4)
16:32 -
Notes Management: Logic
06:13 -
Notes Management: code Structure
16:23 -
Load Notes: Code (1)
19:02 -
Load Notes: Code (2)
15:49 -
Create Notes: Code (1)
17:05 -
Create Notes: Code (2)
12:16 -
Edit Notes: Code (1)
16:59 -
Edit Notes: Code (2)
14:54 -
Delete Notes: Code (1)
16:44 -
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:18 -
Update Email Code (1)
19:59 -
Update Email Code (2)
16:11
WordPress (3 Professional Webpages: Blog + About Page + Contact Page)
-
Introduction
03:35 -
Installation Activity: Create your first Blog
05:03 -
Blog Posts and Comments
04:36 -
Themes
02:35 -
Pages and Menus
06:50 -
Customise pages (1)
09:09 -
Customize pages (2)
07:15 -
Custom CSS
04:19 -
Plugins
03:43 -
Activity: Beautiful About Page (Add Content to a WordPress Page)
13:36 -
Activity: Beautiful About Page (Typography)
09:38 -
Activity: Beautiful About Page (Logos)
14:11 -
Activity: Beautiful About Page (Buttons)
07:33 -
Activity: Create an Awesome Contact Page with a Google Map and Contact Form
12:33
Google Maps API’s
-
Introduction & Embed Google Map to your Website
19:39 -
Markers and Info Windows
14:12 -
Show, Hide or Delete Markers
15:40 -
Animated drop of Markers
08:19 -
Direction Service – Activity: Driving distance & time between New York & Toronto
19:00 -
Geocoding using the Javascript API – Activity: Get Geocoordinates of an address
11:14 -
Geocoding using the geocoding API (1) – Activity: format Address & get postcode
12:54 -
Geocoding using the geocoding API (2) – Activity: format Address & get postcode
18:13 -
Nearby Search
16:52 -
Autocomplete
08:49
Professional Project: Distance between Cities (HTML, CSS, jQuery, Google Maps)
-
Introduction
01:56 -
Skeleton and decoration
19:56 -
App Logic using an illustrative flowchart
03:34 -
JavaScript Code
16:58
Professional Project: Website with Social Widgets (Facebook, Google+ & Twitter)
-
Introduction
01:32 -
Skeleton and decoration
16:07 -
Facebook Widgets
03:51 -
Google plus Widgets
04:25 -
Tweet Button
05:25 -
Twitter Timeline
04:39
IOS and Android Mobile Applications using jQuery Mobile
-
Introduction
05:51 -
Pages, Dialogs and Transitions
13:39 -
Navbars
08:08 -
Grid System
05:04 -
List Views
07:21 -
Form Inputs
01:53 -
Events
08:26
Professional Project: Speed Reader for IOS and Android
-
Introduction
02:07 -
App Skeleton and Decoration (1)
15:52 -
App Skeleton and Decoration (2)
19:22 -
Logic of the App using an illustrative flowchart
11:35 -
Start Reading (1)
08:51 -
Start Reading (2)
19:55 -
Pause, Resume, Restart
04:59 -
Change the font size
05:21 -
Change the reading speed
05:15 -
Control Reading Progress: Go backwards and forward
06:07 -
Publish your app to Google Play
22:44 -
Publish your app to the IOS App Store (1)
12:43 -
Publish your app to the IOS App Store (1)
09:40
Professional Project: Car Sharing Website (JavaScript, PHP, MySQL, AJAX, JSON)-Part1
-
Introduction
05:23 -
Signup/Login Code (1)
11:03 -
Signup-Login Code (2)
10:42 -
Signup/Login Code (3)
17:13 -
Search Page Skeleton & Decoration (1)
11:20 -
Search Page Skeleton & Decoration (2)
13:57 -
Search Page Skeleton & Decoration (3)
16:03 -
Search Page Skeleton & Decoration (4)
12:08 -
Search Page Skeleton & Decoration (5)
15:08 -
Profile Picture Code (1)
10:57 -
Profile Picture Code (2)
19:05 -
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:36 -
Website Logic
14:44 -
Create a Trip Code (1)
19:56 -
Create a Trip Code (2)
06:59
Professional Project: Car Sharing Website (JavaScript, PHP, MySQL, AJAX, JSON)-Part2
-
Create a Trip Code (3)
18:33 -
Create a Trip Code (4)
19:35 -
Load Trips Code (1)
17:11 -
Load Trips Code (2)
19:49 -
Edit/Delete Trips Code (1)
19:11 -
Edit/Delete Trips Code (2)
12:55 -
Edit/Delete Trips Code (3)
17:26 -
Edit/Delete Trips Code (4)
08:55 -
Search Trips Code (1)
13:56 -
Search Trips Code (2)
14:20 -
Search Trips Code (3)
08:41 -
Search Trips Code (4)
13:11 -
Search Trips Code (5)
19:31 -
Search Trips Code (6)
08:38 -
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
07:54
Student Ratings & Reviews
No Review Yet