Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

The Complete Web Development Course - Build 15 Projects

The only course you need to become a full-stack web developer. Covers HTML5, CSS3, JS, ES6, Node, APIs, Mobile & more!

Created byDevelopment Island (UK)

Last updated 9/2025

English

What you'll learn

Go from Zero skills to building Powerful Web Applications on a highly professional level using the latest 2024 Web Technologies.
Use a Portfolio of over 15 highly professional websites, Games and Mobile apps you would have developed during the course to take your career to the next level.
Create real life mobile apps and upload them to the IOS App Store and Google Play.
Use HTML5, CSS3, Flexbox, Grid & SASS to build website content and add stunning styling and decoration.
Use Javascript, jQuery & jQuery User Interface to create Interactive Websites and Games.
Use Twitter Bootstrap to produce Responsive Websites that will adapt to any device size.
Use Back End Technologies like NodeJS, PHP, AJAX, JSON to build dynamic database-driven websites.
Use advanced skills to connect your websites to APIs like Google Maps, Facebook, Google plus and Twitter.
Create a Professional Mathematics Tutorial Website using HTML5 & CSS3.
Create a Professional Maths Game using HTML5, CSS3 & JavaScript.
Create a Professional Fruits Slice Game using HTML5, CSS3 & JQuery.
Create a Professional App Landing Page using HTML5, CSS3 & Bootstrap.
Create a Professional Company Website using HTML5, CSS3 & Bootstrap
Create a Professional website with video background using HTML5, CSS3, jQuery & Bootstrap.
Create a Professional Stopwatch App using HTML5, CSS3, jQuery & Bootstrap.
Create a Professional Drawing App using HTML5, CSS3, jQuery UI, Canvas, Local Storage...
Create a Professional Online File Explorer App using ES6, NodeJS , HTML5, CSS3 & Bootstrap.
Create a Professional Online Notes App using HTML5, CSS3, Bootstrap, PHP, MySQL & AJAX.
Create a Professional Blog using WordPress.
Create a Professional Distance Between Cities App using HTML5, CSS3, jQuery, & Google Maps APIs.
Create a Professional Website with Social Widgets (Facebook, Google+ & Twitter).
Create a Professional Speed Reader App for IOS and Android.
Create a Fully Functional Car Sharing App which users around the world can use to share car trips. (using HTML5, CSS3, Javascript, PHP, MySQL, AJAX & JSON)

Course content

33 sections • 508 lectures • 90h 15m total length

Syllabus Download
How a website works9:03
Welcome to The Complete Web Development Course, the most comprehensive web development course on the internet. Throughout the course, we will have fun together learning Web Development Technologies. You will confidently go from Zero-skills to a Professional cash Earning Web developer. In this video I will give you an overview of the different chapters of the course. I will list the skills you will learn and I will introduce you to the powerful websites and applications you will share with the world at the end of each section.
Your journey inside the course14:29
Explore the complete web development course—from HTML5 and CSS with flexbox, grid, and Sass to JavaScript, jQuery, Bootstrap, ES6, and backend NodeJS and PHP—built through 15 projects.
How to watch videos in HD resolution0:09
How to get help0:17
HTML Chapter: Roadmap and Full Source Code21:00
Please make sure you download this file before you move to the next lectures of this chapter. It will show you the structure of the current chapter and provide you with the necessary source code that will make your learning experience easier and faster.
Structure of a website9:23
This video will explain the structure of a webpage, it will introduce the different components that build up the skeleton of a website.
Choosing your text editor0:19
Your first website6:13
In this lecture, you will build your very first website.
Your passcode0:08
Get your free unlimited web hosting9:55
In this lecture, you will get your free unlimited web hosting so that you can upload your website on a remote server and share it with the whole world.
Important note about FTP0:24
Share your website with the world (1)6:54
Upload your site to the server, use the control panel DirectAdmin, navigate to public_html, edit index.html, and set up FTP tools like Cyberduck or FileZilla to publish live pages.
Share your website with the world (2) - Cyberduck version12:48
In this lecture, you will set up fire FTP on our computer, which will make easy for you to transfer files from and to the server with a simple drag and drop.
Share your website with the world (2) - FileZilla Version15:55
Install and use FileZilla to connect to your hosting server via FTP, upload files to public_html including index.html, and edit remotely while managing caching behavior.
Headings4:55
In this lecture, you will learn the syntax of HTML headings and add different headings to your website.
Paragraphs2:31
In this lecture, you will learn the syntax of HTML paragraphs, you will create your first paragraph. You will then create your second paragraph and add a line break inside it.
Links7:49
In this lecture, you will add links to your website. This session will cover different types of links, links taking you to an external website, links taking you to a file in the same server you are working in and links taking you to a certain HTML element in your website itself.
Images4:40
In this video, you will add images to your website. This section will cover images located in your server as well as external images living in other servers. Also you will add basic styling to pictures using basic attributes like the width and height.
Inline vs Block Elements5:53
In this lecture, you will understand the difference in behaviour between the main two types of HTML elements: Inline Elements and Block Elements
Iframes - Activity: Embed a nice relaxing YouTube video to your website5:41
In this lecture, you will embed external websites inside your website using Iframes, also you will add a nice relaxing YouTube video to your website.
Unordered Lists3:02
In this lecture, you will create your first unordered list, and also add a nice sub-list inside your unordered list.
Ordered Lists2:09
In this lecture, you will create a few types of ordered lists
Description Lists2:19
In this lecture, you will create a description/definition list defining two main Web Technologies in this course: HTML and CSS.
Tables3:54
In this lecture, you will create a simple HTML table consisting of three columns: Name, Company and Data of Birth, then you will populate it using details of famous people like Mark Zuckerberg or Steve Jobs.
Entities5:07
In this lecture, you will create HTML entities like the copyright symbol or the less than sign.
Forms (1) - Activity: Create a simple Login Form8:02
In this lecture, you will create a simple login form using HTML text inputs and password inputs. You will add labels inside your form. And you will add a Login button to submit you form. I will briefly mention the different types of forms (get and post) that we will cover later in the PHP chapter.
Forms (2) - Activity: Create a Marketplace Checkout Form20:00
In this lecture, you will create a nice Marketplace Checkout Form, it will consist of fields like the customer address, their preferred shipping method, payment method, etc. You will use new input types like checkboxes and radio buttons which I will explain in detail.
Text Decoration3:58
In this lecture, you will style text using basic HTML tags. (Advanced styling using CSS will be covered in the next chapter).
Comments2:25
In this lecture, you will add comments to HTML code to make your code more readable.
HTML Quiz

