0:40 - What is box model? 3:30 - What is specificity? 6:51 - How to align a block element inside another element? 10:11 - Difference between Static, Relative, Absolute and Fixed position? 13:28 - Difference between visibility:hidden; and display:none;
13:29 Difference between visibility:hidden; and display:none; I think that the best way to show the difference between this properties is creating a stack of three divs, for example: one two three div { margin: 20px; width: 200px; height: 50px; background-color: #4477FF; } Then play with the properties of div.two .two { visibility: hidden; /*display: none;*/ }
I have attended one interview mostly they asked about javascript as ur teaching now.. This video helped me a lots guys highly recommended to this Sir all videos
Both visibility and display elements will be three at DOM. However, display none element will not take any space whereas visibility hidden will not be shown on the page but will keep it's space captured.
I have seen quite a few videos from your site. The way you explained it's just fantastic. You are explain any topic step by step and they are easy to understand. Thank you:)
One thing might need to point out is a position:relative element might not always targets its "parent element", instead it targets the first parent element which is not position:static.
If all you need to do is align the inner box *horizontally* (the most common use case), a much easier way to do it would be set the left and right margins to "auto."
Great video! If possible, would you add timestamps for each question for other videos too? I can do it in comments, but it'd be helpful when I want to rewatch these videos. Thank you. 3:37 What is specificity?
You've made a mistake with explaining how position absolute works. Position absolute is not relative to the parent but to closest ancestor with position relative or fixed, and that is super important.
I really liked this video because I learned a few things and I already knew one of your questions which sort of boosted my confidence. I also had some general idea of most of it but I can't say I knew everything at all. great video
Great video, it's fundamentals that we sometimes give for granted and after a while we kind of forget how to explain properly : ) also very informative for beginners.
The common theme with interview questions seems to be "I already knew what this was, but I didn't know it was called this way, so I wouldn't be able to answer.".
Yes, sometimes its genuine sometimes it not. One time I was asked do you know SPA, and i said i don't what is it. And the interview said how can you call yourself a modern webdev without knowing SPA. Then i ask BTW what is SPA? and he said Single Page Application. I said ofcorse i know what that is. :)
Could you list in the "show more" section what editor you use? I have been trying to put this in Brackets and do not get the green box, so I switched to codepen: .out { width: 400px; height: 400px; background-color:yellow; position: relative; } .in{ width: 100px; height: 100px; background-color: green; } But it would be great to know how to make it work in Brackets.
9:39 - how come this "old, good CSS"? "transform" is supported in IE only since the 9th version. I know, I know, it was released about 9 years ago already, but I start to believe now that those older donkey versions are truly everlasting.
For centering a div inside a div, you can use two more simple methods: Note: css only apply for out div (parent div) 1. display: flex; justify-content: center; align-items: center; 2. display: grid; place-items: center;
Specificity: The resolve of conflicting values in the parsing stage of CSS. The most specific style with the highest value will be chosen. (inline style, ID, Classes, Elements) (0,0,0,0) Wonder why we call it Cascade :D Importance > specificity > Source Order
@Techsith - Box-sizing includes only padding and border.Not margin.I think you said box-sizing will fix margin as well.Margin is never included in height and width of element.I tried this , please let me know if I am right.
I'm new to CSS (like 2 weeks old as of this writing) so I only got the first three questions right lol. Thank you for posting this! It shows me that I'm making progress, although I have a long way to go :) #iSubscribed
I know that margin is the space in between elements: what is the difference between margin and gutter? I know when you refer to liquid layouts the space on the far left and right are called the gutter but now that the grid system is the preferred layout system to know I see gutter defined as the space in between columns... but wouldn't you still use margin: __px; in the CSS? I dont know if this question made any sense but I had to ask. Thanks!
Brother techsith is very smart and beautiful. I am really impressed by his videos. I was feeling love for him. As the song says, Jab kisi say pyaar kero tu phir izhaar keroo, (i.e. when you feel love for someone, show the love by kissing), sorry my english is poor. Thank you. Love for all.
by default absolute position is relative to the document body, but when a parent element has a position of relative then the absolute positioned element is position relative to that.
I think there is a mistake on the border box explanation: You said the border is part of the content in border-box modell... thats true but also the padding is part of the content: So your content is not 60px x 60px it is 40px x 40px because you have the padding left and right each of 10 pixels. Tell me if i am wrong
border-box allows you to not change the content. so your content stays the same while your border increasing. Padding is different. border-box only deals with borders and content.
Fix is fixed relative to the top parent and absolute is relative to its relative parent. that is why absolute elements would move with its relative parent. But fixed element would stay it place when you scroll the page vertically
While aligning div inside another div.. I have 2 question [1] Why you use display:relative in outer div and display:absolute in inner div... how outer div position property affect inner div position means how they are related to each other because in absolute box positioned wrt its parent. [2] what if we use only display:relative in inner div and is there any issue in using this ??
elements that are position absolute they need a reference point and by making the parent position relative you are providing that reference point. 2) you could use position relative for inner div but it would behave completely differently in lots of cases. becase position relative means relative to its original position no the parent . I have a tutorial on position property that you can check it out which explains all the position types in detail.
0:40 - What is box model?
3:30 - What is specificity?
6:51 - How to align a block element inside another element?
10:11 - Difference between Static, Relative, Absolute and Fixed position?
13:28 - Difference between visibility:hidden; and display:none;
Thanks for the comment and detail break down.
For centering with even simpler CSS, you can use "top:0; left:0; bottom:0; right:0; margin:auto;" instead of translate.
thanks for this
margin: 0 auto; Is optimal.
@@magburner but only for horizontal centering and the element has to be displayed as block
Position: relative?
Absolute but parent's position as relative
13:29 Difference between visibility:hidden; and display:none;
I think that the best way to show the difference between this properties is creating a stack of three divs, for example:
one
two
three
div {
margin: 20px;
width: 200px;
height: 50px;
background-color: #4477FF;
}
Then play with the properties of div.two
.two {
visibility: hidden;
/*display: none;*/
}
I have attended one interview mostly they asked about javascript as ur teaching now.. This video helped me a lots guys highly recommended to this Sir all videos
I am glad it helped. Thaank you for watching!
Both visibility and display elements will be three at DOM. However, display none element will not take any space whereas visibility hidden will not be shown on the page but will keep it's space captured.
yes correct. Both will get rendered in page. but display none will not take any space and visibility hidden will take it
This is a very good tutorial. Although I've doing this for years, answering these questions in an interview can be difficult. Thanks!
It is a great way to focus on these important problems after all kinds of practices myself. Thank you!
difference between inline and inline-block is also an important one.
at 2:59
box-sizing: border-box means it includes padding as well , so width becomes 40px , not 60px
Display:none elements still exists in the DOM, they just don't occupy space in the render
True.
Yeah but display:none doesn't exist in CSSOM
I have seen quite a few videos from your site. The way you explained it's just fantastic. You are explain any topic step by step and they are easy to understand. Thank you:)
glad you like it. Thanks for watching.
One thing might need to point out is a position:relative element might not always targets its "parent element", instead it targets the first parent element which is not position:static.
Why is this comment liked so much, it is wrong...
If all you need to do is align the inner box *horizontally* (the most common use case), a much easier way to do it would be set the left and right margins to "auto."
yep that is the best way. thanks for sharing.
Great video! If possible, would you add timestamps for each question for other videos too? I can do it in comments, but it'd be helpful when I want to rewatch these videos. Thank you.
3:37 What is specificity?
You've made a mistake with explaining how position absolute works. Position absolute is not relative to the parent but to closest ancestor with position relative or fixed, and that is super important.
I really liked this video because I learned a few things and I already knew one of your questions which sort of boosted my confidence. I also had some general idea of most of it but I can't say I knew everything at all. great video
Great video, it's fundamentals that we sometimes give for granted and after a while we kind of forget how to explain properly : ) also very informative for beginners.
Thanks for watching Sergi !
Greatest teacher ever with solid concepts
Abhinav thanks for an awesome comment!
Even if the element is set as display:none, the element is still in DOM because the clone() can make effects.
Sir bohat acha video hai. Very informative. Thanks
regarding middle of any element you can use margin : -boxHeight/2 with absolute property rather then translate
Dude you're literally helping me for my interview tomorrow. Thank you so much!!
DB were you asked any of this questions ?
Really precise and shading light off all the confusion. Thanks!
glad to help. Thanks for watching! I am planning to make more of such videos.
Getting refreshed for the interview got easy
Thanks for watching!
The common theme with interview questions seems to be "I already knew what this was, but I didn't know it was called this way, so I wouldn't be able to answer.".
Yes, sometimes its genuine sometimes it not. One time I was asked do you know SPA, and i said i don't what is it. And the interview said how can you call yourself a modern webdev without knowing SPA. Then i ask BTW what is SPA? and he said Single Page Application. I said ofcorse i know what that is. :)
Could you list in the "show more" section what editor you use? I have been trying to put this in Brackets and do not get the green box, so I switched to codepen:
.out {
width: 400px;
height: 400px;
background-color:yellow;
position: relative;
}
.in{
width: 100px;
height: 100px;
background-color: green;
}
But it would be great to know how to make it work in Brackets.
awesome collection of interviews....going through actual interviews, these questions do come up
9:39 - how come this "old, good CSS"?
"transform" is supported in IE only since the 9th version.
I know, I know, it was released about 9 years ago already, but I start to believe now that those older donkey versions are truly everlasting.
.out {
display: flex;
width: 400px;
height: 400px;
background-color: #000;
justify-content: center;
align-items:center
}
.inner {
width: 100px;
height: 100px;
background-color: #ccc;
}
Thank you, Greatly knowledgeable instructor, and clear very useful tutorial, Thank so much for taking the time to help others.
I am glad that it helped. Thanks for watching!
Super helpful video, thank you!
Such a great and valuable explanations.
Thank you so much
Glad it was helpful!
For centering a div inside a div, you can use two more simple methods:
Note: css only apply for out div (parent div)
1. display: flex;
justify-content: center;
align-items: center;
2. display: grid;
place-items: center;
Specificity: The resolve of conflicting values in the parsing stage of CSS. The most specific style with the highest value will be chosen.
(inline style, ID, Classes, Elements)
(0,0,0,0)
Wonder why we call it Cascade :D
Importance > specificity > Source Order
@Techsith - Box-sizing includes only padding and border.Not margin.I think you said box-sizing will fix margin as well.Margin is never included in height and width of element.I tried this , please let me know if I am right.
I'm new to CSS (like 2 weeks old as of this writing) so I only got the first three questions right lol. Thank you for posting this! It shows me that I'm making progress, although I have a long way to go :) #iSubscribed
three questions for a newbie is pretty good. keep up the good work.
Great info. I really enjoy these 'interview question' tuts.
One important thing about visibility hidden - you can still make child element visible by setting visibility: visible;
I really like your videos. It's Very very helpful your tutorial for beginners
thank you so much for all of the videos I am learning a lot while preparing for interview.
Great video. Helps me figure out what sections I need to focus on.
You're the best on the web
Thanks Tyler for watching and a nice comment :)
Nice one Hemil Patel
Thank you, it's really nice video....
Very good, and informative!
Thank you very much for helping the community!
Thanks for watching!
This is realy so helpful, thank you.
what is text editor you use
All the questions are very important..thanks
Thank you so much!!! Can you make videos on Angular or recommend some one to learn it or Interview questions!!!
Good tuts! but can be defined position static usage as well.
static position is default. means don't use position property. Just follow the natural flow.
Aha, that`s exactly is a default position! I meant was static position can be used to override absolute impact within a parent element.
Very helpful and nice, even delivery by teacher
Thanks for that I really learn a lot from this😍
My pleasure 😊
awesome video....
helpful video.. keep up the good work!
awesome questions ...helped me v much..
Which code editing tool/editor are you on sir
You could have gotten away with relative positioning in that inner box and absolute (default) in the outer box. I just tested it.
Yep that is right. thanks for the suggestion! :)
will be awaiting for future lecture
this is a good tutorial and funny as well thank you
very helpful video... thanks a lot sir!!!
I know that margin is the space in between elements: what is the difference between margin and gutter? I know when you refer to liquid layouts the space on the far left and right are called the gutter but now that the grid system is the preferred layout system to know I see gutter defined as the space in between columns... but wouldn't you still use margin: __px; in the CSS?
I dont know if this question made any sense but I had to ask. Thanks!
I believe gutter seems to do essentially the same thing as setting an inside margin. But dont quote me on that.
Thanks this was super helpful!!
Julie, I am glad it was helpful. Thanks for watching!
btw, just liked this video because of the video picture alone. +1 for the memes XD
Flexbox IS plain CSS.
Only a Sith Lord deals with absolute positioning.
Wonderful teaching
awesome once again 👍
/* centering
1/
position: relative // parent
position: absolute; // child
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
2/
display: flex; // parent
margin: auto; // child
3/ // parent
display: flex;
justify-content: center;
align-items: center;
4/ // parent
display: grid;
place-items: center
5/ centering text
width: 500px; // parent width and height (not necessarily)
height: 500px;
text-align: center; // child
line-height: 500px; // line-height should be as high as the parent height
6/
position: relative; // parent
position: absolute; // child
left:50%;
top:50%;
transform: translate(-50%,-50%);
*/let's know how you center things !
You are the best indian guy on youtube
Extremely useful info :)
Great Explaination.
what is the editor u r using
A great explication of basic CSS principals that even experts can learn from!
Thanks for watching and nice comment Adam :)
very usefull
Ton of thanks
Hi Techsith, From where did you buy your chair?
Brother techsith is very smart and beautiful. I am really impressed by his videos. I was feeling love for him. As the song says, Jab kisi say pyaar kero tu phir izhaar keroo, (i.e. when you feel love for someone, show the love by kissing), sorry my english is poor. Thank you. Love for all.
Saleem, thanks for the kind comment. Love from techsith
What software has he put on the display at 0:39 ?
That is JS fiddle.
Which website are you coding on? It looks pretty amazing IDE
Sir will you please make a tutorial on accessibility in web.Please sir it will be so helpful.Thank you sir.You are awesome.
Sir, What is the IDE you used in the video?
JSFiddle
Thanks ...very useful...!!!
Thanks for watching!
I too forgot to mention border of the box model in my very first ui interview. 😅
Yes, that is a very common question for a junior front-end interview. I too did get that question .
Isn't absolute positioning relative to the first non-static positioned parent element?
by default absolute position is relative to the document body, but when a parent element has a position of relative then the absolute positioned element is position relative to that.
Hello sir..Please make a tutorial on css flexbox..
can i know what app you are using?
thanks
This is a very useful video. Very nice explaination
which API you are using
Hi,
left:calc(50%-(width/2));
top:calc(50%-(height/2));
did the same thing instead of transform ??
But what if width or height is not fixed? such as width: 50%?
I think there is a mistake on the border box explanation:
You said the border is part of the content in border-box modell... thats true but also the padding is part of the content:
So your content is not 60px x 60px it is 40px x 40px because you have the padding left and right each of 10 pixels.
Tell me if i am wrong
border-box allows you to not change the content. so your content stays the same while your border increasing. Padding is different. border-box only deals with borders and content.
Thanks for this :)
Do you have a Udemy course too
Oliver, I am going to create a udemy course in the first part of the 2019 . Will announce it . Thanks for watching!
@@Techsithtube is your udemy course up ? do you have any udemy course for angular also ?
what's the editor used to explain the examples?
I usually use jsfiddle
Question 1 => Shouldn't the content be 40px*40px and not 60px×60px as there is also padding of 10px?
Yes, of course
display:none , With this elements will still be there at DOM, Its just that it does not take the space
so then what is the difference between fix and absolute (does absolute take into account the parent and fix does not? )
Fix is fixed relative to the top parent and absolute is relative to its relative parent. that is why absolute elements would move with its relative parent. But fixed element would stay it place when you scroll the page vertically
While aligning div inside another div.. I have 2 question [1] Why you use display:relative in outer div and display:absolute in inner div... how outer div position property affect inner div position means how they are related to each other because in absolute box positioned wrt its parent. [2] what if we use only display:relative in inner div and is there any issue in using this ??
elements that are position absolute they need a reference point and by making the parent position relative you are providing that reference point. 2) you could use position relative for inner div but it would behave completely differently in lots of cases. becase position relative means relative to its original position no the parent . I have a tutorial on position property that you can check it out which explains all the position types in detail.
Thank You ... you are doing a great job
Clear and comrehensive
But then, what's the response for ''display: none'' if it doesn't exist in the document?
Sir which editor r u using?? I'm using webstorm but it's seems to be easy and accuracy..
Use vscode its very good