CSS Tutorial: CSS Box Model, Margin and Padding | Web Development Tutorials #20

Подписаться 6 млн

Просмотров 1,3 млн

50% 1

► Source Code & Notes: codewithharry.com/videos/web-...
►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.codewithharry.com
►Facebook - / codewithharry
►Instagram - / codewithharry
►Personal Facebook A/c - / geekyharis
Twitter - / haris_is_here

Опубликовано:

3 янв 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 900

@vipinmishra265 4 года назад

regular student of CodeWithHarry classes :D

@parthagarwal813 3 года назад

Same me to I watch you regularly

@shivankkripan9051 3 года назад

ui uf

@shivankkripan9051 3 года назад

@@parthagarwal813 Yd£6*

@usmanali-rn6nd 4 года назад

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

@roasted_boy6213 3 года назад

Wow congrats sir I am just shocked by seeing ur success all the best do well !!!!!!!!!!! (I am not harry)

@codingssprint7362 3 года назад

super

@gauthampracharya9592 3 года назад

very noice! HOpe you got a job lmao

@PriyaSingh-ul4hl 3 года назад

Congrats! Could you please guide how you find the job

@nothing5049 3 года назад

Hope you get a job..And all the best for your life and i glade t meet you one day :)

@shubhparadkar 4 года назад

Padding = Clockwise (top, right, bottom, left)

@hargunbeersingh8918 3 года назад

a lot helpful

@sundan5559 3 года назад

Thank you so much....

@deveshanandsrivastava6218 3 года назад

I remember it the same way

@pradumanpandey6065 3 года назад

Thanks

@muskanprasad4976 3 года назад

Thanks bro

@mohammedburhaanali4373 3 года назад

The only classes which I never like to bunk 😂❤️

@shreyansh6490 3 года назад

same bro

@mahantgenix 3 года назад

Bro i have a great idea can you help in coding

@mahantgenix 3 года назад

@@shreyansh6490 Can you

@shreyansh6490 3 года назад

@@mahantgenix who r u

@mahantgenix 3 года назад

@@shreyansh6490 bro i need one programmer to help me in coding

@badgamer8108 4 года назад

he is doing hard work only sake of us.

@surajdubey4484 3 года назад

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.

@radhikasharma8674 Год назад

animated Box With CSS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gBmx3RmThDE.html

@cricknews7453 Год назад

Hello brother

@vipulsinha3310 10 месяцев назад

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

@ajaywadhwa3398 3 года назад

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.

@hasnainahmad8986 2 года назад

دتڈےدءددحئےئےءےےظتتئتتدددتفتتتتتتڈددتدددتتتڈتڈتتڈڈدتدددتدردڈتدتتتتتڈتتڈتتتتتتتتتددددددڈدددتدڈدددڈددتتتدتڈدسدترترتددتتڈرتتدےڈتحتستتڈردڈڈتتتڈتڈتڈدےےرےڈتڈتتددتدےتتتتتتتتتتتتتتتثتتتتتدرڈڈرڈتدتئتتفشطفحدتتفءطفےفطڈطےطءڈےدفئفڈثڈحدتےدتدتڈدددئثڈدڈددددےءفدفففففتےددےفدءدففدففءطفشطدےدففےدططدءےءدءفددءفگففدءطءدفڈطفےطددطءڈےطءءطفءطءططدےءظفففےےےڈےےےدےڈےدفگےدفءءددءدءءدءددطءفطففددءءڈطففدےفدفدےےدےےدفےفےتےددےفڈےدےڈفدفدتڈتےےتتتےءےےتتففتےتتےےفےددظفدططفئفئءدفءفطفطفےطےفےےےططتفطیفتےءدءےددےفدءددطےےےےےےےےےےےےددطڈطےدےءےدےےدڈتدےتےءددتےفدتےدتفدتءدفےدٔڈےدفءفگدگفدےفففےفےدےےءگیءءگءفیءءفیدففءفےڈءڈےدےےتےتےےتظءدءےفءطففدےدددےڈتدےدتدفدظفےفظےظےےڈفےےےےےےڈتددڈففےتےےےفےےےدفددفتددفددڈڈففففففتئففےتتتےدےففےدےفدففتدفدتتتڈےڈڈےےدےڈےدتتتدءددءےتڈتددےءدتفدددےددےفتددےدتددےےدےفءفطءدطےءیےففطےطففیدءفطگفظفگیطدءےدءدءططفءفدفدفےدففففففتےففےءتفتےےفئطفئءڈےفےدتفدےتددفتےدتےتےےےدتددتےڈےددددفےتےڈتےءفءظءءئفءےفئظطیےدءدظددءفئدفدئدفدئفدءففئفءددفئءفءئدطتےدےفےےتتتےفےتےےےےتدفےےڈدےےےدےدفےےدتےفےدےفدےےدتدفےفظءظظےظءیطفظظظیفءءطیطگگتدےءطئدییگڈطططےدظےئطفظفےفدفءفءفےےئدتر

