I Challenged An Expert Designer To A CSS Battle
Vložit
- čas přidán 8. 06. 2024
- 🚨 IMPORTANT:
Adrian's Channel: / adriantwarog
Free CSS Specificity Cheat Sheet: webdevsimplified.com/specific...
Adrian is an incredible designer, but is he also incredible at CSS? In this video I go head to head against Adrian to see who is the best at CSS.
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:18 - Round 1
16:20 - Round 2
36:10 - Round 3
45:27 - Outro
#CSSBattle #WDS #AdrianTwarog
Thanks Kyle and every one, this was heaps of fun, and a great pleasure to be on here! One day I will improve my CSS and hairstyle and be back for a rematch!
I have no hair *on my head*
no one can defeat Kyle hair style jajaja...but what about a next match...make them a common more competitive thing? will be fun...kyle vs adrian css match of every month?
Spoiler Alert! 😃
Adrian and Kyle both are done so good.we love your sportive
You have good hairstyle buddy.
So good to see these battles! 🔥 Thank you for doing these guys :D
Epic moment
Bruh your percentage system is scuffed
pls fix it
@@suncrafterspielt9479 can you stop complaining
@@nishantgupta1854 can you stop complaining about my complaint?
1:03 That Was Savage
so funny to watch. Maybe i will start doing some webdev myself.
yeah, it would be if it weren't for how unsimplified his css and html was lmao
Adrian's first one should have been 100%
Lmao no he freaking made two different element for the background while you only needed to make one
@@iprogeny4877 that's where characters come into play, but the percentage is based how pixel perfect is appears in the viewport.. it looked perfect to me. your point about both of them making this more complicated then it had to be does hold water, though.
If he'd made one rectangle of correct size it would have been, those little px nudges cost him
@@inkedcoder There was only 1 needed element for the background of the icon soo that's why he didn't get 100% lol
@@inkedcoder Remember that 100% mean perfect
Useful tip: Border-radius gives different results if you use absolute values like px and if you use calculated values like %, so to achieve the correct border-radius you could do a high px value in this case
Just watched it and found it weird no one else in the comments seems to have mentioned that tip as well.
challenge Dev Ed, it'll be fun
Educational and entertaining at the same time. Really like this kind of videos!
We need more of these videos. 🤩
I've been following these programmers separately for a long time. and now i see them together in a css challenge. This shows us not only good mastery of the content but also empathy and desire to do. Kyle, there is no limit to what you're trying to do. I wish you many good things and that you never stop
Really liking these css battles keep'em coming
One mistake kyle often do is not get rid of default margin and padding of body. I tried all challenges along and got 99.9% in first two and 100% in last. Also border-radius on css battle are more likely to follow px instead of %.
this is awesome. love the different approaches!
If you apply percentage border radius on a rectangular element the radius will be elliptical.
Looool! That intro :D! Awesome to see you guys battling!
Hahaha 😂 Adrian is on point about Kyle's hair. I get jealous everytime.
Yeah kyle does have great hair
Hey Kyle! Css battles videos are awesome! Keep content like this flow in your channel!
These are fun and I end up learning a lot about CSS!
these are so much fun, just 10 min passed, and already learned a lot!
This is a lot of fun. You two are doing great.
I really love these CSS battles. I didn't know that were too fun!!
I stopped with html and css like 2 years ago but this is still interesting to see idk why... make more of these Kyle 😄
Kyle you are so brave and have huge balls to battle people. SO much respect.
Love watching the content. Round one Kyle did have a better solution and ended up achieving the result in less lines of code. Looks like scoring is based on EOF. Always good watching how people approach things differently to get the same result. A good way to learn from :D
This is so great, I'm learning every moment.
I always get sleepy when i watch your videos youve got such comforting voice and presence its honestly astonishing, I'll try what i learned after i wake up lol😂
Love these css battle!! Keep doing'em guys!!!
We need Kyle Vs Brad CSS battle or Kyle Vs dev ed...this battle will be epic
He did play Dev Ed in case you wanted to see it.
@@cjaym5671 did he really played CSS battle with dev ed?? I don't think he did CSS battle with Dev ed
@@matsukazetenma4558 I apologize the video was a Javascript trivia game. No one listen to me please, lol.
Here is the link:
czcams.com/video/RtVt--kt6AI/video.html
this makes me feel alot better about my css skills
Would love to see a challenge like this with one person scratch coding and the other working from scratch in Webflow!
We need also The Net Ninja vs Brad Traversy or Dev ED for a CSS battle
Love you man. Love to see php or any programing chalngs
why are you soo calme bro??? continue!
Something about these videos make it so satisfying
Kyle you are great bro. Please start a tutorial for react pro during a high level project
I was waiting for this
Kyle : no emotions
Adrain : so much emotions that he has to use hands
Hahaha! I’m like a waterfall and Kyle us like a damn, damn he beat me!
Thanks, lot to learn from battle
Intrigued to know why both of ye when centering the content in the body just didn't use display: grid and place-items:center. Is there a specific reason to go against use of this or just personal preference ?
Me: learning css want to give up with small designs
But when i see these pros who are not having it easy, i have no more reason to give up.
Thanks for these videos! 👍we need more of these. Not only we learn but we also get motivated.
Kyle what I would be simple I put the image in the body background, and put the opacity 50% on it's content and basically trace the css properties of the elements over the image, could save you a lot of time.
He definitely should have won the first round. However your clever use of the single line of code for the Border-radius put you way ahead in the last round. Congratulations!
You can also use shift+ for compare in y axis
Masters at work :D Good job!
It was fun watching you guys 🙂
I tried that first one. It was perfectly done!
I 100% expected there to be a hair commercial in the intro. You got me. I'm laughing dead.
Awesome video Kyle. I am really happy that my thinking process for solving this css problem match with yours... And your are my idol in coding world along with Wesbos...
Challenge him as well.... 😁
You guys both did an excellent job dictating what you're building (especially that crazy mudda fudda bat) and always fun to watch. Interesting mixture of coding habits too. Maybe they correlate with hairstyles haha. Anytime you want a challenge, I'll be waiting for ya ;)
the problem at 2:55 is that the rectangle is streched, but the corners aren't supposed to be stretched like that
Actually the first image did by kyle was the best way ,he used only one container while adrian used two containers to get the shape.Maybe it causes the percentage drop.
Use a grid variable for faster and accurate positioning
Awesome battle 👍 I just found css battle. It’s my new favorite place to spend on the internet.
Mine too
For the first challenge, the border radius for the top left and right of the "container" could have been 100vh, turning the container top into the "pill" shape, no?
Please do a css battle with Designcourse Gary Simon........ btw loved this video!
He is good!
Congratulation! You win!
I am third year student of CS and have been watching like millions of programming videos, just discovered your channel and you are so handsome that it's a real pleasure to learn from you :P
I am also a computer science degree pursuer and it is very pleasing to enjoy learning from Kyle
Love it 😍
Nice job Kyle
It would be great to see the battle Kyle vs some random CMS-expert -
Who will be faster and make better front end content.
These battles are so fun to watch 🤣
For the sunset you could use 9999px of border radius top. It makes it look more like a pill than ellipse
S**t got real when he said "This time i'll simplify the web for you"!!!!!
Kyle, CSS Battle with Dev Ed also please.
Awosome work guy's 😃
Batmicky is indeed tricky. I try to solve it before I see Kyle vs. Adrian battle. It last way more than 10 minutes to figure out right sizes for wings cutouts.
39:28 border-radius: 75 75 10 10 would have been way faster
This was a Hair Style epic battle 😂.
Keep doing this type of videos Kyle.
Cheers from El Salvador 😎.
Good game you guys, that batman symbol looked tricky
I think mask or clip-path is perfect for this
2:12 black and orange kinda SUS
is svg elements allowed in this ?
using that flex box to center again XD
Kyle Vs Dev ed 🔥🔥❤️❤️❤️❤️
.. border-radius percentages are based on the sides...so on a rectangle % it's not gonna give you a quarter-circle... 75px (1/2 length of the top) Would give you that....I learned this on one of your tutorials!!!
Kyle would you consider put your react course on udemy??
I want Kyle vs Tech Lead CSS battle😂😂😂
How i became more successful than a ex *
Hhhhh copy past techlead millionaire
can we see more against kevin plz
They kept referring to the last one as a bell, but I just see a lollipop lol
Guys, why in 28:45 the circule went to the other side just by using "right"?
I wanna see single div videos
it will be great to see another challenge like this with Jessica " coder coder". congrats Kyle on your victory
That is the next one I am doing :)
@@WebDevSimplified
Awesome !!!
What site ate you using to do css battle? I want to practice css using that site
It is called CSS Battle
1:04 😂😂🙌 Big Brain
Kyle vs Dev ed next please✊✊
Heheh, in a later(?) video, you talk about the difference between relative and absolute values for _border-radius,_ pointing out that you get an ugly pill-shape for non-square blocks if you use relative values.
If you in fact made that other video _before_ this one, shame on you for forgetting :P
I'm Australian and this guy's accent is definitely mixed with something else!
We want brad also, anyone who agree leave a like on this comment so he will see it.
Lol I love how he just fixed his hair in the start
I have java exams in like 2 hours, why I'm watch this now!!!....see u after the exam!...btw love ur videos!.❤️
you realize this has literally nothing to do with java?
Why not measure sizes and positions first and than put accurate values in CSS once (in stead of tails again and again)?
sorry for typos: then / instead / trials
Bahahahaha big fans of both you guys! I'm Aussie too, tell him to leave your majestic hair alone Kyle 😂 tell Adrian his accent is disappearing
Haha I hear ya mate!
@@AdrianTwarog I'd love to do some coding with you guys or have a talk sometime. Shoot me a message ya legends
lol this is really fun.
Adrian got screwed with the 91% should have been around 96% because of the width.
I agree!
i wonder why they don't make the final result as a picture as a background image and then make all div of opacity like 30 to 40 %.... rather than sliding all over the place.... :3
I just knew Kyle was gonna win from how it started.
Kyle I think I have what it takes to battle you !
Why did Adrian already have a high score registered on the first challenge? 🤔
k, now what about the js battle? CSS? Fancy pants. JS? Workhorse
Next is to challenge some subscribers!!!
Kyle, do you teach php also?
Kyle please make some videos on back-end 🙏🙏🙏.
I like your teaching style which is very easy for beginners to understand. You are a great teacher.
Please teach back-end 🙏🙏🙏🙏
Why don’t you do responsive css instead of coding pixels values?