1 00:00:00,740 --> 00:00:01,400 ‫Hey, there. 2 00:00:01,430 --> 00:00:02,220 ‫Welcome back. 3 00:00:02,600 --> 00:00:10,260 ‫On this side and welcome to a quick crash course on Bootstrap Bootstrap, the most popular success framework. 4 00:00:11,090 --> 00:00:15,830 ‫Now, before diving deep with bootstrap, let us understand what is offering what. 5 00:00:16,550 --> 00:00:22,010 ‫Basically, if you search about framework anywhere in simple English dom or email me with any other 6 00:00:22,010 --> 00:00:27,920 ‫language, or maybe in terms of CSR, it has a predefined structure to build things. 7 00:00:28,430 --> 00:00:30,890 ‫Not till now we have been working with CSC. 8 00:00:30,910 --> 00:00:37,070 ‫We have been writing CSR from scratch, but then we are utilizing this bootstrap framework. 9 00:00:37,490 --> 00:00:40,310 ‫That means most of this is already written. 10 00:00:40,850 --> 00:00:45,260 ‫We just need to utilize them in the form of code or in the form of tags. 11 00:00:45,890 --> 00:00:51,620 ‫For example, if I jump on to docs now, don't worry, we will discuss everything in detail here. 12 00:00:51,620 --> 00:00:53,130 ‫I'm just giving you example. 13 00:00:53,630 --> 00:00:58,160 ‫So if I jump onto this utility thing and for example, let me click on this background. 14 00:00:58,550 --> 00:01:04,760 ‫So at this point of time, if I need to add a background color, I need to create a property background 15 00:01:04,760 --> 00:01:08,870 ‫color and then set the background color that bootstrap framework. 16 00:01:08,880 --> 00:01:10,310 ‫We have three different things. 17 00:01:10,580 --> 00:01:16,910 ‫That means these codes are already written in bootstrap, and we can directly use this class to have 18 00:01:16,910 --> 00:01:21,830 ‫a background color something like blue, something like gray, something like green. 19 00:01:22,280 --> 00:01:25,760 ‫So there is predefined code that we can utilize. 20 00:01:26,300 --> 00:01:32,330 ‫OK, now what is this predefined code and how we are going to do that that I'm going to discuss throughout 21 00:01:32,330 --> 00:01:32,840 ‫the course? 22 00:01:33,880 --> 00:01:38,610 ‫Now, I hope you got the basic idea of what our framework is in simple terms. 23 00:01:38,680 --> 00:01:44,880 ‫Framework is a structure that help us to define common things fast with predefined rules. 24 00:01:45,310 --> 00:01:47,680 ‫Now had redefined role can be anything. 25 00:01:48,310 --> 00:01:54,640 ‫Just a minute, not we dig example of background color, for example, in bootstrap, when we are working 26 00:01:54,640 --> 00:01:59,170 ‫with any type of color, there are predefined rules like will be. 27 00:01:59,170 --> 00:02:03,040 ‫The short code for background primarily will be the color for blue. 28 00:02:03,310 --> 00:02:07,570 ‫Success will be the color for green being there will be the color for red. 29 00:02:07,900 --> 00:02:14,440 ‫So that's how there are predefined things and there are hundreds of predefined things and we are going 30 00:02:14,440 --> 00:02:16,720 ‫to understand the most important one. 31 00:02:17,170 --> 00:02:17,590 ‫OK. 32 00:02:18,400 --> 00:02:19,960 ‫Understanding our framework is done. 33 00:02:20,050 --> 00:02:21,850 ‫Now let's get back to our bootstrap. 34 00:02:22,300 --> 00:02:28,420 ‫The first thing is make sure you jump on to the official website, which is get bootstrap dot com and 35 00:02:28,420 --> 00:02:29,440 ‫you will get everything. 36 00:02:30,580 --> 00:02:37,780 ‫Now, at the time of recording this lecture, I'm going to analyze the five, five or specifically. 37 00:02:38,230 --> 00:02:43,000 ‫So if you want to access the exact same version that I'm using, just visit the ceiling. 38 00:02:43,690 --> 00:02:49,330 ‫Things will be sorted for you, as it has for me because bootstrap regularly updated with. 39 00:02:50,440 --> 00:02:53,380 ‫But there are only small changes that are not going to affect you. 40 00:02:53,710 --> 00:02:56,800 ‫Maybe in a few months there will be 5.1 by 0.2. 41 00:02:56,980 --> 00:03:02,450 ‫Or maybe someone saw some year there will be 6.0 version, so you don't have to worry. 42 00:03:02,470 --> 00:03:07,960 ‫Might just visit this link and make sure you specify 5.0 version, OK? 43 00:03:07,990 --> 00:03:10,690 ‫That said, the first thing is Wijn that has done. 44 00:03:12,200 --> 00:03:17,690 ‫The second thing is how to get started with bootstrap, because currently we have this empty project. 45 00:03:18,080 --> 00:03:19,550 ‫Now how to start with things. 46 00:03:19,820 --> 00:03:25,740 ‫So the first thing I'm going to do is just normally use our Emmit and have our boiler code. 47 00:03:26,360 --> 00:03:31,430 ‫And here we are going to build a portfolio website before jumping on to the demo part. 48 00:03:31,760 --> 00:03:38,000 ‫Let me just have one chart I had because we are building a portfolio website, so the title will be 49 00:03:38,090 --> 00:03:38,900 ‫a one shot up. 50 00:03:39,440 --> 00:03:45,080 ‫Now, if I want to use any type of bootstrap, I need to have access to bootstrap. 51 00:03:45,260 --> 00:03:53,000 ‫So there are two options either I can download the bootstrap in our system or I can just utilize direct 52 00:03:53,000 --> 00:03:57,080 ‫link that will get access to this bootstrap file in our code. 53 00:03:57,170 --> 00:04:01,970 ‫So you can just copy here and make sure you add it at the end. 54 00:04:03,000 --> 00:04:10,740 ‫OK, now there are chances that you customize your own changes, you customize your own features with 55 00:04:10,740 --> 00:04:12,060 ‫this style or CSIS. 56 00:04:12,300 --> 00:04:19,590 ‫So what you have to do is you have to add your style to assess and then make sure you have your style 57 00:04:19,590 --> 00:04:21,480 ‫CSIS after bootstrapped. 58 00:04:22,140 --> 00:04:28,320 ‫So let me add a link and here I'm going to have my style says so that our chances that this bootstrap 59 00:04:28,320 --> 00:04:34,670 ‫is going to have multiple features maybe have the primary means blue, but you won't do what I did, 60 00:04:34,680 --> 00:04:37,320 ‫so you can override it in your style, says. 61 00:04:37,710 --> 00:04:40,560 ‫Remember, we are going to read out a file from top to bottom. 62 00:04:41,280 --> 00:04:41,640 ‫OK? 63 00:04:41,760 --> 00:04:42,510 ‫This looks great. 64 00:04:42,690 --> 00:04:43,720 ‫This is the first thing. 65 00:04:44,190 --> 00:04:45,840 ‫Now, the second thing is bootstrap. 66 00:04:45,840 --> 00:04:47,640 ‫Also include JavaScript. 67 00:04:48,060 --> 00:04:49,320 ‫Now why JavaScript? 68 00:04:49,680 --> 00:04:55,920 ‫Because there will be certain features that can be controlled by a JavaScript like things that happen 69 00:04:55,920 --> 00:05:00,810 ‫on play like pop ups are a few other things, and you need JavaScript for that. 70 00:05:01,500 --> 00:05:08,340 ‫Now you have options to have this JavaScript separately and add it at your photo, or you can have this 71 00:05:08,340 --> 00:05:12,360 ‫combined file that will give you access to JavaScript. 72 00:05:12,810 --> 00:05:13,860 ‫Just copy this one. 73 00:05:15,020 --> 00:05:21,380 ‫And here inside, I've already added at the last remember, I heard that I will be at the top. 74 00:05:21,860 --> 00:05:27,920 ‫Then we will I mean content, then we will have for that and then we will have all this crap because 75 00:05:27,950 --> 00:05:33,020 ‫these are big files and they time to law so you can keep them at the bottom. 76 00:05:33,990 --> 00:05:35,490 ‫And me, get back here. 77 00:05:36,090 --> 00:05:36,490 ‫OK. 78 00:05:36,510 --> 00:05:37,550 ‫Everything is great. 79 00:05:37,590 --> 00:05:40,440 ‫We now have access to CSI as well as JavaScript. 80 00:05:40,830 --> 00:05:43,920 ‫Now what is the thesis on how we are going to utilize it? 81 00:05:44,400 --> 00:05:46,020 ‫So if you open the thesis? 82 00:05:48,220 --> 00:05:52,750 ‫You see junk off court and let me zoom in. 83 00:05:53,470 --> 00:05:57,230 ‫Use it junk off court in the form of thesis itself. 84 00:05:57,250 --> 00:05:59,000 ‫And this is minified version. 85 00:05:59,020 --> 00:06:00,640 ‫What I mean by minified version. 86 00:06:00,760 --> 00:06:06,130 ‫That means all the spacing is removed because this doesn't depend on spaces. 87 00:06:06,630 --> 00:06:07,820 ‫I copy this one. 88 00:06:08,140 --> 00:06:12,340 ‫And if I search about convert many feistiest to normal CIUSSS. 89 00:06:19,730 --> 00:06:22,280 ‫Now, let me believe this and add my own. 90 00:06:23,210 --> 00:06:24,410 ‫Click on on Minified. 91 00:06:25,110 --> 00:06:27,200 ‫Here you can see the unmodified version. 92 00:06:27,560 --> 00:06:32,600 ‫So if you observe this unmodified version, you will see they have defined everything. 93 00:06:33,260 --> 00:06:36,710 ‫Now there are chances that at this point of time, you don't understand much. 94 00:06:36,770 --> 00:06:38,420 ‫But let me zoom. 95 00:06:39,680 --> 00:06:45,440 ‫And if you observe they have to find everything, they have their own colors, they have options regarding 96 00:06:45,440 --> 00:06:46,280 ‫these want. 97 00:06:47,340 --> 00:06:53,550 ‫And then they have defined for each one, each to every single thing, not just for the normal screen, 98 00:06:53,550 --> 00:06:56,070 ‫but with different media queries. 99 00:06:56,460 --> 00:06:58,680 ‫So this is going to be responsive. 100 00:06:59,100 --> 00:07:02,790 ‫They have also taken care about the browser compatibility. 101 00:07:03,240 --> 00:07:06,930 ‫And if you scroll down, you will see they have their own custom setting. 102 00:07:06,930 --> 00:07:11,370 ‫Like for AirTag, they have certain colors for their text. 103 00:07:11,370 --> 00:07:14,010 ‫Decoration is underlined and we can what I did. 104 00:07:14,040 --> 00:07:14,700 ‫Don't worry. 105 00:07:14,970 --> 00:07:20,190 ‫And if I keep scrolling, or maybe let me search about, let's say, Edge 100. 106 00:07:21,030 --> 00:07:26,160 ‫So that means this 800 will replicate towards 100 percent of our height. 107 00:07:26,550 --> 00:07:29,550 ‫This at 75 mean 75 percent of white. 108 00:07:29,550 --> 00:07:33,360 ‫So they have to find every single thing that we can utilize. 109 00:07:34,570 --> 00:07:37,210 ‫Now, there are chances that you want to customize more. 110 00:07:37,570 --> 00:07:39,450 ‫You can do that here. 111 00:07:39,470 --> 00:07:47,170 ‫My main aim is to understand bootstrap in and out and to be honest, we don't utilize bootstrap much 112 00:07:47,170 --> 00:07:51,850 ‫in real life, like just people stop the utilized bootstrap. 113 00:07:52,000 --> 00:07:56,950 ‫But then we have options for our own cars as we understand more about CIUSSS now. 114 00:07:57,250 --> 00:08:02,320 ‫So if we want to customize something, we can do that we don't need to depend on bootstrap. 115 00:08:03,040 --> 00:08:08,890 ‫I hope you got the basic idea what we are trying to do and how this framework is going to work because 116 00:08:08,890 --> 00:08:16,090 ‫they have everything written here in the form of code and we have the power now because we have imported 117 00:08:16,090 --> 00:08:16,270 ‫it. 118 00:08:16,480 --> 00:08:18,990 ‫I don't know if I need to use that. 119 00:08:19,000 --> 00:08:21,460 ‫I can simply apply here inside my body. 120 00:08:22,210 --> 00:08:26,500 ‫OK, that's all for the introduction part about the bootstrap. 121 00:08:26,980 --> 00:08:29,500 ‫Now let's discuss the project that we are going to walk. 122 00:08:30,570 --> 00:08:37,950 ‫So we are going to build a portfolio website, simple, useful website since everyone needs a portfolio. 123 00:08:38,280 --> 00:08:39,840 ‫Let's create this basic one. 124 00:08:40,350 --> 00:08:46,110 ‫You have your logo, dog name, whatever you have, then you have home project blog. 125 00:08:46,380 --> 00:08:47,670 ‫Here is your image. 126 00:08:48,090 --> 00:08:50,880 ‫Something about your name, something about what you are doing. 127 00:08:51,390 --> 00:08:54,420 ‫And then you have a contact button that scroll to the bottom. 128 00:08:55,020 --> 00:08:56,160 ‫I can get back here. 129 00:08:56,760 --> 00:08:58,740 ‫Now, then you have about section. 130 00:08:59,670 --> 00:09:04,620 ‫While at the time of building project, I will provide you different images so you can utilize them 131 00:09:04,950 --> 00:09:05,160 ‫all. 132 00:09:05,160 --> 00:09:07,650 ‫You can use your own images stack would be much better. 133 00:09:08,940 --> 00:09:15,870 ‫Now, all these patterns are by default with bootstrap, so you can write something about your about--you 134 00:09:16,200 --> 00:09:21,430 ‫and then we have a blog, something on U.S., you can write something here. 135 00:09:21,480 --> 00:09:23,610 ‫Halliburton have images. 136 00:09:24,270 --> 00:09:26,030 ‫Then you have some other content. 137 00:09:26,040 --> 00:09:28,470 ‫Maybe you want to include your email. 138 00:09:28,470 --> 00:09:31,680 ‫You'll get appropriate Instagram, Twitter, LinkedIn, whatever you want. 139 00:09:32,190 --> 00:09:33,450 ‫And then we have a photo. 140 00:09:35,300 --> 00:09:40,580 ‫Here, everything will be renale of Flexbox or the bootstrap grid. 141 00:09:41,060 --> 00:09:43,340 ‫Interesting topic, we will understand about that. 142 00:09:44,120 --> 00:09:50,030 ‫The second thing is, if you click on this project part, you will see some hiding and then some random 143 00:09:50,180 --> 00:09:52,880 ‫information, but here you can mention your project. 144 00:09:53,150 --> 00:09:55,640 ‫Now, at this point of time, chances are you are a beginner. 145 00:09:55,640 --> 00:09:59,030 ‫You don't have much projects, but as you grow, you can add them. 146 00:09:59,480 --> 00:10:02,660 ‫So and I have divided things into category Django framework. 147 00:10:02,780 --> 00:10:07,820 ‫There are two projects Python, and there are two projects then react to projects. 148 00:10:08,180 --> 00:10:10,190 ‫Now these are some dummy text one. 149 00:10:10,370 --> 00:10:12,110 ‫Don't worry, these are dummy text. 150 00:10:12,560 --> 00:10:19,610 ‫So I just added dummy images and these are dummy links so you can add your own information or project 151 00:10:19,610 --> 00:10:19,940 ‫name. 152 00:10:20,180 --> 00:10:26,270 ‫What you did in your project on what was the project about, then you can include what is the text back 153 00:10:26,360 --> 00:10:30,620 ‫of using you using HDMI, CSO's, Byton or any other framework? 154 00:10:30,950 --> 00:10:37,550 ‫Then you will have live demo of the project as online, you can visit it, or you can just include GitHub 155 00:10:37,580 --> 00:10:39,230 ‫or the link to your source code. 156 00:10:39,830 --> 00:10:43,100 ‫So we are going to build it again, your model and that type. 157 00:10:44,730 --> 00:10:48,600 ‫Now for blogging, I have just attached a random link. 158 00:10:49,760 --> 00:10:55,340 ‫That's it, that's the whole portfolio website that we'll be designing as a beginner. 159 00:10:56,000 --> 00:10:58,220 ‫I hope the introduction was helpful. 160 00:10:58,790 --> 00:11:04,130 ‫Now from the next lecture, let us continue our task and start our journey, but bootstrap. 161 00:11:04,790 --> 00:11:06,860 ‫I hope this Begnaud session was helpful. 162 00:11:07,220 --> 00:11:08,210 ‫Thank you for calling. 163 00:11:08,450 --> 00:11:10,250 ‫And I see you guys in the next one.