Tricky CSS Interview Questions and Answers

[@geo_mukkath]

I recently had an interview for Angular and UI and let me tell you half of the time I couldn't answer the CSS questions. So here we go : 1. What is WCAG ? 2. What is the difference between reactive and adaptive designs? 3. What are fall back fonts? 4. Tell the difference between inline and inline block? 5. What are the break points in bootstrap. Tell their widths. 6. CSS animation properties 7. What is mobile first design? 8. How can I remove the margin in inline block elementa when kept under a div. 9. Code a carousel using jquery. 10. 1rem = ? Px 11. CSS preprocessors 12. What are the advantages of using scss over CSS? 13. Difference between container and container-fluid

[@Techsithtube]

Interesting set of question. Thanks for sharing!

[@surajitdas6555]

All are good questions except number 5. Those widths should be given by the clients for which they need support. And those widths don't need to remember as they are available in any css documentations

[@mikehenry01]

Good list. Doesn't the answer for #10 depend on the font size set on the root element ()? Default is usually 16 (because of the browser's default setting), but the user can change this. This would be the answer I'd prefer to receive if I asked that question.

[@DevSelfLearn]

Thanks 👍

[@oleksandrlidak6290]

"What is the difference between reactive and adaptive designs?": do you mean responsive vs adaptive? Have never heard of reactive design.

[@saurabhchaudhary7342]

Wow! what a coincidence. I just started with your previous 2 video series on CSS interview yesterday and now this. Amazing

[@Techsithtube]

That's awesome! Thanks for watching!

[@tentx652]

actually techsith tutorials helped me to get react js developer job,thanks a ton to techsith

[@sreet4955]

Better way of doing for question 1 to remove spaces is "add display: flex to the parent of those two inline boxes without altering any other css rules". Setting font-size to 0 to parent is not elegant which forces to set the font-size to the child elements. It could be simple in your example but real time use cases are so complex , not always easy to set font-size to child elements.

[@JudoboyAlex]

Thank you for this and more css interview series please. I was so focused on javascript/react interview questions, I was getting burned on css questions during actual developer interview.

[@manishadhole3556]

Please can you make a video on Jest and react testing library ,also unit testing of application ..

[@ganeshshetty8441]

Thank you for such an awesome content , Most of us don't give importance to CSS, hence get rejected due to the same reason sometimes

[@sanazseifi5105]

Hi and Thank you for your great videos. We can put the Float: left to sort out the space between two inline-block elements.

[@chayanjana20]

Smiling presentation..cool 😀😀😀

[@surajitdas6555]

I am very happy to see 9th option is cssbattle. Dev and as of today I global ranking is 53... And I have 12 codes which are not optimised yet... Target for me is to be at top 30... 😃

[@Techsithtube]

Wow nice. Would you be interested in CSS Battle for one of my videos. ?

[@MrutyunjayVM]

Most of the questions were asked from here! Thanks a lot.

[@CodingNuggets]

Excellent answers to these questions. Just found your channel recently and love your content. See you soon!

[@Techsithtube]

Welcome aboard! Thanks for watching!

[@meghanashree9500]

This is an amazing video! Can you please tell what is the other CSS resource you mentioned after MDN?

[@lone-warrior-13]

your interview questions videos are awesome and very informative 👌👌🙏

[@Techsithtube]

Thanks a ton

[@codewithkumar2729]

Really like this interview questions its make my confidence up :)

[@ibtesamuddin2061]

you are awesome man

[@DevSelfLearn]

Thanks! Got a good insight of what should i prepare for!

[@vinothkumarv9722]

Good cssbattle needed to check :)

[@Techsithtube]

CSSBattles are pretty cool. Do check it out.

[@kedarkulkarni0074]

I usually don't like much CSS, this will surely help me. Thanks :)

[@Techsithtube]

Glad to hear that! Thanks for watching!

[@deepabhatt2621]

Thank you so much for the video. Its very helpful Hemil.

[@amitkumararya5924]

Tricky questions with excellent answers . It's awesome Can there be a video on how to make a responsive website using simple css attributes, It will be very helpful for us. Thanks a lot for these types of Awesome contents

[@Techsithtube]

Thanks for watching the video.

[@deepabhatt2621]

Which will be the most used backend Hemil?

[@singhkumardev]

A very informative video 👍... Could you please make video on realtime use cases of bootstrap or native CSS3 instead of css battle

[@brynold3199]

please upload more frontend mock interview . please

[@boris_js]

Please make more css questions..increase the difficult and complexity level

[@Techsithtube]

Toushif, I am planning to build more such vidoes on CSS questions

[@MrRaydedon]

thanks for the video.

[@guilhermeh.v.santos7424]

TY again

[@shauryaverma8780]

Good content

[@devidasa9637]

AWESOME..TY!

[@dmitrykomkov8480]

Is there a developer who runs cross-browsing testing in 2021?

[@Yathavan5947]

How CSS battle is going to help in the real world? The real world is not an art right?

[@Techsithtube]

Todd, Its like algorithm question for JavaScript, CSS Battle will help interviewer , understand how interviewee thinks and approaches a problem. Yes these designs are more like art.

[@Yathavan5947]

@@Techsithtube But in the real world, the problem I face is different frontend mentor is more helpful than CSS battle. CSS battle is more of fun than useful

[@saranyam7747]

could you please explain me what is media query?

[@anandu7532]

We can create responsive web page

[@anandu7532]

Mobile responsive 🔥

[@saranyam7747]

@@anandu7532 Tnq how to use this there id any specific html tag we are using...sorry it may be silly query! kindly explain if possible

[@geekydanish5990]

First

[@Techsithtube]

Thanks for the first comment!

[@pawandeore6989]

Css tricks source

[@andTutin]

Css battle suck. Who do this in real projects ? I better use svg