Create Websites with REACT, Bootstrap5, ANIME JS, SWIPER JS

Install Visual Studio Code, the code editor to start a React project, and review the Windows and Mac download options.

Install nodejs and verify with node -v in the VS Code terminal. Download nodejs installer for Windows or Mac and complete setup; next lecture covers creating a React project.

Install Visual Studio Code and Node, then create a React project named Edu Plato using npx create-react-app in VS Code, and explore the PSD template and 12-column grid.

Explore the React project workflow by examining the public index.html with a root div and the src index.js and app.js, learning how React renders the app into the root element.

Create a new React component in src/components/new.js, export it, and render it inside the app component to illustrate the React project flow from index.html root to the main component.

Install bootstrap in a react project with npm i bootstrap, then import bootstrap/dist/css/bootstrap.min.css in app.js and apply bootstrap styles to a container using className.

Study the PSD template by noting fonts, colors, and spacing to guide conversion to html or react; document Laura and Later fonts, primary and secondary colors, and heading sizes.

Export images from a PSD template for a React project, creating transparent PNG logos, trimming transparent pixels, and choosing PNG 24 or JPG to preserve gradients.

Discover how to find high resolution, free images using Pexels and Pixabay, download medium sizes, and learn a simple Photoshop background removal technique.

Build an animated React slider using Swiper JS, with header and slider components, featuring a two-column slide (image on the right, content on the left) and centered content.

Set up and customize a Swiper slider in React, applying Laura Serif and sans serif fonts, sizing and alignment, then initialize Swiper with pagination, navigation, and fade and cross-fade effects.

Create a responsive swiper slider with a dark gradient overlay and call-to-action buttons, style slide backgrounds from public assets, and plan a future Anime.js animation for the slider.

Animate a swiper slider with anime.js by importing it, applying translate and opacity effects to active slides, and wiring slide transition start and end events, including autoplay, pagination, and navigation.

Customize a Swiper slider with navigation arrows and pagination for a React, Bootstrap5, Anime JS, Swiper JS project. Export arrows as pngs and style pagination dots with slider.css.

Learn to create a Ken Burns style zooming background on a Swiper slider using Anime.js, with six-second autoplay and center positioning.

Design call-to-action buttons with hover effects, using rgba backgrounds, borders and a 0.5s transition; refine padding and text color for a cohesive slider header and integrate with React Router.

Export the logo as a transparent png and set the header height, top spacing, and navigation link spacing. This prep work guides building the header in the next lecture.

Set up a fixed header with a high z-index, make navigation links white, ensure the active link shows its color and hover effects, and preview adding social icons next.

Create a custom bootstrap header by making header and slider separate components loaded in app.js, then implement a responsive navbar with brand logo and bootstrap classes.

Explore how to add social icons to the header using Font Awesome, with a challenge to try first, and guidance to consult the next lecture if stuck.

Add social icons to the header using Font Awesome via a CDN, and fine-tune colors, spacing, and alignment for a React single-page application.

Explore routing in a React app by wiring index.html, index.js, and app.js to render components through a dedicated routing JS, and learn how routes determine page rendering.

Learn to set up React Router Dom 6.14, create a browser router, define routes with path and element, and use outlet for nested content to enable client-side navigation.

Fix the fixed header issue by offsetting content with a 96px top margin and apply dynamic header backgrounds on non-home pages, leaving the home page clean.

Detect the current path with the location hook from react router dom and apply dynamic margin-top and header background based on home versus other pages.

Learn to dynamically style the header in a React app by using useLocation to set the background color based on the current route.

Learn to convert a header into a markup section using container, row, and column layouts and manage state across components with routing and pages, and Redux Toolkit as the topic.

Define a redux toolkit store by installing React Redux and Redux Toolkit, creating a power slice with initial state and a get powers reducer, and wiring it with a provider.

Retrieve store information with useSelector from React Redux to access powers through the power reducer, then map powers to render icon, heading, and description, and adapt for multiple reducers.

Style the section by refining spacing, header, and icon sizes. Link power.css to power.js, apply 128 px section padding and 100x100 icon holders, and create a centered bordered heading.

Open Visual Studio Code, create a Prof component wired into main.js to render a home page section, and build its layout with an overlay, container, and col-md-7 grid.

Position the section as relative, place the main image absolutely with bottom and right offsets, and apply a semi-transparent overlay to reveal content.

Create the fields of science section by designing two sections with a background image and overlay, exporting assets, and starting a fields component with basic CSS and state management concepts.

Create a field slice with an initial fields array containing image, heading, and description, then retrieve and render it with useSelector in a responsive bootstrap layout.

Style the fields section with a focused CSS approach, applying box shadows, full-width images, and 40px padding to field content, plus consistent spacing and bold and light font styles.

Add a read more section for each field and route to /fields that renders the fields component, update navigation, and note header background behavior for non-home pages in the next lecture.

Move the scroll handling from index.html to header.js and render a persistent header background on inner pages, while keeping it transparent on the home page until scrolling beyond 96 pixels.

Builds a read more link to a dynamic field page and renders the field single component by reading the field name from the URL.

Retrieve the field name from the route params, fetch all fields via useSelector, and filter by heading equals field name to obtain field info for display.

Wraps content in a div with class field single and defines a read more link with bold 14px primary font, then applies hover color and removes text decoration.

Fix the logo path by using absolute and relative paths in header.js. Learn how a leading slash converts to an absolute path and resolves image loading.

Debug a disappearing image caused by anime.js targeting the image container inside the slider. Rename the field image container to fix the issue and ensure correct section padding.

Design a two-part section with a left content area and a right image, using a background image with absolute positioning inside a relative container, and export with a gray overlay.

Add Doctorial.js to create a doctoral section exported into Main.js, and structure it with a container, row, col md six, and left background with overlay, header, and read more CTA.

Learn to create a right part div in Visual Studio Code with absolute positioning, 50% width, full height, a centered background image, and a clip-path reveal.

Create a responsive section in a React project by building a class component, wiring it into main, and styling with a CSS file and Bootstrap utilities.

Design a newsletter section with an absolute bottom background image and a translucent overlay, plus a bootstrap form for email input and a subscribe button.

Adjusts the newsletter by setting button height and line height for a cleaner look, then positions a phone image inside the newsletter container using absolute positioning with precise dimensions.

Create and style the awards section in a React app using a Swiper slider, export award assets, and implement an awards component with a responsive background and css enhancements.

Create an awards carousel in a React project using React Slick, install dependencies, import CSS, and configure slides to show, dots, and navigation, then style arrows and dots.

Learn to customize slick carousel navigation by moving dots with css transform translate along the y axis and replacing prev/next arrows with images, using carousel settings.