The complete Web development course with projects (PHP)

Explore choosing text editors for web development, from notepad plus plus to phpstorm. Learn to create and run a basic HTML file (index.html) with doctype and auto generated tags.

Explore setting up your ide, writing html basics, saving .html files with proper doctype, html, head, and body tags, and composing elements like h1 and images for live browser previews.

Explore how to structure content with HTML headings from H1 to H6 and paragraph tags, and learn where to place headings and paragraphs in a web page.

learn to load images with the img tag and control width, and link pages with anchors using correct relative paths, file names, and extensions in root or inner folders.

Learn how HTML elements and attributes define tags like h1, p, img, and a, using src, href, width, height, and alt. Grasp nesting, closing rules, and inline styling for presentation.

Learn how to create and style HTML tables, include headings and data rows, add anchors inside cells, and use comments to document code while hiding sections when needed.

Learn how to style HTML elements with CSS by setting properties and values, applying color, font size, background, and other styles to headings and paragraphs.

Learn how divs function as containers in HTML, explore nested div structures, and apply height and background color to create layered layouts with headings and text.

Create ordered and unordered HTML lists with ul, ol, and li, and style list items with color and background. Explore using lists for navigation and anchors or images.

Learn the difference between block level and inline elements in HTML, with examples like h1, h2, p, and div as block level, and span and anchor as inline.

Explore how to embed external content using the iframe tag in HTML, including loading pages and YouTube videos with width and height attributes.

Define the head element after the title, and include CSS, JavaScript, and SEO meta tags; link external CSS files and apply internal and inline styling.

Learn how to design web forms, including login, signup, and contact us, with text fields, placeholders, password fields, radio buttons, checkboxes, text areas, and dropdowns.

Learn the basics of HTML5, including the proper doctype and meta charset, create an HTML5 file, structure with head and body, and preview in the browser.

Learn how HTML5 semantic elements like header, nav, article, aside, and footer clearly describe content for browsers and developers, with modern browser support and compatibility for older ones.

Learn how to structure web pages with HTML5 semantic elements such as section, article, header, footer, nav, and aside, and implement details and sidebars for clear, accessible content.

Learn how to write clean HTML5 with a practical style guide, emphasizing lowercase tags, proper closing, meaningful alt text, and consistent class and id conventions.

Explore how HTML5 graphics use canvas and SVG to draw lines, rectangles, and circles, with JavaScript required for rendering on web pages.

Learn scalable vector graphics in HTML5 with the SVG element to draw shapes like circles and rectangles. Define width and height, and apply fill, stroke, and CSS styling.

Learn how multimedia works in HTML5, including audio and video elements and formats like mp3, wav, mp4, and avi, plus storing and using multimedia files in HTML projects.

Learn to embed video in html5 using the video tag, specify mp4 sources, set width and height, add controls, and handle browser support across mp4, webm, and ogg formats.

Embed audio in html pages using the html5 audio tag with a source in index.html, and enable controls for play, pause, and volume across mp3, wav, and ogg formats.

Embed YouTube videos in HTML via iframe using the video id, set width and height, and hide controls with controls=0; copy the iframe code to embed videos from Vimeo.

Learn how to download, install, and configure Notepad++ as your IDE, choose 64-bit or 32-bit, and set the installation drive, preparing you to apply CSS styling in your project.

Learn how to add CSS to HTML projects using inline, internal, and external methods. Create and link CSS files, embed styling, and organize styles for clean web projects.

Learn to use CSS selectors to target HTML elements, classes, and IDs, and apply inline, internal, and external styles, including element, class, id, and descendant selectors like div p.

Learn to define background color and image in CSS and HTML, applying them to divs, headings, and paragraphs, and use properties like repeat, position, and fixed attachment for effects.

Learn to apply borders to any HTML element with CSS, using border style, width, and color, including setting different colors for each side.

Learn to use CSS margins to create space around elements, including top, right, bottom, and left margins, and the shorthand margin syntax with pixel values.

Explore how CSS padding creates inner space around element content, using top, right, bottom, left, or shorthand padding with pixel and percentage values.

Learn how to set width and height in CSS for different elements, including divs, paragraphs, and headers, using values like 300px by 200px and 100% responsive sizing.

