Build 10 UI/UX Projects / Landing Pages in React

Build a reusable layout in a React app with header, content, and footer, create two projects (home and rotated landing page), and wire per-project routes and styles for isolation.

Design a responsive header with a toggle between hamburger and cross icons, render a menu items array as links, and style the header layout for clear alignment and spacing.

Build a responsive navigation in React using hamburger and close icons, manage show/hide state, fix the menu with transitions, and style active links with hover and border.

Create a double gradient project in React, applying two color schemes and background images, and add Lottie animations for a full stack developer and an instructor using flex layouts.

Center the separator text on the double gradient home page with absolute positioning and translate, and enhance with airways animations using data-airways attributes.

Design and implement a rotated landing page for project three, building a two-column structure with a rotated parent element and animation, featuring bordered text and centered content.

Design and implement a rotating landing page in React by styling a main title with borders, adding a rotated text panel, and implementing responsive animations for mobile.

Build a glowing animation prototype by setting up the project structure, creating a centered glowing globe and text on a dark background, and iterating the styling and animation.

Learn to implement glow and hover effects for text, adjust color, stroke, and shadow, and tune typography for responsive layouts across mobile and tablet view.

Create a market analyst landing page with a left text panel and a right bull, featuring a market graph animation on a gradient background and a two-column layout.

Write the response record and animation score for the marketing product, and validate market analyst visuals with slide directions across mobile and desktop using media queries.

Learn how the changing colors project uses color-changing animations for the body and letters, building a responsive layout with color containers, gradients, and centered typography.

Create a color splash effect in a React UI project by designing background color animations with keyframes, multi-stage color transitions, and animated letters.

Explore the parallax effect in a React project using the React Parallax module, configure a parallax container with a background image and overlaid content, and adjust the strength.

Demonstrate adding extra parallax content in a React landing page, scroll content with image parallax, style the parallax button, and compose a bottom content section with animated text.

Launch the coffee shop UI project in the Yata course, building a two-column layout with bold coffee text, themed background, and initial header branding as coffee shop.

In the coffee shop part 2 lecture, build a coffee cup with a matching background circle and animation, using a two-column layout with responsive adjustments for mobile.

Design a cars landing with a two-card layout, rotate the car images from Unsplash, and center the car names beneath the border to create a dynamic React landing page.

Continue building the cars landing page by centering text at the middle and bottom, applying vertical text orientation with stroke and glow, and refining responsiveness for mobile views.