The Complete Web Development Course - Build Real World Websites using HTML5, CSS3, JS and more! - Skillshare

The Complete Web Development Course - Build Real World Websites using HTML5, CSS3, JS and more!

Development Island

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
362 Videos (2d 18h 52m)
    • HTML5 - Introduction

      5:53
    • HTML5 - Introduction

      1:54
    • HTML5 - Structure of a website

      9:23
    • HTML5 - Your first website

      5:40
    • HTML5 - Get your free web hosting

      6:33
    • HTML5 - Set up FireFTP

      8:22
    • HTML5 - Headings

      4:55
    • HTML5 - Paragraphs

      2:31
    • HTML5 - Links

      7:49
    • HTML5 - Images

      4:40
    • HTML5 - Inline vs Block Elements

      5:53
    • HTML5 - Iframes - Activity: Embed a nice relaxing YouTube video to your website

      5:41
    • HTML5 - Unordered Lists

      3:02
    • HTML5 - Ordered Lists

      2:08
    • HTML5 - Description Lists

      2:19
    • HTML5 - Tables

      3:54
    • HTML5 - Entities

      5:07
    • HTML5 - Forms (1) - Activity: Create a simple Login Form

      8:02
    • HTML5 - Forms (2) - Activity: Create a Marketplace Checkout Form

      20:00
    • HTML5 - Text Decoration

      3:58
    • HTML5 - Comments

      2:25
    • CSS3 - Introduction

      1:11
    • CSS3 - Inline CSS

      2:25
    • CSS3 - Internal CSS

      2:26
    • CSS3 - External CSS

      2:33
    • CSS3 - Classes and IDs

      2:44
    • CSS3 - Div and Span

      7:25
    • CSS3 - Box Model

      2:56
    • CSS3 - Box Model Padding

      4:25
    • CSS3 - Box Model: Border

      5:49
    • CSS3 - Box Model: Outline

      1:52
    • CSS3 - Box Model: Margin

      2:27
    • CSS3 - Background

      7:48
    • CSS3 - Floating

      4:37
    • CSS3 - Positioning

      6:21
    • CSS3 - Display

      3:00
    • CSS3 - Text Decoration

      5:00
    • CSS3 - Text Align

      1:58
    • CSS3 - Text Font

      3:50
    • CSS3 - Text Effects

      7:53
    • CSS3 - Image Sprites

      5:29
    • CSS3 - Image Opacity

      2:56
    • CSS3 - Styling Lists

      7:42
    • CSS3 - Styling Links

      7:08
    • CSS3 - Gradients

      10:06
    • CSS3 - 2D Transforms

      6:22
    • CSS3 - 3D Transforms

      4:53
    • CSS3 - Transitions

      4:53
    • CSS3 - Animations

      8:57
    • Professional Project: Mathematics Website (HTML&CSS)

      2:23
    • Header (1)

      17:46
    • Header (2)

      16:42
    • Menu

      18:22
    • Introduction Box

      7:03
    • Sidebars (1)

      19:46
    • Sidebars (2)

      8:38
    • Footer & Congratulations

      10:17
    • JAVASCRIPT - Introduction

      8:55
    • JAVASCRIPT - Buttons

      7:04
    • JAVASCRIPT - Change HTML Content

      7:02
    • JAVASCRIPT - Change HTML Style

      5:51
    • JAVASCRIPT - Variables and Data Types

      11:38
    • JAVASCRIPT - Change HTML Using Variables - Activity: Random Color Generator

      10:44
    • JAVASCRIPT - Functions: Activity: Swap the content of two divs

      13:56
    • JAVASCRIPT - Objects

      9:23
    • JAVASCRIPT - Create Objects using the "new" keyword

      4:41
    • JAVASCRIPT Object Contructors

      16:41
    • JAVASCRIPT - Arrays

      17:45
    • JAVASCRIPT - If and Switch Statements - Activity: Motorway Speed Control

      17:23
    • JAVASCRIPT - For Loops

      9:23
    • JAVASCRIPT - While Loops - Activity: Spend $1000 Randomly in a marketplace

      11:07
    • JAVASCRIPT - Regular Expressions

      16:17
    • JAVASCRIPT - Errors (1)

      3:42
    • JAVASCRIPT - Errors (2) - Activity: Password Validation

      12:48
    • JAVASCRIPT - Set Interval & SeTimeout - Activity: Create a simple counter

      10:23
    • JAVASCRIPT - Window and Screen

      13:02
    • JAVASCRIPT - Alert Boxes

      7:45
    • JAVASCRIPT - Cookies

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

      2:27
    • Page Structure & Styling (1)

      19:58
    • Page Structure & Styling (2)

      18:20
    • Page Structure & Styling (3)

      15:28
    • Page Structure & Styling (4)

      7:14
    • Game Logic using an illustrative flowchart

      3:02
    • JavaScript Code (1)

      17:22
    • JavaScript Code (2)

      19:00
    • JavaScript Code (3)

      17:30
    • JavaScript Code (4) & Congratulations

      18:10
    • JQUERY - Introduction and Loading JQuery

      9:03
    • JQUERY - Select HTML Elements (1)

      11:17
    • JQUERY - Select HTML Elements (2)

      12:59
    • JQUERY - Respond to Events

      12:07
    • JQUERY - Change HTML Content and Attributes (1)

      11:47
    • JQUERY - Change HTML Content and Attributes (2)

      7:11
    • JQUERY - Change Styling (1)

      11:49
    • JQUERY - Change Styling (2) - Activity: Random Position and Color Generator

      13:59
    • JQUERY - JQuery Effects

      14:44
    • JQUERY - Ajax

      13:00
    • JQUERY - JQuery UI Introduction

      8:09
    • JQUERY - Draggable and Droppable (1) - Activity: Leave me alone! Please drop me!

      19:05
    • JQUERY - Draggable and Droppable (2) - Activity: Drag Items to your basket

      10:09
    • JQUERY - Resizable

      9:20
    • JQUERY - Selectable - Activity: Append selected Car Makes to a Box

      9:47
    • JQUERY - Sortable - Activity: Sort and exchange Car Makes between two groups

      9:03
    • JQUERY - Accordion - Activity: Create a resizable accordion with collapsible sections

      10:04
    • JQUERY - Autocomplete - Activity: City Input with prepopulated options

      7:11
    • JQUERY - Button

      13:16
    • JQUERY - Date Picker - Activity: Outbound and return Flight Date Picker just like Expedia

      13:56
    • JQUERY - Dialog - Activity: Are you sure you want to go to the previous page?

      13:58
    • JQUERY - Menu

      6:05
    • JQUERY - Progress Bar - Activity: Animated progress bar filled from 0% to 100%

      10:50
    • JQUERY - Select Menu

      7:46
    • JQUERY - Slider - Activity: Car Mileage Range using a Slider

      17:54
    • JQUERY - More Widgets: Spinners, Tabs and Tooltips

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

      2:01
    • Page Structure and Styling

      12:51
    • Game Logic using an illustrative flowchart

      2:58
    • jQuery Code (1)

      17:45
    • jQuery Code (2)

      21:04
    • jQuery Code (3)

      20:08
    • jQuery Code (4)

      17:51
    • Twitter Bootstrap - Introduction

      7:46
    • Twitter Bootstrap - Grid System

      9:33
    • Twitter Bootstrap - Typography

      12:13
    • Twitter Bootstrap - Tables

      6:01
    • Twitter Bootstrap - Forms (1) - Activity: Inline and Horizontal Responsive Login Forms

      12:23
    • Twitter Bootstrap - Forms (2)

      11:26
    • Twitter Bootstrap - Forms (3)

      19:27
    • Twitter Bootstrap - Buttons

      12:51
    • Twitter Bootstrap - Images

      2:24
    • Twitter Bootstrap - Navs - Activity: Website Design using Nav Tabs and Nav Pills

      8:47
    • Twitter Bootstrap - Navbars - Activity: Website Design using a responsive/collapsible navigation bar

      19:58
    • Twitter Bootstrap - Pagination - Activity: Pagination and Pager Examples like Google/Ebay

      8:56
    • Twitter Bootstrap - Jumbotron

      3:12
    • Twitter Bootstrap - Thumbnails

      10:00
    • Twitter Bootstrap - Dropdown menus

      7:19
    • Twitter Bootstrap - Modals (1) - Activity: I have an inquiry about my order

      16:14
    • Twitter Bootstrap - Modals (2) - Activity: I have an inquiry about my order

      7:12
    • Twitter Bootstrap - Scrollspy

      8:38
    • Twitter Bootstrap - Tabs

      14:24
    • Twitter Bootstrap - Tooltips

      6:36
    • Twitter Bootstrap - Popovers - Activity: Create a popover just like the one you see on an IPAD

      6:41
    • Twitter Bootstrap - Alerts - Activity: Create an alert Box to show a warning or success message

      7:34
    • Twitter Bootstrap - Button plugin - Activity: Loading … Download Complete

      8:50
    • Twitter Bootstrap - Collapse plugin

      16:46
    • Twitter Bootstrap - Carousels - Activity: Create an interactive carousel slider

      17:28
    • Twitter Bootstrap - Affix plugin - Activity: Interactive Website with Content Affixed to a Menu

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

      2:41
    • Header and Featured Content (1)

      15:21
    • Header and Featured Content (2)

      15:49
    • Header and Featured Content (3)

      9:01
    • Trial Section, Footer & Congratulations

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

      2:19
    • Structure of our work

      9:00
    • Background

      6:30
    • Navbar

      17:33
    • Header & icons section

      14:00
    • Contact Button & Footer

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

      3:06
    • Structure of our work

      14:22
    • Add a background video

      8:06
    • Navigation bar with advanced styling

      17:04
    • Home Section

      8:12
    • About Section

      11:18
    • Carousel Slider (1)

      17:12
    • Carousel Slider (2)

      7:03
    • Adapt for Small Devices

      8:52
    • Add ScrollSpy feature to navbar & Congratulations

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

      2:20
    • App Skeleton and Decoration (1)

      11:14
    • App Skeleton and Decoration (2)

      11:46
    • App Logic using an illustrative flowchart

      5:51
    • jQuery Code (1)

      13:32
    • jQuery Code (2)

      9:21
    • jQuery Code (3)

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

      2:25
    • App Skeleton and Decoration (1)

      15:21
    • App Skeleton and Decoration (2)

      18:25
    • App Skeleton and Decoration (3)

      10:06
    • Learn HTML5 Canvas

      10:14
    • App Logic using an illustrative flowchart

      2:32
    • jQuery Code Structure

      5:21
    • jQuery Code (1)

      7:48
    • jQuery Code (2)

      16:56
    • jQuery Code (3)

      17:53
    • PHP - Introduction

      15:57
    • Embed PHP in HTML

      7:49
    • PHP Variables

      9:46
    • Data Types: Strings

      6:12
    • Data Types: Integers and Floats

      7:04
    • Data Types: Booleans

      5:25
    • Data Types: Arrays

      17:32
    • Data Types: Objects

      10:58
    • Data Types: NULL

      2:18
    • Data Types: Resources

      5:35
    • String Functions

      8:52
    • If and Switch Statements

      12:27
    • For Loops

      9:42
    • While Loops

      5:59
    • Functions

      7:59
    • GET & POST

      20:00
    • Array Functions (1)

      14:23
    • Array Functions (2)

      13:01
    • Send Emails – Activity: Send a styled email in HTML format

      9:54
    • Filter User Inputs (1) – Protect Yourself from Hackers

      7:42
    • Filter User Inputs (2) – User Input Validation

      7:14
    • Activity: Create a responsive Contact Form using PHP & Bootstrap (1)

      17:28
    • Activity: Create a responsive Contact Form using PHP & Bootstrap (2)

      19:27
    • Activity: Create a responsive Contact Form using PHP & Bootstrap (3)

      14:00
    • 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:39
    • 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:30
    • Upload Files Using PHP (2) – Activity: Upload PDF & Text Files Less than 3Mo.

      17:26
    • Cookies

      6:24
    • Error Handling (1)

      7:37
    • Error Handling (2) – Activity: Log PHP errors in a file / Trigger error emails

      15:46
    • Sessions

      6:40
    • MySQL

      4:26
    • Create a database using PHP MYADMIN

      10:51
    • Remote MySQL (1)

      12:43
    • Remote MySQL (2)

      7:14
    • Create a database using PHP & MySQL

      8:40
    • Add a table to a database

      10:04
    • Populate a database table

      6:58
    • Activity: Populate Database once the user submits a form

      19:56
    • Activity: Populate Database once the user submits a form (2)

      18:43
    • 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

      9:23
    • Delete Database Data

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

      7:28
    • App Skeleton and Decoration (1) - Landing Page

      19:57
    • App Skeleton and Decoration (2) - Landing Page

      16:47
    • App Skeleton and Decoration (3) - Landing Page

      17:33
    • App Skeleton and Decoration (4) - Landing Page

      12:05
    • App Skeleton and Decoration (5) - My Notes Page

      19:58
    • App Skeleton and Decoration (6) - Profile Page

      19:49
    • App Logic - Signup, Login, Remember Me, Forgot Password

      17:07
    • Signup/Login Code Structure (1)

      13:38
    • Signup/Login Code Structure (2)

      6:31
    • Signup Code (1)

      17:52
    • Signup Code (2)

      20:00
    • Signup Code (3)

      15:43
    • Signup Code (4)

      19:59
    • Signup Code (5)

      18:46
    • Login Code

      19:58
    • "Remember me" Code (1)

      19:47
    • "Remember me" Code (2)

      20:02
    • "Remember me" Code (3) and Logout Code

      20:03
    • "Forgot Password" Code (1)

      18:01
    • "Forgot Password" Code (2)

      15:36
    • "Forgot Password" Code (3)

      16:23
    • "Forgot Password" Code (4)

      16:32
    • Notes Management: Logic

      6:12
    • Notes Management: Code Structure

      16:22
    • Load Notes: Code (1)

      19:01
    • Create Notes: Code (1)

      17:04
    • Create Notes: Code (2)

      12:15
    • Edit Notes: Code (1)

      16:59
    • Edit Notes: Code (2)

      14:54
    • Delete Notes: Code (1)

      16:43
    • Delete Notes: Code (2)

      11:26
    • Update Username Code (1)

      18:49
    • Update Username Code (2)

      13:23
    • Update Password Code (1)

      19:37
    • Update Email Code (1)

      19:59
    • Update Email Code (2)

      16:11
    • WORDPRESS1

      3:34
    • WORDPRESS2

      5:02
    • WORDPRESS3

      4:36
    • WORDPRESS3

      2:35
    • WORDPRESS4

      6:49
    • WORDPRESS5

      9:09
    • WORDPRESS5

      7:14
    • WORDPRESS6

      4:18
    • WORDPRESS7

      3:42
    • WORDPRESS8

      13:35
    • WORDPRESS9

      9:38
    • WORDPRESS10

      14:10
    • WORDPRESS11

      7:33
    • WORDPRESS12

      12:33
    • GOOGLEMAPS1

      19:38
    • GOOGLEMAPS2

      14:11
    • GOOGLEMAPS3

      15:40
    • GOOGLEMAPS4

      8:18
    • GOOGLEMAPS5

      18:59
    • GOOGLEMAPS6

      11:13
    • GOOGLEMAPS7

      12:53
    • GOOGLEMAPS7

      18:12
    • GOOGLEMAPS8

      16:51
    • GOOGLEMAPS9

      8:49
    • DISTANCEBETWEENCITIES1

      1:56
    • DISTANCEBETWEENCITIES2

      19:56
    • DISTANCEBETWEENCITIES3

      3:34
    • DISTANCEBETWEENCITIES4

      16:58
    • SOCIALWIDGETS1

      1:32
    • SOCIALWIDGETS2

      16:07
    • SOCIALWIDGETS3

      3:50
    • SOCIALWIDGETS4

      4:24
    • SOCIALWIDGETS5

      5:24
    • SOCIALWIDGETS6

      4:39
    • JQUERYMOBILE1

      5:51
    • JQUERYMOBILE2

      13:39
    • JQUERYMOBILE3

      8:07
    • JQUERYMOBILE4

      5:03
    • JQUERYMOBILE5

      7:21
    • JQUERYMOBILE6

      1:53
    • JQUERYMOBILE7

      8:25
    • SPEEDREADER1

      2:07
    • SPEEDREADER2

      15:52
    • SPEEDREADER2

      19:21
    • SPEEDREADER3

      11:34
    • SPEEDREADER4

      8:50
    • SPEEDREADER4

      19:55
    • SPEEDREADER5

      4:58
    • SPEEDREADER6

      5:20