Top 10 css interview questions and answers

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

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

[@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!

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

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

[@MagiCityProductions]

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

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

[@joyandlove7710]

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

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

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

[@KrishnaDasPC]

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

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

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

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

[@ganeshshetty8441]

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

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

[@ganeshshetty8441]

Nice one Hemil Patel

[@abhinavtyagi7233]

Greatest teacher ever with solid concepts

[@Techsithtube]

Abhinav thanks for an awesome comment!

[@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 !

[@ahmer9800]

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

[@munirapatel6270]

DB were you asked any of this questions ?

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

[@hamzarahouti5147]

what is text editor you use

[@jogindervskiller]

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

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

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

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

[@azeemrahman3509]

Which code editing tool/editor are you on sir

[@MANISHSHARMA-xk1su]

awesome video....

[@MohsinKhan-nx2pj]

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

[@flyingbirds4235]

Sir bohat acha video hai. Very informative. Thanks

[@xiazhai8337]

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

[@naruto5437]

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

[@tyler13923]

You're the best on the web

[@Techsithtube]

Thanks Tyler for watching and a nice comment :)

[@kamaboko1]

Great info. I really enjoy these 'interview question' tuts.

[@VirtuozEd]

Such a great and valuable explanations. Thank you so much

[@Techsithtube]

Glad it was helpful!

[@sanchit5764]

Getting refreshed for the interview got easy

[@Techsithtube]

Thanks for watching!

[@Schlohmotion]

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

[@Techsithtube]

That is JS fiddle.

[@uddhavdudhate5791]

I really like your videos. It's Very very helpful your tutorial for beginners

[@stevencraigmoss8031]

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!

[@Techsithtube]

I believe gutter seems to do essentially the same thing as setting an inside margin. But dont quote me on that.

[@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!

[@EktaMishraekta]

what is the editor u r using

[@wandat6353]

Super helpful video, thank you!

[@leafdragon94]

Great video. Helps me figure out what sections I need to focus on.

[@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;

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

[@saurabhkacholiya]

thank you so much for all of the videos I am learning a lot while preparing for interview.

[@MuhammadIrfanQureshi]

Good tuts! but can be defined position static usage as well.

[@Techsithtube]

static position is default. means don't use position property. Just follow the natural flow.

[@MuhammadIrfanQureshi]

Aha, that`s exactly is a default position! I meant was static position can be used to override absolute impact within a parent element.

[@amanvyas9480]

Thanks for that I really learn a lot from this😍

[@Techsithtube]

My pleasure 😊

[@eatcoderepeat]

helpful video.. keep up the good work!

[@PROLAYNATH]

This is realy so helpful, thank you.

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

[@Joel.Invictus]

Very good, and informative!

[@Chetan.Kothari]

Thank you so much!!! Can you make videos on Angular or recommend some one to learn it or Interview questions!!!

[@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; }

[@Ahmed-lc2mu]

which API you are using

[@ryanmac4051]

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

[@MrVisheshsingh]

Thank you very much for helping the community!

[@Techsithtube]

Thanks for watching!

[@pawandeepchor89]

awesome once again 👍

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

[@RajuYadav-ws2zy]

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

[@joegreen6209]

Very helpful and nice, even delivery by teacher

[@kkch980]

can i know what app you are using? thanks

[@sagarkumar4816]

All the questions are very important..thanks

[@adilzamal3218]

will be awaiting for future lecture

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

[@itscodebot]

Hi Techsith, From where did you buy your chair?

[@deepshikhasahni5190]

awesome questions ...helped me v much..

[@beautieshelp5973]

Wonderful teaching

[@sanketatmaram]

Great Explaination.

[@stevencraigmoss8031]

so then what is the difference between fix and absolute (does absolute take into account the parent and fix does not? )

[@Techsithtube]

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

[@clydencube384]

But then, what's the response for ''display: none'' if it doesn't exist in the document?

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

[@shaquibkhan9829]

Extremely useful info :)

[@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%?

[@kanuparthisailikhith]

Which website are you coding on? It looks pretty amazing IDE

[@HaralaMasli]

Thanks this was super helpful!!

[@Techsithtube]

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

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

[@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 !

[@alex6285]

One important thing about visibility hidden - you can still make child element visible by setting visibility: visible;

[@tahsinraza9388]

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?

[@Techsithtube]

Tahsin, you need default behavior for each element and you can change as you go.

[@joydevmaity1194]

very helpful video... thanks a lot sir!!!

[@lambar0]

Clear and comrehensive

[@AjayKumar-id7mb]

Which compiler he is using ??

[@RahulSingh-hi5fs]

Nice one

[@surajgulhane6112]

Nice video

[@MTGpackopeners]

this is a good tutorial and funny as well thank you

[@ajaykumarn7654]

Sir, What is the IDE you used in the video?

[@MichaelPrentice]

JSFiddle

Good content

[@gamer4lifetn366]

can you please tell me what is meta ??

[@adamcrap]

A great explication of basic CSS principals that even experts can learn from!

[@Techsithtube]

Thanks for watching and nice comment Adam :)

[@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]

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

[@Techsithtube]

can you explain in detail? Image slider with pages?

[@swamyrakurthi]

which editor are you using, please tell me any one

[@MadhurjyaBora]

looks like jsfiddle. it's an online editor

[@kinnerasankarapu9635]

Sir which editor r u using?? I'm using webstorm but it's seems to be easy and accuracy..

[@Techsithtube]

Use vscode its very good

[@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! :)

[@arthur6892]

You are awesome!

[@ChristianCanlubo]

Thanks for this :)

[@tentx652]

awesomeee

[@ubaidraza1165]

very usefull Ton of thanks