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!!
@@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.
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
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!
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.
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.
If anyone is feeling that using css modules is difficult just do it using normal css. It is the same Don't stop doing this project just because u did'nt understand or u are not comfortable with css moudles
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!
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
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.
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!
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
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
@@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??
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,
These project might be basic but it definitely clear the doubts and core react thanks man!!!👌👌
These projects are really amazing.
Please upload more projects.
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 dhamal macha diya react padhane mai to.
superb react practice project for beginners......'
its easy to learn a lot in your project......
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 soooooo much for this amazing playlist brother! It is really very helpful..
Tahnks for all the details, extensions etc
Love & support from Pakistan!
It's amazing!! Thank you sir ! such a easy way..clean and simple understanding code and explanation 👌
that is some awesome content from u.....keep it up👍
Amazing tutorial... Just loved it!
Greate Sir 💯
everything was going good until props vala part aagaya
❤❤❤ mash allha nice class thank you sir
console.log wale function work nai kr rha how to fix any extension?
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.
Thanks for this valuable content ❤, every project covers topics to master react
Thank you sir for the project series ....
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.
thanks for providing these contents
Love the way you teach !!
When will Project number 8, 9 and 10 will come ?? Please Complete 10 projects. Your Playlist is awesome. #dosomecoding #reactop
Thanks ❤
kindly make more projects amazing job done
Bahut badhiya sir
best react vedio ever
watching your second project and that;s very impressive
love you bhai bht badya
thse projects are realy so healpfull
\
Nice bhai gret will follow
Thank you Sir.
If anyone is feeling that using css modules is difficult just do it using normal css. It is the same
Don't stop doing this project just because u did'nt understand or u are not comfortable with css moudles
50:43
Project 2 - Contact Us | 10 React Projects for Beginner
Bro do add time stamp for various components and some important point also that would be much helpful
Nice video BTW
Thank you so much sir ❤🙏
Thank You So Much❤
bro list banane ke liye shortcut use kare li*3 only phir uske bad 3 list ban kar aa jayegi
Excellent brother❤
please continue the series
Thank you so much bhaiya i learned about // props // ustate // modules
Nice brother
Nice sir
thank you sir
execellent brother
Next level
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
can u make a video how to explain project in terview and types of questio asked
css module use krenge to , media query to sbke liye alag alag likhna hoga?
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
How are you finding the gap between the buttons in figma ?
in the figma design home contact means the ul content is not present bro of navbar ... btw loved the vedio
I learn a lot ..
zabardast
You could figure out the class of navigation by logging it , but when I logged it , couldn't get any key value pairs
Completed 23-11-24
good brother🥰
its very valued
while doing console how it showing output on doing hover???
Use Console Ninja extension.
can't we immport module.css directly without styles object
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
what is the VS Code theme that you are using in this video bro can you tell me please.......
which extension you are using for the direct displying console.log output in vs code.
Console ninja
Check shorts
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
Css modules -14:35
Thankssssss
when i import navigation from ./camponent/navigation my code will getting blured and i couldnt get navbar on browser whats the problem
what theme brother youre using in vscode
Sir waiting for next vedio
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
in normal html and CSS we can create it less line and easily right it's like complicating this i feel
Bro great lecture but, your content is mostly on the left and so is your face cam. Other than that Great work, Thanks.
2:22 Bhaiya aapke mai command terminal mai suggestion kese aa....rahe hai?
styles wala part not working in my vs
Image copy krne k liye web page kahan se milega
hi sir its very helphul
whic vs code theme u using in this video... name please..?
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
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
Install Extenion console ninja
Bro apka ye project sb acha tha bus apne module bnake thoda complicated kr diya
please responsive bhi bataiye kese kre
AWESOME
bro contactHeader ko App.jsx may use Karega tho pura gayab hora output may even navbar bi
plz help me
Pls continue series 😢
I'm unable to right react icon command in terminal, can anyone pls help me with that?
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.
sir why you cannot use bootstrap or tailwind for navbar ?
Also teach us how to make website responsive
That height; calc not working the contactheader gets overlap over nav
Sir please responsive bhi bataiye kese kre
nice
can anyone tell the name of this vscode theme
Sir jo apne figma project bnaiye hann inki video bna den plz
Bro theme name kya hai
does anybody know which vscode theme is this??
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.
Terminal pe Git (master) ye kaise ayega.. Somone please help.
Yarn dev is not working in my terminal