Project 2 - Contact Us | 10 React Projects for Beginners

Подписаться 39 тыс.

Просмотров 130 тыс.

50% 1

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 2 React Contact Page Figma Design
www.figma.com/...
Project 2 React Contact Page . - Source Code
github.com/ans...
10 React Project Playlist
• 10 React Projects For ...
React Concepts
• React Interview Questi...
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...

Опубликовано:

11 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 244

@sandeepkumararya9949 8 месяцев назад

The way you explain things are even a beginner can understand. Thanks. Just one more thing , please upload new project in the remaining 10 project playlist.

@AbhishekMishra-gr5zk Год назад

Pro tip while you are practicing see when you are watching this I suppose you all have basic understanding of react js and also good knowledge of css you use the css part as it is from the source code and practice only react js it will save a lots of time Thanks!!

@Codenow10222 5 месяцев назад

hi i have a doubt. is there a need to learn about css modules? i am a beginner and on my journey to learn mern

@deviceyt3288 4 месяца назад

@@Codenow10222 yes because when you are building medium to big project each component would have 100s of lines of css if you were to put all the combined components styles in one global css it would be very hard to understand and maintain and also coming up with unique names for all elements can be tough too.

@Codenow10222 4 месяца назад

@@deviceyt3288 ok

@dev.minh.vu. Год назад

some advice in my opinion for you bro: 1. you can create a handleChange function when a user types in the input field (textarea) and then you setState, and make sure to set the value of its will be its corresponding state (2 ways binding) 2. onSubmit function should be named as handleSubmit, then on that function, you retrieve the value from the 3 input states and display those in the UI

@shrshawn Год назад

hey bro, for point 1., could you elaborate what you mean? also what is 2 way binding in this case? thanks in advance,

@5h4ddu 6 месяцев назад

Thank you so much Anshu Bhai for this amazing project series this helping me alot... much love and respect to you brother ❤

@shlokmantri799 8 часов назад

These project might be basic but it definitely clear the doubts and core react thanks man!!!👌👌

@akanshaparmar7114 6 дней назад

Sir , when you hover over styles , it shows some key -value pairs. But in my case , these are not available while printing styles

@RaihanAhmed-jo9kd 4 месяца назад

Bro,,you are doing a great job for beginners,,,,thanks for guiding me

@ackibjaved 4 месяца назад

Thank you soooooo much for this amazing playlist brother! It is really very helpful.. Tahnks for all the details, extensions etc Love & support from Pakistan!

@user-jo2yw2on6m 9 дней назад

Greate Sir 💯

@omkargaikwad3677 7 дней назад

sir while writing css i am not getting autocomplete options is there any extensions for it??

@bhavikasharma4050 3 месяца назад

It's amazing!! Thank you sir ! such a easy way..clean and simple understanding code and explanation 👌

@thefourhourtalk 6 месяцев назад

everything was going good until props vala part aagaya

@shubhamkhati1503 Год назад

Thanks for this valuable content ❤, every project covers topics to master react

@BinaryClassroom 6 месяцев назад

When will Project number 8, 9 and 10 will come ?? Please Complete 10 projects. Your Playlist is awesome. #dosomecoding #reactop

@mohsinalijafery2217 Месяц назад

Amazing tutorial... Just loved it!

@vivekgupta_3085 2 месяца назад

Love the way you teach !!

@guptasagar694 Год назад

You have made the normal CSS Module concept too complicated

@ravishbisht502 Год назад

I also think same, even this is not responsive in my laptop and everything fuked up in my mind. Now i want to cry😢

@attidudes8448 8 месяцев назад

The thing is he has not designed it for responsiveness yet as he has used pixels every where. Which is fixed for all screen sizes. The main focus is to learn the react concepts. The modules concept is very much necessary as in very big projects they use modules only to preven css overlapping. Though it may seem very confusing it is not. Just try it a few times and you will get a hang of it.

@ahmadsaheb3279 7 месяцев назад

You are r8

@bandanakumari4589 2 месяца назад

Better to go with tailwind..

@Have_Fn 2 месяца назад

True, email button se kya ho rha hai Kuch samagh nhi aa rha css.

@rajaditya3031 6 месяцев назад

superb react practice project for beginners......' its easy to learn a lot in your project......

@shadikhusain1216 Год назад

Sir dhamal macha diya react padhane mai to.

@akhileshchauhan9561 Месяц назад

bro list banane ke liye shortcut use kare li*3 only phir uske bad 3 list ban kar aa jayegi

@tarunboddeda4884 8 месяцев назад

that is some awesome content from u.....keep it up👍

@AbhishekKumar-lp7wy Год назад

Bro do add time stamp for various components and some important point also that would be much helpful Nice video BTW

@rehansheikh4281 Год назад

Thank you sir for the project series ....

@infinite-solutions-with-ai 10 месяцев назад

Sir your video is so awesome but i suggest to you that before starting the project you must told us that in this project you will learn these topic of react js.

