Introduction - Get your free Unlimited Web Hosting - HTML

Syllabus Download
How a website works
Your journey inside the course
How to watch videos in HD resolution
How to get help
HTML Chapter: Roadmap and Full Source Code
Structure of a website
Choosing your text editor
Your first website
Your passcode
Get your free unlimited web hosting
Important note about FTP
Share your website with the world (1)
Share your website with the world (2) - Cyberduck version
Share your website with the world (2) - FileZilla Version
Headings
04:55
Paragraphs
Links
Images
Inline vs Block Elements
Iframes - Activity: Embed a nice relaxing YouTube video to your website
Unordered Lists
Ordered Lists
Description Lists
Tables
Entities
Forms (1) - Activity: Create a simple Login Form
Forms (2) - Activity: Create a Marketplace Checkout Form
Text Decoration
Comments
HTML Quiz

CSS

Introduction
CSS Chapter: Roadmap and Full Source Code
Inline CSS
Internal CSS
External CSS
Classes and IDs
Div and Span
Box Model
Box Model: Padding
Box Model: Border
Box Model: Outline
Box Model: Margin
Background
Floating
Positioning
Display
Text Decoration
Text Align
Text Font
Text Effects
Image Sprites
Image Opacity
Styling Lists
Styling Links
Gradients
2D Transforms
3D Transforms
Transitions
Animations
CSS3 Quiz

Professional Project: Mathematics Tutorials Website (HTML5 & CSS3)

Project Introduction: Mathematics Tutorials Website(HTML & CSS)
Header (1)
Header (2)
Menu
Introduction Box
Sidebars (1)
Sidebars (2)
Footer & Congratulations
Mathematics Tutorial Website Quiz
Maths Website Source Code

Advanced CSS with Flexbox, Grid & SASS

Flexbox: Introduction
Flexbox: Basic Flexbox
Flexbox: Align flex items
Flexbox: Align flex lines
Flexbox: Resize flex items (1)
Flexbox: Resize flex items (2)
Flexbox Application: Photo Gallery (1)
Flexbox Application: Photo Gallery (2)
Flexbox Application: Amazon Checkout (1)
Flexbox Application: Amazon Checkout (2)
Flexbox Application: Amazon Checkout (3)
Flexbox Application: Maths Website (1)
Flexbox Application: Maths Website (2)
Flexbox Application: Maths Website (3)
CSS Grid: Introduction and Basic Grid Template
CSS Grid: Implicit vs Explicit Grid
CSS Grid: Grid areas & Responsive design
CSS Grid: Master the "grid-column" property
CSS Grid: Grid Coordinates
CSS Grid: Align Grid items
CSS Grid Application: Photo Gallery
CSS Grid Application: Picture Grid
Sass: Introduction - Installation - Nesting Syntax
Sass: .scss vs .sass - Variables
Sass: @import & @extend directives
Sass: Mixins - Operators - Functions

Javascript

Introduction
JavaScript Chapter: Roadmap and Full Source Code
44 pages
Buttons
Change HTML Content
Change HTML Style
Variables and Data Types
Change HTML Using Variables - Activity: Random Color Generator
Functions: Activity: Swap the content of two divs
Objects
Create Objects using the "new" keyword
Object Contructors
Arrays
If and Switch Statements - Activity: Motorway Speed Control
For Loops
While Loops - Activity: Spend $1000 Randomly in a marketplace
Regular Expressions
Errors (1)
Errors (2) - Activity: Password Validation
Set Interval & SeTimeout - Activity: Create a simple counter
Window and Screen
Alert Boxes
Cookies
Javascript Quiz

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

Project Introduction: Maths Game (HTML, CSS and JavaScript)
Page Structure & Styling (1)
Page Structure & Styling (2)
Page Structure & Styling (3)
Page Structure & Styling (4)
Game Logic using an illustrative flowchart
JavaScript Code (1)
JavaScript Code (2)
JavaScript Code (3)
JavaScript Code (4) & Congratulations
Maths Game Quiz
Math Game Source Code

jQuery

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

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

Project Introduction: Fruit Slice Game (HTML, CSS and JavaScript)
Page Structure and Styling
Game Logic using an illustrative flowchart
jQuery Code (1)
jQuery Code (2)
jQuery Code (3)
jQuery Code (4)
Fruits Slice Game Quiz
Fruits Slice Game Source Code

Twitter Bootstrap

