Project 2 - Contact Us | 10 React Projects for Beginners
HTML-код
- Опубликовано: 10 сен 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 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...
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.
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
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,
Sir , when you hover over styles , it shows some key -value pairs. But in my case , these are not available while printing styles
Thank you so much Anshu Bhai for this amazing project series this helping me alot...
much love and respect to you brother
❤
Bro,,you are doing a great job for beginners,,,,thanks for guiding me
sir while writing css i am not getting autocomplete options is there any extensions for it??
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!
at 20.18 , you was able to see the console.log() output right inside code . How ?
It's amazing!! Thank you sir ! such a easy way..clean and simple understanding code and explanation 👌
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
Better to go with tailwind..
True, email button se kya ho rha hai Kuch samagh nhi aa rha css.
Greate Sir 💯
How are you finding the gap between the buttons in figma ?
Thanks for this valuable content ❤, every project covers topics to master react
can't we immport module.css directly without styles object
Amazing tutorial... Just loved it!
Sir dhamal macha diya react padhane mai to.
when i import navigation from ./camponent/navigation my code will getting blured and i couldnt get navbar on browser whats the problem
bro list banane ke liye shortcut use kare li*3 only phir uske bad 3 list ban kar aa jayegi
Bhai react me vite se project bnate time Chrome par suddenly saara page blank ho jata h plz help
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.
superb react practice project for beginners......'
its easy to learn a lot in your project......
Love the way you teach !!
Bro do add time stamp for various components and some important point also that would be much helpful
Nice video BTW
thank you sir
what theme brother youre using in vscode
bro contactHeader ko App.jsx may use Karega tho pura gayab hora output may even navbar bi
plz help me
in normal html and CSS we can create it less line and easily right it's like complicating this i feel
everything was going good until props vala part aagaya
what is the VS Code theme that you are using in this video bro can you tell me please.......
You could figure out the class of navigation by logging it , but when I logged it , couldn't get any key value pairs
Thank you sir for the project series ....
thse projects are realy so healpfull
\
css module use krenge to , media query to sbke liye alag alag likhna hoga?
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
Project 2 - Contact Us | 10 React Projects for Beginner
When will Project number 8, 9 and 10 will come ?? Please Complete 10 projects. Your Playlist is awesome. #dosomecoding #reactop
❤❤❤ mash allha nice class thank you sir
I'm unable to right react icon command in terminal, can anyone pls help me with that?
kindly make more projects amazing job done
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
does anybody know which vscode theme is this??
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
some one can please tell me also this
that is some awesome content from u.....keep it up👍
thanks for providing these contents
i am not using veet so npx create-react-app project-name
Thank you so much bhaiya i learned about // props // ustate // modules
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
while doing console how it showing output on doing hover???
Use Console Ninja extension.
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
which extension you are using for the direct displying console.log output in vs code.
Console ninja
Check shorts
can anyone tell the name of this vscode theme
Thank you so much sir ❤🙏
watching your second project and that;s very impressive
whic vs code theme u using in this video... name please..?
bhai koi figma file open nahi ho rha h
Yarn dev is not working in my terminal
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
sir why you cannot use bootstrap or tailwind for navbar ?
Css modules -14:35
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
2:22 Bhaiya aapke mai command terminal mai suggestion kese aa....rahe hai?
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!
yes for such small projects it is not necessary but it's the best practice and most real world applications are complex.
in the figma design home contact means the ul content is not present bro of navbar ... btw loved the vedio
Thank You So Much❤
Thank you Sir.
Project-2 doesnt run as desired. Please help
my contact page has become unresponsive what should i do
That height; calc not working the contactheader gets overlap over nav
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
Pls continue series 😢
Terminal pe Git (master) ye kaise ayega.. Somone please help.
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.
best react vedio ever
Bro why you don't use sass?
Because i am not a expert in sass
@@dosomecoding ok bro no problem
Also teach us how to make website responsive
@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
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
he is using brave
can u make a video how to explain project in terview and types of questio asked
sir css me module ke jagha koi or name use kar sakhta hon
Naa
please continue the series
Bahut badhiya sir
Module I can't understand 😢
Excellent brother❤
Bro how could you see the class names during console.log at 15:53
i am facing same problem
Next level
zabardast
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
Nice bhai gret will follow
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.
showcase ke liye css laazmi hai?
love you bhai bht badya
I learn a lot ..
execellent brother
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
Bro great lecture but, your content is mostly on the left and so is your face cam. Other than that Great work, Thanks.
its very valued
it says props text and icon are missing in props validation
Check for component where you have not passed props
I think ouline button
Bhai Css Part bta To bta do ki Kya kiya khud hi kiye ja rahe ho
You are an amazing teacher sir❤️ sir it's a request please make e tutorial series using react bootstrap
Okay