Zero to Hero React JS mastery E-degree course

Learn how cascading stylesheets add visual design to HTML skeletons, enabling responsive, cross-device layouts with inline, internal, and external CSS while applying element, class, and group selectors.

Discover how to use element, class, and id selectors, and grouping, with external stylesheets; learn when to apply classes for reusable cards versus ids for unique elements.

Master frontend debugging with browser developer tools, inspecting elements, monitoring network activity, and live-editing CSS while emulating devices across Chrome and Firefox.

Explore fonts in CSS: use font-family with fallbacks, adjust font-size, line-height, font-weight, and font-style; load Google fonts and manage font stacking for responsive, accessible text.

Explore how to style cards with border, background, height, and width using CSS, including border styles, colors, radius, and selective sides for precise layouts.

Master the box model, learning how margin, padding, and border affect total element width and content, and apply border-box sizing to resolve sizing issues.

Learn to use float and clear to align elements and prevent overlap in CSS. Style containers and items with margins, padding, and text alignment, and explore centering and justify techniques.

Master CSS pseudo-selectors to style containers, links, and buttons, control borders, backgrounds, margins, and alignment, and apply active states through practical examples.

Explore the css display property to switch between inline and block, convert images to block for centering with margin auto, and use width to arrange blocks responsively.

Explore the css position property by demonstrating static, absolute, relative, fixed, and sticky behaviors, including top and left offsets, positioning contexts, and its impact on the dom.

Explore how visibility and z-index control element display and layering in CSS, using practical examples of visible, hidden, display none, and positioned elements with absolute, relative, fixed, and sticky.

Master flexbox fundamentals to build responsive layouts by creating flex containers and items, applying display:flex, and controlling direction, alignment, spacing, wrapping, and sizing with flex-grow, flex-shrink, and flex-basis.

Learn to build a single responsive website that adapts to desktop, tablet, and mobile using viewport settings, media queries, flexbox, and fluid units like em, rem, vw, and vh.

Explore how media queries power responsive design by adapting CSS rules to mobile, tablet, and desktop viewports, showcasing dynamic styling, visibility changes, and device-specific layouts.

Explore advanced selectors, compare class-based and element-based selection, and learn to target specific paragraphs, containers, and sibling or child relationships to apply styles precisely.

Explore how to use CSS selectors, including the nth selector and pseudo selectors, to target form inputs, anchors, and specific elements with practical styling examples.

Learn how to use the before and after css pseudo selectors to insert content and style sections, center layouts with flex, and enhance website structure and visuals.

Explore CSS box shadow and text shadow techniques to style card layouts, including offset, blur, and inner shadows, with color, opacity, and layout tuning.

Learn to create and use css variables and custom properties to style pages, control color, borders, and layout with flex, centering, and global versus local scope.

Explore CSS animations with keyframes, naming animations, and configuring duration and iteration count to control motion and apply these effects to a box.

Explore CSS animation keyframes and properties, including delay, animation-direction, and alternate, by defining multiple keyframes and animating a box's position with precise timing and transforms.

Master CSS transitions by targeting a property with transition, applying background color on hover, and using duration, timing functions, delay, and shorthand for all properties.

Apply the CSS transform property to shape and animate elements, rotating, scaling, translating, and skewing boxes with smooth transitions and 3-D effects.

Install Visual Studio Code for local JavaScript development, then install two extensions to run a local server, create folders and files, and begin building your project.

Learn to write your first JavaScript by building a basic page, using alert and console.log, and debugging with browser developer tools.

Learn how JavaScript uses dynamic typing to declare variables without explicit types, store numbers, strings, or booleans, and handle undefined values.

Explore comments in JavaScript, including single-line and multi-line formats. Learn how commenting out code prevents execution and aids debugging with the console.

Explore JavaScript operators and operands, including binary and unary operators, arithmetic operations, string concatenation, exponentiation, and increment and assignment variants.

Learn string concatenation in JavaScript for React development, compare classic concatenation with template literals, and master escaping, quotes, and newlines to compose clear strings.

Explore string functions in this lecture, including length, indexOf, slice, substring, splice, replace, plus case conversion with toUpperCase and toLowerCase, trim, and character access with charAt.

Master JavaScript scope by comparing global, local, and function scope, and learn how var, let, and const declarations control accessibility and modification.

Learn how to use control statements such as if else and switch case to make decisions in code, using boolean checks and comparisons, with debugging and break to control flow.

Explore how to work with objects in JavaScript, print and inspect values, understand primitive types and undefined defaults, and learn object destructuring to extract specific properties like name and age.

Explore how to create interactive prompts with prompt, alert, and confirm in JavaScript, including parsing user input, converting strings to numbers, handling defaults, and implementing a yes-no confirmation flow.

Loops in JavaScript are explained, including for loops with initialization, condition, and increment; iterating arrays by index and length; and comparing while and do-while behavior.

Master the spread operator in JavaScript, learning how to join arrays and add new elements with the ... syntax. See live examples and console outputs demonstrating practical array manipulation.

Explore the ternary operator by evaluating a condition to produce a one-line output; if true, return a value, otherwise return another.

Explore the document object model and learn how to select elements by id, class, or name, then modify their content and attributes through dynamic DOM manipulation.

Discover how to manipulate the DOM with JavaScript by selecting elements via id, class, or query selector, reading and setting values, and dynamically updating content and styles.

Learn how to schedule code with setTimeout, cancel it with clearTimeout, and manage delayed UI changes and one-time messages after a timer.

Learn how setInterval executes a function every few seconds, stop it with clearInterval, and implement dynamic updates such as text color changes and content changes over time.

