Foundations of Web Development: CSS, Bootstrap, JS, React

Set up the bootstrap environment by downloading compiled css and js or the uncompiled source, exploring scaffolding folders, and using the bootstrap CDN or package managers to begin rapid development.

Design a form with a form tag and form groups to logically bind labels and inputs for easy maintenance, then switch from a vertical to an inline form using form-inline.

Master bootstrap badges by applying the span tag with class badge to show dynamic counts, like inbox unread messages, on navigation pills and menus with pull right alignment.

Learn how bootstrap alerts work by applying the alert class, using dismissible alerts with a close icon, and styling contextual colors such as success, info, warning, and danger.

Learn how to implement Bootstrap breadcrumbs to display hierarchy, using an ordered list with the breadcrumb class, marking the current page with active, and enabling navigation back to higher levels.

Explore Bootstrap button groups to build menus and dropdowns, with horizontal and vertical layouts, nested groups, and responsive toolbars using btn toolbar and sizes like btn group sm and x.

Learn how to implement bootstrap buttons using the btn class, color variants (primary, info, warning, danger), sizes (lg, sm), block buttons, and disabled states, including anchor tags styled as buttons.

Explore Bootstrap list groups to display complex objects using list-group and list-group-item, with badges and active states. Create customized items with divs, headers, and descriptive text.

Learn to use bootstrap labels by applying the label class to spans, with contextual colors such as default, primary, info, warning, and danger, occupying only the text width.

Explore how the Bootstrap grid system enables responsive, mobile-first layouts using a 12-column grid, with prefix classes to split columns for large, medium, and small screens.

Learn JavaScript as a client-side scripting language embedded in HTML to enable validations, animations, and interactive web pages, with untyped, multi-paradigm, event-driven browser execution.

Explore JavaScript arrays as fixed-size data structures that store multiple values, access elements by zero-based indices, initialize with new Array or literals, and sort them with a bubble sort example.

Learn how JavaScript variables work: declare with var, manage local and global scopes, store values in a loosely typed language, and print with document.write using string concatenation and line breaks.

explore the introduction to JavaScript conditional statements, including if else and switch, how they compare conditions with variables and operators, and how switch performs short circuiting when a condition matches.

Use if else and else if in JavaScript to evaluate conditions, parse prompt input with parseInt, compute a percentage from three marks, and assign grades A to D.

Explore JavaScript iteration statements by learning how loops execute code multiple times using for, while, and do while, with an even numbers example, control flow, and nested loops.

Learn the for loop: initialization, condition, and increment; use it when iterations are known, with examples from 1 to 100, including even numbers, sums, and factorials.

Explore the while loop, a condition-driven alternative to for loops that runs until the condition becomes false. See a digits-counting example using prompt, parseInt, Math.trunc, and a counter.

Learn how the do while loop executes the block at least once, then checks the condition after, with a mandatory semicolon, using a pin entry and three attempts.

Explore loop control statements like break and continue in JavaScript, showing how they terminate or skip iterations within for, while, and do-while loops with practical examples.

Explore how the switch statement evaluates a variable against multiple cases, uses a default block, and handles vowels, consonants, and common menu scenarios with break.

Explore how JavaScript operators work, including unary, binary, and ternary operators, and practice arithmetic, modulus, and assignment with pre and post increment, and precedence examples.

Explore JavaScript logical operators and the ternary operator in practical login scenarios, using and, or, and not with prompt based user ID and password to control welcome or invalid messages.

Explore JavaScript comparison operators, including double equals for equality, not equals, and greater than, less than, and their equals variants, which return boolean results.

Explore JavaScript functions, learn modular design, how to pass parameters, return values, and call functions to build reusable code, with real-world examples like an atm workflow.

Explore JavaScript events and event-driven programming in web apps, using HTML attributes like onclick and onload to trigger actions. Swap images on mouseover and mouseout to demonstrate dynamic DOM interactions.

Learn how JavaScript handles runtime errors with try, catch, finally, and throw, and how exceptions are handled during code execution.

Explore how JavaScript cookies enable client-side state management, including session and persistent cookies, and see how to create and read cookies with document.cookie via a simple form example.

Demonstrate a client-side image slideshow using a JavaScript timer. Implement a four-image rotation with setInterval, start on page load, pause on hover, and resume on mouse out.

Create and access JavaScript objects with multiple properties, read properties via dot notation or a for-in loop, and explore JSON files (JavaScript Object Notation) read in Node or Angular apps.

Learn how to redirect to another page using JavaScript by calling window.location with a URL, triggered by a button click or a setTimeout after page load.

Explore how react components and templates form the building blocks of a web page, with each component containing its own template and logic, including jsx rendered to the dom.

Learn how to build a react app with multiple components, from a root app to a navbar and a home component, using imports and nesting to form a component tree.

Learn to render dynamic values in React by declaring variables before return and embedding them with curly braces in JSX, including numbers, strings, and arrays, plus dynamic attributes like href.

Explore managing component state in React using the use state hook, including destructuring a state value and setter, initializing with John and updating to Doe on click.

Build a React counter using useState in a quiz project by incrementing and decrementing a count starting at zero, wiring buttons with onClick to update state.

Discover how React props pass data from a parent to child components, remain read-only, and enable dynamic rendering with a reusable template instead of hardcoded data.

Learn to add styles in a React app with a global index.css (imported in index.js), style the navbar, and use inline JSX styling with dynamic values and camelCase properties.

Build a reusable react props project with functional components, a home parent and a library child, that pass four props title, author, description, date to render dynamic, css-styled book cards.