Web Development Bootcamp: HTML, CSS, JavaScript, PHP & MySQL

Install Google Chrome and Visual Studio Code, enable their dev tools and extensions, and set up Xfam to run Apache, PHP, and MySQL locally for practice.

Download Google Chrome on Windows by using Microsoft Edge to access the official Chrome site, run the installer, and set Chrome as your default browser.

Install Visual Studio Code on Windows by visiting the official website, downloading the Windows executable, accepting the agreement, and completing the installation on your local machine.

Install xampp on a Windows machine by downloading the latest PHP version 8.2.12, run the installer as administrator, and use the control panel to start Apache and MySQL.

Start your hands-on web development journey by learning HTML basics, writing your first file, and using comments, attributes, and block vs inline elements to structure tables, links, forms, and multimedia.

Explore how HTML, a hypertext markup language, structures web pages using elements like doctype, html, head, title, body, h1, and p to describe content and support SEO.

Create your first HTML page by declaring the document type, using HTML, head, and body tags with a title Hello world program, an h1 Hello world, and a paragraph.

Learn how to insert html comments using <!-- -->, write text inside as non-rendered notes, and view them in page source while keeping your web page unaffected.

Learn HTML to build web pages with tags, enable responsive ui and multimedia via HTML5, and ease learning JavaScript, PHP, Angular, and React for web development.

Explore basic HTML tags, including heading levels h1 through h6, paragraph p, line breaks br, center alignment, and ordered and unordered lists and list items.

Explore HTML attributes by defining name and value, applying them in opening tags, and using id, title, class, and style attributes to configure element behavior and styling.

Explore block-level versus inline HTML elements, using div for grouping and tags like p, hr, table, and headings, with inline elements such as links and a and b in demos.

This lecture introduces HTML style sheets and CSS, showing how CSS controls the presentation of HTML elements across screen and print, and demonstrates inline, internal, and external CSS with examples.

Explore HTML formatting by distinguishing physical tags from logical tags, using bold, italic, underline, strike, small, and semantic tags to improve readability and SEO.

Explore embedding and customizing images in HTML with the img tag, src, alt, width, and height, plus aligning, resizing, and using formats like jpeg, png, and gif.

Learn how to use HTML iframes to embed external documents and Google maps, configure src and title attributes, and style iframes with width, height, and borders.

Master HTML meta tags that describe a document with name and content pairs in the head. Learn author, keywords, description, revision date, cookies, and http-equiv refresh.

Learn how to set and customize the web page background using color and background image in HTML, including a sample project in Visual Studio Code and applying background styles.

Learn how HTML tables organize data with rows and columns, using table, tr, td, and th, and how to style and nest tables with CSS.

Explore HTML links, including anchor syntax with href, linking text, buttons, and images; learn target, download, and mailto attributes to navigate and share pages.

Explore how HTML forms collect user data, use the form element with action and methods, support file uploads, and create registration forms with validation, styling, and post or get submission.

Explore HTML media elements by embedding video and audio on a web page and using the embed tag to include external content such as images or videos.

Learn to embed video in an HTML page using the video tag, link a sample.mp4 from a videos folder, enable controls, and resize with width and height attributes.

Learn to embed audio in an HTML page with the audio tag, set the src to a file in an audio folder, and control playback, volume, and playback speed.

Learn to embed a YouTube video into an HTML page using an iframe, copy the embed code, adjust width and height, and control fullscreen behavior.

Explore CSS basics to turn plain HTML into beautifully styled web pages. Learn CSS syntax, selectors, colors, backgrounds, fonts, and spacing, padding, margin, visibility, display and layout, with hands-on exercises.

Explore how CSS controls the presentation and layout of pages, including spacing, responsive layouts, and animations. Learn separation of content and design, reusability, and selectors such as class and id.

Explore the three CSS types—inline, internal, and external—and learn to apply styling with the style attribute, the style tag, and linked .css files for HTML elements like h1 and p.

Learn css syntax, selectors, and properties with values, illustrated by an h1 example coloring text red and setting font size to 50 pixels, including universal, element, class, and id selectors.

Explore universal selector, element selector, class selector, id selector, grouping selector, decision selector, and child selector in css, and learn to apply margins, padding, colors, font sizes, and backgrounds.

Learn how to add CSS to HTML using inline, internal, and external methods, including style attributes, style tags, and linking to style.css to control font size, weight, and color.

Master CSS colors, backgrounds, and fonts by applying named, hex, RGB, and HSL colors; implement background colors, images, and gradients; and customize fonts with font-family, Google fonts, and text styles.

Apply padding in CSS to add space inside elements, as seen with padding: 20px in a 400px wide content area, and contrast it with margin, which adds space outside.

Explore how CSS margins create space outside element borders, using two sections and margin values like 10px and 20px, and learn margin shorthand for top, right, bottom, and left.

Explore how the CSS visibility property works by hiding a box with a hidden class, illustrating that the hidden element is removed from view but its space remains.

Learn how the CSS display property controls visibility, using display none to remove elements and space, and visibility hidden to reserve space, with practical examples.

Style tables in css to improve readability by applying borders, padding, text alignment, header colors, and hover effects, and make them responsive with a container and horizontal overflow.

Implement a to-do list using HTML and CSS, build a responsive page that stays on the center right across all browser sizes, and start from scratch.

