Front-end developer takes on a CSS battle

Подписаться 913 тыс.

Просмотров 188 тыс.

50% 1

CSS Battles are always fun, so I took on a few of their challenges to see how well I could do! cssbattle.dev/battle/26
🔗 Links
✅ I took on 4 challenges from Battle 26 - cssbattle.dev/battle/26
⌚ Timestamps
00:00 - Introduction
00:20 - The ground rules
01:12 - Challenge 159
04:30 - Challenge 160
07:51 - Challenge 161
10:50 - Challenge 164
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 117

@adampielach4942 8 месяцев назад

As a software engineer, more than frontend developer - I was blown away by the way you come up with those solutions so fast. Also, it shows me how much CSS has evolved in the last couple of years. Great job!

@mahadevovnl 8 месяцев назад

First one is just a square with a before and after inside. The square is centered, the before and after are just the vertical and horizontal bars. Just need one div :)

@gwemula 7 месяцев назад

The video and the comments combined really help open up new ways of thinking about the same problem! Love these videos!

@clevermissfox 7 месяцев назад

Ive been avoiding that last one on css battle so its very helpful to see your approach!

@DavidAltreiter 8 месяцев назад

As all the circles have a 90deg cutout I would have just used a border-color of transparent on one side and then just rotate the thing 45deg. Would have worked for the second challenge too.

@edwardholmes91 7 месяцев назад

I was thinking thr same thing. I learnt about it when I was using ::after to create an arrow on a tooltip.

@BrandonWalowitz 7 месяцев назад

What do you mean by this?

@gwemula 7 месяцев назад

@@BrandonWalowitz Probably means to have a fat border and color all side, except the one transparent side.

@DavidAltreiter 7 месяцев назад

@@BrandonWalowitz just like @gwemula said, you can individually set the color of a border on each side. so if one is set to transparent it leaves a 90deg cutout (on a rounded div with equal sides of course)

@WrestlingTournamentsDotCom 7 месяцев назад

This was entertaining to watch. I am enjoying your "conquering responsive layouts" course. Thank you.

@fogofwar342 7 месяцев назад

LOVE these css battle videos. Can we get this weekly plz?!

@saravananv.k3567 8 месяцев назад

Hello Kevin, You're the one that inspired me to get in into css world. Thank you very much❤

@valeryi3374 8 месяцев назад

Thank you Kevin for your great content!

@TheCocoaDaddy 7 месяцев назад

Wow, that's insane! You're amazing!!!!! Thanks for posting!!!!

@fawazabolaji9522 6 месяцев назад

I'm new to frontend just finishing watching a HTML CSS course ans this looks like magic ngl 😢

@ivlis.w8630 7 месяцев назад

Today I learned conic gradients could be pretty useful

@anselum540 7 месяцев назад

Rotating the conic gradient degree would be a great option for the last one 10:50 😊.

@LePhenixGD 8 месяцев назад

After watching your video, I decided to do these challenges myself, and I'd like to share what was my thought pattern throughout the challenges: 1:12 We can get 1 div and use 2 pseudo-elements, we center the div in the middle, and we set the width to be 100% of its parent element and then just scale on the X axis both pseudo-elements and rotate by 90deg one of the pseudo-elements 4:30 I'd have used a div and played with the border radius by setting the border-block-start-color to be orange and rotate by 45deg 7:50 I pretty much had the same thought process as Kevin here 10:50 I used the same previous trick with the border-block-start-color on 4 divs and played with the top-left values until I found the magic number

@stephenbrown2979 7 месяцев назад

I've been playing CSS battle for some time, and over time I have learned some the tricks needed to achieve the desired outcome with the simplest code. The use of various combinations of background gradients can be a powerful tool. Example, I was able to complete puzzle 160, the donut, using only a combination of a radial and a conic background gradient on the body. body{background:radial-gradient(1q,#62306D 60px,#0000 0,#0000 100px,#62306D 0),conic-gradient(#F7EC7D 75%,#E38F66 0}

@webrevolution. 8 месяцев назад

To me, the weird thing is that I feel loads of tension from you wanting to necessarily do this as fast as possible. But I think you know very well (as we also do) that you are a very good frontend dev and probably in a scenario where you don't have to speak to the camera for a video, you would beat almost anyone of your viewers to anything CSS related. You're just on another level and the experience definitely shows. Maybe I'm the only exception (I wish I was 😂). Nice vid!

