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

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

Issam Baou

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 1: Mathematics Website (HTML&CSS)

      2:23
    • Professional Project 1: Header (1)

      17:46
    • Professional Project 1: Header (2)

      16:42
    • Professional Project 1: Menu

      18:22
    • Professional Project 1: Introduction Box

      7:03
    • Professional Project 1: Sidebars (1)

      19:46
    • Professional Project 1: Sidebars (2)

      8:38
    • Professional Project 1: 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 2: Maths Game (HTML, CSS & JavaScript)

      2:27
    • Professional Project 2: Page Structure & Styling (1)

      19:58
    • Professional Project 2: Page Structure & Styling (2)

      18:20
    • Professional Project 2: Page Structure & Styling (3)

      15:28
    • Professional Project 2: Page Structure & Styling (4)

      7:14
    • Professional Project 2: Game Logic using an illustrative flowchart

      3:02
    • Professional Project 2: JavaScript Code (1)

      17:22
    • Professional Project 2: JavaScript Code (2)

      19:00
    • Professional Project 2: JavaScript Code (3)

      17:30
    • Professional Project 2: 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 3: Fruits Slice Game (HTML, CSS & JQuery)

      2:01
    • Professional Project 3: Page Structure and Styling

      12:51
    • Professional Project 3: Game Logic using an illustrative flowchart

      2:58
    • Professional Project 3: jQuery Code (1)

      17:45
    • Professional Project 3: jQuery Code (2)

      21:04
    • Professional Project 3: jQuery Code (3)

      20:08
    • Professional Project 3: 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 4: App Landing Page (HTML, CSS & Bootstrap)

      2:41
    • Professional Project 4: Header and Featured Content (1)

      15:21
    • Professional Project 4: Header and Featured Content (2)

      15:49
    • Professional Project 4: Header and Featured Content (3)

      9:01
    • Professional Project 4: Trial Section, Footer & Congratulations

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

      2:19
    • Professional Project 5: Structure of our work

      9:00
    • Professional Project 5: Background

      6:30
    • Professional Project 5: Navbar

      17:33
    • Professional Project 5: Header & icons section

      14:00
    • Professional Project 5: Contact Button & Footer

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

      3:06
    • Professional Project 6: Structure of our work

      14:22
    • Professional Project 6: Add a background video

      8:06
    • Professional Project 6: Navigation bar with advanced styling

      17:04
    • Professional Project 6: Home Section

      8:12
    • Professional Project 6: About Section

      11:18
    • Professional Project 6: Carousel Slider (1)

      17:12
    • Professional Project 6: Carousel Slider (2)

      7:03
    • Professional Project 6: Adapt for Small Devices

      8:52
    • Professional Project 6: Add ScrollSpy feature to navbar & Congratulations

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

      2:20
    • Professional Project 7: App Skeleton and Decoration (1)

      11:14
    • Professional Project 7: App Skeleton and Decoration (2)

      11:46
    • Professional Project 7: App Logic using an illustrative flowchart

      5:51
    • Professional Project 7: jQuery Code (1)

      13:32
    • Professional Project 7: jQuery Code (2)

      9:21
    • Professional Project 7: jQuery Code (3)

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

      2:25
    • Professional Project 8: App Skeleton and Decoration (1)

      15:21
    • Professional Project 8: App Skeleton and Decoration (2)

      18:25
    • Professional Project 8: App Skeleton and Decoration (3)

      10:06
    • Professional Project 8: Learn HTML5 Canvas

      10:14
    • Professional Project 8: App Logic using an illustrative flowchart

      2:32
    • Professional Project 8: jQuery Code Structure

      5:21
    • Professional Project 8: jQuery Code (1)

      7:48
    • Professional Project 8: jQuery Code (2)

      16:56
    • Professional Project 8: jQuery Code (3)

      17:53
    • PHP - Introduction

      15:57
    • PHP - Embed PHP in HTML

      7:49
    • PHP - PHP Variables

      9:46
    • PHP - Data Types: Strings

      6:12
    • Data PHP - Types: Integers and Floats

      7:04
    • PHP - Data Types: Booleans

      5:25
    • PHP - Data Types: Arrays

      17:32
    • PHP - Data Types: Objects

      10:58
    • PHP - Data Types: NULL

      2:18
    • PHP - Data Types: Resources

      5:35
    • PHP - String Functions

      8:52
    • PHP - If and Switch Statements

      12:27
    • PHP - For Loops

      9:42
    • PHP - While Loops

      5:59
    • PHP - Functions

      7:59
    • PHP - GET & POST

      20:00
    • PHP - Array Functions (1)

      14:23
    • PHP - Array Functions (2)

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

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

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

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

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

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

      14:00
    • PHP - Date and Time (1)

      13:07
    • PHP - Date and Time (2) - Activity: Day of the week you were born? Date in 1000 days?

      15:59
    • PHP - Include PHP files

      12:39
    • PHP - File Handling (1): Open – Read – Write - Close

      18:03
    • PHP - File Handling (2): Open – Read – Write - Close

      11:25
    • PHP - Upload Files Using PHP (1) – Activity: Upload PDF & Text Files Less than 3Mo.

      19:30