Introduction1:11
In this lecture you will get introduced to CSS (Cascading Style Sheets) which you will use later to style and decorate your websites.
CSS Chapter: Roadmap and Full Source Code1:00:00
Please make sure you download this file before you move to the next lectures of this chapter. It will show you the structure of the current chapter and provide you with the necessary source code that will make your learning experience easier and faster.
Inline CSS2:25
In this lecture, you will learn how to style HTML elements using inline styling, which uses the style attribute that goes inside the element tag. In the first example you will set the font-size and color of a paragraph.
Internal CSS2:26
In this lecture, you will learn how to style HTML elements using internal CSS which goes inside the head section of the website. You will learn how to select elements you would like to style and add styling to them.
External CSS2:33
In this lecture, you will learn how to use external CSS to styling HTML elements. You will style your website this time using and external file that you will link to your website using the link element inside the head of your website.
Classes and IDs2:44
In this lecture, you will get introduced to the class and id concepts, which you will use to style different HTML elements with minimal code.
Div and Span7:25
In this lecture, you will get introduced to the Div and Span concepts and use them to add styling to your website.
Box Model2:56
In this lecture, you will get introduced to the box model, which you will use in the next few lectures to add padding, borders and margins to HTML elements.
Box Model: Padding4:25
In this lecture, you will learn the padding concept and its syntax. You will add padding to div elements in your page.
Box Model: Border5:49
In this lecture, you will learn the border concept and its syntax. You will add borders to div elements in your page.
Box Model: Outline1:52
In this lecture, you will learn the outline concept and its syntax. You will add outlines to div elements in your page.
Box Model: Margin2:27
In this lecture, you will learn the margin concept and its syntax. You will add margins to div elements in your page.
Background7:48
In this lecture, you will get introduced to the background CSS properties and use them to style HTML elements using background images.
Floating4:37
In this lecture, you will use the CSS float property to control how HTML elements float on a webpage.
Positioning6:21
In this lecture, you will learn different types of CSS positioning: fixed, relative and absolute positioning. You will use them to position HTML elements on your webpage. You will also use the z-index property to decide which element show on top of the other if two HTML elements overlap.
Display3:00
In this lecture, you will learn how to use the CSS properties: display and visibility to hide or show HTML elements. You will also learn the difference between these two properties.
Text Decoration5:00
In this lecture, you will use how to use CSS properties (text-decoration, font-weight, etc.) to decorate text, i.e. underlining text, make text bold, adding text shadow, etc.
Text Align1:58
In this lecture, you will learn how to use CSS properties to align text just like you would do on a text editor like Microsoft word.
Text Font3:50
In this lecture, you will learn how to set text font family. You will also learn the difference between generic and specific families.
Text Effects7:53
In this lecture, you will use CSS properties to control the behaviour of text overflowing of an HTML element by breaking it, wrapping it or hiding it.
Image Sprites5:30
In this lecture, you will use image sprites to use only a part of an image in your webpage rather than the full picture.
Image Opacity2:56
In this lecture, you will learn how to add opacity to HTML pictures and control how transparent they are.
Styling Lists7:42
In this lecture, you will style two lists of European capitals using the CSS list properties.
Styling Links7:08
In this lecture, you will style HTML links in different states: standard, active, visited.
Gradients10:06
In this lecture, you will style a div using gradients
2D Transforms6:22
In this lecture, you will apply 2D transforms to an HTML div: rotation, translation, skewing
3D Transforms4:53
In this lecture, you will apply 3D transforms to an HTML div: 3D rotation
Transitions4:53
In this lecture, you will add nice transitions to HTML elements: you will make them change their dimensions and apply 2D or 3D transforms for a specific duration.
Animations8:57
In this lecture, you will create nice animations on your webpage using the CSS animation property. We will animate a div by moving it following a nice rectangular route and changing its colour on the way.
CSS3 Quiz

