Frontend CSS Coding Interview | Ft. Clément Mihailescu

In this video, I'm interviewed by Clément Mihailescu, the CEO of AlgoExpert, to test my CSS knowledge in a "Google style" interview.
We also filmed a JavaScript / DOM Manipulation interview on his channel: • Google Frontend Interv...
Prepping for your frontend interviews? Use code "conner" for a discount on FrontendExpert
www.frontendexpert.io/conner
LinkedIn: / connerardman
TikTok: / connerardman
Video/Coding Gear: www.amazon.com/shop/connerardman
Timestamps
0:00 Intro
1:27 Interview

[@ConnerArdman]

Hey everyone, thanks for watching the video! I want to be super clear on what a real frontend interview loop looks like to make sure this video isn’t giving anyone a false impression. Most likely you will not have a pure CSS interview. Depending on the company, you might be asked a frontend question involving some CSS (e.g. the interview we did on Clement’s channel combined with ideas from this one), or you might be asked some high-level CSS questions like the ones Clement asked me in the beginning of this video. There’s also a chance CSS doesn’t get mentioned at all. I have seen some instances of pure CSS interviews, but these do tend to be for specific jobs that will require a lot of CSS knowledge. All that said, I do think practicing CSS is important, and it can oftentimes give you a way to stand out from the “average” developer. If you are preparing for frontend interviews, I would always advise to spend most of your preparation time on JavaScript questions along with standard data structures & algorithms.

[@clem]

But can he center a div?

[@purujitkulshreshtha2211]

Real question is... Can I invert a binary tree? *runs into darkness

[@universecode1101]

it can be strange sometimes 😂

[@javity83]

Center a div without using flex...

[@narendrareddyyarramreddy2007]

@@javity83 position:absolute; top:50%; left:50%;transform: translate(-50%,-50%)

[@Tw0Bits]

{ display: flex; align-items: center; justify-content: center; }

[@zixuanchen8898]

Please upload more interview videos like this! It is extremely helpful and enlightening and I love the way that you and Clément communicated!

[@ConnerArdman]

Thanks, glad you liked it! Hopefully more coming relatively soon 😎

[@simosimo1volta]

Instead, stop being evaluated for a silly 30-minute exercise

[@SiyaDante]

For your first vide ever(!) you have a great amount of confidence talking in front of camera. Both your voice and tone are calm which makes it pleasant to listen to. Obviously you have a great potential to become a rather successful youtuber. Keep up the good work. 💪

[@ConnerArdman]

Thanks for watching everyone! Make sure to checkout the JavaScript / DOM Manipulation video on Clement’s channel as well: kzbin.info/www/bejne/l5qUq6CEhJqNaac

[@bezuvuyo2893]

Already love your content. As a beginner in Web Dev i can say i’m movitated, love how you tackle your problems. Can’t wait to seeing more of your content. :)

[@vegeta4122]

Great video! Love how you explained each of the properties you added, by adding flex, and align-items. And using flex-wrap. This is awesome!!

[@BillaCode]

This is foremost the best css video I have seen. Thanks and please upload more like this

[@hydradevs]

First video looks like the 500th video , i love it.. upload more video like this 💯💯

[@PoojaDutt]

Nice! Excited to learn more 😀

[@arunrawat3752]

This is really the level of CSS interview asked in companies as I have no idea as I am a student , I was also able to replicate the above thing and answer the questions so that means I am good in CSS ?. Can do lot more than this from animation to design.

[@ConnerArdman]

It really depends. If you're applying to frontend roles in big tech companies like FAANG, there is a good chance you don't get any coding questions purely testing CSS unless the job description mentions it as a major component to the role. Instead, you might just be asked some high level questions like the ones Clement asked me at the start of the video to quickly gauge your knowledge. On the other hand, if you are applying to smaller companies, really anything is fair game. At this point I've heard everything from not mentioning CSS in the interviews at all to interviews just like this one and even whiteboarding a CSS animation. TL;DR: Most likely this interview is actually more in depth than the CSS that you would need in frontend interviews, but it can really depend on the role you are applying for and the company.

[@hazelbdev]

I have been coding for about 2-3 months and the first question got me… I was like a box what? Then I realized (once you started to answer the question) I knew what he was asking but I never knew what it was called. Great content man!! Keep up the work you’re helping people in so many ways !!

[@MotivateHouse]

Same