@mdfaijakhtar432 Год назад

thanks for providing these contents

@studywithroman1997 7 месяцев назад

❤❤❤ mash allha nice class thank you sir

@divyanshnigam5916 4 месяца назад

kindly make more projects amazing job done

@msroopak 17 дней назад

How are you finding the gap between the buttons in figma ?

@abhishekbandil1737 7 месяцев назад

in the figma design home contact means the ul content is not present bro of navbar ... btw loved the vedio

@yogeshupadhayay2009 Месяц назад

thse projects are realy so healpfull \

@ashutosh_code 4 месяца назад

css module use krenge to , media query to sbke liye alag alag likhna hoga?

@aman_v3 Год назад

bhai ak request h ye figma design jo aap kar rhe ho uski bhi video mil jati to maje aa jate

@japoetrycollection5201 Год назад

Yes bro we want figma project tutorial

@Moniverma2302 Год назад

Description mein more par click kriye usme link hain

@jeeshansufi8712 Месяц назад

thank you sir

@nitinjohn497 11 месяцев назад

best react vedio ever

@CookCook2024 11 месяцев назад

while doing console how it showing output on doing hover???

@swapnilhajare5557 3 месяца назад

Use Console Ninja extension.

@ProblemSolver_0 10 месяцев назад

watching your second project and that;s very impressive

@kunalsharma1936 4 месяца назад

Thank you so much sir ❤🙏

@socialAddAkrs Год назад

Next level

@deepanshujain8629 3 месяца назад

You could figure out the class of navigation by logging it , but when I logged it , couldn't get any key value pairs

@harshith6135 2 месяца назад

in normal html and CSS we can create it less line and easily right it's like complicating this i feel

@Lucifer-xt7un Год назад

Excellent brother❤

@chetanrahanoo4117 Год назад

Could you plz tell me what is the differnece btween ' width and max-width' ....' px and vh'. I googled alot but tht doesnt satisfy my query. Would be really great if you can shed some light!

@dosomecoding Год назад

Check my css course video i have explained in video

@jaskaransingh4920 Год назад

width is used to define the width of a particular element, it is as the name states (one particular width value), while max-width defines the maximu width of a given element. for eg: you have an image, you set (width = 20vw; max-width = 100px). now here you see, i used "vw" rather than pixels which means the image wil resize itself according to 20% of the viewport width (in simple words if screen size is 100px, image is 20px, if screen is 200px, width is 40px and so on). But we set the max-width property so that in any case if during the readjustment the image's size gets greater than a particular value, say 100px, so it stops at 100px, no matter the "20vw" value. I hope this helps

@codePracticeId 6 месяцев назад

Thank you Sir.

@5h4ddu 6 месяцев назад

Thank You So Much❤

@rahulnegi4027 2 месяца назад

can't we immport module.css directly without styles object

@short9520 Год назад

Bahut badhiya sir

@kushalchaulagain738 Год назад

Thank you so much bhaiya i learned about // props // ustate // modules

@santoshsalawadagi6809 Год назад

Nice bhai gret will follow

@jaikumar3775 11 месяцев назад

love you bhai bht badya

@UPSC_IAS_IPS_007 Год назад

execellent brother

@satishdonerao4778 6 месяцев назад

when i import navigation from ./camponent/navigation my code will getting blured and i couldnt get navbar on browser whats the problem

@vishnuperumalla3141 3 месяца назад

what is the VS Code theme that you are using in this video bro can you tell me please.......

@usmanarif7884 Год назад

Bro why you don't use sass?

@dosomecoding Год назад

Because i am not a expert in sass

@usmanarif7884 Год назад

@@dosomecoding ok bro no problem

@Mian-Mubashar 4 месяца назад

Nice brother

@user-ju3bh5rb3u 22 дня назад

what theme brother youre using in vscode

@amitshharmaa82 5 месяцев назад

Bhai react me vite se project bnate time Chrome par suddenly saara page blank ho jata h plz help

@brijeshshukla5284 8 месяцев назад

Nice sir

@AnshulYadav-ke3lh 7 месяцев назад

please continue the series

@as8604 Год назад

its very valued

@advait896 Год назад

I am not able to see value of "console.log(styles);" in vs code ... do I need to install any extension ?

@dosomecoding Год назад

Console ninja

@advait896 Год назад

thank you@@dosomecoding

@skysol123 6 месяцев назад

I learn a lot ..

@divyanshnigam5916 3 месяца назад

zabardast

@badshahossain5551 Год назад

AWESOME

@saitejabommali6621 10 месяцев назад

bro contactHeader ko App.jsx may use Karega tho pura gayab hora output may even navbar bi plz help me

@pratikdahekar745 11 месяцев назад

That height; calc not working the contactheader gets overlap over nav

@flatscorner2345 4 месяца назад

can u make a video how to explain project in terview and types of questio asked

@GobindaDas-yt 6 месяцев назад

