Understanding Box Model | Styling List and Tables | CSS Lecture 3

Complete C++ Placement Course (Data Structures+Algorithm) : • C++ Full Course | C++...
Telegram: t.me/apnikaksh...
Instagram: / dhattarwalaman

[@TejasDhanani]

0:00 - Intro 0:26 - How CSS works with HTML? 1:08 - Document Object Model (DOM) 3:25 - Units in CSS 3:55 - Relative Units 9:02 - Absolute Units 10:08 - Box Model 18:00 - Styling Lists 18:31 - list-style-type 18:47 - list-style-position 19:24 - list-style-image 19:35 - Examples of List Styling 23:39 - Styling Tables 24:59 - Border-Collapse 25:21 - Padding 25:40 - Border-Spacing 25:52 - Examples of Table Styling -------------------------------------------------------------------------------------------- This is to help them as they are doing amazing and extraordinary work. Thank you to each and every guy behind the scenes! (For the Creator - you can paste this into your description and then the video will have its sections)

[@vishalyadav00]

Thankyou for ur work By the way Where are links of notes 😅 i am not able to find it?

[@BatmanAspect]

0:00

[@monishlal]

@@vishalyadav00 notes ?

[@iamvikasbhatt]

u really work hard more than aman sir😂

[@kartikeytomar6297]

good job👍

[@ibtehaj95]

For those still struggling to understand the float thing, I'll try to explain it. 1. See, Yash added 20px padding to increase the spacing between each of the items (anchor tags). It worked as we wanted it to (the space became visible and the navigation bar looked good but it was thin). 2. Problem is, tho, that when you add padding, it is applied in all directions (not just horizontal). If you inspect it on the browser, it will show you that the nav tag (apparently) latches to the content and ignores the padding (and margins). 3. To free our anchor tags from this latching, we need to use float, which frees all the tags from this limitation, but it also means that the nav itself becomes dislodged from its place (LOL!). 4. To introduce some sort of order back in the nav tag, Yash adds the overflow:hidden attribute. P.S. I am also learning and seeing this video first time, although I have programming experience. P.P.S Big thanks to the creators

[@feliwx4087]

Thanks!

[@InfiniteAI-jv7fi]

but cant we just use padding in the nav to achieve the same look i didnt understand what you said can you explain more

[@ibtehaj95]

Sorry bro @InfiniteAI-jv7fi , I've forgotten all this. Eventually, you'll almost always work with React and some CSS library. Pure CSS is a very small part of the job

[@itsmehurdle6055]

Really Amazing, Just in 2 days after watching this 8ep, I have learned a lot about Web Dev. , Love the way how he teach, But 15:13 he blow my ears hahaha. Editor - Plz.

[@11thf10]

I shocked when this happened 😁

[@Knight004]

@it's me hurdle job lggi kya bro

[@itsmehurdle6055]

@@Knight004 in 1st year, job ka abhi nahi soch raha. 😅

[@neerusharma2467]

Thank you Apni Kaksha team🤗. You are doing a great work🙋‍♂️

[@niraj_wem]

Web development like you!

[@sarthakagarwal906]

0:26 - How CSS works with HTML? 1:08 - Document Object Model (DOM) 3:25 - Units in CSS 3:55 - Relative Units 9:02 - Absolute Units 10:08 - Box Model 18:00 - Styling Lists 18:31 - list-style-type 18:47 - list-style-position 19:24 - list-style-image 19:35 - Examples of List Styling 23:39 - Styling Tables 24:59 - Border-Collapse 25:21 - Padding 25:40 - Border-Spacing 25:52 - Examples of Table Styling

[@iam90skid]

to phir ye likhne ki jarurat thi bro

[@kusumlata5997]

Best ever css video... Really ... Not exaggerating !

[@nainathapa02]

Great !! God bless this team.

[@artishsharma7859]

Will u please explain what overflow hideen means

[@zavedshaik2760]