[@shafnisha1171]

When i learn from you i feel more productivity and more motive to become a front end dev i learned to become a front end dev for the last 3 to 4 months but i have problem in css and js also wanna learn more about angular hope to follow your frontend course on Algo-expert!

[@soumeshk]

Nice man, Keep it up🚀

[@SEWebDesign]

You can't make pseudo elements clickable just FYI. Since they aren't part of the DOM you can't bind events to them. Nice video!

[@briankgarland]

I found that to be really easy, which is nice as it means my front-end skills are coming along nicely.

[@chanjusingha5751]

Hello Sir, I want to be a expert in Front End. Keep uploading videos that could help in a beginner perspective.

[@gabrielpedroza1346]

Vid is awesome!! Would love for you to make a video on your journey and how you got to fb and decided to leave.

[@ConnerArdman]

Thanks! Both coming soon 😎

[@goosydev]

*For anybody wondering:* At 14:37 by adding a padding you created a barrier between the default margins of the h3 elements in the column preventing their "margin collapse". Thats why the margin of h3 was "in" the box after adding the padding just making it look like the padding was big.

[@Latuza]

I learned so much css just from this. can u do videos on flex box, grid tutorials?

[@ConnerArdman]

Awesome, glad you learned from this! At the moment I’m not too focused on doing tutorials on this channel, but maybe down the line I might try it out…. Although I do have flexbox and grid videos on FrontendExpert 😉

[@unknownman5296]

Hey @Conner nice video man. Currently I am learning web development from your course, frontend expert. And it has been amazing!! :))) A suggestion that I can give is probably please explain things a little more slowly(so that it's more beginner-friendly) because sometimes you explain things too fast in frontend expert and I have to find on KZbin on the topics that I'm still confused. Great video btw 👍👍👍

[@ConnerArdman]

Awesome to hear you're enjoying the course so far! And thanks for the suggestion, it's always hard for us to find the right balance of pace, especially given the huge range of experience that different users might have. Definitely noted though and always something we are looking to improve on with future content 😊

[@Aalii6]

interesting, thank you!

[@av.shaheen]

If I use "display: inline" in status(.status) class?

[@universecode1101]

welcome on KZbin 😄✌🏻

[@nightcoder5k]

Good stuff. I did learn a few things. Thanks!

[@ConnerArdman]

Thanks! Glad you enjoyed it!

[@filipecabete4200]

Is it the last build? Can't find live version :(

[@ototem]

Nice, thanks!

[@elg281]

Sorry but i need to know. How would he fix the sizing?

[@muriukialex]

here from the Frontend interview with Clement, where Ardman purred through 🐆...

[@HagerA.Elroby]

Great video 👍

[@urigross]

Good practical interview

[@xxxxxx89xxxx30]

Great video (and the on on Clements channel) :D made me think that iam underpayed right now :) If i were to study for an interview in general, what content/page wuld you suggest to have it all covered?

[@ConnerArdman]

Thanks! Obviously I’m biased, but I really think all of the AlgoExpert products are great. For frontend roles, I would usually recommend FrontendExpert + AlgoExpert as you will likely see both algorithm problems and frontend problems.

[@rebelshadowrm]

I would have started with setting css variables, is there any particular reason you wouldn't?

[@ConnerArdman]

No reason really, I think converting that big comment at the top into variables would have been a good approach 👍 It just wasn't something I thought of doing in the moment.

[@AlokKumar-sy3jm]

Bro I've this much of confidence in CSS and also good in MERN stack development.. but can't getting such an opportunity to show my skills 🙂🙂

[@markopolo2224]

ngl this makes me feel good about my css skills because i can do this

[@remcosommeling1059]

I'd be able to do most of this from the top of my head, but I'd feel like I'd be stabbing at it in the dark at some of them. I see I could use some practice simply replicating and increase my ready knowledge and clarity on the fundamentals. I would be ready for an interview like this in a short time though, which is a little surprising to me. Since I have been feeling mostly overwhelmed with all the possibilities while studying CSS / html.

[@absurd7292]

Great content.....

[@zaghal]

Good luck!

[@sheriffderek]

3:21 Can we rewrite this HTML? This looks like a list of lists and there's no way that a screen-reader would be able to present the status to users.

[@javity83]

I think the height difference would be resolved with line-height: 1 on the h3 element

[@donniedamato]

