Top 10 css interview questions and answers

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.

[@paullujan4719]

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;

[@Techsithtube]

Thanks for the comment and detail break down.

[@preethips1628]

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

[@Techsithtube]

I am glad it helped. Thaank you for watching!

[@surajitdas6555]

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.

[@nirajbhutada6308]

yes correct. Both will get rendered in page. but display none will not take any space and visibility hidden will take it

[@RankMotion]

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;*/ }

[@KrishnaDasPC]

difference between inline and inline-block is also an important one.

[@biyasbanerjee7288]

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:)

[@Techsithtube]

glad you like it. Thanks for watching.

[@LiseFracalossi]

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."

[@Techsithtube]

yep that is the best way. thanks for sharing.

[@jezykkk]

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.

[@ganeshshetty8441]

at 2:59 box-sizing: border-box means it includes padding as well , so width becomes 40px , not 60px

[@facundocorradini]

Display:none elements still exists in the DOM, they just don't occupy space in the render

[@jesuskraisnik]

True.

[@awekeningbro1207]

Yeah but display:none doesn't exist in CSSOM

[@davidcraft4909]

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

[@dark-matter-tek]

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?

[@facundocorradini]

For centering with even simpler CSS, you can use "top:0; left:0; bottom:0; right:0; margin:auto;" instead of translate.

[@funanytime8843]

thanks for this

[@magburner]

margin: 0 auto; Is optimal.

[@amaury_permer]

@@magburner but only for horizontal centering and the element has to be displayed as block

[@itech40]

Position: relative?

[@amaury_permer]

Absolute but parent's position as relative

[@ruchirai5775]

@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.

[@sergi3629]

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.

[@Techsithtube]

Thanks for watching Sergi !

[@shawnmofid7131]

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.

[@ahmer9800]

Dude you're literally helping me for my interview tomorrow. Thank you so much!!

[@munirapatel6270]

DB were you asked any of this questions ?

[@ozzyfromspace]

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

[@Techsithtube]

three questions for a newbie is pretty good. keep up the good work.

[@abhinavtyagi7233]

Greatest teacher ever with solid concepts

[@Techsithtube]

Abhinav thanks for an awesome comment!

[@clydencube384]

Really precise and shading light off all the confusion. Thanks!

[@Techsithtube]

glad to help. Thanks for watching! I am planning to make more of such videos.

[@flyingbirds4235]

Sir bohat acha video hai. Very informative. Thanks

[@Obyvvatel]

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.".

[@Techsithtube]

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. :)

[@naruto5437]

awesome collection of interviews....going through actual interviews, these questions do come up

[@mehtabmultani3194]

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;

[@ManOnHorizon]

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.

[@mohideenasraf7837]

Hi, left:calc(50%-(width/2)); top:calc(50%-(height/2)); did the same thing instead of transform ??

[@sten6160]

But what if width or height is not fixed? such as width: 50%?

[@MANISHSHARMA-xk1su]

awesome video....

[@VirtuozEd]

Such a great and valuable explanations. Thank you so much

[@Techsithtube]

Glad it was helpful!

[@wandat6353]

Super helpful video, thank you!

[@LuisDiaz-qg3eg]

You could have gotten away with relative positioning in that inner box and absolute (default) in the outer box. I just tested it.

[@Techsithtube]

Yep that is right. thanks for the suggestion! :)

[@ganeshshetty8441]

Nice one Hemil Patel

[@onkaryerawar99]

Question 1 => Shouldn't the content be 40px*40px and not 60px×60px as there is also padding of 10px?

[@dvnarxx]

Yes, of course

[@SaleemRaza1]

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.

[@Techsithtube]

Saleem, thanks for the kind comment. Love from techsith

[@MrVisheshsingh]

Thank you very much for helping the community!

[@Techsithtube]

Thanks for watching!

[@mstalcup]

Flexbox IS plain CSS.

[@RaviShankar-so9xp]

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 ??

[@Techsithtube]

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.

[@RaviShankar-so9xp]

Thank You ... you are doing a great job

[@hakanbakur]

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

[@Techsithtube]

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.

[@RajuYadav-ws2zy]

Thank you, it's really nice video....

[@tyler13923]

You're the best on the web

[@Techsithtube]

Thanks Tyler for watching and a nice comment :)

[@hamzarahouti5147]

what is text editor you use

[@lambar0]

Clear and comrehensive

[@theartist8835]

