Figma to React : Build 10 Login Pages in React 2022

Create a two-column login page with bootstrap grid, placing a login form (username and password) and a red login button beside an image, plus forgot password and register links.

Aligns and styles a login page from a figma design, detailing inputs, buttons, spacing, and typography. Applies Montserrat font, color strokes, and focus effects for a clean UI.

Build the second part of login page one by placing a rotated rectangle behind a burger image with absolute positioning, then adjust height, color, and borders to match the prototype.

Build login page two by reusing login page one styles with a dedicated prefix, add an Unsplash image and social login icons, and ensure styles do not overlap.

Source and integrate Google, Facebook, and Twitter logos for the login page, adjust icon sizes, and center them with flexbox while styling the sign-up prompt.

In part 3, the instructor guides styling the login page image with an Unsplash image, a background color, left borders, padding, and rounded corners, while adjusting height and width.

Apply position absolute and relative to align the login page image on the left, adjust border radius and padding, and ensure the image fills its container while troubleshooting image loading.

Build a third login page with a blue and white split background, a left image and a right login form, using a React functional component and a box shadow.

Part 2 guides building and styling a login form in a react project, exporting assets from figma, importing images, centering content with flex, and aligning forgot password and register links.

Design a login page with left and right polygon visuals, a light blue background, and a central form; import assets and apply absolute positioning and transforms.

Center a login form between two polygon shapes using flexbox. Style inputs and the login button with the theme color and polished borders.

Design the fifth login form in the Figma to React course, adding a bottom rotated rectangle and a top bar, then refine the login form with rotated circles for alignment.

Design the login page by reusing text and styles from earlier pages, center the form, adjust height and spacing, and apply colors, borders, and a light text shadow.

Design a login page by adding a bottom rotated rectangle and decorative circles with borders and opacity, using team-color accents to create a wave-like background behind the form.

Design a dark login page by blending plain styling with external images from Figma, and build a centered login form with a black background and gradient and rotated shapes.

Apply gradients to the login page, with a top black-white-red gradient and a bottom blue gradient, and position the bottom rectangle using absolute positioning while adjusting height.

In part 3, build and rotate the top and bottom triangles for the login page using css borders and precise positioning, while applying the carved gradient rectangles.

Learn to create a login page with a full-screen background image from Unsplash, a centered login form with username and password, and a semi-transparent black overlay to improve readability.

Center and style a login form with a top-left circle, copy text from login page three to page seven, and adjust margins and input colors.

Build a login page in React using Figma images and theme colors, with flex layout and copy/paste components, and add forgot password and register links.

Set the top-right and bottom-left call-to-action links with absolute positioning, apply a green-white gradient for the bottom-left element, and refine borders, border radius, shadows, and opacity for the login page.

Begin building login page nine in React by creating a functional login form with username and password inputs and a white button, styling the background color, borders, and shadows. Prepare for the next lecture as we focus on the discarded ship and this illustration.

Move through login page nine by integrating a cargo ship illustration, exporting assets, and positioning the image with absolute css, overflow hidden, and column layouts for a polished user interface.