CSS Tutorial: CSS Box Model, Margin and Padding | Web Development Tutorials #20
HTML-код
- Опубликовано: 8 сен 2024
- ► Source Code & Notes: codewithharry....
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutori...
►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 Hin...
►Python Complete Course In Hindi - • Python Tutorials For A...
►C Language Complete Course In Hindi -
• C Language Tutorials I...
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials I...
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video...
►Django Complete Course In Hindi -
• Python Django Tutorial...
►Machine Learning Using Python - • Machine Learning Tutor...
►Creating & Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Developmen...
►Advanced Python Tutorials - • Intermediate/Advanced ...
►Object Oriented Programming In Python - • Object Oriented Progra...
►Python Data Science and Big Data Tutorials - • Python Data Science an...
Follow Me On Social Media
►Website (created using Flask) - www.codewithhar...
►Facebook - / codewithharry
►Instagram - / codewithharry
►Personal Facebook A/c - / geekyharis
Twitter - / haris_is_here
Hi Harry, Its really a miracle i am 36 years old yet having no job after completing by graduation in 2011. I decided to learn web development join institute who charged me 24,000 rupees which is heavy amount for jobless person. the instructor told me that you cant learn web development and coding i was dis heart that i will never learn and do any thing.One day i met a friend who is a Software Engineer he told me about your tutorial and lectures Amazingly on thee first glimpse of your web development lecture i will create a web site only in two days. I have no words how to thank you. Truly you are the best Teacher of coding God bless you forever. One day i want to meet you as you are my mentor. Love you
Wow congrats sir I am just shocked by seeing ur success all the best do well !!!!!!!!!!! (I am not harry)
super
very noice! HOpe you got a job lmao
Congrats!
Could you please guide how you find the job
Hope you get a job..And all the best for your life and i glade t meet you one day :)
regular student of CodeWithHarry classes :D
Same me to I watch you regularly
ui uf
@@parthagarwal813 Yd£6*
Me too
he is doing hard work only sake of us.
Padding = Clockwise (top, right, bottom, left)
a lot helpful
Thank you so much....
I remember it the same way
Thanks
Thanks bro
New education policy 2020 needs teachers like you who emphasis on learning rather than memorizing. I'M lucky enough to have a mentor like you.
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
Hello brother
wish we had same teacher in school they thinks that learning is everything a teacher teaching same thing over and over again so he remembers it but we are trying to learing it form 2 to 10 days max
The only classes which I never like to bunk 😂❤️
same bro
Bro i have a great idea can you help in coding
@@shreyansh6490
Can you
@@mahantgenix who r u
@@shreyansh6490 bro i need one programmer to help me in coding
WOW Harry !!! Your course is amazing .Just like a Makhan Jitna dekhlo dil hi nhi bharta .Itni Clarity concepts I haven't seen in any one .This is the best Course I have ever seen in my life.
دتڈےدءددحئےئےءےےظتتئتتدددتفتتتتتتڈددتدددتتتڈتڈتتڈڈدتدددتدردڈتدتتتتتڈتتڈتتتتتتتتتددددددڈدددتدڈدددڈددتتتدتڈدسدترترتددتتڈرتتدےڈتحتستتڈردڈڈتتتڈتڈتڈدےےرےڈتڈتتددتدےتتتتتتتتتتتتتتتثتتتتتدرڈڈرڈتدتئتتفشطفحدتتفءطفےفطڈطےطءڈےدفئفڈثڈحدتےدتدتڈدددئثڈدڈددددےءفدفففففتےددےفدءدففدففءطفشطدےدففےدططدءےءدءفددءفگففدءطءدفڈطفےطددطءڈےطءءطفءطءططدےءظفففےےےڈےےےدےڈےدفگےدفءءددءدءءدءددطءفطففددءءڈطففدےفدفدےےدےےدفےفےتےددےفڈےدےڈفدفدتڈتےےتتتےءےےتتففتےتتےےفےددظفدططفئفئءدفءفطفطفےطےفےےےططتفطیفتےءدءےددےفدءددطےےےےےےےےےےےےددطڈطےدےءےدےےدڈتدےتےءددتےفدتےدتفدتءدفےدٔڈےدفءفگدگفدےفففےفےدےےءگیءءگءفیءءفیدففءفےڈءڈےدےےتےتےےتظءدءےفءطففدےدددےڈتدےدتدفدظفےفظےظےےڈفےےےےےےڈتددڈففےتےےےفےےےدفددفتددفددڈڈففففففتئففےتتتےدےففےدےفدففتدفدتتتڈےڈڈےےدےڈےدتتتدءددءےتڈتددےءدتفدددےددےفتددےدتددےےدےفءفطءدطےءیےففطےطففیدءفطگفظفگیطدءےدءدءططفءفدفدفےدففففففتےففےءتفتےےفئطفئءڈےفےدتفدےتددفتےدتےتےےےدتددتےڈےددددفےتےڈتےءفءظءءئفءےفئظطیےدءدظددءفئدفدئدفدئفدءففئفءددفئءفءئدطتےدےفےےتتتےفےتےےےےتدفےےڈدےےےدےدفےےدتےفےدےفدےےدتدفےفظءظظےظءیطفظظظیفءءطیطگگتدےءطئدییگڈطططےدظےئطفظفےفدفءفءفےےئدتر
دڈحتدحےتٹستٹس
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
This is the only class i wish never to be ended....😍😍
Thanks harry bhai for this lovely playlist💓
actually m used to of this channel ,and frequently goes there for any query regarding any topic
..
Thanks a lot Harry Bhaiya for this web decelopment coure.
I am 14 years old aur apki playlisy se Python sikh chuka huin aur abhi aapka WEB DEVELOPMENT COURSE DEKH RAHA HUIN.
You are the best teacher.Waiting for your 1 million
Thank you so much 🥺 things which I was unable to learned in full semester I learned in a week 🥺 .....more to go 🖤 thanks alot 🥺
Hallo ma'am
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
Even better explanation than few of the paid courses. Thanks
the best thing about this channel is we dont need to spend extra time making notes as it is already avalable
in all the descriptions of the videos
9:06 you can remember top right bottom left easily as they are clockwise like clock's needle.
thanks for sharing keep up the good work
Yes .. easy to remember
How can a person be so helpful? This guy have my respect. Im on 20th video on my third day
I watched so many videos on CSS padding nobody will teach this shortcut method in inspecting. We are spending so much time setting the padding and set the background colors thank you Harry sir I learned so many shortcuts methods in padding margin
Harry Bro there's no-one who could have taught it any better. Thank you for this series and also for doing it for society i.e. for free, it now even inspires me to do something for this society to make it better. Thank you very much brother. Hope all your wishes come true.
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
Thanks, Harry Bhai!
I'm doing your courses from this playlist as a beginner, and I'm so much benefited!
Thank you, bro!
May Allah bless you!!!!
Padding: y(top/bottom) x(left/right)
Why is it like this?
@@fatimasohail3027 padding values is "padding: y(top/bottom) x(left/right)", where "y" represents the vertical padding value, and "x" represents the horizontal padding value.
Harry bhai You are the best teacher ❤️❤️
Started learning coding through your Playlist. Truly the best way I have learnt here.
Thank you very much from my bottom of heart you make much easy all the coding. This video is like a masterstroke. You are making it so much easy. You are one of the best Codings Teacher.
Arre sir really thanks from the bottom of my heart sir.Bohot confuse tha iss chees ko lekar.Thanks a lot sir 💖💖💖💖
Yes Sir it is Shift + Alt + Down Arrow for copying the whole selected text down in Visual Studio Code Editor.
Sir Your teaching is amazing and wonderful and u r my best teacher...
This playlist is very helpful for me thank you for creating this... I did so much practice but i did't get experties but when i started this this course I am improving very fast and sharp. Thank you so much once again. I always demand you development videos like this.
adarsh
Deserves more than a millions of subscribers...Awesome lectures and teaching....❤️
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
Hats off to you for teaching us Web Development. Your efforts are really commendable.
Thanks Harry bhai. Bhut help hue iss play list se... Starting se dekh ra hu saari videos aur abhi tak koi bhi problem ya confusion nii hua bhut ache se explain kre hai saare tutorials 🤗
thank you harry bhai, for making such an amazing playlist.
Its not enough to thank you only,,May you live long brother❤
From Bangladesh
you have made my all concepts clear, thank you Harry bro ....!
You are a life-saver. Thanks for helping out in these darkest times of post-pandemic, like a morning breeze in morning.
How will I ever thank you for these amazing tutorials...
Thank you soooo much ×1000000...
hii
hello
well this legend still plays vice city in 2020!!…BTW awesome playlist!
arre harry sir ji ke subscriber millions par pahuca do
pahuncha diya 😊
@@imadeyouwaste1.84secondsre6 ahhh shame on youhh
@@kartikgoswami whaaaaaat?
@@imadeyouwaste1.84secondsre6 you wasted 1.84 sec of my life 2 times
@@kartikgoswami now the third time😂
bhai main aaj is episode me aa gya hu.. pahle bhi maine comment kiye hue hai apke episode me... lekin bhai aap smjhate bot shandar ho. agr main india hota to pkka bhai apse offline class lagata..lekin bhai thanks for this video.. aapne bot acha kam kiya hai ye.. kuch ek aadhe topic mere smjh nahi aaye..baki muje bot bdia se aa rhe hai smjh... thank you brother thank you..
kash maine ye sab lockdown me sikha hota.. tab bc main pubg me laga hua tha.. shame on me.. maine bot jagah apki videos ka link share kr diya mere 13 frnd ye videos se sikh rahe hai... thank you harry bhai
/* When one value is specified, it applies the same padding to all four sides.
When two values are specified, the first padding applies to the top and bottom, the second to the left and right.
When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom.
When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise). */
Big thanks to Sir. Harry.
Thanks for the information
1 week ho jana ka bad aj pta chal raha hai me 1 week sa ak vi book open nahi kya upar sa 1 week a class kavi bunk hi nehi mara . or me o insan hu jo sem suru hona sa pahala routine dakh kar 75% attendance calculate karta hu.🤣🤣😅😅😅😂
best teaching sir.
now i love this .💌💌💌💌
Keep it up Harry Bhai✌️
I feel motivated with your voice💥
true......me too !!!!
Harry Sir is making World best Web Developers.....
Thank You....
bhai will you do flex-box,css-gird and media quries also??????
..i am fiding hard to get the above concepts through other sources!
pls consider flex-box,css-grid and responsive design(mobile-first) media quries also ..pls bhai !
Sir Ji Minne mera DCST group and or 2 WhatsApp group par share kiya it's really a knowledgeable video...🤘❤😊
Thanks a lottt for ur classes...really beneficial for us.Hoping that u'll make videos on ML,AI too :)
I am from Bangladesh. Awesome tutorial Boss
love u
0:51 creating class container, 2:20 box model, 4:04 rgb setting trick, 5:00 padding, 5:55 margin, 6:25 one direction padding, 8:50 short hand padding, 10:40 best short hand padding, 15:49 box sizing, 16:28 universal selector, 18:54 body selector,
2 days ago i just finished my css
but i am gonna still watch all this stuff.
Good night harry dada
Hii
Mast Harry Potter
Hello, sir I'm your new viewer. Love your teaching methods..
if you are going to complete this series, then congrats you can be a successful web developer
Love you Harry bhai
Ap bahut mehnati insaan ho
Ap mere guru ho
Ap jaldi 10 million pe jaoge
❤️❤️❤️❤️❤️❤️❤️❤️❤️😊😊😊❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️love you harry bhai..
Thanks man it was a great tutorial on box model but I think on increasing the margin the width and height of the box don't increase, only on increasing the padding and border-width the box width and height increases if box-sizing is not set to border-box .
If margin > 50% from both side then just imagine your box !
Horray!!! Completed 20 lectures in a single day. I very curious to make some real life websites with the help of HTML and CSS now.
Box Model
.container{
background-color: burlywood;
border: 3px solid red;
padding: 17px;
margin: 34px;
}
This is my heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab molestiae, voluptates asperiores, corrupti ex eligendi aspernatur velit atque veniam fuga obcaecati alias expedita.
This is my heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab molestiae, voluptates asperiores, corrupti ex eligendi aspernatur velit atque veniam fuga obcaecati alias expedita.
This is my heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab molestiae, voluptates asperiores, corrupti ex eligendi aspernatur velit atque veniam fuga obcaecati alias expedita.
harry your concept is superb I just started to learn web development journey and you are my Mentor in this journey Indirectly.....
Osm Harry sir,
Actually i wanna ask you that how more videos are left to complete this course as I'm pursuing your js tutorial playlist as well and i want to start web designing.
Harry bhai me t20 aa gaya hu start se. tumhari teaching bahot achha lag ra hai . I understood. Love U.👍❤👍❤👍❤🙏🙏🙏
To the First Commenter
i am regular student of u sir and learn web dev from ur channel as a beginner ....i am chaman from faisalabad pakistan
Only legends know that harry sir plays gta vicecity
I also know.
I have seen shortcut of gta vice city on the desktop of the Harry sir's computer.
So, don't think you only smart here.
@YT AC 33 ok, sorry if I say any word bad
@YT AC 33 ok
thanks harry bhai apke videos bhut helpfull rhti hai
"YOU ARE OP PERSON"
wow very use full video. finally i ab css ka kafi kuch clear hua hai jo aj tak mai confused thi .... thank you for video
I skip 3 tutorials of others youtuber because they dont explain right but you are really good and i love to leran by ur videos thanks
Achha laga bhaiya... Samjh me aya achhe se.
Thank you Bhaiya
Date: 05/01/2022 Day : 20 . Mind Blowing content but
still have some confusions in width and margin . Don't know why but they Looks same. 😇
14:40 box-sizing property - content-box( generally default) - border-box 19:00 rgb color picker using inspect
Assalam O Alaikum... Harry bhai we can also learn 4 sides padding margin pattern as a clockwise way .
Thanks bro I am only 14 years old and wanna learn coding and watching your tutorials to learn it and I am learning it thanks to you.
Love from Pakistan
thank you harry bhai you are best teacher on planet for coding
One of the best video for CSS Box Model
Thank you Harry sir. Har video lesson dekhne ke baad man karta hai ki bas ek video aur😁
Thank you Harry bhai I'm just 13 year old but I understood everything till here just because of you for absolute no cost thank you so much
Really awsome 😁😁 me to video start krrne se phle he turtorial no. Html and plat lgaa deti hu
Thanks Harry Bhai Me Start Se Dekh Raha So Informative and You are the best instructor
bohot suna tha ap ke bare main aj daikh be leya very heplful video bro
bhot bdhya hai bhai aaj tk kisi ne aisa nhi bataya
The biggest confusion resolved today. ☺☺☺☺♥♥♥
Supebb concept bhai... Esa lgta he koi bde bhai pda rhe he..
Bhut asha kaam kiya harry bhai aap ne
Mujhe abhi is ki jrurat thi
Thanks a lot harry bhai
Really great bhai appne itna expensive cource free me karva rhahe hoo. Very very very thanks
harry bhai tum bht mast kaam karta hai
Bhai tmhare samjhane ka tarika aur hindi + English language ka use krke bolna ekdm mst hai ❤️❤️❤️❤️
reached upto 20 videos!!!!!!!!!!!! cant wait to continue.
Best course ever to learn web D in easiest way:::::::::;
He is really a great teacher 😊
this one is my fevorite css video... well teach sir
love you Harry bhai for making this course♥️♥️♥️
I learn a lot by watching your videos. Thank you so much Harrry Bro!!
Thanks sir😁
One of the best explanation Harry Sir :)
tum bahut acha kaam karta hai maqsood bhai....!!
Enjoying learning from this platform
outstanding work HARRY BHAI
love from Bangladesh
thankyou for helping us... god bless you keep adding all mern lectures and i request to make whats frame work and library or what is useful in backend or frontend even i also dont know .
Thank you so much bhai. Brilliant content you are giving
Harry Bhai Thank So Much For This Beautiful And Informative Course
Best thing about you that you haven't dropped it off in midst.
Thanks for adding some value in our life🙏
We are always be grateful to you 😊
Mst samjate ho Harry bhiyaaa ❤️
please like the video after watching to appreciate HARRY'S HARDWORK and dedication .
Best webdev course ever on youtube
No words to tell how awesome you are !!!