Am I Good Enough To Solve These CSS Battles?

Summary

In this instructional video, Kyle from Web Dev Simplified demonstrates his approach to solving complex CSS challenges live. He tackles a Deadpool-themed CSS battle, detailing his thought process from analyzing components to coding and debugging. Kyle discusses strategies for creating shapes like circles and rectangles, using properties like border-radius and transform: skew. He emphasizes learning from the process, applying these skills to real-world projects, and offers a CSS course for further learning.

Takeaways

• 🎨 The video demonstrates a live approach to solving complex CSS challenges, showcasing the thought process behind tackling unseen problems.
• 🔍 The presenter, Kyle, emphasizes the importance of understanding how different components of a design work together.
• 📐 Kyle discusses two methods for creating a black circle with a segment missing: one big circle with a red strip or two separate semi-circles.
• 🖥️ The video provides a practical example of coding and debugging live, offering insights into problem-solving in web development.
• 🌈 Kyle simplifies the Deadpool CSS battle by breaking down the design into manageable components like background, red section, and black circles.
• 🛠️ Debugging techniques are highlighted as Kyle adjusts positioning and sizing to match the target design.
• 👁️ For the eyes, Kyle decides on creating perfect half-circles and positions them accurately within the black circle.
• 🔄 Kyle experiments with different CSS properties like `border-radius` and `transform` to achieve the desired shapes and positions.
• 💯 The video concludes with a focus on achieving a high accuracy score in the CSS battle, reflecting a real-world approach to web design.
• 📚 Kyle promotes his CSS simplified course, which aims to build a strong foundation in CSS, making it easier to tackle complex coding challenges.

Q & A

What is the main focus of the video?

The main focus of the video is to demonstrate the presenter's thought process and approach to solving complex CSS challenges, specifically 'CSS battles', which are new and unattempted before.

Who is the presenter of the video?

The presenter of the video is Kyle, who works to simplify web development for viewers so they can build their dream projects.

What is the Deadpool CSS battle that Kyle starts with?

The Deadpool CSS battle involves recreating a design with Deadpool and Wolverine, inspired by the movie 'Deadpool Wolverine'.

How does Kyle approach the design of the black circle in the Deadpool CSS battle?

Kyle considers two approaches for the black circle: creating one large circle and adding a red strip in the middle, or creating two separate circles and cutting them in half. He experiments with both to determine the best approach.

What is the strategy for positioning the eyes in the Deadpool design?

Kyle decides to create perfectly cut in half circles for the eyes and positions them using top and left values, adjusting their size and rotation to match the design.

How does Kyle ensure the elements are centered in the design?

Kyle uses a combination of flexbox properties, absolute positioning, and transform properties to ensure elements like the black circle and eyes are correctly centered.

What is the significance of the red band in the Deadpool design?

The red band is a central element that runs vertically down the middle of the black circle, separating it and adding a distinctive feature to the Deadpool mask design.

How does Kyle handle the scoring system in CSS battles?

Kyle mentions that the CSS battles scoring is based on accuracy and the least amount of code, but he prioritizes writing clean, understandable code that would make sense in a real-world application over minimalism.

What is the second CSS battle Kyle attempts in the video?

The second CSS battle Kyle attempts involves creating a design with five segments that have different colors and skewed shapes.

How does Kyle use the 'skew' property in the second CSS battle?

Kyle uses the 'skew' property to create the angled shapes required for the second CSS battle, experimenting with skewY to achieve the desired angle for the segments.

Outlines

00:00

🎨 Tackling CSS Challenges

In this segment, the speaker introduces a video tutorial focused on solving complex CSS challenges. The speaker plans to tackle never-before-seen CSS battles live, demonstrating their thought process for problem-solving, coding, and debugging. The goal is to provide viewers with insights into how to approach and overcome bugs in their own coding projects. The speaker, Kyle, begins with a Deadpool CSS battle, discussing the project's components and considering different approaches to creating shapes like black circles and eyes for the design.

05:02

🔍 Deep Dive into CSS Shapes and Positioning

The speaker continues to dissect the Deadpool CSS challenge, focusing on the creation and positioning of the black circles and eyes. They experiment with creating a full circle and cutting it in half versus using two separate circles. The process involves adjusting the size, position, and border radius to achieve the desired look. The speaker also addresses the creation of the eyes, which are half-circles, and the red band that cuts through the black circle. Attention is given to the precise alignment and sizing of these elements to match the reference design.

