HTML, CSS, React - Certification Course for Beginners

Explore cascading style sheets to replace table-based layouts with flexible, browser-friendly style rules, enabling you to update hundreds of pages from a single stylesheet and apply consistent typography and colors.

Discover how css rules use a selector, a property, and a value to style html elements, and apply a style sheet to change page background to pink and set fonts.

Learn to use internal, inline, and external CSS style sheets, convert internal to external, and link a CSS file. Note that inline rules are inefficient.

Learn how CSS colors are created from red, green, and blue and applied with color names, rgb color codes or hexadecimal values, using examples with h1, h2, and h3 styling.

Learn how to create and apply CSS classes using the class selector, define styles in a stylesheet, and apply them to text with span tags for inline styling.

Discover how divs in CSS pages improve formatting and positioning compared to table cells, offering rounded corners, transparency, and layered layouts through open and closing div tags.

Discover how CSS IDs create elements, unlike classes. Define an ID with # and apply it to a div to 80% width, 3px black border, yellow background, and blue text.

Explore how CSS margins create spacing around elements, apply margins to a div by its id, and use the four-value shorthand to set top, right, bottom, and left margins.

Learn how to apply CSS padding to div content, control spacing on all sides or specific sides with pixel values, and preview changes after saving.

Explore CSS text properties to color and format text, including color codes (web color code and RGB color code), spacing, alignment, decorations, and text transforms applied via classes.

Explore the font property to set font family, size, style, and line height, use a class to apply these declarations to a paragraph, and see browser fallback with Verdana.

Create the my border class with border thickness in pixels, color, and style declarations to apply a dashed border to a paragraph, then preview the result in the browser.

Learn to set backgrounds with css by creating an html file and a style sheet, using an id selector to apply color and background image, control repetition and center position.

Explore how to control image transparency with the CSS opacity property, including setting 40% and 90%, and implementing a hover effect to change from 40% to 100%.

Explore how css width and height control a div’s size, using min-width, max-width, min-height, max-height, and auto, with viewport height to fill the screen.

learn to place text on an image using css, styling nested divs with a background image and a semi-transparent black text box via two id selectors.

Learn how the CSS display property affects visibility and layout by experimenting with a container and three nested divs, showing inline-block alignment and how to hide an element with none.

Learn how the CSS position property controls element layout. Understand static positioning as the default in the normal flow and examine relative, absolute, and fixed positioning.

Explore how CSS relative positioning shifts elements using top and left, showing how a nested div moves 80 pixels within its parent, not the page, and changes with position: relative.

Apply absolute positioning to keep an element fixed in place, regardless of browser resizing, and understand how nested divs relate to their parent.

Learn CSS fixed positioning and how it differs from absolute positioning, ensuring elements remain stationary as content scrolls.

Learn to wrap text around an image with the CSS float property on an HTML page, using float right or left, and a 10px margin on the left and bottom.

Use the clear property to control floating elements and prevent wrapping, as a blue left float makes red text wrap and a clear declaration moves the yellow div below.

Discover how the CSS z-index property controls the stack order of absolutely positioned elements, demonstrated with two divs where increasing z-index places blue on top of yellow.

Learn to style links with CSS by defining four states—unvisited, visited, hover, and active—and applying color and decoration: red default, purple hover on yellow, and blue for visited or active.

Apply CSS tables to improve the look, styling, and responsiveness of HTML tables, using borders, padding, and hover effects to enhance readability.

Create a responsive three-column webpage with a top navigation bar, hover effects, and an active link. Stack header, blue and yellow content areas, and a footer for mobile compatibility.

Learn to build a basic HTML page and style it with CSS rules, including a zero-margin body, a black header, a fluid content wrapper, and left and right fixed-width columns.

Learn to style a navigation menu with an unordered list: remove bullets, align items in a row, add borders, and set an active blue background for the first link.

Create responsive css rules using a media query at 840px to stack the left and right columns beneath the main center content area, with adjustments for 600px.

Create a structured page by adding divs inside the body, with a container, header, navigation, and a three columns layout featuring inner text padding and a footer.

Develop your React skills by mastering basic JavaScript concepts like arrow functions and destructuring, and applying HTML and CSS fundamentals such as classes and selectors, with a desire to learn.

Explore how React, a lightweight JavaScript library for building user interfaces, uses a virtual dom to efficiently manipulate the view layer, with minimal built-in functionality.

Build a basic calculator project in a single file to learn React, using minimal CSS for the buttons and demonstrating simple calculations like 2+3=5 and 2*3+5=11.

Beginner-friendly course introduces React with a minimal hello world page. Create an index HTML file, set a root div, and render a hello message with React DOM.

Install essential tools to start our reactor development: node.js on Windows, Mac, or Linux, plus a code editor such as Visual Studio Code or Sublime, with download links provided.

Explore CodePen for React coding with HTML, CSS, and JS panels, see live updates, and learn to enable Babel JSX for a hello React calculator project.

