Front-end developer takes on a CSS battle
Vložit
- čas přidán 1. 06. 2024
- 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 CZcams 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!
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!
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 :)
The video and the comments combined really help open up new ways of thinking about the same problem! Love these videos!
Ive been avoiding that last one on css battle so its very helpful to see your approach!
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.
I was thinking thr same thing. I learnt about it when I was using ::after to create an arrow on a tooltip.
What do you mean by this?
@@BrandonWalowitz Probably means to have a fat border and color all side, except the one transparent side.
@@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)
This was entertaining to watch. I am enjoying your "conquering responsive layouts" course. Thank you.
LOVE these css battle videos. Can we get this weekly plz?!
Hello Kevin, You're the one that inspired me to get in into css world. Thank you very much❤
Thank you Kevin for your great content!
Wow, that's insane! You're amazing!!!!! Thanks for posting!!!!
I'm new to frontend just finishing watching a HTML CSS course ans this looks like magic ngl 😢
Today I learned conic gradients could be pretty useful
Rotating the conic gradient degree would be a great option for the last one 10:50 😊.
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
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}
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!
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 😂
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.
That's the video that I've been waiting for ❤ , from 🇲🇦
Conic gradients with transparent are 🔥
Sick video bro
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.
this video taught me how to create a pie chart, and how to make it spin. thanks.
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.
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 😅
It's good that youtube keeps recommending me this dude, even though I'm much more of a javascript sorta guy.
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
}
I was wondering why he didn't do it that way
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;
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.
That was fun to watch.
17:05 That also looks cool without spacing
This is whole another css level 🤯
I'd Have Created 5 Squares On The First One, 4 Small Ones And 1 Big One
That's boring
you only need 3
@@xxwaldi Actually only 2, you already have the body that's implicitly always there. Got me to my high-score.
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
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).
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 😅
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!
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 :)
@@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.
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?
I have a Discord 🙂 kevinpowell/discord
@@KevinPowell How much did the TLD cost you? 😂
so good
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
how to avoid button scale affect parent div height, padding css?
the CSS king is back!
Did I ever leave? 😆
youre making those challenges look easy mr kevin lol
New subscriber here 😊
do more!
for the last one, I would have changed the conic gradient, rather than transform/rotate the object.
Oh, yeah, smart!
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!
Just realised I’m not the first to suggest it!
You should do a css vs tailwind Battle!!
2nd one #160 you can achive only borders also
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
Ky hall hai sir kaise ho aap hum bhi start kiye h web. Development
Isn't the first one just three elements accordingly sized and positioned on top of each other?
You could definitely do it that way! Not how I first saw it, so I went my route, but that would totally work
Yeah! Good stuff!
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.
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.
Is there a similar app for Java?
"hello my funtime friends"
Why did you use translate without transform and then later on with transform?
Before you realized the order mattered. In the last challenge.
It's faster to do it without 😅
😢How much css do I need to know ?
And how can I be top in css just like you what should is I do ?
Lots of practice goes a long way 🙂
@@KevinPowell what practices should i do ? may you name some practices to me ☺️
sangar wong iki
could do without conic-gradient by using border;
border: solid 20px red;
border-top: solid 20px transparent;
Hey everyone I upload css battle daily targets solutions. So if you get stuck anywhere you can freely watch the solution.
Thank you ❤❤
is it good to start frontend developmemt in 2024?
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.
If those design would come from figma, I would just export them as SVGs
whats the point of the timer? It would be way cooler if you would actually win a battle and get 100$
this is leetcode for front end developers🤯
I have a lot of studying to do...
hehe I will create it in ppt and do image source
you could have done the first one with just 1 div and 4 boxshadows
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?
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...
I would make first with 3 divs
Does anyone have a 100% solution on 169? I have 100% on everything else but 99.9% on 169
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 😅
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
}
How is the dog doing ??😃
Good, but barky, lol
responsive?
Not really, lol. That isn't really the point of these challenges though :)
On a number of these, I would *absolutely* cheat and use inline SVG....
I mean, SVG is the right choice here if this is what you actually need 😅
@@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
i did it in 20 seconds it took a screen shot and put it in an img tag job done .👍🤣🤣🤣🤣🤣🤣🤣
Ha! Cherry-picking the easy ones I see!
Just kidding ;)
Why does it say "Finished 2 hours ago"? at this time stamp czcams.com/video/eYPyIq5Y3Rk/video.html
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
I beat you, using gpt3.5😅
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.
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.
@@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.
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 :)
@@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.
wow
Hi dear,
I visited your channel. Your videos are very nice.
But your video SEO score is low.
divs are bad and old practices!
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 ;)