Web Development: HTML, CSS, JavaScript, Bootstrap, React JS

Master cascading style sheets to decorate web pages, define colors, fonts, and layouts, and learn internal, external, and inline css with live server in VS Code.

Explore css selectors that target html elements, including element type, id, class, group, and universal selectors, and learn their syntax for applying properties like color.

Use dot notation to style elements by class selectors and compare with unique id selectors. Group selectors with commas and apply the universal selector to reset margins.

Explore how css font properties control text appearance by mastering font-family, size, style, and weight; learn to build font stacks with serif, sans serif, monospace, cursive, and fantasy fonts.

Explore CSS font-style options including normal, italic, and oblique, and font-weight values such as normal (400), bold (700), lighter, and bolder, with practical class-based examples and 20px font sizes.

Learn how CSS text properties control color, alignment, decoration, and transform to style text on web pages, including examples of color, text-align, text-decoration, and text-transform.

Explore how CSS letter-spacing and word-spacing set spaces between letters and words, illustrated with three paragraphs and pixel-based examples.

Explore how CSS colors style text and backgrounds using named colors, hex codes, and RGB values. See examples with p and h1, and apply color formats to borders.

Explore flex item properties in a flexbox layout, using the order property to reorder items without changing HTML, and apply flex-grow to distribute extra space among items with shared classes.

Explore how to design a responsive navigation bar with flexbox, featuring a logo and nav items (home, about, services, contact) with hover color changes taught through html and css.

Explore CSS grid layout as a two-dimensional system, contrast with flexbox, define grid containers with grid-template-columns and grid-template-rows, and use fr and fixed sizes for gridlines, tracks, gaps, and areas.

Explore CSS grid layout essentials, including min max function tracks, grid template columns and rows, repeat for equal tracks, and grid template areas for headers, sidebars, main content, and footer.

Demonstrates CSS grid layout by implementing grid column gap, grid row gap, and the grid gap shorthand to form a 3 by 3 grid with 20 pixels gaps.

Learn CSS grid alignment by positioning the grid, its content, and resources inside the container using justifyContent and alignContent, with values like start, end, center, space between, and space around.

Learn to control grid item alignment in CSS grid using justifyItems for horizontal alignment and alignItems for vertical alignment, with hands-on examples of start, center, end, stretch, and baseline.

Delve into CSS advanced selectors and pseudo classes, including hover, focus, active, visited, and structural selectors like first child, last child, and not, with practical examples.

Explore the JavaScript introduction, covering variables, data types, operators, conditionals, loops, functions, arrays, objects, and the DOM. Learn client-side interactivity and server-side basics with Node.js, development tools, and practical apps.

Learn how to use JavaScript data types, including primitive and non-primitive, such as number, string, boolean, undefined, null, and symbol, and use typeof and console.log for debugging and type checking.

Explore JavaScript operators, including arithmetic, assignment, comparison, logical, and unary operators, and learn how to use alert, confirm, and prompt dialogs in practical examples.

Master JavaScript condition statements to drive decisions by evaluating conditions with simple if, if-else, if-else-if ladders, and switch cases, including default handling.

Explore loops in JavaScript—while, do-while, and for loops—and how they repeat code while a condition is true, with examples printing 1 to 5 and even/odd numbers.

Master debugging concepts with breakpoints and stepping through code in browser tools; identify runtime errors, analyze values, and practice determining the greatest of numbers.

Explore how arrays store multiple values in JavaScript, with 0-based indexing, and how to create, read, and modify them using push, unshift, and pop.

Learn to add or remove elements at a specific index with splice (index, delete count, replacement elements) and to sort and reverse arrays, including numeric sorting caveats.

Master JavaScript functions: declare and call functions, use parameters, and return values for reusable code. Explore local and global variables, function expressions and arrow functions, and ES6 default parameters.

Learn how to declare and call functions, use parameters and return values, and apply rest parameters to sum multiple numbers, while distinguishing local and global variables.