@KevinPowell 8 месяцев назад

It's a fun challenge to do it with a timer, and probably forces me into mistakes at times which can make for better viewing 😂

@AdamGaffney96 7 месяцев назад

What I did for the last one was just make my 4 circles with a box-shadow on them, then use a clip path to cut out a 90deg section of the circle. Then just rotate and position the other 3! Honestly I think I solve about 90% of these css battles with box-shadow, clip-path and position absolute.

@younessehorra5592 7 месяцев назад

That's the video that I've been waiting for ❤ , from 🇲🇦

@designtoxable 3 месяца назад

Conic gradients with transparent are 🔥

@VEKTOR299 7 месяцев назад

Sick video bro

@jasper2virtual 7 месяцев назад

Hello Kevin, your channel is very great I love it so much. I am a css beginner and I started to love to learn css because of you. I have subscribed to the cssbattle to play and learn. I found all the top solutions only works in Chrome but not Firefox, is it normal? And what you will recommend if I want to learn browser safe css. Thanks a lot and have a good day.

@rafi-leigh 7 месяцев назад

this video taught me how to create a pie chart, and how to make it spin. thanks.

@bw-dude 7 месяцев назад

Hi Kevin, I was surprised to see how you solved this. Especially since you are the master of pseudo elements. I would have solved the first three with one div each plus ::before and ::after and z-indices. The third one I would have done in a simliar way. Still very interesting watching you how you go about it.

@KevinPowell 7 месяцев назад

I tend to avoid pseudo-elements in these because they take longer to setup that just throwing another div in there. I also often go with sub-optimal solutions thanks to having a timer going 😅

@danser_theplayer01 7 месяцев назад

It's good that youtube keeps recommending me this dude, even though I'm much more of a javascript sorta guy.

@the_BetaDev 8 месяцев назад

