Can You Solve These 3 CSS Battles Faster Than Me?

[@barchuk422]

i think this is the first time in a decade i see the premiere page turn transition, really a nice touch. you're my favorite coding youtuber by far btw

[@marciogomes9451]

Really interesting aproaches, I went for background gradients in all those 3 exercises trying to reach the higher scores (not even close! hehe...). Used repeat liner on the 1st, radial gradient on the 2nd and conic gradient on the 3rd.

[@jenstornell]

Only two people is faster than you, The Flash and Kevin. 😅

[@mytechmedia267]

Matlab

[@YabseCoder]

Nah, Kevin is slow 😅 but he can rebuild css by himself 😅

[@KnaveKaiser]

two key properties for the peacock: grid-template-columns/rows: 1fr 1.618fr; border-radius: 0 0 100% 0;

[@Nodsaibot]

ah cssbattle, old stomping grounds when I had free time

[@codeSurvivor]

to center a div I think the easiest way is on the parent using grid, and place-items: center, that's all

[@RainbowBrilliance]

First of all - thanks for the content. Some opinion - have no objections about 2nd and 3rd tasks, but, the first one…I think, you have chosen the worst possible way to solve it. I think every junior does this as he does not know anything rather than creating plenty of divs and flex for everything. Possible solutions: 1. Left and right stripe zones can be done within 1 div for each with box-shadow property. 2. even with divs approach - you can do it with 8 divs for both sides and put big square on top of it. Not perfect solution, I agree, but still better than 17 divs for that one section.

[@clevermissfox]

Repeating linear gradient !

[@teugene]

Interesting. I had a very different solution for battle #1. Mainly using background linear repeat instead of divs for the stripes.

[@njordholm]

Mads Stoumann on dev-to created "the golden ratio in css" as a diagram in a nice way.

[@clevermissfox]

Why use absolute and magic numbers for the third to get it centered instead of grid or flex? Or aligncontent and margin inline? I'm literally puzzled by this from our web dev simplified guru

Maybe background-image(s) + two pseudo elements could make the job for the first one.

[@clevermissfox]

Repeating linear gradients! That was my thought too. But that’s what’s fun about css battle and watching battles on KZbin; so many different approaches !

[@Rohit-gw8tk]

Pls develop face recognition attendance module based on javascript..

[@AnandhS-v1o]

Node js crash course for beginners, please Upload video easy to can understand .

[@LukasHabtoch-v8i]

Hey, how much for you to redesign my website?

[@clevermissfox]

Depends on what your website is and how large it is, what you want done etc. a designer can’t quote without more information.

[@LukasHabtoch-v8i]

@clevermissfox ok, it's a small listing for server hosting which has like: send mail to buy, single-page

[@Dubea001]

​​@@LukasHabtoch-v8i Hire me. I can get the job done for you. If you are really interested we can discuss the price

[@tima1301]

thats fun

[@joshuaa3075]

Wordy as ever

[@tomaszgora4353]

Omg. Just copy 7 more lines and overlay an absolute gray square with a bg colored border and bottom 0 over them:) can't watch your overcomplicating your life with setting up sections, it's not a real page ;)

[@Tormentor60]

All of that could be done with one single div...