Project 2 - Contact Us | 10 React Projects for Beginners
HTML-код
- Опубликовано: 11 май 2023
- 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/file/rephrU2FVg...
Project 2 React Contact Page . - Source Code
github.com/anshuopinion/React...
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/dosomecodinghelp
Instagram - / dosomecoding
Github - github.com/anshuopinion
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.
Thank you sir for the project series ....
Thanks for this valuable content ❤, every project covers topics to master react
It's amazing!! Thank you sir ! such a easy way..clean and simple understanding code and explanation 👌
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!
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
hey bro,
for point 1., could you elaborate what you mean? also what is 2 way binding in this case? thanks in advance,
Thank you so much bhaiya i learned about // props // ustate // modules
Excellent brother❤
Bro,,you are doing a great job for beginners,,,,thanks for guiding me
superb react practice project for beginners......'
its easy to learn a lot in your project......
Thank you so much Anshu Bhai for this amazing project series this helping me alot...
much love and respect to you brother
❤
thanks for providing these contents
that is some awesome content from u.....keep it up👍
Sir dhamal macha diya react padhane mai to.
Bahut badhiya sir
Thank you so much sir ❤🙏
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!!
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
@@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.
@@deviceyt3288 ok
kindly make more projects amazing job done
Thank You So Much❤
watching your second project and that;s very impressive
Bro do add time stamp for various components and some important point also that would be much helpful
Nice video BTW
Nice bhai gret will follow
Thank you Sir.
its very valued
sir why you cannot use bootstrap or tailwind for navbar ?
css module use krenge to , media query to sbke liye alag alag likhna hoga?
Next level
❤❤❤ mash allha nice class thank you sir
execellent brother
love you bhai bht badya
what is the VS Code theme that you are using in this video bro can you tell me please.......
when i import navigation from ./camponent/navigation my code will getting blured and i couldnt get navbar on browser whats the problem
bro contactHeader ko App.jsx may use Karega tho pura gayab hora output may even navbar bi
plz help me
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!
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.
I learn a lot ..
please continue the series
which extension you are using for the direct displying console.log output in vs code.
Console ninja
Check shorts
AWESOME
zabardast
best react vedio ever
in the figma design home contact means the ul content is not present bro of navbar ... btw loved the vedio
Sir waiting for next vedio
2:22 Bhaiya aapke mai command terminal mai suggestion kese aa....rahe hai?
You have made the normal CSS Module concept too complicated
I also think same, even this is not responsive in my laptop and everything fuked up in my mind. Now i want to cry😢
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.
You are r8
Nice brother
whic vs code theme u using in this video... name please..?
Nice sir
You could figure out the class of navigation by logging it , but when I logged it , couldn't get any key value pairs
I'm unable to right react icon command in terminal, can anyone pls help me with that?
can u make a video how to explain project in terview and types of questio asked
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!
Check my css course video i have explained in video
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
hi sir its very helphul
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.
Yes you can do it
does anybody know which vscode theme is this??
That height; calc not working the contactheader gets overlap over nav
Bro how could you see the class names during console.log at 15:53
Terminal pe Git (master) ye kaise ayega.. Somone please help.
When will Project number 8, 9 and 10 will come ?? Please Complete 10 projects. Your Playlist is awesome. #dosomecoding #reactop
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
.. means go up in the directory because button component is in button folder while you are in contact form folder.
Project-2 doesnt run as desired. Please help
showcase ke liye css laazmi hai?
good brother🥰
nice
Pls continue series 😢
Sir I can see when you are writing 40px its showing 2.5rem at 51:49 can you please tell the extension name?
Px to rem search
my contact page has become unresponsive what should i do
Bhai aisi hi ek playlist material ui pr Lao na please
What do you think about AI..for web development(AI ka kya effect hoga web Development job me)
Ai utha bhi acha nahi. Basic apps hi banaega
Yani AI se in Future Web Devlopment ki job replace hone ka koi daar nhi bhai
I am not able to see value of "console.log(styles);" in vs code ... do I need to install any extension ?
Console ninja
thank you@@dosomecoding
Bhai react me vite se project bnate time Chrome par suddenly saara page blank ho jata h plz help
while doing console how it showing output on doing hover???
Use Console Ninja extension.
Hi sir, which font family u use in vs code.
JetBrains Mono
aesa kon sa browser ue kiya h tumne humne chrome or firefox m
ka use kiya h window me to 67 percent per khi show ho rha h us se uper or 90/100 percent zoom pe to bhut bigad gya wo ab
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
Check console of chrome
It will show you error
which is best to use css or scss(sass).......... thanks for project
Scss
@@dosomecoding as you hover over an attribute we can see the code preview is it an extension or an settings
Bro please complete the video as soon as possibleeeeeeeee broooooo
navigation.module.css main styles import karnese error aaraha hai aur me react js se hi kar rahi hun. module not found likh raha.
File name ya path me issue hoga
You are an amazing teacher sir❤️ sir it's a request please make e tutorial series using react bootstrap
Okay
Css modules -14:35
sir how were you able to change position of nav on 18:46 ? please tell me that
can anyone tell me plzz
he's just zooming in& out the page bro
Also teach us how to make website responsive
sir css me module ke jagha koi or name use kar sakhta hon
Naa
Sir please responsive bhi bataiye kese kre
Sir 10 mern stack projects ka series ek banado
bhai ak request h ye figma design jo aap kar rhe ho uski bhi video mil jati to maje aa jate
Yes bro we want figma project tutorial
Description mein more par click kriye usme link hain
it says props text and icon are missing in props validation
Check for component where you have not passed props
I think ouline button
please complete all 10 projects
Sir jo apne figma project bnaiye hann inki video bna den plz
@1:07:53 bro meray isi project ma Submit pr click krny pr form submit nahi horha ma ny apky github repo sy bhi help li or kud bhi try kiya nahi hora
agr submit type ka button use krta hon na ky apna banaya howa component button tab hojata submit is ka koi solution
Kyu ki form button type submit hi hona chiye us func to trigger karne ke liye
❤️
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
Bina code dekh bata me dikat hoga hamko
@@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.
Sir also give project releted ui material
i want to know how to know that what will the width of our container
Check figma
Project 2 - Contact Us | 10 React Projects for Beginner
setName(event.target[0].value) or setName(event.target.name.value) can u tell me diffrence between work fine both
Console log both values you will get difference
@@dosomecoding thank u so much for your replay and valuabal time keep growing and My allah blessed you
Its not responsive in my laptop😢
Bro great lecture but, your content is mostly on the left and so is your face cam. Other than that Great work, Thanks.
Thank you sir
{name+ " "+email+" "+text} es ma spacing increase kase karu
Add in span tag
Apply css on span
sir github par repo m upload krna bhi sikhaiye aapne single folder m multiple files kaise upload ki wo bhi bataiye please sir
Check github video already made