Project 2 - Contact Us | 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 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...

[@sandeepkumararya9949]

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]

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]

@@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]

@@deviceyt3288 ok

[@anupdhakal69]

@@deviceyt3288 but we can just create separate folder of each component where there is one jsx file and another is css file, and link them??

[@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,

[@shlokmantri799]

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

[@akanshaparmar7114]

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

[@5h4ddu]

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

[@RaihanAhmed-jo9kd]

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

[@ackibjaved]

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!

[@bhavikasharma4050]

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

[@shubhamkhati1503]

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

[@shadikhusain1216]

Sir dhamal macha diya react padhane mai to.

[@rajaditya3031]

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

[@ShayanJamal-d5g]

Greate Sir 💯

[@msroopak]

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

[@BinaryClassroom]

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!

[@akhileshchauhan9561]

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

[@infinite-solutions-with-ai]

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.

[@tarunboddeda4884]

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

[@divyanshnigam5916]

kindly make more projects amazing job done

[@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 ....

[@vivekgupta_3085]

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]

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]

You are r8

[@bandanakumari4589]

Better to go with tailwind..

[@Have_Fn]

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

[@studywithroman1997]

❤❤❤ mash allha nice class thank you sir

[@yogeshupadhayay2009]

thse projects are realy so healpfull \

[@mdfaijakhtar432]

thanks for providing these contents

[@ProblemSolver_0]

watching your second project and that;s very impressive

[@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

[@abhishekbandil1737]

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

[@deepanshujain8629]

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

[@ashutosh_code]

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

[@harshith6135]

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

[@kushalchaulagain738]

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

[@amitshharmaa82]

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

[@short9520]

Bahut badhiya sir

[@vishnuperumalla3141]

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

[@kunalsharma1936]

Thank you so much sir ❤🙏

[@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

[@rahulnegi4027]

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

[@nitinjohn497]

best react vedio ever

[@user-ju3bh5rb3u]

what theme brother youre using in vscode

[@thefourhourtalk]

everything was going good until props vala part aagaya

[@Drevex88]

Thankssssss

[@jaikumar3775]

love you bhai bht badya

[@satishdonerao4778]

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

[@Lucifer-xt7un]

Excellent brother❤

[@socialAddAkrs]

Next level

[@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

[@codePracticeId]

Thank you Sir.

[@flatscorner2345]

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

[@5h4ddu]

Thank You So Much❤

[@santoshsalawadagi6809]

Nice bhai gret will follow

[@not_amanullah]

Pls continue series 😢

[@saitejabommali6621]

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

[@haidermughal8400]

sir why you cannot use bootstrap or tailwind for navbar ?

[@sapnapandey_sash]

Also teach us how to make website responsive

[@aniketnimkar6859]

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

[@dosomecoding]

Console ninja Check shorts

[@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

[@jagggyjazz8010]

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

[@CookCook2024]

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

[@swapnilhajare5557]

Use Console Ninja extension.

[@niral6305]

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]

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

[@jeeshansufi8712]

thank you sir

[@gobinda-das-io]

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

[@UPSC_IAS_IPS_007]

execellent brother

[@AnshulYadav-ke3lh]

please continue the series

[@satyamjha-codeindwala6666]

Project 2 - Contact Us | 10 React Projects for Beginner

[@codeshshubh]

Css modules -14:35

[@pratikdahekar745]

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

[@Mian-Mubashar]

Nice brother

[@aditigarg8875]

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

[@vishalmeharban1782]

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

[@as8604]

its very valued

[@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

[@hollowbyakuya2924]

.. means go up in the directory because button component is in button folder while you are in contact form folder.

[@debasishsamal3701]

does anybody know which vscode theme is this??

[@mahenderkurikyala3388]

which is best to use css or scss(sass).......... thanks for project

[@dosomecoding]

Scss

[@mahenderkurikyala3388]

@@dosomecoding as you hover over an attribute we can see the code preview is it an extension or an settings

[@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]

some one can please tell me also this

[@Ssingh-mu5dh]

Install Extenion console ninja

[@skysol123]

I learn a lot ..

[@divyanshnigam5916]

zabardast

[@brijeshshukla5284]

Nice sir

[@ankeshhalder1709]

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

[@badshahossain5551]

AWESOME

[@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

[@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

[@afaqahmad3535]

good brother🥰

[@Shahbazkhalid-oz7gs]

Sir I can see when you are writing 40px its showing 2.5rem at 51:49 can you please tell the extension name?

[@dosomecoding]

Px to rem search

[@JonSnow-b9e]

can anyone tell the name of this vscode theme

[@amishadewangan8693]

my contact page has become unresponsive what should i do

[@sahilsharma3616]

Bhai aisi hi ek playlist material ui pr Lao na please

[@vrishbhansingh2597]

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

[@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.

[@rishantkashyap3514]

Thank you sir {name+ " "+email+" "+text} es ma spacing increase kase karu

[@dosomecoding]

Add in span tag Apply css on span

[@anotherstringstory8892]

Project-2 doesnt run as desired. Please help

[@usmanarif7884]

Bro why you don't use sass?

[@dosomecoding]

Because i am not a expert in sass

[@usmanarif7884]

@@dosomecoding ok bro no problem

[@kanikachoudhary7958]

rfc bhi likhoge to bhi ho jaega🙂

[@dishakukreja-kp9ig]

hi sir its very helphul

[@dungar5919]

sir how were you able to change position of nav on 18:46 ? please tell me that

[@dungar5919]

can anyone tell me plzz

[@saimanikantaandey3302]

he's just zooming in& out the page bro

[@mohammedkaifraza9337]

Yarn dev is not working in my terminal

[@AixAsadUllah]

showcase ke liye css laazmi hai?

[@jemsyadav6873]

Sir waiting for next vedio