Ameen

[@keshavtyagi296]

Bro, Please teach us Slowly and explain each and every concept in Depth. BY THE WAY in C++ course the teacher is in too much hurry I think uski train chhuth rahi h. Bhai usse change kardo C++ ka teacher bahut mistake karta h and bahut jaldi pdata h and bahut sare concepts leave kardeta h Bhaiya you start new things, it is good but you never complete or continue the Previous thing. Bhaiya pls either don't start or don't leave in between. Our Expectation breaks when you stop !! Please Continue C++ Course.

[@abramgrey2237]

thankxxx man :)

[@keshavtyagi296]

@@abramgrey2237 😁😁

[@candycrase3557]

please write for all css video

[@CSE_TUTES]

Same bro

[@keshavtyagi296]

@@CSE_TUTES 😁👍

[@phudorjilama5790]

Thank you for the course it's amazing bhaijan 😇🙏🙏🙏learning and enjoying at the same time Thank you.

[@37daivikbijoy49]

A small Feedback: I'm watching this course just to revise my concepts which i had leant some months ago. So its very easy for me ,as a person who has already learnt html , Css to follow you. But someone who is just beginning to learn html and css, it would be very difficult to follow you. So pls teach slowly. But love u bhaiya.....A great initative bu you. I know you are spending your own hard earned money to teach us.

[@mysticlunala8020]

Where did you learn it from? I just started it a few days ago. I got most of the things till now except padding and Margin. The collapsing thing in Margin is kinda confusing.

[@Knight004]

@@mysticlunala8020 job lgi kya bro

[@mysticlunala8020]

@@Knight004 Internship lagi hai abhi. Abhi to 4th year me aunga. Mera 5 year course hai. Intergrated Btech + Mtech. Meri placement 5th year me hogi.

[@FantasticFour4Squad]

yaar I am 13 years old and I think its pretty easy and I think he is slow and this is my first time.

[@ninja_gaming_137]

hello sir main ne apki 2 videos "structing a mega project+adding css in html" se purey website bana li so i am very thanks full to you aman sir and you deserve love fro our country "PAKISTAN"

[@keshavtyagi296]

This is For you Guys- 0:33 How CSS Works 1:12 Document Object Model 3:22 Units in CSS 10:08 Box Model 15:24 Difference between Padding and Margin 18:04 Styling List 22:03 float Property 22:50 Hover pseudo-element 23:20 Visited pseudo-element 23:49 Styling Table You can Thank Me Later !! Jai Hind

[@madhavbudhiraja5421]

bhai apna comment pin kara

[@CSE_TUTES]

Voice perfectly matched with the animations

[@invictusgaming3221]

Thank u bhaiya You does a lot for us keep inspired dont listen haters keep going salute u sir

[@maria.mehwish]

May Allah bless you Ameen I learned a lot from this In Sha Allah sara course hi krongi . JazakAllah Khier.

[@RohitSinghJakhar]

14:42 This is Binod Bhai yha bhi popular hai ye😁😁

[@richaupadhyay756]

Sir ,really great ..and your hardwork is appreciated for this.

[@persistent-s]

Your videos r awesome pls upload javascript,mongodb,php,nodejs,reactjs etc. also. These r helping a lot of people,if u r facing financial problems which is delaying the uploads then i would be ready to pay as well but plsss upload, don't keep a lot of gap between videos.

[@anandsuryawanshi9911]

Need to be appreciated 🔥🔥🔥🔥

[@841_vedantshinde5]

Fantastic aman sir thank u keep growing n motivating 👍

[@amritsnehi5975]

ummid nhi kia tha itna accha smjh paunga ap se ,

[@kunaldagar9701]

The wait is over for the most awaiting and the most amazing course

[@keshavtyagi296]