Build a to-do list HTML structure with a container, heading, text input (id task input), add task button, and a task list ul (id task list) with delete buttons.

Style the to-do list with css to center it, design the container, input, and buttons, implement hover, transitions, a completed state, and use the Poppins font.

Create a fully responsive login form using HTML and CSS, with a center-aligned layout, username and password fields, a submit button, and a register prompt.

Build a basic HTML login form with a container, a login heading, username and password fields, a submit button, and a register link.

Apply CSS styling to center a login form, style inputs and submit button, add hover effects and transitions, and ensure responsive design.

Implement a registration form from scratch, featuring a background image, centered layout, and fields for name, email, phone, and password with a hover-animated register button.

Create a registration form in the body with a container, a heading, and a form tag containing name, email, phone, and password inputs, plus a submit button named submit.

Style a registration form with html and css, applying a global reset, a flex-centered body, background image, a responsive container, full-width inputs, a hover submit button, and Roboto typography.

Build a fully functional responsive image gallery using HTML and CSS, featuring a grid layout and a zoom-on-hover effect to showcase sample images.

Structure a responsive image gallery in HTML by creating a gallery container, adding image tags with src attributes and alt text, and duplicating images to reach nine items.

Apply styling to create a responsive image gallery using css grid, with dark green body, centered layout, responsive columns, image sizing, hover scale, and subtle box shadows.

Explore how JavaScript brings web pages to life by using console.log and alerts, and covering variables, data types, operators, comments, functions, events, and error handling for interactive features.

Learn how JavaScript, a high-level interpreted language, enables dynamic content, interactive forms, and animations on web pages, with asynchronous, event-driven client-side scripting across browsers.

Learn the basics of JavaScript syntax and build your first hello world program using a script tag and document.write in an HTML file viewed in a browser.

Discover how to add JavaScript to HTML with inline, external, and internal methods. See a button click alert example using script.js and script.src.

Use console.log in JavaScript to print messages and numbers to the browser console for debugging, learn the syntax, and view outputs by inspecting the browser console.

Learn how to use JavaScript comments to add notes and explain code. Understand that single-line and multi-line comments are ignored by the engine and do not affect execution.

Master JavaScript variables by declaring with var, let, or const, and assigning strings, numbers, booleans, objects, arrays, or null while following naming rules and case sensitivity.

Learn how the let statement creates block-scoped variables in JavaScript, including how they can be updated but not re-declared in the same scope, and how accessing before initialization triggers errors.

Learn how const declares constants in JavaScript with block scope, must be initialized, and cannot be reassigned. Review examples with pi and errors, and when to use const versus let.

Discover JavaScript data types, including string, number, boolean, null, undefined, object, array, and function, with examples and typeof checks to identify types.

Explore JavaScript operators, including arithmetic, comparison, logical, bitwise, assignment, and miscellaneous operators, with examples of plus, minus, modulo, equals, and the spread operator.

Explore JavaScript control flow, covering conditional statements, loops, and break and continue, with examples of if, else if, switch, for, while, and do-while.

Explore how to define and use JavaScript functions through declaration, expression, and arrow functions. Learn parameters, default values, return, scope, anonymous functions, immediately invoked function expressions, callbacks, and recurring functions.

Learn to use JavaScript objects as a key-value data structure, including literals. Access properties with dot and bracket notation, and explore constructors, classes, prototypes, and destructuring.

Explore how JavaScript uses cookies as key-value pairs in the browser to manage sessions and preferences. Learn to create, read, modify, and delete cookies with document.cookie, expiration dates and path.

Learn to manage cookies with a JavaScript function: set a cookie with a five-day expiry, get its value, and delete cookies using document.cookie.

Explore synchronous versus asynchronous JavaScript, including premises with resolve and reject, then demonstrate async await and fetch API for external data with try catch error handling.

Explore JavaScript web APIs, including DOM API, fetch API, and local and session storage, with a hands-on example using async/await to fetch JSON data.

Explore events in JavaScript, including mouse, keyboard, form, and window events, and learn to detect them using addEventListener.

Explore essential JavaScript keywords across categories, including variable declarations, functions, control flow, object-oriented constructs, and exception handling, with examples like let, const, function, return, if, and switch.

Learn about syntax, reference, type, and range errors in JavaScript, and handle them with try-catch, finally, and custom throws while debugging with console.error and the debugger.

Build a beautiful interactive to-do list with input validation, task addition, display of tasks, and deletion or completion using local storage.

Build a dynamic to-do list with HTML, CSS, and JavaScript, adding tasks to a list with delete actions while validating input and planning local storage persistence.

Implement saveTaskToLocalStorage to save a task object using localStorage.setItem and JSON.stringify. Retrieve tasks with localStorage.getItem, initialize an empty array when needed, and list tasks on page load.

Load tasks from local storage on page load, parse the json data, and list them using addTaskToList; the lecture sets up a content loaded listener and initializes loadTasks.

Implement delete functionality for a to-do list by removing tasks from local storage with json, filtering by taskId, and updating the page to remove the task element.

Learn to mark tasks as completed by clicking the task text, toggling the completed state in local storage, and applying the completed class with a green background and blue strike-through.

Complete your first JavaScript to-do list project and master local storage use, including setting and retrieving data, creating and removing DOM elements, and wiring click events with functions.