Scribd
Upload
6 views3 pages

React Frontend Practice Guide

The document provides a comprehensive guide for React developers to practice frontend skills using Figma designs and various resources. It includes sources for Figma designs, step-by-step practice methods, project ideas, and frontend challenge platforms. Key focus areas include component thinking, responsive design, and effective use of GitHub for code management.

Uploaded by

temesgenb439
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views3 pages

React Frontend Practice Guide

The document provides a comprehensive guide for React developers to practice frontend skills using Figma designs and various resources. It includes sources for Figma designs, step-by-step practice methods, project ideas, and frontend challenge platforms. Key focus areas include component thinking, responsive design, and effective use of GitHub for code management.

Uploaded by

temesgenb439
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Frontend Practice Guide for React Developers

1. Where to Get Figma Designs for Practice

-------------------------------------------

- Figma Community: [Link]

Search for: E-commerce UI, Dashboard, Landing Page

-> Click Duplicate to clone designs into your Figma account

- UI Design Daily: [Link]

-> Free daily designs + Figma downloads

- Untitled UI: [Link]

-> Free UI kits and layout templates

- Freebie Supply: [Link]

-> Landing pages, login screens, and more

2. How to Practice the Right Way (Step-by-Step)

-----------------------------------------------

1. Pick one small UI section (e.g., card, navbar, grid)

2. Open Figma Inspect panel to see size, color, font

3. Create one React component to match that UI

4. Style using CSS or Tailwind

5. Make it responsive (media queries, flex, grid)

6. Build full layout part by part

7. Push work to GitHub

8. Write down what you learned


3. Free Project Ideas to Practice

----------------------------------

- Product Page: Grids, filters

- Login Page: Forms, UX

- Dashboard: Sidebar, charts

- Portfolio Website: Routing, layout

- Blog UI: Cards, text styling

4. Frontend Challenge Platforms

-------------------------------

- Frontend Mentor: [Link]

- DevChallenges: [Link]

- Codewell: [Link]

What to Focus On While Practicing

----------------------------------

- Component thinking: split designs into parts

- Responsive design: use flex/grid and media queries

- Naming classes clearly and consistently

- Reusing code with components

- Using GitHub to store and share your code

Vocabulary (B2-C1 level)

------------------------

- Follow the right path Do things in a correct/professional way

- Clone (Figma) Copy the design into your account


- Inspect (Figma) View details of elements in Figma

- Push to GitHub Upload your code to a Git repo

- Recreate Build a copy of something in code

You might also like