The Ultimate Web Development Course

Learn ALL the major web development technologies in one working project: HTML, CSS, MySQL, PHP, jQuery and AJAX
42 reviews
TAUGHT BY
  • Dr Richard Stibbard Web Developer and Online Educator

    I have been working in web development since 2006, building custom database-driven websites from scratch, as well as customizing Moodle sites. Before that, I was a lecturer at the University of Surrey, where I specialized in distance education through the online learning platform WebCT Vista (later Blackboard).

    I thus bring to Udemy a wealth of expertise not just in the technical aspects of the course, but also the educational side of online learning. My aim is to deliver courses of supreme clarity which are suitable for a range of learners, and which make learning a pleasure for all my students.

WHAT'S INSIDE
  • Lifetime access to 134 lectures and 3 quizzes
  • 11+ hours of high quality content
  • A community of 6000+ students learning together!
SHARE

The Ultimate Web Development Course

Learn ALL the major web development technologies in one working project: HTML, CSS, MySQL, PHP, jQuery and AJAX
42 reviews

HOW UDEMY WORKS?

Discover courses made by experts from around the world.

Take your courses with you and learn anytime, anywhere.

Learn and practice real-world skills and achieve your goals.

COURSE DESCRIPTION

"This has been one of the best web courses ever. It should be used as a model by almost anyone thinking of teaching on the web. It has cleared out nearly a decade of web programming cobwebs. The fact you have made a course which is complete end-to-end is impressive. The fact that code examples all work puts nearly every programming book and most web courses to shame." Paul Wolfson, Principal Investigator, Dallas Legal Technology


Taught by freelance developer and experienced online educator Dr. Richard Stibbard, this course takes you in easy steps through the entire process of building an up-to-date web interface which updates its database and HTML on the fly without the need for page refreshes, rather like the ‘Add to Favourites’ function on Youtube or Trivago’s hotel search.

Along the way you will learn how to:

  • structure a website using HTML5
  • apply styling with cascading stylesheets (CSS)
  • convert a static site to a dynamic one using PHP
  • remove inefficient duplicate code
  • use PHP functions to isolate variables
  • use MySQLi and prepared statements for secure database queries
  • manipulate page content immediately with jQuery
  • update the database silently with AJAX
  • upload the project to a web host and deal with important security considerations.
  • PDF version of the course allows full-text search

The course is equally suitable for beginners or more advanced students. For beginners there are step-by-step instructions which take you through every step of the project until all the principles have been covered, and then hand over to assignments which allow you to put into practice what you have learned before you see the solutions.

For learners already familiar with some aspects of web design and development who want to move onto specific points more quickly, incremental working files and clear guidance are provided at every stage, allowing you to skip lessons you do not need and rejoin the course at any point without losing track of the necessary code.

With studio quality audio, widescreen HD video, and incremental versions of the source code, this efficiently organized course teaches up-to-date coding techniques and gives comprehensive coverage of an important aspect of modern web development.

    • A computer connected to the internet
    • The ability/permission to download software
    • A text editor (I recommend Komodo Edit, which is free)
    • Enthusiasm!
    • Over 134 lectures and 11.5 hours of content!
    • Flexible course design allows for complete beginners or more advanced learners
    • Learn HTML5, CSS, MySQL, PHP, jQuery and AJAX in one working project
    • Up-to-date coding standards using mysqli and prepared statements to ensure database security
    • Instant update website - the most modern web interface
    • Detailed coverage of programming logic and dynamic website coding processes
    • Accompanying FREE PDF or Kindle book allows full-text search of the course
    • Anyone interested in web design and development
    • No prior knowledge needed

THE UDEMY GUARANTEE

30 day money back guarantee
Lifetime access
Available on Desktop, iOs and Android
Certificate of completion

