CSS Tutorial: CSS Box Model, Margin and Padding | Web Development Tutorials #20
Aug 15, 2023
CSS Tutorial: CSS Box Model, Margin and Padding | Web Development Tutorials #20
► Source Code \u0026 Notes: https://codewithharry.com/videos/web- … ►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne… ►Click here to subscribe - / @codewithharry ►Checkout my English channel here: / programmingwithharry Best Hindi Videos For Learning Programming: ►Learn Python In One Video - • Python Tutorial In Hindi 🔥 ►Python Complete Course In Hindi - • Python Tutorials For Absolute Beginne… ►C Language Complete Course In Hindi - • C Language Tutorials In Hindi ►JavaScript Complete Course In Hindi - • JavaScript Tutorials In Hindi ►Learn JavaScript in One Video - • JavaScript Tutorial ►Learn PHP In One Video - • Learn Php In One Video In Hindi - हिं… ►Django Complete Course In Hindi - • Python Django Tutorials In Hindi ►Machine Learning Using Python - • Machine Learning Tutorials For Beginn… ►Creating \u0026 Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Development Using Flask a… ►Advanced Python Tutorials - • Intermediate/Advanced python Tutorial… ►Object Oriented Programming In Python - • Object Oriented Programming Tutorials… ►Python Data Science and Big Data Tutorials - • Python Data Science and Big Data Tuto… Follow Me On Social Media ►Website (created using Flask) - http://www.codewithharry.com ►Facebook - / codewithharry ►Instagram - / codewithharry ►Personal Facebook A/c - / geekyharis Twitter - / haris_is_here
Content
0.137 -> Guys, the box model is a very important thing in CSS
3.822 -> and what is this box model
5.372 -> we will see about it inside this video
7.377 -> And listen to my words very carefully
9.237 -> because if you do not listen carefully to my words
11.611 -> then there may be a problem in the future.
12.958 -> Because the topic that is the topic
15.014 -> that is going to use throughout in your web development.
17.886 -> Use any framework you want
19.736 -> if you are not making this website
21.233 -> if you use angular react, whatever you use
23.685 -> these basics are going to be used.
25.738 -> So, here's what I'm going to do quickly
27.908 -> I'll make a new file
30.182 -> tut20.html
34.219 -> Here I'll put the boiler plate quickly
36.405 -> and I'll write the Box Model here
38.588 -> After doing this I will put the style here
40.325 -> and after putting the style I will prepare to write CSS here
44.3 -> Simultaneously I do a simple thing
47.848 -> create a div with a class container, ok
51.437 -> put a heading inside it
53.575 -> h3
54.878 -> This is my heading
56.91 -> And after that I'll put a paragraph
59.475 -> and I'll give the Id in paragraph
61.326 -> I'll do p#first
63.724 -> then here i will write p
65.738 -> and after i will write #first
68.846 -> and after that do hit enter by doing lorem23, ok
73.506 -> I'll just turn off the word wrap here
75.622 -> and here I did ctrl + s here
77.446 -> and here (p id = "first") come
80.232 -> and copy this
83.024 -> I am pressing ctrl + d
84.422 -> because i have set shortcut
85.718 -> by default, shortcut, i am not sure
88.069 -> It happened with shift + alt + down arrow
89.755 -> check once you guys by going in your shortcut
92.73 -> I have told this
94.252 -> I will make this id, second and make it third
96.91 -> because this id should be unique
99.014 -> Now what am I going to do here?
100.671 -> I have made 3 here
101.937 -> Now I will start the live server quickly
103.377 -> I will tell you what this box model is
105.058 -> you don't worry at all
106.883 -> First of all let's talk about what is the box model
109.085 -> then I write it here box model
112.745 -> and if any image is found good
113.934 -> then I will show you people
115.572 -> And look, I have got an image very nice
119.486 -> Oops, take another image
121.261 -> Take this one
122.447 -> Yes, take this
123.686 -> So, look
124.578 -> Let's say you have this element
125.831 -> It looks like this 512 x 128
128.389 -> let's say this is your element, okay
130.523 -> And I open this image in a new tab and zoom in
134.459 -> Yes, now it is visible a little bit right now
135.831 -> If it is showing in blue, it is your element
137.954 -> this is a screenshot of google chrome
139.912 -> If I inspect it here, then the photo of this one
142.798 -> It defines the box model pretty well, okay.
146.275 -> Listen carefully,
147.405 -> this image is open here, so I open it
150.635 -> This is my element of 512 x 128
153.872 -> Whatever padding I set outside it will come outside it
157.864 -> if I have given its padding 2 pixel
160.205 -> So, it will come here
161.211 -> It will cover the green area, okay
164.438 -> After that if I have given some border then it will come
166.963 -> And after that the margin will come
168.832 -> that is, the margin will come outside the border
171.293 -> So, this is our box model of CSS
173.188 -> and it is very useful
174.726 -> What happens in this is that you people know
177.604 -> that if you people give margin, padding, border
181.286 -> all these things in any element.
183.521 -> So where will it come
185.005 -> So, it covers everything, Our box model of CSS
189.434 -> I hope you understand
190.73 -> Now let's see here by putting margin, padding
193.156 -> and it is not a big thing
194.028 -> look it is content, it is padding, it is border, it is margin
197.475 -> Box model is not rocket science
199.46 -> Not such a big thing
200.822 -> Let's see carefully how the margin etc
202.365 -> will come as I am setting
204.323 -> So, first of all what will I do
205.254 -> I will give it a little CSS
206.771 -> I will say what is my container
210 -> .container
211.895 -> what to do in it
212.641 -> I will give background-color to it.
214.581 -> And I will give some light to the background-color
216.117 -> I will give it, okay
217.97 -> Look, I have given background-color in it
219.229 -> then it's background-color has come, okay
221.23 -> I give it a border,
224.18 -> I give it a border
226.775 -> 3px solid red
228.983 -> red, no, not red
229.816 -> I do one thing
230.767 -> Through rgb I will select some nice color
234.274 -> yes it looks good
235.584 -> Let's see how it looks
237.053 -> And I'm a big fan of rgb
238.851 -> because I can change such backgrounds too
241.359 -> I will go with my mouse
242.727 -> And according to rgb I will set a light background comfortably
245.729 -> whatever it looks like
246.501 -> And from where I like to do this work
248.477 -> I also tell you
249.572 -> I like to do this work from here.
251.057 -> Here I go to the element, right click, inspect
253.788 -> and the container where I put this
258.614 -> I like to change the background color
260.273 -> of the container from here
261.244 -> I see how it looks
263.038 -> Then suppose I like this
264.34 -> So, I take this value of rgb
266.438 -> take this value and paste it here
269.383 -> I am a big fan of it, by the way
272.137 -> I do not want to go there again from here
274.504 -> I want to do everything here
275.911 -> and it looks like this
277.623 -> Now look, I will give margin and padding in this
279.855 -> So, what will be the difference
281.303 -> First of all, I will show you people by giving padding here
284.477 -> I want the content that is there to go inside this box
288.77 -> So, what should I give, margin or padding?
290.485 -> What is inside the border
292.446 -> what is inside the border? padding is there
294.144 -> if I give padding, what will be my content?
296.176 -> It will shrink a little inside
298.067 -> So, I want my content to shrink inside
300.745 -> so, let's give padding
302.094 -> So, if I write padding here
304.062 -> and then write 9px
307.725 -> As soon as I save, see what will happen
309.439 -> As soon as I saved
310.412 -> the content got reduced a bit.
311.93 -> I show you people by opening it side by side, ok
314.451 -> I will open it side by side
315.607 -> then maybe you will understand people a little better
317.946 -> If we open this content side by side
321.349 -> then I have opened my content side by side which is here
324.37 -> And here you guys see
325.502 -> As I do 19 pixels here, I will save
327.45 -> then see how the change will come, I close it now
329.873 -> I will save it only, so see the content has been reduced inside
332.968 -> So, this padding has come inside it
334.678 -> And if I increase this to a very high number
337.252 -> Like 79,
338.736 -> then watch carefully the content here
340.645 -> saved, then look at this
342.025 -> This space has come inside
343.439 -> that is, the box that it was in was telling the truth
345.856 -> outside the content comes the padding,
347.487 -> outside it comes the border, okay
349.825 -> Now say I want to give margin too
353.681 -> because I would definitely like to give margin
355.341 -> Look they are stuck to each other
357.064 -> It is stuck,
357.732 -> so, I want to have a little space outside the border
359.651 -> and it is called margin
360.994 -> the space outside the border, this is the margin
363.481 -> So now if I set margin here
366.615 -> say 34px
369.014 -> see what will happen if I save
370.822 -> I saved, see this
372.414 -> Came from all four directions
375.036 -> what's up? margin of 34 pixels
377.299 -> and the padding
378.393 -> that was there also came from all four directions
380.352 -> But how great it would be
381.743 -> if I could give my margin and padding in one direction
385.084 -> is it possible?
386.719 -> yes, it is possible
387.999 -> And here I am going to tell you guys
390.305 -> about the shorthand of margin and padding, okay
392.494 -> First of all, let's see that if we want to show only
394.383 -> top, bottom, left, right in the margin, how will they do it?
397.662 -> If I would make it padding-top like this,
401.922 -> and padding-bottom
403.935 -> then only the padding would come from the top and bottom
405.941 -> look the padding is coming from the top
407.413 -> Padding is coming from below,
408.411 -> padding is not coming from left, right, okay
410.702 -> but if I want to give padding-right here too, a little
414.808 -> look at padding-right I have been suggested here
417.527 -> 34px
418.392 -> I don't want to give too much
419.613 -> I want to give a little here padding-right
421.689 -> According to me, something is wrong
423.103 -> padding-left is giving me
424.383 -> there is already no content on the right
426.301 -> What is it that this content is not spread so much
428.526 -> that it goes to the right
429.515 -> So, I have to give it here on the left, so it is left
431.674 -> it is not right, it is right
433.129 -> So right I have not already gone here text
434.747 -> padding is not making much difference to me
436.968 -> here I have given spacing now
438.36 -> So, it looks perfect to me now
440.753 -> now let's say the padding-top and padding-bottom
443.093 -> I want to put together
444.79 -> That is, I want to give padding-x and padding-y separately
447.722 -> So how will I give it
448.572 -> So I do one thing, here I will comment it out
450.475 -> and write here
452.096 -> We can set padding for top, bottom, left and right like this
464.567 -> And what am I doing here
465.753 -> I am writing this comment for you people
467.155 -> So that there is no problem to you people
468.442 -> even if you guys will see it later
470.845 -> So, you will understand what we did
473.37 -> So, it was padding
474.342 -> padding over here
477.716 -> what I did here
478.764 -> padding left, right, top, bottom
482.107 -> left, right was not there, ok
484.528 -> top, bottom, left and right, ok
486.474 -> So, i wrote here, left, right, top bottom
489.286 -> Whatever this thing is, I bring it here
492.429 -> I am making notes type for you people
494.365 -> you people should get this property directly.
496.909 -> Similarly for the margin
498.59 -> I also write the margin here
501.253 -> Now here I am not writing separately,
502.588 -> margin-top, margin-bottom, margin-left, margin-right
506.166 -> I don't want to write all these things separately
507.901 -> I have talked about padding, the same is also for margin
510.555 -> Now shorthand here one more look
511.681 -> If I want to set the padding
513.495 -> I'll write it here
515.608 -> if I write here like this
518.901 -> I can write the padding like this
519.785 -> top right bottom left, ok
524.834 -> and semi-colon
525.899 -> only giving by space
527.402 -> Commenting this out, I'll tell you what I'm talking about here
530.47 -> What if I write padding=23px 56px 6px 78px, ok
539.314 -> This is the padding of top right bottom and left
542.142 -> top right bottom left
544.408 -> by doing trbl you can remember it
546.371 -> and you can remember it in any other way
548.248 -> But I'm rote like this top right bottom left, ok
550.976 -> So, I don't have any problem, but you may have a problem
553.264 -> then you can do this
554.899 -> Now by doing this here, there is a problem here
557.506 -> it is not equal to, it is a colon, I made a mistake
559.893 -> Anyways,
561.06 -> I did it like this and here I have to put a semicolon too
565.902 -> Don't mess with the syntax
567.851 -> So, this padding is our shorthand
569.671 -> Doing this will set this in the top,
572.048 -> this in the right,
573.323 -> this in the bottom, and this in the left
574.682 -> and see if I am telling the truth or so
576.912 -> Look, all these paddings are set
578.45 -> Now I will show you this padding is actually set
580.667 -> I inspected,
582.018 -> and as soon as I go here in the container
585.067 -> See this if I change any of these values
587.356 -> say I click on 23
588.72 -> then I can change it with arrow key
590.663 -> I can make it smaller than the arrow key
592.053 -> I am enlarging so how much the padding-top is changing
595.495 -> I will reload, it will be back to normal
597.573 -> Then if I increase to 56
599.492 -> then which padding is this, it doesn't matter
602.373 -> It doesn't matter, you can see here
604.191 -> Here you can see, showing
605.28 -> Why it is not making a difference
606.581 -> because it is the padding on the right
607.948 -> look there is making a difference
608.914 -> The content is coming in a little narrowed here
611.038 -> but it was not visible at the beginning, okay
612.949 -> So, this is our right padding, this padding
616.425 -> After this comes the padding
618.103 -> after this comes the padding of our bottom
620.086 -> see if I increase it further
621.675 -> Oops, I am increasing the wrong thing
623.401 -> I want to increase the 6px given to me
625.105 -> the padding on the bottom
627.184 -> and then this padding on the left, if I increase it
629.266 -> So, same goes for margin also
630.567 -> if you do for margin
632.174 -> So, you can write whatever is there
633.703 -> So here I write padding/margin like this
637.855 -> This also applies to margin
640.218 -> Another shorthand that you will probably use more
642.421 -> I will tell you people.
644.041 -> If you want to give same to the top and bottom
646.119 -> and if you want to give same to the left and right
648.718 -> then you can write something like this
650.94 -> So here I say top, bottom (y)
654.005 -> and (y and x)
655.54 -> so, you can do it by doing (y and x)
657.669 -> then remember it by doing (y and x)
659.656 -> And you will remember this
661.189 -> So, if I write it like this
663.305 -> and I comment it out, and then write it here like this padding
667.161 -> Well, I want to give more (y) or (x)?
668.709 -> I want to give more in (y)
670.108 -> I will give 34px in (y), and only 19px in (x)
673.858 -> So, I will put a semicolon by giving 19px
675.822 -> and look here it has come
678.329 -> but what will I do before that
679.409 -> I have given it padding, I will remove it
681.696 -> Otherwise, mine
682.625 -> Oops, I do one thing
686.69 -> Actually, I want to write it completely like this
689.678 -> I want to put a comment
690.669 -> because I told this only for you people to see
693.695 -> Now I can't set 2-2 padding, ok
696.153 -> So here I want to do it in this way
699.301 -> look now my comment got confused too, no problem
702.877 -> I do it, ok
704.901 -> So here you people will get the syntax
707.177 -> you people should not have any problem, ok
710.371 -> Cool
711.422 -> I saved it,
712.753 -> And I do one thing, I take some such things
718.109 -> I want to keep things like this
719.946 -> that you people do not have any problem at all
722.482 -> when you write the code, ok
724.044 -> I'll put these two lines together
726 -> so, you guys know with a practical example.
729.507 -> Even I am doing it separate in this way
732.649 -> why am I doing it separately
733.632 -> because when you guys take the code and practice
737.059 -> then there should be no problem
738.743 -> So, look this comment is out, so it is strike out
740.416 -> so, it's uncommented, it's fixed now look
744.281 -> I removed this, took this, so I can mess around a lot here
747.895 -> And look here the margin was 34px
750.808 -> what padding did I take
751.743 -> I reload from back, I had put padding 34, 19
755.078 -> so, this is the padding of (x)
756.17 -> see the padding is changing in (x)
758.017 -> Same thing if I go from the arrow key
759.524 -> and keep this press 34 with the up-arrow key
761.603 -> so, see this is increasing the padding
762.9 -> And it is also changing this box below
764.362 -> this box is very important
766.148 -> and look at the color of this box very carefully
768.035 -> That color is very important of this box
769.947 -> which most people ignore
772.369 -> it is saying that the color of the element is being shown as blue.
774.753 -> This look is showing it out of blue it above
776.335 -> it shows the element
777.415 -> padding
778.033 -> padding as soon as you touch it
779.395 -> It is showing Padding from Green
780.494 -> look the bottom is also green and the top is also green
783.051 -> then the border is telling the border,
784.433 -> I am showing it with Orange
785.331 -> Look it's showing the orangish-yellow color
789.241 -> and it's showing the margin as yellow
790.574 -> so, when you select this element
792.955 -> So, look at this, the box below,
794.78 -> the same colors are seen
795.664 -> So, you can find out that what is the padding,
797.842 -> what is the border, what is the margin
800.05 -> you can easily find out, and the element is seen in blue
802.932 -> So, hope this thing is understood by you people.
805.873 -> So, this was shorthand for padding, margin
807.252 -> Now I am doing one thing
808.556 -> Finally, this website looks a bit nicer
811.38 -> So, what I have talked to you guys right now,
814.406 -> about the shorthand of padding and margin
815.866 -> So, I'll do one thing, set it a little higher in margin (y)
819.319 -> and set it a little lower in (x)
820.813 -> So, I do only 19px in (x)
824.232 -> I keep the padding and margin the same thing, okay
826.17 -> So here are my such element comes
828.23 -> And once these elements have come
829.93 -> so, I reduce the margin a little here, ok
832.433 -> I have given the margin a little more in (y)
834.636 -> I make 14 in the margin in (y) okay
837.155 -> And I do the setting here in the setting
839.161 -> with the help of the inspect element
840.308 -> And after that as soon as my thing fits right
843.192 -> then I apply it finally
845.369 -> Now I can also give border-radius here
847.374 -> And here I had added the class
849.033 -> so that I will give it once in the container
851.033 -> and it will be applied in all the containers.
853.224 -> I can also give border-radius
855.383 -> What will I give border-radius, I will give border-radius 23px
859.436 -> I will see how it looks, yes, it looks great
861.041 -> Now it looks very nice
862.802 -> So here I have given the border-radius, ok
865.606 -> Now here if I give its width, and height
871.329 -> I will give width only, I will not give height
873.693 -> So, look at this, I have reduced its width
875.959 -> I have reduced it a lot
877.766 -> So here you guys can see
879.99 -> Now here I will talk about a property with you people
882.46 -> and the name of that property is box-sizing
885.05 -> now what is this box-sizing property
886.41 -> Before showing this, let me show you one thing
889.197 -> If suppose I have the padding here
892.198 -> this padding I have given
893.351 -> I increase it, I will inspect here
895.932 -> And I'll just increase the padding it has
897.866 -> so, I'll increase the padding which I have in (x)
902.67 -> and you'll see what happens here.
903.816 -> As soon as I increase its padding
905.769 -> Its width is changing
907.214 -> See if its width is changing or not?
908.798 -> I increased the padding then why the width is changing
911.655 -> You will feel that the width that I have set should be given to it
915.242 -> but why is it changing the width
917.306 -> This is because the width is changing
918.529 -> because the actual width of any element is what it is
922.299 -> Added to that is your margin
923.742 -> if I increase the margin as well as the padding and margin, say
926.96 -> the width will still be my change.
928.125 -> Look my width is getting changed
929.185 -> margin is getting,
930.257 -> width will change
931.193 -> what will be the actual width of the element
933.553 -> Margin will come in it, padding will come
936.09 -> everything will be added
937.839 -> but if you guys want it not to happen
939.846 -> and this width is applicable to you
942.323 -> then what you guys can do
944.096 -> then you guys can use a property called box-sizing
948.861 -> So, if you border-box changed to the box-sizing
950.887 -> So, this problem won't come
951.687 -> So, if I do such box-sizing and border-box, right here, ok
955.907 -> and now if I see you do the same thing
958.66 -> So, look this is not happening anything
961.325 -> if I change its padding
963.16 -> what will it do
964.139 -> will adjust its width with according to the padding
966 -> This look will adjust its width according to the padding
968.468 -> So, this is a wonderful property for us
970.878 -> So, I'll enlarge my screen
974.231 -> I hope you understand this margin padding, etc.
977.02 -> And fix the width a little more.
979.199 -> I have given very little width, I know
981.158 -> I have made it 533
984.441 -> yes, it is looking good to the width
985.888 -> and that's all I do
988.047 -> So here we have another selector
990.409 -> which is universal selector in CSS
992.822 -> what will I do, inside this universal selector I will write with star
995.999 -> What should I say
997.902 -> That what should you do for all the elements
1000.694 -> this is box-sizing, make it border-box
1003.736 -> Since I want this element with width
1006.346 -> to be correct for all calculations
1007.935 -> So, I border-boxed the box-sizing here by putting a star
1011.285 -> At the same time, you can to reset CSS
1013.877 -> by default, margin to 0
1015.997 -> and padding to 0
1018.098 -> what will happen
1018.846 -> That when you do this
1020.046 -> So, by default your operating margin for all operations
1022.384 -> will be 0 unless you overwrite them below
1024.833 -> So, you can overwrite them below
1026.781 -> Now I am here to show you the properties of this padding
1030.011 -> In the same way I'll write the margin here as well
1031.736 -> margin-top
1033.592 -> Okay
1034.853 -> Whatever you put, margin-bottom
1037.484 -> Anything you guys can put in
1039.16 -> and at the same time margin-top
1041.742 -> That also you can put anything
1043.146 -> And I should have written margin-top, bottom, left, right
1048.043 -> But ok, I will put it on the left here, not an issue
1052.478 -> And here I write 5px
1055.267 -> So, you can do the same for the margins
1056.852 -> as you did for the padding
1058.334 -> And the same thing applies for the margins too, ok
1062.622 -> So, hope you must have understood
1064.437 -> I also separate this
1065.721 -> margin and padding so that there is no confusion at all.
1068.517 -> So, both these syntaxes
1069.769 -> which are very similar to margin and padding, ok
1072.27 -> I can do this in the same way
1074.257 -> I can also margin it.
1076.488 -> You may have understood the difference in margin and padding
1078.701 -> the padding is from the inside of the element,
1080.103 -> the margin is from the outside
1081.578 -> And whenever you want people to see anything
1083.421 -> then right click and inspect
1085.1 -> this diagram is in front of you below
1086.722 -> which diagram, this diagram
1088.103 -> This diagram is your best friend
1090.158 -> here it will explain to you that what margin is,
1092.81 -> what is padding, how is it working.
1095.315 -> Everything will be explained to you very easily
1097.657 -> zoom in and enlarge it
1099.288 -> if you do not see it, then zoom in by doing this.
1101.953 -> Scroll, and zoom in
1103.652 -> and scroll and you'll definitely see, ok
1106.853 -> and enlarge it by moving it up, you can see it by very easily
1109.136 -> Otherwise look it on the internet, it is available there
1110.984 -> Otherwise watch my video, I have shown it in it
1114.033 -> So, it was margin, padding,
1117.175 -> how we can put border,
1118.925 -> how can we put border-radius
1120.463 -> Do a lot of designing inside CSS
1122.406 -> We learned to add fonts etc. in the previous video
1124.864 -> and this is the website's design now it looks a bit good
1128.288 -> And put the background of the body like you here
1131.467 -> it will be a little better
1132.954 -> and I have taken the body selector.
1135.3 -> And put anything in the background-color here
1138.328 -> Say, I put cyan
1139.487 -> So, look at this now the website looks like this
1141.976 -> and i tell it doesn't look good, i know
1145.442 -> mine i told not mine always
1147.301 -> that i set it this way background-color
1150.323 -> So, I will give a little light background-color to it
1152.834 -> and I will give a little purplish background-color
1155.269 -> So, I will move a little towards purple color
1157.608 -> yes, I will give a purple background to it.
1161.035 -> yea, ok it looks great now
1162.532 -> Look i got the hex-color
1164.014 -> I'll put this hex-color directly over here, ok
1166.961 -> Now you use hex-color,
1168.508 -> use rgb,
1169.977 -> use name
1171.298 -> it doesn't matter
1172.512 -> I have told you in the last video
1174.115 -> If you haven't accessed this playlist
1175.909 -> then kindly access it as soon as possible
1177.841 -> bookmark it now
1179.303 -> and click it here on save playlist
1181.266 -> so that this playlist is saved, it becomes your own playlist
1183.839 -> Along with that, if you people like this video
1186.29 -> then do like to support me.
1188.371 -> And tell the people
1189.334 -> that the course of web development is going on here
1190.925 -> because many people do not even know
1192.781 -> That web development course is also going on here
1194.756 -> from the starting
1195.619 -> I have made this course on your demand
1197.284 -> because I used to have many questions.
1198.951 -> Harry brother, how to start web development
1200.975 -> I used to give different types of videos to different people
1203.031 -> that see this, see this
1204.259 -> But they used to say that is there no playlist,
1205.7 -> by which we can learn complete web development
1207.956 -> So, the same playlist I have made here today
1210.052 -> So, hope you guys will like my effort
1212.699 -> Thankyou so much guys for watching this video
1215.074 -> That's all in this video for now
1216.559 -> And i will see you next time.
Source: https://www.youtube.com/watch?v=5koxb4JaDqc