2:22 Bhaiya aapke mai command terminal mai suggestion kese aa....rahe hai?

@haidermughal8400 Год назад

sir why you cannot use bootstrap or tailwind for navbar ?

@not_amanullah 5 месяцев назад

Pls continue series 😢

@aniketnimkar6859 Год назад

which extension you are using for the direct displying console.log output in vs code.

@dosomecoding Год назад

Console ninja Check shorts

@vishalmeharban1782 6 месяцев назад

whic vs code theme u using in this video... name please..?

@sapnapandey_sash 3 месяца назад

Also teach us how to make website responsive

@afaqahmad3535 9 месяцев назад

good brother🥰

@satyamjha-codeindwala6666 10 месяцев назад

Project 2 - Contact Us | 10 React Projects for Beginner

@Surya_Singh0777 Год назад

What do you think about AI..for web development(AI ka kya effect hoga web Development job me)

@dosomecoding Год назад

Ai utha bhi acha nahi. Basic apps hi banaega

@Surya_Singh0777 Год назад

Yani AI se in Future Web Devlopment ki job replace hone ka koi daar nhi bhai

@aditigarg8875 6 месяцев назад

I'm unable to right react icon command in terminal, can anyone pls help me with that?

@azurecoders Год назад

Sir could you please tell me that how could I customize my vs code terminal like you had done, and is it possible in windows 7 32 bit pc. I would be glad if you/anyone helped me out.

@dosomecoding Год назад

Yes you can do it

@codeshshubh 3 месяца назад

Css modules -14:35

@jagggyjazz8010 Год назад

Bro great lecture but, your content is mostly on the left and so is your face cam. Other than that Great work, Thanks.

@niral6305 4 месяца назад

isn't it ok if we code our total css without the seperate modules , modules will be helpful for complex web apps but for a contact page i think its irrelevant , do correct me if i'm wrong , thanks!

@atanukundu_10 13 дней назад

yes for such small projects it is not necessary but it's the best practice and most real world applications are complex.

@debasishsamal3701 3 месяца назад

does anybody know which vscode theme is this??

@HimanshuVishwakarma-rj5yg Месяц назад

bhai koi figma file open nahi ho rha h

@JonSnow-b9e 2 месяца назад

can anyone tell the name of this vscode theme

@ramanshuyadav6203 Месяц назад

Bro can you guide me that how you get output in sides of Vs code when you console.log(styles) what setting we have to do for this

@pralayyop669 29 дней назад

some one can please tell me also this

@mohammedkaifraza9337 Месяц назад

Yarn dev is not working in my terminal

@dishakukreja-kp9ig Год назад

hi sir its very helphul

@anotherstringstory8892 11 месяцев назад

Project-2 doesnt run as desired. Please help

@amishadewangan8693 Год назад

my contact page has become unresponsive what should i do

@AixAsadUllah Год назад

showcase ke liye css laazmi hai?

@inzamamghulamnabi5860 Год назад

submit button of form not working properly output show on the console for a while and then disappear..same on the ui show for a a second and then disappear ...kindly tell me the problem

@dosomecoding Год назад

Check console of chrome It will show you error

@vrishbhansingh2597 14 дней назад

i am not using veet so npx create-react-app project-name

@jemsyadav6873 Год назад

Sir waiting for next vedio

@user-cs1cu5bd8l Месяц назад

Module I can't understand 😢

@sahilsharma3616 Год назад

Bhai aisi hi ek playlist material ui pr Lao na please

@md.al-amin9670 Год назад

nice

@SonuSawanOfficial Год назад

Header and contact form ko app.jsx me main div me dalne pr app.css me calculate properties use krne pr navigation aur form overlap ho ja rhe h...aisa kyu ho rha h jabki navigation ka height mera 72px h

@dosomecoding Год назад

Bina code dekh bata me dikat hoga hamko

@SonuSawanOfficial Год назад

@@dosomecoding bhaiya error mil gya mujhe... browser 80% zoom pr rhega to overlap nhi ho rha h lekin 80% se jyada krne pr navigation aur header overlap kr rha h ...maine Apke GitHub se code download kr k aur run Kiya same problem h aapke me v.

@ankeshhalder1709 Год назад

Terminal pe Git (master) ye kaise ayega.. Somone please help.

@atribhattacharya7642 Год назад

You are an amazing teacher sir❤️ sir it's a request please make e tutorial series using react bootstrap

@dosomecoding Год назад

Okay

@jagggyjazz8010 Год назад

Bro how could you see the class names during console.log at 15:53

@AdityaSharma-ri2wz Месяц назад

i am facing same problem

@shery_writes3622 Год назад

hey, sir you are the great sir good teaching. i need help you link a (Button) component into ContactForm.jsx during that you import a button by short way, there a "../Button/Button"; automatically what's mean by double dot(../B ) in previous word please explain OR/ disscus a video time 31:31 to 31:35 in detail. Thank you