Use the JavaScript date object to display current time and milliseconds, create clocks, and explore UTC versus local time and elapsed intervals.

Calculate new dates and measure performance with milliseconds. Build a world clock and time zone features in React.

Master how JSON object notation enables data exchange between the front end and back end, by creating, stringifying, parsing, and manipulating JSON data in real-world web applications.

Explore how arrow functions in ES6 offer a shortcut to traditional JavaScript functions, with examples of one- and two-parameter forms, returns, and using setInterval with a delay in milliseconds.

Learn the window and document objects, how to inspect and debug with console and history navigation, and store data using localStorage and sessionStorage, including JSON string conversion.

Explore the math object and its functions in JavaScript, including constants like square root of two and e, plus rounding, powers, absolute values, and random numbers with min and max.

Create a calculator app in React with input handling and selectable operations. Validate input, convert strings to numbers, perform calculations, and display the result.

Build a React app that computes a value between a min and max, includes validation, and demonstrates fixing undefined values and inclusive bounds.

Fetch data from an API and render post titles and bodies in a React app. Learn to handle JSON, iterate over results, and display details from a placeholder API.

Explore React as a JavaScript library for building user interfaces with a component-based, declarative approach, and learn JSX, the virtual DOM, and environment setup with Node.js and Visual Studio Code.

Set up node and npm, create a React app, open it in Visual Studio Code, and start a local server with hot reload to see changes.

Explore the folder structure, npm workflow, and core React concepts driving a single-page app: from node_modules and package.json to the index.html root div and dynamic component rendering.

Explore types of components in React, including stateless functional components and stateful class components, with nested reuse, props, and JSX rendering to build scalable user interfaces.

Create and export a default functional React component using a Pascal naming convention, render a hello message via JSX, and enable reuse across the app with scoped styling.

Compare functional and class components to reveal stateless presentation versus stateful data management, and advocate using functional components for simple UI while noting class components' complexity and lifecycle considerations.

Explore JSX explained in the zero to hero react js mastery course, comparing functional and class components, and understanding JSX syntax, attributes, and conventions like className and event naming.

Master passing data with props in functional and class components, using a reusable display component, exploring children, and rendering props in jsx with curly braces.

Explore how props pass data from parent to child in React and remain immutable, while class component state holds mutable values updated with setState through user events.

Learners explore using setState in class components to update a count from zero, emphasizing not mutating state directly and handling asynchronous updates with a callback.

Learn to handle forms in a class-based React component by creating a form component with email input and labels, importing and rendering it, and capturing user input for submission.

Learn to manage form inputs in a React class component by binding onChange handlers to state, updating state from event.target.value, and preventing default submission to access collected data.

Explore React class-based lifecycle methods with a focus on componentDidMount, showing why data fetching and API calls belong here after the DOM loads, while avoiding operations in the constructor.

Create a new React app from scratch and start the server. Understand the project structure, including node_modules, public/index.html, and the root div, plus components organization for a single page app.

Build a reusable navigation component in React, apply bootstrap styling, use className, and wire home, about, and contact routes in a single-page app.

Explore adding react-router-dom and implementing routes for home, about, and contact with browser-based navigation to avoid page refresh in a single-page application.

Learn to replace anchor tags with react-router-dom Link and NavLink to avoid page reloads, manage active states with exact and active classes across home and other pages.

Design and implement about and contact pages using Bootstrap utilities for padding and margins, apply lead typography, and replace class with className to render a form in React.

Build and render a dedicated page not found (404) for missing routes in a React app, diagnose routing issues, and ensure the 404 content appears correctly across pages.

Discover how to install and use Bootstrap vs React-Bootstrap, import components like Button from React-Bootstrap, and compare using className with Bootstrap styles versus React-Bootstrap components in a Bootstrap 5.1 project.

Learn how to apply custom styling to a not-found page, hide the navigation item, and use CSS imports to center content and add home links in React functional components.

Set up a backend fake api with json server to manage users via get all users, add, update, and delete operations from a react frontend, using axios calls.

Learn how to fetch data with axios in a React app using useState and useEffect, store results in state, handle async calls, and inspect with the React Dev Tools extension.

Show how to render state data in a frontend UI table using React Bootstrap, mapping users to display name, email, and phone with an index.

Learn to add an action column with view details, delete and add user buttons in a React frontend, using bootstrap styling and properly assigned keys for mapped data.

Learn how to implement user navigation routing in a React app by creating an AddUser page, wiring links in the navigation bar, and preparing a form for user data entry.

Style the add user component with a bootstrap container and a 75% width form, adding a glassy shadow; create inputs for full name, last name, username, email, phone, and website.

Learn to save a new user to the database with a post API call in a React app by validating form data and redirecting to the home page.

Learn to save user data to a database via a post api by building a user object from name, email, phone, username, and website state.

Implement a pre-populated edit user form by passing the user id through dynamic routing, then fetch and populate data via an API call with useEffect.

Update a user's data in the database via a put API call by ID, using dynamic routing to reuse a single edit screen for multiple users and reflect changes.

Implement delete user functionality with a danger button that calls deleteUser(userId) and uses Axios to delete the user; then reload data to refresh the UI.

Implement the view user details feature by adding dynamic routing, fetching user data with useEffect and useState, and displaying it using a Bootstrap list group, with navigation back to home.

Learn to view and display a user's address and company info in a React app by managing nested state with useState, rendering address and company fields, and adding back navigation.

Implement a loading spinner in React by using a boolean loading state and a ternary operator to conditionally render the spinner or data while loading.