Explore how to style text with CSS by applying color (hex and rgb), text alignment, decorations, transforms, letter spacing, line height, and text shadow for web pages.

Create a separate external css file named style.css in your project root and attach it to your html with a link rel stylesheet tag to centralize styling and enable debugging.

Define fonts in css using font-family, font-style, font-size, and font-weight with an external stylesheet. Explore using Google fonts like Roboto and setting multiple font families for headings and paragraphs.

Explore how to style links in CSS, including anchor tags, classes, and colors. Learn hover, visited, and active states to customize link appearance across pages.

Discover how to style ordered and unordered lists with CSS, using selectors, classes, colors, padding, margins, list-style-image, and hover effects for list items and anchors.

learn to style html tables with css by targeting tr, td, and th, and applying width, padding, borders, colors, and hover effects using selectors and table-specific properties.

Master the css display property to toggle block and inline layouts for div, headings, paragraphs, spans, and anchors. Learn to use display none and visibility hidden to control layout.

Learn how to use maximum width and margin auto to center a div in CSS, with practical examples for responsive layouts and images.

Explore the CSS position property, including static, relative, fixed, absolute, and sticky, learn how to shift elements with left, right, top, and bottom, noting margins, padding, and parent-child positioning.

Explore how to use the CSS overflow property to control content inside a div, with values visible, hidden, scroll, and auto, plus overflow-x and overflow-y handling.

Explore how CSS display inline and display block transform block-level and inline elements like h1, span, and nav; learn practical layouts, padding, hover effects, and navigation bars.

Master left, right, and center alignment in css by applying margin auto, text-align, display block, width, and positioning; center images and divs, and explore float and absolute positioning techniques.

Discover how pseudo classes define special states for elements, such as hover, active, and visited, using selectors. See practical examples with anchors, divs, and first-child selections to control styling.

Explore CSS pseudo elements in this web development course with PHP projects, focusing on styling specific parts of elements using ::before, ::after, and ::first-letter, including color and image insertion.

Explore how CSS opacity controls the transparency of elements and images, using divs and classes with size and background examples. Adjust values from 0.1 to 1 to see the effect.

Master border radius in css by learning how to define and apply rounded corners to elements such as headings and images, using individual corner values and common properties.

Learn how to set an image as a border in CSS3 using border-image, including specifying the image URL, border width, and options for repeating, rounding, and stretching.

Set a background image on a div using the CSS3 background-image property, including single and multiple images. Control position, repeat, size, and cover with practical examples.

Explore how to implement rgb colors in CSS3, use rgb() with red, green, blue values, and apply opacity with rgba alpha values, illustrated with color picker examples.

Learn to create linear and radial gradients in css by applying multiple colors, choosing direction or angles, and using rgb or transparent colors, with divs and height adjustments.

Explore how to apply text shadows in CSS to headings such as h2, experimenting with horizontal and vertical offsets and blur to create visible shadow effects.

Learn how to apply box shadow to elements in CSS, set offsets, blur, color (including rgb), and use webkit for browser compatibility while copying generated code.

explore text effects in CSS, including word wrap and writing mode, and learn how to control word break, keep-all, and break-all to manage vertical and horizontal text layouts.

Explore the 2D transformations in CSS, including translate, rotate, scale, skew, and matrix, with practical examples and how to apply transform properties in CSS3.

Explore 3D transformations in CSS by applying the transform property with rotate, rotateX, and rotateZ to rotate content by specific degrees.

Master CSS transitions to animate width and height on hover, configure duration and delay, and apply transforms like rotate, using transition properties and values discussed in CSS3.

Learn to create CSS3 animations with keyframes, duration, iterations, and timing functions to move and colorize from red to olive to green to yellow to aqua using left and top.

Learn how to style images in CSS with border radius, sizing, centering, and overlays; create thumbnails, responsive images, and hover effects, including flipping and text overlays.

Learn how media queries in CSS adapt styles for different devices, using min-width and max-width to change background color on small screens.

Set up the JavaScript environment by creating a dedicated folder, choosing an editor (PhpStorm or alternatives), and building an index.html to demonstrate onClick and innerHTML for dynamic content.