for battle 160 I did: body{background:#62306D;display:grid; place-items:center} div { width: 120px; height: 120px; border-radius:50%; border:40px solid #F7EC7D; border-top-color:#E38F66; rotate:-45deg }

@shootthemoon2773 7 месяцев назад

I was wondering why he didn't do it that way

@ThatRobHuman 8 месяцев назад

Interesting. In all the cases where you used conic gradients, I used borders. for example: #160 body { background: #62306D; display: grid; place-items: center; } div { width: 120px; aspect-ratio: 1; border: 40px solid #F7EC7D; border-radius: 100%; border-left-color: #E38F66; rotate: 45deg; } for the clover, I used the same idea as above, but border-left-color: transparent;

@ThatRobHuman 8 месяцев назад

obviously both work, not doubting your decision one bit: I'm glad there's more than one way to skin a cat - the divergence is legit interesting.

@LeonVisnaw 7 месяцев назад

That was fun to watch.

@Technoph1le 8 месяцев назад

17:05 That also looks cool without spacing

@jonathanbayhon367 7 месяцев назад

This is whole another css level 🤯

@GlacierGamer2018 8 месяцев назад

I'd Have Created 5 Squares On The First One, 4 Small Ones And 1 Big One

@saber8387 8 месяцев назад

That's boring

@xxwaldi 8 месяцев назад

you only need 3

@VeitLehmann 8 месяцев назад

@@xxwaldi Actually only 2, you already have the body that's implicitly always there. Got me to my high-score.

@aje9633 7 месяцев назад

I think you could have done that with one div and use box-shadow instead since you can apply multiple arguments to its parameter :D

@Unai_asdf 8 месяцев назад

I'm guessing z-index wouldn't have worked on the last one, since it would be an impossible (Penrose) stairs thingy were the lowest z-index element should also have to have a higher z-index than the highest z-index element. But give it time, I'm sure CSS will let us bend the laws of physics at some point (except on Firefox).

@KevinPowell 8 месяцев назад

Yeah... looking back at it, it wouldn't have worked. There is a trick that would maybe make it possible, but it might have prevented a 100% match, plus it would have been way more work than it was worth, lol (you could rotate on the Z-axis, 1deg or -1deg)... I think you might have to use perspective and preserve-3d along the way as well, that way they're slightly tilted in the 3d space and can hid beneath something in front of it... but I'm happy I didn't go down that route 😅

@tomben9609 7 месяцев назад

The last 5 sec of the first one went too fast for me 😆 what happened, could somebody give me some clues? I tried it by myself before the video and was like 3 divs, 2 rotated done, but then I watched you and it was BOOM so fast! Great video as always man!

@KevinPowell 7 месяцев назад

lol, looking back at it I can see why it went a bit fast there, lol. It looks like one big red block, but it's actually 25 of them in a 5x5 grid. The red backgrond on all of them, and no space between them, makes them look like one big square. I removed the red bg and made only the ones I needed orange and it just came together :D - tbh though, your solution is probably better :)

@tomben9609 7 месяцев назад

@@KevinPowell Ah yes! I just realised that you had already setup the orange classes at the beginning. Thanks man, I'm just getting into grids so that great.

@deltaromeo8207 7 месяцев назад

Hello Kevin, love watching your channel. I am currently enrolled in college at Full Sail University for web development and I am learning coding in one of my classes. Watching your channel has helped me a lot. Also do you have a slack or discord channel?

@KevinPowell 7 месяцев назад

I have a Discord 🙂 kevinpowell/discord

@mad_circuits 7 месяцев назад

@@KevinPowell How much did the TLD cost you? 😂

@Atractiondj 6 месяцев назад

IDEA for next battle - you can create a fullpage scroll section horizontal and vertical (without pressing key shift for horizontal scroll)? Reference library - fullpage.js - Scroll Horizontally

@andyjulca238 7 месяцев назад

so good

@k23raj2 7 месяцев назад

how to avoid button scale affect parent div height, padding css?

@saar5947 8 месяцев назад

the CSS king is back!

@KevinPowell 8 месяцев назад

Did I ever leave? 😆

@penguinxed 8 месяцев назад

youre making those challenges look easy mr kevin lol

@vloggingwithmichael7635 5 месяцев назад

New subscriber here 😊

@jimmynguyen5361 8 месяцев назад

do more!

@octothorpe12 8 месяцев назад

for the last one, I would have changed the conic gradient, rather than transform/rotate the object.

@KevinPowell 8 месяцев назад

Oh, yeah, smart!

@ruudlaff10 7 месяцев назад

The first one could have been one div, and used the before and after pseudo elements. The main div being a square, and then two rectangles in the pseudo elements. Just an idea to try!

@ruudlaff10 7 месяцев назад

Just realised I’m not the first to suggest it!

@mjerez6029 7 месяцев назад

You should do a css vs tailwind Battle!!

@user-wj7hi6ye8n 7 месяцев назад

2nd one #160 you can achive only borders also

@Jarrod0067 8 месяцев назад

I love how cheaty this game is. It's not even a challenge of writing the most robust code. Just hack it! Use short tags like and to save characters, nest them to apply absolute to them all at once, and magic number all of the width/height and top/left

@NigamTrader 7 месяцев назад

Ky hall hai sir kaise ho aap hum bhi start kiye h web. Development

@pasizdobrekuce 8 месяцев назад

Isn't the first one just three elements accordingly sized and positioned on top of each other?

@KevinPowell 7 месяцев назад

You could definitely do it that way! Not how I first saw it, so I went my route, but that would totally work

@pasizdobrekuce 7 месяцев назад

Yeah! Good stuff!

@padmanabhans6632 7 месяцев назад

just change degree of the conic gradient instead of rotating the whole div 😇[#164, Rangoli], Just an idea of mine, if it works I happy else I learn something new today.

@padmanabhans6632 7 месяцев назад

In challenge 159 it would take a 1 div (I know that you just want the 100% match), also this gives you a high score. Just an idea of mine. no offence. Idea: - place the main dive at center and use it's before and after pseudo class/elements to make a cross using position absolute it sets automatically to the center. if it works I happy else I learn something new today.

@rocki_0161 6 месяцев назад

Is there a similar app for Java?

@philwinkle 7 месяцев назад

"hello my funtime friends"

@BrandonWalowitz 7 месяцев назад

Why did you use translate without transform and then later on with transform?

@BrandonWalowitz 7 месяцев назад

Before you realized the order mattered. In the last challenge.

@KevinPowell 7 месяцев назад

It's faster to do it without 😅

@TechtalkAi2762 8 месяцев назад

😢How much css do I need to know ? And how can I be top in css just like you what should is I do ?

@KevinPowell 7 месяцев назад

Lots of practice goes a long way 🙂

@TechtalkAi2762 7 месяцев назад

@@KevinPowell what practices should i do ? may you name some practices to me ☺️

@dimasfajar6316 6 месяцев назад

sangar wong iki

@olesejus 8 месяцев назад

could do without conic-gradient by using border; border: solid 20px red; border-top: solid 20px transparent;

@procoder09 7 месяцев назад

Hey everyone I upload css battle daily targets solutions. So if you get stuck anywhere you can freely watch the solution. Thank you ❤❤

@LokeshKumar-tk7ri 8 месяцев назад

is it good to start frontend developmemt in 2024?

@KevinPowell 8 месяцев назад

The current job market is pretty bleak at the moment, but from what I understand, that isn't unique to frontend development, but is an issue at large across most industries. Personally, I don't see any reason not to get into it, but of course, it depends why you want to, of course. If it's for the super high paying jobs you hear about sometimes at the big companies... I wouldn't get into it for that, lol. I'm not saying it isn't possible (and I know people who have jobs at Amazon and Google), but they aren't the norm, specially early on in your career.

@vanhelsingx69x 7 месяцев назад

whats the point of the timer? It would be way cooler if you would actually win a battle and get 100$

@stokbrood 6 месяцев назад

If those design would come from figma, I would just export them as SVGs

@SkySentry7 6 месяцев назад

this is leetcode for front end developers🤯

@JulioCesar-ii2xr 5 месяцев назад

I have a lot of studying to do...

@PopCapMusicTrending 6 месяцев назад

hehe I will create it in ppt and do image source

@markojozic3944 8 месяцев назад

you could have done the first one with just 1 div and 4 boxshadows

@KevinPowell 8 месяцев назад

Really? I could see doing it with a div and two pseudo-elements (or 3 divs)... for the shadows, I'm not not sure I see how... oh, wait, one of the squares is the div, then shadows with different offsets (and one with a spread to change the size) I guess?

@VeitLehmann 8 месяцев назад

This approach got me down to 117 characters. Actually no div, but 5 box-shadows, so I only need one background color. I found another approach without box-shadow, but with 2 elements, that got me down to 96 characters. I wonder what top 11 on the leaderboard did to get it down to 76 characters...

@romy4romy4 2 месяца назад

I would make first with 3 divs

@paulomodeinde1899 7 месяцев назад

Does anyone have a 100% solution on 169? I have 100% on everything else but 99.9% on 169

@KevinPowell 7 месяцев назад

The 99.9% are often a small bug. Sometimes I get that when I use grid, but get 100% if I switch to flex, for example. If I got 99.9 I consider it a match 😅

@the_BetaDev 8 месяцев назад

For battle 159 I did it using box shadow body{ background:#F5D6B4 } div { width: 50; height: 50; margin:25 0 0 167; background: #D86F45; box-shadow:0 100px 0 50px #D86F45, 0 200px #D86F45, -100px 100px #D86F45, 100px 100px #D86F45 }

@mannixmd 8 месяцев назад

How is the dog doing ??😃

@KevinPowell 8 месяцев назад

Good, but barky, lol

@niteshmalviya1849 7 месяцев назад

responsive?

@KevinPowell 7 месяцев назад

Not really, lol. That isn't really the point of these challenges though :)

@ThatRobHuman 8 месяцев назад

On a number of these, I would *absolutely* cheat and use inline SVG....

@KevinPowell 8 месяцев назад

I mean, SVG is the right choice here if this is what you actually need 😅

@ThatRobHuman 8 месяцев назад

@@KevinPowell lol, that's comforting (I often feel like I'm one of the few people who will reach for SVG first), but I totally get that's not in the spirit of the challenge. It does make me wonder if there's room for SVG-freaks like me for a Hand-written SVG Challenge/Battle :3

@komailabbas4574 7 месяцев назад

i did it in 20 seconds it took a screen shot and put it in an img tag job done .👍🤣🤣🤣🤣🤣🤣🤣

@surgeon23 8 месяцев назад

Ha! Cherry-picking the easy ones I see! Just kidding ;)

@DaveMadeIt 8 месяцев назад

Why does it say "Finished 2 hours ago"? at this time stamp ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-eYPyIq5Y3Rk.html

@KevinPowell 8 месяцев назад

They release new challenges regularly, and have them running over a period of time. I always wait for them to finish to do these videos, so that all of the challenges are unlocked

@diplomatnationalcarriersll6524 7 месяцев назад

I beat you, using gpt3.5😅

@cafelutsa_ 8 месяцев назад

I can't for the life of me figure out why for challenge 160 and 164 you didn't use a rounded div and give the border-top the color you needed for each shape. Is it for the video to seem more interesting? Using a background of conic-gradient on such simple shapes is a very convoluted way to achieve a simple circle shape with a quarter of a border color being different. I mean, spending over 8 minutes on the last challenge has to be a show for the video, right? Just be more transparent and say, "I know we could probably use [x method] but let's see if I can figure this out using [y method]." Don't take this comment as a hateful one, but as a genuine curiosity I have when you release these kinds of videos that feature CSS battles.

@KevinPowell 8 месяцев назад

These are always genuine, and my first time going through them with whatever pops in my mind at the time. I don't do these types of things very often at all (I haven't done one outside of a video in years, so you can see my frequency of doing them), and things like different border colors just doesn't occur to me. It's a great solution, but not one my mind goes to when I see that shape with the two colors. Conic gradient was the first thing that popped in my head because it's fantastic for this type of thing, and much more versatile than a border (since you can have it at any angle), so it's what I thought of when I saw that shape 🙂. I never said these are the best way to do them, but when our mind jumps to a solution and I have the "constraint" of solving it as fast as possible, I'm going with whatever the first solution that jumped to my mind was.

