‫Hey, there.
‫Welcome back.
‫Now let us quickly start our journey.
‫I'm going to jump onto my beer score.
‫And one quick recommendation try to watch all these lectures on one screen.
‫So the first thing I did is I created our index card game and then I created three folders.
‫The first one is about media, which is going to store all my images.
‫The second one is about a year, which is going to store my JavaScript file.
‫The third one is about scissors, which is going to store all my service.
‫While now in media, I have already stored all the images like my favorite on my icon, my logo.
‫Some background images as it is all these shapes.
‫So if you remember, we are going to utilize several different type of shape here and there, if you
‫observe and I've kept them in a separate folder.
‫Now, after the media have ideas while which is named artist Sam Burgess, fine I inside my sources,
‫I have style or CSIS looks good.
‫Simple folder structure.
‫Now you can also keep all these and not folder called said if you want.
‫But as a beginner, this is enough.
‫The next time I'm going to do this, I'm going to utilize my image.
‫Yup.
‫We have our base structure.
‫And let me give a quick data, which is going to be high school, learn physics, chemistry and maths
‫online.
‫So that is going to be high school.
‫This works fine.
‫I've made structures ready, you can now right click and click on Open with lifesaver.
‫So this is our current lifesaver and we have our title.
‫OK.
‫This is the demo version.
‫Let me change this one in a bit.
‫So then I'm going to call this as demo resume itself.
‫So now this this demo was in high school, great.
‫Our first step is ready.
‫Now I can attach all basic things like Let me link my stylus here says this is going to be inside my
‫house is a smaller than stellar cast.
‫I also need to link my fabric one so I can simply link it here at the top of my metta and I can link
‫my.
‫Fabric, one that looks good.
‫And let me move my title to the bottom.
‫So hard, I will have all of my America's head, I will have all of my links and then I will have my
‫title looks good.
‫Now there are few sections that we need to mention.
‫And we can start, according to our Haydar, so there will be this heinous action.
‫And this is going to be our partners action.
‫We can call this some stop S. Something related to information, section promotions, action, whatever
‫you want to call and we are going to have for that.
‫OK.
‫Looks great.
‫I'm back now inside my body.
‫I'm going to create a header.
‫And then after that, I'm going to create all the means action, and then I mean, I want to create
‫up for discussion looks quite.
‫Now, let's start our journey with each one of them.
‫Go inside out.
‫There will be two parts the bass part is going to store the logo and then we are going to have a separate
‫navigation bar.
‫You can simply divide with the help of if so, I can use one part can be divided in the form of Deb
‫and the other part can utilize in the form of now.
‫But then we also need something to keep them, maybe in a container.
‫So we need to do something fast.
‫I'm going to create a div and I'm going to call this house container.
‫And inside this, I'm going to keep both of them that is there for my logo.
‫So I can simply say to our logo, this is going to be active, which is going to contain my logo.
‫And then the second view is that it's going to include my menus.
‫So I'm going to call this as do.
‫And this will be called as Nick Stockman, you do the menu, OK?
‫Looks quite now wide the menu.
‫I'd be now by the navigation, something like this, why the now or something like this?
‫Because if I right click, click and spend go on small screen.
‫You see this.
‫This menu is different.
‫So what I'm going to do is I'm going to utilize this menu only when I'm going to a mobile version on,
‫I should say, my screen sizes less than something, maybe seven and then I'm going to utilize this
‫OK, less than nine.
‫And so that is the case.
‫I'm going to get this.
‫Otherwise, I'm going to have this big stock menu.
‫OK, so I will be creating two different menus.
‫The first one will be the menu, which will be visible only when we are on the stop.
‫Or I should say bigger screen on smaller screen.
‫There will be a new live or now version, which is known as menu or M-Net five M Navigation, something
‫like this.
‫I'm taking these things as an example.
‫OK, so this is not going to be announced by now.
‫Dash menu, which is our big stop menu.
‫Great and there will be another one which is now docked in menu, which we will create later when we
‫are working on responsiveness.
‫I know we are going a bit fast, but just try to understand the piece because we already know all these
‫concept.
‫Great, now inside this, I just need to read some comments, yes, on my image and add some elements.
‫So and so in my case, I'm going to write everything, but here comes the greatest on.
‫I should say more information whenever we are working on these big projects because we are going to
‫create our complete website.
‫And maybe you want to create a contact us page, maybe testimonial page.
‫So there will be tons of success.
‫And you also try to have a team like here I'm appointing a Blue White team, so you have some team colors,
‫what you can do if you can keep things separate.
‫For example, here I'm going to create a new file, which is see a file later, not now in which I'm
‫going to store everything we just common for our whole project.
‫So I will call this as global.
‫It is going to store everything global setting.
‫It is going to store variables and everything else.
‫Maybe then I will create a new file, maybe for responsive dark CSF that is going to store everything
‫related to our media queries.
‫And then I will also create a new file, which is utility.
‫So if you have watched my old stub section, you will understand about utilities and components so I
‫can create utilities for my own project as well.
‫So that's how I'm going to create different files.
‫And then later on, I'm going to import them here.
‫So all the files will be imported.
‫And if you have watched my stuff section as well, you will get all these information pretty quickly.
‫OK, so let me jump here.
‫First, we need to define about container why?
‫Because currently we are going to occupy 100 percent of these space.
‫So we need to restrict this container.
‫OK, so let me add some content, maybe here I should add my image post.
‫And I've stored my image tie in my medium.
‫And then inside my.
‫This logo not being on, you can add some information, you know, high school looks good.
‫The second thing I'm going to do is I'm going to add I'm a menu, so I'm going to realize you well.
‫And then this U.N. is going to have multiple tags.
‫Why?
‫Well, we are going to clean them and then it will also have multiple dogs.
‫So what I'm going to do is I'm going to have dogs, which will be three or four and then we will have
‫a latex.
‫So you will have these attacks and then attacks because we are going killing all these attacks.
‫So I just need to copy them.
‫Looks gorgeous ahead, I'm going to have a home option, then I'm going to have.
‫Packages and I'm going to have testimonials.
‫And then there will be a pattern, so I don't need to have this, and I cannot actually utilize whatever
‫the protein content that I want.
‫So I'm going to utilize contact us.
‫This looks fine to this U.N. is going to have these hard elements.
‫Save this one and get back here, you can see all the changes now again.
‫Currently, we are not in our Flexbox, we don't have anything like that and everything else.
‫So what I'm going to do is I'm going to add this container in my first.
‫Well, before that, I also need to change the default settings.
‫The default global setting, if you remember.
‫I hope you remember them.
‫What I'm going to do is I'm going to set margin as you know, then I'm going to have batting, as you
‫know.
‫Then there will be more excising, which is going to be border box.
‫And then definitely I'm going to have a default on family, which is going to be popping.
‫We are utilizing the Scorpions from long time and I need Boom or the Scorpions.
‫What I'm going to do is I'm going glad I can just utilize Google Forms to remember these things.
‫Now the next thing is going to be the default color.
‫I'm going to call this color as well, and I'm going to utilize the default color.
‫So let me have this default kind of this is not actually black, but something darker.
‫So if you observe it that between something blue and black, something.
‫OK.
‫These are the default setting for now.
‫Let me also remove the tax declaration for one, and I'm going to go with none.
‫And I don't want less standing for now, I'm going to say none.
‫Mark, you don't need to do that.
‫You can select a specific part and CIUSSS and remove them.
‫And if I observe, OK, this is better, but I also need to add some automation on both sides.
‫So what I'm going to do is I'm going to have a container.
‫And I'm going to set a time going to say, whereas my divorcing.
‫Now this is going to have space from here to here, that is 90 percent, if so.
‫This is Armani.
‫This is harder, and then this is our there.
‫You can see this 90 percent is till this point.
‫So what I can do is I can if I find out that there should be a margin or.
‫So this will distribute margin on both side automatically.
‫Look, now they have this oranges margin auto, and then I also need for the final maximum work.
‫Otherwise, if I try to pin this on a big screen, it was still going to have this 90 percent thing,
‫which I don't want.
‫I want to correct maximum work, maximum Rachel, you wanted him, except say, if I save this one,
‫get back here.
‫OK?
‫So if there is any big screen, if I'm opening this on any day off screen, it is going to take a maximum
‫of this one two eight zero pixel.
‫Now let me give you a good example it's a 980 pixel.
‫So I suppose this is a big screen.
‫I don't want my content to be spread everywhere.
‫I just want to keep them in-between.
‫So this whole thing, which is known as container works when.
‫And wanted to be McSally's the usual max work that we do.
‫Why do we take this container and why we are not using this whole work on the whole structure?
‫The thing is, there will be certain cases where you need to cover whole background, for example,
‫if I scroll down.
‫Maybe you need this hole as we deem is on need, background or maybe some background color that you
‫want to cover 100 percent.
‫Or maybe there will be something some content that you need to stretch on 100 percent off area.
‫For this particular reason, I strongly recommend you can use this container thing and then have IMAX
‫with.
‫Now, the next thing I'm going to do is I'm going to release Flex property on our unit and try to arrange
‫all these items in sequence.
‫So how do I need to arrange all these item in sequence?
‫Also, one thing I need to have both of them on a single so.
‫Let me jump here.
‫So this is going to be our whole now, but I'm going to call.
‫This has now got here.
‫And seeing this one like this now by Shankar and select the Soundbar Center display property of Flex,
‫now it should be and I sequence great.
‫Now you can utilise our knowledge.
‫All I have to do is use gesture by content, and I just need to use space between all these spaces when
‫people between them get back.
‫Great.
‫The next time one goes like this, this will dog and workers arrange all of them in sequence, so all
‫I have to do is like this the menu.
‫I here you can name this as matter of many also.
‫And I'm going to say legacy with.
‫And then I'm going to say I just believe legs.
‫And the other thing is this will be just to buy content or flags, and for now, save this one and get
‫back here.
‫You can see everything is arranged.
‫The other thing is, let me bring this in center.
‫So all I have to do is use a line.
‫Items and let's bring them in the center.
‫Now, if you observe this whole, you will mean you need to be at the center of this B menu.
‫I hope you got the idea.
‫So what we can do is we can add.
‫Online items center to how all the items enter by default.
‫OK.
‫I hope you got the idea and I don't need this and don't know.
‫Great.
‫The stocks were.
‫Now, in the next lecture, let us complete our whole navigation bar, we need to add some top margin
‫and some spacing and create this in our modern form.
‫I hope you got the idea what we are trying to do.
‫We have been doing this whole team stuff for multiple times.
‫Let's compute this quickly in the next one.
‫Thank you for following and I see you guys in next one.