Washed-Up Developer vs Impossible CSS Challenge

I haven't written any CSS in a pretty long time... let's see if I still got it!
Try it yourself here: cssbattle.dev/...
Prepping for your frontend interviews? Use code "conner" for a discount on my product FrontendExpert:
www.frontendex...
🎬 TikTok: / connerardman
💼 LinkedIn: / connerardman
📸 Instagram: / connerardman
📢 Twitter/X: x.com/connerar...
💻 Video/Coding Gear (affiliate): www.amazon.com...
Business/brands 👉 [e-mail]

[@asagiai4965]

Remember, kids, Mastering CSS is an art on its own.

[@clem]

I see you stole my title of "washed-up developer!" But actually...maybe it's time I update mine to "giga-washed-up developer."

[@ConnerArdman]

Lil coding challenge to see who is more washed up one day 👀

[@clem]

@@ConnerArdman Oh god... 👀

[@cssbattle]

woah! Super fun to watch with your live commentary, Conner! 😄

[@tomigmelo]

For the rounded edges, instead of 2 bars (horizontally and vertically) I see it as 2 light blue squares with rounded edges, overflow hidden by the outer dark blue circle

[@YungDachi7]

Good thought, but wouldn’t these squares also overlap the dark blue border?

[@tomigmelo]

@@YungDachi7 depending on how you design it. Instead of a light blue circle with a darker blue border you can do 2 circles, one dark blue and a light blue on top. And then inside of the lighter one you can place the rounded squares and set overflow: hidden for the light blue circle. So it wont overlap the dark blue circle

[@divided_one8188]

Good attempt! If you're not joking about the rounded corners, I believe, Kevin Powell made a great video about inverted border radius via challenging himself. It's the only reason I was able to complete the challenge myself. :D

[@ConnerArdman]

Oh nice, I’ll give his video a watch 👌

[@ZacharyRoth-bz1en]

It looks like they did it by setting a border around the inner circle with the dark blue color. Love the videos!

[@strategistaow3520]

Thanks for sharing this video now i feel less imposter (amogus 😃)

[@strategistaow3520]

15:40 i wanted to that part as I can't do that neither

[@ivan.rusanov]

I did two pseudo elements ::before and ::after (dark blue rectangles) and then placed another 2 light blue circles on top of them to make the corner radius on the wheel. It said I scored "593.6" which I don't know good or bad, lol. PS: Seems to be based on chars used.

[@ConnerArdman]

The score is based on characters used, but you can see the accuracy % if you close out of that window and look below the output

[@ivan.rusanov]

@@ConnerArdman Yep, figured it out, although it's a bit stupid IMO. I still have 99.9% accuracy as the target is not symmetrical and I didn't bother making it exactly the same, but just because I've added even more code for the "inverted" border radius it ranked me lower in the points.