@cafelutsa_ 8 месяцев назад

@@KevinPowell So you choose the solution that always comes to mind first. Interesting approach. I think the timer irks me. Showing it seems to imply that you're trying to solve the problem in the fastest way possible, but in every video of this type you seem to get bogged down. Excuse me if I seem arrogant - I don't want to and I am not trying to either - but when you solve a challenge you should take inventory of every tool that seems useful in that particular case, and not jump to solve it by applying the first solution that comes to mind. As you see, it really didn't help you out a lot. Going through a list of what goes on in your head using different solutions (why they might work, why they might not, why you would use them and vice-versa) would also make for great content. I am an active follower of your channel so I'm trying to give you as much feedback as I can.

@KevinPowell 8 месяцев назад

The idea with the timer is to sort of start the entire challenge when I hit "start". Obviously I have an idea in my head when I see the small view of it, but to me, solving it as fast as possible is also coming up with the potential solution, and not just how fast I write the code for the solution I have in mind. These types of videos are less for the educational vibe than my normal ones, because to me, solving things like this is more for fun anyway, and not the type of thing you'd run into in the real world (though you can 100% learn things from these that you'd use in the real world!). I 100% agree going over possible solutions, and explaining though processes can be very educational. I have a few upcoming videos on that topic too, actually, where it's more about thought process and breaking down a problem rather than "here is a solution'. If anything, that's probably more valuable than just showing solutions to problems :)

@cafelutsa_ 8 месяцев назад

@@KevinPowell These are very simple challenges though, so I do have the feeling you're stalling a little bit, knowing how experienced you are in this field. I don't know, to me, it just gives that vibe that you actively choose the "harder" solution because that gives you more screentime, therefore content.

@dudeyouhavenoidea 5 месяцев назад

wow

@user-ep5bt2bq1l 7 месяцев назад

Hi dear, I visited your channel. Your videos are very nice. But your video SEO score is low.

@user-bd5pk5ef9y 6 месяцев назад

divs are bad and old practices!

@twoplustwoequals5733 7 месяцев назад

You're missing the point of the game, those shapes are so simple (usually: a square, a circle, a sphere, a line, a triangle etc), that it shouldn't be a challenge for a FrontEnd Dev just to make them lol, instead do this with th least code possible, that's where your brain really needs to start working ;)