10:04

👁️‍🗨️ Perfecting the Eyes and Final Touches

In this part, the speaker refines the positioning of the eyes within the black circle and addresses a minor issue with the red band's height and the circle's overflow. They adjust the size and position of the eyes, ensuring they are correctly oriented and aligned. The speaker also discusses the importance of testing and fine-tuning the design to achieve a perfect fit, using tools like the diff mode to compare their work with the original design.

15:05

🎭 Exploring CSS Transformations and Skewing

The speaker moves on to another CSS challenge, focusing on creating a design with unique shapes. They discuss the use of the 'skew' property to achieve the angled shapes required for the design. Through trial and error, they find the correct skew values and positions for the elements. The segment highlights the process of adjusting the CSS properties to match the design's specifications and the importance of understanding how CSS transformations work.

20:06

📏 Aligning and Positioning Multiple CSS Elements

The speaker continues to work on the second CSS challenge, focusing on aligning and positioning multiple segments of the design. They use the 'skew' property to create angled shapes and adjust the top values and left properties to position the elements accurately. The segment emphasizes the importance of breaking down a complex design into smaller, manageable sections and the strategic use of CSS properties to achieve the desired layout.

25:07

🏆 Achieving 100% Accuracy in CSS Design

In the final segment, the speaker completes the second CSS challenge and submits their design for accuracy testing. They achieve a 100% match, validating their approach to breaking down the design into distinct sections and meticulously adjusting CSS properties. The speaker also promotes their CSS simplified course, emphasizing the importance of understanding CSS fundamentals for tackling complex CSS challenges with ease.

Keywords

💡CSS

CSS stands for Cascading Style Sheets, a stylesheet language used for describing the presentation of a document written in HTML or XML. In the context of the video, CSS is used to style and position elements on a webpage, creating visually appealing layouts. The video's theme revolves around solving CSS challenges, demonstrating how to apply CSS properties to build complex designs.

💡Web Development

Web development is the building and maintenance of websites; it includes aspects such as web design, web content development, and web server and network security configuration. The video is part of a web development tutorial series aiming to simplify the process of building websites, specifically focusing on front-end development using CSS.

💡Debugging

Debugging refers to the process of identifying and fixing errors or bugs in a program or software. In the video, debugging is mentioned as an essential skill when approaching coding problems, as it involves troubleshooting and resolving issues that arise during the development process, such as incorrect positioning or sizing of elements.

💡Flexbox

Flexbox is a CSS layout module that makes it easier to design flexible and responsive layout structures without using float or positioning. The video script mentions using 'display: flex' to center content, showcasing the use of Flexbox for aligning elements within a container.

💡Positioning

Positioning in CSS refers to the specification of an element's position in a document. The script discusses absolute, relative, and static positioning, which are crucial for placing elements accurately on a webpage, such as aligning the black circle and the eyes in the Deadpool mask design.

💡Border Radius

The 'border-radius' property in CSS is used to create rounded corners on elements' borders. In the video, border-radius is used to create circular shapes, like turning a div into a circle by setting the border radius to a value equal to half of the element's width and height.

💡Transform

The CSS 'transform' property applies a 2D or 3D transformation to an element. The video script describes using the 'transform' property to translate and rotate elements, such as adjusting the position of the black circle and skewing segments to achieve the desired angled shapes.

💡CSS Battle

CSS Battle is an online platform where users can improve their CSS skills by solving design challenges using only HTML and CSS. The video's presenter attempts to solve 'CSS battles' live, which involves creating specific designs with CSS, often requiring creative use of properties and a good understanding of layout techniques.

💡Sass

Sass, which is short for 'Syntactically Awesome Stylesheets', is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. Although not explicitly mentioned in the script, the concept of writing clean and maintainable CSS, which is a theme in the video, is aligned with the benefits of using Sass.

💡Responsive Design

Responsive design ensures that web applications look good on all devices (desktops, tablets, and phones). While not directly discussed in the script, the theme of creating designs that work well across different screen sizes is implied in the video's focus on CSS, which is a fundamental aspect of responsive web design.

Highlights

Introduction to a video tutorial on solving complex CSS challenges live.

Emphasis on the thought process and problem-solving approach in web development.

Starting with a Deadpool CSS battle to demonstrate tackling a new challenge.