Project Introduction: Mathematics Tutorials Website (HTML & CSS)2:23
In this lecture, you will get introduced to the awesome features of the Website you are about to build.
Header (1)17:46
In this lecture, you will build the header section of your website using HTML and style using CSS.
Header (2)16:42
In this lecture, you will build the header section of your website using HTML and style using CSS.
Menu18:22
In this lecture, you will create the website menu and decorate it.
Introduction Box7:03
In this lecture, you will create the introduction box and style it.
Sidebars (1)19:46
In this lecture, you will add sidebars and fill them with lists and use CSS to style them.
Sidebars (2)8:38
In this lecture, you will add sidebars and fill them with lists and use CSS to style them.
Footer & Congratulations10:17
In this lecture, you will add a footer to your website and finish the project by checking your website's XHTML compliance online.
Mathematics Tutorial Website Quiz
Maths Website Source Code8:00
This file contains the full source code of the project.

Flexbox: Introduction3:46
Master flexbox, the flexible box layout module, to center content horizontally and vertically, build responsive layouts with flexible items, and use a single line of code.
Flexbox: Basic Flexbox15:48
Learn to build a basic flexbox container with flexible items, using border box sizing, wrap and wrap-reverse, and flex-direction controls (row, row-reverse, column, column-reverse) to create layouts.
Flexbox: Align flex items15:40
Master aligning flex items inside rows or columns using justify-content and align-items. Use values like center, flex-start, flex-end, space-between, and space-around, and observe row reverse effects.
Flexbox: Align flex lines7:16
Learn how to align rows and columns inside a flexbox using align-items and align-content, applying stretch, flex-start, flex-end, center, space-between, and space-around for responsive layouts.
Flexbox: Resize flex items (1)19:10
Learn how to resize flex items in a flex container using flex grow, flex basis, and flex shrink, and how wrapping, min-width, and remaining space affect item sizes.
Flexbox: Resize flex items (2)14:47
Master resizing flex items with concise flex shorthand, exploring auto and minimum content widths, and controlling growth, shrink, and basis using unitless, percentage, and three-value syntax.
Flexbox Application: Photo Gallery (1)9:36
Build a fully responsive picture gallery with flexbox, where the container width controls the number of columns, and apply equal flex values to each column.
Flexbox Application: Photo Gallery (2)12:10
Explore how flexbox organizes a responsive photo gallery by wrapping columns, sizing images to 100% of their container, and using minimum widths to control column counts.
Flexbox Application: Amazon Checkout (1)19:26
Learn to convert a simple form into a responsive flexbox layout that adapts to browser width, with a comments panel and a submit button that stays at the bottom.
Flexbox Application: Amazon Checkout (2)17:54
Build a flexbox-based checkout form by structuring address, shipping, and payments sections, aligning labels and inputs, and using nth-child and order to control element order.
Flexbox Application: Amazon Checkout (3)11:00
Turn the comments section into a column flex container, set the text area to flex: 1, and style inputs and the submit button for a responsive, full-width form.
Flexbox Application: Maths Website (1)13:25
Convert HTML5 and CSS3 sites into fully responsive layouts using flexbox, wrapping search boxes, centering content, and stacking menus and sidebars for any screen size.
Flexbox Application: Maths Website (2)10:44
Build a responsive menu with Flexbox, convert links to flex items, wrap on small screens, and switch to a vertical layout via a media query while refining alignment and spacing.
Flexbox Application: Maths Website (3)13:01
Create a responsive two-sidebar layout with flexbox, wrapping sidebars in a flex container and using wrappers at 50% width with padding; set the footer to the bottom with margin-top auto.
CSS Grid: Introduction & Basic Grid Template19:14
Explore how the CSS grid layout creates two-dimensional page structures by defining rows and columns with grid template, fr units, minmax, and repeat, plus auto-fill versus auto-fit and gutters.
CSS Grid: Implicit vs Explicit Grid7:46
Explains explicit versus implicit CSS grids, shows how extra rows auto adjust height, demonstrates grid auto flow to grow rows or columns, and how to size new cells.
CSS Grid: Grid areas & Responsive design14:35
Build an advanced CSS grid using grid areas to let items span multiple cells, then adapt layouts with media queries for responsive design across desktop and mobile.
CSS Grid: Master the "grid-column" property7:54
Learn to convert a simple form into a two-column grid layout using CSS Grid, name columns, align labels and inputs with grid-column, and make the submit button span two columns.
CSS Grid: Grid Coordinates16:51
Discover how to place grid items with coordinates in a grid container using grid row start, grid column start, and end points, including span and named areas.
CSS Grid: Align Grid items12:55
Learn to align grid items vertically and horizontally in css grid, using align items, justify items, and place items, plus align content, justify content, and place content to center grid.
CSS Grid Application: Photo Gallery8:58
Create a responsive photo gallery with a css grid container that auto fills columns using minmax and repeat, adjusts to screen width without media queries, and centers images with gaps.
CSS Grid Application: Picture Grid9:17
Explore building a four-by-four CSS grid to arrange images, with a center image spanning two columns and rows, using grid container, grid gap, and align-items center.
Sass: Introduction - Installation - Nesting Syntax19:39
Explore Sass, a CSS preprocessor that compiles to CSS, enabling variables and nesting; install node-sass with Node and npm, and use watch mode to auto-compile.
Sass: .scss vs .sass - Variables14:23
Learn the differences between scss and sass syntax, declare and reuse variables, and apply nesting with ampersand selectors to style hover and active states in a responsive layout.
Sass: @import & @extend directives16:33
Explore how sass import consolidates styles into a single style.css and organize projects into base, pages, utils, components, and layout, using extend for shared button styles.
Sass: Mixins - Operators - Functions19:57

