HTML, CSS, JavaScript, React - Online Certification Course

Explore how CSS cascading style sheets replace table-based layouts with flexible rule sets that format text, images, and tables. Link a single style sheet to update many pages at once, eliminating repetitive styling.

Explore the css syntax with selectors, properties, and values, and learn how to style pages by changing the body background to pink and the font to Arial.

Explore the three types of CSS styles: internal, inline, and external, and learn how to apply and link them, plus why inline rules are usually discouraged.

Explore how CSS colors are created with red, green, and blue in RGB, and apply color names, hex codes, and RGB values to h1, h2, and h3 styles.

Explore CSS classes and spans to style HTML elements from a style sheet, define classes, and apply them to text and specific words using span tags.

Explore how divs replace table cells to organize content with greater formatting control, including rounded corners, transparency, layering, and pixel-perfect positioning, by creating and previewing a basic div in HTML.

Explore how CSS IDs differ from classes and assign a unique id to a div to control width, border, background, and text color with the # selector.

Apply and adjust CSS margins to control spacing around elements, using top, right, bottom, and left values or the shorthand margin, and preview changes in the browser.

Learn to add padding around text inside a div and control spacing on all four sides. Adjust top, bottom, left, and right values to see different gaps.

Explore CSS text properties including color and color codes (web color and RGB), letter spacing, word spacing, text alignment, decoration, and transform, with hands-on class application to paragraphs.

Learn to use the CSS font properties to define font family, size, style, and line height by creating a text style class and applying it to a paragraph.

Learn to add borders with a my border class, specify top, bottom, left, and right borders, set thickness and color by name, hex, or rgb, and apply dashed style.

Explore CSS backgrounds by applying the background property to a div. Create an html file and style sheet, then use background color, background image, and repeat or center positioning.

Learn to control image transparency with the CSS opacity property, applying 40% and 90% values, and create a hover effect that changes opacity from 40% to 100%.

Apply width and height declarations to a div to control its size. Use min-width, max-width, min-height, max-height, auto, and viewport height (vh) to create responsive layouts and predictable behavior.

Place text over a background image using nested divs and CSS, with a container and a semi-transparent black text box controlled by two id selectors and white text.

Explore how the CSS display property controls element visibility and layout, using a container and four divs to show inline-block alignment and the effect of display none.

Explore the four main types of position declarations—static, relative, absolute, and fixed—and understand how static serves as the default, with elements flowing in the normal document flow.

Explore how relative positioning uses top and left coordinates to move elements, and how a nested div shifts 80 pixels from its parent's top and left.

Discover how absolute positioning fixes an element in the exact position specified, ignoring page flow during browser resize, and compare it to relative positioning with a parent and nested div.

Learn how fixed positioning differs from absolute positioning by keeping an element stationary while the page scrolls, as shown with a scrolling text block and a nonmoving parent div.

Learn how the CSS float property wraps text around images by placing an image on the left or right, adding margins, and using a stylesheet in a basic HTML page.

Explore how the CSS clear property controls the flow of elements around floats, preventing the yellow div from wrapping around the blue float by applying a clear declaration.

Explore how the z-index property controls stack order, using two divs with absolute positioning to show that a higher z-index places the blue div above the yellow div.

Learn to style links in CSS across unvisited, visited, hover, and active states, using color, text-decoration, and background changes demonstrated with a live example.

Learn how CSS tables enhance the look, styling, and responsiveness of HTML tables; examine a sample with borders, left-aligned text, border-collapse, padding, and a hover cyan effect to improve readability.

Create a responsive three-column css layout with a top navigation, four links with a mouseover effect, and an active state, adaptable to all screens.

Create a basic HTML page and CSS stylesheet to build a fluid multi-column layout with fixed left and right columns and a center content area, plus a header and footer.

Create a horizontal navigation bar by styling ul and li: remove bullets, zero margins, float left, add border-right, and use white centered links with hover and a blue active state.

Learn to create a responsive CSS layout using media queries at 840px and 600px, stacking the columns under the main content for mobile view.

Create a responsive css layout by building a page with a container, header with navigation (unordered list), a content wrapper, and three columns.

Understand the document object model (DOM) as a browser-based tree of HTML elements, and see how JavaScript updates elements, attributes, and CSS via tag, id, and class selectors.

