watching now
23
Students Description
An aspiring developer has a ton of options to choose from. You can analyze data, dive into game development, and so on. The field of possibilities is endless – however, when deciding which area to specialize in, you should consider the market demand. One skill can often be much more sought-after in the industry than the other.
With the Internet presence becoming increasingly vital for businesses as well as most individuals, learning web development is a brilliant choice. In this comprehensive course, we have collected everything an aspiring programmer needs to learn web development in great detail.
We will start with the very basics and keep moving onto more advanced subjects. With a whopping 84 hours of material, this course will take you from zero to a web development hero!
What exactly is web development, and why it’s worth mastering?
Simply put, web development is knowing how to code a website. It does not include graphic design or copywriting content. What it does consist of is client-side and server-side coding, as well as working with databases in the back end. Therefore, learning web development is not something you can do in a few hours: there’s a lot of technologies you need to master – and they’re all covered in this course!
A website is not just a place to find relevant information: it’s also a way to represent a company and form its public image. Surveys show people form their opinion about a business based on a lot of details, including loading speed, popup alerts, and searching abilities. That’s why companies will always need professionals to create, update, and maintain their websites, and knowing how to code a website well can truly take you places.
Learning web development for beginners: one step at a time
To make this course as beginner-friendly as possible, we will start with understanding the basics, such as the basic structure of a website. Then, we will move to more advanced topics as we go. The technologies you will get familiar while learning web development with us include:
- HTML5
- CSS3
- JavaScript
- jQuery
- Bootstrap
- Node.js
- Git
- Github
- Heroku
- PHP
- MySQL
- Wordpress
- AJAX
- JSON
- Widgets for Facebook, Twitter, and Google Plus
- Google Maps API
- Mobile web development
- and more!
Combine theory with practical use to achieve the best results!
What is the best way to learn web development for beginners? Without a doubt, it’s hands-on training! That is why, during this course, you will also be coding your own projects. They can later be added to your first programmer portfolio. The projects you will create from scratch include both simple tasks (e.g., building online checkout form) and professional websites that will require you to combine multiple technologies.
While there’s a lot of options for learning web development, this course will not only provide you with all the knowledge you need to become a professional coder but also save you a lot of money, as in-person bootcamps charge much higher sums. Start now – take the first step to your future career!
What Will You Learn?
- How to use HTML, CSS, Javascript, and plenty of other technologies
- How to work with databases and APIs
- How to code a website for a desktop or mobile
Requirements
- A passion for learning web development
- A computer with Internet access
Curriculum
Course consist of total 84h 1min of content, in total.
Section 1: Introduction - Get your free Unlimited Web Hosting - HTML
2:21:04
HTML Chapter: Roadmap and Full Source Code
Structure of a website
09:23
Your first website
06:14
Your passcode
Get your free unlimited web hosting
09:02
Important note about FTP
Set up FTP (Cyberduck Version)
13:04
Set up FTP (FileZilla Version)
18:11
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
Section 2: CSS3: Beginner to Advanced
2:14:21
External CSS
02:33
CSS Chapter: Roadmap and Full Source Code
Inline CSS
02:26
Internal CSS
02:26
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
Section 3: Professional Project: Mathematics Tutorials Website (HTML & CSS)
1:41:05
Introduction
02:23
Header (1)
17:47
Header (2)
16:42
Website Menu
18:22
Introduction Box
07:04
Sidebars (1)
19:46
Sidebars (2)
08:39
Footer & Congratulations
10:17
Maths Website Source Code
Section 4: Javascript
3:42:13
Introduction
08:56
JavaScript Chapter: Roadmap and Full Source Code
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:24
Create Objects using the "new" keyword
04:41
Object Contructors
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
Section 5: Professional Project: Maths Game (HTML, CSS & JavaScript)
2:18:47
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
Math Game Source Code (pdf)
Math Game Source Code (zip)
Section 6: jQuery: beginner to advanced
4:56:57
Introduction and Loading JQuery
09:03
JQuery Chapter: Roadmap and Full Source Code
Select HTML Elements (1)
12:59
Select HTML Elements (2)
11:17
Respond to Events
12:07
Change HTML Content and Attributes (1)
11: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
Section 7: Professional Project: Fruits Slice Game (HTML, CSS & JQuery)
1:34:49
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
Fruits Slice Game Source Code (pdf)
Fruits Slice Game Source Code (zip)
Section 8: Twitter Bootstrap
4:35:57
Introduction
07:47
Bootstrap Chapter: Roadmap and Full Source Code
Grid System
09:33
Typography
12:14
Tables
06:02
Forms (1) - Activity: Inline and Horizontal Responsive Login Forms
12:24
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
Section 9: Professional Project: App Landing Page (HTML, CSS & Bootstrap)
57:06
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
App Landing Page Source Code (pdf)
App Landing Page Source Code (zip)
Section 10: Professional Project: Company Website (HTML, CSS & Bootstrap)
1:03:20
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
Company Website Source Code (pdf)
Company Website Source Code (zip)
Section 11: Professional Project: Our Lovely Course (HTML, CSS, jQuery & Bootstrap)
1:42:48
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
Our Lovely Course Website Source Code (pdf)
Our Lovely Course Website Source Code (zip)
Section 12: Professional Project: Stopwatch App (HTML, CSS, jQuery & Bootstrap)
1:14:10
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
StopWatch App Source Code (pdf)
StopWatch App Source Code (zip)
Section 13: Professional Project: Drawing App (HTML, CSS, jQuery UI, Canvas, Local Storage)
1:47:16
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
Drawing App Source Code (pdf)
Drawing App Source Code (zip)
Section 14: ES6 - Modern JavaScript (A must in 2019)
4:52:45
Download Chapter Source Code
Introduction to Modern JavaScript (ES6)
03:40
Variables & Scoping: Review of "var"
04:03
Variables & Scoping: Let Scope and Temporal Dead Zone
05:28
Block Scoping in ES6
08:39
Functions and Block Scoping
10:54
Functions and Block Scoping – use let
03:23
Let Scope vs Closures
06:46
Closures Challenge
05:00
Read only variables - const
03:25
New Features that make your life easier: Template Literals
04:55
New Features that make your life easier: Arrow functions – ‘this’ lexical scope
19:04
Destructuring - Arrays
10:56
Destructuring - Objects
07:55
Destructuring - Functions
04:37
Functions – Default Parameter Values
09:58
Functions – Rest Parameters
16:55
Spread Operator
04:32
Objects New Features
09:10
Iteration: For of loop
05:52
Iterators - next() - Generators
19:04
Maps - Iteration
19:45
Sets - Iteration
10:45
Sets – Challenge: Intersection and Difference
10:12
Symbols
16:48
Symbol.iterator
11:50
Array.from: collections, strings, arguments
09:32
Array.from: optional map, length property, Maps & Sets
08:10
Array.of
01:53
More Array Methods
10:55
ES6 Classes: Back to ES5 Constructors
09:22
ES6 Classes: Syntax
02:55
ES6 Classes: Static Methods
03:18
ES6 Classes: Getters & Setters
06:32
Class Inheritance – extends - super
06:19
Section 15: "Front End" vs "Back End"
25:45
Understand the Back End (1)
18:29
Understand the Back End (2)
07:16
Section 16: Node.js - Introduction & Installation
15:53
Introduction to Node.js
05:11
How to run Unix commands on Windows
Node.js Installation + REPL (Read-Eval-Print-Loop)
09:17
Section 17: The "super" Command Line Crash Course
1:16:54
Command Line Crash Course (1)
18:20
Command Line Crash Course (2)
19:55
Command Line Crash Course (3)
19:16
Command Line Crash Course (4)
19:23
Section 18: Node.js - Let's Dive in (using ES6 + ES7)
2:18:12
Node.zip
Your First Node Application
17:55
File Exports
12:48
HTTP Built-in Module (1)
18:57
HTTP Built-in Module (2)
10:09
HTTP Built-in Module (3)
13:00
Fs Built-in Module - Blocking Mode
16:03
Fs Built-in Module - Non Blocking Mode
19:19
Fs Built-in Module - Use ES6 Promises
14:55
Fs Built-in Module - Use ES7 Async Await
05:38
Fs Built-in Module - More Features
09:15
Section 19: Professional Project: Online File Explorer App (Pure Node.js , Bootstrap 4)
5:27:46
Download Chapter Source Code
Project Introduction: Online File Explorer App (Pure Node.js , Bootstrap 4)
08:23
Skeleton and Decoration
19:33
App Logic
09:54
Create the Server
18:56
Decode the path name and convert it to a full static path
19:58
Display folder content and print the title
16:45
Show the path inside a "Breadcrumb"
19:55
Loop through folder elements
18:32
Print Icons - Get introduced to the child_process module
19:31
Calculate folders' size using the child_process module
16:28
Convert folders' size to Bytes - Retrieve items' last modified time
18:41
Calculate the size of files
18:54
Get the mime type of files
17:04
Serve files to the Client
19:56
Serve PDF files on the browser - Serve Media content in chunks using a stream
19:31
Re-order folder elements by name
18:37
Re-order folder elements by name (2)
19:24
Add the up and down arrows after sorting elements by name
07:23
Sort elements by size and last modified
09:20
Fix projects bugs
10:56
Section 20: Git & Github
1:19:17
Introduction to Version Control using Git
12:02
Git using the Command Line
17:10
Git Branching & Merging
11:21
Github - Introduction
12:02
Github - Cloning, Forking & Pull Requests (1)
10:30
Github - Cloning, Forking & Pull Requests (2)
13:45
Github - Cloning, Forking & Pull Requests (3)
02:27
Section 21: Deploy your App to Heroku
16:14
Deploy your App to Heroku
16:14
Section 22: PHP: Beginner to advance
6:42:06
Introduction
15:58
PHP Chapter: Roadmap and Full Source Code
Source Code (zip)
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
Section 23: MySQL
2:20:55
Introduction
04:26
Source Code (zip)
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
Section 24: Professional Project: Online Notes App (HTML, CSS, Bootstrap, PHP, MySQL, AJAX)
10:35:03
Introduction
07:29
Source code
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 (5)
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
"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
Section 25: WordPress (3 Professional Webpages: Blog + About Page + Contact Page)
1:44:37
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
Customise 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:39
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
Section 26: Google Maps API's
2:25:18
Introduction & Embed Google Map to your Website
19:39
Google Maps API's Chapter: Roadmap and Full Source Code
Source Code (zip)
Markers and InfoWindows
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
Section 27: Professional Project: Distance Between Cities (HTML. CSS, jQuery, Google Maps)
42:35
Introduction
01:56
Skeleton and decoration
19:56
App Logic using an illustrative flowchart
03:34
Javascript Code
16:59
Distance Between Cities App Source Code
Source code (zip)
Section 28: Professional Project: Website with Social Widgets (Facebook, Google+ & Twitter)
36:04
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
Website Source Code
Section 29: IOS and Android Mobile Applications using jQuery Mobile
50:48
Introduction
05:51
Mobile Apps Chapter: Roadmap and Full Source Code
Source code (zip)
Pages, Dialogs and Transitions
13:39
Navbars
08:08
Grid System
05:04
List Views
07:21
Form Inputs
01:53
Events
08:26
Section 30: Professional Project: Speed Reader for IOS and Android
2:24:41
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 (2)
09:40
Speed Reader App Source Code (Pdf)
Speed Reader App Source Code (zip)
Section 31: Professional Project: Car Sharing Website (Javascript, PHP, MySQL, AJAX, JSON)
9:17:06
Introduction
05:23
Final Source Code
Signup/Login Code (1)
11:03
Start Source Code
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
"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:48
"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:40
"Search Trips" Code (4)
13:11
"Search Trips" Code (5)
19:31
"Search Trips" Code (6)
08:37
"Search Trips" Code (7)
19:34
"Search Trips" Code (8)
19:44
"Spinner" Code (1)
18:54
"Spinner" Code (2)
12:13
Finishing Touches & Congratulations
07:54
About the Instructor
Development Island is a UK based innovative company specialised in providing the best technology courses on the internet. We are proud to be teaching ~50000 students from 173+ countries. We believe our courses are the best in the market for two reasons:
- We use a practical approach that we developed over years of experience: Learning by doing.
- We make your learning experience enjoyable and fun.
BitDegree platform reviews
Days
Hours
Minutes
Seconds
