Am I Good Enough To Solve These CSS Battles?
Summary
TLDRIn 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
🎨 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.
🔍 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.
👁️🗨️ 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.
🎭 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.
📏 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.
🏆 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.
Mindmap
Keywords
💡CSS
💡Web Development
💡Debugging
💡Flexbox
💡Positioning
💡Border Radius
💡Transform
💡CSS Battle
💡Sass
💡Responsive 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
تصفح المزيد من مقاطع الفيديو ذات الصلة
5.0 / 5 (0 votes)