Learn to use external scripting with script tags, attach external JavaScript files, and debug outputs in the console and div elements using innerHTML.

Learn JavaScript data types, declare variables including strings, and use the console to run operations, refresh the page, and inspect elements.

Learn how JavaScript arithmetic and assignment operators perform calculations on numbers and variables, including plus, minus, multiplication, division, modulo, increment, decrement, and compound assignments like x += y.

Explore arrays and objects in JavaScript, learn how arrays hold multiple values, access by index, and define objects with properties and methods through practical examples like computers, cars, and LCDs.

Master JavaScript conditional logic with comparison operators, if/else blocks, else if, and switch statements, including equality, relational operators, break, and default cases.

Explore loops in JavaScript including for, while, and do while. Learn to repeat a block of code, manage conditions and increments, and iterate arrays using length and zero-based indexing.

Define and call functions in JavaScript, pass arguments, and apply logical operators (and, or, not) in if statements. Learn built-in versus user-defined functions with examples using alert, getElementById, and innerText.

Explore how JavaScript handles HTML events like click and hover, learn to use onClick, getElementById, and innerHTML to modify content and run functions.

Learn the string data type and key string methods in JavaScript. Practice concatenation, length, index of, last index of, search, slice, substring, replace, toUpperCase, toLowerCase, trim, and split on examples.

Explore how to work with numbers in JavaScript, including operators, numeric values, and the effects of using quotes on addition and concatenation.

Learn how to store multiple values with arrays in JavaScript, create and index them from zero, and use common methods like push, pop, shift, and join.

Explore how to use the date object in JavaScript to create dates, retrieve year, month, date, hours, minutes, seconds, and milliseconds, and modify them with set methods.

Explore the JavaScript math object and booleans, learning rounding, power, absolute value, floor, min/max, and global versus local variable scope through practical examples.

Explore JavaScript constants and the document object model, then learn DOM methods such as getElementById, getElementsByClassName, and getElementsByTagName to access and modify HTML content.

Explore how to use JavaScript events to change page elements on user actions, including click, load, and mouse events, by manipulating the DOM with getElementById, style, and innerHTML.

Embed the jQuery library via script tag, understand compressed versus uncompressed versions, and use $(document).ready to handle events like click and toggle animations.

Explore jQuery selectors and events to efficiently target elements by id, class, or attributes, and bind click, hover, and focus events to show or hide content.

Explore focus, hide, show, and toggle events in jQuery with the on method. Learn to control paragraph visibility with show, hide, and toggle animations using speed.

Learn how to separate JavaScript into external files with jQuery, implement fade and slide effects, and debug paths using console while placing scripts at the end of the body.

Learn to create and control animations in jQuery with animate, chain multiple properties, manage positioning, and stop animations using stop, including slide up/down sequences.

Learn to change the current element with jQuery, apply CSS, and handle submit events with callback functions, prevent default behavior, and retrieve input values with val.

Learn to select elements, fetch content and attributes with jQuery by handling button clicks, retrieving text from paragraphs, updating HTML, and reading input and href attributes.

Explore how to add, remove, and empty HTML elements with jQuery, using append and prepend for dynamic content, and distinguishing remove from empty across multiple elements.

Learn jQuery traversing basics using the find and children methods to locate descendants, navigate to parents and ancestors, and manipulate elements with css, removal, and first child targeting.

Explore sibling and filtering in jQuery using next, nextAll, until, previous, prevAll, first, last, not, and clone, with dom ready, click events, and css styling.

Validate form data with a jQuery example, checking two fields, name and subject, for emptiness and length. Display friendly errors and prevent default submission before posting to the server.

Shahzad demonstrates scroll, scrollTop, and select in jQuery, capturing scroll position and updating a feedback area. He covers id selectors, callbacks, and scroll-triggered animations like a sticky navigation.

Explore how to use jQuery's append, prepend, after, and before to dynamically insert text and elements into lists, headings, and paragraphs, with practical examples.

Learn to set a div's width and height and center it with CSS and JavaScript, using window and div dimensions, resize handling, and absolute positioning with jQuery.

Build a countdown timer for an ecommerce event that shows days, hours, minutes, and seconds until a target date using jquery, date.parse, jquery.now, and math.floor.