Bootstrap template
Introduction
Bootstrap Chapter: Roadmap and Full Source Code
Grid System
Typography
Tables
Forms (1) - Activity: Inline and Horizontal Responsive Login Forms
Forms (2)
Forms (3)
Buttons
Images
Navs - Activity: Website Design using Nav Tabs and Nav Pills
Navbars - Activity: Website Design using a responsive/collapsible navigation bar
Pagination - Activity: Pagination and Pager Examples like Google/EbayJumbotron
Thumbnails
Dropdown menus
Modals (1) - Activity: I have an inquiry about my order
Modals (2) - Activity: I have an inquiry about my order
Scrollspy
Tabs
Tooltips
Popovers - Activity: Create a popover just like the one you see on an IPAD
Alerts - Activity: Create an alert Box to show a warning or success message
Button plugin - Activity: Loading … Download Complete
Collapse plugin
Carousels - Activity: Create an interactive carousel slider
Affix plugin - Activity: Interactive Website with Content Affixed to a Menu
Twitter Bootstrap Quiz

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

Project Introduction: App Landing Page (HTML, CSS and JavaScript)
Header and Featured Content (1)
Header and Featured Content (2)
Header and Featured Content (3)
Trial Section, Footer & Congratulations
App Landing Page Quiz
App Landing Page Source Code

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

Project Introduction: Company Website (HTML, CSS and JavaScript)
Structure of our work
Background
Navbar
Header & icons section
Contact Button & Footer
Company Website Quiz
Company Website Source Code

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

Project Introduction: Our Lovely Course (HTML, CSS and JavaScript)
Structure of our work
Add a background video
Navigation bar with advanced styling
Home Section
About Section
Carousel Slider (1)
Carousel Slider (2)
Adapt for Small Devices
Add ScrollSpy feature to navbar & Congratulations
Our Lovely Course Website Quiz
Our Lovely Course Website Source Code

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

Project Introduction: Stopwatch App (HTML, CSS and JavaScript)
App Skeleton and Decoration (1)
App Skeleton and Decoration (2)
App Logic using an illustrative flowchart
jQuery Code (1)
jQuery Code (2)
jQuery Code (3)
StopWatch App Quiz
StopWatch App Source Code

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

Project Introduction: Drawing App (HTML, CSS and JavaScript)
App Skeleton and Decoration (1)
App Skeleton and Decoration (2)
App Skeleton and Decoration (3)
Learn HTML5 Canvas
App Logic using an illustrative flowchart
jQuery Code Structure
jQuery Code (1)
jQuery Code (2)
jQuery Code (3)
Drawing App Quiz
Drawing App Source Code

ES6 - Modern JavaScript (A must in 2019)

Download Chapter Source Code
Introduction to Modern JavaScript (ES6)
Variables & Scoping: Review of "var"
Variables & Scoping: Let Scope and Temporal Dead Zone
Block Scoping in ES6
Functions and Block Scoping
Functions and Block Scoping – use let
Let Scope vs Closures
Closures Challenge
Read only variables - const
New Features that make your life easier: Template Literals
New Features that make your life easier: Arrow functions – ‘this’ lexical scope
Destructuring - Arrays
Destructuring - Objects
Destructuring - Functions
Functions – Default Parameter Values
09:5Functions – Rest Parameters
Spread Operator
Objects New Features
Iteration: For of loop
Iterators - next() - Generators
Maps - Iteration
Sets - Iteration
Sets – Challenge: Intersection and Difference
Symbols
Symbol.iterator
Array.from: collections, strings, arguments
Array.from: optional map, length property, Maps & Sets
Array.of
More Array Methods
ES6 Classes: Back to ES5 Constructors
ES6 Classes: Syntax
ES6 Classes: Static Methods
ES6 Classes: Getters & Setters
Class Inheritance – extends - super

Front End" vs "Back End"

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

Node.js - Introduction & Installation

Introduction to Node.js
How to run Unix commands on a Windows PC
Node.js Installation + REPL (Read-Eval-Print-Loop)

The "super" Command Line Crash Course

Command Line Crash Course (1)
Command Line Crash Course (2)
Command Line Crash Course (3)
Command Line Crash Course (4)

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

Download Chapter Source Code
Your First Node Application
File Exports
HTTP Built-in Module (1)
url.parse vs WHATWG
HTTP Built-in Module (2)
HTTP Built-in Module (3)
Fs Built-in Module - Blocking Mode
Fs Built-in Module - Non Blocking Mode
Fs Built-in Module - Use ES6 Promises
Fs Built-in Module - Use ES7 Async Await
Fs Built-in Module - More Features

Professional Project: Online File Explorer App (Pure Node.js , Bootstrap 4)

