#24: Complete Home Page using React with CSS Styling🔥

Hello what's up guys my name is Vinod Badur Thapa and today in this video we will see how to create our awesome home page and then about us page basically today in this video guys our which is the front end part of the man application with the help of In the react that we are creating, our home page and then our about page, today I am going to create it completely with CSS. Yes, sir, today in this video, although I am including CSS in all the videos, but Today in this video also we will create complete home and then about page and I want to create this design myself for you guys but you can also add your design here and if you add your design It may be a little different than guys, I would like you to please take a screenshot of it, I am feeling it, obviously I made it myself, that is why I am feeling awesome, I do n't know how you would be feeling, but still making it this much, it is enough for you to know the home page and so if you You learned how to style it, then it's more than enough, you can style it yourself. How many times have I told you guys, whenever it comes to the front end, I want you to try it yourself because the front end. And there is a part where you can use your creativity. We are talking about back end. Obviously, what is there in the back end, you will have to write the code of the back end, but your creativity is visible only in the front end, nothing in the back end. Have you done it? Behind the scene work is going on there. And talking about the source code, you can see here our World Best React I Mean Month series, you will also get it here, and here you will get all the source code, CSS, here now. At present, all my images in the files till registration, you will get everything here already. I told you that you must check it out. Okay, the rest of the courses are there, you can watch them as per your choice. You are going to get the best and awesome, so now I want that Well, I have created this and today I will tell you completely how you can create it, but I would also like that you guys try it yourself, to make it better in your own way, now you can add more sections here. Yes, if you want, you can change its total design, you can do a lot of things, so guys, without any delay, now let's start the video and if you remember, in yesterday's video, I told you that I am going to add CSS and show you. So that CSS also, today I will tell you in this video, the video will be a little long, it is going to have JS and CSS only, so if you want, you can continue it, otherwise, guys, you try it yourself. Now to create services home page. Okay, my job is to provide you the best guys and I respect your time. This is the home page. Now remove it. Simple, okay, so always a main because our main hero section is we have a section and in this however I Could have given a name directly like one second I have to write class name or class name and then we have section row awesome so this one I am doing class container and let's go with grade and let's go with the grade to end then columns Okay so basically there are two columns so right here guys you can see very like clearly over here like this container is done my okay in this container if I show you so this is my like a data on the left side and this which Hey, one second, this is a little messed up or if I show you this way, this is my right side data, so this is our main container inside which this will be my first grid, I mean, inside the grid, this is my first child, this is my second child, okay. So this is what it is, this is also my container, this is also my grid, two, I wrote this because first and then second two are going to be children, okay, so that's the thing, no, so this is our paragraph, this is our h1 heading and this is. Our Paragraph Tag So Likha Bhi Hai Guy Are You Ready To Take Your Business To The Next Level We Look No Far At Thapa Technical We Specialize Awesome Meaning Meaning Is Right Awesome Isn't It So This Is Done Look Aap Dheere Dekha Itna Mera Part Ho Now if I go here, you can see that I can see something like this, now below that we have total two button again guys, now in this you can use creativity whether I should use grid now or not, can I grid in this Should I use or should I use Guy's flex box in this? What means so many ways, should I do margin left right, I mean float left right or position relative absolute two, what should I do, what should I do, there are so many options here, man, I have to work. I am doing a dot button okay because obviously it's a button and it's a group of buttons okay and one thing I would like to tell you right now I am using an anchor tag shag and then here I will go with the button. Okay, in this way, I give a class name to the end button, I do a simple button here, obviously and then we have a connect now this is it, this is my one, okay and here connect now means it will go to the contact page, perfect. I will need another button, I will go here, now this is my one button, guys, it is not going anywhere, it is just as it is, I would redirect it to the home page for now, there is no such thing, it does one thing. I do it on services ok and here I write and then more ok or this is it so only if I do this and go here then you can see both of them for a second they are looking very small Is it but or none, I will set it to zoom, I mean, but it looks like this to me, okay, so this is my work on the left side, my work on the like row content is done, you can see. Over here and all these things, guys, when I am clicking on this, I am coming to know that its ending closing tag is this and I have told all this in my ATML course, if you look, in my files, You will get all the extensions here. Which extensions do I use and what do I use? You must check them out. Okay, one more time like this is this. Okay, so write the hero images in this manner so that we can also know. Also all right so now it is a hero images part and or let's go with hero and then image so in this way this part of yours comes and here you can use the image directly in the source I have already shown you guys how. You can get the images and already all the images I had and by the way, I have made it on the right side so that now no matter how much I disturb it, this code of mine will remain the same as it is, it is fine here. You can see that like we have this public and then we have this images part is fine, it is filled here so you can check out already I have shared so it's a home dot PNG what is in the alternate text These people come to coding, write anything, like so guy, I have written simply coding together, I am fine, you can write anything, there is nothing like that and yes, there is just one thing in React that you have to give width and height, no matter what. You can paste a minimum width and height, right? You paste a minimum athlete width and height, just go, okay, this much of my work is done, now if I move, you can see, you are seeing something in this way, just because. I have given the width and height, so now it is visible to me in this way. Okay, now let's do one thing, why don't we tag our main hero section a little bit. You will get an idea where what is the use of container, what is the use of grid, although I guess what is the use of grid and grid two columns, so guess for that you can see, our main is going to be inked css2. Is this part Margin Pedit box Sizing Bud box is simple Color scheme Although there was no neat about it But whatever the fund family I am using urbanist You know and most of the time what happens is that we are this project of ours. Are you running online and online obviously we have a net so you guys there was no need to write minimum vid so if I refresh once then I am seeing something like this isn't it and it's looking awesome and or I just relieved That I remember here, you saw a color scheme, light and dark, oh my God, like now, now after writing this part, it is showing you in this way, depending on whether you have used dark theme or light theme in your system. Isn't it awesome, it was fun and whatever it is, I will remove it for now, later if any problem arises, we will tackle it, this is our h1 and alright here I have written it again, let's go with rum. Okay, what happens? Okay, okay, end line height is given, font is white, bold, paragraph list label is given same font size to input text area, line height is given, latest spacing is given, end word spacing is given, anchor tag. It is simple and this is how, if you create any CSS variable then the way to access it is we need to use the way keyword and inside our parenthesis, you have to write the name of that variable here. Simple, this is the thing. I am doing it, isn't it so easy and then this is our list and this is our container and by the way guys if you want to master CSS I know I say this in every video because I want it to reach every person, every student Because it is absolutely free, it is of 17 hours duration, I have worked very hard, see the starter file, there is the complete source code, there is the note of CSS, again, there is the extension of the code, I will give it by writing, you will not get a better course than this on CSS, that too in 17 hours, once. Try it, if you don't like it, comment, if you like it, then do subscribe. Okay, alright athlete, you have got the idea, okay, we have understood the basics of the container, now I have to target the grade, so here I go. Yes, we have a grade and I will zoom it a little bit for you guys, okay, I have guessed this much, otherwise it was mentioned in the comment that you zoom a little bit, please say so, if you want then display the grid, then you will have to write this much and I I give a gap of 6.4 Ram So Guy, whatever code is this, this is my default code, this is the default code, yes guys, that means no matter which website I use, I just copy paste it there and it looks a little better than that. Look, it is visible to you in this way, okay, this is 100%, what do I have to do now? I have to leave this, I have to right this, so how will I do that now? So for that we have a grid of two columns. There is a fund in which we can define the columns template grid template columns already I have defined in my CSS best course the grid one now I have also added the timeline you can check out 2f I said mine which will be the data on the left side one Second sorry, this is a little, I did it wrong, here you simply write repeat, two columns, I will find and the size of both should be equal, so it is a one fraction unit, so 1f is ok, from control A, I move here, see something so cute. You can see how awesome it is, look, both of them are side by side, so now we can do a lot of things. Okay, and now let us first target the button because this button is like the default button here. There is also a button here, there is a button here, there is a button here, so once I create a button, that button is being used everywhere, so let's target our button and this is the button part. Na guys, we call that a module rules or Ryu Jbal components, I showed you very well in this course of mine, we have something called smks, you will get a timeline plan, I have added it, so in this max, I showed you that whenever you If you are styling a website, what are the rules that you should follow? Like we have a base style, then we have a layout, now it is a reused style which is being used everywhere, so you should You have to add your particulars accordingly. Okay, so let's go with a text and transform. First of all, guys, you can see that I have capitalized it, so with this, whatever you are writing, the first letter is always mine and capital. So guys, you can see that I have placed them side by side so that you can know, now I do one thing in between them, I give the border radius, a no, I give the pad before the border so that you know the end pad. There is a rule that whatever you give at the top and bottom, just give its double at the left and right and check it out. See guys, you can see something like this and obviously its font size is very small. Let's go with 1.7 grams. And boom guy si look how cute it looks isn't it a little light and let's increase the width of the font a little bit, look now let's do one thing why don't we give it a background color so background color is already here button color Look at this, right now, okay, it looks so good, why don't we curve it a little bit? So to curve what we have, we have a border radius and let's go with 8 rm so guys, you can see this. Automatic, I got the extension so that if the browser supports it, then you are seeing something like this and we can do one thing guys, this is its border, why don't we also border it a little bit and give it an awesome border because now look here it is lighter. Sa Na I don't think whether you can see it there in that way or not but this little bit in the background, even the border is not fun so I do one thing 1 rum solid and I say transparent see this now It's looking better ok and obviously now there is no space between them but I will give it in space so you don't have to take tension so this is done and look at one part it looks something like this now look here cursor There is something else here, this pointer of mine is something else, is n't it? Look, the cursor here, I change it and I say pointer, then this will happen that now that click option will come to me here. And there is still space between them, guys, we can tackle it very easily but there is a little time and now we add a little space between the letters, let's wow now looking, see how lovely I am. Looks like I guess there is a little bit of an issue here from top and bottom 0.6 to 0.7 is correct 1.2 1.4 Okay this I think will be better I have to see if I do this then and if I do this then okay. Guys, no, we can keep this much and I just realize that instead of 0.7 here, why not let's go with one and if I make it two, then okay it's looking better now it's looking better and make it 2.2, guys one. One thing I would like to tell you is that whenever you do styling, one rule is that whenever you play with a button, you have to give its double here on the left and right, but some times that double does not work because it is not connected here. The word 'Learn More' is a little bigger and then the word ' Learn More' is a little smaller, so it was not applicable, so give enough space so that both look a little better, okay, whatever looks good to your eyes, go beyond that. It's just that simple and here I work, I give a transition right away because I have to add style to it, I say, I have to change the color of the border and I say, it will take 3 more seconds. Okay, now look, let me tell you one thing, now smux rule says that if some state is changing, like what is this, this is the reuse code isn't it but when I hover over it, basically the state of that particular button is It is changing, so for that I have kept the state rules here. Basically, if anything changes with the states, then all the codes related to them come under this particular block, so this is the basic method which will give you the idea. If there is any Ryu Jabal then come inside it. Well, if there is anything base or layout related then come inside it. Okay, I have told all this in the CSS course, you check it out, you will know. Alright, here I am. Let's go now, what do I want, I want this, whenever someone hovers the button, there should be something extra right there, so how will you do it guys, it's a button and whenever someone hovers over it, say ' hubr' or 'hur bolo', the thing is the same. Here I am using the box shadow, simple, okay and this time I am using the inset, so after doing this, see this automatically, what have I got here guys, I have got this border of mine, I will tell you one thing why I have made the border. Use no key to get this effect, let me tell you if I use border, let's say, how much is it, 0.2 rum, no, okay, so 0.2 rum, if I use solid and obviously white color, did you notice something, did you notice something that whenever I I am changing its state, it has become a major problem in today's time and that is the moment, I deleted it, see this one, the space is moving because here I have added an extra two rums, so that This button, which was mine, has shifted a little towards the right side. We do n't like it. Look, it is not moving. I will show it to you by zooming. You are watching this part too much. Look at this, see how it is moving. Look, this Learn More one is also shaking, both of them are shaking, if there is a little button, then this is what happens, now I will tell you, so datchi, which is my second button, no one is doing any effect to it, it is at its place. Which is a good thing, but right now this box you have is used outside, so I want it to be used inside, inset, so the moment you do this, see now the fit, there is no problem, both are perfectly set in their places. No, there are small things in CSS also which you need to learn and many people think that CSS is very easy but you have seen yourself that it becomes fun when you know the tricks, so this is my button's hubber. Okay guys, and one more thing, I would like to show you that this part that you can see on the top and here, if you look, its color changes, right, the color changes here, but our The color on this case is the same but still I would like to show one thing and that is that when we talk about the state, whenever we hover or whenever it will be in active state, the color of the anchor track is always this. It should remain fine, so it is what it is, but we are making sure that whether it is active or main, it remains the same color on hover, it is fine for now or this is it, so it's my work, it's done, so guys, it's so mine. The work is done now let's go here and we have awesome comment I guess we have a comment css comment block or again look this is very cute isn't it so I write here row section or simple okay see how much Looks cool now here we have a section hero and inside this we have a grid if you remember okay so it's a dot grid and now I'm using guys nesting here and let me know in the comment section that you Whatever browser you are using, does it support nesting or not? And believe me, I have explained this nesting in a very awesome way and here I would like to show you one thing, let's inspect, here I go, this is This is our main look, so the grid, this is the grid template columns and somewhere the style that I have applied is not here, else if you look carefully, if I center the align item, then see it gets centered. This part is the same piece of code which I just wrote here, I just wrote the same thing here, I have done a little something else, so one second spelling is Rang yaar sorry spelling was Rang and or perfect I would like to refresh it once Awesome It has come perfectly in the center, so guys, I copied it in this way, I am going to paste it right here, now this one which is my part, hero content, once I show you, see how easy it is, everything is done automatically. Okay here, what happened was that my hero content was inside my section hero, inside that was my paragraph, I gave margin to it from top and bottom, so sorry or it's only on the top right side, zero bottom and then again on the left side. Zero is fine and then, which is my first child, I have not given anything to my first child from the top and then to the right side, or the bottom part, I have given it only for a second, I am showing it by commenting because If this is not the case, what will happen is that there will be a lot of gap between this and this because I have directly inserted the paragraph and on the basis of that, it is looking so perfect isn't it, this is my part, it is perfect. It is looking perfect because this is a paragraph of mine, I had just targeted it right now which became equal at the top and bottom but when I targeted this paragraph for this one, there was a little over gap in between them, so this is To reduce the over gap in between, I said that brother, the first child in the paragraph, the first child in the hero content, this is my first paragraph, neither what is there nor what is above, we were giving this space. Don't give more space than I was giving at the bottom, give empty 1.2 rum, that much I said, now it's looking better, okay, so now this is our image of our hero section, so we can tackle this image also very easily. Can this is our section over here I go here so it's a hero image simple okay and for now I keep this only so guys simply now here we do one thing already rule on s so grid we have given it so It's a Justify Self Don't speak Justify Items Justify content is there in Flex It's a grid so I center it and it doesn't seem to be in the center It's a 100 so 100 me guys It looks something like this but it doesn't seem to center I don't have any angle and for now I do one thing, I put it on the bottom, I have to see this, okay, this is actual, right, and this is my hero Image Justify Items Justify Content Center is not working One thing Then see, let's try doing a second align item center also, let's try that once, who is going to what here, so guys, I told you there are ways to do this, although I know how I can do it. Yes but I am just seeing that if the work is done with one line then why it is not done then only one option left is Justify Skip Items You can go directly with like Display Flex and then Justify Content Center Justify Content Center This will do It will happen, no matter what, it should happen because it is very simple isn't it? All right, look, it has been centered, so something like this, now we have to target this button of ours and for some region, this is the length of it. I am not feeling good, I don't know why here we have an image or we have an image also, so I do one thing, inside this I target my image, I say its width is 70, it is ok. And whatever height it is, I make it auto so that it gets response and now it's looking better. Okay, so it's up to the guys to do it in their own way, which way do you feel like I should do it, then it's my job. It should be done in this manner and obviously I want a gap between these also. I just release guys, this one is a part of me, I have not given a class on it, and that is this one which was my button, I will give another class on this. I would like and that is your secondary button, okay so it is a secondary button and the reason behind it, now I will tell you and it is super easy and that is, this is my button, right at this place, this is my button here. We have a secondary button. I automatically get the CSS suggestion. This is again because of the extension, so I make its background color transparent. What do I make transparent? What will happen with this? This one is my color. It has become transparent, okay, and by default, I will get a border here. Okay, by default, I will get a border here, so I copy this which is my box shadow and paste it here, so now it is like this. Now I want space between them, so what do I do? This is my secondary button, I say, give me space on the left side, simple, give me space on the left side, what will you give, pad, give margin, give position, absolute relative, what will you do, let's go. With Margin Whenever it comes outside the border, it's always your margin and on the left side, I say 3.2 Rum so it's always again, this is also a guy, you can say the convention is that 3.2 4.8 If you write it this way, then a It feels good and or this is it and see, my work has been done so easily, my work has been done here and I have enjoyed it, okay and here, what is visible is a second color, this is its color. There is something else and here its color is something else, I just release and I go here, whatever color it is, I remove it, it is a button color, I guess or see, see how easy and awesome it has become, we thought it was ok, so ok. Hey, this work of mine is done guys, now what do we have to do, now we have to create this and then create this, I know the video is getting very long and that's the world best CSS course, you see it once, right here Whatever the design is, you can make it in a jiffy, you can make it in a jiffy, I give you this much guarantee, okay, so now again, if you look carefully, this is my part, what is there in this part, like we have a second, you can't see it. If the color is one, two, three and then four then total will be four debs and all four one by one basically if you fit all four in one row then you can say like there is one row and total four columns and again it is a one directional then you Here you can use like simply flex and see the space between them or the space around, add a border on the empty right side and if we do not want the border exactly at the end, we will remove the border at the end. No, we have many video classes, with the help of which we can do it very easily, so there are many ways to do it, okay, so okay, here I go, see, before that, I have to go to my home page, over here and we have one section. That which is my section or I pasted it so now I tell you don't worry so it's a section whose name is section analytics same same is container grid but this time instead of two I have written grid han 4 han columns and then here You can see, I have given the same to all d1 d1 d1 because I will target together and h2 and then paragraph, there is nothing else, okay, so here you can see, there is just one thing extra and that is this grid four columns. So now let's see how we target that and we have this section analytics okay so I go over here so it's again CSS comment and here I go analytics analytics I think spelling or right okay so I go over here so it's a section Analytics I go here, I do one thing, I give a margin so that I get equal gap from top and bottom 19.6 Rum and around I don't mean anything, so you are seeing something like this, okay this is all Coming one below the other, you can use flex here, else you can use grid here, although I have already written grid four columns, okay so now there is no tension and yes obviously grid four columns in other places also. Use can come so it's a part of your review, sorry not review, it's a part of your this part layout because we are setting the layout so you come up come to grade four columns it's a grade template tell the columns okay repeat I would need four columns and all have equal space, two one fraction unit, so the moment you do even this much, see how easily everything has come side by side, no or this much, my work is done. So again I go here oh where did I go oh brother yes okay and let me do one thing now it's a part of my container to which I just have to give a background color and a little border radius this is not all this is all There is only one, these are two lines, gave a background color and a border radius, so now it is done in this way, now whatever text is there, I am not able to see it, so again to show that text, I am What will I do, I will walk inside the container, inside it, although I walk outside the container unnecessarily, then that extra word will become that, meaning you are saying like extra layer of, what do you call it that if one comes inside the other then it will be of CSS. If I have to change the specificity later, it will be difficult for me, so one level is fine. We are getting to know this much very easily with the help of nesting. I am in the same section as Analytics, otherwise this is normal. You could not do it in CSS but now the latest has come so you can do this then you must be having a lot of fun here so it is a color not a column it is a color and here the color is here we have a where and then Dark color, whatever color it will be, okay, so I have given this color, so you can see, now you can see something like this and obviously, I want all my texts to be on the center page and I have given a depth to all of them. If you remember and that is your m, but you had to give it to target the parent, it is a deep one, so I say brother, do one thing, align the text to the center, so by writing so much, see that everything is in the center, or is it just simple? So now I give them a little border on the right side, I have given them a border on the right side, it is simple, so what is the problem, everything was fine, but this extra one on the right, look at it also, if the border has come here, then its I didn't need it, you can see it here, look here, I didn't need this border, so I have to remove it, so how do I remove it? Guys, tell me how to remove it. I think, will you use the last child or the eighth child? Many friends, I am telling you that you should watch this video once, you will get so many ideas, it will be fun to tackle all these things, I am going within this, okay and this again I am doing very deep nesting. I say, okay, whoever is his last child, do one thing for my D-one, make the border of it nun, don't give it a border, I will make it simple in this way, see, if the border is gone then it is done, now what do I have to do? Empty, I have to increase their font size. Okay, I removed the last child, so I go here, which is my h2, I say, increase the font size of s2, then see how much more awesome it has become and this paragraph of mine is I want that the first letter of their alphabet should be capital, so for that I then go down on it, I say, okay, make it capital, you see how easy it is, this was ours, this was what was. It is so cute, we are feeling right so now what is left is this one part left and if you like focus then you will know that like what we did in the hero section, this is the same section but there is one light. Change and that is nothing but the image which was on the right side has come on the left side. The text which was on the left hand side has now come on our right hand side. So what do I do? Then I do this part. Yes, this is our main section, there is no need to write it, now I copy it, and this part is the section over here, I write the third section, although I have HTML also, but that HTML comment will not be useful here. This will not work because this is JS one, although the writing should remain HTML but this JS is one, so paste the third section now, this is my hero image, I will remove it from here, I will place it above the hero content, just by doing this, No, look at this one, this is my hero section, my end, this is it, it's done, what was needed, this is what I needed, it's done, look now what I need to do, I just have to change the text, so I do one thing and change it. What a big deal is n't it, so I go here, so this is my text, it's changed, okay, the image is also ready, it's not home here, it's a design, it's a design, okay, so just by changing this, see, my work is done. It's so easy, this is my home page ready. Okay, now only one thing is left and that is nothing but your photo and footer. So guys, now I am going to give you a task. Okay, I have shown you the complete. Now you can basically use CSS in React. How can you add and this is how you can code with the help of this so here we have our about page one second remove this so guys I want you to take a screenshot of this right now you pause it okay this ditto you create I I want to share the source code, here you don't have to worry about it, but if I share the source code and you copy paste it, then what is the use of my hard work of telling you for 30 minutes, sorry, what is the use of telling me for 40 minutes. You were going to do it by copy and paste, so I would have made a one minute video, then brother, here is the copy paste, I mean, here is the code, copy paste it, I don't have to work so hard, otherwise I want you to try it yourself. Do this, which is my about page, sorry, not this one, take a screenshot, make it yourself, simple, this is the same and the one you can see in the footer below, make this also yourself and it will have something like this nap bar is always on top. In the same way, the footer will always be at the bottom. I mean, it is necessary for the footer to be at the bottom of every page, so it does not mean that again you should not create a footer on every page, like if you remember, we have In app.js, just as I created the bar as a component, similarly by making the footer as a component, you have to add the footer at the bottom of its roots, okay, you try it, okay and hope you like today's video. Must have liked because the video is going too long I don't want it to get so long For Complete HTML & CSS I Once Again Highly Recommend To Check Out World Best ATML Course World Best CSS Course And Further JS One And All React Course For That This is a CSS course, you can watch it once, guys, no matter what kind of website you create, I guarantee you, you will get everything here, and I have the link for the CSS also, I will give it in the description below, hope guys. You must have liked today's video and finally, there were many of you who used to talk about CSS. Sir, you did not show it by email. Today I did it and showed it. This video was especially for them and I had said in the beginning itself that today's video was only for them. If you are designing, then if you are not interested in designing then you can skip it, you can watch yesterday's video, you can watch the previous video, my main aim is that if I am starting something, then take it till the end and do one thing at a time. Let me tell you, for those who did not know designing, today this video was very important, isn't it? So ya guys, this is it, today this is not the only response for this video, obviously you will say, then why is it not response, we will move ahead. Let's see but at least now you know how we can do it, so now you create about page, we have a contact page, then we have our services, now later you will be logged in and then you have signed up, then you login and then Sign up guys, you can do it yourself, I told you in yesterday's video, I will tell you, but now you have to do this also because CSSC is there, so you try it, don't worry, during the day, everything is in the final code. I will give but I want you to try it yourself, okay so guys, this is it today, this much hope for this video, you must have liked the video guys, how did you like the video, please do tell by commenting below and the next target is 1 million subscribers so guys, I get it. Hoon I'll See You Till Next Video Guy Thank You So Much Take [ Music] Care [Music]