Explore bootstrap 5 documentation to learn building responsive layouts with the framework, including grids, forms, buttons, badges, and themes, via CDN, npm, or composer, and download ready assets.

Learn how to download, install, and configure Bootstrap 5 using CSS and JS files, CDNs, or Composer, and wire in jQuery for production ready web pages.

Explore bootstrap 5 components and utilities, from accordions and alerts to navbars and progress bars, and learn how to implement these ready-made UI elements in your projects.

Explore how to build and customize Bootstrap 5 alerts and badges, including alert varieties (primary, info, danger, warning, success), dismissible alerts, alert links, and badge pills.

Learn to implement breadcrumbs in bootstrap 5, including the breadcrumb and breadcrumb-item classes, aria-current='page', active states, and dividers, with examples from home and about us pages.

Explore bootstrap 5 buttons, using classes for primary, danger, info, success, warning, and outline variants, with buttons, anchors, and inputs; control size, disabled state, and full-width layout.

Explore how bootstrap 5 button groups combine multiple buttons into a single control, with toolbar options, active states, and variations for radio buttons, checkboxes, and pagination.

Learn how to customize Bootstrap 5 elements by creating and linking a custom stylesheet, defining unique classes, and applying styles to buttons and alerts without altering core Bootstrap classes.

Learn how to build and customize progress bars in bootstrap 5 from scratch, including setting min, max, current value, and width, displaying percentages, color variants, multiple segments, stripes, and animations.

Explore how the Bootstrap 5 collapse component toggles content visibility with buttons or anchors using data-bs-toggle and data-bs-target, including cards and card bodies.

Master Bootstrap five cards by adding image, heading, paragraph, and button elements. Build responsive layouts using card body, card image top, and card grouping within the grid system.

Learn how to implement Bootstrap 5 pagination to split thousands of records into multiple dynamic pages, using nav, ul, li, page-item and page-link with active and disabled states.

Learn how to create a Bootstrap 5 close button for modals and popups, using button close with aria-label, and manage visible and disabled states for practical styling.

Discover how to implement Bootstrap 5 accordions with three items, headers and ids, using data-toggle and data-target, and copy-ready code from Bootstrap documentation with flush option.

Explore Bootstrap 5 list group concepts, including active and disabled states, links, buttons, flush and horizontal layouts, color variants, badges, and custom content like checkboxes and radios.

Explore Bootstrap 5 built-in background, border, and border-radius utilities to style containers, rows, and columns with background color classes, borders, and rounded shapes.

Explore Bootstrap 5 color utilities and positioning utilities, using text color classes like primary, danger, and success, and positions such as relative, absolute, fixed, static, and sticky to control layout.

Master Bootstrap 5 sizing and spacing utilities to control width, height, margins, padding, and w-75 variants. Apply text utilities for alignment, wrapping, transforms, font weight, and decorations to style typography.

Explore Bootstrap 5 float utilities (start, end, none) and visibility classes (visible, invisible), including the difference between visibility hidden and display none.

Learn Bootstrap 5 grid basics by using container and container-fluid, apply responsive breakpoints (xs to xl), and choose between fixed max width or full-width layouts for your projects.

Master the Bootstrap 5 grid system to build responsive layouts with a mobile-first flexbox grid, using containers, rows, and columns across breakpoints from small to extra large.

Explore Bootstrap five column nesting and column offset within the grid system, including nesting rows inside columns, inner columns, and responsive md sizing, with examples of reordering and offset utilities.

Explore Bootstrap 5 form controls, including container, row, and column layouts, input types, form-control variants like lg, and how to disable, read-only, or plain text elements with labels.

Explore Bootstrap 5 selects in forms, defining options, sizing with form select lg or sm, enabling multiple selections, and using disabled and read-only states to control user input.

Learn to create checkboxes and radio buttons with Bootstrap 5, using form check and form switch, managing checked, disabled, inline, and labeled controls.

Explore bootstrap 5 input groups and ranges, including range sliders with min, max, and step options, and how to combine inputs, labels, and buttons in groups.

Master building a responsive navbar in Bootstrap 5, including branding, links, active and disabled states, dropdowns, and light or dark themes across devices.