Learn basic DOM manipulation with JavaScript by changing text in an HTML document using a click event on an h1 element.

Introduce JavaScript as a client-side language that adds interactivity to web pages, with examples like character counting, form validation, and a tic-tac-toe game, plus browser limitations.

Place JavaScript in the head to load before the body. Observe how the See Years function reads age, multiplies by seven, and updates dog age on the calculate button click.

Create and use an external JavaScript file, then call it with a script tag src attribute. External files improve maintainability and page load speed through caching.

Explore JavaScript data output methods, including document.write and window.alert, with a simple 5 plus 6 example showing results display in the page and in a pop up.

Learn how the innerHTML function outputs data into an HTML element by using getElementById to display results from a JavaScript calculation, such as six plus three showing nine.

Explain code by using single-line and multi-line comments to reveal function purposes in long blocks, enhancing readability for teams; demonstrate with innerhtml and an executable function.

Discover how JavaScript constants hold fixed values, see five plus six output as 11 in a paragraph with the id math, and learn to use numbers and quoted strings.

Use JavaScript variables as named containers that store a single value or multiple values, distinguish numbers from strings by quotes, and apply unique identifiers and getElementById for output.

Learn how the equals sign acts as an assignment operator in JavaScript, assigning the right value to the left and letting numbers and strings interact.

Learn how JavaScript arithmetic operations work by adding, subtracting, and multiplying numbers using constants and variables, with live outputs demonstrated in a browser.

Explore JavaScript arithmetic operations, including division, increment with x++, and decrement with h--, by declaring variables and displaying outputs in a browser using a div and paragraph.

Understand how operator precedence governs the order of arithmetic operations—from brackets and exponents to division, multiplication, addition, and subtraction—through a practical browser test.

JavaScript variables can hold numbers, strings, arrays, and objects; this slide shows age as 16, last name as Johnson, cars as an array, and person as an object with properties.

Explore JavaScript objects by modeling a car with properties such as type, model, and color. Access properties using dot notation and output them with the getElementById method in the browser.

Output multiple object properties from a person object, such as first name, last name, age, and eye color, using getElementById and plus signs to form 'John has blue eyes'.

Discover how JavaScript strings store text, use single or double quotes, and manage quotes inside strings with line breaks via the break tag, shown with John Smith and Roy Martin.

Determine a string's length in JavaScript using the built-in length property. Learn through an example with a TXT variable containing the alphabet and display the result with innerHTML.

Learn how to escape quotes in JavaScript strings using the backslash escape character to display quotes around words like players in the browser output.

Generate random numbers in JavaScript using Math.random, which outputs a value between 0 and 1. Save the file, then output with getElementById and refresh the browser to see different numbers.

Use Math.min and Math.max to find the lowest and highest values in a numbers list. The example shows -150 with Math.min and 600 with Math.max.

Explore how the JavaScript Math.round, Math.floor, and Math.ceil functions round numbers to the nearest integer, up, or down, with examples like 15.4 and 15.6.

JavaScript arrays store multiple values in a single variable, demonstrated with a fruits array of six items, indexed from zero, and using the length property to show the total count.

Output array values using the toString method and customize separators with join, demonstrating an asterisk separator with surrounding spaces.

Learn to remove the last element with pop and the first with shift, then add to the end with push and to the beginning with unshift.

Learn how to change and delete array elements by index in JavaScript, renaming Apple to Kiwi and deleting pear to show an empty space, then preview updates in the browser.

Use the splice method to insert multiple items into an array, starting at index two with no removals, as shown by adding lemon and banana after orange.

Sort a JavaScript array alphabetically with the sort method on a cars array (Volvo, Acura, Honda, Lexus), then reverse the order using the reverse method and preview in a browser.

Join two arrays with concat to combine the girls and boys arrays. Store the result in combined and output it via getElementById, then preview in the browser.

Explore how JavaScript uses if, else if, and else with a score variable to convert a numeric score into a letter grade, applying grading thresholds and displaying results with document.write.

Explore JavaScript comparison operators that determine equality, inequality, and difference between values. See a test script that uses a variable set to six and getElementById to output true or false.

