Unlock your potential with our online web development course! Build 15 real projects, from websites to mobile apps. Start coding today! Read more.
Development Island is a UK based innovative company specialized in providing the best technology courses on the internet.
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout This Course
Who this course is for:
- Ideal for beginners with no prior web development knowledge or experience.
- Tailored for web developers seeking new skills and a comprehensive portfolio with 15 professionally interactive websites, games, and mobile apps.
What you’ll learn:
- HTML
- CSS
- JavaScript
- jQuery
- jQuery UI
- Twitter Bootstrap
- PHP
- MySQL
- WordPress
- AJAX
- JSON
- Mobile Apps
- Google Maps APIs
- Facebook Widgets
- Google Plus Widgets
- Twitter Widgets
- And more!
Requirements:
- There is absolutely no pre-knowledge required.
Welcome to the Web Development Masterclass Course!
I’m your instructor, and I’ve structured this comprehensive online web development course to guide you, step by step, from web development basics to advanced skills. Each section is carefully designed with hands-on lectures covering major web technologies. You’ll start with fundamental concepts, apply them through practical examples, and progressively tackle more complex applications.
In-chapter activities include:
- Embedding a YouTube video (HTML)
- Creating an online checkout form (HTML)
- Implementing highway speed control (HTML & JavaScript)
- Developing flight date pickers like Expedia’s website (HTML, CSS, jQuery & jQuery UI)
- Designing a car mileage range slider (HTML, CSS, jQuery & jQuery UI)
- Building an interactive carousel slider (HTML, CSS, jQuery & Bootstrap)
- Crafting a responsive contact form (HTML, CSS, PHP & Bootstrap)
- Implementing a birthdate calculator (HTML & PHP)
- Guessing the date 1000 days from now (HTML & PHP)
- Calculating route, distance, and time between New York and Toronto (HTML, JavaScript, Google Maps API’s)
- Obtaining geographic coordinates and postcode of any address (HTML, jQuery, Google Maps API’s, JSON)
Throughout this training for web developers, you’ll embark on “FULL PROFESSIONAL PROJECTS,” including:
- Mathematics Tutorials Website (HTML & CSS)
- Maths Game (HTML, CSS & JavaScript)
- Fruits Slice Game (HTML, CSS & JQuery)
- App Landing Page (HTML, CSS & Bootstrap)
- Company Website (HTML, CSS & Bootstrap)
- About Our Course (HTML, CSS, jQuery & Bootstrap)
- Stopwatch App (HTML, CSS, jQuery & Bootstrap)
- Drawing App (HTML, CSS, jQuery & jQuery UI, Canvas, HTML5 Local Storage)
- Highly professional Blog (WordPress)
- Distance Between Cities Website (HTML, CSS, jQuery, Google Maps)
- Freedom Website with Social Widgets (Facebook, Google+ & Twitter)
- Speed Reader App for iOS and Google Play Stores
- Online Notes App (HTML, CSS, jQuery, Bootstrap, PHP & MySQL)
- Fully functional Car Sharing Website (HTML, CSS, jQuery, Bootstrap, PHP & MySQL, Ajax, JSON, Google Maps)
Our Promise to You
By the end of this online web development course, you’ll have an impressive portfolio of “OVER 15 REAL PROFESSIONAL WEBSITES, GAMES, AND MOBILE APPS FOR iOS AND GOOGLE STORES.” This positions you as a competitive candidate in the web development market, increasing your employability and opportunities for lucrative projects globally.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about developing websites.
You might also want to take the course The Complete OPENAI JS APIs Course – Build 15 Projects to master the latest GPT-4 features, including Completion API, ChatGPT API, Embeddings, DALL-E, Whisper, and more!
Course Curriculum
Section 1 - Introduction: Get Your Free Unlimited Web Hosting - HTML | |||
Introduction | 00:00:00 | ||
Your Journey Inside The Course | 00:00:00 | ||
HTML Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Structure Of A Website | 00:00:00 | ||
Your First Website | 00:00:00 | ||
Get Your Free Unlimited Web Hosting | 00:00:00 | ||
Share Your Website With The World 1 | 00:00:00 | ||
Share Your Website With The World 2 – Cyberduck Version | 00:00:00 | ||
Share Your Website With The World 3 – FileZilla Version | 00:00:00 | ||
Headings | 00:00:00 | ||
Paragraphs | 00:00:00 | ||
Links | 00:00:00 | ||
Images | 00:00:00 | ||
Inline Vs Block Elements | 00:00:00 | ||
Iframes – Activity: Embed A Nice Relaxing YouTube Video To Your Website | 00:00:00 | ||
Unordered Lists | 00:00:00 | ||
Ordered Lists | 00:00:00 | ||
Description Lists | 00:00:00 | ||
Tables | 00:00:00 | ||
Entities | 00:00:00 | ||
Forms (1) – Activity: Create A Simple Login Form | 00:00:00 | ||
Forms (2) – Activity: Create A Marketplace Checkout Form | 00:00:00 | ||
Text Decoration | 00:00:00 | ||
Comments | 00:00:00 | ||
Section 2 - CSS | |||
Introduction | 00:00:00 | ||
CSS Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Inline CSS | 00:00:00 | ||
Internal CSS | 00:00:00 | ||
External CSS | 00:00:00 | ||
Classes And IDs | 00:00:00 | ||
Div And Span | 00:00:00 | ||
Box Model | 00:00:00 | ||
Box Model: Padding | 00:00:00 | ||
Box Model: Border | 00:00:00 | ||
Box Model: Outlines | 00:00:00 | ||
Box Model: Margins | 00:00:00 | ||
Background | 00:00:00 | ||
Floating | 00:00:00 | ||
Positioning | 00:00:00 | ||
Display | 00:00:00 | ||
Text Decoration | 00:00:00 | ||
Text Align | 00:00:00 | ||
Text Font | 00:00:00 | ||
Text Effects | 00:00:00 | ||
Image Sprites | 00:00:00 | ||
Image Opacity | 00:00:00 | ||
Styling Lists | 00:00:00 | ||
Styling Links | 00:00:00 | ||
Gradients | 00:00:00 | ||
2D Transforms | 00:00:00 | ||
3D Transforms | 00:00:00 | ||
Transitions | 00:00:00 | ||
Animations | 00:00:00 | ||
Section 3 - Professional Project: Mathematics Tutorials Website (HTML And CSS) | |||
Introduction | 00:00:00 | ||
Header (1) | 00:00:00 | ||
Header (2) | 00:00:00 | ||
Menu | 00:00:00 | ||
Introduction Box | 00:00:00 | ||
Sidebars (1) | 00:00:00 | ||
Sidebars (2) | 00:00:00 | ||
Footer And Congratulations | 00:00:00 | ||
Maths Website Source Code | 00:00:00 | ||
Section 4 - Advanced CSS With Flexbox, Grid And SASS | |||
Flexbox Grid Sass Chapter Source Code | 00:00:00 | ||
Flexbox: Introduction | 00:00:00 | ||
Flexbox: Basic Flexbox | 00:00:00 | ||
Flexbox: Align Flex Items | 00:00:00 | ||
Flexbox: Align Flex Lines | 00:00:00 | ||
Flexbox: Resize Flex Items 1 | 00:00:00 | ||
Flexbox: Resize Flex Items 2 | 00:00:00 | ||
Flexbox Application: Photo Gallery 1 | 00:00:00 | ||
Flexbox Application: Photo Gallery 2 | 00:00:00 | ||
Flexbox Application: Amazon Checkout 1 | 00:00:00 | ||
Flexbox Application: Amazon Checkout 2 | 00:00:00 | ||
Flexbox Application: Amazon Checkout 3 | 00:00:00 | ||
Flexbox Application: Maths Website 1 | 00:00:00 | ||
Flexbox Application: Maths Website 2 | 00:00:00 | ||
Flexbox Application: Maths Website 3 | 00:00:00 | ||
CSS Grid: Introduction And Basic Grid Template | 00:00:00 | ||
CSS Grid: Implicit Vs Explicit Grid | 00:00:00 | ||
CSS Grid: Grid Areas And Responsive Design | 00:00:00 | ||
CSS Grid: Master The “Grid-Column” Property | 00:00:00 | ||
CSS Grid: Grid Coordinates | 00:00:00 | ||
CSS Grid: Align Grid Items | 00:00:00 | ||
CSS Grid Application: Photo Gallery | 00:00:00 | ||
CSS Grid Application: Picture Grid | 00:00:00 | ||
Sass: Introduction – Installation – Nesting Syntax | 00:00:00 | ||
Sass: .scss Vs .sass – Variables | 00:00:00 | ||
Sass: @import And @extend Directives | 00:00:00 | ||
Sass: Mixins – Operators – Functions | 00:00:00 | ||
Section 5 - JavaScript | |||
Introduction | 00:00:00 | ||
JavaScript Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Buttons | 00:00:00 | ||
Change HTML Content | 00:00:00 | ||
Change HTML Style | 00:00:00 | ||
Variables And Data Types | 00:00:00 | ||
Change HTML Using Variables – Activity: Random Color Generator | 00:00:00 | ||
Functions – Activity: Swap The Content Of Two Divs | 00:00:00 | ||
Objects | 00:00:00 | ||
Create Objects Using The “New” Keyword | 00:00:00 | ||
Object Constructors | 00:00:00 | ||
Arrays | 00:00:00 | ||
If And Switch Statements – Activity: Motorway Speed Control | 00:00:00 | ||
For Loops | 00:00:00 | ||
While Loops – Activity: Spend $1000 Randomly In A Marketplace | 00:00:00 | ||
Regular Expressions | 00:00:00 | ||
Errors (1) | 00:00:00 | ||
Errors (2) – Activity: Password Validation | 00:00:00 | ||
Set Interval And Set Timeout – Activity: Create A Simple Counter | 00:00:00 | ||
Window And Screen | 00:00:00 | ||
Alert Boxes | 00:00:00 | ||
Cookies | 00:00:00 | ||
Section 6 - Professional Project: Maths Game (HTML, CSS And JavaScript) | |||
Introduction | 00:00:00 | ||
Page Structure And Styling (1) | 00:00:00 | ||
Page Structure And Styling (2) | 00:00:00 | ||
Page Structure And Styling (3) | 00:00:00 | ||
Page Structure And Styling (4) | 00:00:00 | ||
Game Logic Using An Illustrative Flowchart | 00:00:00 | ||
JavaScript Code (1) | 00:00:00 | ||
JavaScript Code (2) | 00:00:00 | ||
JavaScript Code (3) | 00:00:00 | ||
JavaScript Code (4) And Congratulations | 00:00:00 | ||
Math Game Source Code | 00:00:00 | ||
Section 7 - jQuery | |||
Introduction And Loading JQuery | 00:00:00 | ||
JQuery Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Select HTML Elements (1) | 00:00:00 | ||
Select HTML Elements (2) | 00:00:00 | ||
Respond To Events | 00:00:00 | ||
Change HTML Content And Attributes (1) | 00:00:00 | ||
Change HTML Content And Attributes (2) | 00:00:00 | ||
Change Styling (1) | 00:00:00 | ||
Start Change Styling (2) – Activity: Random Position And Color Generator | 00:00:00 | ||
jQuery Effects | 00:00:00 | ||
Ajax | 00:00:00 | ||
jQuery UI Introduction | 00:00:00 | ||
Draggable And Droppable (1) – Activity: Leave Me Alone! Please Drop Me! | 00:00:00 | ||
Draggable And Droppable (2) – Activity: Drag Items To Your Basket | 00:00:00 | ||
Resizable | 00:00:00 | ||
Selectable – Activity: Append Selected Car Makes To A Box | 00:00:00 | ||
Sortable – Activity: Sort And Exchange Car Makes Between Two Groups | 00:00:00 | ||
Accordion – Activity: Create A Resizable Accordion With Collapsible Sections | 00:00:00 | ||
Autocomplete – Activity: City Input With Pre-Populated Options | 00:00:00 | ||
Button | 00:00:00 | ||
Date Picker – Activity: Outbound And Return Flight Date Picker Just Like Expedia | 00:00:00 | ||
Dialog – Activity: Are you Sure You Want To Go To The Previous Page? | 00:00:00 | ||
Menu | 00:00:00 | ||
Progress Bar – Activity: Animated Progress Bar Filled From 0% To 100% | 00:00:00 | ||
Select Menu | 00:00:00 | ||
Slider – Activity: Car Mileage Range Using A Slider | 00:00:00 | ||
More Widgets: Spinners, Tabs And Tool Tips | 00:00:00 | ||
Section 8 - Professional Project: Fruits Slice Game (HTML, CSS And jQuery) | |||
Introduction | 00:00:00 | ||
Page Structure And Styling | 00:00:00 | ||
Game Logic Using An Illustrative Flowchart | 00:00:00 | ||
jQuery Code (1) | 00:00:00 | ||
jQuery Code (2) | 00:00:00 | ||
jQuery Code (3) | 00:00:00 | ||
jQuery Code (4) | 00:00:00 | ||
Fruits Slice Game Source Code | 00:00:00 | ||
Section 9 - Twitter Bootstrap | |||
Introduction | 00:00:00 | ||
Bootstrap Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Grid System | 00:00:00 | ||
Typography | 00:00:00 | ||
Tables | 00:00:00 | ||
Forms (1) – Activity: Inline And Horizontal Responsive Login Forms | 00:00:00 | ||
Forms (2) | 00:00:00 | ||
Forms (3) | 00:00:00 | ||
Buttons | 00:00:00 | ||
Images | 00:00:00 | ||
Navs – Activity: Website Design Using Nav Tabs And Nav Pills | 00:00:00 | ||
Navbars – Activity: Website Design Using A Responsive/Collapsible Navigation Bar | 00:00:00 | ||
Pagination – Activity: Pagination And Pager Examples Like Google/Ebay | 00:00:00 | ||
Jumbotron | 00:00:00 | ||
Thumbnails | 00:00:00 | ||
Dropdown Menus | 00:00:00 | ||
Modals (1) – Activity: I Have An Inquiry About My Order | 00:00:00 | ||
Modals (2) – Activity: I Have An Inquiry About My Order | 00:00:00 | ||
Scrollspy | 00:00:00 | ||
Tabs | 00:00:00 | ||
Tooltips | 00:00:00 | ||
Popovers – Activity: Create A Pop Over Just Like The One You See On An iPAD | 00:00:00 | ||
Alerts – Activity: Create An Alert Box To Show A Warning Or Success Message | 00:00:00 | ||
Button Plugin – Activity: Loading… Download Complete | 00:00:00 | ||
Collapse Plugin | 00:00:00 | ||
Carousels – Activity: Create An Interactive Carousel Slider | 00:00:00 | ||
Affix Plugin – Activity: Interactive Website With Content Affixed To A Menu | 00:00:00 | ||
Section 10 - Professional Project: App Landing Page (HTML, CSS And Bootstrap) | |||
Introduction | 00:00:00 | ||
Header And Featured Content (1) | 00:00:00 | ||
Header and Featured Content (2) | 00:00:00 | ||
Header and Featured Content (3) | 00:00:00 | ||
Trial Section, Footer And Congratulations | 00:00:00 | ||
App Landing Page Source Code | 00:00:00 | ||
Section 11 - Professional Project: Company Website (HTML, CSS And Bootstrap) | |||
Introduction | 00:00:00 | ||
Structure Of Our Work | 00:00:00 | ||
Background | 00:00:00 | ||
Navbar | 00:00:00 | ||
Header And Icons Section | 00:00:00 | ||
Contact Button And Footer | 00:00:00 | ||
Company Website App Landing Page Source Code | 00:00:00 | ||
Section 12 - Professional Project: Our Lovely Course (HTML, CSS, jQuery And Bootstrap) | |||
Introduction | 00:00:00 | ||
Structure Of Our Work | 00:00:00 | ||
Add A Background Video | 00:00:00 | ||
Navigation Bar With Advanced Styling | 00:00:00 | ||
Home Section | 00:00:00 | ||
About Section | 00:00:00 | ||
Carousel Slider (1) | 00:00:00 | ||
Carousel Slider (2) | 00:00:00 | ||
Adapt For Small Devices | 00:00:00 | ||
Add Scroll Spy Feature To Navbar And Congratulations | 00:00:00 | ||
Our Lovely Course Website Source Code | 00:00:00 | ||
Introduction | 00:00:00 | ||
App Skeleton And Decoration (1) | 00:00:00 | ||
App Skeleton And Decoration (2) | 00:00:00 | ||
Section 13 - Professional Project: Stopwatch App (HTML, CSS, jQuery And Bootstrap) | |||
App Logic Using An Illustrative Flowchart | 00:00:00 | ||
jQuery Code (1) | 00:00:00 | ||
jQuery Code (2) | 00:00:00 | ||
jQuery Code (3) | 00:00:00 | ||
StopWatch App Source Code | 00:00:00 | ||
Section 14 - Professional Project: Drawing App (HTML, CSS, jQuery UI, Canvas And Local Storage) | |||
Introduction | 00:00:00 | ||
App Skeleton And Decoration (1) | 00:00:00 | ||
App Skeleton And Decoration (2) | 00:00:00 | ||
App Skeleton And Decoration (3) | 00:00:00 | ||
Learn HTML5 Canvas | 00:00:00 | ||
App Logic Using An Illustrative Flowchart | 00:00:00 | ||
jQuery Code Structure | 00:00:00 | ||
jQuery Code (1) | 00:00:00 | ||
jQuery Code (2) | 00:00:00 | ||
jQuery Code (3) | 00:00:00 | ||
Drawing App Source Code | 00:00:00 | ||
Section 15 - ES6 - Modern JavaScript | |||
Download ES6 Source Code | 00:00:00 | ||
Introduction To Modern Javascript (ES6) | 00:00:00 | ||
Variables And Scoping: Review Of “var” | 00:00:00 | ||
Variables And Scoping: Let Scope And Temporal Dead Zone | 00:00:00 | ||
Block Scoping In ES6 | 00:00:00 | ||
Functions And Block Scoping | 00:00:00 | ||
Functions And Block Scoping – Use Let | 00:00:00 | ||
Let Scope Vs Closures | 00:00:00 | ||
Closures Challenge | 00:00:00 | ||
Read Only Variables – Const | 00:00:00 | ||
New Features That Make Your Life Easier: Template Literals | 00:00:00 | ||
New Features That Make Your Life Easier: Arrow Functions – ‘This’ Lexical Scope | 00:00:00 | ||
Destructuring – Arrays | 00:00:00 | ||
Destructuring – Objects | 00:00:00 | ||
Destructuring – Functions | 00:00:00 | ||
Functions – Default Parameter Values | 00:00:00 | ||
Functions – Rest Parameters | 00:00:00 | ||
Spread Operator | 00:00:00 | ||
Objects New Features | 00:00:00 | ||
Iteration: For Of Loop | 00:00:00 | ||
Iterators – Next() – Generators | 00:00:00 | ||
Maps – Iteration | 00:00:00 | ||
Sets – Iteration | 00:00:00 | ||
Sets – Challenge: Intersection And Difference | 00:00:00 | ||
Symbols | 00:00:00 | ||
Symbol.Iterator | 00:00:00 | ||
Array.From: Collections, Strings, Arguments | 00:00:00 | ||
Array.From: Optional Map, Length Property, Maps And Sets | 00:00:00 | ||
Array.Of | 00:00:00 | ||
More Array Methods | 00:00:00 | ||
ES6 Classes: Back To ES5 Constructors | 00:00:00 | ||
ES6 Classes: Syntax | 00:00:00 | ||
ES6 Classes: Static Methods | 00:00:00 | ||
ES6 Classes: Getters And Setters | 00:00:00 | ||
Class Inheritance – Extends – Super | 00:00:00 | ||
Section 16 - "Front End" Vs "Back End" | |||
Understand The Back End 1 | 00:00:00 | ||
Understand The Back End 2 | 00:00:00 | ||
Section 17 - Node.js - Introduction And Installation | |||
Node.js – Introduction To Node.js | 00:00:00 | ||
Node.js – How To Run Unix Commands On Windows | 00:00:00 | ||
Node.js – Node.js Installation + REPL (Read-Eval-Print-Loop) | 00:00:00 | ||
Section 18 - The "Super" Command Line Crash Course | |||
Command Line Crash Course 1 | 00:00:00 | ||
Command Line Crash Course 2 | 00:00:00 | ||
Command Line Crash Course 3 | 00:00:00 | ||
Command Line Crash Course 4 | 00:00:00 | ||
Section 19 - Node.js - Let's Dive In (Using ES6 + ES7) | |||
Node.js – Download Chapter Source Code | 00:00:00 | ||
Node.js – Your First Node Application | 00:00:00 | ||
Node.js – File Exports | 00:00:00 | ||
Node.js – HTTP Built-In Module 1 | 00:00:00 | ||
Node.js – HTTP Built-In Module 2 | 00:00:00 | ||
Node.js – HTTP Built-In Module 3 | 00:00:00 | ||
Node.js – Fs Built-In Module – Blocking Mode | 00:00:00 | ||
Node.js – Fs Built-In Module – Non Blocking Mode | 00:00:00 | ||
Node.js – Fs Built-In Module – Use ES6 Promises | 00:00:00 | ||
Node.js – Fs Built-In Module – Use ES7 Async Await | 00:00:00 | ||
Node.js – Fs Built-In Module – More Features | 00:00:00 | ||
Section 20 - Professional Project: Website With Social Widgets (Facebook, Google+ And Twitter) | |||
Node.js – Download Chapter Source Code | 00:00:00 | ||
Professional Project 18 – Project Introduction: Online File Explorer App (Pure Node.js , Bootstrap 4) | 00:00:00 | ||
Professional Project 18 – Skeleton And Decoration | 00:00:00 | ||
Professional Project 18 – App Logic | 00:00:00 | ||
Professional Project 18 – Create The Server | 00:00:00 | ||
Professional Project 18 – Decode The Path Name And Convert It To A Full Static Path | 00:00:00 | ||
Professional Project 18 – Display Folder Content And Print The Title | 00:00:00 | ||
Professional Project 18 – Show The Path Inside A “Breadcrumb” | 00:00:00 | ||
Professional Project 18 – Loop Through Folder Elements | 00:00:00 | ||
Professional Project 18 – Print Icons – Get Introduced To The Child_Process Module | 00:00:00 | ||
Professional Project 18 – Calculate Folders’ Size Using The Child_Process Module | 00:00:00 | ||
Professional Project 18 – Convert Folders’ Size To Bytes – Retrieve Items’ Last Modified Time | 00:00:00 | ||
Professional Project 18 – Calculate The Size Of Files | 00:00:00 | ||
Professional Project 18 – Get The Mime Type Of Files | 00:00:00 | ||
Professional Project 18 – Serve Files To The Client | 00:00:00 | ||
Professional Project 18 – Serve PDF Files On The Browser – Serve Media Content In Chunks Using A Stream | 00:00:00 | ||
Professional Project 18 – Re-Order Folder Elements By Name | 00:00:00 | ||
Professional Project 18 – Re-Order Folder Elements By Name 2 | 00:00:00 | ||
Professional Project 18 – Add The Up And Down Arrows After Sorting Elements By Name | 00:00:00 | ||
Professional Project 18 – Sort Elements By Size And Last Modified | 00:00:00 | ||
Professional Project 18 – Fix Projects Bugs | 00:00:00 | ||
Section 21 - Git And GitHub | |||
Git And GitHub – Introduction To Version Control Using Git | 00:00:00 | ||
Your Git Identity | 00:00:00 | ||
Git And GitHub – Git Using The Command Line | 00:00:00 | ||
Git And GitHub – Git Branching And Merging | 00:00:00 | ||
GitHub – Introduction | 00:00:00 | ||
GitHub – Cloning, Forking And Pull Requests 1 | 00:00:00 | ||
GitHub – Cloning, Forking And Pull Requests 2 | 00:00:00 | ||
GitHub – Cloning, Forking And Pull Requests 3 | 00:00:00 | ||
Section 22 - Deploy Your App To Heroku | |||
Professional Project 18 – Deploy Your App To Heroku | 00:00:00 | ||
Section 23 - PHP | |||
Introduction | 00:00:00 | ||
PHP Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Embed PHP In HTML | 00:00:00 | ||
PHP Variables | 00:00:00 | ||
Data Types: Strings | 00:00:00 | ||
Data Types: Integers And Floats | 00:00:00 | ||
Data Types: Booleans | 00:00:00 | ||
Data Types: Arrays | 00:00:00 | ||
Data Types: Objects | 00:00:00 | ||
Data Types: NULL | 00:00:00 | ||
Data Types: Resources | 00:00:00 | ||
String Functions | 00:00:00 | ||
If And Switch Statements | 00:00:00 | ||
For Loops | 00:00:00 | ||
While Loops | 00:00:00 | ||
Functions | 00:00:00 | ||
GET And POST | 00:00:00 | ||
Array Functions (1) | 00:00:00 | ||
Array Functions (2) | 00:00:00 | ||
Send Emails – Activity: Send A Styled Email In HTML Format | 00:00:00 | ||
Filter User Inputs (1) – Protect Yourself From Hackers | 00:00:00 | ||
Filter User Inputs (2) – User Input Validation | 00:00:00 | ||
Activity: Create A Responsive Contact Form Using PHP And Bootstrap (1) | 00:00:00 | ||
Activity: Create A Responsive Contact Form Using PHP And Bootstrap (2) | 00:00:00 | ||
Activity: Create A Responsive Contact Form Using PHP And Bootstrap (3) | 00:00:00 | ||
Date And Time (1) | 00:00:00 | ||
Date And Time (2) – Activity: Day Of The Week You Were Born? Date In 1000 Days? | 00:00:00 | ||
Include PHP Files | 00:00:00 | ||
File Handling (1): Open – Read – Write – Close | 00:00:00 | ||
File Handling (2): Open – Read – Write – Close | 00:00:00 | ||
Upload Files Using PHP (1) – Activity: Upload PDF And Text Files Less Than 3Mo. | 00:00:00 | ||
Upload Files Using PHP (2) – Activity: Upload PDF And Text Files Less Than 3Mo. | 00:00:00 | ||
Cookies | 00:00:00 | ||
Error Handling (1) | 00:00:00 | ||
Error Handling (2) – Activity: Log PHP Errors In A file / Trigger Error Emails | 00:00:00 | ||
Sessions | 00:00:00 | ||
Section 24 - MySQL | |||
Introduction | 00:00:00 | ||
MySQL Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Create A Database Using PHP MYADMIN | 00:00:00 | ||
Remote MySQL (1) | 00:00:00 | ||
Remote MySQL (2) | 00:00:00 | ||
Create A Database Using PHP And MySQL | 00:00:00 | ||
Add A Table To A Database | 00:00:00 | ||
Populate A Database Table | 00:00:00 | ||
Activity: Populate Database Once The User Submits A Form | 00:00:00 | ||
Activity: Populate Database Once The User Submits A Form (2) | 00:00:00 | ||
Activity: Populate An HTML Table Using Database Data (1) | 00:00:00 | ||
Activity: Populate An HTML Table Using Database Data (2) | 00:00:00 | ||
Update Database Data | 00:00:00 | ||
Delete Database Data | 00:00:00 | ||
Section 25 - Professional Project: Online Notes App (HTML, CSS, Bootstrap, PHP, MySQL And AJAX) | |||
Introduction | 00:00:00 | ||
App Skeleton And Decoration (1) – Landing Page | 00:00:00 | ||
App Skeleton And Decoration (2) – Landing Page | 00:00:00 | ||
App Skeleton And Decoration (3) – Landing Page | 00:00:00 | ||
App Skeleton And Decoration (4) – Landing Page | 00:00:00 | ||
App Skeleton And Decoration (5) – My Notes Page | 00:00:00 | ||
App Skeleton And Decoration (6) – Profile Page | 00:00:00 | ||
App Logic – Signup, Login, Remember Me And Forgot Password | 00:00:00 | ||
Signup/Login Code Structure (1) | 00:00:00 | ||
Signup/Login Code Structure (2) | 00:00:00 | ||
Signup Code (1) | 00:00:00 | ||
Signup Code (2) | 00:00:00 | ||
Signup Code (3) | 00:00:00 | ||
Signup Code (4) | 00:00:00 | ||
Signup Code (5) | 00:00:00 | ||
Login Code | 00:00:00 | ||
“Remember Me” Code (1) | 00:00:00 | ||
“Remember Me” Code (2) | 00:00:00 | ||
“Remember Me” Code (3) And Logout Code | 00:00:00 | ||
“Forgot Password” Code (1) | 00:00:00 | ||
“Forgot Password” Code (2) | 00:00:00 | ||
“Forgot Password” Code (3) | 00:00:00 | ||
“Forgot Password” Code (4) | 00:00:00 | ||
Notes Management: Logic | 00:00:00 | ||
Notes Management: Code Structure | 00:00:00 | ||
Load Notes: Code (1) | 00:00:00 | ||
Load Notes: Code (2) | 00:00:00 | ||
Create Notes: Code (1) | 00:00:00 | ||
Create Notes: Code (2) | 00:00:00 | ||
Edit Notes: Code (1) | 00:00:00 | ||
Edit Notes: Code (2) | 00:00:00 | ||
Delete Notes: Code (1) | 00:00:00 | ||
Delete Notes: Code (2) | 00:00:00 | ||
Update Username Code (1) | 00:00:00 | ||
Update Username Code (2) | 00:00:00 | ||
Update Password Code (1) | 00:00:00 | ||
Update Password Code (2) | 00:00:00 | ||
Update Email Code (1) | 00:00:00 | ||
Update Email Code (2) | 00:00:00 | ||
Section 26 - WordPress (3 Professional Webpages: Blog + About Page + Contact Page) | |||
Introduction | 00:00:00 | ||
Installation – Activity: Create Your First Blog | 00:00:00 | ||
Blog Posts And Comments | 00:00:00 | ||
Themes | 00:00:00 | ||
Pages And Menus | 00:00:00 | ||
Customize Pages (1) | 00:00:00 | ||
Customize Pages (2) | 00:00:00 | ||
Custom CSS | 00:00:00 | ||
Plugins | 00:00:00 | ||
Activity: Beautiful About Page (Add Content To A WordPress Page) | 00:00:00 | ||
Activity: Beautiful About Page (Typography) | 00:00:00 | ||
Activity: Beautiful About Page (Logos) | 00:00:00 | ||
Activity: Beautiful About Page (Buttons) | 00:00:00 | ||
Activity: Create An Awesome Contact Page With A Google Map And Contact Form | 00:00:00 | ||
Section 27 - Google Maps API's | |||
Introduction And Embed Google Map To Your Website | 00:00:00 | ||
Google Maps API’s Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Markers And Infowindows | 00:00:00 | ||
Show, Hide Or Delete Markers | 00:00:00 | ||
Animated Drop Of Markers | 00:00:00 | ||
Direction Service – Activity: Driving Distance And Time Between New York And Toronto | 00:00:00 | ||
Geocoding Using The Javascript API – Activity: Get Geocoordinates Of An Address | 00:00:00 | ||
Geocoding Using The Geocoding API (1) – Activity: Format Address And Get Postcode | 00:00:00 | ||
Geocoding Using The Geocoding API (2) – Activity: Format Address And Get Postcode | 00:00:00 | ||
Nearby Search | 00:00:00 | ||
Autocomplete | 00:00:00 | ||
Section 28 - Professional Project: Distance Between Cities (HTML, CSS, jQuery And Google Maps) | |||
Introduction | 00:00:00 | ||
Skeleton And decoration | 00:00:00 | ||
App Logic Using An Illustrative Flowchart | 00:00:00 | ||
Javascript Code | 00:00:00 | ||
Distance Between Cities App Source Code | 00:00:00 | ||
Section 29 - Professional Project: Website With Social Widgets (Facebook, Google+ And Twitter) | |||
Introduction | 00:00:00 | ||
Skeleton And Decoration | 00:00:00 | ||
Facebook Widgets | 00:00:00 | ||
Google Plus Widgets | 00:00:00 | ||
Tweet Button | 00:00:00 | ||
Twitter Timeline | 00:00:00 | ||
Website Source Code | 00:00:00 | ||
Section 30 - iOS And Android Mobile Applications Using jQuery Mobile | |||
Introduction | 00:00:00 | ||
Mobile Apps Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Pages, Dialogs And Transitions | 00:00:00 | ||
Navbars | 00:00:00 | ||
Grid System | 00:00:00 | ||
List Views | 00:00:00 | ||
Form Inputs | 00:00:00 | ||
Events | 00:00:00 | ||
Section 31 - Professional Project: Speed Reader For iOS And Android | |||
Introduction | 00:00:00 | ||
App Skeleton And Decoration (1) | 00:00:00 | ||
App Skeleton And Decoration (2) | 00:00:00 | ||
Logic Of The App Using An Illustrative Flowchart | 00:00:00 | ||
Start Reading (1) | 00:00:00 | ||
Start Reading (2) | 00:00:00 | ||
Pause, Resume And Restart | 00:00:00 | ||
Change The Font Size | 00:00:00 | ||
Change The Reading Speed | 00:00:00 | ||
Control Reading Progress: Go Backwards And Forward | 00:00:00 | ||
Publish Your App To Google Play | 00:00:00 | ||
Publish Your App To The iOS App Store (1) | 00:00:00 | ||
Publish Your App To The iOS App Store (2) | 00:00:00 | ||
Speed Reader App Source Code | 00:00:00 | ||
Section 32 - Professional Project: Car Sharing Website (Javascript, PHP, MySQL, AJAX And JSON) | |||
Introduction | 00:00:00 | ||
Signup/Login Code (1) | 00:00:00 | ||
Signup/Login Code (2) | 00:00:00 | ||
art Signup/Login Code (3) | 00:00:00 | ||
Search Page Skeleton And Decoration (1) | 00:00:00 | ||
Search Page Skeleton And Decoration (2) | 00:00:00 | ||
Search Page Skeleton And Decoration (3) | 00:00:00 | ||
Search Page Skeleton And Decoration (4) | 00:00:00 | ||
Search Page Skeleton And Decoration (5) | 00:00:00 | ||
Profile Picture Code (1) | 00:00:00 | ||
Profile Picture Code (2) | 00:00:00 | ||
Profile Picture Code (3) | 00:00:00 | ||
Profile Picture Code (4) | 00:00:00 | ||
Trips Page Skeleton And Decoration (1) | 00:00:00 | ||
Trips Page Skeleton And Decoration (2) | 00:00:00 | ||
Trips Page Skeleton And Decoration (3) | 00:00:00 | ||
Website Logic | 00:00:00 | ||
“Create A Trip” Code (1) | 00:00:00 | ||
“Create A Trip” Code (2) | 00:00:00 | ||
“Create A Trip” Code (3) | 00:00:00 | ||
“Create A Trip” Code (4) | 00:00:00 | ||
“Load Trips” Code (1) | 00:00:00 | ||
“Load Trips” Code (2) | 00:00:00 | ||
“Edit/Delete Trips” Code (1) | 00:00:00 | ||
Edit/Delete Trips” Code (2) | 00:00:00 | ||
“Edit/Delete Trips” Code (3) | 00:00:00 | ||
“Edit/Delete Trips” Code (4) | 00:00:00 | ||
“Search Trips” Code (1) | 00:00:00 | ||
“Search Trips” Code (2) | 00:00:00 | ||
“Search Trips” Code (3) | 00:00:00 | ||
“Search Trips” Code (4) | 00:00:00 | ||
“Search Trips” Code (5) | 00:00:00 | ||
“Search Trips” Code (6) | 00:00:00 | ||
“Search Trips” Code (7) | 00:00:00 | ||
“Search Trips” Code (8) | 00:00:00 | ||
“Spinner” Code (1) | 00:00:00 | ||
“Spinner” Code (2) | 00:00:00 | ||
Finishing Touches And Congratulations | 00:00:00 | ||
Section 33 - Further Reading | |||
Extra Resources For Further Reading | 00:00:00 |
About This Course
Who this course is for:
- Ideal for beginners with no prior web development knowledge or experience.
- Tailored for web developers seeking new skills and a comprehensive portfolio with 15 professionally interactive websites, games, and mobile apps.
What you’ll learn:
- HTML
- CSS
- JavaScript
- jQuery
- jQuery UI
- Twitter Bootstrap
- PHP
- MySQL
- WordPress
- AJAX
- JSON
- Mobile Apps
- Google Maps APIs
- Facebook Widgets
- Google Plus Widgets
- Twitter Widgets
- And more!
Requirements:
- There is absolutely no pre-knowledge required.
Welcome to the Web Development Masterclass Course!
I’m your instructor, and I’ve structured this comprehensive online web development course to guide you, step by step, from web development basics to advanced skills. Each section is carefully designed with hands-on lectures covering major web technologies. You’ll start with fundamental concepts, apply them through practical examples, and progressively tackle more complex applications.
In-chapter activities include:
- Embedding a YouTube video (HTML)
- Creating an online checkout form (HTML)
- Implementing highway speed control (HTML & JavaScript)
- Developing flight date pickers like Expedia’s website (HTML, CSS, jQuery & jQuery UI)
- Designing a car mileage range slider (HTML, CSS, jQuery & jQuery UI)
- Building an interactive carousel slider (HTML, CSS, jQuery & Bootstrap)
- Crafting a responsive contact form (HTML, CSS, PHP & Bootstrap)
- Implementing a birthdate calculator (HTML & PHP)
- Guessing the date 1000 days from now (HTML & PHP)
- Calculating route, distance, and time between New York and Toronto (HTML, JavaScript, Google Maps API’s)
- Obtaining geographic coordinates and postcode of any address (HTML, jQuery, Google Maps API’s, JSON)
Throughout this training for web developers, you’ll embark on “FULL PROFESSIONAL PROJECTS,” including:
- Mathematics Tutorials Website (HTML & CSS)
- Maths Game (HTML, CSS & JavaScript)
- Fruits Slice Game (HTML, CSS & JQuery)
- App Landing Page (HTML, CSS & Bootstrap)
- Company Website (HTML, CSS & Bootstrap)
- About Our Course (HTML, CSS, jQuery & Bootstrap)
- Stopwatch App (HTML, CSS, jQuery & Bootstrap)
- Drawing App (HTML, CSS, jQuery & jQuery UI, Canvas, HTML5 Local Storage)
- Highly professional Blog (WordPress)
- Distance Between Cities Website (HTML, CSS, jQuery, Google Maps)
- Freedom Website with Social Widgets (Facebook, Google+ & Twitter)
- Speed Reader App for iOS and Google Play Stores
- Online Notes App (HTML, CSS, jQuery, Bootstrap, PHP & MySQL)
- Fully functional Car Sharing Website (HTML, CSS, jQuery, Bootstrap, PHP & MySQL, Ajax, JSON, Google Maps)
Our Promise to You
By the end of this online web development course, you’ll have an impressive portfolio of “OVER 15 REAL PROFESSIONAL WEBSITES, GAMES, AND MOBILE APPS FOR iOS AND GOOGLE STORES.” This positions you as a competitive candidate in the web development market, increasing your employability and opportunities for lucrative projects globally.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about developing websites.
You might also want to take the course The Complete OPENAI JS APIs Course – Build 15 Projects to master the latest GPT-4 features, including Completion API, ChatGPT API, Embeddings, DALL-E, Whisper, and more!
Course Curriculum
Section 1 - Introduction: Get Your Free Unlimited Web Hosting - HTML | |||
Introduction | 00:00:00 | ||
Your Journey Inside The Course | 00:00:00 | ||
HTML Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Structure Of A Website | 00:00:00 | ||
Your First Website | 00:00:00 | ||
Get Your Free Unlimited Web Hosting | 00:00:00 | ||
Share Your Website With The World 1 | 00:00:00 | ||
Share Your Website With The World 2 – Cyberduck Version | 00:00:00 | ||
Share Your Website With The World 3 – FileZilla Version | 00:00:00 | ||
Headings | 00:00:00 | ||
Paragraphs | 00:00:00 | ||
Links | 00:00:00 | ||
Images | 00:00:00 | ||
Inline Vs Block Elements | 00:00:00 | ||
Iframes – Activity: Embed A Nice Relaxing YouTube Video To Your Website | 00:00:00 | ||
Unordered Lists | 00:00:00 | ||
Ordered Lists | 00:00:00 | ||
Description Lists | 00:00:00 | ||
Tables | 00:00:00 | ||
Entities | 00:00:00 | ||
Forms (1) – Activity: Create A Simple Login Form | 00:00:00 | ||
Forms (2) – Activity: Create A Marketplace Checkout Form | 00:00:00 | ||
Text Decoration | 00:00:00 | ||
Comments | 00:00:00 | ||
Section 2 - CSS | |||
Introduction | 00:00:00 | ||
CSS Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Inline CSS | 00:00:00 | ||
Internal CSS | 00:00:00 | ||
External CSS | 00:00:00 | ||
Classes And IDs | 00:00:00 | ||
Div And Span | 00:00:00 | ||
Box Model | 00:00:00 | ||
Box Model: Padding | 00:00:00 | ||
Box Model: Border | 00:00:00 | ||
Box Model: Outlines | 00:00:00 | ||
Box Model: Margins | 00:00:00 | ||
Background | 00:00:00 | ||
Floating | 00:00:00 | ||
Positioning | 00:00:00 | ||
Display | 00:00:00 | ||
Text Decoration | 00:00:00 | ||
Text Align | 00:00:00 | ||
Text Font | 00:00:00 | ||
Text Effects | 00:00:00 | ||
Image Sprites | 00:00:00 | ||
Image Opacity | 00:00:00 | ||
Styling Lists | 00:00:00 | ||
Styling Links | 00:00:00 | ||
Gradients | 00:00:00 | ||
2D Transforms | 00:00:00 | ||
3D Transforms | 00:00:00 | ||
Transitions | 00:00:00 | ||
Animations | 00:00:00 | ||
Section 3 - Professional Project: Mathematics Tutorials Website (HTML And CSS) | |||
Introduction | 00:00:00 | ||
Header (1) | 00:00:00 | ||
Header (2) | 00:00:00 | ||
Menu | 00:00:00 | ||
Introduction Box | 00:00:00 | ||
Sidebars (1) | 00:00:00 | ||
Sidebars (2) | 00:00:00 | ||
Footer And Congratulations | 00:00:00 | ||
Maths Website Source Code | 00:00:00 | ||
Section 4 - Advanced CSS With Flexbox, Grid And SASS | |||
Flexbox Grid Sass Chapter Source Code | 00:00:00 | ||
Flexbox: Introduction | 00:00:00 | ||
Flexbox: Basic Flexbox | 00:00:00 | ||
Flexbox: Align Flex Items | 00:00:00 | ||
Flexbox: Align Flex Lines | 00:00:00 | ||
Flexbox: Resize Flex Items 1 | 00:00:00 | ||
Flexbox: Resize Flex Items 2 | 00:00:00 | ||
Flexbox Application: Photo Gallery 1 | 00:00:00 | ||
Flexbox Application: Photo Gallery 2 | 00:00:00 | ||
Flexbox Application: Amazon Checkout 1 | 00:00:00 | ||
Flexbox Application: Amazon Checkout 2 | 00:00:00 | ||
Flexbox Application: Amazon Checkout 3 | 00:00:00 | ||
Flexbox Application: Maths Website 1 | 00:00:00 | ||
Flexbox Application: Maths Website 2 | 00:00:00 | ||
Flexbox Application: Maths Website 3 | 00:00:00 | ||
CSS Grid: Introduction And Basic Grid Template | 00:00:00 | ||
CSS Grid: Implicit Vs Explicit Grid | 00:00:00 | ||
CSS Grid: Grid Areas And Responsive Design | 00:00:00 | ||
CSS Grid: Master The “Grid-Column” Property | 00:00:00 | ||
CSS Grid: Grid Coordinates | 00:00:00 | ||
CSS Grid: Align Grid Items | 00:00:00 | ||
CSS Grid Application: Photo Gallery | 00:00:00 | ||
CSS Grid Application: Picture Grid | 00:00:00 | ||
Sass: Introduction – Installation – Nesting Syntax | 00:00:00 | ||
Sass: .scss Vs .sass – Variables | 00:00:00 | ||
Sass: @import And @extend Directives | 00:00:00 | ||
Sass: Mixins – Operators – Functions | 00:00:00 | ||
Section 5 - JavaScript | |||
Introduction | 00:00:00 | ||
JavaScript Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Buttons | 00:00:00 | ||
Change HTML Content | 00:00:00 | ||
Change HTML Style | 00:00:00 | ||
Variables And Data Types | 00:00:00 | ||
Change HTML Using Variables – Activity: Random Color Generator | 00:00:00 | ||
Functions – Activity: Swap The Content Of Two Divs | 00:00:00 | ||
Objects | 00:00:00 | ||
Create Objects Using The “New” Keyword | 00:00:00 | ||
Object Constructors | 00:00:00 | ||
Arrays | 00:00:00 | ||
If And Switch Statements – Activity: Motorway Speed Control | 00:00:00 | ||
For Loops | 00:00:00 | ||
While Loops – Activity: Spend $1000 Randomly In A Marketplace | 00:00:00 | ||
Regular Expressions | 00:00:00 | ||
Errors (1) | 00:00:00 | ||
Errors (2) – Activity: Password Validation | 00:00:00 | ||
Set Interval And Set Timeout – Activity: Create A Simple Counter | 00:00:00 | ||
Window And Screen | 00:00:00 | ||
Alert Boxes | 00:00:00 | ||
Cookies | 00:00:00 | ||
Section 6 - Professional Project: Maths Game (HTML, CSS And JavaScript) | |||
Introduction | 00:00:00 | ||
Page Structure And Styling (1) | 00:00:00 | ||
Page Structure And Styling (2) | 00:00:00 | ||
Page Structure And Styling (3) | 00:00:00 | ||
Page Structure And Styling (4) | 00:00:00 | ||
Game Logic Using An Illustrative Flowchart | 00:00:00 | ||
JavaScript Code (1) | 00:00:00 | ||
JavaScript Code (2) | 00:00:00 | ||
JavaScript Code (3) | 00:00:00 | ||
JavaScript Code (4) And Congratulations | 00:00:00 | ||
Math Game Source Code | 00:00:00 | ||
Section 7 - jQuery | |||
Introduction And Loading JQuery | 00:00:00 | ||
JQuery Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Select HTML Elements (1) | 00:00:00 | ||
Select HTML Elements (2) | 00:00:00 | ||
Respond To Events | 00:00:00 | ||
Change HTML Content And Attributes (1) | 00:00:00 | ||
Change HTML Content And Attributes (2) | 00:00:00 | ||
Change Styling (1) | 00:00:00 | ||
Start Change Styling (2) – Activity: Random Position And Color Generator | 00:00:00 | ||
jQuery Effects | 00:00:00 | ||
Ajax | 00:00:00 | ||
jQuery UI Introduction | 00:00:00 | ||
Draggable And Droppable (1) – Activity: Leave Me Alone! Please Drop Me! | 00:00:00 | ||
Draggable And Droppable (2) – Activity: Drag Items To Your Basket | 00:00:00 | ||
Resizable | 00:00:00 | ||
Selectable – Activity: Append Selected Car Makes To A Box | 00:00:00 | ||
Sortable – Activity: Sort And Exchange Car Makes Between Two Groups | 00:00:00 | ||
Accordion – Activity: Create A Resizable Accordion With Collapsible Sections | 00:00:00 | ||
Autocomplete – Activity: City Input With Pre-Populated Options | 00:00:00 | ||
Button | 00:00:00 | ||
Date Picker – Activity: Outbound And Return Flight Date Picker Just Like Expedia | 00:00:00 | ||
Dialog – Activity: Are you Sure You Want To Go To The Previous Page? | 00:00:00 | ||
Menu | 00:00:00 | ||
Progress Bar – Activity: Animated Progress Bar Filled From 0% To 100% | 00:00:00 | ||
Select Menu | 00:00:00 | ||
Slider – Activity: Car Mileage Range Using A Slider | 00:00:00 | ||
More Widgets: Spinners, Tabs And Tool Tips | 00:00:00 | ||
Section 8 - Professional Project: Fruits Slice Game (HTML, CSS And jQuery) | |||
Introduction | 00:00:00 | ||
Page Structure And Styling | 00:00:00 | ||
Game Logic Using An Illustrative Flowchart | 00:00:00 | ||
jQuery Code (1) | 00:00:00 | ||
jQuery Code (2) | 00:00:00 | ||
jQuery Code (3) | 00:00:00 | ||
jQuery Code (4) | 00:00:00 | ||
Fruits Slice Game Source Code | 00:00:00 | ||
Section 9 - Twitter Bootstrap | |||
Introduction | 00:00:00 | ||
Bootstrap Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Grid System | 00:00:00 | ||
Typography | 00:00:00 | ||
Tables | 00:00:00 | ||
Forms (1) – Activity: Inline And Horizontal Responsive Login Forms | 00:00:00 | ||
Forms (2) | 00:00:00 | ||
Forms (3) | 00:00:00 | ||
Buttons | 00:00:00 | ||
Images | 00:00:00 | ||
Navs – Activity: Website Design Using Nav Tabs And Nav Pills | 00:00:00 | ||
Navbars – Activity: Website Design Using A Responsive/Collapsible Navigation Bar | 00:00:00 | ||
Pagination – Activity: Pagination And Pager Examples Like Google/Ebay | 00:00:00 | ||
Jumbotron | 00:00:00 | ||
Thumbnails | 00:00:00 | ||
Dropdown Menus | 00:00:00 | ||
Modals (1) – Activity: I Have An Inquiry About My Order | 00:00:00 | ||
Modals (2) – Activity: I Have An Inquiry About My Order | 00:00:00 | ||
Scrollspy | 00:00:00 | ||
Tabs | 00:00:00 | ||
Tooltips | 00:00:00 | ||
Popovers – Activity: Create A Pop Over Just Like The One You See On An iPAD | 00:00:00 | ||
Alerts – Activity: Create An Alert Box To Show A Warning Or Success Message | 00:00:00 | ||
Button Plugin – Activity: Loading… Download Complete | 00:00:00 | ||
Collapse Plugin | 00:00:00 | ||
Carousels – Activity: Create An Interactive Carousel Slider | 00:00:00 | ||
Affix Plugin – Activity: Interactive Website With Content Affixed To A Menu | 00:00:00 | ||
Section 10 - Professional Project: App Landing Page (HTML, CSS And Bootstrap) | |||
Introduction | 00:00:00 | ||
Header And Featured Content (1) | 00:00:00 | ||
Header and Featured Content (2) | 00:00:00 | ||
Header and Featured Content (3) | 00:00:00 | ||
Trial Section, Footer And Congratulations | 00:00:00 | ||
App Landing Page Source Code | 00:00:00 | ||
Section 11 - Professional Project: Company Website (HTML, CSS And Bootstrap) | |||
Introduction | 00:00:00 | ||
Structure Of Our Work | 00:00:00 | ||
Background | 00:00:00 | ||
Navbar | 00:00:00 | ||
Header And Icons Section | 00:00:00 | ||
Contact Button And Footer | 00:00:00 | ||
Company Website App Landing Page Source Code | 00:00:00 | ||
Section 12 - Professional Project: Our Lovely Course (HTML, CSS, jQuery And Bootstrap) | |||
Introduction | 00:00:00 | ||
Structure Of Our Work | 00:00:00 | ||
Add A Background Video | 00:00:00 | ||
Navigation Bar With Advanced Styling | 00:00:00 | ||
Home Section | 00:00:00 | ||
About Section | 00:00:00 | ||
Carousel Slider (1) | 00:00:00 | ||
Carousel Slider (2) | 00:00:00 | ||
Adapt For Small Devices | 00:00:00 | ||
Add Scroll Spy Feature To Navbar And Congratulations | 00:00:00 | ||
Our Lovely Course Website Source Code | 00:00:00 | ||
Introduction | 00:00:00 | ||
App Skeleton And Decoration (1) | 00:00:00 | ||
App Skeleton And Decoration (2) | 00:00:00 | ||
Section 13 - Professional Project: Stopwatch App (HTML, CSS, jQuery And Bootstrap) | |||
App Logic Using An Illustrative Flowchart | 00:00:00 | ||
jQuery Code (1) | 00:00:00 | ||
jQuery Code (2) | 00:00:00 | ||
jQuery Code (3) | 00:00:00 | ||
StopWatch App Source Code | 00:00:00 | ||
Section 14 - Professional Project: Drawing App (HTML, CSS, jQuery UI, Canvas And Local Storage) | |||
Introduction | 00:00:00 | ||
App Skeleton And Decoration (1) | 00:00:00 | ||
App Skeleton And Decoration (2) | 00:00:00 | ||
App Skeleton And Decoration (3) | 00:00:00 | ||
Learn HTML5 Canvas | 00:00:00 | ||
App Logic Using An Illustrative Flowchart | 00:00:00 | ||
jQuery Code Structure | 00:00:00 | ||
jQuery Code (1) | 00:00:00 | ||
jQuery Code (2) | 00:00:00 | ||
jQuery Code (3) | 00:00:00 | ||
Drawing App Source Code | 00:00:00 | ||
Section 15 - ES6 - Modern JavaScript | |||
Download ES6 Source Code | 00:00:00 | ||
Introduction To Modern Javascript (ES6) | 00:00:00 | ||
Variables And Scoping: Review Of “var” | 00:00:00 | ||
Variables And Scoping: Let Scope And Temporal Dead Zone | 00:00:00 | ||
Block Scoping In ES6 | 00:00:00 | ||
Functions And Block Scoping | 00:00:00 | ||
Functions And Block Scoping – Use Let | 00:00:00 | ||
Let Scope Vs Closures | 00:00:00 | ||
Closures Challenge | 00:00:00 | ||
Read Only Variables – Const | 00:00:00 | ||
New Features That Make Your Life Easier: Template Literals | 00:00:00 | ||
New Features That Make Your Life Easier: Arrow Functions – ‘This’ Lexical Scope | 00:00:00 | ||
Destructuring – Arrays | 00:00:00 | ||
Destructuring – Objects | 00:00:00 | ||
Destructuring – Functions | 00:00:00 | ||
Functions – Default Parameter Values | 00:00:00 | ||
Functions – Rest Parameters | 00:00:00 | ||
Spread Operator | 00:00:00 | ||
Objects New Features | 00:00:00 | ||
Iteration: For Of Loop | 00:00:00 | ||
Iterators – Next() – Generators | 00:00:00 | ||
Maps – Iteration | 00:00:00 | ||
Sets – Iteration | 00:00:00 | ||
Sets – Challenge: Intersection And Difference | 00:00:00 | ||
Symbols | 00:00:00 | ||
Symbol.Iterator | 00:00:00 | ||
Array.From: Collections, Strings, Arguments | 00:00:00 | ||
Array.From: Optional Map, Length Property, Maps And Sets | 00:00:00 | ||
Array.Of | 00:00:00 | ||
More Array Methods | 00:00:00 | ||
ES6 Classes: Back To ES5 Constructors | 00:00:00 | ||
ES6 Classes: Syntax | 00:00:00 | ||
ES6 Classes: Static Methods | 00:00:00 | ||
ES6 Classes: Getters And Setters | 00:00:00 | ||
Class Inheritance – Extends – Super | 00:00:00 | ||
Section 16 - "Front End" Vs "Back End" | |||
Understand The Back End 1 | 00:00:00 | ||
Understand The Back End 2 | 00:00:00 | ||
Section 17 - Node.js - Introduction And Installation | |||
Node.js – Introduction To Node.js | 00:00:00 | ||
Node.js – How To Run Unix Commands On Windows | 00:00:00 | ||
Node.js – Node.js Installation + REPL (Read-Eval-Print-Loop) | 00:00:00 | ||
Section 18 - The "Super" Command Line Crash Course | |||
Command Line Crash Course 1 | 00:00:00 | ||
Command Line Crash Course 2 | 00:00:00 | ||
Command Line Crash Course 3 | 00:00:00 | ||
Command Line Crash Course 4 | 00:00:00 | ||
Section 19 - Node.js - Let's Dive In (Using ES6 + ES7) | |||
Node.js – Download Chapter Source Code | 00:00:00 | ||
Node.js – Your First Node Application | 00:00:00 | ||
Node.js – File Exports | 00:00:00 | ||
Node.js – HTTP Built-In Module 1 | 00:00:00 | ||
Node.js – HTTP Built-In Module 2 | 00:00:00 | ||
Node.js – HTTP Built-In Module 3 | 00:00:00 | ||
Node.js – Fs Built-In Module – Blocking Mode | 00:00:00 | ||
Node.js – Fs Built-In Module – Non Blocking Mode | 00:00:00 | ||
Node.js – Fs Built-In Module – Use ES6 Promises | 00:00:00 | ||
Node.js – Fs Built-In Module – Use ES7 Async Await | 00:00:00 | ||
Node.js – Fs Built-In Module – More Features | 00:00:00 | ||
Section 20 - Professional Project: Website With Social Widgets (Facebook, Google+ And Twitter) | |||
Node.js – Download Chapter Source Code | 00:00:00 | ||
Professional Project 18 – Project Introduction: Online File Explorer App (Pure Node.js , Bootstrap 4) | 00:00:00 | ||
Professional Project 18 – Skeleton And Decoration | 00:00:00 | ||
Professional Project 18 – App Logic | 00:00:00 | ||
Professional Project 18 – Create The Server | 00:00:00 | ||
Professional Project 18 – Decode The Path Name And Convert It To A Full Static Path | 00:00:00 | ||
Professional Project 18 – Display Folder Content And Print The Title | 00:00:00 | ||
Professional Project 18 – Show The Path Inside A “Breadcrumb” | 00:00:00 | ||
Professional Project 18 – Loop Through Folder Elements | 00:00:00 | ||
Professional Project 18 – Print Icons – Get Introduced To The Child_Process Module | 00:00:00 | ||
Professional Project 18 – Calculate Folders’ Size Using The Child_Process Module | 00:00:00 | ||
Professional Project 18 – Convert Folders’ Size To Bytes – Retrieve Items’ Last Modified Time | 00:00:00 | ||
Professional Project 18 – Calculate The Size Of Files | 00:00:00 | ||
Professional Project 18 – Get The Mime Type Of Files | 00:00:00 | ||
Professional Project 18 – Serve Files To The Client | 00:00:00 | ||
Professional Project 18 – Serve PDF Files On The Browser – Serve Media Content In Chunks Using A Stream | 00:00:00 | ||
Professional Project 18 – Re-Order Folder Elements By Name | 00:00:00 | ||
Professional Project 18 – Re-Order Folder Elements By Name 2 | 00:00:00 | ||
Professional Project 18 – Add The Up And Down Arrows After Sorting Elements By Name | 00:00:00 | ||
Professional Project 18 – Sort Elements By Size And Last Modified | 00:00:00 | ||
Professional Project 18 – Fix Projects Bugs | 00:00:00 | ||
Section 21 - Git And GitHub | |||
Git And GitHub – Introduction To Version Control Using Git | 00:00:00 | ||
Your Git Identity | 00:00:00 | ||
Git And GitHub – Git Using The Command Line | 00:00:00 | ||
Git And GitHub – Git Branching And Merging | 00:00:00 | ||
GitHub – Introduction | 00:00:00 | ||
GitHub – Cloning, Forking And Pull Requests 1 | 00:00:00 | ||
GitHub – Cloning, Forking And Pull Requests 2 | 00:00:00 | ||
GitHub – Cloning, Forking And Pull Requests 3 | 00:00:00 | ||
Section 22 - Deploy Your App To Heroku | |||
Professional Project 18 – Deploy Your App To Heroku | 00:00:00 | ||
Section 23 - PHP | |||
Introduction | 00:00:00 | ||
PHP Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Embed PHP In HTML | 00:00:00 | ||
PHP Variables | 00:00:00 | ||
Data Types: Strings | 00:00:00 | ||
Data Types: Integers And Floats | 00:00:00 | ||
Data Types: Booleans | 00:00:00 | ||
Data Types: Arrays | 00:00:00 | ||
Data Types: Objects | 00:00:00 | ||
Data Types: NULL | 00:00:00 | ||
Data Types: Resources | 00:00:00 | ||
String Functions | 00:00:00 | ||
If And Switch Statements | 00:00:00 | ||
For Loops | 00:00:00 | ||
While Loops | 00:00:00 | ||
Functions | 00:00:00 | ||
GET And POST | 00:00:00 | ||
Array Functions (1) | 00:00:00 | ||
Array Functions (2) | 00:00:00 | ||
Send Emails – Activity: Send A Styled Email In HTML Format | 00:00:00 | ||
Filter User Inputs (1) – Protect Yourself From Hackers | 00:00:00 | ||
Filter User Inputs (2) – User Input Validation | 00:00:00 | ||
Activity: Create A Responsive Contact Form Using PHP And Bootstrap (1) | 00:00:00 | ||
Activity: Create A Responsive Contact Form Using PHP And Bootstrap (2) | 00:00:00 | ||
Activity: Create A Responsive Contact Form Using PHP And Bootstrap (3) | 00:00:00 | ||
Date And Time (1) | 00:00:00 | ||
Date And Time (2) – Activity: Day Of The Week You Were Born? Date In 1000 Days? | 00:00:00 | ||
Include PHP Files | 00:00:00 | ||
File Handling (1): Open – Read – Write – Close | 00:00:00 | ||
File Handling (2): Open – Read – Write – Close | 00:00:00 | ||
Upload Files Using PHP (1) – Activity: Upload PDF And Text Files Less Than 3Mo. | 00:00:00 | ||
Upload Files Using PHP (2) – Activity: Upload PDF And Text Files Less Than 3Mo. | 00:00:00 | ||
Cookies | 00:00:00 | ||
Error Handling (1) | 00:00:00 | ||
Error Handling (2) – Activity: Log PHP Errors In A file / Trigger Error Emails | 00:00:00 | ||
Sessions | 00:00:00 | ||
Section 24 - MySQL | |||
Introduction | 00:00:00 | ||
MySQL Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Create A Database Using PHP MYADMIN | 00:00:00 | ||
Remote MySQL (1) | 00:00:00 | ||
Remote MySQL (2) | 00:00:00 | ||
Create A Database Using PHP And MySQL | 00:00:00 | ||
Add A Table To A Database | 00:00:00 | ||
Populate A Database Table | 00:00:00 | ||
Activity: Populate Database Once The User Submits A Form | 00:00:00 | ||
Activity: Populate Database Once The User Submits A Form (2) | 00:00:00 | ||
Activity: Populate An HTML Table Using Database Data (1) | 00:00:00 | ||
Activity: Populate An HTML Table Using Database Data (2) | 00:00:00 | ||
Update Database Data | 00:00:00 | ||
Delete Database Data | 00:00:00 | ||
Section 25 - Professional Project: Online Notes App (HTML, CSS, Bootstrap, PHP, MySQL And AJAX) | |||
Introduction | 00:00:00 | ||
App Skeleton And Decoration (1) – Landing Page | 00:00:00 | ||
App Skeleton And Decoration (2) – Landing Page | 00:00:00 | ||
App Skeleton And Decoration (3) – Landing Page | 00:00:00 | ||
App Skeleton And Decoration (4) – Landing Page | 00:00:00 | ||
App Skeleton And Decoration (5) – My Notes Page | 00:00:00 | ||
App Skeleton And Decoration (6) – Profile Page | 00:00:00 | ||
App Logic – Signup, Login, Remember Me And Forgot Password | 00:00:00 | ||
Signup/Login Code Structure (1) | 00:00:00 | ||
Signup/Login Code Structure (2) | 00:00:00 | ||
Signup Code (1) | 00:00:00 | ||
Signup Code (2) | 00:00:00 | ||
Signup Code (3) | 00:00:00 | ||
Signup Code (4) | 00:00:00 | ||
Signup Code (5) | 00:00:00 | ||
Login Code | 00:00:00 | ||
“Remember Me” Code (1) | 00:00:00 | ||
“Remember Me” Code (2) | 00:00:00 | ||
“Remember Me” Code (3) And Logout Code | 00:00:00 | ||
“Forgot Password” Code (1) | 00:00:00 | ||
“Forgot Password” Code (2) | 00:00:00 | ||
“Forgot Password” Code (3) | 00:00:00 | ||
“Forgot Password” Code (4) | 00:00:00 | ||
Notes Management: Logic | 00:00:00 | ||
Notes Management: Code Structure | 00:00:00 | ||
Load Notes: Code (1) | 00:00:00 | ||
Load Notes: Code (2) | 00:00:00 | ||
Create Notes: Code (1) | 00:00:00 | ||
Create Notes: Code (2) | 00:00:00 | ||
Edit Notes: Code (1) | 00:00:00 | ||
Edit Notes: Code (2) | 00:00:00 | ||
Delete Notes: Code (1) | 00:00:00 | ||
Delete Notes: Code (2) | 00:00:00 | ||
Update Username Code (1) | 00:00:00 | ||
Update Username Code (2) | 00:00:00 | ||
Update Password Code (1) | 00:00:00 | ||
Update Password Code (2) | 00:00:00 | ||
Update Email Code (1) | 00:00:00 | ||
Update Email Code (2) | 00:00:00 | ||
Section 26 - WordPress (3 Professional Webpages: Blog + About Page + Contact Page) | |||
Introduction | 00:00:00 | ||
Installation – Activity: Create Your First Blog | 00:00:00 | ||
Blog Posts And Comments | 00:00:00 | ||
Themes | 00:00:00 | ||
Pages And Menus | 00:00:00 | ||
Customize Pages (1) | 00:00:00 | ||
Customize Pages (2) | 00:00:00 | ||
Custom CSS | 00:00:00 | ||
Plugins | 00:00:00 | ||
Activity: Beautiful About Page (Add Content To A WordPress Page) | 00:00:00 | ||
Activity: Beautiful About Page (Typography) | 00:00:00 | ||
Activity: Beautiful About Page (Logos) | 00:00:00 | ||
Activity: Beautiful About Page (Buttons) | 00:00:00 | ||
Activity: Create An Awesome Contact Page With A Google Map And Contact Form | 00:00:00 | ||
Section 27 - Google Maps API's | |||
Introduction And Embed Google Map To Your Website | 00:00:00 | ||
Google Maps API’s Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Markers And Infowindows | 00:00:00 | ||
Show, Hide Or Delete Markers | 00:00:00 | ||
Animated Drop Of Markers | 00:00:00 | ||
Direction Service – Activity: Driving Distance And Time Between New York And Toronto | 00:00:00 | ||
Geocoding Using The Javascript API – Activity: Get Geocoordinates Of An Address | 00:00:00 | ||
Geocoding Using The Geocoding API (1) – Activity: Format Address And Get Postcode | 00:00:00 | ||
Geocoding Using The Geocoding API (2) – Activity: Format Address And Get Postcode | 00:00:00 | ||
Nearby Search | 00:00:00 | ||
Autocomplete | 00:00:00 | ||
Section 28 - Professional Project: Distance Between Cities (HTML, CSS, jQuery And Google Maps) | |||
Introduction | 00:00:00 | ||
Skeleton And decoration | 00:00:00 | ||
App Logic Using An Illustrative Flowchart | 00:00:00 | ||
Javascript Code | 00:00:00 | ||
Distance Between Cities App Source Code | 00:00:00 | ||
Section 29 - Professional Project: Website With Social Widgets (Facebook, Google+ And Twitter) | |||
Introduction | 00:00:00 | ||
Skeleton And Decoration | 00:00:00 | ||
Facebook Widgets | 00:00:00 | ||
Google Plus Widgets | 00:00:00 | ||
Tweet Button | 00:00:00 | ||
Twitter Timeline | 00:00:00 | ||
Website Source Code | 00:00:00 | ||
Section 30 - iOS And Android Mobile Applications Using jQuery Mobile | |||
Introduction | 00:00:00 | ||
Mobile Apps Chapter: Roadmap And Full Source Code | 00:00:00 | ||
Pages, Dialogs And Transitions | 00:00:00 | ||
Navbars | 00:00:00 | ||
Grid System | 00:00:00 | ||
List Views | 00:00:00 | ||
Form Inputs | 00:00:00 | ||
Events | 00:00:00 | ||
Section 31 - Professional Project: Speed Reader For iOS And Android | |||
Introduction | 00:00:00 | ||
App Skeleton And Decoration (1) | 00:00:00 | ||
App Skeleton And Decoration (2) | 00:00:00 | ||
Logic Of The App Using An Illustrative Flowchart | 00:00:00 | ||
Start Reading (1) | 00:00:00 | ||
Start Reading (2) | 00:00:00 | ||
Pause, Resume And Restart | 00:00:00 | ||
Change The Font Size | 00:00:00 | ||
Change The Reading Speed | 00:00:00 | ||
Control Reading Progress: Go Backwards And Forward | 00:00:00 | ||
Publish Your App To Google Play | 00:00:00 | ||
Publish Your App To The iOS App Store (1) | 00:00:00 | ||
Publish Your App To The iOS App Store (2) | 00:00:00 | ||
Speed Reader App Source Code | 00:00:00 | ||
Section 32 - Professional Project: Car Sharing Website (Javascript, PHP, MySQL, AJAX And JSON) | |||
Introduction | 00:00:00 | ||
Signup/Login Code (1) | 00:00:00 | ||
Signup/Login Code (2) | 00:00:00 | ||
art Signup/Login Code (3) | 00:00:00 | ||
Search Page Skeleton And Decoration (1) | 00:00:00 | ||
Search Page Skeleton And Decoration (2) | 00:00:00 | ||
Search Page Skeleton And Decoration (3) | 00:00:00 | ||
Search Page Skeleton And Decoration (4) | 00:00:00 | ||
Search Page Skeleton And Decoration (5) | 00:00:00 | ||
Profile Picture Code (1) | 00:00:00 | ||
Profile Picture Code (2) | 00:00:00 | ||
Profile Picture Code (3) | 00:00:00 | ||
Profile Picture Code (4) | 00:00:00 | ||
Trips Page Skeleton And Decoration (1) | 00:00:00 | ||
Trips Page Skeleton And Decoration (2) | 00:00:00 | ||
Trips Page Skeleton And Decoration (3) | 00:00:00 | ||
Website Logic | 00:00:00 | ||
“Create A Trip” Code (1) | 00:00:00 | ||
“Create A Trip” Code (2) | 00:00:00 | ||
“Create A Trip” Code (3) | 00:00:00 | ||
“Create A Trip” Code (4) | 00:00:00 | ||
“Load Trips” Code (1) | 00:00:00 | ||
“Load Trips” Code (2) | 00:00:00 | ||
“Edit/Delete Trips” Code (1) | 00:00:00 | ||
Edit/Delete Trips” Code (2) | 00:00:00 | ||
“Edit/Delete Trips” Code (3) | 00:00:00 | ||
“Edit/Delete Trips” Code (4) | 00:00:00 | ||
“Search Trips” Code (1) | 00:00:00 | ||
“Search Trips” Code (2) | 00:00:00 | ||
“Search Trips” Code (3) | 00:00:00 | ||
“Search Trips” Code (4) | 00:00:00 | ||
“Search Trips” Code (5) | 00:00:00 | ||
“Search Trips” Code (6) | 00:00:00 | ||
“Search Trips” Code (7) | 00:00:00 | ||
“Search Trips” Code (8) | 00:00:00 | ||
“Spinner” Code (1) | 00:00:00 | ||
“Spinner” Code (2) | 00:00:00 | ||
Finishing Touches And Congratulations | 00:00:00 | ||
Section 33 - Further Reading | |||
Extra Resources For Further Reading | 00:00:00 |
Excellent
Excellent, the best course so far
great
great