Learn 3 awesome CSS tips and tricks submitted by viewers like you. Watch the original Top Ten CSS Pro Tips 👉 https://youtu.be/Qhaz36TZG5Y

#css #tips 

00:00 Responsive relative units
00:58 The ch clamp trick
01:28 HSL color magic
02:25 Scroll padding quick fix

Character Clamp Trick https://web.dev/min-max-clamp/

Yay, my comment was featured as a tip!

Send an email to "helloATfireship.io" from the same account used to comment. I will respond with a form to redeem the shirt. 

Or DM me on slack https://fireship.page.link/slack

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:53:31.031Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
f8caf778-2b29-4a1e-ac10-0d37119f4588
ef9d3ded6cb6a2e382983c3127db5c8f58b8503cb02ad4d11169dfd0787e89d9
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
A few days ago, I shared 10 of my favorite CSS techniques, and you guys responded with nearly a 1000 comments of your own pro tips, tips that are so good that they deserve their own video.
The first one from Skylark Murphy is really simple yet really powerful.
Basically, it boils down to use relative units when possible over static pixel values.
For example, when designing a responsive layout, you might have headings or containers with fixed pixel values for margin and padding.
Then you might have a media query to change those values is on smaller screens.
Not only is this difficult to maintain, but it doesn't work very well on devices that scale fonts automatically.
Instead of fixed units like pixels, we can use relative units like m or rem.
M will calculate the size automatically based on the font size of its nearest parent.
If the parent has a font size of 16 pixels, then 2 m, would compute to 32 pixels.
As an alternative, you could use rem, which is relative to the root font size.
I generally find that one more useful when working with margin and padding.
But, most importantly, notice how that got rid of the media query.
And one thing I'll add is that there are more relative units than just m and rem.
One of which is for c h or character width.
Now if you're really serious about design, you may have read the elements of typographic style by Robert Bringhurst, which says that the optimal size for a paragraph is between 45 and 75 characters.
A cool trick is that we can enforce that rule using the clamp function I showed you in the previous video.
Use it to make the min width 45 characters, the preferred width 50%, and the max width 75 characters.
And now every paragraph will be the absolute perfect with.
Now our next tip is also very simple, but also one that will change your life.
Demetra says to use HSL colors over hex or RGB.
RGB, stands for red, green, blue, where each mix of the color can be a value from 0 to 255.
Hexadecimal contains the same information, but in a more compact format, that's even harder to interpret.
HSL, on the other hand, stands for hue, saturation, and lightness.
And that format makes it way easier to compute a nice looking color palette.
If you have a hex color in Versus Code, go ahead and hover over it, then click on the top to bring up HSL mode.
On the right, you'll notice we have our hue control, which controls the color itself.
Then on the main box, if you move from left to right, it will control the ferration or intensity of the color, and if you move up and down, it will control the lightness or brightness of it.
And optionally, you can add a 4th value for opacity.
What's really cool though, is if you wanna make a color palette quickly, you can simply choose a saturation and lightness, then increment the hue by a certain amount like 25 in this case.
And now, we have a bunch of colors that look like they belong together, and that brings us to our 3rd tip from n Sharma.
An issue I often see on websites that have a fixed navbar is that when you go to an anchor link, the page will for scroll, but then the heading is covered by the fixed navbar.
It turns out there's an obscure property called scroll padding top or just scroll padding for all the other sides, which will add additional when the browser automatically scrolls to that anchor, and that gives us an easy way to fix a very common yet very annoying bug.
If you saw your comment in this video, hit me up via email or Slack because you just won yourself a free t shirt.
Thanks for watching, and I will see you in the next one.

Speaker 0: A few days ago, I shared 10 of my favorite CSS techniques, and you guys responded with nearly a 1000 comments of your own pro tips, tips that are so good that they deserve their own video. The first one from Skylark Murphy is really simple yet really powerful. Basically, it boils down to use relative units when possible over static pixel values. For example, when designing a responsive layout, you might have headings or containers with fixed pixel values for margin and padding. Then you might have a media query to change those values is on smaller screens.

