CSS Battle - taking on round 15
HTML-код
- Опубликовано: 9 июл 2024
- Completing CSS Battle round #15 as quickly as possible!
🔗 Links
✅ The battles: cssbattle.dev/battle/15
✅ My Twitch channel: / kevinpowellcss
⌚ Timestamps
00:00 - Introduction
00:45 - The groundrules
01:42 - Challenge #1
08:19 - Challenge #2
16:43 - Challenge #3
29:51 - Challenge #4
35:21 - Challenge #5
43:31 - Challenge #6
1:00:16 - Challenge #7
1:14:13 - Challenge #8
#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 RUclips 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!
![mgk - I Think I’m OKAY (with YUNGBLUD) (Sad Version) [Official Music Video]](http://i.ytimg.com/vi/7AC1uqQLIg4/mqdefault.jpg)
Is it wrong i take so much comfort from hearing you say "why didn't that work" or "OH! duh",it brings me so much joy to hear you say things i say everyday when tinkering on my fake websites!
So thankful that I am not the only person that has gone crazy with css. And good to see that you are human as well…..lol
Me tooo crazy on css🥰😍
we are Cssphilics
Me too
Me too it's so frustrating x)
Wow we hate going crazy alone
Thanks Kevin, great video! who knew CSS could be so funny
46:33 - "I'm going a bit more elegant than the last one now.."
50:47 - "justify-content: center !imporatnt" (misspelled)
54:38 - "position: absolute...."
any time I'm questioning if I'm cut out to be a developer, I'm just gonna remember how genuinely entertained I was watchjng this video
@vv
Thank you for that video. It is encouraging for us newbs to see that even professionals make small errors here and there.
For challenge 3, I just created two rotated pills as an "x", a rotated square as a diamond, and a circle. Then I stacked and centered them all with position absolute to the body.
ive done it a different way
just use two div one the main which is the centered circle then a psuedo element to make the square behind it
then the second div wich is the rounded shape behind the circle and the square
this second div is going to be that shape
then use the pseudo element to create the same shape
then play with the z-index because everything is positioned as absolute
thats it
it was so easy for me to make it
for challange 5, rotation deg is arcsin(0.6) because the triangle middle of 3 squares is pythogerean triangle of 3-4-5 scaled up for 20x.
Could you do an episode where instead of trying to solve these as quickly as possible, you would instead try to solve them as methodically as possible, following best practices, etc...?
Awesome ! I’m learning css in a fun way by watching you do this battles :)
It was killing me with the margin on the paragraph lol. That's super frustrating, I've had moments like that
Transform origin for your rotates on Battle 15 ;) Set the top left for the green and top right for the yellow. Then rotate from there
Not me screaming at the phone “FLEX-DIRECTION COLUMN CHANGES THE MAIN AND CROSS AXIS!”
During all #5 I was like "change the pivot dude" haha it is crazy how timer affect judgement
for the #86 battle: your were using tag which has a margin by default.
That's what was causing the unexpected behavior.
I'm so glad i've beated you on #3, #5, #6 and #7, i never thought
For Pythagoras, you should have used transform-origin, set to 0,0 top left corner, and so you don't have to translate...
I like these CSS battle because I still discover CSS properties we don't use often.
Alway so cool to see how other people do the trick.
Kevin this video is awesome!
Youre doing a good work
Thanks a lot, I learned a lot
your solution in the last one made me see u r so so intelligent really really wow man thank u so much ❤❤❤
#5 gets a lot easier if you use transform-origin: top-left before the rotate.
Yeah, I was saying that out loud the entire time haha. As well as bottom: 100% instead of translate
there's always 30px or 70px littered around these battles but Kevin always starts with 20px or 80px and gets stuck at 25px or 75px
Great!
49:10 being a total newie, it made me relieved seeing Kevin is sometimes completly stuck, too :D
Awesome video
You fall in love with the challenge, im fall in love with your channel
On target #85, the angle is 36.87deg...but apparently it's rounded...even what I just said is rounded. It's the smaller of the 2 acute angles in a 3.4.5 triangle. First thing I thought of when I saw the image. Good job guessing :).
Me everytime you use % instead of px: this is going to hurt :D
You are my goru i really thankfull to u that i have learned too much from u , thanks from pakistan
Good video! Also where did you get your chime sound? High quality we want one (not yours) :b
"oh that's so annoying" - said no css developer ever .. :) great channel
Are you allowed to use box shadows (for the stairs)?
Why didn't you use Pythagoras to calculate width and angle of these squares?
47:37 Every developer ever
Thumbnail : 8 CHALLANGES
--> 8 CHALLENGES
Fixed it, thanks :)
This man is a developers frustator .... jajaja .... Great job @Kevin Powell
Kevin should i use flexbox gap property ? It gives a lot of power to flexbox but not yet fully supported.
NICE SHIRT!
For #87 you could have made one green figure with a class and the second one just rotate it
What about using a whiteboard to design the strategy and then write the CSS?
Is that something you would recommend in "real life work"?
For challenge 5 I solved it without translation. I used only rotation and transform-origin to top left and top right.
This is so clearly the correct solution
I was 103rd in that battle :) To achieve that I had to complete all challanges with 100% success as well as get a good score.
Congratz Tanvir
@@mohamedmarzuq747 Thanks
@@TanvirAhmed-ur3kr anytime 😇
Hey Kevin. I think that flex doesn't work on the body because you need to set margin: 0 on the body as well (not sure tho but I always do margin 0 on the body and flex works just fine)
If we give body the height,then also flex will works good
Yes I think so, it's weird
It works out fine to me without zeroing the margin of the body
I checked on your youtube channel do you have other CSS battle ? can not see. actually I just start that it is a lot of fun
I need to bridge where I am now, to being able to know where to start with these challenges. I have no semblence of strategy to go from nothing to even beginning this task. Where/how to start, hints, etc. Any suggestions?
I completed play/83 in 14 minutes but my code was very different from yours. I used a wrapper div and then i placed 5 divs inside it. One ball and 4 half circles. I used display grid on body and wrapper div along with place-items center on the half circles i used position absolute and used left, right, top, bottom to position them then i just rotated the wrapper div 45 degrees. It was a pretty easy but fun challenge
I mean there's so many ways to get hte same solution in different code.
In the "door" example (about min 50') the "paragraphs" have margins top and bottom !! That why it is not working
I think clip path is they way to go with second to last challenge.
Thx Kevin for your informative videos. Could you plz make one on CSS for printing on paper? Stuff like page breaks, repeating table headers, footers... etc
It's not something I have much experience with at all (okay, no experience at all, lol), so I'm probably not the best person to explain it 😅
Do you know a channel where I can learn from for that matter?
41:16 because you have inside of instead of a div if u didn't close the first one
Make a CSS Battle with Alvaro Montoro!
*{margin:0,padding 0 ,box-sizing:border-box} at 29:55 for 100%
Pixels is always the way to go on CSSBattles and I believe one issue of why things may not look right when rotating could be the aspect-ratio, but not sure on this last one. Ohh yes and also margin:0 padding:0 helps if I'm not mistaken.
cool! I'm was top 43rd on that.
For Challenge 5, the top is -1.6 and the right is 2
The width for the .two is 80.5px
The translate is - translate(34px, -110.5px)
That's how you get a 100% on the 6th challenge.
Oh, and by the way, I am a 9 year old programmer.
That last one is a little bastard. Nearly broke my keyboard because of the twisty corner😭😭........
I spent a whole hour doing it but failed.😪
#CSSBREAKSMYHEARTONCEAGAIN2022EDITION
“Why doesn’t that..” -me with everything I do.
I alway use the DIFF output. Easier for me to see if i'm a bit left or a bit right...
38:55 transform-origin : bottom left;
Ok 👌... but calm!🤣
I don't even understand what you did on that last #88.
I hope you make a shitton of money from your channel. I cant speak in words, how much timesaver your lessons are for me. And i am sure for lots of other people too. You talent to speak it the easy way make these tutorials easy to follow. I nominate you for the teacher of the millenium. I can follow almost everything without going back in the videos. thank you, thank you, thank you
My antivirus found something called "Tech URL scam" on the css battle page... I used it as my excuse for not finishing the insanely difficult challenge. But yah, sketchy.
10:09 even safari support rotate but chrome and opera not :D
1:09:27 It was at this moment... he knew...
I think in challenge 6# the p padding is not zero
so if you use p you should remove the padding
Can you tell us how to write code crazy small like leaderboards
Lots and lots of hacky solutions and minifying stuff.... I have no idea, lol.
@@KevinPowell You have to find out how to contact Ilya the #1 master. Though I swear he uses machine learning because his profile pic was a robot emoji.... Suspicious...
For challenge 5 could you have done 'transform-origin: top left;'
... and of course 'top right' for the yellow square
Yes, this. And if you (as I did) assume that the triangle is a 3/4/5 right triangle, the sizes and rotation angles for the two smaller boxes can be determined using mathematics.
That's a horrible issue with the alignment on target #82 diamond cut.
My solution for #88 Tight Corner
body {
background:#F7F3DA;
margin:0;
display:flex;
align-items:center;
height:100%
}
.stick {
background:#D25B70;
height:80px;
flex:1;
position:relative;
overflow:hidden;
}
.stick:nth-child(1) {
border-radius: 0 10px 0 0;
}
.stick:nth-child(2) {
border-radius:0 0 0 10px;
}
.stick:after {
position:absolute;
content:"";
width:100%;
height:100%;
background:#F7F3DA;
}
.stick:nth-child(1):after {
top:40px;
border-radius:0 20px 0 0;
}
.stick:nth-child(2):after {
bottom:40px;
border-radius:0 0 0 20px;
}
Only two divs, less code and I find it more elegant but it is my humble opinion ;)
I am soooooo sorry but I laugh my a** off when you saw that it was paragraphs. No worries I have gotten up and had to have a time out over a spelling error.
#86 was so much easier just abposing everything.
And why you done like that in challenge 8 last one make 2 divs set it center in y axis and put border-radious:5 to 8px; and use a pseudo class afterand give height of 40px and width of 20 or 30px a d rotate it 45deg 🙂
Hi! :D
I was literally yelling at my monitor @ 48:49... you were using `` tags so they default to inline elements. if you had added either a display: block or flex to the p.step elements it would have worked... ( I'm still watching so you might have realized this in the next few minutes) just writing this down incase you go in a different direction.
Also, `` tags have default formatting by the browser... without a reset or a normalization stylesheet it will make you have a day of hair pulling every time, I don't know about you but I like not having a stress induced bald spot... 😛
Edit: I feel like an idiot... P are block level it was just the formatting...
Aren't p tags block-level?
@@mccree81 FML... you're right... ugh you know... I'm leaving my comment for posterity... I make mistakes too... yes they are block but I wasn't wrong about the extra formatting for margins etc. induced by the browser.
1:24 is it too long
I have a unrelated question but I can't seem to find it with Google.
When I create an element with Javascript, how do I apply :before, :after and :hover styling to it?
I don't want to use a regular css file for my script, it needs to be self contained.
Right now I create a plain css string and append it to the dom which is bad for performance and I just don't like it.
You could create an element by ID, and have ::before and ::after styling in the CSS. You could do it with classes too, just slightly more work :)
@@KevinPowell That's the thing, I'm creating a plugin for videojs and I don't want any separate css files.
Basically I'm deleting the whole ui and building it from the ground up to make it look, feel and work exactly how I want it.
But I want only one js file to require or add to a script tag. It needs to take over full control over the player.
Is there any way to do a document.createElement and apply pseudo to that like I do with div.style.background = "purple".
Right now I create a style element and apply innerText, it works but elegant is something different 😅
copied your code but my vs code and browsers are not happy with each other.
margin: 0; on the p's kevin 😢
kevin, great to c u but I have a chanllenge, you do css a lot but make js please, a good functional site not only good looking
Yeah I don't like the score part on cssbattles
9:22
Wow, my css skills are a$$
Sir I have something to tell you
Second
Toggle p to div pleeeeaassee
Good job you learn from you possition mistake.
First
Great job! If you want to talk to someone in the top 20 of CSSBattle feel free to contact me 😉
I think you really over complicate things lol. I get you want to have as few elements as possible but I guarantee the person had divs for all the shapes and just flexed them to the middle. Just make four circles, a square, and another circle all nested in a parent
it really doesn't make sense to solve it with infinity amount of code and repetitions .... unless u just start your journey with CSS ...
for the developers all the mental challenge really starts at attempts to reduce code to the least possible, and that always require knowledge of unusual syntax/tricks as well as deeper understanding of CSS
could you not use the m word? This is a family friendly show
Transform origin for your rotates on Battle 15 ;) Set the top left for the green and top right for the yellow. Then rotate from there
+1