Explore JavaScript objects as unordered key-value collections, learn to create, access (dot and bracket notation), modify, add and delete properties, and iterate with for-in and Object.keys, Object.values, Object.entries.

Master the spread operator to clone and merge arrays, build arrays from objects inside arrays, and apply nested object destructuring to extract values from objects.

Explore how the document object model (DOM) represents HTML document as a tree of nodes. Discover how to access and modify elements with API methods like getElementById, querySelector, and querySelectorAll.

Access and manipulate the dom with textContent and innerText, then target elements with querySelector or id and modify styles like background color and borders.

Learn to read and write attributes with get attribute and set attribute in the DOM, including input value and image src examples.

Describe the dom tree and nodes within the document object model, learn how the browser builds dom from html, and practice traversing root, child, parent, and siblings with JavaScript.

Create and insert HTML elements dynamically using JavaScript by building elements with createElement, setting textContent, and attaching them with appendChild and prepend to a div.

Learn to clone dom nodes with cloneNode, choose true for descendants or false for the node itself, and clone an original menu, append it, and add a new list item.

Master how DOM events work in JavaScript, attach event handlers with addEventListener, and handle mouse, keyboard, and form events using normal and arrow functions, including the this keyword.

Explore form events in JavaScript, including submit, focus, blur, and input validation, with a practical HTML form and dynamic messaging to validate data and enhance user experience.

Explore blur and focus events in HTML forms through real-time examples, validating input fields, changing colors on focus or blur, and implementing simple email validation.

Master keyboard events in JavaScript, focusing on key down and key up, how keys trigger events, and how to access event.key and event.code for forms, search boxes, and shortcuts.

Explore how setInterval and clearInterval control asynchronous tasks in JavaScript, with hands-on examples of stopping at a value, starting and stopping with buttons, and building a simple digital clock.

Explore how clearInterval cancels a setInterval loop, control it with start and stop buttons, and build a digital clock that updates every second using getHours, getMinutes, and getSeconds.

Explore how callback functions enable synchronous and asynchronous programming by passing a function as an argument to another function, and see how calc handles addition, subtraction, multiplication, division, and modulus.

Explore callback hell, where nested asynchronous callbacks create unreadable, hard-to-debug code, also known as the pyramid of doom. Learn how promises and async/await offer solutions.

This lecture introduces promises as the solution to callback hell, explains promise states, and shows creating promises with an executor function using resolve, reject, then, and catch.

Explore how promises work in JavaScript by using the then and catch methods to handle pending, fulfilled, and rejected states, including creating promises with an executor function, and practical examples.

Explore how async and await simplify asynchronous JavaScript by returning promises and pausing execution within async functions, enabling non-blocking operations like fetching data from API.

Explore async await with practical examples, including a delay function using setTimeout and promise resolve, an order pizza flow, and getUser with await and displayUser.

Discover Bootstrap 5, a free open-source frontend framework for building responsive, mobile-first websites and web applications with ready-made HTML, CSS, and JavaScript components and a 12-column grid system.

Explores Bootstrap typography and color utilities, covering heading and display classes, text alignment and decoration, font weight, color utilities, and background color options for responsive design.

Explore bootstrap's grid system to build responsive, mobile-first web pages using a 12-column layout, containers, rows, and versatile column widths powered by flexbox.

Explore responsive grid layouts by building columns that adapt across mobile, tablet, and desktop breakpoints. Use Bootstrap classes such as col-sm-4 and col-lg-6 to define widths.

Explore Bootstrap containers, including .container and .container-fluid, to create centered fixed-width layouts or full-width sections; grasp breakpoints and responsive behavior across devices.

Build a responsive bootstrap navbar that adapts across desktops to mobile, using navbar, expand, collapse, and toggler; configure brand, container, and nav links for a mobile-friendly menu.

Learn to build a responsive bootstrap navbar that adapts from horizontal links on desktop to a collapsible hamburger menu on mobile, using navbar, expand, toggler, collapse, and data-bs-toggle.

Explore bootstrap accordions, a UI component with headers as buttons that reveal or collapse content panels to save page space. See examples like sgfcbank FAQs for compact, navigable interfaces.