Not only is this difficult to maintain, but it doesn't work very well on devices that scale fonts automatically. Instead of fixed units like pixels, we can use relative units like m or rem. M will calculate the size automatically based on the font size of its nearest parent. If the parent has a font size of 16 pixels, then 2 m, would compute to 32 pixels. As an alternative, you could use rem, which is relative to the root font size.

I generally find that one more useful when working with margin and padding. But, most importantly, notice how that got rid of the media query. And one thing I'll add is that there are more relative units than just m and rem. One of which is for c h or character width. Now if you're really serious about design, you may have read the elements of typographic style by Robert Bringhurst, which says that the optimal size for a paragraph is between 45 and 75 characters.

A cool trick is that we can enforce that rule using the clamp function I showed you in the previous video. Use it to make the min width 45 characters, the preferred width 50%, and the max width 75 characters. And now every paragraph will be the absolute perfect with. Now our next tip is also very simple, but also one that will change your life. Demetra says to use HSL colors over hex or RGB.

RGB, stands for red, green, blue, where each mix of the color can be a value from 0 to 255. Hexadecimal contains the same information, but in a more compact format, that's even harder to interpret. HSL, on the other hand, stands for hue, saturation, and lightness. And that format makes it way easier to compute a nice looking color palette. If you have a hex color in Versus Code, go ahead and hover over it, then click on the top to bring up HSL mode.

On the right, you'll notice we have our hue control, which controls the color itself. Then on the main box, if you move from left to right, it will control the ferration or intensity of the color, and if you move up and down, it will control the lightness or brightness of it. And optionally, you can add a 4th value for opacity. What's really cool though, is if you wanna make a color palette quickly, you can simply choose a saturation and lightness, then increment the hue by a certain amount like 25 in this case. And now, we have a bunch of colors that look like they belong together, and that brings us to our 3rd tip from n Sharma.