Download Chapter Source Code (Mac, Linux, Windows)
Project Introduction: Online File Explorer App (Pure Node.js Bootstrap 4)
Skeleton and Decoration
App Logic
Create the Server
Decode the path name and convert it to a full static path
Display folder content and print the title
Show the path inside a "Breadcrumb"
Loop through folder elements
Print Icons - Get introduced to the child_process module
Calculate folders' size using the child_process module
Convert folders' size to Bytes - Retrieve items' last modified time
Calculate the size of files
Get the mime type of files
Serve files to the Client
Serve PDF files on the browser - Serve Media content in chunks using a stream
Re-order folder elements by name
Re-order folder elements by name (2)
Add the up and down arrows after sorting elements by name
Sort elements by size and last modified
Fix projects bugs

Git & Github

Introduction to Version Control Git
Your Git Identity
Git using the Command Line
Git Branching & Merging
Github - Introduction
Github - Cloning, Forking & Pull Requests (1)
Github - Cloning, Forking & Pull Requests (2)
Github - Cloning, Forking & Pull Requests (3)

Deploy your App to Heroku

Deploy your App to Heroku

PHP

Introduction
PHP Chapter: Roadmap and Full Source Code
Embed PHP in HTML
PHP Variables
Data Types: Strings
Data Types: Integers and Floats
Data Types: Booleans
Data Types: Arrays
Data Types: Objects
Data Types: NULL
Data Types: Resources
String Functions
If and Switch Statements
For Loops
While Loops
Functions
GET & POST
Array Functions (1)
Array Functions (2)
Send Emails – Activity: Send a styled email in HTML format
Filter User Inputs (1) – Protect Yourself from Hackers
Filter User Inputs (2) – User Input Validation
Activity: Create a responsive Contact Form using PHP & Bootstrap (1)
Activity: Create a responsive Contact Form using PHP & Bootstrap (2)
Activity: Create a responsive Contact Form using PHP & Bootstrap (3)
Date and Time (1)
Date and Time (2) - Activity: Day of the week you were born? Date in 1000 days?
Include PHP files
File Handling (1): Open – Read – Write - Close
File Handling (2): Open – Read – Write - Close
Upload Files Using PHP (1) – Activity: Upload PDF & Text Files Less than 3Mo.
Upload Files Using PHP (2) – Activity: Upload PDF & Text Files Less than 3Mo.
Cookies
Error Handling (1)
Error Handling (2) – Activity: Log PHP errors in a file / Trigger error emails
Sessions
PHP Quiz

MySQL

Introduction
MySQL Chapter: Roadmap and Full Source Code
Create a database using PHP MYADMIN
Remote MySQL (1)
Remote MySQL (2)
Create a database using PHP & MySQL
Add a table to a database
Populate a database table
Activity: Populate Database once the user submits a form
Activity: Populate Database once the user submits a form (2)
Activity: Populate an HTML table using Database Data (1)
Activity: Populate an HTML table using Database Data (2)
Update Database Data
Delete Database Data
MySQL Quiz

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

Live Project and Source Code
App Skeleton and Decoration (1) - Landing Page
App Skeleton and Decoration (2) - Landing Page
App Skeleton and Decoration (3) - Landing Page
App Skeleton and Decoration (4) - Landing Page
App Skeleton and Decoration (5) - My Notes Page
App Skeleton and Decoration (6) - Profile Page
App Logic - Signup, Login, Remember Me, Forgot Password
Signup/Login Code Structure (1)
Signup/Login Code Structure (2)
Signup Code (1)
Signup Code (2)
Signup Code (3)
Signup Code (4)
Signup Code (5)
Login Code
"Remember me" Code (1)
"Remember me" Code (2)
"Remember me" Code (3) and Logout Code
"Forgot Password" Code (1)
"Forgot Password" Code (2)
"Forgot Password" Code (3)
"Forgot Password" Code (4)
Notes Management: Logic
Notes Management: Code Structure
Load Notes: Code (1)
Load Notes: Code (2)
Create Notes: Code (1)
Create Notes: Code (2)
Edit Notes: Code (1)
Edit Notes: Code (2)
Delete Notes: Code (1)
Delete Notes: Code (2)
Update Username Code (1)
Update Username Code (2)
Update Password Code (1)
Update Password Code (2)
Update Email Code (1)
Update Email Code (2)

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