CURRICULUM

  • SECTION 1:
    Course Introduction
  • 1
    Introduction
    07:20

    Build an instant update database interface with jQuery/AJAX

  • 2
    Working Files, eBook and Bookmarks
    Text


  • SECTION 2:
    Komodo Text Editor
  • 3
    Introducing Komodo Edit
    02:06
    Komodo Edit is an excellent code editor with many useful features such as intelligent code completion.

    This chapter takes you through the process of downloading and installing Komodo Edit, which I use because I like its code completion and syntax highlighting features as well as its preview pane.

    If you already have a code editor you like, then feel free to skip this chapter and use your preferred editor for the project.
  • 4
    Download Komodo Edit
    01:37

    Download Komodo Edit from http://komodoide.com/komodo-edit/

  • 5
    Configure Komodo Edit
    03:54
    Setting up Komodo Edit with my custom syntax highlighting scheme for more vivid syntax highlighting than the default scheme.
  • SECTION 3:
    Local Webserver Installation
  • 6
    Introducing XAMPP
    02:41

    XAMPP is the most popular local webserver package and has versions for Windows, Mac OS, Linux and Solaris.

  • 7
    Download and Install XAMPP
    05:51

    Step-by-step instructions on downloading and installing XAMPP on a Windows PC.

    If you get the error message:

    Apache shutdown unexpectedly. This may be due to a blocked port, missing dependencies, improper privileges, a crash, or a shutdown by another method. Press the Logs button to view error logs and check the Windows Event Viewer for more clues

    then another program, most commonly Skype, is blocking port 80.

    Carry out the following steps to solve the problem:

    1. Start Skype, go to Tools > Options > Advanced > Connection and uncheck “Use port 80 and 443 as alternatives for incoming connections”.
    2. Shut down Skype.
    3. Start up the XAMPP control panel by clicking on c:\xampp\xampp-control.exe.
    4. Check the boxes to set both Apache and MySQL as services.
    5. Restart Windows.

    If this does not work, or you do not have Skype installed, carry out the folllowing steps:

    1. Start the XAMPP control panel by clicking on c:\xampp\xampp-control.exe.
    2. Cick on the ‘Config’ button next to Apache and select ‘httpd.conf’ to open the config file in a text editor.
    3. In ‘httpd.conf’, find the line ‘Listen 80′ and change the number to another number, e.g. 86.
    4. In XAMPP control panel, click ‘Stop’ next to Apache, wait for the button to change to ‘Start’ and then click it to restart Apache.
    5. Check the boxes to set both Apache and MySQL as services.

    Apache and MySQL should now start automatically and without conflicts.

  • 8
    Change Server Timezone
    02:19

    The timezone for the Apache server is set by default to Berlin time. In this lesson we use the XAMPP Control Panel to change it to your local timezone.

  • 9
    XAMPP Tools and phpMyAdmin
    01:12
    A look at the XAMPP tools and phpMyAdmin. We will use phpMyAdmin much more later on in the course.
  • SECTION 4:
    Bare Bones HTML5
  • 10
    Introducing HTML5
    04:44
    An introduction to some of the new semantic elements in HTML5.
  • 11
    Bare bones HTML - Movies List Page
    12:20
    Writing the document structure for our index file, the movies list page.
  • 12
    Bare Bones HTML - Single Movie Page
    02:18

    Writing the HTML document structure for the single movie page.

  • 13
    Bare Bones HTML - Admin Page
    05:26

    Writing the HTML document structure for the generic admin page.

  • 14
    Test your HTML
    3 questions
  • SECTION 5:
    Styling with CSS
  • 15
    Introduction to Styling with CSS
    05:33
  • 16
    CSS Reset
    04:39
    Before we begin styling, we need to strip out all default styles using a CSS reset stylesheet.
  • 17
    Styling with Classes and IDs
    04:00

    We use classes and IDs to distinguish HTML elements for styling and functional purposes respectively.

  • 18
    Applying Classes to index.html
    06:51
    We add class names to index.html to distinguish the various parts of the page for later styling.
  • 19
    Box Layout
    10:56
    We write the styles to create the basic box layout for index.html.
  • 20
    HTML-shiv for IE8
    05:35
    Internet Explorer versions 8 and below does not support the new HTML5 elements and garbles our box layout. We solve this by using two scripts, html5-shiv and html5-printshiv.
  • 21
    Styling the header and top navigation
    12:33
    Adding the styles for the header and the users and admin navigation lists.
  • 22
    Styling the favourites and movie list panel
    13:04
    Adding the styles for the favourites and movie list panel
  • 23
    Styling the footer
    05:32

    Adding the styles for the footer.

  • 24
    Styling the single movie page
    08:19
    Adding the styles for the single movies page. This time you write the style selectors before I give them to you.
  • 25
    Styling the admin pages
    20:34
    The style selectors for the admin pages - you write the selectors and try to write as many of the style declarations as you can before I give you the answers.
  • 26
    Creating background images with a CSS sprite
    09:17
    Using a CSS sprite for all or nearly all the background images in a website speeds up page loading by reducing the number of HTTP requests and allowing browsers to used access the image from the cache.
  • 27
    Cross-browser compatibility check
    01:37
    Before going on we need to check that the web pages we have written display properly in the various different browsers. I develop in Firefox and check in Opera, Chrome, Safari, and IE 10, 9 and 8.
  • 28
    Validate HTML
    01:31
  • 29
    Test your CSS
    3 questions
  • SECTION 6:
    Essential PHP
  • 30
    Introduction to PHP
    02:02

    ‘PHP’ stands for ‘PHP – Hypertext Pre-processor’. Ordinary HTML provides the static framework of a website while PHP gets data from a database to provide dynamic, ever-changing, content.

  • 31
    Combining PHP and HTML to display strings, variables, and HTML tags
    14:45
    PHP is desgined to work in combination with HTML. This video demonstrates various ways in which the two can be combined to display strings, variables, and HTML tags.
  • 32
    Echoing quote marks - String delimiters
    04:49
    Sometimes quote marks are themselves part of the string we want to display. We then need to escape these characters so they do not interfere with the syntax of our PHP code.
  • 33
    PHP Conditions
    06:14
    Conditions are at the heart of all computer programs - they allow our code to do entirely different things depending on the data received.
  • 34
    Switch ... case
    02:37
    'Switch' is an alternative to 'if' clauses when there are multiple values to check.
  • 35
    PHP Loops
    04:32
    Many programming tasks involve large amounts of repetition, which computers perform well, while humans do not.
  • 36
    PHP Includes
    07:50
    Including files within a "parent" file makes our code much more efficient and easier to manage.
  • 37
    Arrays
    21:27

    Arrays are a type of variable which contains sets of multiple values in a structured list, allowing us to organise related collections of data.

  • 38
    Passing variables in the URL
    06:09
    How to get user input passed in the browser address bar.
  • 39
    Passing variables without their appearing in the URL
    04:54
    User input can also be passed less pubicly so that it does not appear in the browser address bar.
  • 40
    Guarding against missing variables
    04:14
    Making sure our program fails gracefully if user input is missing.
  • 41
    Functions and variable scope
    04:27

    We use functions to keep our variables from getting out of control.

  • 42
    Passing data to functions with parameters
    05:20
    Using parameters to pass data into functions.
  • 43
    Test your PHP
    4 questions
  • SECTION 7:
    MySQL in phpMyAdmin
  • 44
    What is a Database
    06:44

    A database  is a structured collection of records, organised in tables, each record consisting of a number of fields. Relational databases use linking tables to make links between tables without duplication of data.

  • 45
    Create a database, add tables
    06:15

    Using phpMyAdmin to create a new database and add tables to it.

  • 46
    Insert data
    09:11
    The SQL INSERT query.
  • 47
    Import data
    04:38
    How to import data from an external SQL file to a database using phpMyAdmin.
  • 48
    Select records
    04:30

    Using SQL queries in phpMyAdmin to display records from a database table.

  • 49
    Update existing database records
    02:25

    The SQL query in phpMyAdmin to update an existing record in the database.

  • 50
    Select favourites
    04:09
    The more complex SQL select query we will later use to select favourite movies based on two criteria.
  • 51
    Delete records, empty and delete tables and database
    03:35
    The SQL query DELETE FROM.
  • SECTION 8:
    MySQL in PHP
  • 52
    Initialise and connect to a database with mysqli
    13:33
    Connecting to a MySQL database in a PHP script.
  • 53
    Select all records from a database
    06:58

    How to return all the records from a database using SQL embedded in PHP.

    If you get the error "Call to a member function on a non-object", then there is a mismtach between the database column names you have supplied in the PHP and those you have actually used in the table. Double check that you have not, for instance named a column `first_name` when it should be `firstname`.

    Backticks (` `), for which the key on a UK/US keyboard is at the top left next to the key for '1', can be used to enclose column names if there is a danger that you have used MySQL reserved words to name database columns. To do so is not good practice and should be avoided. As long as your database column names have no special meaning in MySQL, you do not need to enclose them in backticks.

  • 54
    Select matching records using WHERE ... AND
    04:11
    How to display database records which match a pattern supplied by the user.
  • 55
    SQL injection demonstrated
    02:48
    This lesson demonstrates how to display all the data from a database without any valid login credentials. This is done by entering a snippet of PHP code into a login form in such a way that the logic of the SQL query is altered.
  • 56
    Combating SQL injection with mysqli real_escape_string
    02:25
    SQL injection can be prevented by escaping user input so that it is impossible to tamper with the logic of the SQL query.
  • 57
    Combating SQL injection with prepared statements
    07:13
    A better way to prevent SQL injection is to use prepared statements, which prevents user input from interfering with the SQL query.
  • 58
    Add data through PHP interface
    03:50
    Making use of code written earlier, we build a simple PHP interface to add data to the database.
  • 59
    Delete data through PHP interface
    04:16
    You adapt the code from the previous lesson to DELETE instead of INSERTing data.
  • SECTION 9:
    From static HTML to dynamic PHP
  • 60
    Introduction to Section 9 - PHP
    01:48
    Follow the lessons for this chapter in as much detail as you feel you need - after a while you may want to skip ahead using the Working Files if you find I am going too slowly.

    I recommend that you complete all the four assignments yourself, however, to check on and reinforce your learning.
  • 61
    Efficient, reusable code with PHP includes
    09:38
    Duplicated code is inefficient and difficult to manage. In this lesson we move all duplicated code to included files which means they can be re-used throughout the whole project and any edits made in them take effect across the whole site.
  • 62
    One index file for single movie and movies list
    09:06

    Using PHP includes we create a single parent page which generates either a single movie or a list of movies according to whether a movie is chosen in the URL.

  • 63
    One admin file for users and movies admin
    06:36
    Using the same principle, we create a single parent page which generates both the movies and the users admin pages.
  • 64
    Initialise and connect to the favourite movies database
    02:53
    Reusing code from the previous chapter, we connect to the 'movies' database.
  • 65
    Displaying dynamic data - the list of users
    09:21
    In the navigation include file, we replace dummy links with the list of movie-goers drawn from the database.
  • 66
    Convert users list to function
    10:19
    As the values of variables set in include files are available everywhere in the project, variable conflicts can occur. Using functions solves this problem.
  • 67
    Set include paths in parent files
    02:11

    Setting include paths in the parent files, index.php and admin.php, obviates the need to specify the path names of include files and functions.

  • 68
    User navigation - test if valid user set
    06:09
    This function tests whether a valid user_id is set in the URL and returns a code accordingly.
  • 69
    Set parameters for show users function
    03:42
    We pass the code returned by the test users function to the show users function, making it possible to display different user lists according to whether or not a user_id is selected.
  • 70
    Parameterised show users function
    08:18
    Parameters set in navigation.inc.php tell show-users.fn.php which sets of movie-goer data to display to form the complete user navigation menu.
  • 71
    Catching missing and invalid user_id
    04:57
    The program alerts the user i</b>n the event that a user id is not entered, or one is entered which does not match any records, or a non-numerical id is given.
  • 72
    ASSIGNMENT: Write the favourite movies display function
    1 page
    Your first major assignment - apply your knowledge to write the code to display the list of favourite movies as a formatted list.
  • 73
    The favourite movies display function
    07:36
    The answer to the assignment - the code for the favourite movies display function.
  • 74
    ASSIGNMENT: Write the non-favourites display function
    1 page
    Adapt the code you have just written, and combine it with the plain HTML from earlier, to produce the main list of non-favourites with thumbnail images and formatting.
  • 75
    The non-favourite movies display
    07:26
    Following the same procedures, we go through the process of building the non-favourites list.
  • 76
    Insert personal greeting on movie list page
    02:39
    Inserting a personal greeting is a simple matter of adding a new 'case' to the showUsers() function.
  • 77
    The single movie display
    02:04
    The showMovies() function is adapted to display the single movie page.
  • 78
    Catching missing and invalid user input - movie_id
    06:44
    The principles used to catch errors in the user_id input are applied to the movie_id.
  • 79
    Catching empty movie-goers table
    05:31
    We need to complete our error catching by coping with the possibility that database tables are empty. In this lesson we display an alert message and the movie-goers admin page if there is no data in the movie-goers table.
  • 80
    ASSIGNMENT - Catching empty movies table
    1 page
    Adapt the code we have just written to produce an alert message and display the movies admin page if the movies database table is empty.
  • 81
    Catching empty movies table
    03:14
    Applying the methods used earlier, we catch for the possibility of an empty movies database table.
  • 82
    Data-dependent title for favourites list
    04:48
    It is a simple task to produce a custom title for the Favourites list when the list is empty.
  • 83
    Data-dependent welcome in movie list display
    03:47
    Following the same procedure, add a different message at the top of the list of movies according to whether there are any movies in the list or not.
  • 84
    Data-dependent link on single movie page
    03:32
    We need a new function to check whether or not the selected movie is a favourite of the selected user and display the appropriate link, "Add to favourites" or "Remove from favourites". You have done everything you need to write this function.
  • 85
    ASSIGNMENT – Putting dynamic data into the movie admin table
    1 page
  • 86
    Dynamic data in movies admin table
    02:57

    Change dummy data in the movies admin table to dynamic data.

  • 87
    Dynamic data in users admin table
    04:02
    Change dummy data in the movie-goers admin table to dynamic data.
  • 88
    Check again for cross-browser compatibility
    01:24
    Re-check the pages in the various browsers.
  • 89
    Validate HTML
    02:00
    Re-check our HTML at the W3C validation service.
  • 90
    Format HTML source
    12:15
  • SECTION 10:
    Essential jQuery and AJAX
  • 91
    Introduction to jQuery
    04:56
    A brief introduction to jQuery and the link to jQuery at Google CDN.
  • 92
    Install Firebug
    01:06

    If you already have Firebug installed in Firefox, skip this lesson. Otherwise, install Firebug from www.getfirebug.com.

  • 93
    Basic jQuery syntax
    04:44
    Basic jQuery syntax: selector - event - action.
  • 94
    The $(this) selector
    02:13
    If the selector for the event and the selector for the action are the same, use $(this) for the action instead of repeating the selector name.
  • 95
    Add/remove class and the dynamic event handler 'on'
    04:21

    To target elements just added by jQuery we have to use the event handler ‘on’: $(document).on('event', 'selector', function()

  • 96
    Retrieving and using HTML attributes
    09:55
    Retrieve attributes from HTML IDs and use them to set variables in jQuery to target unique page items.
  • 97
    One-way drag-and-drop effect using jQuery UI
    06:50
    Our project features a one-way drag-and-drop interface - the user drags movie titles from the favourites list to the trashcan to remove them from favourites. This lesson shows how to build a simplified version of the visual effect for this.
  • 98
    AJAX - Update database in the background with no page refresh
    11:14

    JQuery alone does nothing to the database – to alter database records we must use a PHP script and pass variables to it using an AJAX call.

  • 99
    ASSIGNMENT - The drag-to-delete AJAX call and PHP script
    1 page
  • 100
    The drag-to-delete AJAX call and PHP script
    08:10

    Adapting the click-to-add AJAX call to make the drag-to-delete equivalent appears simple, but there are two problems to be overcome: enabling jQuery on newly added DOM elements and preventing event-bubbling.

  • SECTION 11:
    jQuery effects and AJAX interaction
  • 101
    Adapt JQuery for project
    07:06
    A few minor changes to the style selectors are needed to adapt our Javascript files to work in the project.
  • 102
    Toggle background image on mouseover
    02:02
    The jQuery class manipulator toggleClass() allows us to switch a class attribute on and off as the mouse moves over and off a page element. We use this for the heart icon on the click-to-add div.
  • 103
    The click-to-add interface
    07:05
    Adapt add-favs.js to work with the HTML of the project.

UDEMY BY THE NUMBERS

5,200,000
Hours of video content
19,000,000
Course Enrollments
5,700,000
Students

RATING

  • 39
  • 2
  • 0
  • 0
  • 1
AVERAGE RATING
NUMBER OF RATINGS
42

REVIEWS

  • Donald Brummel
    Solid Full Stack Development course

    I have been writing code for over 20 years, but over the last decade fell into specialized roles using MS-SQL, and my broader toolkit, especially web development, has become dated. I have been through numerous other books and courses trying to get up to speed on CSS, JQuery, Ajax, and PHP, and so far this is the most effective. I think there are two keys to it's success. First, the app developed throughout the course is reasonably complex and whether its a particular look in CSS or behaviour in jQuery, it accurately reflects what modern apps really look like. Next, there is enough hands on coding in all the tools that it really begins to stick. HIghly recommended for anyone wanting broad introduction to modern web development that really touches almost all the bases.

  • Phil
    I highly recommend this course

    The material and method of instruction contained in this course is clear concise and informative. It shakes away the cobwebs of confusion which inherently accompany web design and coding theories and cuts right to the chase. Brilliant!

  • Edmond Saint-Jean
    Pacing is an art.

    This course takes you directly into the heart of web development. The instructor is systematic, engaging and well prepared. The pacing reflects an educator who knows his crafts, and has the art to guide and maintain a student's interest throughout the length of the course.

  • Mark Gallucci
    Excellent program

    Well-produced and organized—or beginnners or for those with some experience who are looking to take it to a higher level, I definitely recommend this program!

  • Jeff Scott
    The Ultimate Web Development Course

    The Ultimate Web Development Course from Dr. Richard Stibbard continues the excellence in education provided by Udemy.com This course takes the user from novice to full-fledged "pro". Over the 130+ lessons, Dr. Skibbard uses a single project to introduce HTML5, CSS3, MySQL, PHP, AJAX, and jQuery. The easy conversational style of Dr. Skibbard, plus the detailed explanations and provided source code make this course a "must-take" for those interested in all facets of Website Development. I would give The Ultimate Web Development Course from Dr. Richard Stibbard course 5 stars and my most positive recommendation!

  • 30 day money back guarantee!
  • Lifetime Access. No Limits!
  • Mobile Accessibility
  • Certificate of Completion