Discover how JSX enables embedding HTML inside JavaScript, learn why Babel translates new features for browser compatibility, and explore nesting HTML and inserting JavaScript expressions with curly braces.

Learn to turn a simple React expression into a functional component that returns JSX, explore executing functions versus rendering components, and compare traditional function syntax with arrow functions.

Explore how functional components serve as the building blocks of a website. Identify reusable components like product boxes, trending deals, gift ideas, and a calculator interface.

Introduce props in React and show how a parent component passes data to a child, using the props parameter and curly braces to render values.

Explore a component-based design in React by building a reusable component tree with a root app and child components, and master parent and child communication through props and callback functions.

Build a basic calculator as a React function component and a CalcButton subcomponent, passing values via props. Use CSS grid and className to arrange the calculator and display.

Learn to wire onClick events in React by capitalizing the second word, pass callback handlers via props, and connect buttons to number and operator functions.

Explore passing parameters in React callback functions by sending button values from child to parent via props on click, demonstrating the down‑and‑up data flow of events.

Learn to implement React state with the useState hook, initialize to zero, update the display with setDisplay from a handle number, and observe efficient rendering via the virtual DOM.

Use React state to store a JSON object with current and total, concatenate digits for the display, and handle the initial zero to begin input.

Implement a calculation workflow by adding a do calculation function and wiring operator buttons (plus, minus, multiply, divide) to update the total and display.

Debug React apps by using debugger statements and console logs to trace current value and current total, fix undefined pre-op state, and streamline logic by reusing handle operator for equals.

Build and review a basic React calculator by creating components, mastering props, callbacks, and the useState hook, then expand with decimals, memory, and additional buttons.

Build a connect-four style game using React in a beginner-friendly HTML, CSS, React course. Learn to implement two-player and computer opponent play with adjustable grid size.

Discover the essential tools for React development: install Node.js from nodejs.org and choose a cross-platform code editor like Visual Studio Code or Sublime.

Learn to bootstrap a React app with Create React App, start a development server, and build a minimal game board component in a simplified project setup.

Create a 4x4 grid of 16 game circles in React by building a game circle component, importing it into the game board, and wiring an onClick event to alert.

Pass an id prop to each game circle, read it from props to distinguish circles, and render it. Then use React children to render inner content between tags.

Learn how to pass id and value as parameters to React on click handlers using an arrow function, preventing immediate invocation and correctly handling the synthetic event.

Learn how to apply inline styling in React by passing color props from a parent component and using camelCase style properties like backgroundColor to color text and circles.

Transform a React game board from inline styles to a polished 4x4 grid using css grid, with circular pieces and a centered layout via a style object.

Create a global CSS file for the game board and the game circle, import it into components, and convert inline styles to CSS while using className for centralized styling.

Master dynamic styling in React by calculating color from id parity using a mod two check and a ternary expression to set background color, eliminating passing color props.

Apply dynamic classes in a React-style component by using an odd/even check to toggle red and blue backgrounds with CSS classes, replacing inline styles.

Learn to implement callbacks by passing a circle clicked handler from the game board to game circles, allowing the parent to handle the event and log the clicked circle id.

Use React's useState to manage a 16-circle game board initialized with zeros, track idle, in progress, and finished states, and update circles to player one or two with CSS classes.

Update the player circle by toggling current players and applying dynamic classes from the game board state. Use a render helper and copy the game board array to avoid mutation.

Initialize the game board with a loop, render 16 circles, and update the board immutably using map with a previous-state callback to avoid mutating nested arrays.

Render a list of circles in React by assigning a unique key to each element in the loop, enabling React to distinguish them and prevent warnings.

Style the game board with a bisque background, borders, and shadows, and add a header and footer information panel that shows player turns and a new game button.

Learn to dynamically display the current player and implement a winner detector for a four-by-four grid using a helper with ten winning combinations.

Implement winner detection in a React tic-tac-toe game with a winner function and win lines, using a copied board to avoid mutating state, and reflect game state in winner messages.

Add an isDraw function that checks for remaining zeros on the game board using reduce, then display the message 'game is a draw' when no moves remain.

Learn react lifecycle events with the useEffect hook, including component did load on first render with an empty dependency array, and component did update on every render with optional dependencies.

Initialize the game in React by creating an init function to set board and current player, then call it on mount with useEffect, wiring the new game button on click.

Implement a computer player with a suggest button to take over when desired, enabling play against a computer or two human players using a random move helper.

Develops a smarter computer player by evaluating all vertical, horizontal, and diagonal win threats, building move checks, and returning the blocking move or a random fallback.

Define and apply CSS variables at the root to customize game colors, including background, board, panel, and player colors, using var(--name) for easy theme changes.

Learn conditional rendering in React by showing either the suggest button during play or the new game button after the game ends, using inline conditions and a render function.

Deploy a React app for free using Netlify or Surge.sh by building a production bundle with npm run build and dragging the build folder to deploy.

Deploy your app to surge using the build folder and the free default domain after installing surge and logging in. Explore free hosting to showcase your project in a portfolio.

