@@heliusuniverse7460 off cource it is, you can do all sorts of stuffs in website by mastering CSS well, and these stuffs are one the best way to do it.
Kevin: let's see the z-index; Me: the pain is finally over; Kevin: *selects z-index; -1; still not a clue*; Me: *screams*; Best thriller movie of the year
Yeah I can't wait to see you do these challenges... Your css and Javascript videos is doing a magic for me outhere... I'm a better web developer cos of you. .. Thanks so much... Waiting for your css battle challenge tho
It's really great to see that even the pros make mistakes from time to time. It shows us that nobody knows everything there is to CSS at all times and the learning never really stops
And you could do it with just one div :-) this is the shortest I came up with: .thing, .thing::after { position: absolute; border-radius: 50%; } .thing { background: #aa445f; width: 190px; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); } .thing::after { content: ""; inset: 30px; border: 30px solid; border-color: #f7ec7d transparent; }
hi, I'm still a noob :D, but I think I came up with an interesting way to cut the border without using additional boxes: border-top: 30px solid #F7EC7D; border-bottom: 30px solid #F7EC7D; border-left: 30px solid transparent; border-right: 30px solid transparent; transform: rotate(45deg);
Actually you can set the border-color instead for a minimal clean-up like in the way how you could do it with border-radius! border:30px solid; border-color: #F7EC7D transparent; transform: rotate(45deg);
Didn't expect you to make such hard work of the first challenge. Initial thought was to go from the inner/smaller circle and go outwards using a border (two sides transparent and rotated 45deg) and then a box-shadow to complete the shape.
This was again a really fun challenge to watch, Kevin! Thanks for doing this! And the amazing designs you generated while experimenting with border-radius in the 3rd round - Priceless! 😊🙌🏼
@@inkedcoder it could be an edge case behaviour thing and the evaluation engine could be using a different rendering engine that generates something different from what you see in the browser.
@@inkedcoder THis video was probably shot long back...our scoring engine at that time might not be the latest one supporting these new universal properties. It should work as of today.
Great site, really fun, thanks. I really want to see how people got the top scores on the latest battles though. Their code has 50% less characters than mine and I don't see how that's possible!? 🤯
I used to watch these and had no clue what you guys were doing at all. now I am actually understanding and even finding different (sometimes better) approaches myself. This happened only by watching and following you Kevin, so thank you so much for this.
It's weird tho. I thought they would be painting a canvas of the design and compare colors to a canvas of the original pixel by pixel to arrive at a score
SE here. I did some full stack before, but seeing you knock out these challenges and some of your other videos makes me want to brush off my CSS again. Good stuff!
I found all of these to be really easy if you take a second to look them over at the start. The last task was a centered square with 4 squares inside, each square then has a :before inserted in them (as you did) that displays half a circle, and then using the :nth-child selector you'd turn them around as needed... most often, any CSS problem is fixed by that kind of initial thinking and not figuring it out as you go, because if you get stuck you either/often fall into the sunk cost fallacy, or have to redo it all anyway...
positioning is the biggiest issue followed by the shapes for all the battles, centered images occur the most and you the normal centering tricks to get those positions then work on the shapes.
For the first challenge, we could just use a SINGLE div. Set background to maroon color, border-left border-right to yellow, outline again to maroon. Then rotate 45 degree.
no matter what you do, no matter how much css gets easier, this at 17:07 happens to everyone. Even to Kevin. The moment when your happy smile fades away and you wonder, what is happening :D :D
As somebody who is just starting out with TOP, I understand alot of what happened through the episode (of course not all the definitions) but seeing it come to life was like a lesson in itself, and actually really fun to watch, thanks!
Fwiw, y'all should have tried using `border-left-color: transparent`, `border-right-color: transparent`, & `transform: rotate(45deg)` on the inner circle, with a chunky border.
This is really fun to watch apart from the mic issue of Frank. I love battles especially when Kevin does typoes and pissed off :p --ps:You are the King Kevin. There is nothing convince me otherwise
For the first one an element of the size of the circle with appropriate border-width and border-radius along with border-left-color and border-right-color: transparent would give the desired effect. Then just rotate -45deg with transform.
Thanks Kevin, I had also tried the lock up challenge, and would love to share my approach... I do this stuff, by keeping only the top and bottom border as yellow color and rotating it to - 135deg... This will save some extra line of code in our css..
Woooow...Kevin is a monster. How he used those pseodo-elements in 3rd challenge in order to cut those circles. He is very talented in my opinion. Thx for the great battle! Had a lot of fun. 😅
I duuno whether I'm over simplifying things, but for the last challenge why not just have four boxes ('outer' as two rows of two) positioned 'absolute' and an overflow of 'hidden', within each place another nested box inside each ('inner', also positioned as 'absolute') and apply a border-radius, then position 50% either left, right, top or bottom (depending on the direction and the inner shape) so half the div will be filled and the other hidden. Either way brilliant to watch!
To solve the issue of the first problem, the one they solved by overflow hidden, I put a circle above that region , and used a box shadow. I made the circle color transparent, and the box shadow was yellowish like the background. This helped hide the bit of the box that was getting out of the circle.
15:16 I think you could also just provide multiple entries for box-shadow, but I think you'd need a bunch of them to avoid having a kind of "caterpillar" effect. The div is probably the way to go.
Interesting fact, if you using border-radius and need to get only two of visible borders like in the first battle you just can make other two transparent and it will work
1st one was very easy all we needed was a div which is purple located in the center and we needed border with different colors for 4 sides as well as border-radius after all we needed box-shadow with purple it would take like 3 minutes max but great video thank you.
Round one where everything works and look perfect, but the program deducts points for your choice of code. That is how my teachers would grade me. I learn a lot watching someone else code, mostly because I know barely anything about css. It is super nice to see how someone else thinks through the problem.
In the third challenge, what I think would be a better approach is to make two halfs of the circle on one color, and positioning it, then duplicating it and applying rotation to make them go the other way & chang the color
For the first challenge I feel like maybe you could use a yellow border on the center circle, but only on the bottom and top side, then rotate it 45°. I haven't tried it personally though
I like how you went overflow: hidden; instead of border-radius: 100% 0px 0px 0px; I do not know grid or anything as I only do a little CSS sometimes in my spare time, but was able to complete the challenge in time as well. Maybe you forgot that radius is from the center of a circle to the edge, so when you say 50% you basically said make it curve like a circle with half of half of the width of the square instead of the whole of the half of the width. (:
it is really amazing what you guys can do with CSS. But a question - when do you use these functions in real projects? Besides the icon fonts is it not more reasonable to create SVG graphics instead (more understandable, better maintainable)?
That's a great vid 💚💚 But in the first challenge why didn't u just use 2 divs & the inner has border with left & right transparent with rotation 45deg??😅
Heard CSSBattle for the first time, so tried to follow the first challenge and got royally confused by the different result I got from display grid and place items center. Turns out Safari and Firefox do not set the height of body to the height of its containing like Chromium does. I don't know where else to report this inconsistency. In addition, Safari and Firefox looks the same but are actually different. Chromium centers the div vertically presumably because it computes the height of body to be the same as the containing . Firefox doesn't presumably because it computes the height of body to be the height of the contents of body. Safari computes the height of body to be the containing , yet doesn't center the div vertically! I know there are inconsistencies between browsers, but I did not expect inconsistency in such a simple case. Isn't this regulated by the CSS Spec?
Oh man.. Kevin can you please do a breakdown of the top solution for Challenge target #84? I feel like I entered a new world with the svg and * appearing after closing braces?? What's with that?? Anyways, your videos are taking me to the next level of css. I've been doing battles because of you! But apparently my 100% is far different from the pros.
Wanted to try my hand at that first one since I saw all those divs. Here's what I came up with: body { background: #E38F66; } div { position: absolute; inset: 0; margin: auto; width: 200px; height: 200px; background: #AA445F; border-radius: 50%; &::before { content: ''; position: absolute; inset: 0; margin: auto; width: 40%; height: 40%; border: 30px solid; border-color: #F7EC7D transparent; border-radius: 50%; transform: rotate(45deg); } }
I also think the goal of the least characters possible becomes idiotic when you got to remove all whitespace that can be taken out, put everything on a single line, use inline style="" tags instead of and so on. I like your approach much better, going after a 100% match, not the least amount of characters. The actual CSSBattle seems to promote bad coding habits where code becomes unreadable in order to get the lowest amount of characters.
First one I had to pause and try myself. Ended up using clip-path: polygon() to individually shape the boxes within the outer circle. Def should've just made my square's smaller and align them more towards the center of the circle instead of keeping them big and over engineering the problem.
Thanks again Kevin for the battle! Rematch sometime?
Thank you, it was a blast, and we will definitely need to have a rematch one of these days!
Awesome battle!
congrats Sir, nice approaches!!!
I enjoyed the different approaches. This was awesome
fun to watch, painful to live through your positioning struggles struggles. Kevin you do great work
Me: "I'll never understand people who sit around and watch other people play video games."
Also me: (Watches 33 minutes of CSS battles.)
probably cuz this one is useful
@@MerthanMerter ah yes, drawing images using css is useful of course
@@heliusuniverse7460 its educational
@@multiarray2320 indeed. Im taking notes of some new code parts n explanation of what it does as i watch
@@heliusuniverse7460 off cource it is, you can do all sorts of stuffs in website by mastering CSS well, and these stuffs are one the best way to do it.
Minute 2: aspect-ratio: 1, I just learned the thing of the day
Thank you Kevin :)
Same I learned bro now.. 😊😊👍
@@madara_uchiha_WB Yeah I learned the same thing in the second minute. This is Crazy.
@@programmingwithraahim yeah be too, as you can see even the cssbatlle interface couldn't recognise it it wasnt colored normally....
Kevin: let's see the z-index;
Me: the pain is finally over;
Kevin: *selects z-index; -1; still not a clue*;
Me: *screams*;
Best thriller movie of the year
same 😨
Literally screaming at the guy and I couldn't even make a circle in the first place but I know that ; is fuckin wroooong
I was literally screaming too, 'KEVIN!!!! Z-INDEX!!!!!' OCD came to the play lol.
Yeah dude
Great... i'll also try these three challenges.
*oot*
Ur vids helped me a lot man. Thanks
Yeah I can't wait to see you do these challenges... Your css and Javascript videos is doing a magic for me outhere...
I'm a better web developer cos of you. .. Thanks so much... Waiting for your css battle challenge tho
Done, I completed all these three challenges, it was a lot of fun doing it
You can do a Playlist for all the battles you've done.. Wll be so exciting to watch how you go about them
@@benjamintettehnartey7937 yours too chairman
the semi-colon part killed me when you finally noticed it. 😂 i recently experienced the same thing on a project.
It's really great to see that even the pros make mistakes from time to time. It shows us that nobody knows everything there is to CSS at all times and the learning never really stops
7:12 I'm dying 😂😂😂. I don't think Kevin expected that either although that's a really cool shape he got
Was about to comment the same thing haha
His face was absolutely priceless $$
That made my day! 😂.😂.😂.
Yess I love the shape!
you know that you could use border-bottom-color: transparent; border-top-color: trasparent; and make it transform: rotate(45deg); , it's some logic
totally spot on. everyone tackles the problems from a different angle
I was sitting here thinking the same thing. :)
And you could do it with just one div :-) this is the shortest I came up with:
.thing, .thing::after {
position: absolute;
border-radius: 50%;
}
.thing {
background: #aa445f;
width: 190px;
aspect-ratio: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
.thing::after {
content: "";
inset: 30px;
border: 30px solid;
border-color: #f7ec7d transparent;
}
@@niner8275 I'm positive you can use px values for left and top and remove the translation
@@niner8275 ? it takes less characters :)
hi, I'm still a noob :D, but I think I came up with an interesting way to cut the border without using additional boxes:
border-top: 30px solid #F7EC7D;
border-bottom: 30px solid #F7EC7D;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(45deg);
Actually you can set the border-color instead for a minimal clean-up like in the way how you could do it with border-radius!
border:30px solid;
border-color: #F7EC7D transparent;
transform: rotate(45deg);
22:24 when semicolon haunts you even on the front-end
Didn't expect you to make such hard work of the first challenge. Initial thought was to go from the inner/smaller circle and go outwards using a border (two sides transparent and rotated 45deg) and then a box-shadow to complete the shape.
Was searching for this comment lmao
My thoughts exactly.
This was again a really fun challenge to watch, Kevin! Thanks for doing this!
And the amazing designs you generated while experimenting with border-radius in the 3rd round - Priceless! 😊🙌🏼
Any comment on why place items: center gave a different score than using flex?
@@inkedcoder it could be an edge case behaviour thing and the evaluation engine could be using a different rendering engine that generates something different from what you see in the browser.
@@inkedcoder THis video was probably shot long back...our scoring engine at that time might not be the latest one supporting these new universal properties. It should work as of today.
Great site, really fun, thanks. I really want to see how people got the top scores on the latest battles though. Their code has 50% less characters than mine and I don't see how that's possible!? 🤯
@@_moore lookout for the open targets
I used to watch these and had no clue what you guys were doing at all. now I am actually understanding and even finding different (sometimes better) approaches myself. This happened only by watching and following you Kevin, so thank you so much for this.
Samething
Task: name a button, that if you click a nuclear war starts
Everybody else: ultraimportant-btn
Kevin: a
I paused the video and started the battle with you too, so much fun... thanks Kevin! 😀
👍 - did you beat me?
@@KevinPowell I am not sure that I can beat you but I did the whole in about 10 minutes.. :)
The face of Kevin when it went to 7x% to 100% using Flex is a poem, like a really sad poem, Edgar Allan Poe level of sadness poem.
It's weird tho. I thought they would be painting a canvas of the design and compare colors to a canvas of the original pixel by pixel to arrive at a score
Love the content, and its really helping me. Good energy and super chill vibe ☺️
Watching Frank get 100% then Kevin moving the slider frantically to see the difference was hilarious, lol. I knew you would get it right soon enough.
SE here. I did some full stack before, but seeing you knock out these challenges and some of your other videos makes me want to brush off my CSS again. Good stuff!
This is a great watch! I love thinking along and seeing what solutions you guys come up with.
I found all of these to be really easy if you take a second to look them over at the start. The last task was a centered square with 4 squares inside, each square then has a :before inserted in them (as you did) that displays half a circle, and then using the :nth-child selector you'd turn them around as needed... most often, any CSS problem is fixed by that kind of initial thinking and not figuring it out as you go, because if you get stuck you either/often fall into the sunk cost fallacy, or have to redo it all anyway...
positioning is the biggiest issue followed by the shapes for all the battles, centered images occur the most and you the normal centering tricks to get those positions then work on the shapes.
You confused face @ 7:13 is so good ♥️
For the first challenge, we could just use a SINGLE div. Set background to maroon color, border-left border-right to yellow, outline again to maroon. Then rotate 45 degree.
Man, this was a blast to watch!
u too
That was good. Frank's last one was impressive.
I raged when I saw your z-index typo, Kevin.
I really loved this challenge. The z-index typo had me in stitches lol was funny to watch as this happens to the best of us all the time.
no matter what you do, no matter how much css gets easier, this at 17:07 happens to everyone. Even to Kevin. The moment when your happy smile fades away and you wonder, what is happening :D :D
Cool battle.Learnt some things 😃.
As somebody who is just starting out with TOP, I understand alot of what happened through the episode (of course not all the definitions) but seeing it come to life was like a lesson in itself, and actually really fun to watch, thanks!
Fwiw, y'all should have tried using `border-left-color: transparent`, `border-right-color: transparent`, & `transform: rotate(45deg)` on the inner circle, with a chunky border.
Exactly what I thought. This works like a charm. I got a score of 607 for this solution, which is pretty decent I guess.
Man, i'm in so much of awe of how fast you go through these. Incredible.
That look on your face after the second challenge, priceless. I know the feeling when messing up with a typo.
This is really fun to watch apart from the mic issue of Frank. I love battles especially when Kevin does typoes and pissed off :p --ps:You are the King Kevin. There is nothing convince me otherwise
17:39 This is how I always end up when working with CSS 😂
22:20 the semicolon reveal, is being a developer to a T, I feel so seen
Good to see that even fully fledged front end devs sometimes wonder about weird behaviours
For the first one an element of the size of the circle with appropriate border-width and border-radius along with border-left-color and border-right-color: transparent would give the desired effect. Then just rotate -45deg with transform.
Battle #1
-100% match
body {
display: grid;
place-items: center;
background: #E38F66;
}
div {
width: 200px;
height: 200px;
background: #AA445F;
border-radius: 50%;
display: grid;
place-items: center;
}
span {
height: 80px;
width: 80px;
border-radius: 50%;
border: 30px solid #F7EC7D;
border-right-color: #AA445F;
border-left-color: #AA445F;
transform: rotate(45deg)
}
👍🏻 better
for first one:
.inner {
width: 78px;
height: 78px;
border-radius: 50%;
border: 31px solid #F7EC7D;
border-left-color: transparent;
border-right-color: transparent;
transform: rotate(45deg);
}
better than adding other classes/divs/overflows, got 99.9% from first try
You could totally solve it without even adding any html element. Just use Css. The output window is an with an html and body element in it by default.
@@tinmancode bruh
Thanks Kevin,
I had also tried the lock up challenge, and would love to share my approach...
I do this stuff, by keeping only the top and bottom border as yellow color and rotating it to - 135deg...
This will save some extra line of code in our css..
Need more battle content keep it up! Hella fun to watch
great watch, guys... more of this, Kevin, please! thank you sir.
Superb ...kevin and Frank.👍
Woooow...Kevin is a monster. How he used those pseodo-elements in 3rd challenge in order to cut those circles. He is very talented in my opinion. Thx for the great battle! Had a lot of fun. 😅
I duuno whether I'm over simplifying things, but for the last challenge why not just have four boxes ('outer' as two rows of two) positioned 'absolute' and an overflow of 'hidden', within each place another nested box inside each ('inner', also positioned as 'absolute') and apply a border-radius, then position 50% either left, right, top or bottom (depending on the direction and the inner shape) so half the div will be filled and the other hidden. Either way brilliant to watch!
To solve the issue of the first problem, the one they solved by overflow hidden, I put a circle above that region , and used a box shadow. I made the circle color transparent, and the box shadow was yellowish like the background. This helped hide the bit of the box that was getting out of the circle.
Finally, something that I understand! CSS may be my calling!
The other guy sounds like a robot sinking in the ocean
Purely HECKED by a semi-colon; the real struggle LOL
Nothing against Frank but for me Kevin is always the best.
These are great. I like pausing the video and trying to solve the challenges myself (with unlimited time hehe).
15:16 I think you could also just provide multiple entries for box-shadow, but I think you'd need a bunch of them to avoid having a kind of "caterpillar" effect. The div is probably the way to go.
22:18 That site should have a CSS linter for situations like this. 🤦♂
Just some better syntax highlighting would make me so happy 😂
Totally. I think that's a feature when you have a paid account
Interesting fact, if you using border-radius and need to get only two of visible borders like in the first battle you just can make other two transparent and it will work
Thank you both of you for participation and sharing that with us!
1st one was very easy all we needed was a div which is purple located in the center and we needed border with different colors for 4 sides as well as border-radius after all we needed box-shadow with purple it would take like 3 minutes max but great video thank you.
Round one where everything works and look perfect, but the program deducts points for your choice of code. That is how my teachers would grade me. I learn a lot watching someone else code, mostly because I know barely anything about css. It is super nice to see how someone else thinks through the problem.
Those half circles can be archived with gradient background. I think it's a more elegant solution.
I played along and was surprised at how well I did. Maybe there's a css showdown in our future, should I ever become a patron >:)
In the third challenge, what I think would be a better approach is to make two halfs of the circle on one color, and positioning it, then duplicating it and applying rotation to make them go the other way & chang the color
That z-index issue you had there; I have that all the time as well.
Kevin is to smart and is using not ordinary ways thus getting punished :D. And pro tip always use 100% browser scale
For the first challenge I feel like maybe you could use a yellow border on the center circle, but only on the bottom and top side, then rotate it 45°. I haven't tried it personally though
That was great! Different approach the same result!
This was great fun to watch, even though I was screaming at my monitor about the z-index semicolon!
Thanks for exposing me to CSS battles! Will definitely keep me busy
For the 1st object in the Inner Circle you could have used border top bottom radius as transparent and then use rotate property.....
I don't even know css... but this was really fun! Going to try to create a website with CSS and JS once I finish my Flutter project
Man that z-index; -1; typo sent me wild. Never yelled at a screen before.
17:32 O no you put a semicolon instead on colon in line 27 that is why it is now working.
I've been coding emails too long..... this looks much more fun!
Oh my goth, random stranger, I really feel for you.
Battle #2 took me 11min :) It's so fun to challenge myself with you :)
Pls pls make more challenges of like this , they are really awesome 😎
for the inner circle cant we use something like
border-left: none;
border-right:none;
and then
transform:rotate(deg, any%);?
it would work too, right?
none wouldn't work, you have to make it transparent and rotate 45 degrees
@@mostafagouda1526 you are right
It's actually nice to see the experts fumble a bit 😃
I like how you went overflow: hidden; instead of border-radius: 100% 0px 0px 0px; I do not know grid or anything as I only do a little CSS sometimes in my spare time, but was able to complete the challenge in time as well. Maybe you forgot that radius is from the center of a circle to the edge, so when you say 50% you basically said make it curve like a circle with half of half of the width of the square instead of the whole of the half of the width. (:
it is really amazing what you guys can do with CSS.
But a question - when do you use these functions in real projects? Besides the icon fonts is it not more reasonable to create SVG graphics instead (more understandable, better maintainable)?
Oh for sure, SVG all the way for this type of thing. This is more about having fun and getting creative with CSS
That's what one calls, "drawing with a Buick". Just attach a pen to the bumper.
This is so much fun, thank you Kevin.
This was awesome, great tool.
I swear i had been looking at that semicolon and just waiting for you to find out 😭
5:00
It’s simple, man))
body{
background:#000;
}
.outer{
display:flex;
align-items:center;
justify-content:center;
width:100px;
height:100px;
background:#f2f2f2;
border-radius:50%;
}
.inner{
width:30px;
height:30px;
background:#f2f2f2;
border-top:15px solid black;
border-bottom:15px solid black;
border-left:15px solid #f2f2f2;
border-right:15px solid #f2f2f2;
border-radius:50%;
transform:rotate(45deg);
}
Wouldn’t clip-path be a good solution for the pinwheel semicircles?
Kevin always picks the hardest solutions
frank's border radius idea was my first approach. I was horrified seeing Kevin choose another path.
I tried the first challenge by myself - you can do it with just 2 DIVs. Make the second one without background-color - use border only
1st Battle is actually simpler than I thought, Linear gradient does the job very easily.
That's a great vid 💚💚
But in the first challenge why didn't u just use 2 divs & the inner has border with left & right transparent with rotation 45deg??😅
border radius 100% no border left and right, rotation 45deg
This was so nice!
Heard CSSBattle for the first time, so tried to follow the first challenge and got royally confused by the different result I got from display grid and place items center. Turns out Safari and Firefox do not set the height of body to the height of its containing like Chromium does. I don't know where else to report this inconsistency.
In addition, Safari and Firefox looks the same but are actually different. Chromium centers the div vertically presumably because it computes the height of body to be the same as the containing . Firefox doesn't presumably because it computes the height of body to be the height of the contents of body. Safari computes the height of body to be the containing , yet doesn't center the div vertically!
I know there are inconsistencies between browsers, but I did not expect inconsistency in such a simple case. Isn't this regulated by the CSS Spec?
The semicolon after freakin z index dude...
Oh man.. Kevin can you please do a breakdown of the top solution for Challenge target #84?
I feel like I entered a new world with the svg and * appearing after closing braces?? What's with that??
Anyways, your videos are taking me to the next level of css. I've been doing battles because of you! But apparently my 100% is far different from the pros.
Wanted to try my hand at that first one since I saw all those divs. Here's what I came up with:
body {
background: #E38F66;
}
div {
position: absolute;
inset: 0;
margin: auto;
width: 200px;
height: 200px;
background: #AA445F;
border-radius: 50%;
&::before {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 40%;
height: 40%;
border: 30px solid;
border-color: #F7EC7D transparent;
border-radius: 50%;
transform: rotate(45deg);
}
}
I also think the goal of the least characters possible becomes idiotic when you got to remove all whitespace that can be taken out, put everything on a single line, use inline style="" tags instead of and so on. I like your approach much better, going after a 100% match, not the least amount of characters. The actual CSSBattle seems to promote bad coding habits where code becomes unreadable in order to get the lowest amount of characters.
thank you very much for this video, I have a learned a lot. it seems to be flex is going to be preferable technology for the web layouts :)
question on first exercise, why dont put a before on this div, give him a border, hide left and right for example and rotate 45 deg ?
My idea about #27 is only one div with border + shadow for the 3 layers border top and bottom transparent and rotate at 135deg
It’s my Fav series!
the second I saw z-index; -1
I was like, damn, I'm gonna be screaming at my screen for a while
First one I had to pause and try myself. Ended up using clip-path: polygon() to individually shape the boxes within the outer circle. Def should've just made my square's smaller and align them more towards the center of the circle instead of keeping them big and over engineering the problem.