Introduction8:56
In this lecture, you will get introduced to JavaScript and the different powerful features it adds to your websites. You will create a nice webpage with an alert message showing up on page load.
JavaScript Chapter: Roadmap and Full Source Code44:00
Please make sure you download this file before you move to the next lectures of this chapter. It will show you the structure of the current chapter and provide you with the necessary source code that will make your learning experience easier and faster.
Buttons7:04
In this lecture, we will create two buttons and write JavaScript code that responds to clicking on the buttons. For the first button we will write code inside the button tag. For the second one we will write code inside the script element.
Change HTML Content7:02
In this lecture, we will learn how to change HTML content following an event like clicking or double clicking on a button.
Change HTML Style5:51
In this lecture, we will learn how to change HTML Style like font-size or font-family following an event like clicking or double clicking on a button.
Variables and Data Types11:38
In this lecture, we will use get introduced to variables which are simple containers which store data like a number or string. We will also get introduced to the different types of variables.
Change HTML Using Variables - Activity: Random Color Generator10:44
In this lecture, we will change HTML content using variables. This time we will apply our skills to create a random color generator that will affect a random new color to a div whenever we click on a button.
Functions: Activity: Swap the content of two divs13:56
In this lecture, we will get introduced to the function concept which will save a lot while coding. We will use our knowledge to create a function that will swap the content of two divs whenever we click on a button.
Objects9:23
In this lecture, we will dive into some JavaScript object oriented concepts: We will get introduced to objects and create our first object using a simple syntax.
Create Objects using the "new" keyword4:41
This time we will create an object using the new key word.
Object Contructors16:41
This time we will create an object using another way: we will use a constructor which is a function we will define first which shows the different properties and methods of a prototype, then we will use this function to construct objects.
Arrays17:45
In this lecture, we will learn arrays which will help store multiple variables inside one variable: the array.
If and Switch Statements - Activity: Motorway Speed Control17:23
In this lecture, we will learn the “if and switch statements “which will tell the browser to do certain things based on certain conditions. We will use our knowledge to build a motorway speed control telling us if we are over speeding, going too slow or driving at a good speed based on our speedometer!
For Loops9:23
In this lecture, we will learn for loops, which will help us execute the same piece of code over and over without having to repeat the code at all.
While Loops - Activity: Spend $1000 Randomly in a marketplace11:07
In this lecture, we will learn while loops, which will help us execute the same piece of code over and over while a certain condition is true. We will use our knowledge to build an application spending randomly 1000$ in marketplace, we will be spending and spending while the condition “we still have money” is true!
Regular Expressions16:17
In this lecture, we will learn regular expressions which are usually used to check a certain user input against a certain criteria like including at least one digit.
Errors (1)3:42
In this lecture, we will show JavaScript errors to our user in a user friendly way.
Errors (2) - Activity: Password Validation12:48
We will apply our skills to create a password validation example where we require the password to include at least 6 characters, one number and one capital letter. If there is an error, we show the user a user friendly message on the screen.
Set Interval & SeTimeout - Activity: Create a simple counter10:23
In this lecture, we will get introduced to timing function like setInterval which will execute the same piece of code each time a specified number of milliseconds has elapsed. We will use this function to create a counter.
Window and Screen13:02
In this lecture, we will learn how to access the with and height properties of the user browser or device screen. We will use our knowledge to build a webpage with 4 equal colourful divs.
Alert Boxes7:45
In this lecture, we will learn confirmation boxes which are used to make the user accept or refuse a certain action. We also cover prompt boxes which ask the user some information like their name for example.
Cookies6:20
In this lecture, we will learn how to set cookies using JavaScript. (We will also cover cookies later in the PHP chapter)
Javascript Quiz

Project Introduction: Maths Game (HTML, CSS & JavaScript)2:27
In this lecture, we will get introduced to the awesome features of the website we are about to build.
Page Structure & Styling (1)19:58
In this lecture we will build the skeleton and styling of our Website.
Page Structure & Styling (2)18:20
In this lecture we will build the skeleton and styling of our Website.
Page Structure & Styling (3)15:28
In this lecture we will build the skeleton and styling of our Website.
Page Structure & Styling (4)7:14
In this lecture we will build the skeleton and styling of our Website.
Game Logic using an illustrative flowchart3:02
In this lecture we will go through the logic of our Game using an illustrative flow chart.
JavaScript Code (1)17:22
In this lecture we will write Javascript code which will create the different functionalities our Game.
JavaScript Code (2)19:00
In this lecture we will write Javascript code which will create the different functionalities our Game.
JavaScript Code (3)17:30
In this lecture we will write Javascript code which will create the different functionalities our Game.
JavaScript Code (4) & Congratulations18:10
In this lecture we will write Javascript code which will create the different functionalities our Game.
Maths Game Quiz
Math Game Source Code11:00
This file contains the full source code of the project.