An issue I often see on websites that have a fixed navbar is that when you go to an anchor link, the page will for scroll, but then the heading is covered by the fixed navbar. It turns out there's an obscure property called scroll padding top or just scroll padding for all the other sides, which will add additional when the browser automatically scrolls to that anchor, and that gives us an easy way to fix a very common yet very annoying bug. If you saw your comment in this video, hit me up via email or Slack because you just won yourself a free t shirt. Thanks for watching, and I will see you in the next one.
A few days ago, I shared 10 of my favorite CSS techniques, and you guys responded with nearly a 1000 comments of your own pro tips, tips that are so good that they deserve their own video. The first one from Skylark Murphy is really simple yet really powerful. Basically, it boils down to use relative units when possible over static pixel values.
video gaming
youtube
For example, when designing a responsive layout, you might have headings or containers with fixed pixel values for margin and padding. Then you might have a media query to change those values is on smaller screens. Not only is this difficult to maintain, but it doesn't work very well on devices that scale fonts automatically.
graphic design
Instead of fixed units like pixels, we can use relative units like m or rem. M will calculate the size automatically based on the font size of its nearest parent. If the parent has a font size of 16 pixels, then 2 m, would compute to 32 pixels. As an alternative, you could use rem, which is relative to the root font size. I generally find that one more useful when working with margin and padding.
But, most importantly, notice how that got rid of the media query. And one thing I'll add is that there are more relative units than just m and rem. One of which is for c h or character width. Now if you're really serious about design, you may have read the elements of typographic style by Robert Bringhurst, which says that the optimal size for a paragraph is between 45 and 75 characters.
space
A cool trick is that we can enforce that rule using the clamp function I showed you in the previous video. Use it to make the min width 45 characters, the preferred width 50%, and the max width 75 characters. And now every paragraph will be the absolute perfect with. Now our next tip is also very simple, but also one that will change your life. Demetra says to use HSL colors over hex or RGB. RGB, stands for red, green, blue, where each mix of the color can be a value from 0 to 255. Hexadecimal contains the same information, but in a more compact format, that's even harder to interpret. HSL, on the other hand, stands for hue, saturation, and lightness. And that format makes it way easier to compute a nice looking color palette. If you have a hex color in Versus Code, go ahead and hover over it, then click on the top to bring up HSL mode. On the right, you'll notice we have our hue control, which controls the color itself. Then on the main box, if you move from left to right, it will control the ferration or intensity of the color, and if you move up and down, it will control the lightness or brightness of it.
And optionally, you can add a 4th value for opacity. What's really cool though, is if you wanna make a color palette quickly, you can simply choose a saturation and lightness, then increment the hue by a certain amount like 25 in this case. And now, we have a bunch of colors that look like they belong together, and that brings us to our 3rd tip from n Sharma.
cosmetics
An issue I often see on websites that have a fixed navbar is that when you go to an anchor link, the page will for scroll, but then the heading is covered by the fixed navbar. It turns out there's an obscure property called scroll padding top or just scroll padding for all the other sides, which will add additional when the browser automatically scrolls to that anchor, and that gives us an easy way to fix a very common yet very annoying bug.
If you saw your comment in this video, hit me up via email or Slack because you just won yourself a free t shirt. Thanks for watching, and I will see you in the next one.
youtube
A few days ago, I shared 10 of my favorite CSS techniques, and you guys responded with nearly a 1000 comments of your own pro tips, tips that are so good that they deserve their own video. The first one from Skylark Murphy is really simple yet really powerful. Basically, it boils down to use relative units when possible over static pixel values. For example, when designing a responsive layout, you might have headings or containers with fixed pixel values for margin and padding. Then you might have a media query to change those values is on smaller screens. Not only is this difficult to maintain, but it doesn't work very well on devices that scale fonts automatically. Instead of fixed units like pixels, we can use relative units like m or rem. M will calculate the size automatically based on the font size of its nearest parent. If the parent has a font size of 16 pixels, then 2 m, would compute to 32 pixels. As an alternative, you could use rem, which is relative to the root font size. I generally find that one more useful when working with margin and padding. But, most importantly, notice how that got rid of the media query. And one thing I'll add is that there are more relative units than just m and rem. One of which is for c h or character width. Now if you're really serious about design, you may have read the elements of typographic style by Robert Bringhurst, which says that the optimal size for a paragraph is between 45 and 75 characters. A cool trick is that we can enforce that rule using the clamp function I showed you in the previous video. Use it to make the min width 45 characters, the preferred width 50%, and the max width 75 characters. And now every paragraph will be the absolute perfect with. Now our next tip is also very simple, but also one that will change your life. Demetra says to use HSL colors over hex or RGB. RGB, stands for red, green, blue, where each mix of the color can be a value from 0 to 255. Hexadecimal contains the same information, but in a more compact format, that's even harder to interpret. HSL, on the other hand, stands for hue, saturation, and lightness. And that format makes it way easier to compute a nice looking color palette. If you have a hex color in Versus Code, go ahead and hover over it, then click on the top to bring up HSL mode. On the right, you'll notice we have our hue control, which controls the color itself. Then on the main box, if you move from left to right, it will control the ferration or intensity of the color, and if you move up and down, it will control the lightness or brightness of it. And optionally, you can add a 4th value for opacity. What's really cool though, is if you wanna make a color palette quickly, you can simply choose a saturation and lightness, then increment the hue by a certain amount like 25 in this case. And now, we have a bunch of colors that look like they belong together, and that brings us to our 3rd tip from n Sharma. An issue I often see on websites that have a fixed navbar is that when you go to an anchor link, the page will for scroll, but then the heading is covered by the fixed navbar. It turns out there's an obscure property called scroll padding top or just scroll padding for all the other sides, which will add additional when the browser automatically scrolls to that anchor, and that gives us an easy way to fix a very common yet very annoying bug. If you saw your comment in this video, hit me up via email or Slack because you just won yourself a free t shirt. Thanks for watching, and I will see you in the next one.
A
a
few
few
days
days
ago,
ago
I
i
shared
shared
10
10
of
of
my
my
favorite
favorite
CSS
css
techniques,
techniques
and
and
you
you
guys
guys
responded
responded
with
with
nearly
nearly
a
a
1000
1000
comments
comments
of
of
your
your
own
own
pro
pro
tips,
tips
tips
tips
that
that
are
are
so
so
good
good
that
that
they
they
deserve
deserve
their
their
own
own
video.
video
The
the
first
first
one
one
from
from
Skylark
skylark
Murphy
murphy
is
is
really
really
simple
simple
yet
yet
really
really
powerful.
powerful
Basically,
basically
it
it
boils
boils
down
down
to
to
use
use
relative
relative
units
units
when
when
possible
possible
over
over
static
static
pixel
pixel
values.
values
For
for
example,
example
when
when
designing
designing
a
a
responsive
responsive
layout,
layout
you
you
might
might
have
have
headings
headings
or
or
containers
containers
with
with
fixed
fixed
pixel
pixel
values
values
for
for
margin
margin
and
and
padding.
padding
Then
then
you
you
might
might
have
have
a
a
media
media
query
query
to
to
change
change
those
those
values
values
is
is
on
on
smaller
smaller
screens.
screens
Not
not
only
only
is
is
this
this
difficult
difficult
to
to
maintain,
maintain
but
but
it
it
doesn't
doesn't
work
work
very
very
well
well
on
on
devices
devices
that
that
scale
scale
fonts
fonts
automatically.
automatically
Instead
instead
of
of
fixed
fixed
units
units
like
like
pixels,
pixels
we
we
can
can
use
use
relative
relative
units
units
like
like
m
m
or
or
rem.
rem
M
m
will
will
calculate
calculate
the
the
size
size
automatically
automatically
based
based
on
on
the
the
font
font
size
size
of
of
its
its
nearest
nearest
parent.
parent
If
if
the
the
parent
parent
has
has
a
a
font
font
size
size
of
of
16
16
pixels,
pixels
then
then
2
2
m,
m
would
would
compute
compute
to
to
32
32
pixels.
pixels
As
as
an
an
alternative,
alternative
you
you
could
could
use
use
rem,
rem
which
which
is
is
relative
relative
to
to
the
the
root
root
font
font
size.
size
I
i
generally
generally
find
find
that
that
one
one
more
more
useful
useful
when
when
working
working
with
with
margin
margin
and
and
padding.
padding
But,
but
most
most
importantly,
importantly
notice
notice
how
how
that
that
got
got
rid
rid
of
of
the
the
media
media
query.
query
And
and
one
one
thing
thing
I'll
i'll
add
add
is
is
that
that
there
there
are
are
more
more
relative
relative
units
units
than
than
just
just
m
m
and
and
rem.
rem
One
one
of
of
which
which
is
is
for
for
c
c
h
h
or
or
character
character
width.
width
Now
now
if
if
you're
you're
really
really
serious
serious
about
about
design,
design
you
you
may
may
have
have
read
read
the
the
elements
elements
of
of
typographic
typographic
style
style
by
by
Robert
robert
Bringhurst,
bringhurst
which
which
says
says
that
that
the
the
optimal
optimal
size
size
for
for
a
a
paragraph
paragraph
is
is
between
between
45
45
and
and
75
75
characters.
characters
A
a
cool
cool
trick
trick
is
is
that
that
we
we
can
can
enforce
enforce
that
that
rule
rule
using
using
the
the
clamp
clamp
function
function
I
i
showed
showed
you
you
in
in
the
the
previous
previous
video.
video
Use
use
it
it
to
to
make
make
the
the
min
min
width
width
45
45
characters,
characters
the
the
preferred
preferred
width
width
50%,
50%
and
and
the
the
max
max
width
width
75
75
characters.
characters
And
and
now
now
every
every
paragraph
paragraph
will
will
be
be
the
the
absolute
absolute
perfect
perfect
with.
with
Now
now
our
our
next
next
tip
tip
is
is
also
also
very
very
simple,
simple
but
but
also
also
one
one
that
that
will
will
change
change
your
your
life.
life
Demetra
demetra
says
says
to
to
use
use
HSL
hsl
colors
colors
over
over
hex
hex
or
or
RGB.
rgb
RGB,
rgb
stands
stands
for
for
red,
red
green,
green
blue,
blue
where
where
each
each
mix
mix
of
of
the
the
color
color
can
can
be
be
a
a
value
value
from
from
0
0
to
to
255.
255
Hexadecimal
hexadecimal
contains
contains
the
the
same
same
information,
information
but
but
in
in
a
a
more
more
compact
compact
format,
format
that's
that's
even
even
harder
harder
to
to
interpret.
interpret
HSL,
hsl
on
on
the
the
other
other
hand,
hand
stands
stands
for
for
hue,
hue
saturation,
saturation
and
and
lightness.
lightness
And
and
that
that
format
format
makes
makes
it
it
way
way
easier
easier
to
to
compute
compute
a
a
nice
nice
looking
looking
color
color
palette.
palette
If
if
you
you
have
have
a
a
hex
hex
color
color
in
in
Versus
versus
Code,
code
go
go
ahead
ahead
and
and
hover
hover
over
over
it,
it
then
then
click
click
on
on
the
the
top
top
to
to
bring
bring
up
up
HSL
hsl
mode.
mode
On
on
the
the
right,
right
you'll
you'll
notice
notice
we
we
have
have
our
our
hue
hue
control,
control
which
which
controls
controls
the
the
color
color
itself.
itself
Then
then
on
on
the
the
main
main
box,
box
if
if
you
you
move
move
from
from
left
left
to
to
right,
right
it
it
will
will
control
control
the
the
ferration
ferration
or
or
intensity
intensity
of
of
the
the
color,
color
and
and
if
if
you
you
move
move
up
up
and
and
down,
down
it
it
will
will
control
control
the
the
lightness
lightness
or
or
brightness
brightness
of
of
it.
it
And
and
optionally,
optionally
you
you
can
can
add
add
a
a
4th
4th
value
value
for
for
opacity.
opacity
What's
what's
really
really
cool
cool
though,
though
is
is
if
if
you
you
wanna
wanna
make
make
a
a
color
color
palette
palette
quickly,
quickly
you
you
can
can
simply
simply
choose
choose
a
a
saturation
saturation
and
and
lightness,
lightness
then
then
increment
increment
the
the
hue
hue
by
by
a
a
certain
certain
amount
amount
like
like
25
25
in
in
this
this
case.
case
And
and
now,
now
we
we
have
have
a
a
bunch
bunch
of
of
colors
colors
that
that
look
look
like
like
they
they
belong
belong
together,
together
and
and
that
that
brings
brings
us
us
to
to
our
our
3rd
3rd
tip
tip
from
from
n
n
Sharma.
sharma
An
an
issue
issue
I
i
often
often
see
see
on
on
websites
websites
that
that
have
have
a
a
fixed
fixed
navbar
navbar
is
is
that
that
when
when
you
you
go
go
to
to
an
an
anchor
anchor
link,
link
the
the
page
page
will
will
for
for
scroll,
scroll
but
but
then
then
the
the
heading
heading
is
is
covered
covered
by
by
the
the
fixed
fixed
navbar.
navbar
It
it
turns
turns
out
out
there's
there's
an
an
obscure
obscure
property
property
called
called
scroll
scroll
padding
padding
top
top
or
or
just
just
scroll
scroll
padding
padding
for
for
all
all
the
the
other
other
sides,
sides
which
which
will
will
add
add
additional
additional
when
when
the
the
browser
browser
automatically
automatically
scrolls
scrolls
to
to
that
that
anchor,
anchor
and
and
that
that
gives
gives
us
us
an
an
easy
easy
way
way
to
to
fix
fix
a
a
very
very
common
common
yet
yet
very
very
annoying
annoying
bug.
bug
If
if
you
you
saw
saw
your
your
comment
comment
in
in
this
this
video,
video
hit
hit
me
me
up
up
via
via
email
email
or
or
Slack
slack
because
because
you
you
just
just
won
won
yourself
yourself
a
a
free
free
t
t
shirt.
shirt
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker shares their favorite CSS techniques for creating a responsive layout, including using relative units and using HSL colors over 41 or 842. They also recommend using HSL colors over greek or themes, and a 4th value for queries to avoid annoying bugs. They encourage viewers to leave comments and subscribe to their channel.
3 More Life-Changing CSS Tips
A few days ago, I shared 10 of my favorite CSS techniques, and you guys responded with nearly a 1000 comments of your own pro tips, tips that are so good that they deserve their own video. The first one from Skylark Murphy is really simple yet really powerful. Basically, it boils down to use relative units when possible over static pixel values. For example, when designing a responsive layout, you might have headings or containers with fixed pixel values for margin and padding. Then you might have a media query to change those values is on smaller screens. Not only is this difficult to maintain, but it doesn't work very well on devices that scale fonts automatically. Instead of fixed units like pixels, we can use relative units like m or rem. M will calculate the size automatically based on the font size of its nearest parent. If the parent has a font size of 16 pixels, then 2 m, would compute to 32 pixels. As an alternative, you could use rem, which is relative to the root font size. I generally find that one more useful when working with margin and padding. But, most importantly, notice how that got rid of the media query. And one thing I'll add is that there are more relative units than just m and rem. One of which is for c h or character width. Now if you're really serious about design, you may have read the elements of typographic style by Robert Bringhurst, which says that the optimal size for a paragraph is between 45 and 75 characters. A cool trick is that we can enforce that rule using the clamp function I showed you in the previous video. Use it to make the min width 45 characters, the preferred width 50%, and the max width 75 characters. And now every paragraph will be the absolute perfect with. Now our next tip is also very simple, but also one that will change your life. Demetra says to use HSL colors over hex or RGB. RGB, stands for red, green, blue, where each mix of the color can be a value from 0 to 255. Hexadecimal contains the same information, but in a more compact format, that's even harder to interpret. HSL, on the other hand, stands for hue, saturation, and lightness. And that format makes it way easier to compute a nice looking color palette. If you have a hex color in Versus Code, go ahead and hover over it, then click on the top to bring up HSL mode. On the right, you'll notice we have our hue control, which controls the color itself. Then on the main box, if you move from left to right, it will control the ferration or intensity of the color, and if you move up and down, it will control the lightness or brightness of it. And optionally, you can add a 4th value for opacity. What's really cool though, is if you wanna make a color palette quickly, you can simply choose a saturation and lightness, then increment the hue by a certain amount like 25 in this case. And now, we have a bunch of colors that look like they belong together, and that brings us to our 3rd tip from n Sharma. An issue I often see on websites that have a fixed navbar is that when you go to an anchor link, the page will for scroll, but then the heading is covered by the fixed navbar. It turns out there's an obscure property called scroll padding top or just scroll padding for all the other sides, which will add additional when the browser automatically scrolls to that anchor, and that gives us an easy way to fix a very common yet very annoying bug. If you saw your comment in this video, hit me up via email or Slack because you just won yourself a free t shirt. Thanks for watching, and I will see you in the next one.
The speaker shares their favorite CSS techniques for creating a responsive layout, including using relative units and using HSL colors over 41 or 842. They also recommend using HSL colors over greek or themes, and a 4th value for queries to avoid annoying bugs. They encourage viewers to leave comments and subscribe to their channel.