@hasnainahmad8986 2 года назад

دڈحتدحےتٹستٹس

@radhikasharma8674 Год назад

animated Box With CSS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gBmx3RmThDE.html

@roushansingh9936 2 года назад

This is the only class i wish never to be ended....😍😍 Thanks harry bhai for this lovely playlist💓

@lavrai9254 4 года назад

actually m used to of this channel ,and frequently goes there for any query regarding any topic ..

@invalidname8192 3 года назад

Even better explanation than few of the paid courses. Thanks

@parwatishah5598 3 года назад

Thank you so much 🥺 things which I was unable to learned in full semester I learned in a week 🥺 .....more to go 🖤 thanks alot 🥺

@shuyebkhan2127 2 года назад

Hallo ma'am

@radhikasharma8674 Год назад

animated Box With CSS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gBmx3RmThDE.html

@rameshkarade4446 3 года назад

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

@kunalaiyer7523 3 года назад

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

@SLIME-gx6fo 2 года назад

9:06 you can remember top right bottom left easily as they are clockwise like clock's needle.

@anant-strong 2 года назад

thanks for sharing keep up the good work

@shreyasdongare6152 Год назад

Yes .. easy to remember

@tamalmajumder7160 10 месяцев назад

How can a person be so helpful? This guy have my respect. Im on 20th video on my third day

@anitha551 Год назад

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

@jeffomega 3 года назад

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.

@radhikasharma8674 Год назад

animated Box With CSS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gBmx3RmThDE.html

@PeaceFulnessX Год назад

Harry bhai You are the best teacher ❤️❤️

@ZJSports007 2 года назад

You are a life-saver. Thanks for helping out in these darkest times of post-pandemic, like a morning breeze in morning.

@OfficeUnfiltered 4 года назад

thank you harry bhai, for making such an amazing playlist.

@tanishqkulshrestha136 4 года назад

you have made my all concepts clear, thank you Harry bro ....!

@darshna9 3 года назад

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.

@yashwanthee-0274 4 года назад

Sir Your teaching is amazing and wonderful and u r my best teacher...

@danish__official5374 2 года назад

Hats off to you for teaching us Web Development. Your efforts are really commendable.

@AmanGupta0412 4 года назад

Started learning coding through your Playlist. Truly the best way I have learnt here.

@shahveziqbal5206 3 года назад

Deserves more than a millions of subscribers...Awesome lectures and teaching....❤️

@radhikasharma8674 Год назад

animated Box With CSS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gBmx3RmThDE.html

@Dineshtamang6267 2 года назад

What an amazing work you've done for us thank you so much for this amazing course..❤️

@vishalsinha526 2 года назад

harry your concept is superb I just started to learn web development journey and you are my Mentor in this journey Indirectly.....

@masoodalam9983 2 года назад

Yes Sir it is Shift + Alt + Down Arrow for copying the whole selected text down in Visual Studio Code Editor.

@sujittech4630 3 года назад

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.

@ashutoshdubey2280 2 года назад

adarsh

@up-32trolls47 4 года назад

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 🤗

