Can I Beat These Hard CSS Battles?

Can I complete these harder css challenges from CSS Battles? In this video I will be doing 3 challenges from CSS battles, attempting to get perfect scores as quickly as possible!

Prepping for your frontend interviews? Use code "conner" for a discount on my course FrontendExpert:

CSS Battles Featured In This Video:

[Codexbits]

Never heard of these before! Awesome! Great job figuring them out as well

[jpg]

My day gets 10% better when i see one of your videos. You're just great at teaching idk what it is

[cssbattle]

Again, lot of fun to watch! thanks for sharing :)

[satheeshm]

Really good 👌👌That last one was completely destroyed by grid. The power of CSS grid is really awesome.. Once again a good content conner 👍👍👍👍🥳🥳

[nbot]

Never use absolute positioning. Try to learn some of the top solutions from other players. The main thing here is to make the shortest code possible and not just to repeat the shape.

For the first puzzle, you can use a flex (or use margin) on the html tag to align all in the middle and create a centered circle with triple box shadows. Next, use -webkit-box-reflect on the body tag to draw the half circles mirror it below.

The shortest CSS selectors are used like this:
*{} for the html tag
+*{} for the body tag

And no any html tags, just the single opening <style> tag (without closing)

[soumyaa]

Thanks Conner. Thanks for bringing quality content.

[Akyu__]

I watched the whole thing and it was great!!
I could watch it all day!! Try some more challenges and see if you can do them!!!

[timmoser]

Good job!
I would love to see you take the time and show how to refactor the code after beating the challenge and implement some good practice after the timed rush

[vikasni]

Very very nice idea to master css, thanks and lot of support from india 🇮🇳 😊 🙏

[wdsenjoyer]

In retrospect, what do you think would be a better approach to the Tetris example?