Project 1 - Brand Page | 10 React Projects for Beginners

Discover the best React project series ever created for beginners! Follow along as we guide you through 10 engaging projects that use Figma design to create stunning UI. From building a to-do list app to a weather app, you'll learn the fundamentals of React while developing real-world web apps. With our step-by-step tutorials, you'll become a React pro in no time! So join us now and unlock the secrets of building awesome web apps with React and Figma

Project 1 React Brand Page Figma Design

Project 1 React Brand Page. - Source Code

10 React Project Playlist

Video Chapters

00:00 - Project 1 Intro
01:00 - What is React?
02:30 - How to install React
12:14 - .gitignore File
13:29 - How to install Node packages
16:36 - How to start React project
16:51 - Write first React program
18:15 - Now, using design, we will build project
18:50 - Understanding React components
24:29 - Creating Nav component
26:12 - Exporting images from Figma to React project
27:05 - Continue Nav
27:52 - Emmet setting for React
28:54 - How to add fonts in React project
31:05 - Writing CSS for Nav
38:48 - Refactoring and making Navigation component
43:02 - Hero Section
49:47 - Styling Hero Section

HTML Course
CSS Course
Html and CSS practice Projects
Javascript Course

[skthakor_codes]

Some ShortCut For VsCode :

1. Split :- Ctr + \
2. Open Terminal : - Ctr + j
3. Primary Bar Open And Close : - Ctr + b

Css ShortCut :-

m10 => margin : 10px;
m10% => margin : 10%;
p10 => padding : 10px;
p10% => padding : 10%;
p6px16px => padding : 6px 16px;

df => display : flex;
db => display : block;

bg#fff => background : #fff;
bg#111 => background : #000;

you can try with many properties. just write firstletter and use value or value first letter.


Thank You

[chetanrahanoo]

I love the way how you are elaborating every aspect whether it is react or whether it is css. I saw other videos on react too but they all skip the css part. You are doing just fine by keeping all the elements in equal proportions. I saw your playlist for Learn html/css in 10 projects and honestly I liked it very much. Helped me alot in building websites. Positively looking forward for this playlist too!! Much love and respect!

[alokgupta]

itne din se dhondne k baad, best React channel mila. Thanks a lot.

[akshaysamel]

I have just completed this session and I never felt bored during the entire session.

I appreciate your efforts. I really liked that you didn't skip HTML and CSS, so any newbie can easily understand.

Also, thanks for explaining the extension settings; I use some of them and it was really helpful for me.

[satyamjha-codeindwala]

I appreciate how thoroughly you explain each element, whether it is CSS or React. I watched other react tutorials as well, however they all exclude the CSS portion. By maintaining the balance of all the components, you are doing great. I watched your playlist for "Learn HTML/CSS in 10 Projects, " and I must admit that I really like it. greatly aided my website-building efforts. I'm eagerly anticipating this playlist as well! Much adoration and esteem!

[jagggyjazz]

Grateful for the invaluable service provided to the community. The methodical approach of dissecting complex issues into manageable pieces not only enhances the problem-solving experience but also serves as a great learning model for strategic thinking

[MEShivaniParihar]

hats off to you sir can't thankyou enough literally,
i have wondared through multiple renowned developers and after having so much disappointments eventually landed here...one of the best gift for me sir!!
keep going sir.
nothing but gratefulness and blessings for you.

[santoshkumar-wqqd]

00:00 - Project 1 Intro
01:00 - What is React?
02:30 - How to install React
08:59 - About Main.jsx in React
12:14 - .gitignore File
12:37 - package.json
13:29 - How to install Node packages
16:36 - How to start React project
16:51 - Write first React program
18:15 - Now, using design, we will build project
18:50 - Understanding React components
24:29 - Creating Nav component
26:12 - Exporting images from Figma to React project
27:05 - Continue Nav
27:52 - Emmet setting for React
28:54 - How to add fonts in React project
31:05 - Writing CSS for Nav
38:48 - Refactoring and making Navigation component
43:02 - Hero Section
49:47 - Styling Hero Section

[baazigar]

brother you're doing a great job!
learning a lot from you... please continue this series

[MrKgshrestha]

Im from Nepal, thanks to your tutorial, my confidence level has up in React. Thanks a lot.

[stayupdated]

Jabardast bhai kya samjhaya hai mera to confidence hi badh gaya dhapak se thank u so much bhai . Keep it Up .❤❤❤❤❤

[tzpembr]

i dont know how to thank youuuu i never comment on yt videos but you are really great so simple explanation just made the best decision to watch this

[Studykaro-kozn]

sir thank you so much for this series, i always had difficulty learning react, but this video made file structure and basics of my react clear, i hope to complete the entire series.
Once again thank you.

[everythingisconnected]

dude ive watched multiple react tutorials but you did a really great job in explaining everything for beginners.🤘

[bkishwarchavan]

sir aapane kamal kar diya ....ypu tube world me sabase best series start ki hai....thanks sir ..

[hemantsingh]

this is the best react tutorial on youtube kudos to you bro

[kushaldhakal]

Exactly what I was searching for. Thanks dude.

[xfggfss]

love u brother for this series need more projects like this in react

[minhaj]

Really Thanks my brother... continue it please...

[rrgofficial]

Thank you boss this was a great start for my react journey😎😎.