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;*/ }
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 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
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.
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.
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."
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.
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.
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:)
@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.
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?
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
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;
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
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. :)
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.
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!
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.
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
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.
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
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.
![Interview Questions That Every Front End Web Developer Should Know[HTML/CSS]](http://i.ytimg.com/vi/CSwC4HGMJCM/mqdefault.jpg)
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;*/
}
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
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!
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
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...
This is a very good tutorial. Although I've doing this for years, answering these questions in an interview can be difficult. Thanks!
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
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.
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.
It is a great way to focus on these important problems after all kinds of practices myself. Thank you!
regarding middle of any element you can use margin : -boxHeight/2 with absolute property rather then translate
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.
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.
Even if the element is set as display:none, the element is still in DOM because the clone() can make effects.
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.
@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.
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?
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
.out {
display: flex;
width: 400px;
height: 400px;
background-color: #000;
justify-content: center;
align-items:center
}
.inner {
width: 100px;
height: 100px;
background-color: #ccc;
}
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;
Sir bohat acha video hai. Very informative. Thanks
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
Greatest teacher ever with solid concepts
Abhinav thanks for an awesome comment!
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. :)
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 !
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.
Nice one Hemil Patel
Dude you're literally helping me for my interview tomorrow. Thank you so much!!
DB were you asked any of this questions ?
/* 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 !
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%?
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! :)
One important thing about visibility hidden - you can still make child element visible by setting visibility: visible;
Question 1 => Shouldn't the content be 40px*40px and not 60px×60px as there is also padding of 10px?
Yes, of course
awesome collection of interviews....going through actual interviews, these questions do come up
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.
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
Super helpful video, thank you!
Such a great and valuable explanations.
Thank you so much
Glad it was helpful!
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!
What software has he put on the display at 0:39 ?
That is JS fiddle.
Getting refreshed for the interview got easy
Thanks for watching!
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.
Thank you so much!!! Can you make videos on Angular or recommend some one to learn it or Interview questions!!!
Great info. I really enjoy these 'interview question' tuts.
Qs 3: .out {
display: flex;
justify-content: center;
align-items: center;
}
Try place-items: center. Its a shorthand for justify-content and align-items. 😁
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 is text editor you use
thank you so much for all of the videos I am learning a lot while preparing for interview.
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.
btw, just liked this video because of the video picture alone. +1 for the memes XD
You're the best on the web
Thanks Tyler for watching and a nice comment :)
Flexbox IS plain CSS.
Great video. Helps me figure out what sections I need to focus on.
I really like your videos. It's Very very helpful your tutorial for beginners
Which code editing tool/editor are you on sir
Very good, and informative!
awesome video....
Thanks for that I really learn a lot from this😍
My pleasure 😊
Thank you very much for helping the community!
Thanks for watching!
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.
Sir which editor r u using?? I'm using webstorm but it's seems to be easy and accuracy..
Use vscode its very good
But then, what's the response for ''display: none'' if it doesn't exist in the document?
helpful video.. keep up the good work!
Only a Sith Lord deals with absolute positioning.
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
display:none , With this elements will still be there at DOM, Its just that it does not take the space
Very helpful and nice, even delivery by teacher
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.
hey techsith..can u help me to create imageslider using html css javascript or jquery inwhich 3 or 4 pages slide at a time..urgently needed...
can you explain in detail? Image slider with pages?
Thank you, it's really nice video....
will be awaiting for future lecture
All the questions are very important..thanks
A great explication of basic CSS principals that even experts can learn from!
Thanks for watching and nice comment Adam :)
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
Hi Techsith, From where did you buy your chair?
Which website are you coding on? It looks pretty amazing IDE
This is realy so helpful, thank you.
awesome once again 👍
awesome questions ...helped me v much..
very helpful video... thanks a lot sir!!!
this is a good tutorial and funny as well thank you
Sir as u have spoken All divs are already in position static .if it is already in static than why it has been given and where it is used?why we used?
Tahsin, you need default behavior for each element and you can change as you go.
What program you use in this video?
JSfiddle.net
which editor are you using, please tell me any one
looks like jsfiddle. it's an online editor
what is the editor u r using
This is a very useful video. Very nice explaination
what's the editor used to explain the examples?
I usually use jsfiddle
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 .
Extremely useful info :)
can i know what app you are using?
thanks
Thanks this was super helpful!!
Julie, I am glad it was helpful. Thanks for watching!
Great Explaination.
Hello sir..Please make a tutorial on css flexbox..
Nice one
Wonderful teaching
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 ?