Strategic approach to breaking down project components for easier management.

Decision-making process between creating one full circle or two half-circles for design elements.

Live coding of the background and red section of the Deadpool mask.

Utilizing CSS properties like 'display: flex' and 'border-radius' for alignment and shaping.

Debugging and adjusting the positioning of design elements for accuracy.

Exploring different methods for creating the black circle element of the mask.

Live demonstration of coding and adjusting a black circle using CSS properties.

Discussion on the importance of centering elements and the use of 'position: absolute'.

Approach to creating a red band for the mask using the 'transform' property.

Live coding and positioning of the eyes on the Deadpool mask.

Technique for cutting a circle in half using border radius and height adjustments.

Final touch on positioning and rotating the eyes to complete the Deadpool mask.

Submission and scoring of the CSS battle to validate the accuracy of the design.

Reflection on the importance of writing clean, understandable CSS code over minimalism.

Transition to another CSS battle with a focus on creating shapes using the 'skew' property.

Live coding of a complex shape using CSS transformations for the first time.

Strategic segmentation of the design into reusable components for efficiency.

Final submission and validation of the second CSS battle with a focus on accuracy.

Promotion of a CSS course for deeper understanding and mastering CSS.

Transcripts

in this video I'm going to show you my

thought process for how I approach

complex projects by attempting to solve

multiple CSS battles entirely live these

are CSS challenges I've never seen

before and I'm going to go through my

entire thought process of how I would

approach it start writing some code

debug live any problems that I run into

and this is great for seeing how I

actually approach problems how I

overcome bugs I run into and you can

really apply some of these skills to

your own

coding welcome back to web dev

simplified my name is Kyle and my my job

is to simplify the web for you so you

can start building your dream project

sooner I'm going to get started by

tackling this Deadpool CSS battle which

has like Wolverine Deadpool that's cuz I

recently watched the Deadpool Wolverine

movie great movie if you haven't seen it

but I think this is going to be a great

starting point cuz it doesn't look like

it's too challenging but it's

challenging enough it'll make me think

through certain things so the very first

thing I like to do when I approach a

project like this is I like to look at

all the different components and think

about how they're going to work together

obviously the background is super simple

I just make a background that has that

particular color same with this red

section it's just going to be a red

circle but the more complicated sections

are going to be these black circles as

well as the white eyes so this black

circle the first thing that pops into my

mind is I could create a shape that is

essentially a black circle and cut it in

half but the problem with that is you

can see that this black circle is

actually a full circle with like a

middle segment taken out of it so if I

create a normal circle with this height

and this width and I cut it in half it

may not give me the exact rounding that

I want I may play around with both

approaches of creating one big circle

and putting a red strip down the middle

and creating two separate circles and

cutting them in half to see which one

actually gives me the approach I want

but those are the two ways I think about

that problem now the eyes these look to

be perfectly cut in half circles so I'm

just going to create a circle cut it in

half and that should be all that I need

to do so to get started we can kind of

tackle the easy things which is the

yellow and the red sections so the very

first thing I want to do is I'm going to

have this div here which is going to be

my background and I think actually I can

probably just style the body I haven't

done a CSS battle in a while but I think

I can just say body and I can give it

that exact color whoops this should be

background color there we go paste that

in and yep that did work exactly as I

want now for this div this I'm just

going to have to be the head wrapper

there we go I'm going to give it this

red color so we can say head

wrapper background color is going to be

that there we go and let's give it a

height here it looks like maybe it says

right here this is 400 by 300 pixels so

the head's probably about 200 pixels

tall and if we want to Center that we

can do that here we can just do a

display of

flex and justify our content in the

center and align our items in the

center now if we give this a width which

is probably also going to be 200 pixels

and we round it with a border radius

we'll just do 100% you can see we get a

perfect circle and when I do my

comparison here if I just do a little

diff we'll notice that these green

sections that appear mean that I am off

on the shape and if I look at the

comparison you can see that my shape is

actually a little bit lower than the one

above and it's also not quite big enough

on the or it's a little bit too big on

the bottom so I actually just need to

move it up a little bit so it's actually

not perfectly centered which I find a

little bit strange yeah it does appear

that it's just not perfectly centered so

instead of doing this what I'm going to

do is I'm just going to position this

absolutely absolute just like that we'll

say the left is going to be 100 pixels

cuz that did look like it lined up