Master bootstrap list groups in MooseJar by learning how a flexible vertical list displays content efficiently. Understand what list groups are and how to implement them to organize content clearly.

Create responsive Bootstrap forms with the form-control class to style inputs, textareas, and selects. Build a login form with email and password fields and a primary button.

Discover how to implement HTML select elements in Bootstrap forms with fruit options, and learn to design radio buttons and checkboxes using form check classes for single or multiple selections.

Explore floating labels with the form floating class. See how the label sits inside the input when empty and moves above on focus, saving space.

The Bootstrap drop-down component reveals a list of actions when you click or hover a button; it is a distinct UI element built with HTML, CSS, and Bootstrap JavaScript.

Explore bootstrap icons, Bootstrap's free SVG-based icon library, lightweight and customizable with CSS. Retrieve the CDN link from icons.getbootstrap.com and render icons such as Apple or Facebook.

Learn what ReactJS is, why you use it, and how it compares to vanilla JavaScript, including declarative programming, virtual DOM, and building single-page applications.

Set up a React development environment by installing Node.js, npm, and using create-react-app or the white tool to launch your first hello world app.

Master JSX, a JavaScript syntax that looks like HTML, used in React to create user interfaces by writing HTML-like code inside JavaScript, with rules and expressions.

Learn how React components are reusable user interface blocks, with functional components leading, class components outdated, and how data flows from parent to child in a component tree.

Create and integrate a functional React component, organize components with a components folder, and understand main.jsx versus app.jsx while exporting and rendering using JSX and fragments.

Pass entire objects as props from a parent to a child in React, using user details like name, age, and city. Apply nested destructuring to access fields efficiently.

Explore how state and the useState hook empower React functional components to render updates in the browser, contrasting with normal variables and highlighting initial state and setState.

Explore state management in React using useState, updating name and counter values with onClick events, and observing real-time state changes in the browser.

Learn to update React state using callback functions and the previous state, implement increment, decrement, and reset with onClick, and understand how asynchronous updates ensure correct counts.

Learn how to update a specific item in a React state array using useState, including updating a car color with a previous state pattern and rendering items with map.

Explore the useEffect hook in React: it runs after renders to handle side effects like data fetching, DOM updates, and subscriptions, controlled by a dependency array.

Demonstrates two useEffect hooks: one depends on count1, the other uses an empty dependency array; observe that the first re-runs on count1 changes, while the second runs on initial render.

Explore how React handles events, learn to fire handlers with onClick and onChange, and inspect the event object’s target, type, and value.

Master React event handling by implementing mouse over, double-click, keyboard, input change, and form submit events with onMouseOver, onDoubleClick, onKeyDown, onChange, and onSubmit.

Render lists in React by mapping an array of objects and using unique keys, such as id, to display names in a ul.

Build dynamic, controlled forms in React by wiring inputs to component state with useState and onChange, display real-time values, and manage selections from a dropdown.

Learn to build a login form in React using a functional component with useState to manage email and password, embracing controlled components, onChange handling, and a submit flow.

Learn how prevent default stops the browser from refreshing on form submission and compare controlled versus uncontrolled components for handling form data in React.

Learn client-side form validation in React by validating emails and required fields, enforcing at least eight characters for passwords, displaying errors, and handling submission with preventDefault.

Explore prop-link in React by showing how data passes from grandparent to multiple intermediate components, identify the challenges of propagating data, and discuss the solution to the prop-link problem.

Learn how to solve crop killing with context API, using createContext, provider, and useContext to share data across components without prop drilling.

Learn what React Router is and how it enables client-side navigation in single-page apps, and install and set up routing by wrapping the app in BrowserRouter in main.jsx.

Navigate programmatically in React apps using the useNavigate hook, build an order flow from home to the order summary page, and implement a no-match 404 route for invalid URLs.

Master dynamic routes in React Router using a single parameterized path like /user/:id. Build a user details page that reads the id with useParams and links from the home page.