Coder Coder challenged me to CSSBattle
HTML-код
- Опубликовано: 5 июл 2024
- Jess's channel: / thecodercoder
Wanna learn the fundamentals of declarative Gestures and Animations? Check out start-react-native.dev.
Chapters
0:00 Intro
1:36 Challenge 1
12:47 Challenge 2
21:11 Challenge 3 - Наука
Thanks so much for doing this collab! It was a ton of fun and I think made for an interesting video for others! 😁
Jessica, I realized that I thought of solutions that are the same / similar to yours... I think I watch a lot of your videos 😝💗
Wow, you were extraordinary.
Your approach was very enjoyable to view.
I am relearning to code and would love to be as fluent coming up with minimal solutions like you do👌
Can we use background-clip property 😉
round 1, why are you using position:absolute ? its not stable when the viewport changes. Anyone's with me?
"I think this should work." Most common phrase used while writing css.
Or while writing any program.
@@cipherxen2 until you do tdd
@@josephmbimbi it applies in TDD too!
@@cipherxen2 to some extent yeah. I meant, you have more than an eyeball test and don't just push your code finger crossed ^^
@@josephmbimbi so, what's your point then?
William: I haven't done proper css in two years, proceeds to crush every challenge with css sorcery.
yea react native style sheet mostly like vanilla CSS in general
this is beautiful to see the difference in thought process and code structure. love it. more like this pls.
It is always a better practice to give border-radius:50%
Ofcourse it can try this -> borderRadius: '50%'
@@Joksky8 I can confirm this doesn't work in my version of react-native either using px is the only way.
@@thesodapoppanda8778 Dang react sucks lol
lol, border like shapes should be the basic of css, almost like kindergarten.
I love this especially to see you guys struggling a little bit like I always do. I think you boosted my confidence.
Really fun to watch you guys solve the problems in your own way! I missed having some kind of follow up at the end where you went through each others’ solutions or maybe just commented quickly on each others’ performance.
I was hoping for that too. At least a comparison of their scores.
@@jpisello i think he actually kicked her ass so badly that it was embarrasing to show the final score were a non familiar css code dude beats the hell up of a css youtube guru.
Fun to watch! I didn't know about this website. I'll certainly dive in.
The production value in these videos is top notch. Really good work.
William took an interesting approach. Mine was almost exactly as Jessica’s. Great job guys!
Wow that last one was hard!!! I'm going to look into "clip-path" much more now. I love watching these as I have discovered you William, nice one and I have subscribed now - cheers
i really learned a lot from this battle! Thanks!
This was an awesome challenge!! I love to watch how other developers figure out problems.
Great video, hope you do these battles more in the future!
Really cool! Thank you for doing this Jessica & William!
One of the coolest developer videos I've ever seen!!
For a quick second, I wondered what Sean Evans knows about CSS and why he was being challenged.
Lol
I actually googled the last round, how to deal with the color at the circle's intersection, and I think it would have actually worked with propperty "mix-blend-mode: #(color-hex);". I was quite surprised it can be done wtih only one line of code :D
i did it by using circles one in the other
with the overflow:hidden and z-index:1
Css really is sometimes like that. One line of code can do wonders
could maybe have done it with blend mode: difference or exclusion
the next one MUST be The Net Ninja, the lord of web development
Yes please !
Shaun is 💥 @The Net Ninja
Yes 🙏
ruclips.net/video/YujykR315HY/видео.html
Shaun would make a replica of the CSSBATTLE website as a mistake
Really fun to watch this battle. It is interesting to see how people think differently and solve the same problems differently.
After watching this I joined CSS battle just for fun. I was totally unaware of this really cool platform! Make more videos like this please! It's fun watching people compete over stuff xd
I am not a web developer but I really appreciate how each of you had different thought processes and showing the power CSS.
love these code battles!!! so entertaining and informative :)
There's an easy way to do the last challenge. It's just an illusion of having a centre section.
1. Make three circle divs all the same size, one peach, one red and one the same colour as the background.
2. Position the peach and red circles normally so they overlap.
3. Position the background coloured circle inside one of the other circles with overflow hidden and position it so it appears like it's just "peeking" into the other circle.
I have use almost same approach and within 5 min I have finish the last challenge with 100% and used 565 characters. 🙂
body{
margin: 0;
background: #09042A;
}
.circle {
position: absolute;
border-radius: 50%;
aspect-ratio: 1;
width: 150;
}
.c1 {
background: #7B3F61;
top: 75;
left: 75;
overflow: clip;
}
.c2 {
background: #E78481;
top: 75;
left: 175
}
.slice {
background: #09042A;
left: 100
}
This is an excellent competition, we saw different approaches from both of them, which is really cool.
The clip-path trick makes my day :). It is great to see how 2 people resolve the same problem, it is amazing how different ways of thinking can both solve the same problem. I think in the first round you both did similar, in the second round I liked more Jessica approach, in the last round I liked more William, so that is a Tie for me !!! hahahah. You must another video to define the winner :)
css indeed demands not just your knowledge but creativity too! well done both of you!
We never got to see the final scores. I'd like to see more of this collabo in the future
yeah! he got 600 but how much did she get?! who won?
Wow, thanks for these CSSbattles, now as a total beginner I understand that there is no one way how make website. Everyone is a unique writer for its own website 👌 Thanks 🙏
I love how William opened a new tab in round 2 “Clipping and Masking in CSS” 😂
🤣 nice catch
This was awesome! Please do more.
I love love love this! Very fun to watch!
This video was so interesting
I even did the first challenge and it was so fun
Please make more content like this!
Jessica, Jessica, I have learned a lot from you. Thanks!!
Great video guys! Looks like a lot of fun. I didn't know about this website but I think I'm gonna spend some time digging into it.
Very fun to watch. You guys had a harder time with these than I did, but that doesn't mean I didn't learn anything watching. With the last one, you could have used the top of the two overlapping circles as the clipping box for the inner portion.
That was really fun, I liked it. The latest exercise could be easier creating a class to create 3 div circles at once, and use one of them into a relative space of the pink circle (child) to create that middle space between the others two. And of course, the pink circle will have an overflow: hidden property to move the third (dark blue) to the left inside of it. :D
Exactly my thought. Just clone one circle, add a child circle with the background color and move it to the side while clipping the parent circle.
CSS: that moment when you try hanging a painting on the wall and you nail your hand up instead.
CSS: When you try to hang up the painting, but instead you set fire to the sofa.
That's the danger of using negative margins. Use translate instead
So happy and excited seeing the video 😍
shes a genius at css, but when she rotated the red mountain she did it by trial and error😂
Anyone can see that is 45 degrees. Why would you even try 10?? She can’t eyeball pixel values at all either.
She probably still kick your ass at css 😆
@@brendan9039 who cares? That's like kicking my ass at putting stamps on mail.
@@resonatingsilence savage comeback
I went to the comment section for this exact reason.
Super fun! Good job with challenge #3.
Such a freaking creative and productive way to improve your skills
I’ve been struggling to learn web development for a few years now because I would rather be on an interactive environment versus just watching tutorials on the web that I tend to fall asleep to. This was much more entertaining and engaging as well as an awesome display of friendly competition that shows CSS in action as its being written with real time results. Definitely going to be watching more videos!
so how's the web development going? or you find a new excuse?
@@johndorian4078 I change gears too often and end up looking into other things. Always been a problem with me. Are you still a dick?
Though i don't know html or css but it feels so good to watch two people thinking differently
Wow, it's amazing how you guys use css, I learn a lot thank to you.
I would approach these designs almost the same way Jessica did. The way William did it was really interesting to me. Love these video's it really shows there are more ways to do things.
I'm a C programmer and my mind can't get this, sorry haha
me too , It kind of hurts to see people playing with shapes and calling it programming while we suffer in pitch darkness....
@@varri0nschannel840 Well, CSS is not a programming language (nor is HTML) so it shouldn't be considered "programming". I guess you can consider it a part of programming, but in itself I wouldn't be able to say so.
Same with Javascript, lord saved me from doing CSS.
@@varri0nschannel840 CSS is not a programming language and calling css programming would be pretty stupid cause the name itself says that it is a cascade style sheet
the same here 😢
This was really fun to watch niceeee!!!
Didn't think I'd like watching this but I actually love it
What a great video, congrats to you both.
Awesome guys! Tks for share!
These battles are awesome!
This is quality content. Learned a lot.
Now I've come to know how to use clip-path in CSS. Thanks William ❤️❤️
That was so fun i just love it i want to see more videos like that
The last one: two divs, with ::after or ::before pseudo code is possible. When you give overflow:hidden to divs and create same width, height, border-radius property based two circles and their pseudo as well.
This was fun. LOVED EVERY PART OF IT 😍😍
I never listened a french guy speaking english it's awesome!
New sub, liked the video
i guess i am to noob to understand what is happening saving this to my playlist and once have enough experience i will what watch it again. peace
I learned something. That's all that matters. I actually learned something.
Well done! I've learm so much. For the third one, i'd create 4 circles and clip 2 of them respectivly in each of the big circle
love these css battles. so cool
So pretty, thanks a lot both of you guys.
Hi William, I like your french accent. glad to see a french RUclipsr who creates content in English. Happily subscribed.
Love this challenges!
Use instead of a div to reduce the code's character count.
Waw guys this is absolutely amazing
I love this so much.
Thanks. I learnt a whole lot from this.
Super fun to watch ☺️
The trick for staying top 10 in these challenges are usually using lots of gradient backgrounds, box-shadows, styling the default available html and body elements (usually with * and * * selectors), all while minifying the code and exploiting some code omissions that still renders the CSS/HTML in a valid way. I've managed to get some very few top 10 spots, but damn the top 3 is hard af. Also, always the same wizards in those positions in all challenges. I remember that there is one person that is consistently on the top that is actually a maintainer of SVGO, so I guess that's where his magic comes from lol. For anyone interested, check the tips section on the site, it's super cool cssbattle.dev/tips/
That is awesome! Please keep it up
Awesome video, i just signed up CSS battle seeing you guys !
So fun to watch.
Loved it... It was amazing 💜💜💜
Pretty good job guys, well done.
All of that without using google just ones this is Amazing 😳
This was really cool. Stumbled upon this with my 6 year old daughter who really likes it too 👍
if you are lazy like me. when making circle divs, I just make the width and height to 1em and make the border-radius to .5em or 50% ( whichever makes you feel good ) and then you make the font size to whatever the size of the circle you want it to be. so you don’t have have to keep on changing the width and height everytime you have to adjust the circle’s size 😁
For a second I thought she is Indian Cricketer Smriti Mandhana 😂
Same here.. 😂😂🤣🤣
You all are so cool for this. Want to be this good. Programming neophyte
I like her videos .I follow her videos and learn everyday.
I love her voice...so soothing..
This is so fun to watch ⌚ 😄
here is my short way of doing the last challenge(venn-diagramm):
body {
--color1: rgb(21, 70, 110);
display: flex;
justify-content: center;
height: 100vh;
background: var(--color1);
margin: 0;
place-items: center;
}
div {
--radius: 140px;
height: var(--radius);
width: var(--radius);
background-color: var(--color1);
box-shadow: calc(var(--radius) * -.50) 0 0 0 black,
calc(var(--radius) * -.50) 0 0 0 black inset;
border-radius: 50%;
transform: translateX(calc(var(--radius) * .25));
}
More of these challenges please
there is a new one coming this Tuesday :)
amazing brother loved it❤️🔥
I really enjoy it ❤️
I always learn from coder coder but I don't know exactly why. Now after seeing her side by side with other people I fully understand her code is very clean and noobs friendly you can just look at it and have a general understanding of what she's going to do
I completely agree 💯
This is some great content.
10:00 my first thought on this was to use the ❄ emoji behind the circle, but alas, it doesn't map 1:1. Neither does ❊ (too many lines). Could css clip and shape be used to mask away the additional striations 🤔? I wonder
What music is this please?
First two were pretty easy to figure out but that last one, I've never seen before.
how did you do the clipping in the second challenge ? cause Jessica used overflow:hidden
Thanks so much for this
Pls Part 2🙏👍👍🙏 Awesome vid
So I'm learning front-end plus design in the last two years, self-learner...I got finally a contract for the position of technical designer but the focus will be on front-end development. I was a bit scared but after I watch this video I'm fully secure. If I did all of that in 10 minutes with 100% someone with a few years experience should make it a bit faster I guess :D
wow ! fun to watch
You got my sub. Great content!
May be you guys can do a podcast on the approach you both followed.