Introduction
Installation – Activity: Create your first Blog
Blog Posts and Comments
Themes
Pages and Menus
Customise pages (1)
Customise pages (2)
Custom CSS
Plugins
Activity: Beautiful About Page (Add Content to a WordPress Page)
Activity: Beautiful About Page (Typography)
Activity: Beautiful About Page (Logos)
Activity: Beautiful About Page (Buttons)
Activity: Create an Awesome Contact Page with a Google Map and Contact Form
WordPress Quiz

Google Maps API's

Introduction and Embed Google Map to your Website
Google Maps API's Chapter: Roadmap and Full Source Code
Markers and InfoWindows
Show, Hide or Delete Markers
Animated drop of Markers
Direction Service - Activity: Driving distance & time between New York & Toronto
Geocoding using the Javascript API - Activity: Get Geocoordinates of an address,
Geocoding using the geocoding API (1) - Activity: format Address & get postcode.
Geocoding using the geocoding API (2) - Activity: format Address & get postcode.
Nearby Search
Autocomplete
Google Maps API's Quiz

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

Project Introduction: Distance Between Cities (HTML, CSS, JQuery, Google Maps)
Skeleton and decoration
App Logic using an illustrative flowchart
Javascript Code
Distance Between Cities App Source Code
Distance Between Cities App Quiz

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

Project Introduction: Website with Social Widgets (Facebook, Google+ & Twitter)
Skeleton and decoration
Facebook Widgets
Google plus Widgets
Tweet Button
Twitter Timeline
Website Source Code
Social Widgets Quiz

IOS and Android Mobile Applications using jQuery Mobile

Introduction
Mobile Apps Chapter: Roadmap and Full Source Code
Pages, Dialogs and Transitions
Navbars
Grid System
List Views
Form Inputs
Events
jQuery Mobile Quiz

Professional Project: Speed Reader for IOS and Android

Project Introduction: Speed Reader for IOS and Android
App Skeleton and Decoration (1)
App Skeleton and Decoration (2)
Logic of an App using an illustrative flowchart
Start Reading (1)
Start Reading (2)
Pause, Resume, Restart
Change the font size
Change the reading speed
Control Reading Progress: Go backwards and forward
Publish your app to Google Play
Publish your app to the IOS App Store (1)
Publish your app to the IOS App Store (2)
Speed Reader App Source Code
Speed Reader App Quiz

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

Project Introduction: Car Sharing Website (Javascript, PHP, MySQL, AJAX, JSON)
Signup/Login Code (1)
Signup/Login Code (2)
Signup/Login Code (3)
Search Page Skeleton & Decoration (1)
Search Page Skeleton & Decoration (2)
Search Page Skeleton & Decoration (3)
Search Page Skeleton & Decoration (4)
Search Page Skeleton & Decoration (5)
Profile Picture Code (1)
Profile Picture Code (2)
Profile Picture Code (3)
Profile Picture Code (4)
Trips Page Skeleton & Decoration (1)
Trips Page Skeleton & Decoration (2)
Trips Page Skeleton & Decoration (3)
Website Logic
"Create a Trip" Code (1)
"Create a Trip" Code (2)
"Create a Trip" Code (3)
"Create a Trip" Code (4)
"Load Trips" Code (1)
"Load Trips" Code (2)
"Edit/Delete Trips" Code (1)
"Edit/Delete Trips" Code (2)
"Edit/Delete Trips" Code (3)
"Edit/Delete Trips" Code (4)
"Search Trips" Code (1)
"Search Trips" Code (2)
"Search Trips" Code (3)
"Search Trips" Code (4)
"Search Trips" Code (5)
"Search Trips" Code (6)
"Search Trips" Code (7)
"Search Trips" Code (8)
"Spinner" Code (1)
"Spinner" Code (2)
Finishing Touches & Congratulations

Popular Searches

The Complete 2022 Web Development Course - Build 15 Projects

Online

₹ 4099

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus

Introduction - Get your free Unlimited Web Hosting - HTML

CSS

Professional Project: Mathematics Tutorials Website (HTML5 & CSS3)

Advanced CSS with Flexbox, Grid & SASS

Javascript

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

jQuery

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

Twitter Bootstrap

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

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

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

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

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

ES6 - Modern JavaScript (A must in 2019)

Front End" vs "Back End"

Node.js - Introduction & Installation

The "super" Command Line Crash Course

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

Professional Project: Online File Explorer App (Pure Node.js , Bootstrap 4)

Git & Github

Deploy your App to Heroku

PHP

MySQL

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

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

Google Maps API's

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

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

IOS and Android Mobile Applications using jQuery Mobile

Professional Project: Speed Reader for IOS and Android

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

Further Reading

Articles

Popular Articles

Latest Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Thank You!

Download the Careers360 App on your Android phone