CSS Tutorial: CSS Display Property | Web Development Tutorials #24
HTML-код
- Опубликовано: 30 сен 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
The first lecture where I felt like it's bit tough to understand 😅😅😅..
@@yashkapoor2377 yeah web development is all about learning 10%then apply 100%(practice)
same
@@bharatmishra250 yes!!! we are soo lucky we are getting this for free my brother learned this from college...(web development)
@Deangelo Kyng girlfriend he banwa de bhai smjh to kuch aa Nahi raha hai time to pass hoga 🙂🙂
I felt this is floats but than I found an animated explanation of it then I really understood floats in a pretty good way'
for peoples who are getting confused: " in HTML there are inline and block elements, so with the help of display property you can make an inline element a block element. you can make a block element an inline element".hope this makes sense
tnx
tnx
First in the video it was shown as header is block
So if we do Margin auto then header as it occupies full space margin auto will not work as margin on both side will be equal and 0 by itself
So width was reduced and then margin auto centered the item
But in second case of image we changed an inline to block but didn't add any width
Why and how did it happen
Tnx bro
@@Krenil. we did margin auto in img
Short note for those who get confused.
1)we can set width to block element and not to inline element. but we can make them block by { display: block} property. So that we don't have to use margin and padding extensively.
2)But what if we want that element to position itself (OR occupy space) like inline element and also get adjusted by width? for this we use {display:inline-block} property.
Any correction would be appreciated!
This is most underrated comment. Thanks it is useful to me :)
Img tag is a inline tag but still be can set its width. Why?
@@arkumar842 in that we are setting width of image, not width of the tag.
Thanks a Lot!!
great
People who are confused with border box. Consider following scenario:
width : 500 px
padding :100 px
border: 10 px
without border-box the total width of content would be 500+100+10=610px.
but with border-box total width of the content would be 500 only 100 and 10 px will consider inside 500 px.
thanks
Bhai Mera ek inline block mai Nahi aa raha . Mai bilkul same Kar Raha hoo
@@masst1961mera bhi nhi aa raha
@@DHARMENDRASINGH-qc4hp Bhai aage Dekha hai
Harry bhai ne inline box Ka alternative flex bhi bataya hai.
@@masst1961 na bhai abhi nhi dekha
Block element: A block-level element always starts on a new line.
A block-level element always takes up the full width available. A block level element has a top and a bottom margin, whereas an inline element does not.
Inline element: An inline element does not start on a new line. An inline element only takes up as much width as necessary.
We can change an inline element into a block element(and vice-versa) using display property(display property ki madat se ham block element ko inline aur inline element ko block me change kar sakte hein).
Display: Inline-block: Allows us to set a width and height on the element. The top and bottom margins/paddings are respected in inline-block.
Display-inline: The top and bottom margins/paddings are NOT respected.
Display: block: It is a block element and adds/occupies a whole line.
thanks myan
It happened to the first time in this course - I have not understand anything.....
hi have you completed learning web development?
Sir till 23 tutorial it was great..but it is really confusing for a beginner when things are confusing..as in this video after 12th minute..it was not clear at all
yes
its confusing
@Adwait Barkale exactly
Practice by urself...everything gonna be cleared...things r very interesting and easy my frnd...
@@arniksen7864 bro what is the best way to practice or learn ?
@@arniksen7864 bcoz I'm watching these videos but feel like I haven't learnt anything
Videos that keep me awake and not giving me up!
Hey Im getting confused, I feel like I'm not learned anything. Can u plz help me ? Like what should I do ? And how should I do?
@@nuclergaming9969 same here now bro😭
@@harshitachaurasia1246 that was the best reply 😂
@@rushigaikwad 😂😂😂
Mere toh aadha upper se jarha😂
Now its getting out of my head
watch it again and again and do some practice...
That's because you don't practice it.
Refer the net ninja html css crash course to understand inline-block
Element. He explained it in more proper way
my answer isalso same no difference
Bro watch it again first I was also getting confused
Bhaiya Thode Confuse Hogaye Thhey Na?
hum bhi bahut zyada confuse hogaye
@@kotharidhruv75 same here Bhai..
Yes iam also confused minimum 34%
Now. Your videoe becoming messy and confusing to understand to me. In every step.
This was the most confusing tutorial till date.. Seriously, this 15 minutes video took 3 hours to execute in my PC🥺
i think you not watched from starting every video is fine except this one.
@@shivamgoyal7404 I watched every single Tutorial since the very beginning..But this is very confusing..
@@sakshirao2103 actually I am doing this course as a revision rather than learning so may be it is confusing for those who are beginners.
@sakshi rao right i am also very confused 😶
1st yh watch karo then harry so u all will understand well
We can center only block element using margin:auto , therefore to center inline elements first we need to convert them to block elements. Even in the case of block, first we need to set their width
Thanks bro i have been confusing in these things
Thanks bro, that helps
was helpful
thanks brother
I just want to include a point that in box-sizing:border-box;
The width is calculated by adding content+padding+border(not margin).
Thanks bhai 👍
Even I noticed it while using dev tools but sometimes width = content space alone and I don't know why
Watching it twice made sense 😀
bro this playlist is definitely amazing . No doubt at all. It'd be better if you give us some assignment kind of stuff after every video so that we will be familiar to what we are learning .That'd be really helpful .
U can practice or u can download some assignment from Google
Sir...all vidios till are best and was easy to understand...bt it was confusing for me.. the concept of display property is not cleared properly.
🌼😊😊
Bro what do you do with notepad++.
In this entire tutorial?
it is vscode not notepad
Bhot bhassad krdi bhai 🙁🙁🤷🏼♂️
Bhaiya iss wale video ne Sach me kafi confuse Kiya h 😑
I continuously watched this video 4 times 😅😅 , then I got it 😊👍
Harry: Let's put image
Then nope hold my logo 😁
By the way I'm just kidding🕺
Sir video is not useful
I could not understand clearly 😔😔
Bhaiya sirf aapki he image ki link chal ri hai baki images ki nahe chalri hai....
It was difficult for me to understand once but i rewatched and it worked for me 👍I think that coding will get more better the more we experiment !
Harry bhai first time block huva me 23 video me se😛
2:03 CSS Target, 3:35 centering using margin auto, 5:30 Note, 7:59 inline block, 10:29 box sizing: border box, 12:07 display: inline-block
Display: table ?
Namasta dada
harry sir mai apke he wesite ko inspect kar ke masti karta hu
This was very confusing lecture and I am confused very much
because of that < .box incline block> i stucked there for 30 min , i was think y is my thing nt goion right..harry sry plz do edit such mistake because nebee like us wil go nuts hahahahaha anyways thanks
Box ek hi line mei nhi aa rhe float ka use krke ho rhe Harry bhai ki trh se nhi ho rhe chahe jitna block inline block use kr lo
mind blowing harry bhai but please explain slowly🥲 by the way nice video
Video dekhta hu to samjh to aata h par coding karta hu to bhul jata hu yha par likhna kya ???
Do teen bar dekhna padta ( my problem) Harry bhai kahte h na beginner beginner whi hu 😁😁😁
bro i suggest u make a playlist on web development
i already know u made it its a joke bro lol
you are changing values from the console and it makes your videos more confusing to beginners.
imagine what,i just border the header then did text align centre ,bith image and letter go into the middle of the page.
6:36 "Ek chiz yahapr dekhna, jb ye bada ho jata hai na mera bohot bda,
Ek problem create karta hai." - Us bro us
Analogies :-
1)display: inline-block:
It convert block element into inline and
also block so that it posses both properties so that it can give the same space to another block.
2)box-sizing: border-box:
It justify the each box inside the container and each box give the same respect to each other to apply their properties.
U shouldn't have used img for explanation of this topic, since img is inline block element. Here we can set width and height unlike other inline elements. For those who are getting confused use anchor tag and try to give width, height and margin:auto to it. And u will find u cant, so u need to convert it into block element
U made me confused in the middle 🙏🙏
Thank You Sir Very Helpful video😇😇
Really interesting way to explain both block and in-line elements in hierarchy of markup language. Thanks a million, Harry for making these videos/tutorials and giving real-life examples and projects.
Bhai tu to bhohot achhe se samaja ta hai
tu youtube pe channel kyu nahi kholata?????
Thank you so much Harry bhai i have solved my display property issue after watching your this video very easily.
Most of the elements that you have learned about so far are block elements. In other words, their default style is display: block. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
Inline elements, however, do not start on a new line. They appear in line with whatever elements they are placed beside. A clear example of an inline element is a link, or tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. (Like this…) The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.
This is only the best video in whole u tube on display properties where I found to the point explanation.keep it up harry bhai..u r the heart of millions of coders ❤🎉
ab mzaa aane lga ek no bhai
It's starting to get a bit confusing from the last one or two lectures.
Harry bhai ye video samaj mein nahi aaya phir se explain karke daal doge kya
Jisko Kam Samaj aaya vo phle playlist ka lecture 9 check kr le ek bar!
bro, bht hi ziada confusing tha yeh wala tutorial...
I really get confused in Width, margins, padding and inline and block line
kuchh log toh mujhe aakar suggest karte h 🤣🤣
Muje nhi smj aayi ajj ki class 😓☹️ 2 se 3 bar dekhli 😢
pls make new video on this "css display property" didnt understood a single word. everything is confusing here :((
Could you plz remake for this part? 🙏🏿🙏🏿🙏🏿, it's making the concept much worst
at the end mujhy certificate chaye harry bahie
Very bad video lot of confusion
didnt like the video
Mast bhai plzz cover each and every topics in this series.
Thanks for everything.
It was going great till now .but this one is so confusing
First time i confused, i dont learn anything😢
I'm very thankful to you sir.
I learned many of things from your video.Thanks for giving us so much for free.
may god bless you.
Sir You are great.
harrey bro this vedio is bit confusing
is waly tutorial ne to demagh hila k rakh diya
5:35 inline element mai width set nahi kar saktay but apne bina display block kiye mai width set kari hai
Is tag is exception
Ye video nhi ayi smjh mein
First lecture where I find hard to understand
In this video, you are moving too fast.
bhaiya what is the use of adding classes like container, top when they are not defined in style tag.
concept clear ni hwa display property ka
this is the first video i couldnt understand😞
harry bhai thoda araam se idhar sab bouncer gaya
Bhai yaar kya kiya is video me kuch samaj nahi aaya beginners ke liye he to us hisab se samjavo itna fast thodi hota he koi kuch samaj nahi aaya yaar kya kiya aapne
@@Ha_Rsh_ ha bhai me hussain sir ka dekhta hu mast batate he woh ye log apne aap ko jayada smart smjate he inko padana nahi aata
And also please make your digital marketing course either free or paid i m ready to take
Thank you Harry Bhaiya for providing such great playlists and videos for us.
bhaiya aap ek baar px aur % me difference bata digiye acche se please!! its very confusing....
Pixel is the measure of 1/96 of an inch. While, the percentage is the measure of the portion of the screen, for ex: the whole screen in length and width is 100% each. So, if you want to cover half part of the screen with same elements who will have to use 50% in css, i.e., height: 50%; width: 50% for the element.
or peoples who are getting confused: " in HTML there are inline and block elements, so with the help of display property you can make an inline element a block element. you can make a block element an inline element".hope this makes sense
This lecture seems to be very difficult for me idk y 😫🦊 Didn't understood anything 😖
Bhai ye to confuse krdiya aaj aapne 🙂
Harry bhai code source achw se kam nwhi kar raa
Sir my image is not visible on the server
bhai yrr konsa music lagate ho last me .... bata do pls😊
Wufff...
Oh! Harry in this video you were in so hurry that u messed up creating confusions..
But comment section apologized that..
Whatsoever you teach awesome ❤️
I am totally confused 🤔🤔🤔🤔
For keeping the header in center, a more simple way is to use tag.
It is not much used in HTML5
@@heliconic Why ?
Best of best explaination Harry bro...accessing this video second time for better understanding of display proeprty❤🎉..got it deeply
maja nahi aaya ish tutorial me. please aise tutorial mat upload kiya karo.
harry bhai yaar its soo confusing...
For this one, the later half was rather confusing
class is not .container its .heading
Sir Sab kuch Side by side Nahi Aara ..1 Ke nechay our eak aara..😢
Margin aur width kam karo
Congragulation for 6M Boss
can someone suggest some websites(if there are any) to actually practise these concepts......it feels like cramming up......
I know a website and it's notepad
@@ggmr399 i knew that😓
Could anyone tell me how to get inspect bar horizontally like carry had in his video, because in my laptop its vertical so i m having some problem
There is a setting and 3 dot icon in top of inspect bar. One of them will fix ur problem..
That setting is named as dock view
direct
header
{
text-align:center;
}
bhi ker hisakte hai image ko center mai dalne ke liye
Harry bhai,
Actually m abhi ap ki Python ki series access kr rha hu lkin muje vaha per ek problem aa rhi h
Ap n ek exercise di h new read ki
Toh us m ek module h win32com
Us ko mn powershell m ja kr install bhi kr liya lkin pycharm m use kr rha hu toh "no module named win32com" show ho rha h jb ki "IDLE* per m us ko use kr pa rha hu
Mn bahut google kiya but is k solution nhi mil rha plz ap hi help kr skte ho
Isi problem ki vja mera ek din pura wast gaya h
Plz help me.......
4:25 display:block , inline
kuch smj nhi aa rha harry bhai kuch kro
Bhai background img set nahi hora hai!!
keya karu?
same here