h3 elements come with margin. All you need to do is set h3 { margin: 0 } to fix.

[@misu3rd]

I like this type of videos. Next time maybe use sccs?

[@ConnerArdman]

Thanks, glad you liked the video! If we do this again, SCSS could be an interesting idea (although that might be the most niche interview possible lol)

[@Troy-ol5fk]

you can't attach event listener to a pseudo element, because javascript has no access to elements defined in CSS

[@tempusmagia486]

This was fire

[@yajirushik2871]

Something like that really could happen on interview? I mean everytime when I ask they want me to write simple web app or explain back-end front-end JS problem so for me it's so surreal to actually get a question like that. Also it's really easy to achieve question goal for me.

[@ConnerArdman]

It would just depend on the company and the job you're applying for. If you're applying for a standard frontend role, probably not. As I mentioned in the intro of the video, they are more likely to just briefly test CSS in other interviews, if they test it at all. However, I have heard of people getting interviews like this applying to more design-centered frontend jobs.

[@johnconnor9787]

Very interesting

[@SanderCokart]

id use grid with auto-fit minmax

[@TheOne-qv3xw]

make video on Print css

[@ahmedezzeldin8697]

God made you a brother to me, but you chose to be a mentor for me. And I want you to know that you were great at being both. Happy birthday bhai!

[@SanderCokart]

guessing the last thing is line height

[@ruiw4263]

border-radius: 50% good one.

[@aps9369]

Subscribed

[@shengpang1405]

the interview is great but instead of only showing the interview, how about providing the code sandbox link for everyone and we could practice the same question, I think that may a good idea lol😚

[@Mocitydon]

Conner: Uhh I think that makes sense I’m ready to go 😃😃😃… Me: shitting my pants in my technical interview 🥲 😂

[@GauravKumar-ue7nz]

WOW, Liked the part where you skipped padding then explained border and then came back to explain padding.

[@shaXrak]

Very good job, but you might wanna keep your hands down when explaining your video :)

[@red_onex--x808]

Cool

[@ahmedfaroooq8875]

display: flex does not work on the wrapper id.

[@felixjones4522]

Hi im brand new to this channel, was wondering if ur were a frontend web developer or mobile developer.. Oh im new to coding n I'm tryin to follow a path that'd get me my first job faster, i already have my html n css down , still doing JavaScript

[@geekinstaller5565]

Remember me as your 635th subscriber

[@maheshmahadar4780]

nice

[@-seoulair]

This is google level CSS interview? So I can go to google and do CSS right now? xD

[@franos1910]

is it really that simple to get a job at faang?

[@ConnerArdman]

Unfortunately, no there is a lot more to it. Depending on the company, you’d likely have -5 total interviews with 1-2 of them being frontend based (and probably mostly focused on JavaScript rather than HTML/CSS). The other interviews would be traditional data structures and algorithm problems or potentially system design.

[@angelsv]

Did you got the job?

[@sammyiboi]

He didn't offer you a job at the end of this interview! 😭

[@jarrellidk]

You’d need at least 3 interviews for a FAANG level company lol.

[@joeroddy]

So many people new to programming in here and I feel like they're being misled a bit for the sake of pushing a subscription to this website. "CSS coding interviews" don't exist, and if they did, they'd be for extremely niche positions. I've been in full stack / FE dev for 7 years and I can count the number of css questions I've ever received on one hand, after dozens of tech interviews. It is extremely rare to receive a CSS question at all in an interview. The only positions a 'CSS Interview' would be appropriate for would be if I was hiring someone who was going to create an entire CSS framework for our org and that would be their entire job. If you guys want to be developers for anything more than basic brochure websites, learn the very basics of css and dump every remaining ounce of energy into mastering js.

[@ConnerArdman]

This is valid feedback, thanks for pointing it out 😊. I actually have had a few people tell me they had a CSS specific round, but they are usually for more design-adjacent roles than just a standard frontend developer (and that is certainly an exception not the rule). I was trying to get at that with the intro to the video, but to make it more clear I added a pinned comment as well.

[@channelfeedtv5265]

I now know why websites are mostly crap. Too much front end, inefficient back ends.

[@HenryPangsatabam]

This was kind of easy..

[@yomamasofat413]

lord I hate css

[@TheOne-qv3xw]

make video on Print css

[@TheOne-qv3xw]

make video on Print css

[@TheOne-qv3xw]

make video on Print css