perfectly left and right centered and

the top here I'm going to do like 90

pixels that does way too far so let's do

actually yeah 45 pixels nope so it's

going to be 50 pixels nope 55 pixels

still not quite right 56 57 looks like

I'm going the wrong way so 54 53 54

looks like it's dead on the money as you

can see there's pretty much no green

coloring at all there's just a faint

outline which is probably because my

browser is slightly zoomed in if I zoom

this out to 100% it's still there but

either way it looks pretty good at that

particular level now we can turn this

diff mode off so we can actually see our

product that we're working on and the

next thing I want to work on is going to

be the black circle and like I mentioned

there's two different ways that I can

approach this with either one Circle or

multiple circles cut in half I'm going

to get started by approaching it with

the multiple circles cut in half just

because I think that's the way that will

not work but I'm interested to see if it

actually will work so we can come in

here and we can say that this is going

to have a class which is going to be uh

black circle there we go and I'll also

give it the class of left so we know

this is going to be the the left hand

side close that off I'll copy this down

cuz I'm going to have a right hand side

as well so we'll come in here call this

one right so now we have our black

circle and for all of this we're going

to put all of our generic classes inside

of there and then we're going to have a

black circle. left which is specifically

for position it to the left so we'll

come in

here close that off and then we'll do

the exact same thing for the right

side just like that there we go so let's

look on a black circle first obviously

we need to give it a width and a height

and a background color so we'll say

background color and it is actually pure

black so that's nice and easy we'll say

the height here is going to be 90 pixels

or something like that and we'll say

that the width is going to be I don't

know let's just say 90 pixels as well so

we get essentially Perfect Circle

obviously this is not showing up as a

perfect circle I'm not really sure why

my height and width are both exactly the

same they're maybe something going on

with the display going on in these oh

it's because I have two black circles

obviously stacked on top of each other

that makes a lot of sense for now I'm

going to comment this one out so I can

work on just one of the circles at a

time and obviously this height of 90 is

not nearly big enough let's try 190

that's going to be too big we'll just do

150 I know it's probably not correct but

we can kind of get started at that point

and same thing here I'll make this 150

now I will make my border radius 100% so

we get a perfect circle and I'm going to

try just doing a little bit of work to

position this in the correct location so

here I can do a top and essentially this

is just going to be in the dead center

so it should be 50% so I can say top 50

50% and I can also say

transform and I want to translate

actually I'll just use the translate

property and I want to translate

essentially 0 and

50% actually maybe

50% 50% let me see what's going on here

so if I have just a top of 50% that's

not doing anything it looks like oh duh

I should probably position my element

absolutely first so absolute just like

that and now if I add in this you can

now see that this is perfectly hor or

vertically aligned in the dead center

just like I want it to be now I just

want to offset it a little bit we'll say

that maybe like the left property here

is going to be like 10 pixels let's see

we'll put the diff mode on not quite

right it's probably going to be 20

pixels still actually a little bit off

if I turn it off div mode it looks like

it's a little bit too big so we'll maybe

say like 25 pixels that's obviously too

far

22 still might be too far so maybe it

was going to be like 18 or

something put that diff mode back on

we'll see 17 that actually looks really

good at 17 now we just need to make sure

the height is correct cuz right now it's

a little bit too tall at 150 so we will

try 140 as our height that's actually no

it's too small actually I need to make

it a little bigger so 160

165 164 it's going to be somewhere

around there it looks like 164 lines up

pretty well with this top section but

you'll notice it's actually too wide my

circle is currently too wide and that's

because if we look at the arch you can

see the arch doesn't quite line up

exactly as it does before and that's

because this thing I think is

technically taller than it is wide just

based on the way that this curve is

working and I could try to fine-tune

this by modifying my width for example

making it 140 doesn't quite work making

it 160 actually looks like it lines up

pretty well if I try 170 it's going to

probably go the other direction and we

can see it does so 160 actually lines up

really well with this it doesn't quite

line up with the right hand side of my

circle shape I bet if I make it 164 now

I have a perfect circle still not far

enough along in this direction so let me

try making it a little bit wider we'll

say 165 166 that actually looks really

good we'll make this 166 and you'll

notice now that the entire circle shape

is essentially what I want it to be

around that entire section but again

you'll notice I now have just one full

circle here doing a circle that was cut

in half doesn't really work because

again to get the curve to be perfectly

