1 00:00:00,570 --> 00:00:01,110 ‫Hey, there. 2 00:00:01,260 --> 00:00:01,950 ‫Welcome back. 3 00:00:02,160 --> 00:00:03,960 ‫Now let us quickly start our journey. 4 00:00:04,980 --> 00:00:06,930 ‫I'm going to jump onto my beer score. 5 00:00:07,320 --> 00:00:11,640 ‫And one quick recommendation try to watch all these lectures on one screen. 6 00:00:12,390 --> 00:00:17,070 ‫So the first thing I did is I created our index card game and then I created three folders. 7 00:00:17,310 --> 00:00:21,210 ‫The first one is about media, which is going to store all my images. 8 00:00:21,660 --> 00:00:25,500 ‫The second one is about a year, which is going to store my JavaScript file. 9 00:00:25,950 --> 00:00:29,850 ‫The third one is about scissors, which is going to store all my service. 10 00:00:29,850 --> 00:00:37,080 ‫While now in media, I have already stored all the images like my favorite on my icon, my logo. 11 00:00:37,350 --> 00:00:40,440 ‫Some background images as it is all these shapes. 12 00:00:40,800 --> 00:00:46,110 ‫So if you remember, we are going to utilize several different type of shape here and there, if you 13 00:00:46,110 --> 00:00:49,890 ‫observe and I've kept them in a separate folder. 14 00:00:51,370 --> 00:00:58,600 ‫Now, after the media have ideas while which is named artist Sam Burgess, fine I inside my sources, 15 00:00:58,600 --> 00:01:01,330 ‫I have style or CSIS looks good. 16 00:01:01,480 --> 00:01:02,920 ‫Simple folder structure. 17 00:01:03,430 --> 00:01:07,520 ‫Now you can also keep all these and not folder called said if you want. 18 00:01:07,900 --> 00:01:09,640 ‫But as a beginner, this is enough. 19 00:01:10,480 --> 00:01:13,570 ‫The next time I'm going to do this, I'm going to utilize my image. 20 00:01:15,610 --> 00:01:15,820 ‫Yup. 21 00:01:16,120 --> 00:01:17,740 ‫We have our base structure. 22 00:01:18,130 --> 00:01:23,920 ‫And let me give a quick data, which is going to be high school, learn physics, chemistry and maths 23 00:01:23,920 --> 00:01:24,400 ‫online. 24 00:01:24,970 --> 00:01:26,710 ‫So that is going to be high school. 25 00:01:34,910 --> 00:01:35,740 ‫This works fine. 26 00:01:36,010 --> 00:01:40,550 ‫I've made structures ready, you can now right click and click on Open with lifesaver. 27 00:01:40,700 --> 00:01:43,880 ‫So this is our current lifesaver and we have our title. 28 00:01:44,390 --> 00:01:44,920 ‫OK. 29 00:01:44,960 --> 00:01:46,260 ‫This is the demo version. 30 00:01:46,280 --> 00:01:47,900 ‫Let me change this one in a bit. 31 00:01:48,320 --> 00:01:51,170 ‫So then I'm going to call this as demo resume itself. 32 00:01:52,890 --> 00:01:56,100 ‫So now this this demo was in high school, great. 33 00:01:56,790 --> 00:01:58,050 ‫Our first step is ready. 34 00:01:58,320 --> 00:02:05,400 ‫Now I can attach all basic things like Let me link my stylus here says this is going to be inside my 35 00:02:05,400 --> 00:02:07,590 ‫house is a smaller than stellar cast. 36 00:02:08,010 --> 00:02:15,510 ‫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 37 00:02:15,510 --> 00:02:15,870 ‫my. 38 00:02:17,000 --> 00:02:19,010 ‫Fabric, one that looks good. 39 00:02:19,280 --> 00:02:21,560 ‫And let me move my title to the bottom. 40 00:02:24,020 --> 00:02:28,790 ‫So hard, I will have all of my America's head, I will have all of my links and then I will have my 41 00:02:28,790 --> 00:02:30,170 ‫title looks good. 42 00:02:30,770 --> 00:02:33,370 ‫Now there are few sections that we need to mention. 43 00:02:34,670 --> 00:02:38,900 ‫And we can start, according to our Haydar, so there will be this heinous action. 44 00:02:38,970 --> 00:02:41,180 ‫And this is going to be our partners action. 45 00:02:41,780 --> 00:02:48,710 ‫We can call this some stop S. Something related to information, section promotions, action, whatever 46 00:02:48,710 --> 00:02:51,080 ‫you want to call and we are going to have for that. 47 00:02:51,530 --> 00:02:51,940 ‫OK. 48 00:02:51,980 --> 00:02:52,700 ‫Looks great. 49 00:02:53,090 --> 00:02:55,430 ‫I'm back now inside my body. 50 00:02:55,430 --> 00:02:56,930 ‫I'm going to create a header. 51 00:02:58,830 --> 00:03:04,380 ‫And then after that, I'm going to create all the means action, and then I mean, I want to create 52 00:03:04,380 --> 00:03:06,570 ‫up for discussion looks quite. 53 00:03:07,620 --> 00:03:10,560 ‫Now, let's start our journey with each one of them. 54 00:03:11,660 --> 00:03:12,550 ‫Go inside out. 55 00:03:13,070 --> 00:03:19,370 ‫There will be two parts the bass part is going to store the logo and then we are going to have a separate 56 00:03:19,460 --> 00:03:20,510 ‫navigation bar. 57 00:03:22,100 --> 00:03:27,830 ‫You can simply divide with the help of if so, I can use one part can be divided in the form of Deb 58 00:03:27,830 --> 00:03:31,010 ‫and the other part can utilize in the form of now. 59 00:03:31,490 --> 00:03:36,110 ‫But then we also need something to keep them, maybe in a container. 60 00:03:36,530 --> 00:03:39,380 ‫So we need to do something fast. 61 00:03:39,380 --> 00:03:42,980 ‫I'm going to create a div and I'm going to call this house container. 62 00:03:43,760 --> 00:03:47,770 ‫And inside this, I'm going to keep both of them that is there for my logo. 63 00:03:47,780 --> 00:03:53,450 ‫So I can simply say to our logo, this is going to be active, which is going to contain my logo. 64 00:03:53,810 --> 00:03:57,650 ‫And then the second view is that it's going to include my menus. 65 00:03:58,100 --> 00:03:59,840 ‫So I'm going to call this as do. 66 00:04:01,250 --> 00:04:07,210 ‫And this will be called as Nick Stockman, you do the menu, OK? 67 00:04:07,590 --> 00:04:09,860 ‫Looks quite now wide the menu. 68 00:04:10,980 --> 00:04:16,770 ‫I'd be now by the navigation, something like this, why the now or something like this? 69 00:04:17,250 --> 00:04:22,350 ‫Because if I right click, click and spend go on small screen. 70 00:04:22,920 --> 00:04:23,850 ‫You see this. 71 00:04:23,850 --> 00:04:25,080 ‫This menu is different. 72 00:04:26,190 --> 00:04:31,760 ‫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, 73 00:04:31,770 --> 00:04:36,930 ‫I should say, my screen sizes less than something, maybe seven and then I'm going to utilize this 74 00:04:37,170 --> 00:04:38,490 ‫OK, less than nine. 75 00:04:38,530 --> 00:04:40,470 ‫And so that is the case. 76 00:04:40,470 --> 00:04:41,460 ‫I'm going to get this. 77 00:04:41,910 --> 00:04:44,730 ‫Otherwise, I'm going to have this big stock menu. 78 00:04:44,910 --> 00:04:48,330 ‫OK, so I will be creating two different menus. 79 00:04:48,780 --> 00:04:53,040 ‫The first one will be the menu, which will be visible only when we are on the stop. 80 00:04:53,310 --> 00:04:56,350 ‫Or I should say bigger screen on smaller screen. 81 00:04:56,370 --> 00:05:03,540 ‫There will be a new live or now version, which is known as menu or M-Net five M Navigation, something 82 00:05:03,540 --> 00:05:04,050 ‫like this. 83 00:05:04,620 --> 00:05:06,660 ‫I'm taking these things as an example. 84 00:05:06,780 --> 00:05:11,100 ‫OK, so this is not going to be announced by now. 85 00:05:11,510 --> 00:05:14,670 ‫Dash menu, which is our big stop menu. 86 00:05:14,760 --> 00:05:21,210 ‫Great and there will be another one which is now docked in menu, which we will create later when we 87 00:05:21,210 --> 00:05:22,710 ‫are working on responsiveness. 88 00:05:24,130 --> 00:05:30,880 ‫I know we are going a bit fast, but just try to understand the piece because we already know all these 89 00:05:30,880 --> 00:05:31,390 ‫concept. 90 00:05:32,550 --> 00:05:39,330 ‫Great, now inside this, I just need to read some comments, yes, on my image and add some elements. 91 00:05:39,940 --> 00:05:46,560 ‫So and so in my case, I'm going to write everything, but here comes the greatest on. 92 00:05:46,560 --> 00:05:52,830 ‫I should say more information whenever we are working on these big projects because we are going to 93 00:05:53,010 --> 00:05:54,840 ‫create our complete website. 94 00:05:54,840 --> 00:05:58,980 ‫And maybe you want to create a contact us page, maybe testimonial page. 95 00:05:59,490 --> 00:06:01,350 ‫So there will be tons of success. 96 00:06:02,130 --> 00:06:09,330 ‫And you also try to have a team like here I'm appointing a Blue White team, so you have some team colors, 97 00:06:09,330 --> 00:06:11,850 ‫what you can do if you can keep things separate. 98 00:06:12,300 --> 00:06:20,010 ‫For example, here I'm going to create a new file, which is see a file later, not now in which I'm 99 00:06:20,010 --> 00:06:24,240 ‫going to store everything we just common for our whole project. 100 00:06:24,480 --> 00:06:26,550 ‫So I will call this as global. 101 00:06:26,700 --> 00:06:29,610 ‫It is going to store everything global setting. 102 00:06:29,610 --> 00:06:32,160 ‫It is going to store variables and everything else. 103 00:06:32,850 --> 00:06:38,760 ‫Maybe then I will create a new file, maybe for responsive dark CSF that is going to store everything 104 00:06:38,760 --> 00:06:40,800 ‫related to our media queries. 105 00:06:41,280 --> 00:06:44,570 ‫And then I will also create a new file, which is utility. 106 00:06:45,540 --> 00:06:51,030 ‫So if you have watched my old stub section, you will understand about utilities and components so I 107 00:06:51,030 --> 00:06:53,670 ‫can create utilities for my own project as well. 108 00:06:54,210 --> 00:06:56,970 ‫So that's how I'm going to create different files. 109 00:06:56,970 --> 00:06:59,640 ‫And then later on, I'm going to import them here. 110 00:07:00,330 --> 00:07:02,410 ‫So all the files will be imported. 111 00:07:02,410 --> 00:07:08,400 ‫And if you have watched my stuff section as well, you will get all these information pretty quickly. 112 00:07:09,450 --> 00:07:11,120 ‫OK, so let me jump here. 113 00:07:12,450 --> 00:07:15,210 ‫First, we need to define about container why? 114 00:07:17,190 --> 00:07:20,490 ‫Because currently we are going to occupy 100 percent of these space. 115 00:07:21,650 --> 00:07:23,540 ‫So we need to restrict this container. 116 00:07:23,780 --> 00:07:28,520 ‫OK, so let me add some content, maybe here I should add my image post. 117 00:07:30,450 --> 00:07:33,540 ‫And I've stored my image tie in my medium. 118 00:07:35,990 --> 00:07:37,700 ‫And then inside my. 119 00:07:39,240 --> 00:07:47,490 ‫This logo not being on, you can add some information, you know, high school looks good. 120 00:07:47,910 --> 00:07:52,730 ‫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. 121 00:07:53,250 --> 00:07:56,910 ‫And then this U.N. is going to have multiple tags. 122 00:07:57,210 --> 00:07:57,780 ‫Why? 123 00:07:58,620 --> 00:08:03,600 ‫Well, we are going to clean them and then it will also have multiple dogs. 124 00:08:04,080 --> 00:08:10,230 ‫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 125 00:08:10,230 --> 00:08:11,040 ‫a latex. 126 00:08:12,840 --> 00:08:19,870 ‫So you will have these attacks and then attacks because we are going killing all these attacks. 127 00:08:19,940 --> 00:08:21,450 ‫So I just need to copy them. 128 00:08:25,070 --> 00:08:29,810 ‫Looks gorgeous ahead, I'm going to have a home option, then I'm going to have. 129 00:08:31,860 --> 00:08:35,490 ‫Packages and I'm going to have testimonials. 130 00:08:37,970 --> 00:08:43,910 ‫And then there will be a pattern, so I don't need to have this, and I cannot actually utilize whatever 131 00:08:43,910 --> 00:08:45,470 ‫the protein content that I want. 132 00:08:45,800 --> 00:08:48,260 ‫So I'm going to utilize contact us. 133 00:08:51,830 --> 00:08:56,270 ‫This looks fine to this U.N. is going to have these hard elements. 134 00:08:58,260 --> 00:09:03,270 ‫Save this one and get back here, you can see all the changes now again. 135 00:09:03,300 --> 00:09:08,580 ‫Currently, we are not in our Flexbox, we don't have anything like that and everything else. 136 00:09:08,580 --> 00:09:12,330 ‫So what I'm going to do is I'm going to add this container in my first. 137 00:09:13,880 --> 00:09:16,820 ‫Well, before that, I also need to change the default settings. 138 00:09:16,970 --> 00:09:19,400 ‫The default global setting, if you remember. 139 00:09:21,290 --> 00:09:22,520 ‫I hope you remember them. 140 00:09:22,820 --> 00:09:29,060 ‫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 141 00:09:29,060 --> 00:09:29,390 ‫know. 142 00:09:29,690 --> 00:09:33,980 ‫Then there will be more excising, which is going to be border box. 143 00:09:36,660 --> 00:09:42,010 ‫And then definitely I'm going to have a default on family, which is going to be popping. 144 00:09:42,270 --> 00:09:47,640 ‫We are utilizing the Scorpions from long time and I need Boom or the Scorpions. 145 00:09:48,180 --> 00:09:53,820 ‫What I'm going to do is I'm going glad I can just utilize Google Forms to remember these things. 146 00:09:54,420 --> 00:09:57,270 ‫Now the next thing is going to be the default color. 147 00:09:57,660 --> 00:10:02,820 ‫I'm going to call this color as well, and I'm going to utilize the default color. 148 00:10:03,780 --> 00:10:09,180 ‫So let me have this default kind of this is not actually black, but something darker. 149 00:10:10,230 --> 00:10:13,770 ‫So if you observe it that between something blue and black, something. 150 00:10:14,460 --> 00:10:14,820 ‫OK. 151 00:10:14,880 --> 00:10:17,040 ‫These are the default setting for now. 152 00:10:17,370 --> 00:10:22,500 ‫Let me also remove the tax declaration for one, and I'm going to go with none. 153 00:10:23,960 --> 00:10:27,650 ‫And I don't want less standing for now, I'm going to say none. 154 00:10:27,920 --> 00:10:29,390 ‫Mark, you don't need to do that. 155 00:10:29,870 --> 00:10:32,960 ‫You can select a specific part and CIUSSS and remove them. 156 00:10:33,440 --> 00:10:39,590 ‫And if I observe, OK, this is better, but I also need to add some automation on both sides. 157 00:10:39,590 --> 00:10:42,410 ‫So what I'm going to do is I'm going to have a container. 158 00:10:43,640 --> 00:10:48,500 ‫And I'm going to set a time going to say, whereas my divorcing. 159 00:10:50,200 --> 00:10:56,110 ‫Now this is going to have space from here to here, that is 90 percent, if so. 160 00:10:59,570 --> 00:11:00,860 ‫This is Armani. 161 00:11:01,010 --> 00:11:04,180 ‫This is harder, and then this is our there. 162 00:11:04,700 --> 00:11:07,790 ‫You can see this 90 percent is till this point. 163 00:11:09,980 --> 00:11:14,480 ‫So what I can do is I can if I find out that there should be a margin or. 164 00:11:15,940 --> 00:11:20,050 ‫So this will distribute margin on both side automatically. 165 00:11:20,230 --> 00:11:27,880 ‫Look, now they have this oranges margin auto, and then I also need for the final maximum work. 166 00:11:28,880 --> 00:11:34,370 ‫Otherwise, if I try to pin this on a big screen, it was still going to have this 90 percent thing, 167 00:11:34,550 --> 00:11:35,480 ‫which I don't want. 168 00:11:36,640 --> 00:11:43,320 ‫I want to correct maximum work, maximum Rachel, you wanted him, except say, if I save this one, 169 00:11:43,340 --> 00:11:44,110 ‫get back here. 170 00:11:44,170 --> 00:11:44,560 ‫OK? 171 00:11:45,310 --> 00:11:51,880 ‫So if there is any big screen, if I'm opening this on any day off screen, it is going to take a maximum 172 00:11:51,880 --> 00:11:55,060 ‫of this one two eight zero pixel. 173 00:11:55,690 --> 00:11:58,660 ‫Now let me give you a good example it's a 980 pixel. 174 00:11:58,870 --> 00:12:00,530 ‫So I suppose this is a big screen. 175 00:12:00,550 --> 00:12:03,430 ‫I don't want my content to be spread everywhere. 176 00:12:03,670 --> 00:12:06,220 ‫I just want to keep them in-between. 177 00:12:06,940 --> 00:12:10,060 ‫So this whole thing, which is known as container works when. 178 00:12:11,290 --> 00:12:14,980 ‫And wanted to be McSally's the usual max work that we do. 179 00:12:16,010 --> 00:12:22,210 ‫Why do we take this container and why we are not using this whole work on the whole structure? 180 00:12:22,780 --> 00:12:27,670 ‫The thing is, there will be certain cases where you need to cover whole background, for example, 181 00:12:27,670 --> 00:12:28,630 ‫if I scroll down. 182 00:12:29,470 --> 00:12:34,870 ‫Maybe you need this hole as we deem is on need, background or maybe some background color that you 183 00:12:34,870 --> 00:12:36,430 ‫want to cover 100 percent. 184 00:12:36,850 --> 00:12:43,000 ‫Or maybe there will be something some content that you need to stretch on 100 percent off area. 185 00:12:44,180 --> 00:12:50,960 ‫For this particular reason, I strongly recommend you can use this container thing and then have IMAX 186 00:12:50,960 --> 00:12:51,260 ‫with. 187 00:12:52,690 --> 00:12:58,150 ‫Now, the next thing I'm going to do is I'm going to release Flex property on our unit and try to arrange 188 00:12:58,150 --> 00:12:59,920 ‫all these items in sequence. 189 00:13:00,700 --> 00:13:03,760 ‫So how do I need to arrange all these item in sequence? 190 00:13:04,450 --> 00:13:08,920 ‫Also, one thing I need to have both of them on a single so. 191 00:13:09,250 --> 00:13:10,450 ‫Let me jump here. 192 00:13:10,660 --> 00:13:13,690 ‫So this is going to be our whole now, but I'm going to call. 193 00:13:13,690 --> 00:13:15,100 ‫This has now got here. 194 00:13:16,680 --> 00:13:24,060 ‫And seeing this one like this now by Shankar and select the Soundbar Center display property of Flex, 195 00:13:25,170 --> 00:13:27,950 ‫now it should be and I sequence great. 196 00:13:28,290 --> 00:13:30,060 ‫Now you can utilise our knowledge. 197 00:13:30,210 --> 00:13:37,770 ‫All I have to do is use gesture by content, and I just need to use space between all these spaces when 198 00:13:37,770 --> 00:13:40,050 ‫people between them get back. 199 00:13:40,350 --> 00:13:40,770 ‫Great. 200 00:13:42,990 --> 00:13:49,770 ‫The next time one goes like this, this will dog and workers arrange all of them in sequence, so all 201 00:13:49,770 --> 00:13:51,780 ‫I have to do is like this the menu. 202 00:13:52,930 --> 00:13:56,020 ‫I here you can name this as matter of many also. 203 00:13:56,560 --> 00:13:58,070 ‫And I'm going to say legacy with. 204 00:13:58,480 --> 00:14:01,460 ‫And then I'm going to say I just believe legs. 205 00:14:02,290 --> 00:14:09,610 ‫And the other thing is this will be just to buy content or flags, and for now, save this one and get 206 00:14:09,610 --> 00:14:10,180 ‫back here. 207 00:14:11,020 --> 00:14:12,700 ‫You can see everything is arranged. 208 00:14:13,360 --> 00:14:15,850 ‫The other thing is, let me bring this in center. 209 00:14:16,240 --> 00:14:18,640 ‫So all I have to do is use a line. 210 00:14:19,840 --> 00:14:22,900 ‫Items and let's bring them in the center. 211 00:14:26,850 --> 00:14:32,340 ‫Now, if you observe this whole, you will mean you need to be at the center of this B menu. 212 00:14:34,250 --> 00:14:35,450 ‫I hope you got the idea. 213 00:14:36,680 --> 00:14:38,690 ‫So what we can do is we can add. 214 00:14:39,890 --> 00:14:44,780 ‫Online items center to how all the items enter by default. 215 00:14:45,590 --> 00:14:46,080 ‫OK. 216 00:14:46,160 --> 00:14:49,790 ‫I hope you got the idea and I don't need this and don't know. 217 00:14:52,390 --> 00:14:52,790 ‫Great. 218 00:14:52,910 --> 00:14:54,070 ‫The stocks were. 219 00:14:55,570 --> 00:15:00,760 ‫Now, in the next lecture, let us complete our whole navigation bar, we need to add some top margin 220 00:15:01,030 --> 00:15:04,090 ‫and some spacing and create this in our modern form. 221 00:15:04,570 --> 00:15:06,850 ‫I hope you got the idea what we are trying to do. 222 00:15:06,970 --> 00:15:10,090 ‫We have been doing this whole team stuff for multiple times. 223 00:15:10,450 --> 00:15:12,730 ‫Let's compute this quickly in the next one. 224 00:15:13,420 --> 00:15:16,060 ‫Thank you for following and I see you guys in next one.