transition delay and as you might guess there is a
and as you might guess there is a shorthand so i'm going to comment all of
shorthand so i'm going to comment all of those out with shift alt and the letter
those out with shift alt and the letter a
a and now i'm just going to say
and now i'm just going to say transition
transition and here i can say
and here i can say all of the transitions
all of the transitions instead of any specific one i'll say i
instead of any specific one i'll say i want them all to last two seconds and
want them all to last two seconds and all of them to have a half second delay
all of them to have a half second delay and i can save that and handle it all in
and i can save that and handle it all in one line so now when i mouse over
one line so now when i mouse over it just takes two seconds and it
it just takes two seconds and it finishes these still apply the same
finishes these still apply the same just a two second switch to the color
just a two second switch to the color now we can also provide a timing
now we can also provide a timing function here and there are some
function here and there are some definitions or other ones that are
definitions or other ones that are already defined essentially that we can
already defined essentially that we can put in here so the default
put in here so the default is ease but we could also put in some
is ease but we could also put in some others let's go ahead and set this up by
others let's go ahead and set this up by saying transition and now let's see
saying transition and now let's see timing function this is what we would be
timing function this is what we would be looking for a lot of different values
looking for a lot of different values that could go in here but the default is
that could go in here but the default is ease but once i start typing ease you
ease but once i start typing ease you can also see there's ease in ease in and
can also see there's ease in ease in and out or just ease out now what this means
out or just ease out now what this means and i usually can't tell much of a
and i usually can't tell much of a difference between ease and ease in and
difference between ease and ease in and out but it starts slow and then it
out but it starts slow and then it speeds up
speeds up and then once again it slows down at the
and then once again it slows down at the end so i'll just choose ease even though
end so i'll just choose ease even though that's the default
that's the default and let's go ahead and look at this now
and let's go ahead and look at this now well we can see more in the rotation so
well we can see more in the rotation so it starts slow it speeds up and it ends
it starts slow it speeds up and it ends slow now the opposite of that would be
slow now the opposite of that would be to say linear so it does everything at
to say linear so it does everything at an even pace and now you can see
an even pace and now you can see it just there's not a huge difference
it just there's not a huge difference but there's a little bit of difference
but there's a little bit of difference so you can provide this function and if
so you can provide this function and if you do so you can provide it right here
you do so you can provide it right here after how long the transition will take
after how long the transition will take so right here is where we might say
so right here is where we might say linear and of course move this comment
linear and of course move this comment over here
over here and save and now this should still apply
and save and now this should still apply the linear see it's not as fast as the
the linear see it's not as fast as the e's i kind of like the ease or let's try
e's i kind of like the ease or let's try ease in and out and see if we notice
ease in and out and see if we notice much of a change i don't usually but
much of a change i don't usually but let's see what we get does speed up and
let's see what we get does speed up and slows back down so i do like that a
slows back down so i do like that a little bit better personally than linear
little bit better personally than linear but both are available and remember if
but both are available and remember if you don't apply one ease on its own is
you don't apply one ease on its own is the default so even if we didn't say
the default so even if we didn't say ease in and out or linear or anything
ease in and out or linear or anything and we just left it as this it would
and we just left it as this it would apply the ease timing function as is now
apply the ease timing function as is now we've learned about transform and
we've learned about transform and transitions that can help us make a
transitions that can help us make a little more impact with the
little more impact with the transformations let's scroll for some
transformations let's scroll for some more room and now learn about animations
more room and now learn about animations that's just a little different so i'm
that's just a little different so i'm going to go ahead and start defining the
going to go ahead and start defining the class animate if you remember we applied
class animate if you remember we applied this class to this last div
this class to this last div inside of the html
inside of the html so for animate the first thing we need
so for animate the first thing we need to do is name our animation so we should
to do is name our animation so we should have animation dash
have animation dash name and here i'm just going to name
name and here i'm just going to name this slide
this slide then an animation
then an animation dash duration and i'll give this five
dash duration and i'll give this five seconds
seconds an animation let's spell that correctly
an animation let's spell that correctly again
again timing function and thank goodness
timing function and thank goodness visual studio code helps me spell here
visual studio code helps me spell here i'll say ease in
i'll say ease in and out so you can see this is a lot
and out so you can see this is a lot like a transition so far but you will
like a transition so far but you will notice a difference as well
notice a difference as well and we can provide an animation delay
and we can provide an animation delay let's let's delay this by one second
let's let's delay this by one second that's just a little bit longer we can
that's just a little bit longer we can also give
also give an animation iteration count so i'm
an animation iteration count so i'm going to have it repeat this animation
going to have it repeat this animation five times now let's go ahead and just
five times now let's go ahead and just go with those properties for now but
go with those properties for now but this in itself won't apply the animation
this in itself won't apply the animation we need to define key frames for the
we need to define key frames for the animation so we say at
animation so we say at keyframes and then we need to have an
keyframes and then we need to have an identifier here and the identifier is
identifier here and the identifier is the animation name slide
the animation name slide so now inside of this we'll say at zero
so now inside of this we'll say at zero percent essentially at the beginning of
percent essentially at the beginning of the animation we will
the animation we will transform
transform and then we'll translate x
and then we'll translate x and here inside of translate x i'll just
and here inside of translate x i'll just say zero so we're starting at square one
say zero so we're starting at square one we're not doing anything right when it
we're not doing anything right when it begins but then at 33 percent or one
begins but then at 33 percent or one third of the way through will once again
third of the way through will once again say
say transform and now i'll say translate
transform and now i'll say translate x
x and we'll move this 600 pixels to the
and we'll move this 600 pixels to the right so this will probably go way off
right so this will probably go way off the screen
the screen and then we'll rotate
180 degrees and notice there's no comma between those which is strange but
between those which is strange but that's the way it likes it in css so
that's the way it likes it in css so we'll just leave it like that after that
we'll just leave it like that after that i'm going to highlight this and do shift
i'm going to highlight this and do shift alt and the down arrow we'll change this
alt and the down arrow we'll change this 6
6 33 to a 66 so now we're two thirds of
33 to a 66 so now we're two thirds of the way through
the way through and now i'll switch this to a minus 600
and now i'll switch this to a minus 600 pixels
pixels and a minus 180 degrees so we're
and a minus 180 degrees so we're applying more than one thing here again
applying more than one thing here again no comma
no comma and then finally we'll get to a hundred
and then finally we'll get to a hundred percent
percent and at a hundred percent
and at a hundred percent i'm going to go ahead and say transform
i'm going to go ahead and say transform and our translate
and our translate x once again will be back to the zero
x once again will be back to the zero position
position and after that let's change the
and after that let's change the background color when we get to the
background color when we get to the final position to rebecca purple and
final position to rebecca purple and there will be a reason we want to see
there will be a reason we want to see this and how it changes so notice now it
this and how it changes so notice now it started animating right when i saved it
started animating right when i saved it didn't wait for a hover it's an
didn't wait for a hover it's an animation and let me go ahead and
animation and let me go ahead and pull this over to the full screen so we
pull this over to the full screen so we can see the full animation
and there's at least three now notice it changes back to green when
now notice it changes back to green when the animation starts again and that's
the animation starts again and that's something else to discuss
something else to discuss but let's go ahead and let it finish the
but let's go ahead and let it finish the five times and you can see it's going
five times and you can see it's going the 600 pixels in each direction it's
the 600 pixels in each direction it's rotating as we want it to and it changes
rotating as we want it to and it changes colors at the end but then it changes
colors at the end but then it changes back to green and it's back in that
back to green and it's back in that starting state so since we have a
starting state so since we have a smaller screen over here let's maybe
smaller screen over here let's maybe change these to 300 it'll probably still
change these to 300 it'll probably still make it to the edge or beyond of the
make it to the edge or beyond of the screen but we'll leave it at that and
screen but we'll leave it at that and then let's go ahead and add some more
then let's go ahead and add some more animation properties above and the next
animation properties above and the next one that i want to add is the animation
one that i want to add is the animation dash direction now the default here is
dash direction now the default here is just normal
just normal but that's not exactly what we have to
but that's not exactly what we have to choose so let's get those back up here
choose so let's get those back up here and there's alternate alternate reverse
and there's alternate alternate reverse reverse let's say alternate so that
reverse let's say alternate so that means it's going to go forward the first
means it's going to go forward the first time and then it's going to reverse the
time and then it's going to reverse the next time so when i save this it will
next time so when i save this it will start again
start again had that one second delay it went a
had that one second delay it went a little to the left a little to the right
little to the left a little to the right and then it stops now it went to the
and then it stops now it went to the left instead of the right first back to
left instead of the right first back to the right and stops and so on so now
the right and stops and so on so now we've seen those changes the next
we've seen those changes the next property to look at is animation fill
property to look at is animation fill mode so we'll say animation dash
mode so we'll say animation dash fill mode and now what happens here is
fill mode and now what happens here is we are talking about the actual ending
we are talking about the actual ending state
state so the default is backwards as you see
so the default is backwards as you see visual studio code brings up and that
visual studio code brings up and that means it goes back to the original state
means it goes back to the original state it now has that green background again
it now has that green background again but if we say
but if we say forwards
forwards when it stops
when it stops it should now go to that other state
it should now go to that other state then i'm going to shorten this up so
then i'm going to shorten this up so here we'll save it so it goes forward
here we'll save it so it goes forward once and then backwards once and then
once and then backwards once and then we'll be at the ending state so there
we'll be at the ending state so there was our forward now we go backward
was our forward now we go backward but when we get to the very end let's
but when we get to the very end let's see if it goes back to green or not well
see if it goes back to green or not well it did because we alternated so let's
it did because we alternated so let's switch this alternation back to normal
switch this alternation back to normal because
because it was the opposite when it did the
it was the opposite when it did the alternate the second time so there we
alternate the second time so there we end at purple
end at purple then it goes back to green and starts
then it goes back to green and starts again
again and now we're back to purple
and now we're back to purple and it stayed purple that's the point of
and it stayed purple that's the point of this animation fill mode since we set it
this animation fill mode since we set it to forwards instead of backwards it
to forwards instead of backwards it keeps the ending state so it stayed
keeps the ending state so it stayed purple now again there are some other
purple now again there are some other animation properties that you can dive
animation properties that you can dive into the mdn link that i'm going to
into the mdn link that i'm going to leave in the course resources because
leave in the course resources because there's a lot more you can do i'm just
there's a lot more you can do i'm just touching on the basics here today but
touching on the basics here today but once again look at how many properties
once again look at how many properties we had to use and we can use shorthand
we had to use and we can use shorthand instead of all those so i will comment
instead of all those so i will comment all of those out and now let's just
all of those out and now let's just apply the shorthand we'll say
apply the shorthand we'll say animation
animation that's going to last five seconds let's
that's going to last five seconds let's use
use ease in and out
ease in and out and then we'll say
and then we'll say one second delay and then let's do the
one second delay and then let's do the animation twice
animation twice let's say normal so it does it the same
let's say normal so it does it the same way both times
way both times and then the ending state will be
and then the ending state will be forwards
forwards and the animation name of course we have
and the animation name of course we have to provide and that is slide so if we do
to provide and that is slide so if we do that this should apply the same as we
that this should apply the same as we had all of these properties above but
had all of these properties above but this is shorthand so you can see how all
this is shorthand so you can see how all of these values fit into that one
of these values fit into that one shorthand line here for animation now
shorthand line here for animation now we've completed the basics about
we've completed the basics about transformations transitions and
transformations transitions and animations so let's go ahead and begin
animations so let's go ahead and begin working on that animated mobile nav menu
working on that animated mobile nav menu that will give us an animated hamburger
that will give us an animated hamburger icon and animated drop down menu that
icon and animated drop down menu that users could apply so to do that we need
users could apply so to do that we need to look at our other starter code i'm
to look at our other starter code i'm going to show the file tree again i'm
going to show the file tree again i'm also going to stop live server for now
also going to stop live server for now because we'll launch a different html
because we'll launch a different html file i'm going to drag this back over to
file i'm going to drag this back over to the full window
the full window and then we'll look at the menu.html
and then we'll look at the menu.html this will also be in your starter code
this will also be in your starter code and for the menu html we have got a
and for the menu html we have got a basic page here but there's a little
basic page here but there's a little more than in the previous example we
more than in the previous example we have a header element inside of the body
have a header element inside of the body and you can see this header element has
and you can see this header element has a section inside of it and it has the
a section inside of it and it has the class header title line and here we have
class header title line and here we have our h1 that says acme co and then we
our h1 that says acme co and then we have a button as well
have a button as well and inside this button is a div
and inside this button is a div and it has the class menu icon the
and it has the class menu icon the button has the class menu button and
button has the class menu button and then we have a nav element and inside
then we have a nav element and inside the nav element is an unordered list
the nav element is an unordered list with four list items now they are
with four list items now they are basically fake links with just the
basically fake links with just the hashtag that you would use as an anchor
hashtag that you would use as an anchor for the same page but i am going ahead
for the same page but i am going ahead and passing one link to a products page
and passing one link to a products page and this products page is basically just
and this products page is basically just like the menu.html page but of course it
like the menu.html page but of course it links back to the menu.html page just so
links back to the menu.html page just so we can see the difference there i have
we can see the difference there i have absolutely nothing in the main element
absolutely nothing in the main element this is all about the header and
this is all about the header and creating the menu around this header
creating the menu around this header structure so from there let me close
structure so from there let me close this style css and the index.html let's
this style css and the index.html let's look at the menu css that is being
look at the menu css that is being imported and what we have for starter
imported and what we have for starter code before we really start animating
code before we really start animating this menu so what we have again is the
this menu so what we have again is the import of the font basic css reset and
import of the font basic css reset and then we're setting two css variables
then we're setting two css variables just for the colors that we'll reuse in
just for the colors that we'll reuse in different areas the background colors of
different areas the background colors of flat black and then white smoke for the
flat black and then white smoke for the font color
font color and then the html itself once again just
and then the html itself once again just like the previous example has a font
like the previous example has a font size of one and a half rim set the font
size of one and a half rim set the font family to nanito so that's all inherited
family to nanito so that's all inherited the body has 100 viewport units min
the body has 100 viewport units min height and then is set to flex and a
height and then is set to flex and a column again and then the header itself
column again and then the header itself has a background color that's the header
has a background color that's the header background color and we set the basic
background color and we set the basic color here so we don't see a whole lot
color here so we don't see a whole lot of difference but i'm going to go ahead
of difference but i'm going to go ahead and launch this page now with live
and launch this page now with live server and drag visual studio code over
server and drag visual studio code over to the left
to the left and it looks like it launched the other
and it looks like it launched the other page so i'll need to change that
page so i'll need to change that and then inside of here i'm going to say
and then inside of here i'm going to say slash
slash menu.html now right now this doesn't
menu.html now right now this doesn't look too great we don't have a whole lot
look too great we don't have a whole lot that looks good for sure we have our
that looks good for sure we have our acme co here and then we've got our
acme co here and then we've got our links here as well and maybe a little
links here as well and maybe a little something odd there but now we'll start
something odd there but now we'll start to apply some other styles i'm going to
to apply some other styles i'm going to do ctrl b again to hide the file tree
do ctrl b again to hide the file tree and we can start with that header title
and we can start with that header title line and if you remember i believe
line and if you remember i believe that's what this is is the button we had
that's what this is is the button we had the acmeco h1 and then we had a button
the acmeco h1 and then we had a button all inside of that section element that
all inside of that section element that had the class header title line so i'll
had the class header title line so i'll put
put header dash
header dash title dash line and we'll start to apply
title dash line and we'll start to apply a few styles there let's give a padding
a few styles there let's give a padding 0.25 rim on top and bottom and 0.5 rim
0.25 rim on top and bottom and 0.5 rim on the left and the right
on the left and the right we'll set it to a display of flex
we'll set it to a display of flex and from there let's go ahead and set
and from there let's go ahead and set the flex dash flow
the flex dash flow and this will be a row instead of a
and this will be a row instead of a column and we'll say no wrap again
column and we'll say no wrap again and then after that let's justify the
and then after that let's justify the content and we want space between so we
content and we want space between so we go hard left and hard right with the
go hard left and hard right with the content we have which should be the h1
content we have which should be the h1 and the button i'll save this much and
and the button i'll save this much and we do see the change so now we see a
we do see the change so now we see a line over here that would be the button
line over here that would be the button we didn't really do much with it yet and
we didn't really do much with it yet and we've got our h1 over here okay after
we've got our h1 over here okay after our
our header title line class let's get the
header title line class let's get the next class which was menu dash button
next class which was menu dash button this is the button itself and i did use
this is the button itself and i did use a button element so we don't have to
a button element so we don't have to apply some other things and it's great
apply some other things and it's great for accessibility such as hitting the
for accessibility such as hitting the tab button it will automatically get
tab button it will automatically get focus on a button element if we used a
focus on a button element if we used a div for example we'd have to put in a
div for example we'd have to put in a tab index and there's some other
tab index and there's some other advantages as well but that's a big one
advantages as well but that's a big one okay for the menu button we'll say
okay for the menu button we'll say background dash color
background dash color and now we'll set that to transparent
and now we'll set that to transparent because we don't want that normal button
because we don't want that normal button color that we get and then we'll also
color that we get and then we'll also set the border to none because buttons
set the border to none because buttons usually do come with a border now let's
usually do come with a border now let's go ahead and give this some shape with
go ahead and give this some shape with the width
the width of 48 pixels
of 48 pixels and a height
and a height of 48 pixels which is kind of thumb size
of 48 pixels which is kind of thumb size i'll save this much and we definitely
i'll save this much and we definitely see a change it's gone we don't see the
see a change it's gone we don't see the 48 by 48 because we haven't done
48 by 48 because we haven't done anything else with it yet at this point
anything else with it yet at this point let's set the display
let's set the display to flex
to flex justify content and we want that
justify content and we want that center we also want to
center we also want to align the items
align the items center
center and i'll scroll just a little bit and
and i'll scroll just a little bit and after that we're going to set a position
after that we're going to set a position to
to relative if you remember the position
relative if you remember the position tutorial earlier in the css series that
tutorial earlier in the css series that means we're probably going to position
means we're probably going to position something absolute inside of the button
something absolute inside of the button but those are the button styles and if
but those are the button styles and if we say we really won't see a change at
we say we really won't see a change at this point because we don't have
this point because we don't have anything inside of that button and we've
anything inside of that button and we've set it to be transparent
set it to be transparent okay now we want the menu icon which is
okay now we want the menu icon which is the div
the div inside of the button but we're also
inside of the button but we're also going to select the menu dash icon
going to select the menu dash icon before pseudo element and the menu dash
before pseudo element and the menu dash icon
icon after pseudo element so all three of
after pseudo element so all three of these will be affected by this
these will be affected by this and we'll say
and we'll say background dash color
background dash color now let's use our variable
now let's use our variable and we want the header color just it's
and we want the header color just it's that white smoke color that we defined
that white smoke color that we defined above now here we'll set the width
above now here we'll set the width to 40 pixels and we'll give this a
to 40 pixels and we'll give this a height
height of 5 pixels
of 5 pixels and then i'll go ahead and save so you
and then i'll go ahead and save so you can see what we have we have one line
can see what we have we have one line essentially here a big dash that's 40
essentially here a big dash that's 40 pixels wide and 5 pixels high so now
pixels wide and 5 pixels high so now let's go ahead and set the
let's go ahead and set the border
border radius and we'll set that to 5 pixels
radius and we'll set that to 5 pixels and now this is going to be position
and now this is going to be position absolute i'll scroll again for a little
absolute i'll scroll again for a little more room and after that we're going to
more room and after that we're going to go ahead and set our transition
go ahead and set our transition right here because it will apply to all
right here because it will apply to all of these so we'll say all instead of any
of these so we'll say all instead of any specific property and then we want it to
specific property and then we want it to apply faster than we did in our examples
apply faster than we did in our examples in just a half second
in just a half second and we'll save that much now notice we
and we'll save that much now notice we only have
only have the one line and it does have the
the one line and it does have the rounded edges so it's one of the three
rounded edges so it's one of the three lines we expect in our hamburger menu
lines we expect in our hamburger menu but we applied this to all so where are
but we applied this to all so where are the others well the quick answer is
the others well the quick answer is they're all stacked on top of each other
they're all stacked on top of each other right now so we need to make a few more
right now so we need to make a few more changes before we see them the first
changes before we see them the first change is just going to apply to the
change is just going to apply to the menu icon
menu icon before
before and the menu dash icon
and the menu dash icon after but not the menu icon itself and
after but not the menu icon itself and here we just need to set the content to
here we just need to set the content to a blank basically an empty quotes here
a blank basically an empty quotes here because
because if we don't do that they won't be
if we don't do that they won't be visible so even though we didn't put
visible so even though we didn't put anything in there we need to set the
anything in there we need to set the content to empty value and then we can
content to empty value and then we can go ahead and set the menu dash icon
go ahead and set the menu dash icon before and we're going to need to
before and we're going to need to transform it now so we'll say transform
transform it now so we'll say transform and now we'll translate and we're going
and now we'll translate and we're going to provide two values here so
to provide two values here so i guess i could just do one first let's
i guess i could just do one first let's do translate
do translate y and i'll show you why we need to do
y and i'll show you why we need to do two values so i'll say minus 12
two values so i'll say minus 12 pixels and save
pixels and save and now look they're not even up here at
and now look they're not even up here at all that is not what we want so
all that is not what we want so really it starts in the middle and since
really it starts in the middle and since this is 40 pixels we need to have
this is 40 pixels we need to have translate because the x value needs to
translate because the x value needs to be minus
be minus 20 pixels and then the y value can be
20 pixels and then the y value can be the minus 12 to put it up above
the minus 12 to put it up above the actual one that was in the middle
the actual one that was in the middle defined by menu icon so now when i save
defined by menu icon so now when i save it gets pulled back over and i was
it gets pulled back over and i was expecting them to be the same length let
expecting them to be the same length let me make sure i put everything that i
me make sure i put everything that i thought i did and i'll come back and go
thought i did and i'll come back and go over that but right now two different
over that but right now two different links of lines however what i expected
links of lines however what i expected here did happen we've got the minus 20
here did happen we've got the minus 20 pixels to pull it back even and the
pixels to pull it back even and the minus 12 pixels to put it on top
minus 12 pixels to put it on top i'm going to select this now do shift
i'm going to select this now do shift alt and the down arrow and then change
alt and the down arrow and then change the before
the before to after
to after and now i'll also need minus 20 pixels
and now i'll also need minus 20 pixels here but now i'll need a plus 12 pixels
here but now i'll need a plus 12 pixels to put this next one underneath
to put this next one underneath and save and now they have straightened
and save and now they have straightened out that's what i needed was the
out that's what i needed was the hamburger menu all three the same so the
hamburger menu all three the same so the menu icon is the one in the middle and
menu icon is the one in the middle and then the top one is the before and the
then the top one is the before and the bottom one is the after pseudo element
bottom one is the after pseudo element and now i know why it was longer before
and now i know why it was longer before because they were stacked on top of each
because they were stacked on top of each other but this bottom one started in the
other but this bottom one started in the middle which then made it look like it
middle which then made it look like it extended the middle line which it was
extended the middle line which it was actually the two together but not
actually the two together but not starting at the same place
starting at the same place okay from there we can go ahead and
okay from there we can go ahead and apply some more styles to the nav i'm
apply some more styles to the nav i'm going to scroll for some more room and
going to scroll for some more room and we'll select the nav element now the nav
we'll select the nav element now the nav element is going to start out with a
element is going to start out with a display of none but i'm going to go
display of none but i'm going to go ahead and set up block here first so we
ahead and set up block here first so we can actually see what we're doing with
can actually see what we're doing with the nav element and then i'll come back
the nav element and then i'll come back and change it we also want a transform
and change it we also want a transform dash origin telling the transformation
dash origin telling the transformation where to start
where to start and we want it in the top and center
and we want it in the top and center because it's going to drop down
because it's going to drop down and now we're going to apply an
and now we're going to apply an animation but we haven't defined that
animation but we haven't defined that animation yet so let's go ahead and
animation yet so let's go ahead and define it first and underneath here
define it first and underneath here we'll say
we'll say at
at keyframes
keyframes and then we'll say
and then we'll say show menu
show menu and now we'll say at the zero percent
we will transform and then we want scale
and then we want scale y
y and we'll set that to zero
and we'll set that to zero and then after that we want the next one
and then after that we want the next one to be at eighty percent
to be at eighty percent and that's going to also be a transform
and that's going to also be a transform and this will also be a scale y
and this will also be a scale y but this will be 1.2 notice we don't
but this will be 1.2 notice we don't have to just stop at one so it actually
have to just stop at one so it actually will go 20 percent beyond
will go 20 percent beyond the intended size and that's going to
the intended size and that's going to give it just a little bit of a bounce
give it just a little bit of a bounce like kind of like stretching a blind
like kind of like stretching a blind down and then letting go of the blind
down and then letting go of the blind and it snaps back up just a little bit
and it snaps back up just a little bit so then we'll say at 100
so then we'll say at 100 we use
we use transform
transform and we'll say scale y and now we'll just
and we'll say scale y and now we'll just put it back to one and then after it
put it back to one and then after it snaps back up it will lose that 20
snaps back up it will lose that 20 percent so let's save that that will be
percent so let's save that that will be our show menu keyframes for how this
our show menu keyframes for how this transition will work i'm going to come
transition will work i'm going to come back to the nav and again like i said
back to the nav and again like i said change the display to none and i'm also
change the display to none and i'm also going to apply that animation but right
going to apply that animation but right now we just want to see what we're doing
now we just want to see what we're doing and not really have the animation or
and not really have the animation or have the nav hidden so we'll go ahead
have the nav hidden so we'll go ahead and come back to both of those things
and come back to both of those things right now we'll grab that unordered list
right now we'll grab that unordered list inside of the nav
inside of the nav we'll say list style type but not disk
we'll say list style type but not disk we'll set that to none
we'll set that to none and then we can set that unordered list
and then we can set that unordered list to a display
to a display of flex
of flex and then we'll set the flex flow there
and then we'll set the flex flow there to
to column and no wrap
column and no wrap and after that we can select the list
and after that we can select the list items so nav and li
items so nav and li and then we'll give them a padding of
and then we'll give them a padding of 0.5 ram all the way around
0.5 ram all the way around and let's put a border on top
and let's put a border on top to one pixel
to one pixel solid
solid and here i'll need var so i can set that
and here i'll need var so i can set that header dash
header dash color
color let's save this much and see what we've
let's save this much and see what we've got well we can see the menu is coming
got well we can see the menu is coming together we haven't really styled the
together we haven't really styled the links or positioned these at all
links or positioned these at all but we now clearly have a menu that
but we now clearly have a menu that would drop down that has individual
would drop down that has individual sections to it so let's go ahead and
sections to it so let's go ahead and style those links now so after the nav
style those links now so after the nav li we'll have nav
li we'll have nav lowercase please and the anchor tag so
lowercase please and the anchor tag so all of the links will be
all of the links will be display
display block instead of what they normally are
block instead of what they normally are which is inline
which is inline and then we'll say text align and set
and then we'll say text align and set them center
them center and then i'm going to give them a width
and then i'm going to give them a width of 80 percent
of 80 percent if i were to not be applying an
if i were to not be applying an animation if i did not apply an
animation if i did not apply an animation to these links
animation to these links then i would probably set them to a
then i would probably set them to a hundred percent and just change the
hundred percent and just change the background color and the text link so
background color and the text link so they would take up the whole space
they would take up the whole space but
but because i want to apply an animation
because i want to apply an animation today i'm setting these to 80 because
today i'm setting these to 80 because the animation will make it grow so that
the animation will make it grow so that is the consideration there and because
is the consideration there and because of that i'm also setting the margin to
of that i'm also setting the margin to uh auto so it will center these block
uh auto so it will center these block elements that they are now block
elements that they are now block elements when they normally aren't but
elements when they normally aren't but what we get
what we get are centered links right now we don't
are centered links right now we don't have an animation or a transformation i
have an animation or a transformation i should say applied to any of these yet
should say applied to any of these yet but we will
but we will after that we'll go ahead and select
after that we'll go ahead and select the nav
the nav we need the anchor and there we go the
we need the anchor and there we go the any link pseudo selector which is a
any link pseudo selector which is a pseudo class so this applies to both the
pseudo class so this applies to both the non-visited and visited links
non-visited and visited links and we'll say color we'll set our var
and we'll say color we'll set our var to the
to the header color once again so they stay
header color once again so they stay that same color whether they've been
that same color whether they've been visited or not
visited or not we'll set the font weight
we'll set the font weight to bold
to bold and text
and text decoration
decoration to none and that will remove the
to none and that will remove the outlines we have under those words now
outlines we have under those words now when we save they're nice and bold and
when we save they're nice and bold and they are that white smoke color that we
they are that white smoke color that we expect them to be and finally let's go
expect them to be and finally let's go ahead and apply this transformation
ahead and apply this transformation which will animate the links just a
which will animate the links just a little bit
little bit so we'll say nav and then hover
so we'll say nav and then hover and then we'll also apply this to the
and then we'll also apply this to the nav and if they have focus both of those
nav and if they have focus both of those we'll say transform
we'll say transform and now we can say scale and we'll go to
and now we can say scale and we'll go to 1.2 which is essentially saying 120
1.2 which is essentially saying 120 so they should grow 20 percent
so they should grow 20 percent and then we can set the transition right
and then we can set the transition right here as well so i'll just say all
here as well so i'll just say all 0.3 seconds so we don't want to wait too
0.3 seconds so we don't want to wait too long and now when i mouse over
long and now when i mouse over notice how they grow
notice how they grow and that works just great and this will
and that works just great and this will also happen if we tab through the page
also happen if we tab through the page you can see the outline and this is good
you can see the outline and this is good for accessibility we'll select each one
for accessibility we'll select each one of these as we go through so you do not
of these as we go through so you do not want to remove the outline you could
want to remove the outline you could change the colors or style it if you
change the colors or style it if you want to but i usually leave it basically
want to but i usually leave it basically as the default it does help with
as the default it does help with accessibility so you definitely want it
accessibility so you definitely want it there so you can tab through these as
there so you can tab through these as well now let's go back to our nav menu
well now let's go back to our nav menu and make those changes i talked about so
and make those changes i talked about so nav instead of display block should be
nav instead of display block should be none to start out
none to start out and then we also want to apply that
and then we also want to apply that animation which will be animation using
animation which will be animation using the shorthand here so we'll say show
the shorthand here so we'll say show menu that's the name of the animation
menu that's the name of the animation 0.5 seconds is the duration the default
0.5 seconds is the duration the default would be ease so we could say ease or
would be ease so we could say ease or ease in and out again i can't tell much
ease in and out again i can't tell much of a difference between the two and then
of a difference between the two and then we'll go with forwards so it leaves it
we'll go with forwards so it leaves it in that finishing state as we noticed in
in that finishing state as we noticed in our example before the square changed to
our example before the square changed to purple and stayed purple at the end
purple and stayed purple at the end instead of reverting back to green so
instead of reverting back to green so we'll say forwards here now this won't
we'll say forwards here now this won't apply a whole lot yet but when i save it
apply a whole lot yet but when i save it will disappear so now we need to do some
will disappear so now we need to do some other things so it will appear when we
other things so it will appear when we hover over the header or when we have
hover over the header or when we have focus anywhere in the header i'll put
focus anywhere in the header i'll put these final styles right above the nav
these final styles right above the nav here in our css and they're going to
here in our css and they're going to start with the is pseudo selector which
start with the is pseudo selector which will save us a little space i'm going to
will save us a little space i'm going to say header
say header and then hover but this will also apply
and then hover but this will also apply to the header
to the header focus dash within
focus dash within and now after that we can specify
and now after that we can specify the menu dash icon so you can see what
the menu dash icon so you can see what the is sudo selector helped us with
the is sudo selector helped us with otherwise we would have had to set a
otherwise we would have had to set a header hover menu icon header focus
header hover menu icon header focus within menu icon so it saved us just a
within menu icon so it saved us just a little bit so what we're going to do is
little bit so what we're going to do is say background
say background color and we'll set that to transparent
and then we'll also go ahead and say transform
go ahead and say transform well let me hold off on the transform
well let me hold off on the transform i'll come back to the transform let's
i'll come back to the transform let's just go with background color
just go with background color transparent to start out with for the
transparent to start out with for the menu icon and after that i'm just going
menu icon and after that i'm just going to select this
and drop this down now remember the menu icon itself is just this middle line
icon itself is just this middle line which means we'll be
which means we'll be losing the middle line when we mouse
losing the middle line when we mouse over
over now after that we'll say menu icon
now after that we'll say menu icon before
before so now we're selecting just the top line
so now we're selecting just the top line and instead of background color here i'm
and instead of background color here i'm going to want
going to want transform
transform and then i'm going to set a couple of
and then i'm going to set a couple of things one thing is the translate x and
things one thing is the translate x and that is because remember we already had
that is because remember we already had to translate x back minus 20 pixels we
to translate x back minus 20 pixels we need to do this again or it will end up
need to do this again or it will end up in a different area so we'll once again
in a different area so we'll once again say minus 20 pixels for the translate x
say minus 20 pixels for the translate x and then we're going to rotate and we'll
and then we're going to rotate and we'll rotate this line 45 degrees
rotate this line 45 degrees and we'll leave it at that now i'm going
and we'll leave it at that now i'm going to select all of this and do shift alt
to select all of this and do shift alt and the down arrow again i'm also going
and the down arrow again i'm also going to press alt z just so you can see what
to press alt z just so you can see what isn't showing over there so it's is
isn't showing over there so it's is header hover header focus within and
header hover header focus within and then we're selecting the menu icon
then we're selecting the menu icon before
before and now i'm switching this one to after
and now i'm switching this one to after once again i need translate x minus 20
once again i need translate x minus 20 pixels but now instead of 45 degrees i
pixels but now instead of 45 degrees i need minus 45 degrees
need minus 45 degrees finally i'm going to copy this one more
finally i'm going to copy this one more time
time select all of that down but instead of
select all of that down but instead of the menu icon before or after
the menu icon before or after i'm going to switch this
i'm going to switch this to the nav element itself it's not a
to the nav element itself it's not a class this is going to be the element
class this is going to be the element there we go
there we go and now we need to change that display
and now we need to change that display to block so it actually shows up because
to block so it actually shows up because before remember we had
before remember we had none
none so those are the different changes we
so those are the different changes we have made for when we hover over the
have made for when we hover over the header or when we have focus within the
header or when we have focus within the header which is important if we're going
header which is important if we're going to tab through so now let me hover over
to tab through so now let me hover over the header
the header and you can see our hamburger menu
and you can see our hamburger menu changes to an x
changes to an x and that's usually desirable so the
and that's usually desirable so the middle line disappeared we set that
middle line disappeared we set that background color to transparent then we
background color to transparent then we rotated the other lines the before and
rotated the other lines the before and the after so now they form an x and of
the after so now they form an x and of course we also had to set this to
course we also had to set this to display block for the menu to show and
display block for the menu to show and now as i hover over these that other
now as i hover over these that other transformation of course makes each one
transformation of course makes each one of the words grow by 20 so we can tell
of the words grow by 20 so we can tell what we're hovering over
what we're hovering over and then likewise if there's focus
and then likewise if there's focus within here now i remove this and it
within here now i remove this and it changes so there we go and we can see
changes so there we go and we can see that little bounce at the bottom too
that little bounce at the bottom too there we go
there we go now maybe we want to set a background
now maybe we want to set a background color on
color on the nav itself because i'm noticing
the nav itself because i'm noticing that's bouncing a little bit lower and
that's bouncing a little bit lower and going into the white there so let's go
going into the white there so let's go back to the nav
back to the nav and find where oh it was actually
and find where oh it was actually underneath here so let's set a
underneath here so let's set a background color on the nav itself
background color on the nav itself and here we'll say
and here we'll say var and grab that same
var and grab that same header background color
header background color and save now let's check out the bounce
and save now let's check out the bounce with the menu and yeah now we see that
with the menu and yeah now we see that color stays with this last word instead
color stays with this last word instead of dipping into the white there that
of dipping into the white there that looks good but there's one more
looks good but there's one more transform that we can apply and it's the
transform that we can apply and it's the one that i didn't before this goes to an
one that i didn't before this goes to an x which is great but let's apply this to
x which is great but let's apply this to the hamburger menu as well so this is
the hamburger menu as well so this is the menu icon and right here we'll say
the menu icon and right here we'll say transform and now let's rotate and let's
transform and now let's rotate and let's do
do 720 degrees so that's going to be a few
720 degrees so that's going to be a few full turns there at least a couple so
full turns there at least a couple so now when i hover over you get the spin
now when i hover over you get the spin and then we have the x
and then we have the x and that's a nice little effect as well
and that's a nice little effect as well so there everything is complete i hope
so there everything is complete i hope this has helped you learn a lot about
this has helped you learn a lot about transformations transitions and even
transformations transitions and even animations because they're very useful
animations because they're very useful but you don't want to overdo it too many
but you don't want to overdo it too many on a page can just be too much
on a page can just be too much before we get to the final project in
before we get to the final project in this css for beginner series there's one
this css for beginner series there's one more topic to cover and that's
more topic to cover and that's organizing your css i've included a
organizing your css i've included a markdown file with this lesson and the
markdown file with this lesson and the sample code and it just is going to
sample code and it just is going to contain an outline of suggestions to
contain an outline of suggestions to organize your css and i say suggestions
organize your css and i say suggestions because there are no hard and fast rules
because there are no hard and fast rules there are different theories and
there are different theories and different takes on this but the first
different takes on this but the first one
one is possibly the most important and that
is possibly the most important and that is follow
is follow your team
your team that's a very important rule to go with
that's a very important rule to go with because if your team has already
because if your team has already established how they're organizing the
established how they're organizing the file you need to follow that pattern
file you need to follow that pattern you're probably a junior dev getting
you're probably a junior dev getting started with them and you don't really
started with them and you don't really want to rock the boat there just follow
want to rock the boat there just follow and
and of course use the pattern that they have
of course use the pattern that they have and i'm sure there are reasons for that
and i'm sure there are reasons for that pattern after that we're going to have
pattern after that we're going to have code examples to look at so our second
code examples to look at so our second reason here or second suggestion is to
reason here or second suggestion is to use
use comments to create
comments to create headers or you might call them dividers
headers or you might call them dividers as well labels if you will inside of
as well labels if you will inside of your css now we've seen this already
your css now we've seen this already throughout this series as we've done a
throughout this series as we've done a few mini projects and you've seen that
few mini projects and you've seen that i've provided these headers which are
i've provided these headers which are much like what mdn suggests throughout
much like what mdn suggests throughout the css so here's our reset labeled and
the css so here's our reset labeled and then i have one for the variables and
then i have one for the variables and then inside of the root pseudo selector
then inside of the root pseudo selector here you can see i labeled colors there
here you can see i labeled colors there might be other variables that i would
might be other variables that i would create and so i might have sub labels
create and so i might have sub labels here inside of that pseudo selector for
here inside of that pseudo selector for that then i have utility classes general
that then i have utility classes general styles and now we get down to blocks
styles and now we get down to blocks which is something we're going to talk
which is something we're going to talk about in just a little bit but this is
about in just a little bit but this is just our starter css for the day but you
just our starter css for the day but you can see how i've already organized it
can see how i've already organized it and those comments will really help you
and those comments will really help you get back up to speed if you come back to
get back up to speed if you come back to your project a month later or anybody
your project a month later or anybody else that's working with you they'll
else that's working with you they'll easily find the section that they're
easily find the section that they're looking for
looking for okay the third suggestion here is to
okay the third suggestion here is to sort properties
sort properties and typically you sort those properties
and typically you sort those properties alphabetically but this is not
alphabetically but this is not everybody's choice some people prefer to
everybody's choice some people prefer to sort properties in their own groups that
sort properties in their own groups that they have
they have chosen and mdn has some suggestions for
chosen and mdn has some suggestions for that too so i'm going to put a link in
that too so i'm going to put a link in the resources to that mdn page that has
the resources to that mdn page that has those other suggestions and also a link
those other suggestions and also a link to an article that discusses sorting
to an article that discusses sorting your css properties alphabetically now
your css properties alphabetically now that's not how we write them so i'm
that's not how we write them so i'm going to show you what i do here in just
going to show you what i do here in just a second but i want to give you a memory
a second but i want to give you a memory technique to remember this by sorting
technique to remember this by sorting alphabetically at least in the english
alphabetically at least in the english language we usually say that abc's which
language we usually say that abc's which would be our alphabet so just remember
would be our alphabet so just remember abcs and that will help you remember
abcs and that will help you remember sort alphabetically so
sort alphabetically so abcss if you will okay i'll save the
abcss if you will okay i'll save the markdown file now let me show you an
markdown file now let me show you an example of this and how to do this in
example of this and how to do this in visual studio code typically in a small
visual studio code typically in a small project it's easy to find these and
project it's easy to find these and really i don't sort them so you can see
really i don't sort them so you can see i have margin padding and box sizing now
i have margin padding and box sizing now if i did this alphabetically box sizing
if i did this alphabetically box sizing would be on top but that's not how i
would be on top but that's not how i write css it's not what i'm thinking of
write css it's not what i'm thinking of when i write the properties like if i
when i write the properties like if i create a flexbox for example and we'll
create a flexbox for example and we'll see that as we get down here to the body
see that as we get down here to the body i have these properties i had display
i have these properties i had display flex and then flex flow justify content
flex and then flex flow justify content and then align items well that starts
and then align items well that starts with a but i don't think of it in that
with a but i don't think of it in that order i would write my css in this order
order i would write my css in this order but then to sort it alphabetically say
but then to sort it alphabetically say when i'm done if i'm working with others
when i'm done if i'm working with others and or i want to come back to the
and or i want to come back to the project later and of course just find
project later and of course just find the properties easily select all of
the properties easily select all of these properties and then control p now
these properties and then control p now i'm on windows that may be a little
i'm on windows that may be a little different on mac but ctrl p to open up
different on mac but ctrl p to open up the command palette in visual studio
the command palette in visual studio code and then the greater than symbol
code and then the greater than symbol and type the word sort you can see it
and type the word sort you can see it shows mine says recently used sort lines
shows mine says recently used sort lines ascending but you may not have that so
ascending but you may not have that so type the word sort and then you'll see
type the word sort and then you'll see the different sort choices choose sort
the different sort choices choose sort lines ascending and you can see it
lines ascending and you can see it sorted these alphabetically for me so
sorted these alphabetically for me so sort lines ascending is what you want
sort lines ascending is what you want from the command palette now they're
from the command palette now they're sorted and i know what property say the
sorted and i know what property say the specific property i'm looking for maybe
specific property i'm looking for maybe align items it's right at the top or gap
align items it's right at the top or gap i know it's going to be right here
i know it's going to be right here alphabetically
alphabetically likewise this helps you find issues say
likewise this helps you find issues say you had a second
you had a second gap or a second
gap or a second min height or display just you
min height or display just you accidentally put the property in twice
accidentally put the property in twice and one was defeating the other due to
and one was defeating the other due to the cascade well you would find it when
the cascade well you would find it when you sorted because then it would say put
you sorted because then it would say put both displays on lines right beside each
both displays on lines right beside each other so you would find those issues so
other so you would find those issues so sorting alphabetically the abcss is a
sorting alphabetically the abcss is a good way to go now i'm going to press
good way to go now i'm going to press ctrl z to undo that because i'm going to
ctrl z to undo that because i'm going to come back and change this in a little
come back and change this in a little bit and once again i'm thinking about
bit and once again i'm thinking about these flex properties especially justify
these flex properties especially justify content and align items in that order
content and align items in that order and i know right where to find those
and i know right where to find those again small projects it's much easier to
again small projects it's much easier to just leave it this way
just leave it this way okay back in the markdown here's the big
okay back in the markdown here's the big one that we're going to spend most of
one that we're going to spend most of our time on today and this is for larger
our time on today and this is for larger projects you wouldn't typically do this
projects you wouldn't typically do this in a small project but on a team larger
in a small project but on a team larger projects they usually have a naming
projects they usually have a naming convention
convention methodology so i'll put
methodology so i'll put follow a
follow a naming
naming convention
convention methodology if i could spell that right
methodology if i could spell that right there we go
there we go methodology and a very popular naming
methodology and a very popular naming convention methodology
convention methodology is b e m which stands for block element
is b e m which stands for block element modifier so block
modifier so block element
element modifier there we go so there are others
modifier there we go so there are others this is just a popular one so i want to
this is just a popular one so i want to go over
go over this popular version and of course your
this popular version and of course your team may not use this they this may not
team may not use this they this may not be the one you adopt going forward but
be the one you adopt going forward but do know it exists and know that it is
do know it exists and know that it is used a lot so you may see it out there
used a lot so you may see it out there in code example so now let's go back to
in code example so now let's go back to our code
our code and besides what we have here we start
and besides what we have here we start with a block here at the bottom so you
with a block here at the bottom so you can see i've defined a button class now
can see i've defined a button class now typically even frameworks and libraries
typically even frameworks and libraries that you may learn later to work with on
that you may learn later to work with on larger projects will apply classes
larger projects will apply classes to put most of the styles on the page
to put most of the styles on the page and you can see other than the html and
and you can see other than the html and the body i'm really starting out here
the body i'm really starting out here with the class and now above i have a
with the class and now above i have a utility class here and some variables
utility class here and some variables but other than that just here in the
but other than that just here in the reset i had of course the button and i
reset i had of course the button and i might put an image here and set the
might put an image here and set the display to block or anything else i'd
display to block or anything else i'd want to do in the reset but after i get
want to do in the reset but after i get past the big elements of html and body
past the big elements of html and body i'm probably going to use classes and
i'm probably going to use classes and these naming conventions other
these naming conventions other frameworks and libraries that have been
frameworks and libraries that have been built by third parties those usually
built by third parties those usually apply classes as well so we start out
apply classes as well so we start out with a block and here it is also it says
with a block and here it is also it says aka components you may hear some people
aka components you may hear some people refer to these as components instead of
refer to these as components instead of blocks but they're talking about the
blocks but they're talking about the same thing now this has a semantic
same thing now this has a semantic meaning it's important it's saying we're
meaning it's important it's saying we're defining a button so the button has a
defining a button so the button has a width of 100 a height of 100 pixels both
width of 100 a height of 100 pixels both and a border radius of 15. this is our
and a border radius of 15. this is our basic button style that we want to use
basic button style that we want to use on the page and when we go to our html
on the page and when we go to our html we see three buttons and they all have
we see three buttons and they all have that class button and of course they can
that class button and of course they can have different content
have different content but then we get to the next part of
but then we get to the next part of block element modifier methodology and
block element modifier methodology and we're first going to look at the
we're first going to look at the modifiers i'm going to scroll for a
modifiers i'm going to scroll for a little more room here and i'll get that
little more room here and i'll get that just right up to the top of the page and
just right up to the top of the page and underneath i'm going to paste in some
underneath i'm going to paste in some code and we can see those changes but
code and we can see those changes but notice what i've done i've i put another
notice what i've done i've i put another comment here that says modifiers now
comment here that says modifiers now this isn't something you would need to
this isn't something you would need to do in your code i am just identifying
do in your code i am just identifying these for you for the tutorial but what
these for you for the tutorial but what modifiers are about are about
modifiers are about are about incremental style changes so here we're
incremental style changes so here we're going to have blocks with modifiers so
going to have blocks with modifiers so our button is the block
our button is the block and then we have two dashes not one if
and then we have two dashes not one if we were to name something
we were to name something we might have two words in the name and
we might have two words in the name and we could put one dash in between and
we could put one dash in between and this is why bem uses two dashes and
this is why bem uses two dashes and later we'll see two underlines but these
later we'll see two underlines but these two dashes indicate that this is going
two dashes indicate that this is going to be a modifier and then you can see
to be a modifier and then you can see i've got the name secondary
i've got the name secondary the other one i've got the name lean and
the other one i've got the name lean and the third one i've got border and here
the third one i've got border and here you see a name that has
you see a name that has one dash in it so border and then lg
one dash in it so border and then lg stands for large so a large border so
stands for large so a large border so these are incremental changes we can
these are incremental changes we can make to the blocks with modifiers
make to the blocks with modifiers now we don't replace what we previously
now we don't replace what we previously had the button class we add this in
had the button class we add this in addition in our code so for example here
addition in our code so for example here on our second button
on our second button we could put btn-sec
we could put btn-sec [Music]
[Music] and i'll save once i spell secondary
and i'll save once i spell secondary correctly and now you can see we have a
correctly and now you can see we have a yellow button notice in the html we've
yellow button notice in the html we've applied both the button class and the
applied both the button class and the button secondary class likewise on the
button secondary class likewise on the third button we could put our button
third button we could put our button dash dash
dash dash lean
lean and now we have applied that modifier as
and now we have applied that modifier as well to our block so our button lean
well to our block so our button lean modifier and the third button here is
modifier and the third button here is leaning and i believe we had another one
leaning and i believe we had another one let me look back yep
let me look back yep border large so we could apply another
border large so we could apply another class you can apply as many as you want
class you can apply as many as you want to so we have button dash dash
to so we have button dash dash and then we said border dash
and then we said border dash large and save
large and save and of course now it's outlined in white
and of course now it's outlined in white so it's a little harder to see than what
so it's a little harder to see than what we had with the black border before but
we had with the black border before but we'll change that here in the future but
we'll change that here in the future but it did of course make it a little harder
it did of course make it a little harder to see right now i could press alt z so
to see right now i could press alt z so that wraps well it didn't there it is
that wraps well it didn't there it is it's already wrapping it just wrapped on
it's already wrapping it just wrapped on part of that closing element but there
part of that closing element but there we've applied
we've applied modifiers to the blocks and these
modifiers to the blocks and these modifiers have provided incremental
modifiers have provided incremental changes to our more important semantic
changes to our more important semantic blocks our buttons and those are the
blocks our buttons and those are the starting styles that we want and then of
starting styles that we want and then of course we can modify them with each
course we can modify them with each class that we apply okay let's move on
class that we apply okay let's move on to elements now but before we do that i
to elements now but before we do that i need to add some html over here we're
need to add some html over here we're going to turn our three buttons into a
going to turn our three buttons into a header so i just need to add the rest of
header so i just need to add the rest of the header so i'll type header and add a
the header so i'll type header and add a class of header to start out but that
class of header to start out but that closing header tag is going to need to
closing header tag is going to need to come after all of our buttons as well
come after all of our buttons as well so we'll add that much and save and you
so we'll add that much and save and you can see the changes will be over here to
can see the changes will be over here to the right after that i'm going to add an
the right after that i'm going to add an h1 and it's going to have a different
h1 and it's going to have a different class so it's going to have header two
class so it's going to have header two underscores
underscores and then title
and then title and there we go and then for the title
and there we go and then for the title i'll just put b e m for our block
i'll just put b e m for our block element modifier lesson and save that
element modifier lesson and save that much now we see bem on the page
much now we see bem on the page after that i'm going to add a nav that
after that i'm going to add a nav that will be wrapped around these buttons and
will be wrapped around these buttons and it's going to have a class also that is
it's going to have a class also that is header two underscores and nav and of
header two underscores and nav and of course i need to put the closing nav
course i need to put the closing nav after the buttons as well
after the buttons as well and i can save now we could say we're
and i can save now we could say we're finished with this and apply some
finished with this and apply some classes but let me first describe what
classes but let me first describe what i'm doing here so you can see our
i'm doing here so you can see our component is the header it is the
component is the header it is the important semantic element
important semantic element and now what's within it depends upon
and now what's within it depends upon the header so we have a header with two
the header so we have a header with two underscores and then a title this is the
underscores and then a title this is the element the e in bem the block element
element the e in bem the block element modifier methodology
modifier methodology and then we also have another element
and then we also have another element that is dependent on the header and that
that is dependent on the header and that is the nav
is the nav now inside here we could say are these
now inside here we could say are these buttons dependent on the header or not
buttons dependent on the header or not because if we have a button style we're
because if we have a button style we're using throughout our site and not just
using throughout our site and not just in the header
in the header we would want to leave this as it is
we would want to leave this as it is because this would be important so we
because this would be important so we don't have to redefine the same button
don't have to redefine the same button style somewhere else however if these
style somewhere else however if these are buttons that we're designing a
are buttons that we're designing a specific way
specific way just for the header then they would
just for the header then they would become dependent on that header and if
become dependent on that header and if that was the case then we would say
that was the case then we would say header
header two underscores
two underscores button and of course we would change
button and of course we would change everything else here so i'm going to
everything else here so i'm going to select one button and then control d to
select one button and then control d to get the next
get the next and the next and there's one more there
and the next and there's one more there i've got all five of them now
i've got all five of them now and now i'll arrow to the left and i'll
and now i'll arrow to the left and i'll put header
put header two underscores
two underscores and save and you can see we've changed
and save and you can see we've changed each one of those classes now because
each one of those classes now because they are dependent on the header it's
they are dependent on the header it's also important to note that this does
also important to note that this does not display the structure so you might
not display the structure so you might think you need to put header two
think you need to put header two underscores then nav and two underscores
underscores then nav and two underscores and then button that is not the case you
and then button that is not the case you only want to start out with the major
only want to start out with the major component the block name the b here so
component the block name the b here so header two underscores and then whatever
header two underscores and then whatever the actual element is so in this case
the actual element is so in this case it's a button in this case it's a nav
it's a button in this case it's a nav and in this case well it's an h1 but
and in this case well it's an h1 but we're going to call it title because
we're going to call it title because that semantically makes more sense to me
that semantically makes more sense to me and you can do that again there are no
and you can do that again there are no hard and fast rules but if you're
hard and fast rules but if you're following this pattern the actual rules
following this pattern the actual rules for the pattern are two underscores and
for the pattern are two underscores and then element likewise for the modifier
then element likewise for the modifier two dashes and then the modifier so i'm
two dashes and then the modifier so i'm going to save these changes and then
going to save these changes and then let's go back and modify the styles that
let's go back and modify the styles that we have over here and include those
we have over here and include those elements as well so there is our block
elements as well so there is our block section and we actually need to include
section and we actually need to include the header itself now inside of our
the header itself now inside of our block so i'll start here under our
block so i'll start here under our comments and say header
comments and say header then we're going to have a background
then we're going to have a background color and i'm going to say var and
color and i'm going to say var and change this to our
change this to our header color or background color that
header color or background color that was defined before so there's the b
was defined before so there's the b after that we would also have a color
there we go color and i'm going to put another var
another var two dashes and choose
two dashes and choose color
color after that we're going to have some
after that we're going to have some padding and i'm going to say one rim on
padding and i'm going to say one rim on the top one rim on the left and right
the top one rim on the left and right and one half rim
and one half rim on the bottom
on the bottom we'll make this a display
we'll make this a display of flex
of flex flex
flex dash flow
dash flow whoops flex dash flow is going to be row
whoops flex dash flow is going to be row and no wrap
and no wrap and then we'll justify content and we'll
and then we'll justify content and we'll say space dash
say space dash between
between we'll save that we definitely see a
we'll save that we definitely see a change but not everything we want yet
change but not everything we want yet let's go up and remove some things from
let's go up and remove some things from the body all we really need to keep
the body all we really need to keep are the first three properties let's get
are the first three properties let's get rid of these bottom three
rid of these bottom three and we'll save that and we see a few
and we'll save that and we see a few changes at the top not exactly
changes at the top not exactly everything we want yet but we're getting
everything we want yet but we're getting closer and i think i see i forgot the
closer and i think i see i forgot the word header on the color so if i put
word header on the color so if i put that
that should change those to white letters
should change those to white letters that looks a little better as well and
that looks a little better as well and now let's add an element section that
now let's add an element section that i'm going to put right after our button
i'm going to put right after our button class and i'll just put the comments
class and i'll just put the comments there it looks like it's wrapping here
there it looks like it's wrapping here but what i wanted to add along with just
but what i wanted to add along with just the elements editor is
the elements editor is the comment no standalone meaning in
the comment no standalone meaning in other words they're semantically tied to
other words they're semantically tied to the block they are dependent upon that
the block they are dependent upon that block so it's not just a button it's
block so it's not just a button it's going to be the header button style and
going to be the header button style and likewise it does not represent the
likewise it does not represent the structure so what we do not want
structure so what we do not want is the header underscore two underscores
is the header underscore two underscores nav two underscores button you would not
nav two underscores button you would not want that you would just want header
want that you would just want header underscore button and i don't know why i
underscore button and i don't know why i have the period there looks well that's
have the period there looks well that's weird i'll control z to
weird i'll control z to change that again maybe that's marking
change that again maybe that's marking something let's see if i can just back
something let's see if i can just back up one
up one not
not header nav underscore button and save
header nav underscore button and save okay
okay got the comments there now i actually
got the comments there now i actually need to put in the style well it's going
need to put in the style well it's going to be the same as the button so i'll
to be the same as the button so i'll just copy this
just copy this control x to move it down
control x to move it down put it underneath
put it underneath and paste it in but we're going to
and paste it in but we're going to change this now to our
change this now to our header two underscores and button now we
header two underscores and button now we have our button style back in place for
have our button style back in place for the header but we don't have any of the
the header but we don't have any of the modifiers in place that we applied to
modifiers in place that we applied to the html so i'm going to select
the html so i'm going to select all three instances of the dot btn here
all three instances of the dot btn here arrow to the left
arrow to the left one arrow to the right and type header
one arrow to the right and type header two underscores and now they should once
two underscores and now they should once again be applied and we can see that so
again be applied and we can see that so we have the yellow background here
we have the yellow background here and we also have the leaning button here
and we also have the leaning button here on the third one let's check that border
on the third one let's check that border large maybe we just need to change that
large maybe we just need to change that color to see it better or we could apply
color to see it better or we could apply another class that would help us see it
another class that would help us see it better so besides
better so besides the button
the button lean and border large let's go ahead and
lean and border large let's go ahead and apply the
apply the header to underscore
header to underscore button dash dash
button dash dash secondary to this third button as well
secondary to this third button as well and now we can see the yellow color here
and now we can see the yellow color here and then we see the white border as well
and then we see the white border as well notice there is a space between each
notice there is a space between each class that we apply to these elements in
class that we apply to these elements in the html okay jumping back to the style
the html okay jumping back to the style now we have modifiers that are applied
now we have modifiers that are applied to the elements instead of the blocks
to the elements instead of the blocks you can apply a modifier to either one
you can apply a modifier to either one but just know an element is going to
but just know an element is going to have the two underscores and of course a
have the two underscores and of course a block is just going to be the class
block is just going to be the class defined such as header or previously we
defined such as header or previously we had dot btn for button now this all
had dot btn for button now this all helps with organization and like i said
helps with organization and like i said when you're working on teams it's great
when you're working on teams it's great to have that document communicate what
to have that document communicate what you're working on as fast as possible
you're working on as fast as possible and follow the pattern of the team
and follow the pattern of the team and if you just have a large project on
and if you just have a large project on your own this may help as well one other
your own this may help as well one other thing this can help with and i want to
thing this can help with and i want to show this with the elements section is
show this with the elements section is when we're selecting something
when we're selecting something it's good to say a class like dot header
it's good to say a class like dot header has a specificity of 10
has a specificity of 10 and we've seen that with the specificity
and we've seen that with the specificity calculator that should still be linked
calculator that should still be linked in the course resources however if we
in the course resources however if we did this and then instead of using an
did this and then instead of using an element selector such as bem which is a
element selector such as bem which is a class when it's all said and done this
class when it's all said and done this is just a class a header two underscores
is just a class a header two underscores button instead of
button instead of header space button if we did this which
header space button if we did this which says the class and then the element
says the class and then the element within the class or any button elements
within the class or any button elements within the class this has a specificity
within the class this has a specificity of 11 instead of 10. it's much better to
of 11 instead of 10. it's much better to keep that specificity even and using
keep that specificity even and using classes like this helps you do that as
classes like this helps you do that as well so that is just an added bonus that
well so that is just an added bonus that i wanted to go ahead and mention i hope
i wanted to go ahead and mention i hope all of these suggestions help you
all of these suggestions help you organize your css in the future and i
organize your css in the future and i plan to use some of them coming up next
plan to use some of them coming up next on the final project
on the final project welcome to the final project of this css
welcome to the final project of this css for beginners course at the end of my
for beginners course at the end of my html for beginners course we built a
html for beginners course we built a full website for the little taco shop
full website for the little taco shop that you see here
that you see here it's a basic website with very minimal
it's a basic website with very minimal css applied but it provides a great
css applied but it provides a great foundation for our css final project
foundation for our css final project we're going to take this basic html
we're going to take this basic html website and turn it into
website and turn it into this modern website with responsive
this modern website with responsive design by applying much of what we've
design by applying much of what we've learned about css
learned about css let's get started today by looking at
let's get started today by looking at the starter code and this is available
the starter code and this is available in the course resources you'll want to
in the course resources you'll want to download this code because it is the
download this code because it is the full website that we completed at the
full website that we completed at the end of my html for beginners course and
end of my html for beginners course and it will give us a great foundation for
it will give us a great foundation for this project
this project now if you completed that you already
now if you completed that you already know what all is in the code however if
know what all is in the code however if you hadn't let's quickly go over it we
you hadn't let's quickly go over it we have a few html pages and we're going to
have a few html pages and we're going to make a few changes to those not many
make a few changes to those not many though
though and then we have an image folder img
and then we have an image folder img inside this image folder i've included
inside this image folder i've included some larger images today so we will be
some larger images today so we will be able to delete the smaller images i left
able to delete the smaller images i left those in as well though in case you
those in as well though in case you wanted to launch the project as it was
wanted to launch the project as it was in the beginning as we finished it in
in the beginning as we finished it in the html for beginners course but the
the html for beginners course but the top names when you see the double names
top names when you see the double names they end with the dimensions and of
they end with the dimensions and of course the width on the smaller the
course the width on the smaller the older images is 400 pixels the width on
older images is 400 pixels the width on the newer images is 1000 pixels and i've
the newer images is 1000 pixels and i've included those dimensions in the file
included those dimensions in the file names so for the duplicates you always
names so for the duplicates you always want to choose the one on top
want to choose the one on top and then i have a fourth image that does
and then i have a fourth image that does not have a duplicate because we will add
not have a duplicate because we will add one page today
one page today but let's
but let's select those duplicates and then i'm
select those duplicates and then i'm going to press the delete key and now
going to press the delete key and now we're left with just our larger images
we're left with just our larger images likewise there was an examples folder
likewise there was an examples folder and this just gave us example images of
and this just gave us example images of what the project looked like at the end
what the project looked like at the end of that html course if you wanted to
of that html course if you wanted to complete the challenge at that point you
complete the challenge at that point you were welcome to try to look at these
were welcome to try to look at these images and complete that and then look
images and complete that and then look at my code so let's click that examples
at my code so let's click that examples folder and also press delete as we no
folder and also press delete as we no longer need those files
longer need those files now there is very very minimal css
now there is very very minimal css applied to this project so we will be
applied to this project so we will be cleaning out
cleaning out everything that is in the css file you
everything that is in the css file you can press ctrl a to select all and hit
can press ctrl a to select all and hit backspace and delete those 19 lines of
backspace and delete those 19 lines of css that did exist so that gets us
css that did exist so that gets us started now let's go to the index.html
started now let's go to the index.html which is the home page and we'll start
which is the home page and we'll start by looking at the head section the head
by looking at the head section the head section contains all of the meta tags
section contains all of the meta tags that we would need in a project you can
that we would need in a project you can see author and description however there
see author and description however there is one missing that we're going to have
is one missing that we're going to have to add but since we're creating another
to add but since we're creating another new page and we're going to just include
new page and we're going to just include the about content that is currently
the about content that is currently in the index html we had an about
in the index html we had an about section we're just going to make that a
section we're just going to make that a new page and abstract that just remove
new page and abstract that just remove it
it from the index and put it in its own
from the index and put it in its own page today so let's go ahead and do that
page today so let's go ahead and do that and then i'll show you what's missing
and then i'll show you what's missing from the head section in all of the
from the head section in all of the pages we already have so let's click the
pages we already have so let's click the new file icon
new file icon then type well it looks like maybe i
then type well it looks like maybe i already included it here before i
already included it here before i actually do that but you would want to
actually do that but you would want to click the new file icon because the
click the new file icon because the about page would not be in the starter
about page would not be in the starter code i guess i typed that in earlier but
code i guess i typed that in earlier but now we have a blank html file i'm going
now we have a blank html file i'm going to type an exclamation mark which is an
to type an exclamation mark which is an image shortcut but if the shortcut
image shortcut but if the shortcut doesn't pop up for you you can press
doesn't pop up for you you can press control and the space bar and then you
control and the space bar and then you should see the shortcut menu and select
should see the shortcut menu and select this top abbreviation and this gives us
this top abbreviation and this gives us the outline of a page now there's a
the outline of a page now there's a couple of things it includes that we
couple of things it includes that we don't have in the other html files from
don't have in the other html files from that html beginners project one is this
that html beginners project one is this meta tag that has xua compatible ie
meta tag that has xua compatible ie equals edge
equals edge they still include that with this image
they still include that with this image shortcut but it's not really necessary
shortcut but it's not really necessary unless you're concerned about possibly
unless you're concerned about possibly supporting internet explorer which at
supporting internet explorer which at this point has been discontinued and for
this point has been discontinued and for the most part is no longer in use but
the most part is no longer in use but you could include that the one that i
you could include that the one that i want to make sure we include today is
want to make sure we include today is the next one meta with the name equal to
the next one meta with the name equal to viewport then the content is equal to
viewport then the content is equal to width equals device width and initial
width equals device width and initial scale of 1.0 we absolutely need that
scale of 1.0 we absolutely need that meta tag in the header of all of our
meta tag in the header of all of our html pages so we can make them
html pages so we can make them responsive so i'm going to copy this and
responsive so i'm going to copy this and then i'll go back to that index.html
then i'll go back to that index.html and i'm just going to put it right
and i'm just going to put it right underneath the utf-8
underneath the utf-8 that we have in the medic
that we have in the medic care set which is character set here in
care set which is character set here in the head and of course we can remove
the head and of course we can remove that space and save and then i'm going
that space and save and then i'm going to want to do that in the hours.html as
to want to do that in the hours.html as well
well so i'll put that in get rid of the blank
so i'll put that in get rid of the blank line ctrl s to save one more time in the
line ctrl s to save one more time in the contact dot html and we'll put it right
contact dot html and we'll put it right after the utf
after the utf dash eight line and save so now that
dash eight line and save so now that we've done that back here in our about
we've done that back here in our about we could fill in all of these blank
we could fill in all of these blank things that we have or we could just
things that we have or we could just copy the pattern that we already have
copy the pattern that we already have inside of the index.html so i'm just
inside of the index.html so i'm just going to copy the full head section here
going to copy the full head section here the entire head element with the opening
the entire head element with the opening and closing tags
and closing tags go back to about
go back to about and then i'm going to select it here
and then i'm going to select it here and paste it in now i'll just change
and paste it in now i'll just change some information now i can see some of
some information now i can see some of that's going off the screen so i'll
that's going off the screen so i'll press alt z
press alt z and get that code to wrap so i can see
and get that code to wrap so i can see everything you'll want to change of
everything you'll want to change of course my name in the
course my name in the author meta tag to your name
author meta tag to your name and now for the description instead of
and now for the description instead of the official website here we would just
the official website here we would just want
want about the little taco shop
about the little taco shop so this is the about page and that's
so this is the about page and that's what we have and we could put the same
what we have and we could put the same in the title about the little taco shop
in the title about the little taco shop everything else is pretty much as we
everything else is pretty much as we need it for now so i'll press ctrl s to
need it for now so i'll press ctrl s to save that
save that and of course we see a little auto
and of course we see a little auto formatting now where it included the
formatting now where it included the lines the spaces that you see here but
lines the spaces that you see here but we'll just leave it as is and then we
we'll just leave it as is and then we will come back and get that information
will come back and get that information or abstract that out of the index dot
or abstract that out of the index dot html when we get to that point now
html when we get to that point now moving back to the index.html file i'm
moving back to the index.html file i'm going to scroll down and we have a
going to scroll down and we have a header section already clearly defined
header section already clearly defined but we can see it goes clear off the
but we can see it goes clear off the page i don't have the closing tag here
page i don't have the closing tag here yet however everything we see here is
yet however everything we see here is really all i want in the header now we
really all i want in the header now we had a figure here with an image but
had a figure here with an image but we're going to pull that out of the
we're going to pull that out of the header and put it inside of its own
header and put it inside of its own section so select everything from the
section so select everything from the opening figure to the closing figure and
opening figure to the closing figure and i press control x to cut
i press control x to cut and then i'm going to backspace and
and then i'm going to backspace and remove those spaces then i'm going to
remove those spaces then i'm going to type
type section and press tab and so i get a
section and press tab and so i get a closing tag as well
closing tag as well and then press return or enter so i get
and then press return or enter so i get a new line and then i'm going to ctrl v
a new line and then i'm going to ctrl v to paste that figure in so now the
to paste that figure in so now the section contains the figure and the
section contains the figure and the header contains the nav and the h1 and
header contains the nav and the h1 and i'm going to do that on all of the pages
i'm going to do that on all of the pages but and i'll remove that hr which was
but and i'll remove that hr which was the horizontal rule
the horizontal rule however i want to apply some classes
however i want to apply some classes here as well that will help us format
here as well that will help us format our css so before i make these changes
our css so before i make these changes to the other pages let's apply those
to the other pages let's apply those classes in the final lesson before this
classes in the final lesson before this project we learned about the bem block
project we learned about the bem block element modifier naming convention and
element modifier naming convention and i'm going to use that sum today for each
i'm going to use that sum today for each section of the page so we'll start here
section of the page so we'll start here with a class and we're going to set this
with a class and we're going to set this equal to
equal to header the same as the element name and
header the same as the element name and it will be the parent class for
it will be the parent class for everything inside so when we label the
everything inside so when we label the h1
h1 we'll say class
we'll say class and here i'm going to say header two
and here i'm going to say header two underscores and h1
underscores and h1 likewise for the nav we'll say class
likewise for the nav we'll say class equals and then we'll have header two
equals and then we'll have header two underscores
underscores and nav
and nav and when we get to the unordered list
and when we get to the unordered list we'll say class equals
we'll say class equals and then we'll have header
and then we'll have header two underscores if i could find that
two underscores if i could find that underscore key again and then ul
underscore key again and then ul but then i'm not going to apply classes
but then i'm not going to apply classes to the list items some may want to do
to the list items some may want to do that and that would be okay this is a
that and that would be okay this is a small project and i don't have any plans
small project and i don't have any plans to put styles directly on these list
to put styles directly on these list items so i can accomplish everything
items so i can accomplish everything we're doing today without doing that so
we're doing today without doing that so i'll leave that as is however we do need
i'll leave that as is however we do need to rearrange some of the menu so i'm
to rearrange some of the menu so i'm going to select this top list item for
going to select this top list item for about and press control x to cut it out
about and press control x to cut it out we'll leave the menu as the first
we'll leave the menu as the first selection the second selection will be
selection the second selection will be the hours page the third will be the
the hours page the third will be the contact.html
contact.html so at the bottom i'm going to paste in
so at the bottom i'm going to paste in the
the what was the first list item it's now
what was the first list item it's now the last list item but it will no longer
the last list item but it will no longer be an anchor tag that goes to part of
be an anchor tag that goes to part of this page it's going to go to the about
this page it's going to go to the about dot html page
dot html page so we'll switch that over
so we'll switch that over and we don't really need to have the
and we don't really need to have the whole abbreviation here so i'm going to
whole abbreviation here so i'm going to remove that it was good to learn about
remove that it was good to learn about abbreviations in the html course but now
abbreviations in the html course but now we'll just use the word about because
we'll just use the word about because that pretty much sums it up likewise we
that pretty much sums it up likewise we can change contact us
can change contact us to contact
to contact and store hours can just simply be
and store hours can just simply be changed to hours likewise our menu
changed to hours likewise our menu can just be menu and that will still
can just be menu and that will still indicate what these pages are all about
indicate what these pages are all about now let's scroll down to our section
now let's scroll down to our section that contains the figure and we're going
that contains the figure and we're going to call this a hero section it's the
to call this a hero section it's the part of the page after the header where
part of the page after the header where you usually see a large image or an
you usually see a large image or an attention getter that's often referred
attention getter that's often referred to as the hero section so let's give
to as the hero section so let's give this section a class
this section a class and we'll just set it equal to hero and
and we'll just set it equal to hero and then inside
then inside we're going to put an h2 element that is
we're going to put an h2 element that is not currently there so we'll type h2
not currently there so we'll type h2 press tab and we can complete the
press tab and we can complete the closing tag that way now let's give this
closing tag that way now let's give this h2 a class equal to
h2 a class equal to hero two underscores and h2 and we're
hero two underscores and h2 and we're going to put a welcome here that the
going to put a welcome here that the owner of the little taco shop wants us
owner of the little taco shop wants us to add and it's going to say
to add and it's going to say bien
bien benitos which i believe is saying
benitos which i believe is saying welcome in spanish as well so we'll just
welcome in spanish as well so we'll just have that h2 there and this won't be on
have that h2 there and this won't be on every page it's only going to be on the
every page it's only going to be on the home page
home page after that we have some changes to make
after that we have some changes to make to our figure itself now the figure can
to our figure itself now the figure can just stay there as is so really what
just stay there as is so really what needs to be changed is the image and
needs to be changed is the image and maybe applying a new class to the fig
maybe applying a new class to the fig caption so we're going to start off with
caption so we're going to start off with the image and it's still the tacos and
the image and it's still the tacos and drink image but the dimensions have
drink image but the dimensions have changed so we just need to change the
changed so we just need to change the name so it's going to be 1000 and you
name so it's going to be 1000 and you can see vs code knows what's in our
can see vs code knows what's in our image folder and it wants to help us
image folder and it wants to help us complete that the alt will stay the same
complete that the alt will stay the same the alt attribute the title will stay
the alt attribute the title will stay the same but now we need to go ahead and
the same but now we need to go ahead and supply the actual dimensions so we can
supply the actual dimensions so we can avoid that content layout shift that may
avoid that content layout shift that may happen and that was discussed previously
happen and that was discussed previously in a lesson as well of course we will be
in a lesson as well of course we will be styling this image to be a responsive
styling this image to be a responsive image too
image too and then we're going to give the fig
and then we're going to give the fig caption a class while we're here and
caption a class while we're here and this class is going to be off screen
this class is going to be off screen and what that does if you remember when
and what that does if you remember when we had covered that in a previous lesson
we had covered that in a previous lesson is it will take this caption
is it will take this caption off the screen but it will leave it
off the screen but it will leave it available for screen readers for
available for screen readers for accessibility so that is important as
accessibility so that is important as well so it won't be viewable but it will
well so it won't be viewable but it will be readable and now we need to structure
be readable and now we need to structure these top two sections the header and
these top two sections the header and the hero section in all of the other
the hero section in all of the other html files as well so we have a good
html files as well so we have a good foundation before we start in on the css
foundation before we start in on the css so i'm going to scroll up for now and
so i'm going to scroll up for now and select this header on line 15 and scroll
select this header on line 15 and scroll all the way down to line 44 where the
all the way down to line 44 where the section ends i'll hold down the shift
section ends i'll hold down the shift key and click my mouse
key and click my mouse select all of that because right now our
select all of that because right now our about dot html does not have any of this
about dot html does not have any of this content so i'll press ctrl c to copy
content so i'll press ctrl c to copy and now i'll go to the
and now i'll go to the about.html page
about.html page and inside the body element i'm going to
and inside the body element i'm going to paste all of that in now it will
paste all of that in now it will currently be the same as we have on the
currently be the same as we have on the index page but we can make some changes
index page but we can make some changes here and the first change we're going to
here and the first change we're going to make is to select this last list item
make is to select this last list item and control x to remove it from the
and control x to remove it from the bottom of the list and it will now go
bottom of the list and it will now go once again
once again at the top of the list so ctrl v to
at the top of the list so ctrl v to paste but it's not going to go to the
paste but it's not going to go to the about page we just want to put in a
about page we just want to put in a slash which means it will be the root
slash which means it will be the root page that will take us back to the home
page that will take us back to the home page so we'll type home there
page so we'll type home there and then the next one should go to not
and then the next one should go to not just
just hashtag menu because that means it would
hashtag menu because that means it would be on the same page it should go to the
be on the same page it should go to the home page which is the slash and then
home page which is the slash and then hashtag menu and that will take
hashtag menu and that will take the
the visitor back to not only the home page
visitor back to not only the home page but then to that particular spot on the
but then to that particular spot on the home page which is the menu so now we
home page which is the menu so now we have completed or adjusted the menu
have completed or adjusted the menu for our about page but then we also need
for our about page but then we also need to change this header so instead of
to change this header so instead of welcome to the little taco shop let's
welcome to the little taco shop let's just put
just put little taco shop at the top of our about
little taco shop at the top of our about here
here and then after that we can scroll down
and then after that we can scroll down and change our hero section just a
and change our hero section just a little bit as well so we're not going to
little bit as well so we're not going to have the h2 bambonitos on
have the h2 bambonitos on the about page we're just going to have
the about page we're just going to have the figure and this is going to be a
the figure and this is going to be a different image here so this one will
different image here so this one will take the last part of this image file
take the last part of this image file because this is named taco delicioso
because this is named taco delicioso tacos delicioso if i could pronounce
tacos delicioso if i could pronounce that correctly and then we'll have a
that correctly and then we'll have a different caption here as well which
different caption here as well which should say
should say tacos
tacos delicioso
delicioso i could double check my spelling on that
i could double check my spelling on that as well
as well and let me go ahead and check the title
and let me go ahead and check the title tag the title is basically the same so
tag the title is basically the same so i'll copy that but we'll put an
i'll copy that but we'll put an exclamation mark in there because the
exclamation mark in there because the title and the alt do not have to be the
title and the alt do not have to be the same the dimensions are the same 1000 by
same the dimensions are the same 1000 by 667 we're once again going to have a
667 we're once again going to have a class of off screen on the fig caption
class of off screen on the fig caption but the caption should be different so
but the caption should be different so this will be try these
this will be try these delicious
delicious tacos and we can save and now we have
tacos and we can save and now we have the header
the header and the hero section complete
and the hero section complete on the about page so now we can make the
on the about page so now we can make the same similar changes to the other two
same similar changes to the other two pages we have but we won't need to paste
pages we have but we won't need to paste in the content we really already have it
in the content we really already have it there so let's go to the hours page and
there so let's go to the hours page and we can scroll down
we can scroll down and look at that menu and what we're
and look at that menu and what we're going to have to do is apply those
going to have to do is apply those classes once again but we essentially
classes once again but we essentially already have the menu that we're going
already have the menu that we're going to need to have on the hours page we're
to need to have on the hours page we're already linking to home
already linking to home however the next one should be menu so
however the next one should be menu so let's cut out that about with the
let's cut out that about with the control x
control x and we will link to the home page and
and we will link to the home page and then the hashtag menu
then the hashtag menu and then we'll have hours after that i'm
and then we'll have hours after that i'm sorry we won't have hours after that
sorry we won't have hours after that we're on the hours page we're going to
we're on the hours page we're going to have contact and then we'll have the
have contact and then we'll have the about page which once again
about page which once again needs to remove the slash and the
needs to remove the slash and the hashtag and we'll say about
hashtag and we'll say about dot html
dot html and alt z to wrap this code because we
and alt z to wrap this code because we no longer need the about lts it will
no longer need the about lts it will just be about and then we'll make those
just be about and then we'll make those similar changes here no longer contact
similar changes here no longer contact us it will be contact no longer our menu
us it will be contact no longer our menu it will just be menu
it will just be menu and then home so we can save now let's
and then home so we can save now let's scroll down and we'll take that figure
scroll down and we'll take that figure once again control x to remove it
once again control x to remove it and then underneath the header
and then underneath the header create just a little space i'll
create just a little space i'll highlight that hr to remove it we'll
highlight that hr to remove it we'll type
type section and now in the section we'll
section and now in the section we'll paste in our figure
paste in our figure and then i'll give just a empty line
and then i'll give just a empty line after the section and we're now ready to
after the section and we're now ready to apply the classes as we expect to have
apply the classes as we expect to have them here on the hours page as well or
them here on the hours page as well or we i guess we could go ahead and change
we i guess we could go ahead and change the details on the figure it's going to
the details on the figure it's going to be tacos tray again but it's going to be
be tacos tray again but it's going to be 1000 by 667 i believe but let's check
1000 by 667 i believe but let's check this because vs code will help us so
this because vs code will help us so tacos tray there we go 1000 by 667
tacos tray there we go 1000 by 667 and then the rest of this won't change
and then the rest of this won't change except the dimensions so 1000 by 667
except the dimensions so 1000 by 667 and then the fig caption once again is
and then the fig caption once again is going to need that class
going to need that class equal to
equal to off screen
off screen there we go now we need to add the class
there we go now we need to add the class up above which is hero
up above which is hero and save now let's go ahead and scroll
and save now let's go ahead and scroll up and we'll apply those header classes
up and we'll apply those header classes once again at the top for the hours page
once again at the top for the hours page so we have
so we have class equals
class equals header
header and then i'm just going to copy this to
and then i'm just going to copy this to save just a little time
save just a little time paste it into the h1 paste it into the
paste it into the h1 paste it into the nav and paste it into the ul
nav and paste it into the ul and now this first one is going to be
and now this first one is going to be two underscores in h1 the next one is
two underscores in h1 the next one is going to be two underscores and nav and
going to be two underscores and nav and the last one is going to be two
the last one is going to be two underscores and ul and now we've added
underscores and ul and now we've added the classes we need one more time let's
the classes we need one more time let's make those same changes to the contact
make those same changes to the contact page now so our starter will be the
page now so our starter will be the header
header with a class of header the h1 will then
with a class of header the h1 will then have a class of header
have a class of header two underscores in h1
two underscores in h1 the nav will have the class of net our
the nav will have the class of net our header two underscores and nav
header two underscores and nav and the unordered list will have a class
and the unordered list will have a class of header
of header two underscores and ul for unordered
two underscores and ul for unordered list looks like i put some extra spaces
list looks like i put some extra spaces in there i'll remove but we've applied
in there i'll remove but we've applied the class to the header let's look and
the class to the header let's look and see if we have the menu in the order
see if we have the menu in the order that we want it as well so we want to
that we want it as well so we want to start with home and then about is okay
start with home and then about is okay but once again it needs to be to the
but once again it needs to be to the about page here so we'll say about
about page here so we'll say about dot html
dot html and we're going to remove the
and we're going to remove the abbreviation alt z to just wrap that
abbreviation alt z to just wrap that code so we can see it all
code so we can see it all remove the abbreviation so it's just an
remove the abbreviation so it's just an about link which we will select with
about link which we will select with control x then and remove and put it at
control x then and remove and put it at the bottom of the list
the bottom of the list and the second one should be menu which
and the second one should be menu which is where we really want customers to go
is where we really want customers to go then hours
then hours and about there so that is in the
and about there so that is in the correct order we'll remove the extra
correct order we'll remove the extra wording so we just have menu
wording so we just have menu hours and about and save and now finally
hours and about and save and now finally one more figure to remove to put in its
one more figure to remove to put in its own section element so highlight that
own section element so highlight that control x to remove it
control x to remove it we'll leave the header to itself i'll
we'll leave the header to itself i'll delete that horizontal rule element
delete that horizontal rule element then above here we'll add the section
then above here we'll add the section element inside we'll go ahead and add
element inside we'll go ahead and add the figure the section will be a class
the figure the section will be a class equal to
equal to hero
hero and then here we have tacos close up so
and then here we have tacos close up so this is going to change as well so we'll
this is going to change as well so we'll say tacos now we've got close up 1000 by
say tacos now we've got close up 1000 by 649 which is just a little different so
649 which is just a little different so delete that and now the height here is
delete that and now the height here is 49 the fig caption once again gets the
49 the fig caption once again gets the class
class equal to
equal to off screen and save and now we are
off screen and save and now we are finally ready to write some css and what
finally ready to write some css and what we're going to do at the top is what
we're going to do at the top is what you've seen me do at a lot in a lot of
you've seen me do at a lot in a lot of different tutorials and that is import
different tutorials and that is import some fonts from google i'm going to
some fonts from google i'm going to control b so you can see this full line
control b so you can see this full line for just a second and notice i'm
for just a second and notice i'm importing two fonts here so after the
importing two fonts here so after the url you see family equals and there's
url you see family equals and there's fugaz one and then there's also nunito
fugaz one and then there's also nunito that you've seen me use in several
that you've seen me use in several tutorials using both of those fonts
tutorials using both of those fonts today and if you remember from the
today and if you remember from the typography lesson of how we can go get
typography lesson of how we can go get those fonts from
those fonts from fonts.google.com
fonts.google.com you can do that and then import those
you can do that and then import those into your css as i have after that we're
into your css as i have after that we're going to have a css reset it will be
going to have a css reset it will be fairly minimal
fairly minimal and you have seen minimal ones
and you have seen minimal ones throughout some of the lessons but let's
throughout some of the lessons but let's go ahead and label our sections as we
go ahead and label our sections as we create our style sheet today it's going
create our style sheet today it's going to start out with the everything
to start out with the everything selector the all selector but then a
selector the all selector but then a couple that you may not have seen that
couple that you may not have seen that are commonly in resets that i did not
are commonly in resets that i did not add in the lesson on pseudo elements but
add in the lesson on pseudo elements but you see these pseudo elements so you
you see these pseudo elements so you also see the all selector with the after
also see the all selector with the after and the all selector
and the all selector with before so we're going to do that
with before so we're going to do that for all of those
for all of those and then we'll put in what you typically
and then we'll put in what you typically see me put the margin 0
see me put the margin 0 padding of 0
padding of 0 and then a box sizing of border box now
and then a box sizing of border box now that's not all of the reset that i want
that's not all of the reset that i want to use today but that's a great start we
to use today but that's a great start we also need to put something in for the
also need to put something in for the images and this will make all of the
images and this will make all of the images
images display block which gets rid of that
display block which gets rid of that minimal little space below the images
minimal little space below the images that they were originally designed to be
that they were originally designed to be in line so they have that little spacing
in line so they have that little spacing problem and that will remove that then
problem and that will remove that then we'll set the max width to 100 percent
we'll set the max width to 100 percent and we'll set the height to auto and
and we'll set the height to auto and this will make the images responsive for
this will make the images responsive for our project i'm going to ctrl s to save
our project i'm going to ctrl s to save that much and then scroll just a little
that much and then scroll just a little bit there's a few more styles to add to
bit there's a few more styles to add to this reset
this reset the
the form elements like input text area and
form elements like input text area and button for example the ones that we're
button for example the ones that we're going to use today so we'll say input
going to use today so we'll say input button
button text area all three of these and other
text area all three of these and other form elements that you may use do not
form elements that you may use do not inherit font properties like other
inherit font properties like other elements do so we need to say font
elements do so we need to say font inherit if we want that to happen and
inherit if we want that to happen and when i save we'll probably see them
when i save we'll probably see them formatted yep on three separate lines
formatted yep on three separate lines there but that is the end of my reset
there but that is the end of my reset for this project
for this project okay after that i'm going to add another
okay after that i'm going to add another section and this is where i will define
section and this is where i will define css variables now i'll define these as i
css variables now i'll define these as i need them and then be able to come back
need them and then be able to come back and reference them so i'll just say
and reference them so i'll just say variables here
variables here and then as you know that starts in the
and then as you know that starts in the root selector so i'll just have a
root selector so i'll just have a selector here and then inside i'm going
selector here and then inside i'm going to have some labels too and the first
to have some labels too and the first one that we will do today is font and i
one that we will do today is font and i know what i'm already going to do for
know what i'm already going to do for font so i can at least add one variable
font so i can at least add one variable now and that will be ff for font family
now and that will be ff for font family and the main one that i'm going to use
and the main one that i'm going to use is that
is that neato font and then after that i'm going
neato font and then after that i'm going to have the fallback of sans serif and
to have the fallback of sans serif and then for the headings on the project is
then for the headings on the project is where i'm going to use the other font so
where i'm going to use the other font so i'll say font family headings and here
i'll say font family headings and here i'm going to use
i'm going to use let me spell this correctly fugaz
let me spell this correctly fugaz one
one and then it has a fallback of cursive
and then it has a fallback of cursive okay i can add just a few more variables
okay i can add just a few more variables that i know i'm going to use right away
that i know i'm going to use right away and the other one for fonts is the font
and the other one for fonts is the font size so i'll just call that fs and i'm
size so i'll just call that fs and i'm going to use the clamp function that we
going to use the clamp function that we learned about so the font can grow and
learned about so the font can grow and shrink and this is modern css this helps
shrink and this is modern css this helps us
us prevent adding it prevents us or keeps
prevent adding it prevents us or keeps us from adding
us from adding many media queries as some older css
many media queries as some older css might have done so our page can stay
might have done so our page can stay more responsive without having an
more responsive without having an abundance of media queries attached to
abundance of media queries attached to it so our minimum size today will be one
it so our minimum size today will be one rem
rem and then we'll allow it to grow at 2.2
and then we'll allow it to grow at 2.2 viewport units based on the height
viewport units based on the height and then the max size would be 1.5 rent
and then the max size would be 1.5 rent that's what we'll put in and so that
that's what we'll put in and so that will allow the font to grow as the page
will allow the font to grow as the page gets larger and of course it will stop
gets larger and of course it will stop so it doesn't get any smaller than one
so it doesn't get any smaller than one rim okay after these fonts variables i'm
rim okay after these fonts variables i'm also going to put in another
also going to put in another note here for colors i like to define
note here for colors i like to define all of the colors
all of the colors in variables and that way i can just
in variables and that way i can just change them in one spot and see how they
change them in one spot and see how they work together i will be coming back to
work together i will be coming back to add more colors here but i'm going to
add more colors here but i'm going to start off with a background color and i
start off with a background color and i just want a basic
just want a basic orange it's going to match something
orange it's going to match something that's in the photo that we have
that's in the photo that we have and i think that's going to look good
and i think that's going to look good then i'm also going to use a background
then i'm also going to use a background color dash
color dash fade and that's because we're going to
fade and that's because we're going to use a linear gradient now i've picked
use a linear gradient now i've picked out this color it is a
out this color it is a fade of the orange color so i'm using
fade of the orange color so i'm using rgb that's 25220160
and you'll see it's a faded orange after that
after that i'm going to use background image to
i'm going to use background image to create this
create this gradient that we're going to fade with
gradient that we're going to fade with so here i'll say
so here i'll say linear gradient
linear gradient and then we'll go to the bottom
and then we'll go to the bottom and then we'll put in our variables that
and then we'll put in our variables that we just created above so we'll start
we just created above so we'll start with the background color
with the background color and after the background color we'll put
and after the background color we'll put a comma
a comma another variable
another variable and we'll start in and we'll go to the
and we'll start in and we'll go to the background color fades so we'll start at
background color fades so we'll start at the top with the full orange and we'll
the top with the full orange and we'll fade down to that faded color
fade down to that faded color okay that's looking like a pretty good
okay that's looking like a pretty good start but i could put in just a couple
start but i could put in just a couple more for the body so
more for the body so just underneath this i'm going to put in
just underneath this i'm going to put in two dashes
two dashes and
and body dash
body dash background color so
background color so i'm planning on a different background
i'm planning on a different background color for the body element then i am the
color for the body element then i am the html element and you'll see how that
html element and you'll see how that works here i'm just going to put in a
works here i'm just going to put in a basic white with hexadecimal code
basic white with hexadecimal code and it looks like i left out the
and it looks like i left out the semicolon over there there we go so now
semicolon over there there we go so now everything formats better and then we'll
everything formats better and then we'll just have our standard font color i
just have our standard font color i don't even need to say body font color
don't even need to say body font color it's going to be the main font color
it's going to be the main font color and this will just be a black with
and this will just be a black with hexadecimal code as well okay i will be
hexadecimal code as well okay i will be coming back to add more variables but
coming back to add more variables but right now i want to move on to the next
right now i want to move on to the next section and just add a few
section and just add a few utility classes that i always use so i
utility classes that i always use so i know what i need to put here i'll put in
know what i need to put here i'll put in utility classes normally i would
utility classes normally i would probably just copy and paste these from
probably just copy and paste these from a file that i would already have written
a file that i would already have written them in before but we'll go ahead and
them in before but we'll go ahead and write these out we've got our
write these out we've got our off screen class and this is a style i
off screen class and this is a style i use to move elements off the screen but
use to move elements off the screen but yet keep in the document flow so a
yet keep in the document flow so a screen reader will still read the
screen reader will still read the content but maybe i don't want them to
content but maybe i don't want them to appear visually on the page so i'm going
appear visually on the page so i'm going to say
to say position and we'll set that to absolute
position and we'll set that to absolute and then i'll say left and we'll say
and then i'll say left and we'll say minus 10 000 pixels so it will be way
minus 10 000 pixels so it will be way off the page
off the page the next class i need is no wrap and
the next class i need is no wrap and this is when i want to ensure that some
this is when i want to ensure that some of the text does not wrap in an area
of the text does not wrap in an area that is awkward and we can do that with
that is awkward and we can do that with the white space property
the white space property and then we'll just set that to no wrap
and then we'll just set that to no wrap and we'll see how we apply that class
and we'll see how we apply that class later and the final one is simply a
later and the final one is simply a center when i want to center text that
center when i want to center text that say in a paragraph or in a heading we
say in a paragraph or in a heading we need the
need the text align and we can set that to center
text align and we can set that to center with the utility styles complete we're
with the utility styles complete we're now ready to finally start applying some
now ready to finally start applying some styles directly to elements and classes
styles directly to elements and classes so i'm going to bring vs code to the
so i'm going to bring vs code to the left and go ahead and launch the project
left and go ahead and launch the project to the right now remember we removed the
to the right now remember we removed the few styles that did exist and everything
few styles that did exist and everything we've created so far really doesn't
we've created so far really doesn't apply to the page except for that reset
apply to the page except for that reset at the beginning so we have removed more
at the beginning so we have removed more than we have added to the current
than we have added to the current project but we now have variables ready
project but we now have variables ready to apply and utility classes ready to
to apply and utility classes ready to apply but we also want to add what i
apply but we also want to add what i would call general styles so let's put
would call general styles so let's put in a section here
in a section here and we'll
and we'll label this the same way we have the
label this the same way we have the other sections are in the same style
other sections are in the same style and now with our general styles heading
and now with our general styles heading we'll start with the html element itself
we'll start with the html element itself now i'm going to use a different color
now i'm going to use a different color on the html element that will be the
on the html element that will be the background for the body element but if
background for the body element but if you remember from some previous lessons
you remember from some previous lessons we also use scroll behavior on the html
we also use scroll behavior on the html element and we'll set this to smooth
element and we'll set this to smooth and this allows a smooth transition to
and this allows a smooth transition to when we
when we link to other parts of the page and
link to other parts of the page and we'll still be doing that on the home
we'll still be doing that on the home page this index.html
page this index.html when we go to the menu that will be
when we go to the menu that will be located
located below the big image and so in the second
below the big image and so in the second half of the page so we'll have scroll
half of the page so we'll have scroll behavior smooth
behavior smooth and if i save that you won't see any
and if i save that you won't see any changes to the page because that affects
changes to the page because that affects more of a behavior but i'm going to try
more of a behavior but i'm going to try to save after every property applied so
to save after every property applied so you can see those changes the next one
you can see those changes the next one we'll apply is font size and we'll use a
we'll apply is font size and we'll use a variable for font size that we already
variable for font size that we already created
created and now when i apply that will save and
and now when i apply that will save and you see the font size instantly got
you see the font size instantly got larger and that reminds me
larger and that reminds me earlier when i applied the font size
earlier when i applied the font size variable above i believe or that was in
variable above i believe or that was in the background color fade let me bring
the background color fade let me bring this back to full screen quickly because
this back to full screen quickly because i think it's in the linear gradient uh
i think it's in the linear gradient uh vs code tried to help me out and it
vs code tried to help me out and it accidentally added a second var to each
accidentally added a second var to each of these that should have been noted
of these that should have been noted when the video was created as well so
when the video was created as well so hopefully you've already caught that
hopefully you've already caught that error but i need to correct it here so
error but i need to correct it here so now we just want one bar each in that
now we just want one bar each in that linear gradient and we'll save and if we
linear gradient and we'll save and if we come back now to the page
come back now to the page we don't see a difference yet because
we don't see a difference yet because that's not applied but it will be
that's not applied but it will be applied here very soon so down here in
applied here very soon so down here in the general styles once again in the
the general styles once again in the html we have increased the font size now
html we have increased the font size now let's say font
let's say font family
family and we'll use the other variable we
and we'll use the other variable we created there which was ff
created there which was ff and if i save again we should see the
and if i save again we should see the font family has changed and it does for
font family has changed and it does for the page
the page after that we're going to set a
after that we're going to set a background color
background color and this will be a variable as well and
and this will be a variable as well and it's the bg color we see here in the
it's the bg color we see here in the list and i just want to make sure vs
list and i just want to make sure vs code doesn't add a second var
code doesn't add a second var now you can see we've changed to that
now you can see we've changed to that orange that we set but now this is
orange that we set but now this is actually the fallback because we're
actually the fallback because we're going to use the background
going to use the background dash image and here we're going to use
dash image and here we're going to use that background image variable we
that background image variable we created
created and we'll find that here in the list as
and we'll find that here in the list as well and save and now we should see it
well and save and now we should see it go from orange to that lighter orange as
go from orange to that lighter orange as we scroll down the screen and that's
we scroll down the screen and that's what happens so it's a linear gradient
what happens so it's a linear gradient from a full orange to a lighter orange
from a full orange to a lighter orange but this will change as well as we apply
but this will change as well as we apply some styles to the body so we'll see how
some styles to the body so we'll see how this is going to be applied to the
this is going to be applied to the overall page now here we're going to
overall page now here we're going to have a background dash
have a background dash color as well and this is the variable
color as well and this is the variable and here we started this with body so
and here we started this with body so it's the body background color
it's the body background color and now we'll go to the next line and
and now we'll go to the next line and save i can see this is wrapping just a
save i can see this is wrapping just a little bit so i'm going to press alt z
little bit so i'm going to press alt z so anytime it wraps it'll just go down
so anytime it wraps it'll just go down to the next line for us so we can see
to the next line for us so we can see everything
everything okay now we want to set a font color now
okay now we want to set a font color now currently you notice it changed
currently you notice it changed everything because the body is
everything because the body is completely over the html element that
completely over the html element that will change when we adjust the width of
will change when we adjust the width of the body as well but for now we'll just
the body as well but for now we'll just see white again so now the color for the
see white again so now the color for the font will be
font will be variable and this will be the font color
variable and this will be the font color variable that we set
variable that we set and really we shouldn't see a change
and really we shouldn't see a change because it's basically the default font
because it's basically the default font color of black
color of black now let's have a min height for the body
now let's have a min height for the body and we'll set that to 100 viewport units
and we'll set that to 100 viewport units of height
of height and if i save we shouldn't see much of a
and if i save we shouldn't see much of a change because it's already taking up
change because it's already taking up over 100 viewport units of height
over 100 viewport units of height already after that we'll set a max width
already after that we'll set a max width to 800 pixels now i'm not sure of the
to 800 pixels now i'm not sure of the width here to the left but we can see
width here to the left but we can see really 800 pixels is still within the
really 800 pixels is still within the range of this so let's drag this over
range of this so let's drag this over and look at the full page expanded now
and look at the full page expanded now and now we can see here was the 800
and now we can see here was the 800 pixels and now we see the html element
pixels and now we see the html element behind that goes ahead and expands to
behind that goes ahead and expands to the full width of whatever
the full width of whatever viewport is available so we see that
viewport is available so we see that orange that linear gradient fade here we
orange that linear gradient fade here we will change this so the body will be in
will change this so the body will be in the middle and we'll see orange to the
the middle and we'll see orange to the left and the right
left and the right i'll move this back to the right for now
i'll move this back to the right for now and now underneath this we need to
and now underneath this we need to define a couple more things one is going
define a couple more things one is going to be the margin for the body zero on
to be the margin for the body zero on the top and bottom but auto on the left
the top and bottom but auto on the left and right will center this so when i
and right will center this so when i save again we don't see the change here
save again we don't see the change here but when i drag this over we now see the
but when i drag this over we now see the body is centered bringing this back to
body is centered bringing this back to the right we want to add some borders a
the right we want to add some borders a border on the left and the right so i
border on the left and the right so i need to set a borders variable and a
need to set a borders variable and a border color variable so i'm going to
border color variable so i'm going to scroll back up here to the colors
scroll back up here to the colors and let's set this border color variable
and let's set this border color variable first so we'll say border
first so we'll say border dash color
dash color and this is going to be a flat black so
and this is going to be a flat black so 333 for the hexadecimal you can see it's
333 for the hexadecimal you can see it's a flatter black compared to the true
a flatter black compared to the true black that's above it here with zero
black that's above it here with zero zero zero then i'm going to put in
zero zero then i'm going to put in another comment here and just put
another comment here and just put borders some might put the border color
borders some might put the border color under borders but i want all of the
under borders but i want all of the colors grouped together so that's just
colors grouped together so that's just my preference
my preference now here four borders let's go ahead
now here four borders let's go ahead and set this borders variable that we
and set this borders variable that we might use more than once in our project
might use more than once in our project as well and this is going to be one
as well and this is going to be one pixel
pixel solid
solid and now let's go ahead and use the
and now let's go ahead and use the borders color
borders color variable that we created now vs code
variable that we created now vs code once again put in
once again put in two vars so i have to watch out for that
two vars so i have to watch out for that when i've already typed var sometimes it
when i've already typed var sometimes it wants to insert that for me okay we've
wants to insert that for me okay we've created a border color variable and a
created a border color variable and a borders variable we'll scroll back down
borders variable we'll scroll back down to the body element
to the body element and to finish out the body element we're
and to finish out the body element we're going to say
going to say border left
border left we're going to set this to
we're going to set this to borders
and now i'm going to press shift alt and the down arrow so it just copies that
the down arrow so it just copies that down because i also want a border
down because i also want a border dash right but i don't want it on the
dash right but i don't want it on the top or the bottom
top or the bottom and then i'm going to set well let me go
and then i'm going to set well let me go ahead and save and if i bring this over
ahead and save and if i bring this over you can probably see the borders
you can probably see the borders just barely outlining the left and the
just barely outlining the left and the right
right but now i want to set a box shadow as
but now i want to set a box shadow as well on the body
well on the body and that will be 0 0
and that will be 0 0 so what we would typically see for the x
so what we would typically see for the x and y but then there's a blur and i'll
and y but then there's a blur and i'll set that to 10 pixels
set that to 10 pixels and i'll use that border color again
and i'll use that border color again there we go
there we go and
and save
save and now of course we can't see it here
and now of course we can't see it here but when i drag this back over we can
but when i drag this back over we can see there's a little bit of blur
see there's a little bit of blur along each side and that's what we want
along each side and that's what we want just a nice subtle effect so as we
just a nice subtle effect so as we scroll the page and we'll see it stand
scroll the page and we'll see it stand out even more on this lighter orange at
out even more on this lighter orange at the bottom you can see the blur
the bottom you can see the blur along the left and the right of the body
along the left and the right of the body here where we have our center column
here where we have our center column okay dragging this back i'm going to
okay dragging this back i'm going to scroll for some more room and then we
scroll for some more room and then we have just a few more general styles to
have just a few more general styles to apply before we get to classes and the
apply before we get to classes and the different sections of the page let's
different sections of the page let's have our and i'll want lower case here
have our and i'll want lower case here h1 h2 and h3 headings on the page i'm
h1 h2 and h3 headings on the page i'm going to apply the font family which was
going to apply the font family which was for the headings so that's dash dash ff
for the headings so that's dash dash ff and then we'll select headings
and then we'll select headings and that will change
and that will change the headings font you can see that
the headings font you can see that change on the page immediately and then
change on the page immediately and then we're going to apply some letter spacing
we're going to apply some letter spacing now we could do this with pixels or
now we could do this with pixels or different values i'm going to use ems
different values i'm going to use ems which would essentially be the same
which would essentially be the same as referring to the font size that's
as referring to the font size that's already on each heading so the spacing
already on each heading so the spacing will vary
will vary based on which type of heading that it
based on which type of heading that it is
is and if we looked at this as a rim
and if we looked at this as a rim instead of an em
instead of an em then it would be one tenth of that
then it would be one tenth of that setting so what we have for the font
setting so what we have for the font size already at the smallest was one rim
size already at the smallest was one rim but at the largest it was one and a half
but at the largest it was one and a half so that could be anywhere from 16 pixels
so that could be anywhere from 16 pixels to 24 pixels so one tenth of that would
to 24 pixels so one tenth of that would be anywhere from 1.6 pixels to 2.4
be anywhere from 1.6 pixels to 2.4 pixels but this will just space out this
pixels but this will just space out this font i think this heading font needs
font i think this heading font needs just a little extra space so when we
just a little extra space so when we save you can see the letters have now
save you can see the letters have now spaced out just a little bit more
spaced out just a little bit more now i'll select the h2 and the h3 but
now i'll select the h2 and the h3 but not the h1 we have a couple of styles we
not the h1 we have a couple of styles we want to apply here so we have a margin
want to apply here so we have a margin dash
dash bottom
bottom so on the bottom only we'll set that to
so on the bottom only we'll set that to 1 m
1 m and now we're going to use a separate
and now we're going to use a separate color so i need to define a highlight
color so i need to define a highlight color up above in the variables again so
color up above in the variables again so here we have
here we have dash dash and i'll say highlight dash
dash dash and i'll say highlight dash color because we might highlight other
color because we might highlight other things on the page besides headers with
things on the page besides headers with this variable as well so i called it
this variable as well so i called it highlight color it's a color i've picked
highlight color it's a color i've picked out to go with the orange but it's not
out to go with the orange but it's not orange it's 51
orange it's 51 178 51
178 51 and save and you can see it's a green
and save and you can see it's a green color much like we'd see here on the
color much like we'd see here on the bottle of giarito's
bottle of giarito's over here this mandarin has a nice
over here this mandarin has a nice orange but it also has a bit of a green
orange but it also has a bit of a green in the label so let's try that with the
in the label so let's try that with the highlight color as well so now using
highlight color as well so now using this highlight color
this highlight color and scrolling back down to the h2 and
and scrolling back down to the h2 and the h3
the h3 we'll set the color here and we'll be
we'll set the color here and we'll be var
var and we'll use
and we'll use highlight color now that we have that
highlight color now that we have that and saved we should see that change on
and saved we should see that change on the page and yes our bienvenidos and
the page and yes our bienvenidos and about lts and taco trivia has all
about lts and taco trivia has all changed as well as our menu and remember
changed as well as our menu and remember this about section is going to get moved
this about section is going to get moved to the about page we just haven't moved
to the about page we just haven't moved it yet
it yet okay after the h2 and the h3
okay after the h2 and the h3 i'm going to select the paragraphs on
i'm going to select the paragraphs on the page
the page and set their line height which this is
and set their line height which this is something i frequently do it looks a
something i frequently do it looks a little bit better
little bit better and
and we'll just set it to a little bit larger
we'll just set it to a little bit larger value it doesn't have to have a specific
value it doesn't have to have a specific m or ram or pixel here line height going
m or ram or pixel here line height going way back to our typography lesson can
way back to our typography lesson can just be a numerical value here so we've
just be a numerical value here so we've set it to 1.5 you might not see much of
set it to 1.5 you might not see much of a change from that but there's a little
a change from that but there's a little bit let me take it away
bit let me take it away and save
and save and yeah you might see just a bit of a
and yeah you might see just a bit of a change there but not a whole lot but i
change there but not a whole lot but i like something i do like to add okay the
like something i do like to add okay the paragraph has the line height
paragraph has the line height let's look at our links on the page up
let's look at our links on the page up here so these are going to be our main
here so these are going to be our main links
links on the whole project really we don't
on the whole project really we don't have a whole lot of extra links so i'm
have a whole lot of extra links so i'm going to select the anchor which would
going to select the anchor which would be
be a link of course you have to have an
a link of course you have to have an href with it but just to select the link
href with it but just to select the link itself and then we can say
itself and then we can say any link which is a pseudo class
any link which is a pseudo class selector
selector and this
and this link pseudo class selector if you
link pseudo class selector if you remember selects both the lick
remember selects both the lick links that have not been clicked and
links that have not been clicked and links that have already been visited and
links that have already been visited and so here we'll say color
so here we'll say color and now we're going to need to set a
and now we're going to need to set a link color variable as well as hover and
link color variable as well as hover and active so i'm going to scroll back up
active so i'm going to scroll back up and find that colors list of variables
and find that colors list of variables and we'll go ahead
and we'll go ahead and set the
and set the link color variable link dash color
link color variable link dash color this will just be a black color again
this will just be a black color again and then we'll set also
and then we'll set also link
link dash hover
dash hover and here we'll use hsla which will allow
and here we'll use hsla which will allow us to
us to have a black color but then we'll also
have a black color but then we'll also have this transparency and i'm going to
have this transparency and i'm going to say 0.6
say 0.6 so it's 40 percent transparent
so it's 40 percent transparent and 60
and 60 visible essentially
visible essentially after the link hover variable we'll also
after the link hover variable we'll also set a link dash
set a link dash active
active and for that we're going to set it to
and for that we're going to set it to orange which is the same as that html
orange which is the same as that html background
background let's save those three variables and
let's save those three variables and scroll back to our links that we're
scroll back to our links that we're styling and here for link color we'll
styling and here for link color we'll say var and then dash dash
say var and then dash dash link and it is our link color that we're
link and it is our link color that we're selecting
selecting and then the next one we'll have would
and then the next one we'll have would be the anchor with a hover
be the anchor with a hover but then also let's say anchor and you
but then also let's say anchor and you could say focus but here i'm going to
could say focus but here i'm going to use focus
use focus visible which the difference is
visible which the difference is the focus might remain on the selected
the focus might remain on the selected element
element however focus visible after it's used it
however focus visible after it's used it will change and it might not not make
will change and it might not not make much of a difference in this project but
much of a difference in this project but it's something i have started to use
it's something i have started to use more and more instead of just using
more and more instead of just using focus so here i'm going to say color
focus so here i'm going to say color var and we'll set this to once again
var and we'll set this to once again link but it's link hover
link but it's link hover and we'll put the semicolon after that
and we'll put the semicolon after that as well we can save those changes we see
as well we can save those changes we see we've got black links here the hover of
we've got black links here the hover of course is already working so you can see
course is already working so you can see it fade now as we hover over each one of
it fade now as we hover over each one of those but then after both of those we
those but then after both of those we still need the active state as well so
still need the active state as well so we have the active pseudo class selector
we have the active pseudo class selector and here we're going to say color
and here we're going to say color and not color with parentheses color and
and not color with parentheses color and then var parentheses
then var parentheses dash dash
dash dash link and it's going to be active there
link and it's going to be active there we go
we go save and so now if we were actively
save and so now if we were actively selecting a link so when i click on it
selecting a link so when i click on it you can see it turns orange and menu is
you can see it turns orange and menu is still fairly small up here but when i
still fairly small up here but when i hold down the mouse button the link
hold down the mouse button the link turns orange and now our general styles
turns orange and now our general styles are finished for the project so we are
are finished for the project so we are ready to move on to the header section
ready to move on to the header section so i'll add a label inside of our style
so i'll add a label inside of our style sheet for the header
sheet for the header and then we will start applying styles
and then we will start applying styles to the header section i'll scroll up so
to the header section i'll scroll up so this header is at the very top here and
this header is at the very top here and well at the very top there we go and
well at the very top there we go and then the first style will apply is now
then the first style will apply is now to the header class because we started
to the header class because we started using bem the block element modifier
using bem the block element modifier naming convention when we get to the
naming convention when we get to the sections
sections and the first one we applied that to was
and the first one we applied that to was the header so we'll say position
the header so we'll say position and we'll make the header a sticky
and we'll make the header a sticky positioned element we'll put the top at
positioned element we'll put the top at zero so it's at the very top and then we
zero so it's at the very top and then we need to put the z index to a setting of
need to put the z index to a setting of one so it stays on top of everything
one so it stays on top of everything else that might scroll under it and when
else that might scroll under it and when i save we don't see much of a change yet
i save we don't see much of a change yet but we certainly will soon
but we certainly will soon the next thing we'll style is the header
the next thing we'll style is the header two underscores and the h1 so the title
two underscores and the h1 so the title of the page itself
of the page itself and here we're going to say
and here we're going to say text
text align
align and we'll set that to center and save
and we'll set that to center and save and you can see that text did center now
and you can see that text did center now we've got just a few more variables to
we've got just a few more variables to add so i'm going to scroll back up to
add so i'm going to scroll back up to the variables once again and we're at
the variables once again and we're at the colors list and i'm going to add a
the colors list and i'm going to add a header dash bg color
header dash bg color and here we're going to set that
and here we're going to set that background color to black as well
background color to black as well after that we'll set a header dash color
after that we'll set a header dash color and i'm going to set that to white
and i'm going to set that to white and then after the header color while
and then after the header color while i'm here i'm going to go ahead and set a
i'm here i'm going to go ahead and set a nav
nav background color and set that to white
background color and set that to white also so we've set three new colors there
also so we've set three new colors there then underneath the border section
then underneath the border section i'm going to add another label and say
i'm going to add another label and say standard
standard padding and i'm going to create a couple
padding and i'm going to create a couple of variables here so
of variables here so padding let's say dash tb and that means
padding let's say dash tb and that means top bottom so you might want to
top bottom so you might want to abbreviate that differently to
abbreviate that differently to communicate that better i just happen to
communicate that better i just happen to use that abbreviation this time i'm
use that abbreviation this time i'm going to set this just to 0.25
going to set this just to 0.25 em
em and then the next one is
and then the next one is padding dash side not size but side so
padding dash side not size but side so on the left and the right and
on the left and the right and differently here i want this to be two
differently here i want this to be two point five
point five percent so total if i apply this to both
percent so total if i apply this to both sides it will take up five percent of
sides it will take up five percent of the width going to save that you won't
the width going to save that you won't see a change applied because we haven't
see a change applied because we haven't applied any of these variables yet and
applied any of these variables yet and then while i'm here one more to add will
then while i'm here one more to add will be a
be a standard margin
standard margin and underneath that we'll just say
and underneath that we'll just say margin variable and i'm going to use
margin variable and i'm going to use clamp again here so at the smallest it
clamp again here so at the smallest it will be 1 em and then we'll set it to
will be 1 em and then we'll set it to 2.5 viewport height units and then 1.5
2.5 viewport height units and then 1.5 em will be the largest it would possibly
em will be the largest it would possibly be now that this is for the top and the
be now that this is for the top and the bottom on the left and the right i'm
bottom on the left and the right i'm going to set it to zero so even though
going to set it to zero so even though that wrapped what we did was apply clamp
that wrapped what we did was apply clamp to the first value of the margin
to the first value of the margin shorthand
shorthand and then we applied zero to the second
and then we applied zero to the second value which would be the left and the
value which would be the left and the right
right okay with those variables defined now
okay with those variables defined now let's scroll back down to that header
let's scroll back down to that header section where we were applying other
section where we were applying other styles so we had the header and we were
styles so we had the header and we were at the header h1 i'm going to apply the
at the header h1 i'm going to apply the background color now so i'll say
background color now so i'll say background dash color
background dash color this will be var and then we'll have our
this will be var and then we'll have our header background color that we could
header background color that we could select
select and i'll save and we can see that change
and i'll save and we can see that change now it is all black so we need to apply
now it is all black so we need to apply a color
a color and this will be var as well two dashes
and this will be var as well two dashes and header color
and header color and now that we've selected that we will
and now that we've selected that we will save and now we can see welcome to the
save and now we can see welcome to the little taco shop across the top once
little taco shop across the top once again
again after the color let's apply some padding
after the color let's apply some padding and we're using the shorthand here for
and we're using the shorthand here for padding so we'll say var
padding so we'll say var two dashes and padding and this will be
two dashes and padding and this will be top and bottom first and then we'll say
top and bottom first and then we'll say var
var two dashes for
two dashes for padding and this would be the padding on
padding and this would be the padding on the sides and we'll save and we got just
the sides and we'll save and we got just a little bit of padding now to apply
a little bit of padding now to apply itself to the top and the bottom left
itself to the top and the bottom left and the right
and the right for the header looks like i'm not
for the header looks like i'm not closing that out properly so put that
closing that out properly so put that extra curly brace there we go and we're
extra curly brace there we go and we're finished with the header h1 now so now
finished with the header h1 now so now let's move down to
let's move down to header two underscores and nav
header two underscores and nav now for the nav we're going to have a
now for the nav we're going to have a separate background color variable that
separate background color variable that we created so var two dashes
we created so var two dashes and here it will say
and here it will say nav background color
nav background color and now something to discuss quickly you
and now something to discuss quickly you may be wondering why i created these
may be wondering why i created these extra variables and yet some of them
extra variables and yet some of them have the same color values well i'm
have the same color values well i'm specifically naming them so i know where
specifically naming them so i know where they apply and later on when we create a
they apply and later on when we create a dark mode
dark mode they may vary more than they are varying
they may vary more than they are varying now in the light mode so it's good to
now in the light mode so it's good to have that extra control and extra
have that extra control and extra labeling over these color variables okay
labeling over these color variables okay now that i've applied that background
now that i've applied that background color let's add a
color let's add a border i want lower case here border
border i want lower case here border dash bottom to our nav
dash bottom to our nav and there i'm going to say var and apply
and there i'm going to say var and apply that
that borders variable that we created so
borders variable that we created so there's borders
there's borders and i can save that and we now see a
and i can save that and we now see a line across the bottom here of the nav
line across the bottom here of the nav because it's also within this header
because it's also within this header element
element and then after that border let's say
and then after that border let's say font dash weight we'll set that to bold
font dash weight we'll set that to bold when we save we should see those links
when we save we should see those links change a little bit the font definitely
change a little bit the font definitely changed there
changed there and what else can we apply let's say box
and what else can we apply let's say box dash
dash shadow
shadow 0 for the x 6 pixels for the y
0 for the x 6 pixels for the y 5 pixels for the blur but this is going
5 pixels for the blur but this is going to be a shadow that looks like it's
to be a shadow that looks like it's coming straight down so then we'll also
coming straight down so then we'll also set a minus 5 pixels
set a minus 5 pixels and that offsets that blur and then
and that offsets that blur and then we'll have var and we'll set the color
we'll have var and we'll set the color here to the border dash
here to the border dash color and save
color and save and now we get this nice little straight
and now we get this nice little straight down shadow underneath that bottom
down shadow underneath that bottom border
border of the nav the navigation but also
of the nav the navigation but also essentially the header itself and
essentially the header itself and finally we need to style the unordered
finally we need to style the unordered list so adding the
list so adding the header to underscores unordered list
header to underscores unordered list and here we'll start out with some
and here we'll start out with some padding and i'll say var
padding and i'll say var dash dash
dash dash padding and this would be the top and
padding and this would be the top and the bottom and then once again we'll say
the bottom and then once again we'll say var
var hash dash padding and this would be the
hash dash padding and this would be the side value
side value save that now you can see those dots for
save that now you can see those dots for the unordered list were brought back in
the unordered list were brought back in so we know we've added that extra
so we know we've added that extra padding it has just a little more room
padding it has just a little more room but now let's say list
but now let's say list style
style type we'll set that to none which should
type we'll set that to none which should remove those dots beside each list item
remove those dots beside each list item now a display of flex and when i save
now a display of flex and when i save you'll see that change because it
you'll see that change because it instantly makes it a row by default
instantly makes it a row by default we'll say justify content
we'll say justify content space bash
space bash evenly
evenly and we'll save and now it spaces out
and we'll save and now it spaces out those items
those items and then let's add a gap
and then let's add a gap and let's call the gap one rim so
and let's call the gap one rim so what we expect there and so we
what we expect there and so we definitely have
definitely have a
a gap between those items even if they
gap between those items even if they were all squeezed together if the screen
were all squeezed together if the screen got smaller and now a couple of quick
got smaller and now a couple of quick notes on the header before we move on
notes on the header before we move on one is we did learn how to make an
one is we did learn how to make an animated mobile header but we're not
animated mobile header but we're not applying it to this project because it
applying it to this project because it would essentially be overkill we've just
would essentially be overkill we've just got the four links and four pages to the
got the four links and four pages to the project and we can easily link to those
project and we can easily link to those on mobile or in desktop by just listing
on mobile or in desktop by just listing them out here on the page so you don't
them out here on the page so you don't always have to apply everything you know
always have to apply everything you know how to do to every project and i didn't
how to do to every project and i didn't want to do that to this project and it's
want to do that to this project and it's worth noting why
worth noting why also we previously had welcome to the
also we previously had welcome to the little taco shop across here but that's
little taco shop across here but that's really a lot so quickly i will open the
really a lot so quickly i will open the file tree
file tree go to the
go to the index.html and bring this back and let's
index.html and bring this back and let's scroll up and find our h1
scroll up and find our h1 welcome to the little taco shop and
welcome to the little taco shop and let's just remove the welcome to the
let's just remove the welcome to the because what we really want is just
because what we really want is just little taco shop across the top
little taco shop across the top after that we can go back to the file
after that we can go back to the file tree once again select the css and hide
tree once again select the css and hide the file tree i know we're squeezing all
the file tree i know we're squeezing all the code over here to half the screen so
the code over here to half the screen so we can see the page more often but when
we can see the page more often but when i bring it back you'll find that it's
i bring it back you'll find that it's not wrapping and it may be a little
not wrapping and it may be a little easier for you to read so if you're
easier for you to read so if you're working on it with me maybe you're just
working on it with me maybe you're just viewing the code like this so you can
viewing the code like this so you can see those longer lines where we've used
see those longer lines where we've used some variables are not wrapping to a
some variables are not wrapping to a second line now when i bring it over and
second line now when i bring it over and look at it like this so i just wanted to
look at it like this so i just wanted to show you that i'm going to bring this
show you that i'm going to bring this back to the left and now likewise we can
back to the left and now likewise we can bring the project over and look at it in
bring the project over and look at it in full screen as well and you'll see it's
full screen as well and you'll see it's coming together a little bit better
coming together a little bit better we've definitely got some changes to
we've definitely got some changes to make yet however this has certainly
make yet however this has certainly helped and if we look at the other pages
helped and if we look at the other pages since we put in that work ahead of time
since we put in that work ahead of time to put in the correct image
to put in the correct image changes to the html to create those hero
changes to the html to create those hero sections and of course apply the classes
sections and of course apply the classes to the header and the nav as well we see
to the header and the nav as well we see those changes applied as we go to each
those changes applied as we go to each page already so we're making a lot of
page already so we're making a lot of progress we just have some more progress
progress we just have some more progress yet to make so now i'll drag this back
yet to make so now i'll drag this back to the right
to the right and we can begin the next section and
and we can begin the next section and that next section is our hero section so
that next section is our hero section so right underneath our last header style
right underneath our last header style we'll create a new label and we'll call
we'll create a new label and we'll call this the hero section with the label
this the hero section with the label and for that we'll start out with our
and for that we'll start out with our hero class which if you remember is
hero class which if you remember is applied to that section element
applied to that section element we'll say it's position relative because
we'll say it's position relative because we're going to place something absolute
we're going to place something absolute inside of that hero section as well
inside of that hero section as well after that we have a hero h2 and if you
after that we have a hero h2 and if you remember this is only
remember this is only on the home page our index.html and that
on the home page our index.html and that is our bienvenidos welcome here so after
is our bienvenidos welcome here so after that we can go ahead and apply some
that we can go ahead and apply some styles to that and the background dash
styles to that and the background dash color
color for that h2
for that h2 is going to be a new variable i need to
is going to be a new variable i need to create so let's scroll back up to this
create so let's scroll back up to this color that will have in our variables
color that will have in our variables list once again there's all the colors
list once again there's all the colors so at the bottom here we're going to
so at the bottom here we're going to call this two dashes in hero dash color
call this two dashes in hero dash color and now this color is very much like our
and now this color is very much like our highlight color so it's rgb
highlight color so it's rgb five one one seven eight
five one one seven eight five one but then we also need
five one but then we also need a transparency color here so we could
a transparency color here so we could make this rgb a so we can have that
make this rgb a so we can have that transparency and then this will be 0.75
and i don't need the extra parentheses so that means it will be 75 percent
so that means it will be 75 percent viewable and 25 percent transparent so
viewable and 25 percent transparent so when we scroll back down let's apply
when we scroll back down let's apply this to that hero background color here
this to that hero background color here so we'll say var
so we'll say var dash dash hero and there's the hero
dash dash hero and there's the hero color
color after this hero color and i can save and
after this hero color and i can save and we're not seeing much of a change right
we're not seeing much of a change right now but we will here in the future we'll
now but we will here in the future we'll say a color and actually i'm realizing i
say a color and actually i'm realizing i just labeled that wrong and i also need
just labeled that wrong and i also need a hero color but i also need a hero
a hero color but i also need a hero background color so if i could label
background color so if i could label those correctly in my mind it would
those correctly in my mind it would definitely help us out so let's go back
definitely help us out so let's go back up here this should be the hero
up here this should be the hero background color that i just created
background color that i just created instead of the hero color so let's label
instead of the hero color so let's label this
this bg there we go underneath this we're
bg there we go underneath this we're going to have a
going to have a hero dash color
hero dash color and the hero color itself should just be
and the hero color itself should just be white once again for now okay now we
white once again for now okay now we should apply these correctly you can see
should apply these correctly you can see when you get many colors it can be very
when you get many colors it can be very helpful to label those and think about
helpful to label those and think about them in
them in a good order and i'm not always doing
a good order and i'm not always doing that even when i do take all the other
that even when i do take all the other precautions so now i've got a hero
precautions so now i've got a hero background color for the background
background color for the background color and here
color and here this should be var
this should be var dash hero
dash hero color for the font and now save and
color for the font and now save and since it disappeared i think i may have
since it disappeared i think i may have possibly applied something incorrectly
possibly applied something incorrectly even now so let me shoot back up to the
even now so let me shoot back up to the top and take a second look at these hero
top and take a second look at these hero colors here and i see what i've done
colors here and i see what i've done wrong i have rbga instead of rgba so it
wrong i have rbga instead of rgba so it just takes one typo to set something off
just takes one typo to set something off rgba and now we should be good and we
rgba and now we should be good and we have the green color there and you can
have the green color there and you can see our green background now for that h2
see our green background now for that h2 with the white lettering here at the top
with the white lettering here at the top and of course we're going to change this
and of course we're going to change this some more if you remember when i
some more if you remember when i previewed the project at the beginning
previewed the project at the beginning we saw this is really an animated
we saw this is really an animated drop down let's add some more styles to
drop down let's add some more styles to this h2 before we approach the animation
this h2 before we approach the animation so we'll say padding and here we'll have
so we'll say padding and here we'll have 0.25 m and then 0.5 m on the left and
0.25 m and then 0.5 m on the left and the right we save that we can see that
the right we save that we can see that extra padding applied
extra padding applied letter spacing
letter spacing and here let's give this a 0.1
and here let's give this a 0.1 rim so again just that ten percent which
rim so again just that ten percent which should space it out just a little bit
should space it out just a little bit after the letter spacing let's say
after the letter spacing let's say text dash shadow
text dash shadow and so we can apply a shadow to this
and so we can apply a shadow to this lettering we'll say two pixels x offset
lettering we'll say two pixels x offset 2 pixels y
2 pixels y 5 pixels blur
5 pixels blur and now let's use that border color
and now let's use that border color variable
variable that we have used in the past for
that we have used in the past for shadows and we save now that helps that
shadows and we save now that helps that white stand out just a little bit it
white stand out just a little bit it lifts it up off of that green background
lifts it up off of that green background just a bit because of that shadow
just a bit because of that shadow now we need to say
now we need to say position
position absolute
absolute and we're going to move this to the top
and we're going to move this to the top and it's going to be
and it's going to be minus 100
minus 100 pixels
pixels and first let me save this before i move
and first let me save this before i move it so you can see what changes it
it so you can see what changes it instantly
instantly makes it
makes it an element that is not in the document
an element that is not in the document flow and a block element would of course
flow and a block element would of course span the 100 percent width but now
span the 100 percent width but now because it is removed from that flow due
because it is removed from that flow due to position absolute it does not have
to position absolute it does not have 100 width as a block element normally
100 width as a block element normally would okay now let's go ahead and move
would okay now let's go ahead and move it off the page to start out when the
it off the page to start out when the page loads so this would be minus
page loads so this would be minus 100 pixels but before i do that even i
100 pixels but before i do that even i guess i should show where we're going to
guess i should show where we're going to place it to the left and the left would
place it to the left and the left would be 20 pixels this value will not change
be 20 pixels this value will not change so it's just moved in just a little bit
so it's just moved in just a little bit but now
but now the top will be minus 100 pixels and now
the top will be minus 100 pixels and now it should disappear
it should disappear and it will disappear it has disappeared
and it will disappear it has disappeared but it will of course be animated and
but it will of course be animated and drop down and reappear once we apply
drop down and reappear once we apply that animation
that animation and now we need to create the animation
and now we need to create the animation itself and then we'll apply it so here
itself and then we'll apply it so here let's say at
let's say at keyframes as we learned in our animation
keyframes as we learned in our animation lesson
lesson and let's say show welcome is the name
and let's say show welcome is the name of our animation
of our animation we'll start out with a zero percent so
we'll start out with a zero percent so where it starts out at the very
where it starts out at the very beginning
beginning we'll say the top is going to be minus
we'll say the top is going to be minus 20 pixels instead of that minus 100
20 pixels instead of that minus 100 and now we'll transform we're going to
and now we'll transform we're going to do two transforms we're going to have a
do two transforms we're going to have a skew
skew and that will make that lean just a
and that will make that lean just a little bit we'll say zero degrees
little bit we'll say zero degrees and then minus five degrees
and then minus five degrees after that we'll also have a scale y
after that we'll also have a scale y and we'll set that to zero to start out
and we'll set that to zero to start out with
with okay after the zero percent now let's
okay after the zero percent now let's say at 80 percent
say at 80 percent and this is where i like to give it just
and this is where i like to give it just a little bit more than it actually ends
a little bit more than it actually ends up with so it gives it just a little bit
up with so it gives it just a little bit of extra movement or bounce so we'll say
of extra movement or bounce so we'll say the top is 30 pixels now will definitely
the top is 30 pixels now will definitely be visible
be visible the transform it needs to start out
the transform it needs to start out essentially
essentially with the skew again and we're going to
with the skew again and we're going to move the skew just a little bit so i'm
move the skew just a little bit so i'm just going to copy these so we can just
just going to copy these so we can just change the values inside
change the values inside paste those in and so now instead of 0
paste those in and so now instead of 0 degrees it's going to be 10 degrees here
degrees it's going to be 10 degrees here we'll leave that at -5 degrees and the
we'll leave that at -5 degrees and the scale instead of 0 is going to be
scale instead of 0 is going to be 1.2
1.2 and now let's get our finishing values
and now let's get our finishing values at 100 percent for the animation
at 100 percent for the animation here this will be a top at 20 pixels
here this will be a top at 20 pixels and then we'll once again have the
and then we'll once again have the transform and i'm just going to copy
transform and i'm just going to copy that down
that down and this would be a
and this would be a minus 10 degrees and a minus 5 degrees
minus 10 degrees and a minus 5 degrees and then the scale is going to be 1
and then the scale is going to be 1 instead of 1.2
instead of 1.2 and when i save you won't see anything
and when i save you won't see anything yet because we haven't applied the
yet because we haven't applied the animation but now let's go ahead and
animation but now let's go ahead and apply that animation here so we'll say
apply that animation here so we'll say animation
animation and this is the show
and this is the show welcome animation
welcome animation we'll make it take a half second to
we'll make it take a half second to complete we'll start with the ease in
complete we'll start with the ease in and out transition
and out transition and let's give it a delay now i could
and let's give it a delay now i could make this longer to be more dramatic but
make this longer to be more dramatic but let's give it say a
let's give it say a one second delay so we see the page load
one second delay so we see the page load and then we get a little welcome drop
and then we get a little welcome drop down
down and we'll use the forwards property here
and we'll use the forwards property here which means it will keep the state
which means it will keep the state of when the animation ends so it will
of when the animation ends so it will remain visible as well let's save and
remain visible as well let's save and see what happens
see what happens there's our welcome now to see it again
there's our welcome now to see it again we'll have to of course navigate away
we'll have to of course navigate away and come back to the home page
and come back to the home page but then we see our welcome drop down
but then we see our welcome drop down that's a nice little animation to go
that's a nice little animation to go with our project now let's move this
with our project now let's move this over to a full screen
over to a full screen and of course this is how it appears
and of course this is how it appears here but if i go ahead and press ctrl
here but if i go ahead and press ctrl shift and i or we were to right click
shift and i or we were to right click and choose inspect
and choose inspect let's choose a mobile device like the
let's choose a mobile device like the iphone 6 7 and 8 and make sure it's
iphone 6 7 and 8 and make sure it's still positioned correctly i can go to a
still positioned correctly i can go to a hundred percent view we can see it a
hundred percent view we can see it a little bit better
little bit better let's reload
let's reload and there's our welcome so yes it's not
and there's our welcome so yes it's not crowding into the image too much and
crowding into the image too much and everything looks good it's always good
everything looks good it's always good of course to check your mobile design as
of course to check your mobile design as you go and i've been leaving the screen
you go and i've been leaving the screen open so we can see everything but
open so we can see everything but typically i do design for the smallest
typically i do design for the smallest first and you do want to check this
first and you do want to check this along the way and we will continue to
along the way and we will continue to check it so for now i'm going to go back
check it so for now i'm going to go back to full screen
to full screen and drag this back over to the right
and drag this back over to the right with the animation complete i'm going to
with the animation complete i'm going to drag vs code back over to full screen
drag vs code back over to full screen now and we need to look at a couple of
now and we need to look at a couple of sections in the html that are on every
sections in the html that are on every page before we get to specifics about
page before we get to specifics about each page and those remaining sections
each page and those remaining sections are the main element and the footer
are the main element and the footer element so let's go to the footer of the
element so let's go to the footer of the index html first
index html first because i usually like to style that
because i usually like to style that after the header so once we get down to
after the header so once we get down to the footer itself we can see we have
the footer itself we can see we have footer here with no class currently
footer here with no class currently let's go ahead and add the class of
let's go ahead and add the class of footer as we did with the header before
footer as we did with the header before and then let's also apply some classes
and then let's also apply some classes here to our copyright line so we have
here to our copyright line so we have copyright and then the html entity which
copyright and then the html entity which is the copyright symbol right here and
is the copyright symbol right here and then we have the little taco shop well
then we have the little taco shop well we want to wrap this in some span
we want to wrap this in some span elements inside of this paragraph so
elements inside of this paragraph so these lines do not break where we do not
these lines do not break where we do not expect them to we don't want the little
expect them to we don't want the little taco shop or we could just put little
taco shop or we could just put little taco shop we don't want this line to
taco shop we don't want this line to break so let's put a span element here
break so let's put a span element here and now of course it generates the
and now of course it generates the closing span element immediately i'll
closing span element immediately i'll put the closing paragraph
put the closing paragraph tag on a separate line and paste the
tag on a separate line and paste the closing span afterwards i'm going to do
closing span afterwards i'm going to do the same here too for copyright
the same here too for copyright i guess i need to create the element
i guess i need to create the element instead of just typing span there we go
instead of just typing span there we go we can copy that
we can copy that closing span and put it here so we've
closing span and put it here so we've wrapped both of these in span elements
wrapped both of these in span elements now let's give them both the class
now let's give them both the class equal to no wrap one of those utility
equal to no wrap one of those utility classes we created that ensures
classes we created that ensures that this line will not break in the
that this line will not break in the middle of this content and this line
middle of this content and this line will not break in the middle of this
will not break in the middle of this content
content so that helps us by
so that helps us by ensuring this presents itself in the way
ensuring this presents itself in the way we want it to this will not prevent it
we want it to this will not prevent it from being all on one line but if we're
from being all on one line but if we're on a smaller device and it needs to wrap
on a smaller device and it needs to wrap the lines it's going to break where we
the lines it's going to break where we want it to and not in the middle of that
want it to and not in the middle of that content somewhere else let me go ahead
content somewhere else let me go ahead and remove that extra line there
and remove that extra line there and then let's apply some styles to the
and then let's apply some styles to the footer but we can also put this footer
footer but we can also put this footer in each of the html pages so after i
in each of the html pages so after i save the index and copy the footer i can
save the index and copy the footer i can go to the hours page and i can replace
go to the hours page and i can replace the footer that is here and we will not
the footer that is here and we will not need that hr that horizontal rule so
need that hr that horizontal rule so i'll highlight it as well just to remove
i'll highlight it as well just to remove it when i paste that in
it when i paste that in let's do the same for the contact page
let's do the same for the contact page and put that in here paste and save and
and put that in here paste and save and then we'll also need to do that in the
then we'll also need to do that in the about page but if you remember the about
about page but if you remember the about page doesn't have everything else yet so
page doesn't have everything else yet so it doesn't even have a main element that
it doesn't even have a main element that we will be adding but let's save this
we will be adding but let's save this for now and now go back to the index now
for now and now go back to the index now that we've updated the html for the
that we've updated the html for the footer let's do the same for the main
footer let's do the same for the main element and this will not take much at
element and this will not take much at all
all right now we have a main element with no
right now we have a main element with no class and as you can expect we'll put a
class and as you can expect we'll put a class equal
class equal to main here
to main here and then here we have an article that
and then here we have an article that has the id of about well this is going
has the id of about well this is going to be moved to the about page so let's
to be moved to the about page so let's select this full article here
select this full article here down to the closing tag and then i'll
down to the closing tag and then i'll control x i'll go to the about.html
control x i'll go to the about.html and this is going to go inside
and this is going to go inside of a main element that has the class of
of a main element that has the class of main and you can see i created that with
main and you can see i created that with the image shortcut by typing main dot
the image shortcut by typing main dot main and it instantly created the main
main and it instantly created the main element that has a class of main
element that has a class of main inside we'll paste that article which
inside we'll paste that article which will be the content inside of this main
will be the content inside of this main element now i'll save this much and
element now i'll save this much and we'll come back but now let's go back to
we'll come back but now let's go back to the index.html
the index.html where we need to label the article
where we need to label the article that's inside of this main element so
that's inside of this main element so i'm going to highlight that hr and
i'm going to highlight that hr and remove it as well
remove it as well but now the article that's in here has
but now the article that's in here has an id of menu but it also needs to have
an id of menu but it also needs to have some classes and the first class we're
some classes and the first class we're going to apply here is going to be main
going to apply here is going to be main two underscores
two underscores article because each main element on
article because each main element on each of these index pages in the project
each of these index pages in the project contains an article if not more than one
contains an article if not more than one article so we will label that and we'll
article so we will label that and we'll make sure that this is the only article
make sure that this is the only article that's inside the main and if it's not
that's inside the main and if it's not we will need to change it but it looks
we will need to change it but it looks like it is and that's fine it contains
like it is and that's fine it contains the menu which we will come back to as
the menu which we will come back to as well but those are the two main classes
well but those are the two main classes that every html page in the project will
that every html page in the project will need so let's go to the hours now
need so let's go to the hours now scroll up to the main here
scroll up to the main here and it looks like it doesn't currently
and it looks like it doesn't currently have an article but we need to apply the
have an article but we need to apply the class
class equal
equal main and to stay consistent here let's
main and to stay consistent here let's go ahead and add an article element to
go ahead and add an article element to this html page so we have article i will
this html page so we have article i will go ahead and cut out the closing tag and
go ahead and cut out the closing tag and paste it above the closing main tag and
paste it above the closing main tag and now let's give this
now let's give this the class that is expected as well so it
the class that is expected as well so it is
is main two underscores article
main two underscores article and save that now let's go to the
and save that now let's go to the contact page
contact page and here in the contact page you can see
and here in the contact page you can see we have two sections
we have two sections and an h2 so let's go ahead and apply
and an h2 so let's go ahead and apply the class equal to main and let's change
the class equal to main and let's change these section elements to articles to
these section elements to articles to stay consistent with the rest of the
stay consistent with the rest of the main content here and you can see we
main content here and you can see we have
have a opening and closing and we have two
a opening and closing and we have two section elements so i'm going to press
section elements so i'm going to press ctrl d and i got the closing ctrl d
ctrl d and i got the closing ctrl d again to get the opening of the second
again to get the opening of the second one and ctrl d one more time to get that
one and ctrl d one more time to get that closing tag
closing tag now i can just type article once and it
now i can just type article once and it changed all of those
changed all of those but now i need to select just the
but now i need to select just the opening article so i'm going to select
opening article so i'm going to select the full thing including the less than
the full thing including the less than and greater than sign
and greater than sign ctrl d again and it just selects the
ctrl d again and it just selects the opening article of the second one the
opening article of the second one the right arrow to get to the end the left
right arrow to get to the end the left arrow wants to get just behind the word
arrow wants to get just behind the word article and now i can add a space type
article and now i can add a space type class
class and set that equal
and set that equal to main two underscores
to main two underscores and article and now this should be
and article and now this should be applied
applied to both so we've got it here on the top
to both so we've got it here on the top article and we've got it on the second
article and we've got it on the second article that is on the contact page one
article that is on the contact page one other quick change to the contact page
other quick change to the contact page is i want to put the our location
is i want to put the our location information above the contact form so
information above the contact form so let's control x
let's control x and then just move up here above this
and then just move up here above this article
article and paste in our other article so we've
and paste in our other article so we've just switched that information around so
just switched that information around so now that our location information with
now that our location information with the telephone is on top and the contact
the telephone is on top and the contact form is on bottom and finally let's go
form is on bottom and finally let's go to the about html and you can see we
to the about html and you can see we have a class of main that we applied
have a class of main that we applied already but now
already but now let's apply the same class here that is
let's apply the same class here that is main two underscores and article and
main two underscores and article and save because i believe if i remember
save because i believe if i remember correctly there was only one article for
correctly there was only one article for this page as well so now we've made all
this page as well so now we've made all the adjustments for the main element and
the adjustments for the main element and the footer element on each of the html
the footer element on each of the html pages let's select the style.css file
pages let's select the style.css file once again and pull our code over to the
once again and pull our code over to the left so we can see the project on the
left so we can see the project on the right and now we can continue to make
right and now we can continue to make some more changes after we have styled
some more changes after we have styled the hero section we're now ready for the
the hero section we're now ready for the footer section so i'm going to put in a
footer section so i'm going to put in a label in the style sheet for footer
label in the style sheet for footer and now we can apply those styles with
and now we can apply those styles with the footer class
the footer class and here this is going to be
and here this is going to be position
position sticky as well as the header because we
sticky as well as the header because we want it to stay in place so the bottom
want it to stay in place so the bottom will be zero so that will put it
will be zero so that will put it directly at the bottom
directly at the bottom and i'll save that much and let's go
and i'll save that much and let's go ahead and scroll so we can see the
ahead and scroll so we can see the footer down here it's our copyright with
footer down here it's our copyright with copyright symbol and the little taco
copyright symbol and the little taco shop
shop now let's go ahead and add a background
now let's go ahead and add a background color
color [Music]
[Music] and this background color
and this background color will be the variable and we'll just
will be the variable and we'll just apply
apply the header background color so it stays
the header background color so it stays in sync with the header
in sync with the header and if i save yes it all turns black so
and if i save yes it all turns black so we need to of course apply the color
we need to of course apply the color and this should be the
and this should be the header color as well
and we can save that and now we see the font is white there on top of the black
font is white there on top of the black background
background let's apply some padding as it looks
let's apply some padding as it looks pretty scrunched right now so we'll say
pretty scrunched right now so we'll say padding top and bottom we are using that
padding top and bottom we are using that shorthand again so the next one would be
shorthand again so the next one would be padding side
padding side and now we'll go ahead and save that so
and now we'll go ahead and save that so there's just a little extra padding
there's just a little extra padding around that
around that now let's put text
now let's put text align
align and set that to center and save and so
and set that to center and save and so now we can see our copyright with the
now we can see our copyright with the copyright symbol and the little taco
copyright symbol and the little taco shop is centered and we have our footer
shop is centered and we have our footer across the bottom it stays in place when
across the bottom it stays in place when we scroll as does the header i'm going
we scroll as does the header i'm going to copy this heading we put in here for
to copy this heading we put in here for the footer and then i'm going to scroll
the footer and then i'm going to scroll up and put in a very similar heading for
up and put in a very similar heading for the main element so i want all caps
the main element so i want all caps again to make that change
again to make that change after that let's directly style that
after that let's directly style that main class first
main class first and speaking of copying it's going to
and speaking of copying it's going to get the same padding that we had here so
get the same padding that we had here so i'll just copy that
i'll just copy that and put that in for the main and when i
and put that in for the main and when i save we'll see we get a little extra
save we'll see we get a little extra space here with our menu our menu is not
space here with our menu our menu is not looking so great right now and it's one
looking so great right now and it's one of the last things we'll do so let's
of the last things we'll do so let's start looking at some of these other
start looking at some of these other pages the hours look pretty good they
pages the hours look pretty good they got just a little bit of extra space
got just a little bit of extra space from that padding or the about has a
from that padding or the about has a little more information on it as well
little more information on it as well and so we can see some of that there
and so we can see some of that there let's go back to the hours for now okay
let's go back to the hours for now okay after we've applied that basic padding
after we've applied that basic padding to the main element itself
to the main element itself we have the main
we have the main two underscore
two underscore article class
article class and here let's apply a scroll dash
and here let's apply a scroll dash margin dash top
margin dash top and this will be 6.5 rims you usually
and this will be 6.5 rims you usually have to play around with this value to
have to play around with this value to see what works based on your project and
see what works based on your project and how much space possibly your nav is
how much space possibly your nav is taking up because what this is going to
taking up because what this is going to do is enable the article information to
do is enable the article information to show instead of scrolling underneath the
show instead of scrolling underneath the header and then let's set a margin here
header and then let's set a margin here and we'll just use our var
and we'll just use our var and margin and save now this is
and margin and save now this is something we actually would see back on
something we actually would see back on the home page now if we choose menu and
the home page now if we choose menu and it scrolls well we're not on a device
it scrolls well we're not on a device right now that would actually use up the
right now that would actually use up the page or we haven't expanded this menu to
page or we haven't expanded this menu to take up more room but what will happen
take up more room but what will happen will
will be it will prevent the menu from
be it will prevent the menu from scrolling underneath this header if we
scrolling underneath this header if we have a taller menu or we're taking up
have a taller menu or we're taking up more room by the time we have finished
more room by the time we have finished the styles that's probably what will
the styles that's probably what will happen
happen okay a couple of extra things to put now
okay a couple of extra things to put now and one of these at least we'll see
and one of these at least we'll see differently on maybe the contact page
differently on maybe the contact page because it has some extra room here
because it has some extra room here already
already so let's go ahead and apply these styles
so let's go ahead and apply these styles let's say
main and we'll select the article as well and now let's say the first
well and now let's say the first child pseudo selector and we'll give
child pseudo selector and we'll give this a margin dash top of one em so this
this a margin dash top of one em so this would be the
would be the first child that we would see here the
first child that we would see here the first article and that would be the same
first article and that would be the same on any page it gives just a little more
on any page it gives just a little more room between that hero image and the
room between that hero image and the rest
rest and now i'm going to copy this down so
and now i'm going to copy this down so shift alt and the down arrow
shift alt and the down arrow add the extra space and this will be for
add the extra space and this will be for the last child and we do have the one
the last child and we do have the one page
page that has
that has two different children and that has the
two different children and that has the our location and the contact form so for
our location and the contact form so for this last child we want to calculate
this last child we want to calculate some height here so
some height here so say min dash
say min dash height we're going to calculate
height we're going to calculate we'll take 100
we'll take 100 vh which would be 100 width or 100
vh which would be 100 width or 100 height pardon me of what is available
height pardon me of what is available now let's just subtract 20
now let's just subtract 20 rims from that and save
rims from that and save to give it just a little extra room to
to give it just a little extra room to scroll and this might be more visible
scroll and this might be more visible when we don't have as much content such
when we don't have as much content such as well the about page has some if we go
as well the about page has some if we go to the hours page let's see now we have
to the hours page let's see now we have some extra room here as well so if we
some extra room here as well so if we remove this
remove this and then save
and then save we don't have that extra room it's kind
we don't have that extra room it's kind of scrunched it's nice to have that
of scrunched it's nice to have that extra scrolling room and that's why that
extra scrolling room and that's why that is being applied so again preference as
is being applied so again preference as a lot of cs css is a preference
a lot of cs css is a preference now we have just a little extra room
now we have just a little extra room there for the scroll and now we're ready
there for the scroll and now we're ready to move on to individual page sections
to move on to individual page sections i'm going to drag vs code back over to
i'm going to drag vs code back over to full screen i'll scroll up here and
full screen i'll scroll up here and copy the main comment divider that we
copy the main comment divider that we have or label if you will
have or label if you will and here i'm going to switch this
and here i'm going to switch this to
to about and save so we'll start in on our
about and save so we'll start in on our about page in the about section i'm
about page in the about section i'm going to do something different here
going to do something different here that some may agree with or may not
that some may agree with or may not agree with with bem but i don't want to
agree with with bem but i don't want to refer to the main
refer to the main as the parent for the about information
as the parent for the about information i want the word about there so we know
i want the word about there so we know it's on the about page so i'm going to
it's on the about page so i'm going to add another class here
add another class here that is just called about and that goes
that is just called about and that goes to the article so then what i refer to
to the article so then what i refer to inside of this article instead of
inside of this article instead of referencing maine as the parent i'm
referencing maine as the parent i'm going to reference about it just makes
going to reference about it just makes more sense to me for these classes in
more sense to me for these classes in particular and i've only got a couple to
particular and i've only got a couple to apply but i want class about and then
apply but i want class about and then i'm going to use two underscores trivia
i'm going to use two underscores trivia and then on the paragraph that has the
and then on the paragraph that has the answer i'm going to say class
answer i'm going to say class and then equals and this will be about
and then equals and this will be about answer so we have about trivia and about
answer so we have about trivia and about answer and even better than that i think
answer and even better than that i think i might put the word trivia here as well
i might put the word trivia here as well so trivia dash answer is just a two word
so trivia dash answer is just a two word label but that makes more sense to me as
label but that makes more sense to me as well so we've got about trivia and about
well so we've got about trivia and about trivia answer and i did want
trivia answer and i did want two underscores
two underscores there as well so there we go
there as well so there we go now let's switch back to the style css
now let's switch back to the style css and put those classes in here so we'll
and put those classes in here so we'll have our about 200 scores in trivia
have our about 200 scores in trivia remember i put in about class in there
remember i put in about class in there but i don't really have any styles in
but i don't really have any styles in addition to apply there i just wanted to
addition to apply there i just wanted to refer to that about class as the parent
refer to that about class as the parent and so we'll leave it at that margin
and so we'll leave it at that margin will be that variable that we defined
will be that variable that we defined for a margin
for a margin and then for the about trivia answer so
and then for the about trivia answer so we'll have about two underscores trivia
we'll have about two underscores trivia dash answer
dash answer and here we're going to set a margin
and here we're going to set a margin dash top
dash top equal to 1m and save let's pull this
equal to 1m and save let's pull this over and see those changes applied to
over and see those changes applied to the about so here we go
the about so here we go and see we've got a little extra space
and see we've got a little extra space here too which also helps our scroll and
here too which also helps our scroll and then when we show the answer
then when we show the answer that is nicely formatted as well moving
that is nicely formatted as well moving on to the contact form so i will focus
on to the contact form so i will focus on that and let's scroll up to see this
on that and let's scroll up to see this content that we have on this page we
content that we have on this page we definitely have enough height here when
definitely have enough height here when we have two different articles working
we have two different articles working with forms can be difficult but let's
with forms can be difficult but let's see how we can apply the styles here i'm
see how we can apply the styles here i'm going to put in a new label in our style
going to put in a new label in our style sheet
sheet and i will put
and i will put contact right here and then let's scroll
contact right here and then let's scroll up to make that the very top of the page
up to make that the very top of the page and now let's start off with our
and now let's start off with our contact two underscores in h2 but i
contact two underscores in h2 but i don't believe we've applied these
don't believe we've applied these classes yet so let's drag this over to
classes yet so let's drag this over to full screen look at our contact page and
full screen look at our contact page and see what classes we need to apply to the
see what classes we need to apply to the rest of this html i'm going to leave the
rest of this html i'm going to leave the address as is it needs no further
address as is it needs no further classes however the contact form itself
classes however the contact form itself does and i'm going to apply that same
does and i'm going to apply that same philosophy that i did to the about page
philosophy that i did to the about page where i have main article but i don't
where i have main article but i don't want to refer to the
want to refer to the main element as the parent i want to
main element as the parent i want to refer to contact so i'm going to put a
refer to contact so i'm going to put a contact class here at the beginning for
contact class here at the beginning for the article now for the h2 i'm going to
the article now for the h2 i'm going to put class and i'm going to set that
put class and i'm going to set that equal to contact two underscores and h2
equal to contact two underscores and h2 likewise for the form we can make this a
likewise for the form we can make this a contact form so i'll put class
contact form so i'll put class equals
equals contact two underscores and form we'll
contact two underscores and form we'll do the same for the field set i'm going
do the same for the field set i'm going to start copying this so i just have to
to start copying this so i just have to change the one word
change the one word and instead of contact form this would
and instead of contact form this would be contact
be contact field set
field set and now for the legend we're not going
and now for the legend we're not going to apply that class but we're just going
to apply that class but we're just going to put this off screen and we already
to put this off screen and we already have a utility class for that so this
have a utility class for that so this class will be
class will be off screen
off screen for the p here we'll go ahead and put in
for the p here we'll go ahead and put in this
this contact form once again but we're just
contact form once again but we're just going to change the word form
going to change the word form to p for paragraph and it looks like i
to p for paragraph and it looks like i should have selected the full element
should have selected the full element and then the next one as well and now
and then the next one as well and now i'll arrow to the end one arrow to go
i'll arrow to the end one arrow to go inside
inside and paste in this class and now i can
and paste in this class and now i can change
change both at the same time and put in the p
both at the same time and put in the p for paragraph we'll save now we need to
for paragraph we'll save now we need to do something similar
do something similar for the label so let's go ahead and
for the label so let's go ahead and select
select all three of the labels
all three of the labels and then we can arrow to the end
and then we can arrow to the end paste in our class and then once again
paste in our class and then once again arrow over
arrow over change form and change this to contact
change form and change this to contact label
label now let's do this for the inputs so i'll
now let's do this for the inputs so i'll select the first one ctrl d and
select the first one ctrl d and there are only two inputs so that's all
there are only two inputs so that's all we need arrow to the right
we need arrow to the right and paste in the class and then change
and paste in the class and then change the contact form once again and i
the contact form once again and i shouldn't have done that but now i can
shouldn't have done that but now i can control d to select it as well and then
control d to select it as well and then we have contact input as well but now
we have contact input as well but now we're going to have a contact text area
we're going to have a contact text area so i just need to paste that in and
so i just need to paste that in and switch this
switch this to text area
to text area and i believe nope there's one more and
and i believe nope there's one more and that would be the button and we have two
that would be the button and we have two buttons so control d to select the
buttons so control d to select the second one
second one arrow to the right to be at the end
arrow to the right to be at the end paste this in
paste this in and this class is contact button so ctrl
and this class is contact button so ctrl d to select both of those now that we've
d to select both of those now that we've applied all of the classes that we're
applied all of the classes that we're going to use in the form let's go back
going to use in the form let's go back to the style sheet and drag it back to
to the style sheet and drag it back to the left and we'll be looking at the
the left and we'll be looking at the form here on the right or the h2 we're
form here on the right or the h2 we're simply going to set the margin to zero
simply going to set the margin to zero and save that
and save that now the field set and notice the label
now the field set and notice the label of the field set is already gone because
of the field set is already gone because we applied or the legend because we
we applied or the legend because we applied that off screen so it no longer
applied that off screen so it no longer had the contactless words here but we'll
had the contactless words here but we'll put in
put in contact two underscores and field set
contact two underscores and field set and this will be a border of none so it
and this will be a border of none so it will just remove that look even though
will just remove that look even though the field set is still there
the field set is still there after that contact two underscores
after that contact two underscores paragraph
paragraph here we'll set a margin to one m on the
here we'll set a margin to one m on the top and bottom zero on the left and the
top and bottom zero on the left and the right that gives us some more space we
right that gives us some more space we could certainly tell that difference
could certainly tell that difference then the contact two underscores label
then the contact two underscores label here we'll say display
here we'll say display of block
of block and font weight
and font weight of bold and we'll definitely see these
of bold and we'll definitely see these changes
changes makes our form look better as well
makes our form look better as well now we'll select both
now we'll select both the contact two underscores input
the contact two underscores input and the contact two underscores
and the contact two underscores text
text area
area for this we'll say padding is 0.5 m
for this we'll say padding is 0.5 m we can save and we'll see some change
we can save and we'll see some change there the inputs got a little larger
there the inputs got a little larger then we'll say a border dash
then we'll say a border dash radius of 15 pixels save and you can see
radius of 15 pixels save and you can see they're rounded i'm going to scroll now
they're rounded i'm going to scroll now that the form has grown a little larger
that the form has grown a little larger so we can see everything again
so we can see everything again okay after the border radius we're going
okay after the border radius we're going to have a border dash
to have a border dash width of 2 pixels to just make it a
width of 2 pixels to just make it a little larger around each of the inputs
little larger around each of the inputs and then a width of 100 percent and save
and then a width of 100 percent and save and now those inputs take up the full
and now those inputs take up the full width that they have available to them
width that they have available to them our buttons down here still need a
our buttons down here still need a little bit of help so let's say dot
little bit of help so let's say dot contact two underscores
contact two underscores button
button now we'll say padding
now we'll say padding 0.5 m for those and save we can see the
0.5 m for those and save we can see the padding gets a little larger for those
padding gets a little larger for those now
now and then we'll apply a border radius to
and then we'll apply a border radius to match the other border radius 15 pixels
match the other border radius 15 pixels and this should possibly be a variable
and this should possibly be a variable that i have not created but that would
that i have not created but that would allow us to just change it in one place
allow us to just change it in one place and it would change it for the form as
and it would change it for the form as well as the button
well as the button underneath that we should have
underneath that we should have border
border width
width and oh not border width on the buttons
and oh not border width on the buttons i'm sorry
i'm sorry let's have a background
let's have a background color
color let's say bar and let's pick that
let's say bar and let's pick that highlight color so we can have a
highlight color so we can have a different color on these buttons
different color on these buttons that looks good except the font doesn't
that looks good except the font doesn't look so great there so for the var let's
look so great there so for the var let's say the header color
say the header color and that should turn that white and make
and that should turn that white and make it stand out just a little bit more
it stand out just a little bit more those buttons definitely look better
those buttons definitely look better than they did before so a quick check
than they did before so a quick check let's take the border radius property
let's take the border radius property and control c and then i'm going to do
and control c and then i'm going to do control f to search for it and let's see
control f to search for it and let's see how many times it has occurred
how many times it has occurred it's just twice here inside of our
it's just twice here inside of our project so if you wanted to
project so if you wanted to you could absolutely make a contact
you could absolutely make a contact border radius
border radius variable and then you would just change
variable and then you would just change it in one spot and of course the form
it in one spot and of course the form the inputs and the buttons would match
the inputs and the buttons would match but you don't have to i did not clearly
but you don't have to i did not clearly at this point but that would be an
at this point but that would be an option so now before moving on to the
option so now before moving on to the menu let's look at each section that
menu let's look at each section that we've already styled for our page and
we've already styled for our page and here's the full page so our about page
here's the full page so our about page has a nice huge hero image
has a nice huge hero image and we see the about lts some
and we see the about lts some information and our taco trivia that
information and our taco trivia that looks good the hours page another nice
looks good the hours page another nice hero section and a simple bit of
hero section and a simple bit of information about the hours
information about the hours and let's look at the
and let's look at the contact page
contact page we scroll down we see the our location
we scroll down we see the our location information after the hero and the
information after the hero and the contact form as well so that all looks
contact form as well so that all looks good i think the menu is still going to
good i think the menu is still going to need some work and we might apply
need some work and we might apply another style or two yet that we haven't
another style or two yet that we haven't but we're making a lot of good progress
but we're making a lot of good progress let's go ahead and control shift i to
let's go ahead and control shift i to see how everything's looking in a mobile
see how everything's looking in a mobile device as well so maybe we could choose
device as well so maybe we could choose fit to window and we see this iphone 6 7
fit to window and we see this iphone 6 7 and 8 let's look at the
and 8 let's look at the iphone
iphone 5 and that also looks good let's reload
5 and that also looks good let's reload and see how that animation works
and see how that animation works that works as well so yes the menu needs
that works as well so yes the menu needs some help but how do the other pages
some help but how do the other pages look oh the other pages still say
look oh the other pages still say the little taco shop hours instead of
the little taco shop hours instead of just little taco shop
just little taco shop or something similar and again we're on
or something similar and again we're on the smallest device that we might ever
the smallest device that we might ever see right now which is the iphone 5 se
see right now which is the iphone 5 se things may have changed in the future of
things may have changed in the future of course if you're viewing this at a later
course if you're viewing this at a later time
time so here
so here it wraps the two lines on the header but
it wraps the two lines on the header but anything larger than the absolute
anything larger than the absolute smallest device it looks like it won't
smallest device it looks like it won't as long as we adjust our headers here
as long as we adjust our headers here instead of say the little taco shop
instead of say the little taco shop hours we can just say little taco shop
hours we can just say little taco shop here it just says contact us
here it just says contact us and on the about page once again it just
and on the about page once again it just says little taco shop i think we want
says little taco shop i think we want our header to be consistent and say
our header to be consistent and say little taco shop
little taco shop no matter which page we go to
no matter which page we go to so let's go ahead and make those changes
so let's go ahead and make those changes as well in the html as we go back to the
as well in the html as we go back to the code so i'm going to close this back out
code so i'm going to close this back out drag this back to the right
drag this back to the right and bring the code over to the full
and bring the code over to the full screen quickly going to each html page
screen quickly going to each html page we'll make sure that the heading matches
we'll make sure that the heading matches so it should just say little taco shop
so it should just say little taco shop where we have the header h1 for each
where we have the header h1 for each page
page scroll to the top of the hours and we'll
scroll to the top of the hours and we'll see what we have here it says
see what we have here it says the little taco shop hours so we'll go
the little taco shop hours so we'll go ahead and remove
ahead and remove the and hours
the and hours save that file the contact page
save that file the contact page said contact us well we would prefer it
said contact us well we would prefer it still say
still say little
little taco shop here and of course the h2s
taco shop here and of course the h2s will handle the other labels on the page
will handle the other labels on the page so
so we had our location and below that we
we had our location and below that we should also have the contact form as
should also have the contact form as well there we go let's see what was here
well there we go let's see what was here yep our contact form so that looks good
yep our contact form so that looks good and the about html
and the about html should also just say little taco shop
should also just say little taco shop and it does and of course the titles of
and it does and of course the titles of the page say more about the page as well
the page say more about the page as well so about the little taco shop here
so about the little taco shop here the title at the top of this says
the title at the top of this says contact us lts
contact us lts i guess to keep consistency we could say
i guess to keep consistency we could say about lts on this other page as we're
about lts on this other page as we're going with that abbreviation several
going with that abbreviation several places so
places so about lts there the description can
about lts there the description can still say about the little taco shop
still say about the little taco shop and then hours let's see what the
and then hours let's see what the title is here lts hours that's great and
title is here lts hours that's great and of course for the index we want the
of course for the index we want the title to be the little taco shop so
title to be the little taco shop so everything is looking good once again in
everything is looking good once again in the html let's go back to the css and
the html let's go back to the css and start working on the menu now before
start working on the menu now before applying styles to the menu i want to
applying styles to the menu i want to pull up an mdn reference so i'm just
pull up an mdn reference so i'm just going to paste this link in and i'll
going to paste this link in and i'll make sure it is in the course materials
make sure it is in the course materials as well so the course resources but here
as well so the course resources but here on the grid layout and accessibility
on the grid layout and accessibility page in mdn it says grid and the dangers
page in mdn it says grid and the dangers of markup flattening so what we're going
of markup flattening so what we're going to be doing is taking the html table
to be doing is taking the html table that's in the index page that comprises
that's in the index page that comprises the menu that is displayed and we're
the menu that is displayed and we're going to make it a grid
going to make it a grid too often
too often many people just use div elements to
many people just use div elements to make their grid and a grid needs
make their grid and a grid needs that flat structure essentially for the
that flat structure essentially for the grid items so it can review or refer to
grid items so it can review or refer to each grid item
each grid item in that regard because it's not going to
in that regard because it's not going to look at subgrid items subgrid is a
look at subgrid items subgrid is a proposal they're discussing here but
proposal they're discussing here but it's not implemented as well so we want
it's not implemented as well so we want to avoid that dangers i'm going to pull
to avoid that dangers i'm going to pull the code back over and bring up the
the code back over and bring up the index.html
index.html and we can see our table and right now
and we can see our table and right now the table is not flat notice how it has
the table is not flat notice how it has parent
parent elements like the t head element and of
elements like the t head element and of course table row elements and then
course table row elements and then inside
inside we get the
we get the th and td elements for those table cells
th and td elements for those table cells whether they're a header element or
whether they're a header element or they're just a table data element
they're just a table data element and so grid doesn't work that way it
and so grid doesn't work that way it needs flat elements but we can still
needs flat elements but we can still work with this we don't want to remove
work with this we don't want to remove the semantic markup of a table to
the semantic markup of a table to further illustrate my point instead of
further illustrate my point instead of just having this here underneath i'm
just having this here underneath i'm going to paste in what you might see a
going to paste in what you might see a table constructed of for a grid using
table constructed of for a grid using divs
divs now this is a flattened markup table
now this is a flattened markup table essentially that would be applied to
essentially that would be applied to grid and notice how i just used divs and
grid and notice how i just used divs and applied all of these classes
applied all of these classes and this is what you do not want to do
and this is what you do not want to do but i guarantee you will probably see
but i guarantee you will probably see this somewhere when a grid is applied
this somewhere when a grid is applied and you see a table on the page i'm
and you see a table on the page i'm going to press ctrl z though because
going to press ctrl z though because this once again is not what we want to
this once again is not what we want to do and you can tell by this markup
do and you can tell by this markup it is not flattened however there is a
it is not flattened however there is a solution for this
solution for this and it is a display setting that we can
and it is a display setting that we can put in the css that will help us convert
put in the css that will help us convert our table to a grid i'm going to drag
our table to a grid i'm going to drag this back to the left so we can look at
this back to the left so we can look at one more web page and i will link to
one more web page and i will link to this as well in the course resources and
this as well in the course resources and it's the can i use web page and i'm
it's the can i use web page and i'm looking at display contents
looking at display contents notice what it says about display
notice what it says about display contents it causes an element's children
contents it causes an element's children to appear as if they were the direct
to appear as if they were the direct children of the element's parent
children of the element's parent essentially
essentially that ignores that parent element and
that ignores that parent element and that will flatten the elements for grid
that will flatten the elements for grid to use without removing those elements
to use without removing those elements so we just need to put display contents
so we just need to put display contents on some of these parent elements that
on some of these parent elements that grid will not use it says this can be a
grid will not use it says this can be a useful
useful or this can be useful when a wrapper
or this can be useful when a wrapper element should be ignored when using css
element should be ignored when using css grid or similar layout techniques
grid or similar layout techniques and then when we scroll and look at
and then when we scroll and look at everything as far as how well it is
everything as far as how well it is applied now let me pull this out to the
applied now let me pull this out to the full page so we can see everything from
full page so we can see everything from can i use
can i use you can see it's got basically 95
you can see it's got basically 95 percent acceptance here and we're not
percent acceptance here and we're not going to worry about internet explorer
going to worry about internet explorer again and most every other major browser
again and most every other major browser is accepting that use here uh opera mini
is accepting that use here uh opera mini is one that's not in uc browser for
is one that's not in uc browser for android but chrome safari
android but chrome safari safari on ios chrome for android we're
safari on ios chrome for android we're good in almost every major use case here
good in almost every major use case here so i'm comfortable with using that as we
so i'm comfortable with using that as we switch our html table
switch our html table over to a grid and again i will link to
over to a grid and again i will link to both of those for you back to our
both of those for you back to our website here
website here back to the right
back to the right and now i will pull this back over to
and now i will pull this back over to look at our code in a full screen so we
look at our code in a full screen so we can get the ideas of what we're doing
can get the ideas of what we're doing with the table as i did with the contact
with the table as i did with the contact and about pages i applied a separate
and about pages i applied a separate class here to refer to as the parent and
class here to refer to as the parent and i'm going to do the same here it's going
i'm going to do the same here it's going to be the menu class
to be the menu class and then i will refer to these
and then i will refer to these again with bem notation but i'm going to
again with bem notation but i'm going to refer to menu as the parent so here
refer to menu as the parent so here we're going to have a class i'm going to
we're going to have a class i'm going to set this equal to menu two underscores
set this equal to menu two underscores and h2
and h2 for the our menu heading then the table
for the our menu heading then the table itself
itself say class
say class and then menu two underscores and
and then menu two underscores and container because this is going to
container because this is going to contain our menu for the caption for the
contain our menu for the caption for the table
table we'll use this class
we'll use this class and set this to off screen our utility
and set this to off screen our utility class once again as we will not want to
class once again as we will not want to view this caption on the page
view this caption on the page but we do want to retain it for
but we do want to retain it for accessibility now we will be setting the
accessibility now we will be setting the table head and the tr element the table
table head and the tr element the table body element
body element and the table foot element to that
and the table foot element to that display contents so grid actually
display contents so grid actually ignores those the content we want for
ignores those the content we want for the grid and the content that we
the grid and the content that we actually want screen readers to read
actually want screen readers to read will be inside of the th
will be inside of the th and td elements so that's where we'll
and td elements so that's where we'll apply the classes here so all of the
apply the classes here so all of the opening
opening th's that we have here i'm going to
th's that we have here i'm going to select
select three right there and we might even have
three right there and we might even have a fourth but i think we just want three
a fourth but i think we just want three right now for the menu headers so
right now for the menu headers so we'll take this over with the arrow to
we'll take this over with the arrow to the right and i'll say class
the right and i'll say class equals and this is going to be menu two
equals and this is going to be menu two underscores
underscores and header now something else i want to
and header now something else i want to do here one thing i noticed and i must
do here one thing i noticed and i must have done this in the html course as
have done this in the html course as well so if you went through that you can
well so if you went through that you can apply the scope column to this first
apply the scope column to this first cell as well and i'm not sure why i
cell as well and i'm not sure why i didn't before it might have just been an
didn't before it might have just been an oversight the second thing is we were
oversight the second thing is we were looking once again at how to do
looking once again at how to do abbreviations in html but i want the
abbreviations in html but i want the full word quantity here now so i'm going
full word quantity here now so i'm going to remove the abbreviation
to remove the abbreviation and just have the word quantity in the
and just have the word quantity in the second th cell for the table
second th cell for the table okay after we have got the menu headers
okay after we have got the menu headers now we're going to have menu item
now we're going to have menu item classes
classes so we will come through here
so we will come through here and then whether it is the th or the td
and then whether it is the th or the td in these other cells i'm going to make
in these other cells i'm going to make it a menu item so i'm going to start off
it a menu item so i'm going to start off with the remainder of these
with the remainder of these table data cells
table data cells because there are several i'm pressing
because there are several i'm pressing ctrl d to get all of them selected
ctrl d to get all of them selected and i think that's going to be it no one
and i think that's going to be it no one more maybe there we go one more so at
more maybe there we go one more so at the end of that i'll arrow to the right
the end of that i'll arrow to the right i'll put class
i'll put class and i'm going to set this equal to menu
and i'm going to set this equal to menu two underscores and item okay scrolling
two underscores and item okay scrolling back up to where we have the crunchy and
back up to where we have the crunchy and then of course we have the soft label
then of course we have the soft label down here we're going to apply classes
down here we're going to apply classes here as well i'll have a class
here as well i'll have a class i'm going to set this equal to menu two
i'm going to set this equal to menu two underscores item and then i want a
underscores item and then i want a second class here that is just going to
second class here that is just going to be menu two underscores and cr for
be menu two underscores and cr for crunchy as we'll need to refer to that
crunchy as we'll need to refer to that later for the grid possibly
later for the grid possibly and then for soft we're going to do the
and then for soft we're going to do the same thing so it's going to be a class
same thing so it's going to be a class equals menu two underscores item and
equals menu two underscores item and then menu two underscores sf for soft
then menu two underscores sf for soft and finally let's scroll down to the
and finally let's scroll down to the very bottom where we have chips and
very bottom where we have chips and salsa it spans three columns so besides
salsa it spans three columns so besides menu item here i also want menu two
menu item here i also want menu two underscores
underscores and cs and i believe i have now applied
and cs and i believe i have now applied all of the classes that i wanted to
all of the classes that i wanted to apply for the menu itself one other
apply for the menu itself one other thing i am going to do while i'm here in
thing i am going to do while i'm here in the html is remove this line break
the html is remove this line break and then we have a paragraph here and
and then we have a paragraph here and i'm going to apply our utility class
i'm going to apply our utility class of
of center
center to this paragraph that has our back to
to this paragraph that has our back to top link that should appear underneath
top link that should appear underneath the table let's go back to our style
the table let's go back to our style sheet and let's drag this to the left so
sheet and let's drag this to the left so we can see changes applied to the table
we can see changes applied to the table now as we apply these styles i'll start
now as we apply these styles i'll start by scrolling up so we can start at the
by scrolling up so we can start at the very top of our available space and i'm
very top of our available space and i'm going to put in a label for the style
going to put in a label for the style sheet for the menu
sheet for the menu now underneath this the first thing i'm
now underneath this the first thing i'm going to do is select the t-head element
going to do is select the t-head element the t-body element
the t-body element the t-foot element
the t-foot element and the tr element and this is the only
and the tr element and this is the only table in the project so i feel safe
table in the project so i feel safe doing this without classes if it was a
doing this without classes if it was a larger project i might have made a
larger project i might have made a display contents class and then applied
display contents class and then applied this to each that class to each one of
this to each that class to each one of these elements so here i'm going to say
these elements so here i'm going to say display
display contents it also took those parents out
contents it also took those parents out of the flow so now
of the flow so now even though they're still in the page it
even though they're still in the page it made them all run into one line so we
made them all run into one line so we will definitely see changes now as we
will definitely see changes now as we make the table
make the table so or the grid i should say
so or the grid i should say let's create that menu container class
let's create that menu container class if you remember this is applied to the
if you remember this is applied to the table element itself so we'll say
table element itself so we'll say display grid and if i save after each
display grid and if i save after each change we should definitely see changes
change we should definitely see changes as we go so now just by applying display
as we go so now just by applying display grid it changed how that viewed after
grid it changed how that viewed after our display contents was applied now
our display contents was applied now let's say grid dash
let's say grid dash template dash columns
template dash columns and we're going to use the repeat
and we're going to use the repeat function
function we want three columns
we want three columns each with one fragment so let's save now
each with one fragment so let's save now and we once again see changes to that
and we once again see changes to that table now let's go ahead and map out our
table now let's go ahead and map out our grid
grid template
template areas but we really haven't assigned any
areas but we really haven't assigned any specific classes like those that we
specific classes like those that we applied to crunchy or soft so it might
applied to crunchy or soft so it might still look a little strange when we do
still look a little strange when we do this
this essentially though
essentially though we only need to assign
we only need to assign the labels to the ones that are going to
the labels to the ones that are going to take up more than one grid square so
take up more than one grid square so other in other words i can just kind of
other in other words i can just kind of create the other labels without
create the other labels without assigning them to elements so i'm going
assigning them to elements so i'm going to have hd1 hd2 and hd3 i won't end up
to have hd1 hd2 and hd3 i won't end up assigning those to classes at all
assigning those to classes at all then i'm going to have cr
then i'm going to have cr cr1 this is crunchy as you might guess
cr1 this is crunchy as you might guess the abbreviation hd was for header and
the abbreviation hd was for header and then crunchy one price for one taco now
then crunchy one price for one taco now i'm just going to
i'm just going to ctrl alt
ctrl alt and the down arrow a couple of times
and the down arrow a couple of times because one here is going to get changed
because one here is going to get changed to
to two and then one here is going to get
two and then one here is going to get changed to three
changed to three okay after that let's create one line
okay after that let's create one line here for soft so we'll have soft taco
here for soft so we'll have soft taco soft one
soft one and then
and then soft
soft one price
one price after that
after that shift alt down arrow shift alt down
shift alt down arrow shift alt down arrow
arrow select one control d change those to a
select one control d change those to a two select one ctrl d change those to a
two select one ctrl d change those to a three
three and save and so now we have the
and save and so now we have the crunchyrose and the soft rows and the
crunchyrose and the soft rows and the header so at the very end we're going to
header so at the very end we're going to have the chips and salsa rows so cscs cs
have the chips and salsa rows so cscs cs because it had a row span of three
because it had a row span of three after that we have essentially mapped
after that we have essentially mapped out those grid areas it doesn't look
out those grid areas it doesn't look like we want it to yet though because we
like we want it to yet though because we haven't assigned
haven't assigned that crunchy label to the crunchy label
that crunchy label to the crunchy label that we or class that we have and the
that we or class that we have and the soft label to the soft class or the
soft label to the soft class or the chips and salsa label to that class so
chips and salsa label to that class so we still need to add those
we still need to add those likewise let's go ahead and add a small
likewise let's go ahead and add a small gap 0.1 em so as we discussed before
gap 0.1 em so as we discussed before that could be as small as 1.6 pixels or
that could be as small as 1.6 pixels or about as large as 2.4 depending on the
about as large as 2.4 depending on the font size applied
font size applied then let's give a margin bottom of one
then let's give a margin bottom of one em as well now let's apply some of those
em as well now let's apply some of those labels so our grid looks a little bit
labels so our grid looks a little bit better so we'll start out with the menu
better so we'll start out with the menu two underscores cr for crunchy and here
two underscores cr for crunchy and here we'll apply the grid area label of cr
we'll apply the grid area label of cr when we save we don't see much of a
when we save we don't see much of a change yet but i hope to in the near
change yet but i hope to in the near future
future menu two underscores and sf for soft and
menu two underscores and sf for soft and here we'll say grid area
here we'll say grid area sf
sf save again so we see a little bit more
save again so we see a little bit more of a change
of a change and then we'll say
and then we'll say menu two underscores cs
menu two underscores cs this will be grid
this will be grid area cs
area cs and save we definitely have seen some
and save we definitely have seen some changes in the grid it's not what we
changes in the grid it's not what we want yet but we're getting there let's
want yet but we're getting there let's make the color
make the color here a
here a var
var dash dash
dash dash highlight
highlight color for this
color for this okay so we've got a chips and salsa that
okay so we've got a chips and salsa that is now green and then we'll say font
is now green and then we'll say font weight
weight bold as well and save that looks good
bold as well and save that looks good now let's go ahead and apply some of
now let's go ahead and apply some of this to the other areas as well so let's
this to the other areas as well so let's say
say menu two underscore cr and
menu two underscore cr and menu two underscores sf
menu two underscores sf here i'm going to take these two and
here i'm going to take these two and maybe i should have organized this
maybe i should have organized this differently on my thought pattern but i
differently on my thought pattern but i want both of those there as well however
want both of those there as well however there's also some other styles so i want
there's also some other styles so i want a height
a height of 100 percent
of 100 percent as it takes up some of that extra space
as it takes up some of that extra space why is that not applying to crunchy i
why is that not applying to crunchy i may have to go back and see what i did
may have to go back and see what i did wrong there
wrong there but let's go ahead and say these are
but let's go ahead and say these are also grids
and then we want to place the content center which is the point of making them
center which is the point of making them a grid so we could do that yes the
a grid so we could do that yes the crunchy style is not being applied so we
crunchy style is not being applied so we have
have menu cr
menu cr and that is what needs to be applied
and that is what needs to be applied there let's go back and look at our
there let's go back and look at our html and see if that class was applied
html and see if that class was applied properly
properly to the cr section oh it's just one
to the cr section oh it's just one underscore it needs to be two
underscore it needs to be two save and now
save and now go back to style and bring this over and
go back to style and bring this over and now crunchy and soft both have that same
now crunchy and soft both have that same style and everything is aligned better
style and everything is aligned better that makes more sense as to why it
that makes more sense as to why it wasn't coming together quite as quickly
wasn't coming together quite as quickly as i expected and before we move on
as i expected and before we move on let's see if we could apply this
let's see if we could apply this differently now we still need the grid
differently now we still need the grid area here for menu cs but we could
area here for menu cs but we could possibly remove these
possibly remove these and let's see if we could include
and let's see if we could include the dot menu to underscore cs without
the dot menu to underscore cs without really making something strange there i
really making something strange there i think that's fine and it's a little more
think that's fine and it's a little more efficient we aren't repeating those two
efficient we aren't repeating those two lines and now let's look at these
lines and now let's look at these headers and we could possibly add those
headers and we could possibly add those in as well so one more comma and we'll
in as well so one more comma and we'll say menu two underscores header
say menu two underscores header and save and yes i think that style is
and save and yes i think that style is going to work out as well however we
going to work out as well however we still need menu to underscores header
still need menu to underscores header because we want to add a border dash
because we want to add a border dash bottom
bottom to each of those so we'll say bar
to each of those so we'll say bar and bring in our borders variable that
and bring in our borders variable that we have created
we have created and save so now we have a border across
and save so now we have a border across each one of those headings now let's
each one of those headings now let's scroll for some more room and we're
scroll for some more room and we're going to select that menu header again i
going to select that menu header again i could spell menu two underscores header
could spell menu two underscores header and then we also want
and then we also want menu two underscores item
menu two underscores item now for both of these we want a width of
now for both of these we want a width of one hundred percent
one hundred percent and then we'll set a padding to 1 em
and then we'll set a padding to 1 em and let's put a
and let's put a border
border and then let's set medium
and then let's set medium [Music]
[Music] ridge and we'll set the var equal to
ridge and we'll set the var equal to border color there we go
and when we save that we've got borders around everything so in that regard
around everything so in that regard maybe we could remove
maybe we could remove that border bottom
that border bottom and still be good and we save yes and it
and still be good and we save yes and it looks the same so one was just
looks the same so one was just overriding the other and now let's
overriding the other and now let's select just the menu items
and here we'll put a display of grid and we will once again place the content
we will once again place the content in the center and when we save that
in the center and when we save that looks good as well now we didn't apply
looks good as well now we didn't apply that above to the menu item where we set
that above to the menu item where we set the same grid and center because we also
the same grid and center because we also really didn't want to apply these other
really didn't want to apply these other styles to those menu items we wanted to
styles to those menu items we wanted to keep them
keep them this separate color and not have the
this separate color and not have the font be bold but that's looking pretty
font be bold but that's looking pretty good right now as far as converting this
good right now as far as converting this menu table and leaving that semantic
menu table and leaving that semantic html in place we can apply some final
html in place we can apply some final touches to this menu as well but earlier
touches to this menu as well but earlier when we were referencing
when we were referencing the border
the border dash radius property we said we were
dash radius property we said we were only doing it twice
only doing it twice and therefore i didn't go ahead and
and therefore i didn't go ahead and create a variable but now i want to use
create a variable but now i want to use it again and so now that i'm using it in
it again and so now that i'm using it in another place i definitely do want to
another place i definitely do want to create that variable so i'm going to
create that variable so i'm going to scroll back up
scroll back up to the variable section and underneath
to the variable section and underneath borders
borders i'm going to create a
i'm going to create a border dash radius variable
border dash radius variable and just set that to 15 pixels so now
and just set that to 15 pixels so now that i've created that we can use that
that i've created that we can use that variable
variable in all of the places that we are
in all of the places that we are applying a border radius so now let's go
applying a border radius so now let's go ahead and change
ahead and change these two that currently exist to var
these two that currently exist to var dash border
dash border radius there we go
radius there we go and save that so no other changes will
and save that so no other changes will be made there but now we can apply these
be made there but now we can apply these final touches to our menu table as well
final touches to our menu table as well and we can use that border radius
and we can use that border radius property now i could apply classes to
property now i could apply classes to the header and the footer but i'm not
the header and the footer but i'm not and they are being ignored for some
and they are being ignored for some things concerning the grid when we set
things concerning the grid when we set that to display contents however they
that to display contents however they are still part of the document so we can
are still part of the document so we can still use them for selectors so i'm
still use them for selectors so i'm going to select the t head
going to select the t head and then the th inside of the t head and
and then the th inside of the t head and say the first
say the first child which should be the very first
child which should be the very first cell that says tacos and here we're
cell that says tacos and here we're going to set the border dash top
going to set the border dash top dash left
dash left dash radius
dash radius and now we'll use our
and now we'll use our border radius variable once again
border radius variable once again and when we save we can see this now has
and when we save we can see this now has the border radius of 15 pixels
the border radius of 15 pixels so likewise i'm going to just copy this
so likewise i'm going to just copy this down so i don't have to retype
down so i don't have to retype everything shift alt and the down arrow
everything shift alt and the down arrow this is going to be the t head th
this is going to be the t head th last child and instead of the top left
last child and instead of the top left it's going to be
it's going to be the top right everything else should be
the top right everything else should be the same and now we see that same border
the same and now we see that same border radius applied over here to the right
radius applied over here to the right finally we have this one large chips and
finally we have this one large chips and salsa cell along the bottom of this
salsa cell along the bottom of this table for the menu so here this will be
table for the menu so here this will be the
the t foot
t foot and then we'll select the table data
and then we'll select the table data cell inside
cell inside here we can set the border dash
here we can set the border dash bottom dash left dash radius
bottom dash left dash radius and this will once again be var
and this will once again be var two dashes border and use that border
two dashes border and use that border radius variable
radius variable and once we save this we see
and once we save this we see that applied to the left corner so it
that applied to the left corner so it just needs to be applied to the right
just needs to be applied to the right corner so inside this same
corner so inside this same selector here for t foot td we can now
selector here for t foot td we can now also
also apply this
apply this to the right corner and save and there
to the right corner and save and there we have our rounded corners for our
we have our rounded corners for our table as well we're getting near the end
table as well we're getting near the end but there is a little more to do let's
but there is a little more to do let's go ahead and look at the page in full
go ahead and look at the page in full screen or at the full site now and
screen or at the full site now and here's our back to top we can click we
here's our back to top we can click we have the smooth scrolling that goes
have the smooth scrolling that goes there
there we can go to the hours page everything
we can go to the hours page everything looks pretty good there
looks pretty good there the contact form everything is good here
the contact form everything is good here the about page and the trivia
the about page and the trivia that's all working well and our
that's all working well and our animation shows here let's look by shift
animation shows here let's look by shift control and the letter i to go into a
control and the letter i to go into a mobile view
mobile view notice how well our grid conforms it
notice how well our grid conforms it automatically adapts we didn't have to
automatically adapts we didn't have to apply a media query the grid just works
apply a media query the grid just works in this mobile view and that's great
in this mobile view and that's great let's look at some other views here's a
let's look at some other views here's a little bit maybe larger phone there we
little bit maybe larger phone there we go so it is quite a bit larger it is the
go so it is quite a bit larger it is the iphone 6 7 8 plus
iphone 6 7 8 plus and there we'll size it down to 75
and there we'll size it down to 75 let's go ahead and look at the iphone x
let's go ahead and look at the iphone x that gets taller so that should also
that gets taller so that should also make our text just a little larger based
make our text just a little larger based on how we used clamp with that
on how we used clamp with that everything's still looking pretty good
everything's still looking pretty good the form still adapts to the screen size
the form still adapts to the screen size the menu looks good and it took us right
the menu looks good and it took us right to the menu when i click the menu link
to the menu when i click the menu link the about page
the about page the hours
the hours all is looking pretty good i think we
all is looking pretty good i think we could apply possibly a little bit of
could apply possibly a little bit of space or a class we might have to back
space or a class we might have to back to the top that we applied
to the top that we applied down here i think we at least centered
down here i think we at least centered it so we might change something there
it so we might change something there but overall it's good to just evaluate
but overall it's good to just evaluate your project and see how everything
your project and see how everything looks to you as you go and you can tell
looks to you as you go and you can tell it's looking good on mobile as well so
it's looking good on mobile as well so let's go back to full screen view and
let's go back to full screen view and we're going to make just a couple of
we're going to make just a couple of changes there is one media query i would
changes there is one media query i would like to apply to this project although
like to apply to this project although using modern css
using modern css for the most part we've been able to
for the most part we've been able to avoid media queries we are going to put
avoid media queries we are going to put this media query at the bottom of the
this media query at the bottom of the page so we'll say at
page so we'll say at media
media and then we'll say screen
and then we'll say screen and now say min width
and now say min width and we'll say
and we'll say 576 pixels which is our small break
576 pixels which is our small break point and that is similar to what
point and that is similar to what bootstrap uses the css library or
bootstrap uses the css library or framework if you will
framework if you will and here we have header
and here we have header two underscores h1
two underscores h1 now let's select the pseudo element here
now let's select the pseudo element here and this is the before pseudo element
and this is the before pseudo element and we're going to set some content
and we're going to set some content on this h1 let's give a space and what i
on this h1 let's give a space and what i want to do
want to do is put a taco emoji in here and actually
is put a taco emoji in here and actually i want to put the taco emoji and then
i want to put the taco emoji and then the space so we have a taco space and
the space so we have a taco space and then we have the heading as you might
then we have the heading as you might expect i also want to do this
expect i also want to do this with the after so i will just copy that
with the after so i will just copy that down again shift alt and the down arrow
down again shift alt and the down arrow will switch before to
will switch before to after
after and now with the after
and now with the after we want the space to come first and then
we want the space to come first and then the taco so we've got taco space heading
the taco so we've got taco space heading space
space taco so this should show up on any
taco so this should show up on any screen that's larger than 576 pixels in
screen that's larger than 576 pixels in width so when we save
width so when we save now we have tacos in the heading as well
now we have tacos in the heading as well and that's a great addition for the
and that's a great addition for the little taco shop and it applies to all
little taco shop and it applies to all the pages where we set up our classes
the pages where we set up our classes correctly but if we go to a smaller
correctly but if we go to a smaller screen
screen where we might not be able to fit all of
where we might not be able to fit all of that in
that in they disappear and that is great too so
they disappear and that is great too so that only shows in larger viewports
that only shows in larger viewports let's go to an ipad
let's go to an ipad there we have the tacos so just mobile
there we have the tacos so just mobile it will not try to squeeze those tacos
it will not try to squeeze those tacos in and that is fine let's drag this back
in and that is fine let's drag this back over we can apply just a little bit more
over we can apply just a little bit more to the
to the media query as well and this is just
media query as well and this is just something i want to do for the
something i want to do for the menu two underscores header
menu two underscores header then we're also going to have it in the
then we're also going to have it in the menu to underscore cr which was the
menu to underscore cr which was the crunchy
crunchy menu two underscores sf which was the
menu two underscores sf which was the soft
soft menu two underscore cs
menu two underscore cs which was the chips and salsa we're
which was the chips and salsa we're going to set the font size to 125
going to set the font size to 125 so just a little larger
so just a little larger on these larger screens for the headings
on these larger screens for the headings you really if you wanted to you could do
you really if you wanted to you could do it to all of these but i just really
it to all of these but i just really wanted to make the heading stand out and
wanted to make the heading stand out and so everything we've wrapped around here
so everything we've wrapped around here that you see in green
that you see in green has applied that larger font now just
has applied that larger font now just another 25 percent larger
another 25 percent larger than it was there is one more media
than it was there is one more media query to apply but it's not based on the
query to apply but it's not based on the width it's based on the preference of
width it's based on the preference of light and dark mode we have styled our
light and dark mode we have styled our light mode this would be our normal
light mode this would be our normal viewing for the website but many prefer
viewing for the website but many prefer dark mode these days and that includes
dark mode these days and that includes myself so i definitely like to add dark
myself so i definitely like to add dark mode when the preferences are set for
mode when the preferences are set for that so if your system preference is
that so if your system preference is dark mode that's what will display my
dark mode that's what will display my system preference is dark mode so i'm
system preference is dark mode so i'm going to put this media query
going to put this media query directly under the variables we defined
directly under the variables we defined so
so it will be applied right away because
it will be applied right away because all it really does is change the
all it really does is change the variables
variables for those colors that we're using on the
for those colors that we're using on the site so i will say at media put our
site so i will say at media put our parentheses then put prefers dash
parentheses then put prefers dash color dash
color dash scheme
scheme and here i'm going to say dark so that
and here i'm going to say dark so that is what my system is already set to so
is what my system is already set to so anything we put in here will start to
anything we put in here will start to overwrite what we already have for those
overwrite what we already have for those variables so we need the root pseudo
variables so we need the root pseudo selector it's the pseudo class
selector it's the pseudo class and now let's overwrite
and now let's overwrite the background
the background color and this is going to be
color and this is going to be black now we will not really see the
black now we will not really see the change here because we're not seeing
change here because we're not seeing that orange color until we drag this
that orange color until we drag this over to full screen so if i save
over to full screen so if i save drag this over to the full screen now
drag this over to the full screen now you can see it's dark but it's still
you can see it's dark but it's still fading to that light orange because we
fading to that light orange because we haven't changed that other variable yet
haven't changed that other variable yet either so let's change the
either so let's change the bg
bg color dash fade variable as well and
color dash fade variable as well and i'll just make that gray just like my
i'll just make that gray just like my last name i'll save and now let's drag
last name i'll save and now let's drag this over once again you can see it's
this over once again you can see it's fading to a gray instead of the orange
fading to a gray instead of the orange to a light orange
to a light orange the next color we'll put in here will be
the next color we'll put in here will be the header background color now we'll
the header background color now we'll start to see these changes so
start to see these changes so header bg color
header bg color oh i'm sorry just header color not bg
oh i'm sorry just header color not bg color
color let's make this
white smoke and save
and save and then let's go ahead and change the
and then let's go ahead and change the nav
nav i said color now i need background color
i said color now i need background color and by the way the white smoke i just
and by the way the white smoke i just find that to be easier on my eyes than
find that to be easier on my eyes than the pure white that we've used in other
the pure white that we've used in other spots let's set this to
spots let's set this to rgb
rgb 20 20
20 20 20 which is just a different shade
20 which is just a different shade of black essentially and now you can see
of black essentially and now you can see that background color
that background color for the nav menu definitely got darker
for the nav menu definitely got darker okay so we're going to have to change
okay so we're going to have to change that text eventually too
that text eventually too let's set the hero color and this is for
let's set the hero color and this is for our little animated part that drops down
our little animated part that drops down so our hero color is going to be a
so our hero color is going to be a different
different flat black now when it drops down you
flat black now when it drops down you can see that has also changed
can see that has also changed now let's set the body background color
now let's set the body background color itself so this will be a big change when
itself so this will be a big change when we first see it that will also be this
we first see it that will also be this flat black
flat black and that has made a difference
and that has made a difference now let's go to the font color itself
now let's go to the font color itself which is what's being used on most of
which is what's being used on most of the page and we'll go with that
the page and we'll go with that white smoke that's just a little easier
white smoke that's just a little easier on the eyes than the pure bright white
on the eyes than the pure bright white and so let's find a page that's using
and so let's find a page that's using well here we see it inside of these
well here we see it inside of these table cells here but if we go look at a
table cells here but if we go look at a different page you can see it is being
different page you can see it is being used right here as well
used right here as well okay after the font color let's apply
okay after the font color let's apply the
the highlight color
highlight color and where this was that green let's use
and where this was that green let's use white smoke here as well so when we save
white smoke here as well so when we save i believe that's in the animation
i believe that's in the animation and i'm not seeing that applied right
and i'm not seeing that applied right now i'm not seeing the animation because
now i'm not seeing the animation because i'm not on the right page here we go and
i'm not on the right page here we go and oh no it wasn't in the animation because
oh no it wasn't in the animation because that has the separate
that has the separate background color that is slightly
background color that is slightly transparent but it is in some other
transparent but it is in some other areas like we were using it for the h2s
areas like we were using it for the h2s and h3s and the table headings so we can
and h3s and the table headings so we can see that's now using white smoke as well
see that's now using white smoke as well okay now let's switch the
okay now let's switch the border color that's being used let's
border color that's being used let's also make that white smoke
also make that white smoke now our table is standing out
now our table is standing out and now that border color was a bit of
and now that border color was a bit of the shadow behind the lettering so now
the shadow behind the lettering so now we've got a little bit of white shadow
we've got a little bit of white shadow behind bienvenidos and that stands out
behind bienvenidos and that stands out on that green as well helping the dark
on that green as well helping the dark lettering stand out and we still need to
lettering stand out and we still need to change our link colors so
change our link colors so link dash color
link dash color we'll make that white smoke you can see
we'll make that white smoke you can see we're really making use of that color
we're really making use of that color for this setting
for this setting also say link hover is now going to be
also say link hover is now going to be orange
orange and then
and then link active
link active is going to be the lighter orange so rgb
is going to be the lighter orange so rgb 252 200 103.
252 200 103. and save so now when we hover over a
and save so now when we hover over a link it becomes orange
link it becomes orange when i hold down it's a lighter orange
when i hold down it's a lighter orange and then we go to hours
and then we go to hours everything looks pretty good now you may
everything looks pretty good now you may have your own preferences for dark mode
have your own preferences for dark mode as well but just scan over the site see
as well but just scan over the site see how you think it looks does everything
how you think it looks does everything look like you want it to oh these
look like you want it to oh these buttons need a little bit of help yet
buttons need a little bit of help yet let's check our other page and make sure
let's check our other page and make sure everything else looks good and then we
everything else looks good and then we might need to change something about
might need to change something about those buttons we'll have to see what is
those buttons we'll have to see what is going on there
going on there and that might be a correction that
and that might be a correction that needs to be made in how they're
needs to be made in how they're initially
initially being set as well so let's find
being set as well so let's find where we had a
where we had a button which was a contact button and
button which was a contact button and you can see the header color which
you can see the header color which remained white or white smoke was being
remained white or white smoke was being used but then that highlight color was
used but then that highlight color was the background and that has changed i
the background and that has changed i think we need to change this from header
think we need to change this from header color to button color and give us some
color to button color and give us some or give ourselves some control over what
or give ourselves some control over what color
color is the text on top of the buttons so
is the text on top of the buttons so we've added a button color variable now
we've added a button color variable now we need to define that above and then of
we need to define that above and then of course change it when it gets to dark
course change it when it gets to dark mode as well so we were fine with it at
mode as well so we were fine with it at first when it was the same as the header
first when it was the same as the header color so that's what we'll start off
color so that's what we'll start off with and i believe that is just white so
with and i believe that is just white so we'll put that and also put it in as
we'll put that and also put it in as white here but now we need to change
white here but now we need to change this when we get to dark mode so let's
this when we get to dark mode so let's bring this down into our dark mode
bring this down into our dark mode definitions
definitions add this and let's change it to black
add this and let's change it to black right here
right here and save now let's go ahead and go to
and save now let's go ahead and go to our contact page
our contact page scroll down and now we can see the text
scroll down and now we can see the text on our buttons and so that looks good
on our buttons and so that looks good the about page is looking good let's
the about page is looking good let's make sure the answer looks good for
make sure the answer looks good for trivia that's fine here's an additional
trivia that's fine here's an additional link in our page to the reference for
link in our page to the reference for the trivia
the trivia the menu we scroll right to that
the menu we scroll right to that everything looks good there
everything looks good there ours
ours pretty good i still might want to create
pretty good i still might want to create a little space here with the back to top
a little space here with the back to top but other than that it's fine
but other than that it's fine and back to the home okay so we are down
and back to the home okay so we are down to the final touches of the project so
to the final touches of the project so one of those things might be to organize
one of those things might be to organize the css now this is your own project but
the css now this is your own project but if you're working in a team for example
if you're working in a team for example you might want to organize that i'm
you might want to organize that i'm going to drag this over to full screen
going to drag this over to full screen for this discussion let's say the colors
for this discussion let's say the colors we have here there's there's probably
we have here there's there's probably the largest list that we have of
the largest list that we have of anything
anything in this project is the colors it might
in this project is the colors it might help to just use the abcss technique
help to just use the abcss technique here to organize these so if we
here to organize these so if we highlight all of those press control p
highlight all of those press control p and then the greater than symbol and now
and then the greater than symbol and now we might choose sort lines ascending so
we might choose sort lines ascending so now all of our colors are ordered
now all of our colors are ordered alphabetically and i could find them
alphabetically and i could find them probably much faster now that i've done
probably much faster now that i've done this so considering that maybe we should
this so considering that maybe we should do the same thing for our dark mode
do the same thing for our dark mode we'll highlight all of those
we'll highlight all of those control p
control p greater than symbol and choose sort
greater than symbol and choose sort lines ascending now you're welcome to do
lines ascending now you're welcome to do that for any or all of the properties
that for any or all of the properties and styles that are within this project
and styles that are within this project if you so choose now before we finish
if you so choose now before we finish this project there's one more thing we
this project there's one more thing we can add that would be a very nice touch
can add that would be a very nice touch but it is a preview of what's to come
but it is a preview of what's to come for you yet and that's because it's a
for you yet and that's because it's a touch of javascript
touch of javascript just a little bit and i'll show you what
just a little bit and i'll show you what it does it will update the year so it
it does it will update the year so it will put in the current year no matter
will put in the current year no matter what year it is and you will not have to
what year it is and you will not have to come back and update the copyright on
come back and update the copyright on your site so let's put in a time element
your site so let's put in a time element right here i want lowercase
right here i want lowercase so i'll give this a time with an id
so i'll give this a time with an id attribute of
attribute of year
year so there is our time element and we
so there is our time element and we don't really need to put anything in it
don't really need to put anything in it we'll just leave it as is
we'll just leave it as is with the id of year right there now
with the id of year right there now let's go over to our file tree
let's go over to our file tree and inside the file tree let's create a
and inside the file tree let's create a js folder and inside the js folder let's
js folder and inside the js folder let's create a new file name it main.js
create a new file name it main.js now we only have a few simple lines to
now we only have a few simple lines to put in here so
put in here so i'm going to type
i'm going to type const which will help me define a
const which will help me define a variable and i'm going to name that
variable and i'm going to name that variable year i'm going to set that
variable year i'm going to set that equal to document and when i refer to
equal to document and when i refer to document i am referring to the html
document i am referring to the html document
document and then get
and then get element by id and this will be year so
element by id and this will be year so you know we just set that attribute
you know we just set that attribute and then we are selecting it so we're
and then we are selecting it so we're selecting that time element on whichever
selecting that time element on whichever page we load this javascript into from
page we load this javascript into from there i'm going to define another
there i'm going to define another variable and i want it to be called this
variable and i want it to be called this year notice i'm using camel case to
year notice i'm using camel case to define that
define that i'm going to set this equal to a new
i'm going to set this equal to a new date
date and then i'm going to call the get full
and then i'm going to call the get full year method for that date
year method for that date so now i have the current full year in
so now i have the current full year in the this year variable
the this year variable and i have the element that we just
and i have the element that we just created the time element in the year
created the time element in the year variable so i'm going to say
variable so i'm going to say year
year set
set attribute and then i'm going to select
attribute and then i'm going to select date time
date time and i'm going to set it
and i'm going to set it to the this year variable
to the this year variable and then to display it on the page i
and then to display it on the page i once again want that year element and
once again want that year element and now i'm going to select the text content
now i'm going to select the text content that's what's displayed on the page
that's what's displayed on the page and set it equal to this year and save
and set it equal to this year and save that's all i need are these four lines
that's all i need are these four lines of code
of code and with that we can import this into
and with that we can import this into our page so we'll go back to the index
our page so we'll go back to the index let's scroll to the top because we want
let's scroll to the top because we want to load the javascript last after the
to load the javascript last after the css
css and we do that with a script tag and it
and we do that with a script tag and it will have a source attribute and there
will have a source attribute and there it is so we'll say js slash
it is so we'll say js slash and then we'll just pick our main js
and then we'll just pick our main js nothing goes between the opening and
nothing goes between the opening and closing script tags however you have to
closing script tags however you have to put it this way it always has a closing
put it this way it always has a closing script tag it's not like some of the
script tag it's not like some of the other elements that just has a slash to
other elements that just has a slash to close out the first one you always see
close out the first one you always see it this way we want to add one other
it this way we want to add one other attribute though and that is defer and
attribute though and that is defer and that tells the script to wait until
that tells the script to wait until everything else is loaded before
everything else is loaded before loading the javascript and we will save
loading the javascript and we will save now if we go back
now if we go back to our page
to our page notice it says copyright
notice it says copyright 2022 little taco shop
2022 little taco shop if you're watching this in a different
if you're watching this in a different year and you add this same code it will
year and you add this same code it will say whatever the current year is there
say whatever the current year is there now if we go to our other pages notice
now if we go to our other pages notice it still just says copyright copyright
it still just says copyright copyright symbol in little taco shop because we
symbol in little taco shop because we haven't added that javascript to the
haven't added that javascript to the other pages yet but we can do that now
other pages yet but we can do that now so let's drag this over
so let's drag this over and we also need to make that same
and we also need to make that same change to the footer on every page so
change to the footer on every page so inside of our copyright line here that
inside of our copyright line here that has the span class
has the span class let's select that with the c
let's select that with the c and then we'll go to the hours page
and then we'll go to the hours page scroll down
scroll down and we will
and we will select the same line and paste in the
select the same line and paste in the new line and save
new line and save the contact page scroll down select the
the contact page scroll down select the copyright line
copyright line paste in the new line and save
paste in the new line and save and we also need the about page i
and we also need the about page i believe so now let's scroll down
believe so now let's scroll down and here we'll select that same
and here we'll select that same copyright line
copyright line and we'll paste in the new line but we
and we'll paste in the new line but we haven't added the javascript yet so
haven't added the javascript yet so let's go back to our index.html
let's go back to our index.html now we could just copy this same script
now we could just copy this same script line and we can use the same javascript
line and we can use the same javascript file for every page so back to the hours
file for every page so back to the hours page
page paste it in underneath our style sheet
paste it in underneath our style sheet line
line back to the contact page we should do
back to the contact page we should do the exact same thing
and then finally the about page we should do the exact same thing
should do the exact same thing then save and now let's once again look
then save and now let's once again look at our site
at our site and notice that no matter which page
and notice that no matter which page we're on we now have the year referenced
we're on we now have the year referenced in the footer along with our copyright
in the footer along with our copyright notice and everything looks
notice and everything looks just as it should okay guys just a few
just as it should okay guys just a few closing notes and you could call them
closing notes and you could call them corrections if you want to i just want
corrections if you want to i just want to adjust a couple of things we're
to adjust a couple of things we're currently on the hours page for the
currently on the hours page for the little taco shop and i previously forgot
little taco shop and i previously forgot to put in an h2
to put in an h2 for this page so i'm going to do that
for this page so i'm going to do that here on line 48
here on line 48 and i'm just going to put hours in there
and i'm just going to put hours in there and save something else that's been
and save something else that's been bothering me about this page the whole
bothering me about this page the whole time was the back to the top
time was the back to the top link that we really don't need anymore
link that we really don't need anymore there's not enough content on this page
there's not enough content on this page for it really to even be there so i'm
for it really to even be there so i'm going to remove that
going to remove that back to the top link on the hours page
back to the top link on the hours page other than that i'm happy with how this
other than that i'm happy with how this page turned out of course
page turned out of course everything is preference when it comes
everything is preference when it comes to css your design choices your
to css your design choices your preferences may be different than mine
preferences may be different than mine so feel free to make your own changes
so feel free to make your own changes also at the
also at the contact.html page i previously removed
contact.html page i previously removed every hr the horizontal rule element but
every hr the horizontal rule element but i think i'd like to put one back here
i think i'd like to put one back here just between the two sections on this
just between the two sections on this page or between the two articles if you
page or between the two articles if you will so i'm going to put this horizontal
will so i'm going to put this horizontal rule back
rule back between those two different articles on
between those two different articles on this one page one other thing i want to
this one page one other thing i want to do
do is just change the text a little bit on
is just change the text a little bit on the buttons so i'm going to click the
the buttons so i'm going to click the file tree quickly go to the style.css
file tree quickly go to the style.css file and here under the contact to
file and here under the contact to underscore button class
underscore button class i'm just going to add a font
i'm just going to add a font weight
weight of bold and save and now once we want
of bold and save and now once we want look at these buttons i just like how
look at these buttons i just like how they look a little bit better with the
they look a little bit better with the bold font always go back and re-evaluate
bold font always go back and re-evaluate your code make your own choices and of
your code make your own choices and of course you don't have to agree with my
course you don't have to agree with my choices the best way to learn is
choices the best way to learn is experiment and see how it works out for
experiment and see how it works out for you so that's the end of the project
you so that's the end of the project congratulations you've completed a large
congratulations you've completed a large overhaul on the little taco shop website
overhaul on the little taco shop website and styled it with modern css
and styled it with modern css very few media queries necessary we
very few media queries necessary we added a nice animation and it does work
added a nice animation and it does work in mobile devices as well even though we
in mobile devices as well even though we didn't need those extra media queries so
didn't need those extra media queries so if we go back to an iphone 6 7 and 8
if we go back to an iphone 6 7 and 8 style we can now see how all of this
style we can now see how all of this looks in a dark mode and it is still
looks in a dark mode and it is still working
working as we expect it to great job completing
as we expect it to great job completing the project and completing the full css
the project and completing the full css for beginners course remember to keep
for beginners course remember to keep striving for progress over perfection
striving for progress over perfection and a little progress every day will go
and a little progress every day will go a very long way please give this video a
a very long way please give this video a like if it's helped you and thank you
like if it's helped you and thank you for watching and subscribing you're
for watching and subscribing you're helping my channel grow have a great day
helping my channel grow have a great day and let's write more code together very
and let's write more code together very soon
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
Chrome Extension