Explore how JavaScript booleans determine truthy and falsy values, testing numbers and strings with seven variables via getElementById output to reveal which values evaluate to true or false.

Learn how for loops execute a block of code repeatedly, outputting values from 0 to 10 on separate lines with count starting at zero and incrementing by one.

Demonstrate how the for-in loop traverses an object's properties and outputs each item, as shown with a person object containing first name, last name, and age (John Smith and 30).

Explore how the JavaScript while loop repeats a block of code while a condition holds, outputting a variable from 0 up to 20 and incrementing by 1.

The do while loop runs the code block once, then repeats while the condition is true. The example sets i from 0 up to 9, with i=11 running once.

Learn to use break and continue in JavaScript to exit a loop or skip iterations. See a for loop from 0 to 9 that stops at three.

Create reusable blocks of code with JavaScript functions that run when called, accepting parameters a and b and returning a multiplied by b.

Explore JavaScript events in HTML, including onClick, on mouse over, on mouse out, key down, and document load, and see how the date displays via inner HTML.

Set up an HTML page and a JavaScript script to randomly pick a color from an array of hex colors and apply it as the page background on each refresh.

Create a JavaScript and CSS photo gallery with top thumbnails that change the main preview image on hover. Implement thumbnail hover styles and overall CSS borders, background, and text formatting.

Create a centered page with a header and a preview image, then build a thumbnail gallery that swaps the main image via onmouseover using the preview and thumbnails classes.

Develop your React skills by mastering essential JavaScript concepts, such as arrow functions and destructuring, plus basic CSS knowledge of classes and selectors, all driven by a desire to learn.

React is a JavaScript library for building user interfaces, maintained by Facebook, that is minimal and not a full framework, letting you choose from tools for state, routing, and authentication.

Build a basic React calculator in a single file, styling simple buttons with CSS while learning to assemble small functions for core calculations.

Explore a beginner's introduction to react by building a simple hello world in an index.html using a cdn and rendering with react and react-dom into a root div.

Identify the two essential tools for starting React development: Node JS and a code editor like Visual Studio Code, available on Windows, Mac, and Linux; install them and proceed.

Explore quick react prototyping in codepen with a three-pane editor and a calculator project, using html, css, and js imports, babel and jsx, and live updates.

Learn to use JSX to embed HTML inside JavaScript, boosting code cleanliness, safety by preventing injection attacks, with React components, and see how Babel translates JSX to browser-ready code.

Learn how to build a functional component in React by returning JSX, turning a simple hello example into a component, and exploring function versus arrow function approaches.

Explore what functional components are in React, identify reusable blocks like product blocks and search bars on amazon-style pages, and see how a calculator uses a master component and buttons.

Learn how props pass information from a parent to a child in React, and render dynamic content by using primitives, functions, and objects through component props.

Learn how React components establish a one-way data flow with props and callbacks, enabling a parent component to manage child data and handle child events in a reusable component tree.

Design a basic calculator UI in React by creating a calculator component and reusable calc button, passing values through props, and styling with a four-column CSS grid and a display.

Learn to implement onClick events in React for a calculator, using props callbacks and capitalizing the second word in event names. Pass parameters via onClick to identify the pressed button.

Establish React callback patterns by passing callbacks from parent to child via props, handling onClick events, and receiving the clicked button value in the parent.

Learn how to implement and manage React state with the useState hook, initialize state, read and update it, and observe efficient re-renders in a calculator example.

Learn to build a calculator display in React by storing a JSON object in state with current and total, concatenating digits, handling initial zero, and rendering the display.

Implement a calculator in React by wiring operator buttons to a do calculation function and using pre-op state to perform plus, minus, multiply, and divide, updating the total display.

Learn to debug React apps using debugger statements and console logs to inspect current value, current total, and pre-op, fix state overwrites, and streamline equals handling with the handle operator.

Review a beginner React project that builds a basic calculator, explores components and props, component design, rendering, and state management with the useState hook, and invites learners to expand features.

Create a React game by building a Connect Four clone with a configurable grid, clickable counters, and a two-player or human-vs computer mode, featuring a suggest button.

For React development, you need Node.js and a code editor; Visual Studio Code is a popular choice. Download Node.js from nodejs.org and install VS Code on any platform.