aligned as you can see like I have right

here to get that perfect lined curve I

essentially need a circle that is this

big so I would need to cut off

essentially everything in this middle

section to make it work or I could cut

off everything to the right of here and

then copy it and cut off everything to

the left of this one in my case I'm just

going to keep this one black circle get

rid of these left and right classes I

actually don't even need them if we go

with just this particular approach and

instead we can close off this there we

go what I'm going to do is I'm going to

have a band that essentially goes just

right down the middle so we'll just call

this red band and I don't have EMT in

here so we'll say div class

Red

Band close that off there we

go and we're going to have our red band

and the Red Band for this one is just

essentially going to be the full height

of this so we can say height 100% let's

do a width of like 20 pixels it'll

probably have to be bigger than that the

background

color is just going to exactly match the

color of this Deadpool Mask so we'll

just copy that over there we go you can

now see we have a red band I obviously

need to position it in the very dead

center so we'll do

position absolute and we're going to

come in here with a left of 50%

translate of 50% that should put me in

the exact dead center and now I just

need to increase the size of this looks

like it needs to be about doubled to 40

pixels maybe 45 pixels actually that's

too far we'll try 35 pixels that

actually looks pretty good let me try 36

versus

37 I don't know I would say somewhere

around there 35 36 somewhere around

there looks really good where you can

see if we toggle between these modes you

really can't notice almost any

perceivable difference between them and

if there is any difference is most

likely due to my zoom level now I'm

going to change this to 165 and 165 to

check to see if that actually looks good

it actually looks like it's a little bit

off on this diff mode so we'll go back

to 166 166 it looks a little bit better

still maybe not perfect but it looks

pretty good at that level now the final

step is going to be positioning the eyes

in the center here for both of these so

I can just put them inside this black

circle so have a div we'll give it a

class of I and we'll also say that this

one is going to be the left because for

these ones it really doesn't make sense

to have both of these be the exact same

div I mean that would be kind of crazy

to do so we'll have the right and left

eye and again we'll do this thing where

we have our eye

left and our eye right now before we get

any further on the eye I did actually

notice one thing just looking over at

the side here there's a little bit of a

black bar you can't really see it very

well especially probably on YouTube is

almost invisible but there's a slight

back black bar at the very bottom and

the top of this black circle that we

have going on and that's because our red

band is essentially just not quite tall

enough I'm going to make it just a

little bit taller than 110% so or than

100% so we'll make it like

110% and we're also going to set our

black over or Circle to have an overflow

of hidden so it doesn't actually Escape

any of the bounds that actually still

gives us that black bar if I zoom out it

is still there that's interesting that

that black circle is still up there so

we'll get rid of the Overflow hidden

we'll come in here we'll put a top of5

pixels and this way we're just

essentially getting 5 pixels of overflow

on the top and bottom to get rid of that

black you know halo effect that was

showing up there it may be because of my

browser my zoom level not 100% sure

what's causing it but this at least will

eliminate that particular problem now

for these eyes they're going to be

pretty similar to what we have here for

this black circle so I'm just going to

kind of copy all of this that we have

paste it into here for the eye but

obviously the background color for this

one is all white as we can see over here

the size is going to be significantly

smaller so let's bump this down to like

20 pixels so we have something much more

reasonably sized to work with there we

go it looks like it's going to be a

little bit bigger than that but for now

that at least is working as we expected

to and I should probably make sure yeah

both my eye right and my eye left are

there I just need to make sure I

position them in the correct location so

they're not 100% in the very center so

this top 50% really doesn't actually

work instead I'll probably need to

manually position it with some top and

left values so let's go ahead and we'll

start with a Top Value here let's just

say we want to do 50

pixels 90 pixels and I'm going to put

this into diff mode so 90 looks like

it's too far 60 is not far enough 70 80

so we'll say it's probably somewhere

around like 75 or so that looks pretty

close and now we'll go with our left

values we'll do like 20 maybe 25 that

actually looks pretty good if I increase

the size of this circle a little bit

we'll do like 25 and 25 that looks

really good actually maybe just needs to

be a little bit biger actually so we'll

make the width a little bit more we'll

try

30 and we'll make this 30 as well and

we're just going to move the eyeball

back a little bit so we'll try 70 here

20 here maybe needs to be moved down a

little bit

too move this over a little bit maybe

move it back one that actually looks

really quite good it looks like it's in

