‫Hey, there.
‫Welcome back.
‫On this side and welcome to a quick crash course on Bootstrap Bootstrap, the most popular success framework.
‫Now, before diving deep with bootstrap, let us understand what is offering what.
‫Basically, if you search about framework anywhere in simple English dom or email me with any other
‫language, or maybe in terms of CSR, it has a predefined structure to build things.
‫Not till now we have been working with CSC.
‫We have been writing CSR from scratch, but then we are utilizing this bootstrap framework.
‫That means most of this is already written.
‫We just need to utilize them in the form of code or in the form of tags.
‫For example, if I jump on to docs now, don't worry, we will discuss everything in detail here.
‫I'm just giving you example.
‫So if I jump onto this utility thing and for example, let me click on this background.
‫So at this point of time, if I need to add a background color, I need to create a property background
‫color and then set the background color that bootstrap framework.
‫We have three different things.
‫That means these codes are already written in bootstrap, and we can directly use this class to have
‫a background color something like blue, something like gray, something like green.
‫So there is predefined code that we can utilize.
‫OK, now what is this predefined code and how we are going to do that that I'm going to discuss throughout
‫the course?
‫Now, I hope you got the basic idea of what our framework is in simple terms.
‫Framework is a structure that help us to define common things fast with predefined rules.
‫Now had redefined role can be anything.
‫Just a minute, not we dig example of background color, for example, in bootstrap, when we are working
‫with any type of color, there are predefined rules like will be.
‫The short code for background primarily will be the color for blue.
‫Success will be the color for green being there will be the color for red.
‫So that's how there are predefined things and there are hundreds of predefined things and we are going
‫to understand the most important one.
‫OK.
‫Understanding our framework is done.
‫Now let's get back to our bootstrap.
‫The first thing is make sure you jump on to the official website, which is get bootstrap dot com and
‫you will get everything.
‫Now, at the time of recording this lecture, I'm going to analyze the five, five or specifically.
‫So if you want to access the exact same version that I'm using, just visit the ceiling.
‫Things will be sorted for you, as it has for me because bootstrap regularly updated with.
‫But there are only small changes that are not going to affect you.
‫Maybe in a few months there will be 5.1 by 0.2.
‫Or maybe someone saw some year there will be 6.0 version, so you don't have to worry.
‫Might just visit this link and make sure you specify 5.0 version, OK?
‫That said, the first thing is Wijn that has done.
‫The second thing is how to get started with bootstrap, because currently we have this empty project.
‫Now how to start with things.
‫So the first thing I'm going to do is just normally use our Emmit and have our boiler code.
‫And here we are going to build a portfolio website before jumping on to the demo part.
‫Let me just have one chart I had because we are building a portfolio website, so the title will be
‫a one shot up.
‫Now, if I want to use any type of bootstrap, I need to have access to bootstrap.
‫So there are two options either I can download the bootstrap in our system or I can just utilize direct
‫link that will get access to this bootstrap file in our code.
‫So you can just copy here and make sure you add it at the end.
‫OK, now there are chances that you customize your own changes, you customize your own features with
‫this style or CSIS.
‫So what you have to do is you have to add your style to assess and then make sure you have your style
‫CSIS after bootstrapped.
‫So let me add a link and here I'm going to have my style says so that our chances that this bootstrap
‫is going to have multiple features maybe have the primary means blue, but you won't do what I did,
‫so you can override it in your style, says.
‫Remember, we are going to read out a file from top to bottom.
‫OK?
‫This looks great.
‫This is the first thing.
‫Now, the second thing is bootstrap.
‫Also include JavaScript.
‫Now why JavaScript?
‫Because there will be certain features that can be controlled by a JavaScript like things that happen
‫on play like pop ups are a few other things, and you need JavaScript for that.
‫Now you have options to have this JavaScript separately and add it at your photo, or you can have this
‫combined file that will give you access to JavaScript.
‫Just copy this one.
‫And here inside, I've already added at the last remember, I heard that I will be at the top.
‫Then we will I mean content, then we will have for that and then we will have all this crap because
‫these are big files and they time to law so you can keep them at the bottom.
‫And me, get back here.
‫OK.
‫Everything is great.
‫We now have access to CSI as well as JavaScript.
‫Now what is the thesis on how we are going to utilize it?
‫So if you open the thesis?
‫You see junk off court and let me zoom in.
‫Use it junk off court in the form of thesis itself.
‫And this is minified version.
‫What I mean by minified version.
‫That means all the spacing is removed because this doesn't depend on spaces.
‫I copy this one.
‫And if I search about convert many feistiest to normal CIUSSS.
‫Now, let me believe this and add my own.
‫Click on on Minified.
‫Here you can see the unmodified version.
‫So if you observe this unmodified version, you will see they have defined everything.
‫Now there are chances that at this point of time, you don't understand much.
‫But let me zoom.
‫And if you observe they have to find everything, they have their own colors, they have options regarding
‫these want.
‫And then they have defined for each one, each to every single thing, not just for the normal screen,
‫but with different media queries.
‫So this is going to be responsive.
‫They have also taken care about the browser compatibility.
‫And if you scroll down, you will see they have their own custom setting.
‫Like for AirTag, they have certain colors for their text.
‫Decoration is underlined and we can what I did.
‫Don't worry.
‫And if I keep scrolling, or maybe let me search about, let's say, Edge 100.
‫So that means this 800 will replicate towards 100 percent of our height.
‫This at 75 mean 75 percent of white.
‫So they have to find every single thing that we can utilize.
‫Now, there are chances that you want to customize more.
‫You can do that here.
‫My main aim is to understand bootstrap in and out and to be honest, we don't utilize bootstrap much
‫in real life, like just people stop the utilized bootstrap.
‫But then we have options for our own cars as we understand more about CIUSSS now.
‫So if we want to customize something, we can do that we don't need to depend on bootstrap.
‫I hope you got the basic idea what we are trying to do and how this framework is going to work because
‫they have everything written here in the form of code and we have the power now because we have imported
‫it.
‫I don't know if I need to use that.
‫I can simply apply here inside my body.
‫OK, that's all for the introduction part about the bootstrap.
‫Now let's discuss the project that we are going to walk.
‫So we are going to build a portfolio website, simple, useful website since everyone needs a portfolio.
‫Let's create this basic one.
‫You have your logo, dog name, whatever you have, then you have home project blog.
‫Here is your image.
‫Something about your name, something about what you are doing.
‫And then you have a contact button that scroll to the bottom.
‫I can get back here.
‫Now, then you have about section.
‫While at the time of building project, I will provide you different images so you can utilize them
‫all.
‫You can use your own images stack would be much better.
‫Now, all these patterns are by default with bootstrap, so you can write something about your about--you
‫and then we have a blog, something on U.S., you can write something here.
‫Halliburton have images.
‫Then you have some other content.
‫Maybe you want to include your email.
‫You'll get appropriate Instagram, Twitter, LinkedIn, whatever you want.
‫And then we have a photo.
‫Here, everything will be renale of Flexbox or the bootstrap grid.
‫Interesting topic, we will understand about that.
‫The second thing is, if you click on this project part, you will see some hiding and then some random
‫information, but here you can mention your project.
‫Now, at this point of time, chances are you are a beginner.
‫You don't have much projects, but as you grow, you can add them.
‫So and I have divided things into category Django framework.
‫There are two projects Python, and there are two projects then react to projects.
‫Now these are some dummy text one.
‫Don't worry, these are dummy text.
‫So I just added dummy images and these are dummy links so you can add your own information or project
‫name.
‫What you did in your project on what was the project about, then you can include what is the text back
‫of using you using HDMI, CSO's, Byton or any other framework?
‫Then you will have live demo of the project as online, you can visit it, or you can just include GitHub
‫or the link to your source code.
‫So we are going to build it again, your model and that type.
‫Now for blogging, I have just attached a random link.
‫That's it, that's the whole portfolio website that we'll be designing as a beginner.
‫I hope the introduction was helpful.
‫Now from the next lecture, let us continue our task and start our journey, but bootstrap.
‫I hope this Begnaud session was helpful.
‫Thank you for calling.
‫And I see you guys in the next one.