Bootstrap a React app with Create React App, install dependencies, and run the development server to view at localhost 3000; create a simple game board component in a components folder.

Create a game circle component in React and render 16 instances in a 4x4 game board, then implement an onClick handler that shows an alert message.

Learn to distinguish game circle components by passing an id prop and using destructuring to read props, while leveraging React children to render dynamic content and prepare for onClick interactions.

Learn how to pass id and value parameters to React onClick handlers with arrow functions, avoiding immediate execution, and how to handle the event and props from a parent.

Learn inline styling in React by applying text color and background color with the style prop, and pass color from a parent to a child via destructured props.

Build a 4x4 game board in React using CSS grid and inline styles to create 16 circles, then center the board with a style object and absolute positioning.

Create a global css file and move styles from the game components into it for the game board and game circle, import css, and use className to apply the styles.

Learn dynamic styling in React by computing background color from the incoming ID using a ternary expression and modulus, replacing inline color props, and using dynamic class names.

Replace inline styles with dynamic CSS classes for odd and even game circles, using modulus, backticks, and a ternary expression to apply appropriate classes.

Learn to implement a callback flow by passing an onCircleClicked prop from the game board to the game circle, sending the clicked circle id for handling in the board.

Master react state with use state by tracking a 16-element zero-filled array for circle ownership. Define idle, in-progress, finished states and update circle colors by player on click.

Refactor the tic-tac-toe board by adding a render circle helper, use player constants, toggle current player to update circle colors with dynamic classes, and embrace immutable array updates.

Learn to immutably update a React game board using map with previous state, avoid shallow copies for nested arrays, and initialize a 16-circle board with a loop.

Add a unique key prop to each mapped JSX element in React to identify list items, using a unique id to prevent render warnings.

Style the game board with bisque background, border, border radius, and a drop shadow, and add header and footer components to show turns and a new game button.

Learn to dynamically show the player's turn and detect a win on a 4x4 grid using a winner helper with ten winning combinations, avoiding state mutation amid React's asynchronous updates.

Detects the winner via a win lines check on a copied board, updates the header, and manages a game state (idle, playing, win, draw) with current and win players.

Implement an is draw function that counts zeros on the game board using reduce to determine a draw, then update the header to display 'game is a draw'.

Learn how React lifecycle events work with useEffect to run code on first load or on every render, based on dependency arrays; see how state or props changes trigger updates.

Initialize the game using the componentDidMount equivalent in hooks to set up the board. Define an init game function to reset state, start with player one, and wire onClick.

Add a suggest button to let the computer take the next move in a two-player game, using a helper to choose a random valid move.

Improve the computer player by detecting potential wins in all directions and blocking them, using a get position function with a random fallback when no threat is found.

Discover how to define CSS variables at the root and apply them with var(--name) to color the game UI. Update colors for background, panel, board, and players for quick themes.

Learn conditional rendering in React by showing either the new game or suggest button in the footer based on game state. Explore inline and function-based approaches to control visibility.

Deploy a React app for free using Netlify or Surge, build the project, and publish via drag-and-drop or manual deploy.

Deploy your app to Surge as a free alternative to Netlify by installing surge, running npm install -g surge, and pointing Surge to your build folder with the default domain.

Develop a playable Connect4 game in React, using useEffect and useState, callbacks, and prop deconstruction, while applying dynamic inline styles and dynamic classes.

Build a bare-bones e-commerce site with product lists, view a product, add-to-cart, dynamic cart updates without page refresh, and a simple checkout form to reinforce React-based shopping functionality.

Bootstrap a mini ecommerce project with Create React App, learn to simulate a rest api using json server, and set up local development with code editing and running the server.

Set up a JSON server as a mock REST API with a db.json containing categories and products, and test endpoints on port 3001 to verify data retrieval.

Fetch json data from a local json server in a React app using the fetch API, manage results with use state and use effect hooks, and render category titles.

Style a simple store layout with left categories, header, main, and footer, fetch categories from a JSON server using fetch, and load products on category click with an empty dependency.

Learn to create a separate category component in React, map category data from a JSON server, destructure props, and ensure keys for each item, and fetch products on click.

Bind categories to click events, fetch products by category from the JSON server, and render results, with plans for error handling, loading indicators, and code cleanup.

