Tricky CSS Interview Questions and Answers

ladies and gentlemen today we're going to learn about tricky css interview questions i've already made a series on commonly asked css interview questions and their answers but if you really wanted to prepare for css you need to be ready for some tricky ones you need to know these questions that i'm about to show you so welcome to taxi tutorials well usually i like to start with a simpler one but let's start with the trickier one this time so the first question is remove default space between two inline block elements i would suggest stop the video try it out and then look at the answer that i'm about to present you so i have some html and some css and you can see here that there's some space in between sometimes you want to control the space and for that you need to remove it first trick is remove actually space from the actual syntax so if i just remove it like this you would notice that the space kind of goes away but this kind of messes up our formatting so we don't want to do that another way to do it is i can see there about four five pixel gap so if i add some negative margin minus four pixel that would remove it maybe it's less than that maybe it's three pixel right it depends on the font size uh the third way is the reason it's happening is because of the font size as you know so if i made this front font size zero uh by adding a apparent additional element at the top and i'm gonna make the font size equal to zero pixel obviously now my text doesn't get displayed so i have to i have to add uh font size size is i can actually make it 15 and that would remove the space from here so this is another way of doing it all right so here's the next question how to manage z indexes in an app it's an important question it's an abstract question but it's a tricky one if you're not a seasoned css programmer then you probably haven't managed the indexes the way the right way right so by asking this question interviewer would see through you and so you need to be prepared for this answer and if you're not using the indexes right way then you need to start using it so uh i would suggest pause the video think about it and then you can compare your answer with mine for example for this website if i click here this menu shows up so this has a higher stacking order so if i want to define something like this people may do something like this menu z index is 20 and if i have a model which actually goes over everything i can have z index as hundred and if i have header i can have its index to be 10. the only problem with this method is i am hard coding this which is really dangerous and then a lot of people would just do this when something doesn't work if you're using sas i can create variables like this and instead of hard coding like this wherever i'm using this model i can simply use this variable this so this is how i can manage my z index the third thing is you need to keep gap in between just in case if you later on you have to add some other context that goes in between let's say if i'm gonna have something in between these two if i didn't define that with enough space then i have to shuffle all those numbers so instead if i have some a new one coming in let's say i'm going to call it x y z because i don't know the name i can you know have it like this if i have enough space how much space you want to keep is up to you about 25 or 100 okay this next question i included this it's not a tricky question but i included this uh because it's an important one especially nowadays i was asked this question once and i i was caught by surprise and i always thought that this was the job of a designer early in my career but i was so wrong and it's so important to know this as a developer nowadays so the question is how do you plan for accessibility in your css now there is no right or wrong answer what the interviewer trying to find out is do you know this have you used this and what are the some of the common things that you think of when you uh think of accessibility first of all for any given project a specific accessibility plan is designed by product team so they would come up with a idea say oh we're gonna we're gonna follow this particular guide and you can find the checklist for it accessibility coverage is basically you you prepare your website for uh different kind of disabilities whether it's a visual auditory speech and other right and consistency is very important based on that you can when you build when you're building and developing and designing new components at that time you need to think about these things and some of the things would be like a keyboard navigation uh text alternative so if you have images and icons you need to provide alt tags you need to have specif sufficient contrast between your background and your text or images the size of the element the space between them uh the readability of the font size and all that stuff right and that could be so many as i said there's no perfect answer but as long as you can explain few things i think this would be good the next question is give me a use case for using important in your css what are the specific use cases for using this and this is an important one i was asked this couple times and it can get tricky so stop the video think about it and you can compare your answer with mine alright so the answer is avoid using it as much as possible i would say nowadays don't even use it because you can solve this issue by using specificity why do you use important or a lot of people use it they want to overwrite certain behavior or certain style right that is impacted by some other part of the code and they don't understand it because they don't understand the specificity but if you understand the specificity you can design your css based on that to avoid using important and important it basically adds much higher specificity to your element and that's what it does right and also the last thing is don't admit that you use it nowadays uh just say you don't even don't use it at all right even if you using sometimes this is a bad practice and you should not be using it the next question is why would you use the following syntax so here's how dot el.el pause the video think about it and you can compare your answer with mine this is actually answer to the previous question how to increase the specific specificity uh to avoid using important you can there are many different ways to do it but this is one of the ways you can increase the specificity by you know doing this if i have an element all right so here's a great example i have an element with two classes and they both have conflicting styles one has a color blue and another have color green and as you can see the second one is applied because it's following the first one so i have the color green but if i want this element to have precedent if i want the color to be blue i would simply do el and it would become blue because i i increase the specificity by by doing it and the next question is also on specificity i guess specificity is something that is so important and if you don't understand that you don't understand css that's why i'm trying to have more questions on that so the next question is increase specificity of class or id without changing any adding more specificity to the class right you keep as it is but do something with id so that you would lower the specificity of id so just think about it and you can compare your answer with mine so here's an example if i have a div with two with a class and an id and i'm providing conflicting styles for id the color is green and then for class the color is blue now obviously the id has you know has higher specificity because it's an id and then um class that's why it's it's it's green but if i want to change the specificity uh instead of using this syntax i can use attribute syntax where i can say id equal to my id and now uh the color is changed to to blue so this is how you can lower the specificity of id now it's no longer that that id isn't just another attribute so somehow css see it differently okay here's an interesting question the interviewer asks you what is your favorite css resources basically they want to know when you get in trouble or you don't know something how would you find your answer the reason to ask this question is to find out what's your typical method a seasoned engineer would do things differently than somebody who is just a novice right so let's say if you say i usually go to w3school which means you your knowledge of css is pretty basic one person said google one time uh some some people might say stock stack overflow which is fine i guess but those who are seasoned they may say something like um mdn like mozilla developer network which is advanced or css trick which is pretty popular so i mean again there's no right or wrong answer this is way to find out some information about the interviewing uh here's an interesting one as well they want to know uh the level of your understanding of cross browser testing they would ask you how do you do cross browser testing the answer is again there are multiple ways to do it you know you can use a dedicated machine for testing especially for ie you can use virtualization or you can use browser stack or you can use docker because if you are css guy then you would have to deal with this testing methods anyway so this is actually a good question to understand how hands-on you are and lastly somebody can ask you and i've i've heard of a few people that have been asked css battle so what is that uh you might ask so this would be uh through this website called css battle they may ask you to implement something very complex i mean it it can be complex or simple depends on which example you get but it's almost like a lit lit code version for css you know they may ask you give you a design say hey can you build this uh using css and it's to match the exact uh design and you can you can see pixel by pixel if you prepare for it just do a couple of them uh and see how long does it take and this would actually make you a really good css engineer um so i would definitely try now by the way i'm planning uh as a separate video uh i'm planning for like a css battle video where two of my subscribers would battle out for for a specific building specific css obviously you're gonna do it on a separate time but i can combine them to see how their approach and everything side by side so if you're interested uh feel free to email me and we can do the recording and i can publish that video but make sure that you're confident with css and you have practiced a little bit and the prize would be a t-shirt i have a texted t-shirt so the winner gets a textured t-shirt and i hope you learned something new from this video and if you did please like subscribe and provide a nice comment you can follow me on facebook i have multiple groups that you can join and enjoy the enjoy the conversation or ask questions you can also follow me on twitter it's textedonehandle and you can check out my medium post via this link and you can actually register for my couple of my classes i have one on react and one on javascript and thank you for watching you

Channel: techsith

Views: 16,543

Rating: 4.9281044 out of 5

Keywords:

Id: Ntf7AWrmlEQ

Length: 13min 8sec (788 seconds)

Published: Tue Mar 09 2021