This is For you Guys- 0:33 How CSS Works 1:12 Document Object Model 3:22 Units in CSS 10:08 Box Model 15:24 Difference between Padding and Margin 18:04 Styling List 22:03 float Property 22:50 Hover pseudo-element 23:20 Visited pseudo-element 23:49 Styling Table You can Thank Me Later !! Jai Hind

[@Saim-hg9km]

0:00 - Intro 0:26 - How CSS works with HTML? 1:08 - Document Object Model (DOM) 3:25 - Units in CSS 3:55 - Relative Units 9:02 - Absolute Units 10:08 - Box Model 18:00 - Styling Lists 18:31 - list-style-type 18:47 - list-style-position 19:24 - list-style-image 19:35 - Examples of List Styling 23:39 - Styling Tables 24:59 - Border-Collapse 25:21 - Padding 25:40 - Border-Spacing 25:52 - Examples of Table Styling

[@syedasheesh7656]

Sir you’re the famous lecturer in the world

[@jaishree701]

Chummiya de de use

[@rajdeepbanik9539]

GOD BLESS U SIR>BEST TUTORIAL EVER>

[@imperialvk]

0:00 - Intro 0:26 - How CSS works with HTML? 1:08 - Document Object Model (DOM) 3:25 - Units in CSS 3:55 - Relative Units 9:02 - Absolute Units 10:08 - Box Model 18:00 - Styling Lists 18:31 - list-style-type 18:47 - list-style-position 19:24 - list-style-image 19:35 - Examples of List Styling 23:39 - Styling Tables 24:59 - Border-Collapse 25:21 - Padding 25:40 - Border-Spacing 25:52 - Examples of Table Styling THIS BELONGS TO "TEJAS"

[@shriyasharma9990]

Kya series banayi hai bhai🔥🔥🔥🔥

[@cubingwithabhinav8517]

🌏🌎🌍Best In World.

[@baluchavan3047]

It's really very good vdo..😍😍

[@omkarartgallery2221]

Thank for this great course, it is best than learning boring documentation in w3school .

[@sahilsawal]

Awesome Sir :) 🔥✌👍👏🤘👌🙏😇

[@shailendraryvensingh]

Thankyou for these Helpful video❤. We are so grateful to your hard work Team.

[@amankhare4387]

Sir, it's a request to you that please explain the topics a little bit more ("Matlab alag se"), For example, when you were teaching float property it was difficult to understand from your video, I have to go to some different channels to clear my doubt regarding the float property. Sir, I just want you to explain some things more elaborately, Thank you for the free lectures They really helped me a lot in lockdown.

[@Priyanshusinngh]

and overflow, too.

[@mohammednumanahmed6100]

Dilse shukiya bhaijaan💚💚💚💚💚🍁🍁🍁🍁🍁

[@apnabollywood5712]

I am waiting java script series Because I am already completed html and CSS 🤗

[@rajatkumar3619]

His voice looks like the voice in neso academy 😁

[@Smartindies]

Ho sakta h waha part time kam karta ho ye teacher

[@keshavtyagi296]

This is For you Guys- 0:33 How CSS Works 1:12 Document Object Model 3:22 Units in CSS 10:08 Box Model 15:24 Difference between Padding and Margin 18:04 Styling List 22:03 float Property 22:50 Hover pseudo-element 23:20 Visited pseudo-element 23:49 Styling Table You can Thank Me Later !! Jai Hind

[@keshavtyagi296]

Bhaiya you start new things, it is good but you never complete or continue the Previous thing. Bhaiya pls either don't start or don't leave in between. Our Expectation breaks when you stop !! Please complete C++ Course.

[@kajalkumari-jp5wo]

Yes!

[@nishantsnehi1213]

Voice? Looks? You can see his voice? What a surprise..

[@fitdrop8870]

lot of thanks for it, i am asking how much time will take to be full stack web developer as i am following your video.

[@praveengupta0972]

Wait for it from an hour 🙏

[@sharadbisi187]

I'm very excited 😀

[@akash-]