Refactor the fetch API calls into a dedicated fetcher.js utility that uses a localhost:3001 base URL to fetch categories, and wire it into app.js with async/await in useEffect.

Wrap fetch calls in a try-catch, return a structured response with an error and data, display the error in the UI, and expose get categories and get products.

Improve fetch API calls by checking response status, throwing an HTTP error for not ok responses, and surfacing a clear 404 message when the URL is wrong.

Style the product list with a three-column css grid featuring image, features, and price, using assets and a json database for dynamic product details.

Master client-side routing in a React e-commerce app with React Router version 6, installing via npm and wiring routes for home, product details, basket, and checkout.

Learn to fix React key warnings by adding unique keys to mapped lists, using product IDs for items and array indices for string features, ensuring stable component identity.

Learn to implement dynamic routing with React Router by wiring product detail pages, using Link components and the useParams and useNavigate hooks, and configure routes for basket and checkout.

Read the product id from the route using the use params hook, fetch the product by id from a json server, and display its title on the product detail page.

Enhance product detail page with a three-column layout showing image, title, specs, features, price, stock, and description from an asynchronous get by ID call; explore styling with React styled components.

Learn how styled components in React encapsulate CSS within components using CSS-in-JS, install via npm or yarn, import styled, and build dynamic styles with props and extendable styles.

Learn how to use styled components to separate CSS, create a product description component that spans three columns, and refine the product details page layout while addressing react router navigation.

Learn to render HTML in React using dangerouslySetInnerHTML with a createMarkup function that returns __html, enabling bold description text while understanding the risks of HTML injection.

Convert category items into React Router links, add a categories/:categoryId route, and fetch and display products for the selected category while preserving the page layout.

Refactor the layout to render routed content inside a layout using an outlet, convert categories to links with React Router, and move app markup into a dedicated layout component.

Refactor the home page by moving routing to app.js and using a layout component, passing categories via props to render. Add a home component and routes for home and basket.

Learn how to use React context to manage a cart in a single place, create a cart context provider, and share cart items across components.

Learn to build a cart management system in React using useContext and useReducer, creating a cart reducer to add products to the cart with payloads containing id, title, and price.

Extend the cart reducer with add, remove, increase, decrease, and clear methods, expose them through a basket context, and implement a styled basket page showing items, total, and checkout.

Implement basket functionality by rendering cart items from context and retrieving them with get items, display quantities and prices, link to products, and enable increase, decrease, and delete actions.

Import and display home icon, up icon, down icon, and trash icon, then wire click events to navigate to checkout, adjust quantities, and clear the basket while updating the total.

Implement a dynamic basket total using JavaScript reduce, render it on the right, update with quantity changes, and add header icons plus CSS tweaks for white links.

Finish the checkout by enabling user input and validation, and persist the shopping basket across page refreshes and browser reopenings using a persisted global context for a professional e-commerce experience.

Fix the basket refresh by using local state and a useEffect to load items from context, then update a new items array with non-mutating operations to rerender the cart.

Implement a checkout flow in React by building a checkout page with name, email, billing and shipping addresses, and wiring an order confirmation route with a thanks message.

Learn to persist cart items using local storage or session storage in React, serialize data with JSON, and read with get item and set item to initialize state.

Implement a top search bar that updates the url with a search parameter and displays results in a dedicated area, wiring a search results route and performing query-based product lookups.

Implement debouncing in search component to reduce API requests by delaying calls until typing stops. Use useEffect and setTimeout with cleanup to show no results found and improve user experience.

Turn checkout inputs into controlled components with useState, handle changes, and submit via onSubmit. Use placeholders and required attributes for browser validation, with plans for advanced validation next.

Learn to validate React forms by disabling the confirm button until required fields are filled, implement custom validation for name, email, and address, and prevent default submission with React.

Leads learners through visual form validation in a React app using styled-components, adding required field indicators, red borders on invalid inputs, and an errors-driven invalid prop for dynamic styling.

Learn how to validate forms in React using onBlur to trigger validation, track touched state for fields, and display red error indicators when inputs are invalid.

Route with React Router, style with styled components, share state via React Context and useReducer, and manage the basket with local storage while fetching from a mocked JSON API.