the exact right spot it just needs to be

essentially cut in half if we move this

off of div mode yeah it looks like it

really just needs to be entirely cut in

half now probably the easiest way for us

to cut this shape in half is actually

just to only put a border on one/ half

of the shape and then essentially reduce

the height of the shape in half so to

show you what I'm talking about our

border radius here we're just going to

do it on the bottom left and let's do

the bottom

right there we go so now if we let that

save real quick hopefully it should do

something let's make it actually like a

pixel value so we like 20 pixels for

example same thing here 20

pixels that's actually not quite working

we'll move back to 100% And I think

that's because I seem to say left bottom

here let's try that I never remember the

order of all these so we'll say that

doesn't look like it's working so we'll

say border left radius here we go we got

bottom left and we got bottom top border

bottom right

radius there we go and now that has

given us a simil or half circle shape

but of course it's too tall if we cut

our height in half we should hopefully

get that shape correct I just need to

make sure that this value right here is

essentially a pixel value so we'll say

30 pixels because it needs to be

essentially a value that is the same as

our width so we'll say 30 pixels here

and now you can see I get a perfect

semicircle shape that is exactly what I

want now I just need to rotate this so

we can come in here with a rotate we'll

try 30° at first that actually looks

like the perfect rotation so that was a

pretty good guess on my part I just need

to move it down a little bit and to the

left so we'll say here that we're going

to do left a little bit we'll say I

don't know let's do it back a couple

pixels with like

15 16 17 18 now let's try moving it down

so we'll do like 67 oops that's not

right direction we need to do like 75 6

7 8 and I need to maybe move it left

just a little bit

more 18 and actually maybe need to

rotate it like 29°

28 27 looks like 28 is about correct and

maybe move it down just a little bit

more whoops that's the wrong direction

still the wrong direction that actually

is probably about correct let's do this

in normal mode looks like I maybe have

it slightly too big on the ey size so

we'll say like 29 here and I'll just

copy that down to these values here

let's actually do 28 so we can get

exactly in half for a height 28 and this

would be 14 let's see if that shrunk it

down enough it looks pretty close we'll

try moving it up a little

bit Yeah I'd say that's pretty close it

doesn't have to be perfect looks like

it's a little bit small now which is

kind of an interesting take so maybe the

29 was the correct

value there we

[Music]

go and we'd probably just need to move

it back down just a little

bit yeah it's it's a little bit tall I

don't know I think it's close enough

though it only moves a very very slight

amount when I look at it in diff mode

it's almost exactly perfect so I'd say

say that that's probably good enough now

all I need to do here is change what

I've essentially done for my left so

this will be down here so I can get rid

of this left value on this section and

the I right should just have a right of

18 pixels and I just need to rotate the

I the other direction so we move the

rotate down into here to be -28 and it

looks like that is exactly what we want

but it's positioned possibly in the

wrong location so I think maybe it's

because I need to change something about

my rotation

let's see exactly why that is or maybe

my right value needs to be modified a

little bit there you go actually just

adding one to that looks like that was

exactly what I needed to make this work

and the way that we can test to see if

this actually works is just by clicking

submit and it'll give us a ranking

essentially between 0 and 100% for how

close we are to what the actual thing

looks like and I got a score of 601 that

essentially means I have 100% accuracy

on this you can see 100% accuracy now

the scoring the way that CSS battle

works is based on the least amount of

code that you write but I generally

don't actually follow that I just like

to write the code in the way that makes

the most sense cuz generally writing the

smallest amount of code makes you do a

lot of really hacky weird things that

you would never do in a real world

application and I try to make this about

as close as possible to a real world

application now let's go back and see if

we can tackle something else on the CSS

battle so we'll just go to the overall

all the different battles and just kind

of see what there is that pequs our

interest actually I kind of like this

one right here which kind of works with

some weird shapes going on so we'll just

do this one right here so the very first

thing I like to do is just get rid of

all this extra code we really don't need

it and I actually like to put my CSS

Styles at the top it's just more like

how I actually write CSS so here we go

this is what we're going to work on

first of all we're going to get our body

color the most straightforward thing we

can

do background color is going to be just

like that there we go and then we

essentially just have two different

types of shapes that we're going to be

giving these two different colors so I

have 1 2 3 four five different segments

that I want to do and the interesting

thing to note is that segment one and

five and segment two and four are

