Top 10 css interview questions and answers
HTML-код
- Опубликовано: 1 окт 2024
- Top 10 commonly asked CSS interview questions and possible answers for front-end programmers.
#css #interview #questions
For more interview questions checkout
*www.fullstack....
*My Udemy Courses
www.udemy.com/...
www.udemy.com/...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* www.youtube.co...
Note: use translate.goog... to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.
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.
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!
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
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
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.
Flexbox IS plain CSS.
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.
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
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;*/
}
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.
.out {
display: flex;
width: 400px;
height: 400px;
background-color: #000;
justify-content: center;
align-items:center
}
.inner {
width: 100px;
height: 100px;
background-color: #ccc;
}
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.
Why dont college's have a professor like u ?
@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.
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.
Even if the element is set as display:none, the element is still in DOM because the clone() can make effects.
at 2:59
box-sizing: border-box means it includes padding as well , so width becomes 40px , not 60px
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?
awesome video....
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
Sir bohat acha video hai. Very informative. Thanks
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.
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 !
regarding middle of any element you can use margin : -boxHeight/2 with absolute property rather then translate
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 .
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 nice video, really helpful. Appreciate!
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...
Question 1 => Shouldn't the content be 40px*40px and not 60px×60px as there is also padding of 10px?
Yes, of course
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%?
Nice video
Super helpful video, thank you!
Only a Sith Lord deals with absolute positioning.
Getting refreshed for the interview got easy
Thanks for watching!
what is text editor you use
Thank you, it's really nice video....
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!
Such a great and valuable explanations.
Thank you so much
Glad it was helpful!
display:none , With this elements will still be there at DOM, Its just that it does not take the space
/* 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 !
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
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! :)
Nice
Dude you're literally helping me for my interview tomorrow. Thank you so much!!
DB were you asked any of this questions ?
Thank you so much!!! Can you make videos on Angular or recommend some one to learn it or Interview questions!!!
Which website are you coding on? It looks pretty amazing IDE
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.
I really like your videos. It's Very very helpful your tutorial for beginners
Thanks for that I really learn a lot from this😍
My pleasure 😊
muze website design karwana he
9673075662
btw, just liked this video because of the video picture alone. +1 for the memes XD
Good content
Sir, What is the IDE you used in the video?
JSFiddle
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.
can i know what app you are using?
thanks
Wonderful teaching
Which code editing tool/editor are you on sir
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.
which API you are using
Over acting speaking jahil aadme
Very good, and informative!
can you please tell me what is meta ??
no yes
Which compiler he is using ??
Clear and comrehensive
But then, what's the response for ''display: none'' if it doesn't exist in the document?
Which editor is it???
This is JS Fiddle
Hi Techsith, From where did you buy your chair?
Interviewer: asks tgose questions
Me thinking: ooohhh...yea.....I thought he was just gonna ask me to tell something about myself, I'm dead
:)
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
Qs 3: .out {
display: flex;
justify-content: center;
align-items: center;
}
Try place-items: center. Its a shorthand for justify-content and align-items. 😁
what is the editor u r using
Nice one
what ide is he using !!??
Thank you sir.
Nice one Hemil Patel
Greatest teacher ever with solid concepts
Abhinav thanks for an awesome comment!
One important thing about visibility hidden - you can still make child element visible by setting visibility: visible;
The ads are relentless. 2 minutes, 35 seconds, can't be skipped at all. Cut down on those, your videos are great otherwise, but the hefty ads make it so I don't even think I can finish the whole thing. They're cutting into the middle of the video too.
the Ads I cant control. I think youtube has gone bit far in putting longer ads on my channel .
This is realy so helpful, thank you.
What's that ide?
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.
helpful video.. keep up the good work!
Thanks for this :)
awesomeee
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 so much for all of the videos I am learning a lot while preparing for interview.
great
Done
You're the best on the web
Thanks Tyler for watching and a nice comment :)
When making videos about CSS, please use a de-esser on your audio lol
lol point noted!
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 ?
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.
Sir will you please make a tutorial on accessibility in web.Please sir it will be so helpful.Thank you sir.You are awesome.
Thank you very much for helping the community!
Thanks for watching!
What software has he put on the display at 0:39 ?
That is JS fiddle.