⚔️ CSS Battle #1 - Push Button

Just doing some CSS Battle #1 - Push Button. Learning about some circles and rectangles and overlap in css. Fun stuff!

------------

I'm a full stack web developer who has been in the industry since 2013. There is a lot of things I have learned along the way and I'd like to share that knowledge with anyone wanting to learn!

like this video if you found it useful and would like to see more videos of the same content.

subscribe to my channel if you are trying to improve your abilities as a web developer, software engineer, or even if you are just learning to code.

Don't forget to turn on those bell notifications!

Book mark these links!

[orEmile]

If you want to center something with position absolute:
div {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}

[sck]

If you give the div the following property, you only actually need one element:

background: radial-gradient(circle at center, #EEB850 0 25px, #243D83 25px 75px, #6592CF 75px 125px, #243D83 125px)

[miken]

I put the circles inside each other, and all of them inside the rectangle. Then I used
display: flex; on the rectangle
then
justify-content: center;
align-items: center;

Cenrters everything up and makes it really easy to find the right sizes.

[narendramuppala]

I got the same CSS challenge in my interview and I cracked it. Though I dint see this video, your other CSS battle videos helped me understand the basics. Thank you Web Dev Junkie :)

[ZoranVasicMiki]

Hey dude, when you center with absolute, this is the perfect case for centering. If you look close enough you will see that all elements are in exact center, so what you do is like this:

{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
}

And then you only need to worry about width and height of the element.Also a good thing is to have a class called center and then apply those attributes to all the elements with class, you save a lot on characters :)

Happy CSS Battle

[TimKeeley]

I did the entire circle section with one div. The lighter outer ring was a border of an inner circle with no color to show the darker color behind. Then for the little yellow circle I just styled it by targeting that div::after

[WebDevCody]

I'm a noob... you can easily use absolute positioned elements inside a flexbox container instead of doing all these top / left positioning. You live and you learn!

To center a div, just use this class
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

[vaibhavmevada]

I am also doing css because I love css, html & java script

[codahub]

small circle is 50px while the bigger is 150px. I hard to use a ruler to get that, 100% match.

[shrblv]

Hey man, your vids have been popping up lately since ive also done some battles myself, very nice content. As a viewer however, may i suggest you also focus on minifying the code? i think that would be interesting as it would offer different takes on possible solutions. Simplifying for example:

<div
to just
<p b>
and addressing the element as [b]{…} in the css?

i know this might not be the purpose of your channel but it would definitely be interesting. For this particular challenge you could go just with:

<style>body{background:radial-gradient(circle, #EEB850 24px, #243D83 25px 74px, #6592CF 75px 124px, #0000 125px), linear-gradient(#243D83, #243D83) no-repeat center/300px 150px, #6592CF

For the entire thing, since you dont even need to close the tags. Just a suggestion, greets!

[pacoalvarez]

Great video Cody. I took a little different approach. I centered everything with display flex and then just sized and colored the div's. Here's my solution guys in case anyone wants to check it out. I scored 608 points with 100% match with 409 characters (not minified).

<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<style>
body{
background:#6592CF;
display: flex;
align-items: center;
justify-content: center;
}
div{
position: absolute;
width:50;
height:150;
background:#243D83;
border-radius: 50%;
}
.d1 {
height:50;
background:#EEB850;
z-index: 3;}
.d2 {
width: 150;
z-index: 2;
border: #6592CF solid 50px;}
.d3 {
width: 300;
border-radius: 0;}
</style>

[lowercase]

One yellow circle with a border and a shadow might save you some time there.

[Freakzie]

you could do: background-image :radial-gradient(bla bla bla);

[LoneWolf-xwiw]

Hey Cody, how is your wife doing? Just saw your video on her being sick. I’m hoping she’s fine!

[confessionstesting]

Would be much easier and cleaner if you used flex box instead of absolute positioning.

[ediancomachio]

Your channel has a really nice vibe! Definitely subscribed

[NickBerens]

<p m>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #6592CF;
}
p[m] {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 150px;
background: #243D83;
overflow: hidden;
}
p[m]:after {
content: '';
position: absolute;
z-index: 1;
height: 50px;
width: 50px;
border-radius: 50%;
background: #EEB850;
box-shadow: 0 0 0 50px #243D83, 0 0 0 100px #6592CF;
}