Introduction and Loading JQuery9:03
In this lecture, we will get introduced to the amazing features of JQuery which will make our JavaScript coding a lot easier. We will build a webpage and embed jQuery to it.
JQuery Chapter: Roadmap and Full Source Code1:28:00
Please make sure you download this file before you move to the next lectures of this chapter. It will show you the structure of the current chapter and provide you with the necessary source code that will make your learning experience easier and faster.
Select HTML Elements (1)12:59
In this lecture, we will learn how to use jQuery syntax to select HTML elements using their HTML tag, id, class, etc.
Select HTML Elements (2)11:17
In this lecture, we will learn how to use jQuery syntax to select HTML elements using their HTML tag, id, class, etc.
Respond to Events12:07
In this lecture, we will learn how to use jQuery to respond to events like clicking on a button or hover on an element.
Change HTML Content and Attributes (1)11:47
In this lecture we will learn how to use jQuery to change HTML elements content and attributes
Change HTML Content and Attributes (2)7:11
Master how to add text to existing HTML elements by appending, prepending, and inserting text using the after and before methods, triggered by button clicks using element IDs.
Change Styling (1)11:49
In this lecture we will learn how to use jQuery to change HTML Styling: we will learn how to change properties like the width of an element. Also we will learn how to add a class or remove a class.
Change Styling (2) - Activity: Random Position and Color Generator13:59
We will apply our skills to create a random position and color generator: Our application will make a div reposition itself randomly and get a new random color every time it is clicked.
JQuery Effects14:44
In this lecture, we learn how to add jQuery effects like fading out or fading in elements, creating animations with a specified duration or creating a delay before a certain action takes place.
Ajax13:00
In this lecture, we will learn Ajax and use it to exchange data between our website and external resources, and update our page with received data without reloading the page.
JQuery UI Introduction8:09
In this lecture, we will get introduced to jQuery UI and the different powerful features it offers for web developers.
Draggable and Droppable (1) - Activity: Leave me alone! Please drop me!19:05
In this lecture, we will learn how to make HTML elements draggable. We will apply our knowledge by creating a funny draggable box which will get random colours continuously while being dragged and also display text like “drop me” or “leave me alone”. Once it is dropped it goes back to its original location and displays: “Finally”
Draggable and Droppable (2) - Activity: Drag Items to your basket10:09
In this lecture, we will learn how to make a certain element droppable. We will apply our knowledge to drag items to a box and copy a clone of these items inside our box.
Resizable9:20
In this lecture, we will learn how to make elements resizable using jQuery UI.
Selectable - Activity: Append selected Car Makes to a Box9:47
In this lecture, we will learn how to make elements selectable using jQuery UI. We will apply our skills by create an application where once we select one or multiple selectable Car Makes, they get appended to a box.
Sortable - Activity: Sort and exchange Car Makes between two groups9:03
In this lecture, we will learn how to make list elements sortable. We will apply our knowledge by creating two lists of sortable Car Makes that we can sort and exchange using drag and drop.
Accordion - Activity: Create a resizable accordion with collapsible sections10:04
In this lecture, we will learn how to create accordions using jQuery UI. We will apply our knowledge to create a resizable accordion with collapsible sections.
Autocomplete - Activity: City Input with prepopulated options7:12
In this lecture, we will learn how to create inputs with prepopulated data using jQuery UI.
Button13:16
In this lecture, we will learn how to create and style buttons and checkboxes, add icons … using jQuery UI.
Date Picker - Activity: Outbound and return Flight Date Picker just like Expedia13:56
In this lecture, we will use the date picker feature of jQuery UI, to create data inputs helping the user with a calendar. We will then practise our knowledge by creating an Outbound and return Flight Date Picker just like Expedia.com. We will write code to make sure that our return flight date is after our Outbound flight date.
Dialog - Activity: Are you sure you want to go to the previous page?13:58
In this lecture, we will learn the dialog feature of jQuery UI. We will apply our knowledge by creating a nice dialog box, asking us if we want to go the previous page or cancel.
Menu6:05
In this lecture, we will create a nice styled menu using jQuery UI. We will create another menu with headers in it.
Progress Bar - Activity: Animated progress bar filled from 0% to 100%10:50
In this lecture, we will get introduced to jQuery UI progress bar feature, and we will use our knowledge to build a nice Animated progress bar filled from 0% to 100%.
Select Menu7:46
In this lecture, we learn jQuery UI select menus. We will create one styled menu, and another menu with headers in it.
Slider - Activity: Car Mileage Range using a Slider17:54
In this lecture, we learn jQuery UI sliders. We will apply our skills by create a slider that we can use to select a car mileage range with a step of 1000 miles ranging from 0 to 100000 miles.
More Widgets: Spinners, Tabs and Tooltips12:06
In this lectures, we will cover briefly other jQuery Widgets: Spinners, Tabs, Tooltips.
jQuery Quiz

