Это видео недоступно.
Сожалеем об этом.
Project 1 - Brand Page | 10 React Projects for Beginners
HTML-код
- Опубликовано: 14 авг 2024
- 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
www.figma.com/...
Project 1 React Brand Page. - Source Code
github.com/ans...
10 React Project Playlist
• 10 React Projects For ...
Video Chapters
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
HTML Course
• HTML Course Hindi - B...
CSS Course
• CSS Course Hindi - Be...
Html and CSS practice Projects
• HTML CSS 10 Practice P...
Javascript Course
• Javascript for beginne...
Linkedin - / anshuopinion
Telegram Channel - telegram.me/do...
Instagram - / dosomecoding
Github - github.com/ans...
![[ GAMECHANGER 🚀 ] REACT JS BECOMES 100 TIMES EASY IF YOU FOLLOW THIS.](http://i.ytimg.com/vi/EaG3Zd04W5s/mqdefault.jpg)
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
Thank you
Who is watching in march 2024 😅
me
March khatam ho gya bhai 31
@@ffgameing8936 haa bhaii
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.
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
Thanks bro❤
Great work easy to understand
itne din se dhondne k baad , best React channel mila. Thanks a lot.
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.
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!
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!
Jabardast bhai kya samjhaya hai mera to confidence hi badh gaya dhapak se thank u so much bhai . Keep it Up .❤❤❤❤❤
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.
Mannnnnn 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 playlist!!!!!!!!!!!!!!!!!!!!!!!!!!!!
At 27:43 , the corrected code is this
Menu
Location
About
Contact
Yes
I think in React we don't use tag.
But we understand what you want to say.❤
Im from Nepal, thanks to your tutorial, my confidence level has up in React. Thanks a lot.
brother you're doing a great job!
learning a lot from you... please continue this series
dude ive watched multiple react tutorials but you did a really great job in explaining everything for beginners.🤘
Dear your method is very easy and helpfull for me. it's very-2 simple way.
sir aapane kamal kar diya ....ypu tube world me sabase best series start ki hai....thanks sir ..
yara anshu bhai app na ta dill jeet lia . abhi tak mene code with harry ki videos pa time waste kia. app ki video random ay and then love the playlist. anshu Bhai kindly next js ki playlist bhi bna do .
You are one of the great teacher wow🫡❤️
jaisa teacher mujhe chahiye hai ekdum tum wohi ho . what a teaching good and big thanks to you sir
Thanks
I have seen many videos on web development but first time I got wow moment when I saw your presentation from converting a figma file to a project ❤️🔥. Keep doing more videos like this by explaining every part of the project from scratch🎉. Looking forward to learn more from you 🫂.
Note : I rarely comment on RUclips videos but after watching your video I couldn't control to comment for appreciating you. Keep up the great work mate 💪.
Thanks its very helpful
i really loved your teaching. i understood concepts very well. thank you so much
Oooh really😮😮
Bohat acche say explanation hai bhaiya, keep it up 👍👍👍👍👍
I have completed my first project on react thank you🤩🤩
I have completed 2nd and 3rd too
Who is watching in may , 2024 😂😂
Brother You are really great .
Great video bhai , extensions are great installed all of them!!!🔥
i saw money video but didnt get proper way of teaching but sir you are amezing i understood everything thank you................:)
Exactly what I was searching for. Thanks dude.
this is amazing brother i have lots of learn this video thankyou for this
Well and Good
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
bhai sahab kya pyari explanation thi apki omg wow bhaiya love you
Finally the wait is over.
Wow sir zaberdast ❤❤
thanks bhai😍
Bhai i am big fan off you big fan ! you are fantastically teaching i love it
Bhai sach bolu to mera javascript ka basic hua tha or me react pr switch kiya..... Thankfully mko ye smjh ara hai (Baktiyar)
Bro You explain quite well without wasting our time .Its to the pint and and short but boom you clear concepts quickly!!!
Keep it up Bro your teaching style is your excellent
please make some series on next js too
Good work
it's really helpful bro for beginner keep it up...
It was really superb, thanks to you
Lovely content bhaiya bahut acha samjhate ho
Tum boht mast kaam karta hai Maqsood bhai. ❤🫂
bhai badhiya lgal ....ek no
this is the best react tutorial on youtube kudos to you bro
thanks buddy thank you very much thanks a lot bro
Wonderful Sir, Really Appreciated your effort
Very good and informative sir
bro sirf accha????.....this a gem content for beginners like me😀😀
great bhai bht badya
I only comments on very some ytbers video who provides quality education but the way youre teaching its forced me to appreciate your efforts that youre putting, I know its very difficult to define from beginners eye I love your content from pakistan, GOD BLESS YOU.
Love from Pakistan You are so brilliant and future Star
Always help I never regret to subscribe you
Love from pakistan
Thank you boss this was a great start for my react journey😎😎.
I Love you bhai ❤
Kamse kam 50 project lao beginner to advance tak kaa
sir you are great you deserve millions of subscriber😍😍🥰🥰🥰😘😘
THEEK HAI...!!!! 😁😁
instead of export default App? Can we write export App? If Yes then what is the difference?
Brother when i am wrting the code like your jsx code so its not showing me the suggest like when I did Img ul like these tag
can you please figure it out
you madeeeee life so easy. Thankyou sir.
Very good brother love from Bangladesh
love u brother for this series need more projects like this in react
Nicely explained ,very helpful for beginners,keep it up bhai
thank you brother you saved my life🥲😭😭😭😭
great video
Hi sir..where can i get tje same webpage you are designing for inspecting all its components
Really Thanks my brother... continue it please...
nive class thank you so much sir
thanks for the project. Also fixed the responsiveness.
Wow Awesome Efforts
Love from pakistan
❤
great initiative bhaiya 👏
I wish I could give you a treat oneday INSHALLAH
very well explanation bro
Appreciable bro thanku for guiding us hope sikateee rahoge 😊😋#youareGURU
Thanks for this video. I have a doubt. When I minimize the browser, the Navigation and Hero components overlap. How can I avoid this?
You are too good ❤️
Well explained sirji ❤
Aap agr aise hi video bnate gye to aap sch. Me bhut aage ho jayenge
NO words for your hard work
so nice
Very good video bro.
Explained it very well bro
You nailed it video is worthy🎉❤
Bro pls continue the react project series it is very helpful
Very 👍 good learning ❤❤❤
which extension you used when u give measurements in px then besides automatically it shows its value in rem... ?? which extension is this ??
i like the way you teach you teaching style is better than hitesh choudhry
Your explanation is very impressive.❤❤
Glad you think so!
just to Add - in figma select any element press Alt and more cursor to near by element - this will give you surrounding space measurements
bhai big fan
this is what i was waiting
Who is watching in 2024
Thank your for this video. Looking for more videos on react
Very nice beginner friendly explanation❤❤
wow I just started the series yet stopped to comment this. Your explanation is just on point. I was so happy to find this series. Can't wait to complete it. Thank you for this wonderful series
16:43 after running npm run dev its giving an error of missing script:dev but it is already there in my json file. or koi port or url display nahi ho raha hai, is there any way to display port? pls
Done making this project
please continue the series sir
i tried this love from pakistan pls also make responsive sites in react thank you
While styling list in nav ......we can set it's width up to 35% and then justify content space evenly.
I think it can be a good practice.
What say?