@waqar139 3 года назад

Amazing series cant tell how informative it is thanks for the effort

@s.m.washifurrahman3507 2 года назад

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!!!!

@fatimasohail3027 Год назад

Padding: y(top/bottom) x(left/right) Why is it like this?

@factmania0803 Год назад

@@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.

@badgamer8108 4 года назад

arre harry sir ji ke subscriber millions par pahuca do

@imadeyouwaste1.84secondsre6 3 года назад

pahuncha diya 😊

@kartikgoswami 3 года назад

@@imadeyouwaste1.84secondsre6 ahhh shame on youhh

@imadeyouwaste1.84secondsre6 3 года назад

@@kartikgoswami whaaaaaat?

@kartikgoswami 3 года назад

@@imadeyouwaste1.84secondsre6 you wasted 1.84 sec of my life 2 times

@imadeyouwaste1.84secondsre6 3 года назад

@@kartikgoswami now the third time😂

@user-dy9gk5kt8e Год назад

2 days ago i just finished my css but i am gonna still watch all this stuff.

@souvikkumarsaha3776 8 месяцев назад

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 .💌💌💌💌

@tanuadhikari7048 2 года назад

How will I ever thank you for these amazing tutorials... Thank you soooo much ×1000000...

@KNIGHT-yy7nh 2 года назад

hii

@KNIGHT-yy7nh 2 года назад

hello

@hassaanraheem5644 4 года назад

Keep it up Harry Bhai✌️ I feel motivated with your voice💥

@codinghero2920 3 года назад

true......me too !!!!

@hacky_adtechvlog6987 Год назад

thanks harry bhai apke videos bhut helpfull rhti hai "YOU ARE OP PERSON"

@samantmaheshwari2483 Год назад

Harry Sir is making World best Web Developers..... Thank You....

@siemen_subbaiah 4 года назад

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 !

@MrSmith-bt3ej 2 года назад

You clearly explained box-sizing bro !!! You are awesome

@yesican9818 3 года назад

I am from Bangladesh. Awesome tutorial Boss love u

@rajansood964 4 года назад

Great regular watching your series

@vocaljune01 3 года назад

Thanks a lottt for ur classes...really beneficial for us.Hoping that u'll make videos on ML,AI too :)

@trideepsardar2266 4 года назад

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.

@kasifmansuri7552 Год назад

Thank you harry for providing your amazing knowledge in free!!!

@AnimeKaikaisen Год назад

Arre sir really thanks from the bottom of my heart sir.Bohot confuse tha iss chees ko lekar.Thanks a lot sir 💖💖💖💖

@Alive-Ness 3 года назад

if you are going to complete this series, then congrats you can be a successful web developer

@masoodalam9983 2 года назад