Conclude this module by building a playable connect four style game in React, showcasing useState and useEffect, callbacks, props deconstruction, and dynamic styling.

Build a minimal e-commerce site with product listings, view product details, add to cart, adjust quantities with automatic totals, and a simple checkout flow.

Bootstrap a new React project with Create React App for a mini ecommerce store, and set up a fake REST API using JSON Server to simulate a simple database.

Create a simple json database with categories and products, launch a json server on port 3001, and test routes on localhost to verify the mock rest api.

Fetch the API to pull JSON data from a local server into a React app. Use useState and useEffect to store results and map them with unique keys.

Style the store layout with a left category nav, header, and main area using the downloaded Easter store css, while wiring category clicks to fetch products from a json server.

Refactor the category list into a reusable category component, pass id and title as props, and render with map and keys. Add on click to fetch products for the selected category.

Binds category clicks to product results by fetching matching products from a json server and rendering them, with a click handler passed to child components.

refactor fetch calls into a separate utility file, create a fetcher with a base URL, use async/await in useEffect, export and import the fetcher, and plan for error handling.

Add try-catch error handling for fetch calls, returning a response object with error message and data. Expose getCategories and getProducts in a fetcher module and surface errors in the UI.

Master the fetch API by checking response status, throwing on not ok (404), and catching to relay clear messages. Test with a running server and fixed URL.

Style the product list with a three-column css grid to show image, features, and price, loading assets and a richer database, and render a category product component with props and features.

Install and wire up React Router to enable client-side routing, set up routes for home, checkout, basket, and product details, and replace full-page reloads with seamless navigation.

Fix common React key warnings by adding unique keys to mapped lists, using product IDs where available and array indices for feature strings, ensuring components render without errors.

Implement a dynamic product detail route with React Router, reading the product id via useParams, and navigate to it with the useNavigate hook; make the title a link.

Read the product id from the url using the use params hook. Fetch the product by id from the JSON server and render its details on the product page.

Improve the product detail page with a three-column layout showing image, title, price, and stock, display the description, remove the view button, and use the fetched product data by id.

Learn how styled components enable CSS-in-JS by encapsulating styles inside React components. Replace global CSS with component-scoped rules and apply practical setup and usage.

Learn to use styled components to separate CSS from markup, create a product description that spans the full width via CSS grid, and fix layout issues with React Router.

Learn how to render user-supplied HTML safely in React by using the dangerouslySetInnerHTML attribute, including implementing a markup function to insert bold text and avoid HTML injection.

Convert categories into links that use react router to fetch and display products by category, preserving the layout and refactoring components to load products via route parameters.

Refactor the website by introducing a layout component with an outlet to render routed content. Convert categories to router links; the category component fetches products with a user effect.

Refactor the website by moving routing from the index file to a main app and a layout component, and pass categories via props to render them on the home page.

Learn how React context creates a global state shared across components using a cart context provider and an initial cart items array.

Implement a cart context with useContext and useReducer in React to manage shopping cart. Dispatch add to cart actions with payloads (id, title, price) and update item quantity in state.

Extend the cart reducer with add, remove, increase/decrease quantity, and clear actions, and render a basket layout showing item, quantity, and price with checkout and clear options.

Implement cart rendering by fetching items from the cart context, display item titles, quantities, and prices via map, link back to products, and add quantity adjust and delete actions.

Import and display the up, down, and trash icons in the basket, wire click events to increase, decrease, and remove items, then navigate to checkout and implement clear basket.

Implement a basket total with reduce, render it in the header alongside home and cart icons, and apply CSS tweaks to white header and footer links.

Finish the checkout by enabling user input and validation on the form. Learn how to persist the shopping basket across page refreshes and browser closures for a reliable ecommerce experience.

Learn to refresh the cart automatically with local state and useEffect, using immutable updates (spread, filter) to handle add, remove, and clear before checkout.

Build a checkout flow by creating a checkout page with user details and billing/shipping addresses, wire navigation to an order confirmation route, and implement an order confirmation component.

Persist shopping cart data across refreshes and browser sessions by using local storage in React, with guidance on session storage, JSON serialization, and key operations.

Implement a search bar using react router use search params to navigate to a search results page and fetch matching products by query, displaying them with a search results component.

Implement debouncing to throttle API search requests by delaying calls with a 500ms timeout, using a search term state, useEffect, and cleanup to prevent extra requests.

Learn to validate a React checkout form by turning inputs into controlled components with on change events, manage state with useState, and handle submit using browser validation and custom checks.

Learn to validate a React form beyond the required attribute by computing a form invalid and disabled submit state, preventing default submission, and offering visual feedback for required fields.

Learn to validate forms in react by adding visual feedback for required fields with asterisks, red borders for invalid inputs, and conditional styling using style components.

Learn to validate forms in React by using on blur to set touched state, manage errors, and conditionally reveal red validation indicators for name, email, and shipping address.

Advance your ecommerce project by applying React concepts, shared state with context and reducers, styled components, and mock APIs with JSON server, plus debouncing methods and form validation.