Explain 'Box model'?
Answer: Box-model is about how padding and border affect the width and height of the elements. If there is a div of 200px width and padding 10px then as per box-model padding will get add to the width (200 + 10 + 10 = 220px). Either developer can adjust the width in the CSS by deducting the padding from the width eg: 200 - 20 (10px left and right padding) or we can use box-sizing: border-box. This will adjust the width itself and the developer doesn't need to do anything in the code.
Here interviewer wants to see do you know do you know the impact of padding, border and the solution of this.Why mobile-first and how you will achieve that?
Answer: mobile-first is the concept of developing responsive web apps. Mobile-first means writing the CSS targeting the mobile without using media-queries. To write style for the devices besides mobile one should add media-query.
Here interviewer wants to see do you know how to start with responsive website development, breakpoints, and strategy too.What you think about {outline: none}?
Answer: This is one of the biggest evil things a developer can do for the website. We should never do outline:none it is very important for accessibility and focus. Hence, if I see this line my reaction would be the developer doesn't care about accessibility at all.
Here interviewer wants to see do you know accessibility and do you care about it?.What is pseudo:elements and classes?
Answer: pseudo-elements are the way to style a specific parts of the elements. Such as ::first-letter, ::first-line , ::after, ::before etc.
pseudo-classes is used to define a special state of an element. eg: :hover, :focus, :active ,etc.
As per CSS3 :: and : is used to distinguish between pseudo-elements and pseudo-class.Which are the new CSS3 properties that excite you?
Answer: This question's answer will vary from developer to developer. For me, it would be:
border-radius before border-radius to have rounded corners was very challenging and tricky too. This used to block the creativity of the designers and for developers implementing rounded corners was performance-intensive tasks but thanks to border-radius property.Now, it is very easy to have rounded corners. It gives more power not just to devs but designers too.
CSS Grids This is a new, improved, and powerful way of creating web layouts. Devs badly needed this to stop putting hacks and have something from CSS itself.
currentColor This is my favorite from the point of maintenance and writing less code. By using currentColor you can just tell the properties to use the color already define in that CSS code block. Now, I have to write 1 less color value as well as when the changes will come I have to change only in one place.
Here interviewer is interested in knowing do you know CSS3 new properties and what you think about properties.So, think about that what excites you in the CSS and why.
Happy Learning!!
Top comments (10)
Hey Neha!
I appreciate the love for CSS, but those concepts could be better explained.
Box model is how the browser determines an element's dimensions, with the margins being a part of it too. It looks like you're answering "what is box-sizing" rather than the box model itself.
box-sizing is an important clarification to make when explaining the box model, but there's much more to it.
Mobile-first is not the concept of building responsive apps, but an approach to it. The idea is to start from the mobile layout and progressively enhance it for bigger ones. This allows us to reduce the computational requirements for mobile devices (that are supposed to be less powerful than desktop computers), and benefit from the browsers' defaults, as mobile layouts usually are boxy in nature.
Also media queries are not the only approach for creating the bigger layouts, as grid and flex allows some degree of adaptation themselves.
I agree 100% that taking out the visual indication of focus is terrible as it would pretty much block keyboard navigation users from using the website at all, but outline: none is not a bad practice on itself if you use it purposely and provide an alternate for it. For instance, the squary nature of outlines can look awful in buttons with rounded corners, so using outline:none on the :focus state and replacing it with a box-shadow (that follows the rounded corners instead) would be a great way to take care of accessibility without ruining the aesthetics.
Thanks for such an effort to list down all the questions with answers.
I would like to add a basic question to your list.
Difference between inline and inline block element?
Answer:
For number three, you are mostly right. I think it’s more or less the best advice to say never modify it, because it takes skill and well thought out design to replace.
A more correct answer is don’t do outline none, unless you are replacing it with something better. Better being easier to see, and clear what it is. The default browser outline is not consistent between browsers, but also does not take into account your design. For example the safari soft blue, could be hidden by a blue background, not giving enough contract to cause the needed effect.
Great tips though.
The a11y is also similar to questions about aria attributes. Basically, don’t use them when possible. Meaning use the correct built in html tags before you try and use aria attributes.
@hellonehha nice suggestions
One correction I believe you mean "Box model" and not "Box modal"
Thank you...corrected.
Good stuff. Thanks for posting it.
I was interested in your description of pseudo-elements, as I'd struggle to explain them myself even though I've used them hundreds of times. I'm not sure it's complete, though. What is a pseudo-element, technically speaking? An interviewer might want to hear that.
I'd also drop the border-radius point and add something newer. It conveys stagnation to me since it's about a decade old now (though it was certainly a ray of sunlight to developers back then). The :not() selector and position: sticky come to mind.
Finally, I'd like to hear more about why currentColor is useful. Your explanation is missing a good example that demonstrates usefulness. I'll be researching that myself to learn more.
Keep up the good writing!
Thank you. Nice article and tips.
But I did not understand 4.question.
Should we use it outline:none ? Shouldn't we use it outline:none?
outline: nonegets rid of the visual indication of focus, which would be terrible for keyboard navigation users, as they would have no indication of where they're positioned at.The rule of thumb is "never use
outline: none", so the browser's default focus states stays active. But we can useoutline: noneif we replace it with something else.For instance, outlines are always square, which can look awful in buttons with rounded corners. So we can style our buttons' focus state with
outline: none, providing an alternate indication such as a solid box-shadow instead. That way our focus indicator would follow the button's rounded corners.Here's a great video about that:
youtube.com/watch?v=Mvu5OMGcdVA
Understood. Thanks for resource sharing
Facundo Corradini.
Current color, I knew this is implicit on the border property but I didn't know you could explicitly use it.
Here's one for you.
background: backgroundWhat color is that?