essentially the exact same thing they're

just positioned in slightly different

locations so that shouldn't actually be

that hard for me to do so we can come

into here and we can specify different

segments that we have so we can say

segment one which should be essentially

the same as segment 5 there we go I'm

going to put them both in the same

selector and then we're going to have

segment two and also segment

4 and those are going to be in the exact

same

selection and then finally segment three

now to actually style these segments is

essentially just going to be creating a

rectangle and I think what we're going

to want to do is use the skew property

to give us this angled shape on it but

I'm not 100% sure it's not a property I

use almost at all in my day-to-day CSS

work so let's just go ahead and we're

just going to get started with something

really simple I'll create a single div

and we're just going to give it a class

of segment one just to get us something

to get started with background

color is going to be this color right

here there we go width let's just say

it's going to be 50 pixels

and we'll do a height of 100 pixels just

so we can see it on the screen there we

go we have it right there I should

probably get rid of any padding that I

have on here as well or margin there we

go that way we have nothing extra

showing up on our screen and now I'm

going to just move this down I think

it's just it's actually not quite

centered I don't think but we can try

centering it we can say top

50% position

absolute and we can say translate 0 and

50% there we go that should translate us

to the correct location doesn't look

like it's moving though and I think

that's cuz there should be no comma here

there we go so it actually looks like it

may actually be centered it looks like

it is actually lining up perfectly and I

think I actually have the height of this

element right the width is also correct

actually that's kind of surprising all I

need to do is try to skew it into the

correct location so I think the skew

property is what I need but like I said

I almost never used this so we'll say

transform skew and we'll see exactly

what we need to do here so let's try

skew X and we'll just put in a value I

think it's based on degrees so we'll say

20° obviously that looks to be the wrong

direction for the skew so we'll say -20°

and this actually doesn't quite look

like what I want because I only want the

tops and the bottoms to be moving I

don't actually want the sides of it so

let's try skewing in the y direction

there we go that is actually what we

want we'll do 20° we do a little diff on

this and now let's try skewing it a

little bit further maybe it's

25° nope 25 there we go that looks like

it lines up perfectly for the angle of

the thing now I just need to make sure

the position is correct it looks like I

need to move it down a little bit

further and that's because the skew

essentially just moved the position of

this so I'm going to put this Top Value

in pixels we'll get rid of this

translate because we don't actually need

it so we'll say 100 pixels see if that

lines up we'll use the diff tool for

this

120

110

105 looks like 110 was pretty close

let's come in here and look at this

maybe I need to skew it slightly more in

One Direction or the other so we like

26° that actually might be more correct

and we'll try moving this down just a

little bit that actually looks perfect

so if we look at the actual view here

and analyze yeah I can't really notice

any difference between these so this is

a good example of me kind of knowing

about this skew property I should

probably capitalize the Y here just so

it looks a little better so doesn't say

skewy so it's just a thing that I was

familiar with this skew property I've

never really used it all I knew is that

it was a way to make shapes kind of bend

a little bit and have this little angle

to them and just by tinkering around I

was able to stumble upon the correct

answer but a lot of times just stumbling

upon the correct answer doesn't happen

like I noce SK X doesn't work and skew

doesn't work and skew y I happen to find

out is the one that worked but if I

didn't ever find out what was working

and I knew that skew was probably what I

wanted I could just easily go to ndn

look up the documentation for skew they

have tons of examples and I would find

an example that essentially looked like

this and I'd be like oh that's probably

what I need so now that we have segments

done I want to come in here with a

second or uh separate selector for

segment one and that's going to be

specifically just for positioning the

left property so where do I have the

left property obviously I don't have a

left property so we'll do segment five

here because obviously this is as far

left as it goes so I'm going to copy

this do segment five and all I want to

do is say right of zero and there we go

that should put it in the correct

location but it looks like it doesn't it

is way off it needs to be either lower

or higher so I'm going to move my Top

Value up into segment

one there we go segment one put a Top

Value in here and this one I'm going to

have a separate Top Value which is going

to be pretty similar so we'll start with

100 pixels and I'll move the Top Value

out of here there we go let's do

90 80 there we go and I think I need to

go a little lower so 85

86 oops pixels there we go 87 there we

go 87 looks perfect so we'll keep it

just like that so now I have everything

for Segment 1 and five entirely done now

we can move on to segment two which is

going to be pretty similar so I'll just