bahiya you are great learner as you've cracked gsoc but this doesn't mean that you can also teach us better bec you have no experience that how many type of doubts a student can get, I'm not saying that is course is waste, it's amazing but not for beginners! Hope you'll understand what I'm tryin to say! Thank You :)

[@priyanshusrivastava2145]

Bhaiya starting se follow kro ajaiyaga. Like am a noob just 2 days before now.. I had basic knowledge

[@preethamfernandes597]

Most Difficult things in the world 1. Becoming a Billionaire 2. Winning the noble prize 3. Getting heart from Aman Bhaiyya ❤️

[@noobbutnormal1914]

first 2 aren't difficult but 3rd so much

[@preethamfernandes597]

@@noobbutnormal1914 😭

[@dhruvmakwana6724]

thank you so so much for this amazing course . it has helped me alot to develop my skills thank you so much

[@ashutoshkumargupta6998]

Really ...Love your Web development Course....Quality of content is awesome...... I want to know how to do freelancing in web development profile.....Plzz help me....It will a great help for me.

[@ichhitsharma9243]

go to a site called freelancer, in it just select your skills, it will show work related to them

[@vibhabharti7275]

This web development series is first video series which, i m watching at 0.75 speed. Otherwise generally i used to watch all videos more than 1.5speed.

[@em-vy4qb]

Half Yash n half Aman ..👍

[@sunnysachan6805]

Please make a playlist for all the HTML lectures

[@MayankYdvv]

At 21:40 You write padding 20px But why there is padding only in left and right , why not top and bottom?? 🤔🤔

[@UbaidUllah-n5i]

Great job ❤❤❤🎉🎉🎉

[@adityakalpesh834]

Bhaiya mein class 9 th mein huun aap bahut badiya padhate ho maja hi aa jata hai Keep it up bhaiya

[@shahzaibchaudry7598]

well way of teaching great sir

[@avijitchanda7944]

Let's assume if anyone used external force to move your position in every side or a specific side then it's called margin and if you are eating too much and taking more space in every side or that side you want it's called padding.... 🥳 🤩 🤩 Chalo main v thora help krta hoon padhane ka 😝😝😝😝

[@Ali-bd8mc]

your videos are so helping

[@Food-ie_mom]

Commendable course

[@anishsah7761]

thanks for great class......!❣

[@abhishekdubey9920]

Really you make the content of the video similar to log 2 base 2 but for free and in Hindi language very very thanks for it it is very useful for us

[@ahmedaljobayer]

Thank you for a great course.

[@malik_zoyan23]

GREAT COURSE,THANKS BRO

[@anujsaini4454]

Sir you are amazing 🔥🔥

[@pabelreja]

border-spacing property is applied when border-collapse is separate youtube video timestamp-27:30

[@pooja581]

Hello Bhaiya, Your lectures are awesome 😍we are learning a lot but I have a doubt in my mind that.........👇 Will I am able to get the web development internship after going through all these video's that you are going to upload . Please reply...........................

[@yashbhadauria1113]

Getting internship is an easy task....you can easily do it

[@KRATIKASINGH-gg2hx]

Thanku bhaiya so much

[@AbhishekKumar-td5zu]

Tqsm bhaiya ♥️♥️

[@Febin03]

Best Course Ever! I do have a small opinion though. I think it would be better if these videos had English subtitles. That way those who don't understand Hindi could also benefit from it. Keep up the good work!

[@hashirahmad988]

amazing sir yash love you from pakistan

[@asthapathak6117]

Bhaiya notes bhi deal dijiye jise notes chaahiye toh like karo😀😀😀😀😀😁🙏🙏🙏🙏🙏🙏🙏🙏

[@abuzarhaider915]

Can't understand why float left at 21:55. Someone please explain.

[@ABi-fr9dq]

Lets Go For Awesome Tut 😉

[@Luv_47]

Thanks ❤️❤️❤️👍

[@adityaprakash1172]