/* 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 !

[@smoothbeak]

Only a Sith Lord deals with absolute positioning.

[@adilzamal3218]

will be awaiting for future lecture

[@ryanmac4051]

btw, just liked this video because of the video picture alone. +1 for the memes XD

[@sourishdutta9600]

Sir will you please make a tutorial on accessibility in web.Please sir it will be so helpful.Thank you sir.You are awesome.

[@MTGpackopeners]

this is a good tutorial and funny as well thank you

[@SushilYadav7]

I too forgot to mention border of the box model in my very first ui interview. 😅

[@Techsithtube]

Yes, that is a very common question for a junior front-end interview. I too did get that question .

[@deepshikhasahni5190]

awesome questions ...helped me v much..

[@dodo9670]

You are the best indian guy on youtube

[@zko5906]

Qs 3: .out { display: flex; justify-content: center; align-items: center; }

[@jackwright7014]

Try place-items: center. Its a shorthand for justify-content and align-items. 😁

[@AjayKumar-id7mb]

Which compiler he is using ??

[@princejaiswal439]

Hello sir..Please make a tutorial on css flexbox..

[@sanketatmaram]

Great Explaination.

Good content

[@Billy011nb]

Thanks this was super helpful!!

[@Techsithtube]

Julie, I am glad it was helpful. Thanks for watching!

[@ibrahimshaikh3642]

Nice

[@ChristianCanlubo]

Thanks for this :)

[@gamer4lifetn366]

can you please tell me what is meta ??

[@alexbrasovan]

Isn't absolute positioning relative to the first non-static positioned parent element?

[@williamtitterton818]

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.

[@tentx652]

awesomeee

[@Schlohmotion]

What software has he put on the display at 0:39 ?

[@Techsithtube]

That is JS fiddle.

[@yaolegoleynik]

Thank you

[@naveennaidu8285]

Useful video

[@bhaskardharamsoth7043]

great

[@invisiblestar6146]

Which editor is it???

[@Techsithtube]

This is JS Fiddle

[@swamyrakurthi]

which editor are you using, please tell me any one

[@MadhurjyaBora]

looks like jsfiddle. it's an online editor

[@SoorajJose1]

Very useful

[@vijayalakshmi6028]

what's the editor used to explain the examples?

[@Techsithtube]

I usually use jsfiddle

[@OliverJoshuaJacob]

Do you have a Udemy course too

[@Techsithtube]

Oliver, I am going to create a udemy course in the first part of the 2019 . Will announce it . Thanks for watching!

[@vismitha_world_]

@@Techsithtube is your udemy course up ? do you have any udemy course for angular also ?

[@mexs8378]

What's that ide?

[@LawZist]

very good tuts!

[@Techsithtube]

Thanks for watching! :)

[@vijayu707]

Good Video

[@Techsithtube]

Thanks fro watching! :)

[@ganeshshetty8441]

display:none , With this elements will still be there at DOM, Its just that it does not take the space

[@kandysman86]

I feel im ready for html css. Maybe not js yet

[@dvnarxx]

If you think you know html and css, you don't know html and css

[@theabhishekmittal]

your editor is very nice.. whats the name?

[@dheeraj9179]

abhishek mittal code pen also does great

[@avr9066]

it helped :)

[@Techsithtube]

Thanks for watching :)

[@DaveCollison]

When making videos about CSS, please use a de-esser on your audio lol

[@Techsithtube]

lol point noted!

[@wyattlastname477]

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.

[@Techsithtube]

the Ads I cant control. I think youtube has gone bit far in putting longer ads on my channel .

[@abdullahkhushi9006]

Name of IDE that you use in your video.

[@Techsithtube]

I use JS FIddle.

[@gajanandkumar7274]

Sublime text editor

[@soultouchingsongs]

Very useful.. 👍

[@Techsithtube]

thanks for watching! :)

[@alfredaidoo4081]

Please what is the name of this text editor?

[@Techsithtube]

Its not a text editor. its jsfiddle an online code playground.

[@alfredaidoo4081]

Thank you

[@hotshots149]

Babe of the text editor?

[@munachimarcel869]

how can i get job with html and css

[@Techsithtube]

these days you can become designer/component developer, that is the best way to get job in html css.

[@gerardbautista7586]

Interviewer: asks tgose questions Me thinking: ooohhh...yea.....I thought he was just gonna ask me to tell something about myself, I'm dead

[@Techsithtube]

:)

[@joyandlove7710]

It is a great way to focus on these important problems after all kinds of practices myself. Thank you!

[@divyanshugarg4376]

Thank you nice video, really helpful. Appreciate!

[@MagiCityProductions]

This is a very good tutorial. Although I've doing this for years, answering these questions in an interview can be difficult. Thanks!

[@xiazhai8337]

Even if the element is set as display:none, the element is still in DOM because the clone() can make effects.

[@harshshah2675]

Why dont college's have a professor like u ?

[@jogindervskiller]

regarding middle of any element you can use margin : -boxHeight/2 with absolute property rather then translate

[@narangarig6434]

.out { display: flex; width: 400px; height: 400px; background-color: #000; justify-content: center; align-items:center } .inner { width: 100px; height: 100px; background-color: #ccc; }

[@arthur6892]

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.

[@thatoneuser8600]

Why is this comment liked so much, it is wrong...

[@surajgulhane6112]

Nice video

[@sanchit5764]

Getting refreshed for the interview got easy

[@Techsithtube]

Thanks for watching!

[@ga7853]

Thank you, Greatly knowledgeable instructor, and clear very useful tutorial, Thank so much for taking the time to help others.

[@Techsithtube]

I am glad that it helped. Thanks for watching!

[@azeemrahman3509]

Which code editing tool/editor are you on sir

[@kkch980]

can i know what app you are using? thanks

[@Primeto]

no yes

[@beautieshelp5973]

Wonderful teaching