Project Introduction: Fruits Slice Game (HTML, CSS & JQuery)2:01
Create a fruit slice game web page using HTML, CSS, and jQuery, where fruits drop from the sky and you slice them to score points with three misses ending game.
Page Structure and Styling12:51
Set up a fruits game project folder, copy the maths game's index and styling files, and adjust container and boxes to finalize the page structure and styling.
Game Logic using an illustrative flowchart2:58
Explains fruits game logic: start or reset, generate random fruits, move them downward, check if they fall too low, deduct trials, explode fruits by slicing, and score until game over.
jQuery Code (1)17:45
Convert the game logic into jQuery code, wiring a start/reset button, score, and three-heart lives while moving fruits and handling slices.
jQuery Code (2)21:04
Create a jQuery based fruit catching game by dynamically adding and styling fruit images, updating the reset button, and spawning random fruits from an array.
jQuery Code (3)20:08
Implement a jQuery game where fruits fall at random steps using setInterval, updating top positions, checking bounds, managing lives with hearts, and handling game over and score.
jQuery Code (4)17:51
Use jQuery to create a fruit-slicing game by hovering fruits to increase the score and update the display, play slice sounds, and trigger explode and hide animations.
Fruits Slice Game Quiz
Fruits Slice Game Source Code10:00
This file contains the full source code of the project.

Bootstrap template0:18
Introduction7:46
Discover Bootstrap, a front-end framework that enables responsive designs with pre-built styling, components, and plugins like carousels, and learn to set up Bootstrap projects and use the grid system.
Bootstrap Chapter: Roadmap and Full Source Code1:29:00
Please make sure you download this file before you move to the next lectures of this chapter. It will show you the structure of the current chapter and provide you with the necessary source code that will make your learning experience easier and faster.
Grid System9:33
Explore the Bootstrap grid system and 12-column responsive layouts, using breakpoint classes (xs, sm, md, lg) to shift from stacked to 3+9, 6+6, and 8+4 configurations.
Typography12:13
Learn to style text with Bootstrap by applying heading tags h-1 through h-6, using divs with classes, and applying text and background utilities like text-primary, text-success, and background-info.
Tables6:01
Learn to build and style tables with bootstrap using the table class, add zebra stripes, condensed padding, borders, and responsive wrappers for horizontal scrolling on small devices.
Forms (1) - Activity: Inline and Horizontal Responsive Login Forms12:23
Learn how to build and style login forms with Bootstrap, using form-control and form-group for inputs, and implementing inline and horizontal layouts with the grid system and button styling.
Forms (2)11:26
Build a form with text areas, checkboxes, radio buttons, and selects, styled with form-control, including inline displays for checkboxes and radios and disabled fields.
Forms (3)19:27
Learn to implement Bootstrap form controls with validation states: success, warning, and error using form groups, labels, input sizing, icons, and input groups for practical forms.
Buttons12:51
Learn to create and style bootstrap buttons, including link-as-button variants, button tags, and predefined classes; build button groups and toolbars, control size, width, and vertical layouts.
Images2:24
Learn to create responsive images with Bootstrap by adding a source and alt text and applying the image-responsive class for fluid sizing, then style with rounded, thumbnail, and circle options.
Navs - Activity: Website Design using Nav Tabs and Nav Pills8:47
Create bootstrap nav tabs and nav pills with icons and counters, and apply full-width, responsive behavior plus active and disabled states.
Navbars - Activity: Website Design using a responsive/collapsible navigation bar19:58
Learn to build a responsive Bootstrap navbar with a brand, toggle button, and collapsible content that adapts from full menu on large screens to a collapsible menu on smaller viewports.
Pagination - Activity: Pagination and Pager Examples like Google/Ebay8:56
Learn to implement bootstrap pagination and pager components, creating navigation with next and previous links, active states, and accessible labels for search results and product listings.
Jumbotron3:12
Build a Bootstrap jumbotron with a header, paragraphs, and a link button; style it for full width or inside a container to control layout.
Thumbnails10:00
Learn to build responsive thumbnails grids with Bootstrap, displaying pictures, headings, paragraphs, and buttons. Create rows and columns that adapt from extra small to large devices using grid classes.
Dropdown menus7:19
Build interactive dropdown menus with Bootstrap's jQuery plugins using the data API. Create a button-triggered dropdown, its menu items, headers, dividers, and accessibility attributes.
Modals (1) - Activity: I have an inquiry about my order16:14
Learn to build bootstrap modals with a trigger button and a three-part structure (header, body, footer). Implement accessibility attributes and handle show and hide events.
Modals (2) - Activity: I have an inquiry about my order7:12
Learn to store data in buttons and use it to dynamically update a modal header with the corresponding order number, using data attributes and event handling.
Scrollspy8:38
Learn to implement bootstrap scrollspy to highlight navbar links as you scroll through sections such as all products, help, and department, using data attributes and javascript to toggle active states.
Tabs14:24
Learn to build a Bootstrap tabbed interface by wiring navigation tabs to content panes with data-toggle attributes, setting an active pane, and handling events to show alerts.
Tooltips6:36
Explore creating tooltips with the Bootstrap tools plugin, applying data-toggle tooltip, placement options, and tooltip events through links and buttons.
Popovers - Activity: Create a popover just like the one you see on an IPAD6:41
Master bootstrap popovers by adding a button with data-toggle='popover' and data-content, customize trigger events like hover, and include ASML content with headers and paragraphs.
Alerts - Activity: Create an alert Box to show a warning or success message7:34
Learn to create and manage Bootstrap alert boxes for warning and success messages, with dismiss buttons and event handling to auto-hide and respond to user actions.
Button plugin - Activity: Loading … Download Complete8:50
Learn how to use the bootstrap button plugin to add loading and complete states, with data-loading-text attributes and click handlers, including a delay and queue for state resets.
Collapse plugin16:46
Learn how to use Bootstrap's collapse plugin to create collapsible content with links and buttons, and build accordions with panels and collapsible sections.
Carousels - Activity: Create an interactive carousel slider17:28
Learn to build a responsive bootstrap carousel slider with three slides, including images and captions, indicators, and left and right controls using data attributes and basic event handling.
Affix plugin - Activity: Interactive Website with Content Affixed to a Menu12:52
Explore implementing a bootstrap affix plugin to fix a left navigation to the top of the page, auto-update active sections on scroll, and build a responsive two-column layout with data-spy.
Twitter Bootstrap Quiz