Learn to build a Bootstrap 5 project using the grid system, carousel, navigation, and cards; embed Bootstrap assets and resolve missing files to make a working page.

Build a Bootstrap 5 project from scratch using the grid system, navigation bar, cards, and button groups, wired with a CDN and minimal custom styling for a responsive layout.

Download, install, and configure xampp to run PHP scripts locally by starting Apache and MySQL, with guidance for Windows, Mac, and choosing the correct version.

Learn how to create and save PHP files with the .php extension, run them on localhost, and organize them in docs and PHP folders with index.php as the default file.

Learn how to embed HTML in a PHP script, use PHP tags, and echo output, while integrating HTML, CSS, and JavaScript in a PHP project.

Learn how PHP variables work, including creating variables with a dollar sign, assigning values, and printing with echo; explore data types, strings with double quotes, concatenation with dot, and arithmetic.

Discover how to use comments to disable code, including single-line and multi-line styles, and explore case sensitivity when defining and accessing variables in PHP.

Explore PHP data types including string, integer, float, boolean, array (simple, multi-dimensional, associative), object, and null, and how to store them in variables and send data to servers or APIs.

Learn how to concatenate strings and variables in PHP using the dot operator, define and access constants with define, and echo combined outputs for clear display.

Explore arithmetic and comparison operators in PHP, including addition, subtraction, multiplication, division, modulo, exponential, and equals and not equals. Also learn assignment operators, increment and decrement, and basic logical operators.

Explore PHP conditionals using if-else and switch, with real examples of comparison operators, else if, logical operators, and the role of break, default, and case.

Explore PHP functions, learn to use built-in functions and create your own user defined functions, call them with arguments, and return results to build reusable code.

Explore the difference between local and global variables in PHP, explain variable scope, and show how to access global variables inside functions using the global keyword and by passing arguments.

Explore echo and print in PHP to output results, noting echo's speed and multiple parameters, that echo does not return a value, and how var_dump aids debugging.

Learn how PHP arrays store multiple values in a single variable, using zero-based indexing, associative arrays with key-value pairs, and multi-dimensional arrays, with examples of accessing and iterating.

Learn how to use php super global server variables to access headers, paths, and script locations across all scopes, including server name, port, and protocol.

Explore how to retrieve form data in PHP using $_GET and $_POST, compare get versus post methods, and display values with echoes while handling empty inputs.

Learn to manage time and date in PHP with the built-in date function, formatting options, and time zone settings, including current date and time display.

Explore PHP loops, including for, while, do-while, and foreach, to repeat code, iterate over arrays, and fetch data from databases, with practical examples and zero-based indexing.

Learn how to use PHP include and require to reuse code across files like index.php and inner.php, sharing variables and functions, and manage redeclaration issues when including files.

Understand PHP sessions: start a session, store and fetch data (email, password, arrays, multidimensional array, objects), update values, and destroy sessions to manage user login without exposing data in cookies.

Learn to upload image files in PHP: enable file uploads in php.ini, build a form with multipart data, validate and move files to an uploads directory, check size and extension.

Explore how cookies in PHP store data in the user browser to speed up repeated requests, create and retrieve cookies, and unset them while understanding security considerations.

Master object oriented PHP by defining classes and objects with properties and constructors, then instantiate objects using the new keyword and access their properties and methods.

Master visibility, static members, and inheritance in PHP by building classes, managing access with public, private, and protected properties, and counting objects with static methods.

Learn to define interfaces as contracts and implement them in PHP classes, and use abstract classes as non-instantiable parents with abstract and concrete methods.

Explore how PHP traits enable code reuse within classes and how namespaces organize code in Laravel projects. Learn practical use via a logger trait, class imports, and use statements.

Master try-catch and finally blocks in PHP to manage errors in an object-oriented environment, implement custom exceptions, and display safe user messages in production.

Master create, read, update, and delete operations in PHP with PDO and exception management, using try-catch blocks to perform insert, select, update, and delete with prepared statements.

Explore magic methods, constructors, destructors, and toString within PHP's object oriented environment. Learn how composer autoloading with PSR4 and composer.json creates autoloaded classes and clean code.