/* 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.

@hatimlokhandwala6312 Год назад

Thanks for the information

@ranjitjha1217 3 года назад

When i see your video then i feel so confident in myself

@abinashchoudhury8310 4 года назад

Great video Harry sir...Regular follower of your videos :)...Will complete the whole html css js playlist and then move in into your other video courses.

@mohduzair6392 2 года назад

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 .

@virajgoyanka5150 2 года назад

If margin > 50% from both side then just imagine your box !

@roasted_boy6213 3 года назад

Only legends know that harry sir plays gta vicecity

@RAKESHKUMAR-pl1up 3 года назад

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.

@RAKESHKUMAR-pl1up 3 года назад

@YT AC 33 ok, sorry if I say any word bad

@RAKESHKUMAR-pl1up 3 года назад

@YT AC 33 ok

@rayatczn8397 3 года назад

Its not enough to thank you only,,May you live long brother❤ From Bangladesh

@PRIYAKumari-zm1ql 3 года назад

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

@Ahmad_Editz1 2 года назад

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.

@rajanijaiswal333 4 года назад

To the First Commenter

@thetechguy_01 4 года назад

I want to thank you whole heartedly because the way in which you are uploading content and videos of your knowledge on this channel is very good for us and or any man who cannot try out that buy expensive ,but its coming to your channel, you can learn absolutely for free and they make career, thet can look into a good company. 💯 %Free

@karishmagoswami9125 Год назад

Enjoying learning from this platform

@utkarshpatil3180 2 года назад

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,

@kocomputer835 4 года назад

Good night harry dada

@SoNuKumar-co8xt 4 года назад

Hii

@souravkumar9411 4 года назад

Mast Harry Potter

@ahmadbaig7863 4 года назад

thank you so much harry bhai you are my teacher please keep it up

@tanujkalra7334 2 года назад

One of the best video for CSS Box Model

@music4tune Год назад

Thank you Harry sir. Har video lesson dekhne ke baad man karta hai ki bas ek video aur😁

@surajsuryavanshi1758 2 года назад

He is really a great teacher 😊

@shahmsani944 2 года назад

Amaizing, I really understand lectures very easily.

@harishchaudhari9681 3 года назад

One of the best explanation Harry Sir :)

@dickharry910 Год назад

I learn a lot by watching your videos. Thank you so much Harrry Bro!!

@hindustancollection3708 Год назад

love you Harry bhai for making this course♥️♥️♥️

@adityaojha2701 3 года назад

The biggest confusion resolved today. ☺☺☺☺♥♥♥

@karanraheja7425 4 года назад

Thnx bro for making this playlist

@kartikeysingh2669 4 года назад

Harry bhai, thanks for providing these courses on youtube

@AnkitRaj-mc7no 3 года назад

bhayia apke is course se bhut help mila thankuu...😊

@dhananjaykumarsingh4456 4 года назад

Love you bro.For this course.

@itsmustufa5361 3 года назад

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

@bhavanshgupta6476 4 года назад

great work keep it up never had any better tutor

@shawaizkhan7470 4 года назад

Bhai you're such an inspiration ❤️❤️🙏🙏

@k_resta1635 Год назад

Tnx very much for making this playlist bro Harry Love it ❤️❤️

@jassiprasad9377 3 года назад

Achha laga bhaiya... Samjh me aya achhe se. Thank you Bhaiya

@WasimShaikh-kn1im 2 года назад

Thank you so much bhai. Brilliant content you are giving

@Bike_Addicted Год назад

i am regular student of u sir and learn web dev from ur channel as a beginner ....i am chaman from faisalabad pakistan

@rajkumarchavan8457 Год назад

thanks harry,most favourite video

@tubakhalid5222 3 года назад

No words to tell how awesome you are !!!

@MuhammadBilal-th5ym 4 года назад

Thanks Harry Bhai Me Start Se Dekh Raha So Informative and You are the best instructor

@tanishajaiswal7559 3 года назад

you have cleared all the concepts

@purellajajisaipavankumar651 3 года назад

Best webdev course ever on youtube

@user-tl4yw8ix7o Год назад

this one is my fevorite css video... well teach sir

@MUGHAL__BRO 3 года назад

well this legend still plays vice city in 2020!!…BTW awesome playlist!

@optiontrader-s 4 года назад

Bhut asha kaam kiya harry bhai aap ne Mujhe abhi is ki jrurat thi Thanks a lot harry bhai

@trendingshorts8092 Год назад

thank you harry bhai you are best teacher on planet for coding

@NikhilKumar-wv3to 3 года назад

I couldn't understand box model before but in this video I understood it. TY.

@biplabpaul3822 3 года назад

I am really enjoying this tutorials

@satishmahajan7893 2 года назад

Harry Bhai Thank So Much For This Beautiful And Informative Course

@cargames375 Год назад

thank you harry bhai ap ke video bhot ache hai

@reviewed6559 Год назад

Thank you Harry bhai for this playlist

@onlineearning7707 Год назад

Thankyou harry bhai for all the content

@devyanshbhati3337 2 года назад

harry bhaiya this web development course is really helpful I love it

@amaanullah13 2 года назад

bhot bdhya hai bhai aaj tk kisi ne aisa nhi bataya

@vivelefootball6015 2 года назад

thanks lot for clearing concepts sir.