Project Introduction: App Landing Page (HTML, CSS & Bootstrap)2:41
Build a responsive app landing page from scratch using HTML, CSS, and Bootstrap. Add a header with a logo, a jumbotron with a background image, and app store links.
Header and Featured Content (1)15:21
Build a header and featured content section by scaffolding a product folder, using a Bootstrap template, linking CSS, and styling a responsive jumbotron with a logo.
Header and Featured Content (2)15:49
Learn to design the featured content with Bootstrap by using a container, a nine-column feature area with a header and paragraphs, and styled action buttons with hover effects.
Header and Featured Content (3)9:01
Master responsive design by using media queries to adjust the header and featured content at breakpoints of 768, 480, and 400 pixels, changing logo and text sizes.
Trial Section, Footer & Congratulations14:03
Build a responsive landing page featuring a jumbotron background, a glass trial section with a header and images, and a footer using css and bootstrap, all adapting to any device.
App Landing Page Quiz
App Landing Page Source Code6:00
This file contains the full source code of the project.

Requirements

I will teach you everything. All you need is a computer.
There is absolutely no pre-knowledge required. This is a 100% Comprehensive Web Development Course that will take you from Zero-skills to a Cash Earning Web Developer, Step by Step with NO Step skipped.

Description

Recent Update:

Includes Flexbox, CSS Grid, SASS, Modern JS (ES6), Node.js (full project included), Git & Github, Heroku & more.

***** Save ~ $17000 compared to an in-person Bootcamp *****

***** 15 Full Professional Projects worth over 20,000$ *****

***** This is The Only Course you need to learn Web Development *****

***** Car Sharing Website (10h), Online Notes App (11h) & many more *****

***** 100 hours of Content + 40 hands on Activities + 21 Quizzes *****

***** Learn Step by Step with NO Step Skipped *****

***** The Most Comprehensive and Cost Effective in the Market *****

***** Learn and Master Over 10 Modern 2023 Technologies *****

HTML5/CSS3
JAVASCRIPT (ES5)
Modern JavaScript (ES6)
JQUERY & JQUERY UI
TWITTER BOOTSTRAP
Node.js
Git & Github
Heroku
PHP & MYSQL
WORDPRESS
AJAX
JSON
MOBILE APPS
GOOGLE MAPS APIS
FACEBOOK WIDGETS
GOOGLE PLUS WIDGETS
TWITTER WIDGETS
AND MORE!

Did you know you can go from Zero Skills to a Fully Qualified Cash Earning Web Developer in only a few weeks?

Well let me tell you: If you are looking for a truly 100% Comprehensive Web Development Course, that will take you from learning the basics to mastering the most advanced web development techniques, then be certain that you have come to the right place.

Taking this course will help you achieve your dream of becoming a professional web developer, and you will be ready to build powerful and responsive websites to a highly professional degree using today’s most advanced and up to date web technologies within a few weeks from now.

In order to guarantee the success of your learning experience, this course was divided into perfectly structured Chapters consisting of ~100 hours of crystal clear and 100% hands-on engaging lectures.

Each chapter covers one of the major web technologies and will take you from the basics to advanced skills. This is how:

You will first learn the basic concepts, and straight after that apply them in easy practical examples. Then you will easily navigate to more advanced concepts and use them to build more complex applications. Once you have finished the chapter, you will then move to a bigger challenge where you will confidently build a “Real Life Full Professional Project” using the skills you acquired in that chapter combined with previous ones.

Here are a few examples of in-chapter activities:

Embed a relaxing YouTube Video to your website (HTML)
Create an online checkout form (HTML)
Highway Speed Control (HTML & JavaScript)
Outbound and Return Flight date pickers just like the Expedia Website (HTML, CSS, jQuery & jQuery UI)
Car Mileage range using a beautiful slider (HTML, CSS, jQuery & jQuery UI)
Interactive carousel slider (HTML, CSS, jQuery & Bootstrap)
Create a responsive Contact Form (HTML, CSS, PHP & Bootstrap)
What day of the week were you born? (HTML & PHP)
Guess the date in 1000 days from now! (HTML & PHP)
Calculate the route, distance and time between New York and Toronto. (HTML, Javascript, Google Maps API’s)
Get the geographic coordinates and postcode of any address. (HTML, jQuery, Google Maps API’s, JSON)