take the code in here directly copy this

I'll make sure I add a semicolon to the

end of here just because that's good

practice for when you're writing actual

CSS code background color for this one

is going to be this darker color so

we'll paste that in and the width for

these is going to be quite a bit wider

so I'll come in here we'll get segment

two and four and I might as well while

I'm at it add in segment three so

segment two is going to have the exact

same height but I believe the width is

probably about double so we'll say it's

going to be 200 pixels sorry 100 pixels

for the width there we go and now all I

need to do is just move it down to the

position that I want it to be so we can

come into here and select just segment

two there we go and I'm actually going

to move this code up a little bit

into here abouts there we go just so I

get it in between segment one and

segment 5 to kind of keep it aligned a

little bit better we'll minimize these

back down and this one is just going to

have a Top Value there we

go and for now I think I'm actually

going to comment out segment four so it

doesn't get in the way of what I'm

working on also my skew direction is

probably going to be the exact same but

with a negative value so let me come

into here change this to a negative

value and skew me upwards instead of to

the downward Direction so my left

property let's see if just putting in 50

pixels lines me up and of course it does

that is great now all we need to do is

move this down a little bit more so

we'll do 90 95 maybe even 100 actually

100's looking very close let's try 101

102 it's going the wrong way try 99 98

99

that looks really quite good let's see

yeah I really don't notice almost any

difference other than it needs to

actually move down a little bit so let's

try 100 yeah 100 looks really good I

like that looks like the skew is maybe a

little off though because if I look at

the far right side it should be bent

down a little bit more so I might

actually have to skew this slightly more

for example we'll just come into the

diff mode here we'll see how this looks

with 27 versus 25 26 27

27 looks decent let me just try moving

this up a little bit 99

pixels 98

99

100 oops

99 it looks pretty good I think what I'm

going to do is I'm just going to go back

to when I had 26 move this to 100 and I

think that's probably good enough again

it's probably just a little bit of

zooming of my browser if I zoom it out a

little bit still off by a little bit but

honestly you get the gist it's pretty

much the exact same thing so now we can

mess with segment number four so we can

come in here segment four is essentially

the exact same thing but I need to

change this to be the right property

just like that I want to comment segment

4 back in and if we look at the diff

mode it actually lines up perfectly so

we don't really need to change anything

at all which is great because the top

value for Segment four and two is the

same so we can just leave it directly

into there and take it out of here I'm a

little bit curious why the top segment

or the Top Value was different for

segment one versus segment 5 little bit

strange but overall nothing really to

worry about now the final segment is

going to be segment number three which

actually looks to have the same skew as

the other ones so we'll come into here

with segment three I'm going to copy

essentially everything I have in here

this one is going to be at positive 26°

the color is going to be slightly

different for this one and we need to

specify our left property which I

believe is just going to be 150

pixels there we go and that actually

does line up properly now we just need

to make the height of this a little bit

bigger so I think it's going to be 200

which which will drop our Top Value by

50 and it looks like that actually just

lines up perfectly we don't even need to

make any other changes so the nice thing

about this shape the way that I kind of

analyze it this whole entire CSS design

is I was able to break it down into

distinct sections I notice section one

and section 5 are identical just placed

in slightly different locations same

things with section 2 and section 4 they

are identical just again placed in

slightly different locations and section

3 is really just like a really big

version of Section 1 and section 5 if we

actually look at the code for Segment 3

here you can see this one has a width of

50 and a height of 100 for Segment 1 and

5 this is just a width of 100 height of

200 so it's literally just doubled the

values of the previous one relatively

straight forward and now if I do a quick

submission I should hopefully see that I

have 100% accuracy on this I'd be pretty

surprised if I didn't because it's

really pretty much exactly there and if

I close out of this you'll notice we get

100% match now if you want to be able to

tackle CSS problems like this with

relative ease I highly recommend

checking out my CSS simplified course

it's linked down in the description

below this course covers everything you

need to know about CSS from the absolute

Basics all the way up to complex things

like animations and responsive designs

and the best part is it really Builds on

the core fundamental knowledge of

understanding how CSS Works which makes

it really easy to write more complex CSS

code since you know exactly what each

line of CSS is doing that's why I

created this course to really help me

and other people understand CSS at a

fundamental level so if you're

interested in that I highly recommend

you check it out in the description down

below with that said thank you very much

for watching and have a good day