10:55 It would be border-bottom at the bottom, you have mistakenly written border-top.

[@adityasingla3148]

Every explanation was good except the float property please explain it again

[@apnamarket4119]

may be this person is Vinod Thapa from Technical Thapa because his voice match with him ❤. 👍👍

[@dayachourasia9968]

CSS units ✅✅✅👍👍👍

[@Krishnaaa34]

I purchase laptop when html course started. Meanwhile me : ye course mere liye hi bana hai.

[@bishalt123]

Oo..bhai 😎😂🔥

[@d9634]

Bhaiya konsa lia ?

[@Krishnaaa34]

@@d9634 dell

[@d9634]

@@Krishnaaa34 if you dont mind Yeh bhi bata skte ho Konsa model ? Aur kon kon se features hone chahiye 😅 Mujhe bhi Lena hai 😁

[@Krishnaaa34]

@@d9634 abhi batata hu

[@ashwindhangar2633]

14:50 Binod 😂😂

[@parthgarg611]

its 9 days past now ,plz upload the next lecture soon :(

[@JamAl-hv3zo]

23:17 where is command option down button in windows keyboard? is this tutorial for mac os user only?

[@tanviparmarrajput]

Lots of thanks!!

[@sandyfroze8741]

0:5-nice

[@anubhavsingh9419]

Please upload more videos on CSS

[@chetannikam8129]

Nice content with kaddak explaination

[@arnavupadhyay1526]

23:23 - nav bar decoration code

[@abhinavthakur-u5k]

18:00 css

[@sushil3093]

Bhai ye video css padhane se pehle upload krna chaiye tha...fir selectors aur commands smjhne me aasani hoti

[@s.s611]

Apna college best

[@chitramendiratta5301]

now you will launch your javascript course after 8 lectures of css

[@sahilchoudhary1473]

Hello sir, great tutorials but just a suggestion. Still now there are so many topics covered in web development as well as C++ So can you manage playlist separately topic vise. Like I was searching for backtracking but difficult to find in so many videos so create a separate playlist for all topics

[@ayushikumari2151]

We want advance web d course

[@shivamsingh20]

THNX A LOT SIR😍😍😍

[@shwetachhabra2762]

Sir isme box model ke example me div tag hi kyu use kiya .tag bhi to use kr skte hai ?

[@DhananjayKumar-vn5tc]

thanks for these videos sir please upload the next video

[@brysongracias7882]

@2:46 it should've been *attach style to DOM nodes

[@rudrapratapsinghsisodia2565]

nice video

[@MeekOmni]

Fun Fact: during Premiere, no one really listens what is going on

[@RahulDas-qx4ei]

Everyone remains busy in live chat

[@samyakgupta6967]

True , me to split screen kar deta hu to chat dikti hi nahi hai

[@noobbutnormal1914]

during Premier I hide chat and see the video in fullscreen

[@incognito4041]

@@samyakgupta6967 chat off karne se bhi to hota h na.. Split screen karne ki kya jaroorat h🙄

[@noobbutnormal1914]

@@incognito4041 I think we met in a valorant match

[@sulaimandev]

Anima can convert any design into HTML, CSS and Javascript.

[@pathanusama4361]

Can you make one video on web development . Like , what things we should know if we wanna to become good web developer .

[@pratyushyadav1130]

Bhaiya just a request make a simple project with js videos ((as made with html)) to help us learn while practicing because in starting no one has full project idea and it gets out of interest (pls ).

[@cseaspiration]

Thank you so much

[@rohanpatil8137]

you give visited to nav bar this is not working properly, when you click one anchor tag why show all anchor tag is visited?

[@ayushacharya4968]

Aman bhiya kya html me box model ki coding ho skti h kya like margin padding and border etc for eg like hum jab html me login form design krte h to content ke outside hume box banaana h to kya is coding (box model) se ho jyega kya plz bataiye Bhaiya

[@moneyfiend]

Thank you sir