And much more …

Following are some of the “FULL PROFESSIONAL PROJECTS” you will build throughout the course:

Mathematics Tutorials Website. (HTML5 & CSS3)
Maths Game. (HTML5, CSS3 & JavaScript)
Fruits Slice Game. (HTML5, CSS3 & jQuery)
App Landing Page. (HTML5, CSS3 & Bootstrap)
Company Website. (HTML5, CSS3 & Bootstrap)
Stopwatch App. (HTML5, CSS3, jQuery & Bootstrap)
Drawing App. (HTML5, CSS3, jQuery & jQuery UI, Canvas, HTML5 Local Storage)
Online File Explorer App. (Node.js, ES6, HTML5, CSS3, Bootstrap)(Full 5.5h project)
Online Notes App. (HTML5, CSS3, jQuery, Bootstrap, PHP & MySQL) (Full 11h project)
Highly professional Blog. (Wordpress)
Distance Between Cities Website. (HTML5. CSS3, jQuery, Google Maps)
Freedom Website with Social Widgets. (Facebook, Google+ & Twitter)
Speed Reader App for the IOS and Google Play Stores.
Fully functional Car Sharing Website. (HTML5, CSS3, jQuery, Bootstrap, PHP & MySQL, Ajax, JSON, Google Maps) (Full 10h project)

You will be so amazed at your own first-class work, and I am sure you will love to share it with the world. That’s why I will offer you "FREE WEB HOSTING" worth 200$ so that you can make your professional websites live and attract potential employers or clients. As a result you can start making money from the first week of your unique learning journey.

By the end of the course, you will have built a solid portfolio of “Over 15 Real Professional Websites, Games and Mobile Apps for The IOS and Google Stores”. This will give you a competitive edge in the web development market and boost your income as a web developer by increasing your employability or chances of being awarded lucrative projects by clients around the world.

What Students say:

"I appreciate the manner in which each project is presented, an example of an end result to which we need to build the relevant to reach the same output. It is a building block approach that works very well for me to comprehend the compartmentalisation of each component and the visualisation of the complete 'picture'. Each component is then carefully unpacked through a process of visually understanding each characteristic and applying the 'code' to create the same. Marvelous." Celia M Gaylard

"Incredible course. The content is very comprehensive and informative. 60 hours video + materials! The production quality is amazing The instructor is very interesting and engaging. Could not have asked for a better course Truly fantastic I am very very happy I invested my money and time on this course!" Klevis Merko

"Easy to understand. The best course to learn web development From the beginning. 100% good." Sayuru Sadaru

"It is simply the great course. I have learned so much by doing this course. I can now develop my own Websites, Apps. The instructor is great. He teaches everything step by step. I really liked his teaching style. The projects are great. Every project corresponds to real life. I am very happy about this course. Now I am going to by Javascript course by the sdame instructor. Thank you Sir for this great course." Tushar Marathe

"Wow! There is a TON of information here. The instructor goes deep enough into each topic so that you can understand the concepts and start coding on your own. I only had a little background in HTML when I started but have been able to keep up by pausing the videos when needed. I'm only 31% through but I already know this course is exactly what I was looking for. Can't wait to finish! I highly recommend it to anyone just starting out in Web Development." Peter Burt

"One of the best web development courses in Udemy!" Edem Dumenu

"The instructor responded to my questions in a timely manner. He took his time explaining every details of the subject matter. The course also serve as a great template to follow for new web developer who are trying to put together their portfolio." Jerome Smith

"I am loving this course. Your explanations and examples are pretty good and clear. A good course for a beginner as well as experienced. Can't ask for more on such a low price. And the instructor is very friendly and helpful." Pradeep Gupta

So, what are you waiting for? Enrol today and let's start an exciting journey together!

Who this course is for:

This Course is for people with no web development knowledge or experience.
This Course is also for people with web development knowledge, but wanting to learn new skills and enrich their portfolio with 15 Highly professional Interactive Websites, Games and Mobile Apps.

The Complete Web Development Course - Build 15 Projects

What you'll learn

Explore related topics

Course content

Introduction - Get your free Unlimited Web Hosting - HTML30 lectures • 3hr 9min

CSS29 lectures • 3hr 15min

Professional Project: Mathematics Tutorials Website (HTML5 & CSS3)9 lectures • 1hr 49min

Advanced CSS with Flexbox, Grid & SASS26 lectures • 5hr 52min

Javascript22 lectures • 4hr 26min

Professional Project: Maths Game (HTML, CSS & JavaScript)11 lectures • 2hr 30min

jQuery27 lectures • 6hr 25min

Professional Project: Fruits Slice Game (HTML, CSS & JQuery)8 lectures • 1hr 45min

Twitter Bootstrap28 lectures • 6hr 5min

Professional Project: App Landing Page (HTML, CSS & Bootstrap)6 lectures • 1hr 3min

Requirements

Description

Who this course is for: