All language subtitles for 0024 - CSS Complete Project for Beginners.en.clean

foreign

this tutorial is part of a beginner CSS

series I'll be using the Chrome web

browser the visual studio code editor

and the live server extension for visual

studio code to view the web page there

are links to these tools starter code

files and all resources in the

description below

welcome to the final project of this CSS

for beginners course at the end of my

HTML for beginners course we built a

full website for the little taco shop

that you see here it's a basic website

with very minimal CSS applied but it

provides a great foundation for our CSS

final project we're going to take this

basic HTML website and turn it into this

modern website with responsive design by

applying much of what we've learned

about CSS let's get started today by

looking at the starter code and this is

available in the course resources you'll

want to download this code because it is

the full website that we completed at

the end of my HTML for beginners course

and it will give us a great foundation

for this project now if you completed

that you already know what all is in the

code however if you hadn't let's quickly

go over it we have a few HTML pages and

we're going to make a few changes to

those not many though and then we have

an image folder IMG inside this image

folder I've included some larger images

today so we will be able to delete the

smaller images I left those in as well

though in case you wanted to launch the

project as it was in the beginning as we

finished it in the HTML for beginners

course but the top names when you see

the double names they end with the

dimensions and of course the width on

the smaller the older images is 400

pixels the width on the newer images is

1 000 pixels and I've included those

dimensions in the file names so for the

duplicates you always want to choose the

one on top

and then I have a fourth image that does

not have a duplicate because we will add

one page today

but let's select those duplicates and

then I'm going to press the delete key

and now we're left with just our larger

images

likewise there was an examples folder

and this just gave us example images of

what the project looked like at the end

of that HTML course if you wanted to

complete the challenge at that point you

were welcome to try to look at these

images and complete that and then look

at my code so let's click that examples

folder and also press delete as we no

longer need those files now there is

very very minimal CSS applied to this

project so we will be cleaning out

everything that is in the CSS file you

can press Ctrl a to select all and hit

backspace and delete those 19 lines of

CSS that did exist so that gets us

started now let's go to the index.html

which is the home page and we'll start

by looking at the head section the head

section contains all of the meta tags

that we would need in a project and you

can see author and description however

there is one missing that we're going to

have to add but since we're creating

another new page and we're going to just

include the about content that is

currently in the index.html we had an

about section we're just going to make

that a new page and Abstract that just

remove it from the index and put it in

its own page today so let's go ahead and

do that and then I'll show you what's

missing from the head section in all of

the pages we already have so let's click

the new file icon then type well it

looks like maybe I already included it

here before I actually do that but you

would want to click the new file icon

because the about page would not be in

the starter code I guess I typed that in

earlier but now we have a blank HTML

file I'm going to type in exclamation

mark which is an image shortcut but if

the shortcut doesn't pop up for you you

can press control in the spacebar bar

and then you should see the shortcut

menu and select this top imit

abbreviation and this gives us the

outline of a page now there's a couple

of things it includes that we don't have

in the other HTML files from that HTML

beginners project one is this meta tag

that has xua compatible IE equals Edge

they still include that with this image

shortcut but it's not really necessary

unless you're concerned about possibly

supporting Internet Explorer which at

this point has been discontinued and for

the most part is no longer in use but

you could include that the one that I

want to make sure we include today is

the next one meta with the name equal to

viewport and then the content is equal

to width equals device width and initial

scale of 1.0 we absolutely need that

meta tag in the header of all of our

HTML pages so we can make them

responsive so I'm going to copy this and

then I'll go go back to that index.html

and I'm just going to put it right

underneath the utf-8 that we have in the

medic care set which is character set

here in the head and of course we can

remove that space and save and then I'm

going to want to do that in the

hours.html as well

so I'll put that in get rid of the blank

line Ctrl s to save one more time in the

contact dot HTML and we'll put it right

after the

utf-8 line and save so now that we've

done that back here in our about we

could fill in all of these blank things

that we have or we could just copy the

pattern that we already have inside of

the index.html so I'm just going to copy

the full head section here the entire

head element with the opening and

closing tags go back to about and then

I'm going to select it here and paste it

in now I'll just change some information

now I can see some of that's going off

the screen so I'll press alt Z and get

that code to wrap so I can see

everything you'll want to change of

course my name in the author meta tag to

your name and now for the description

instead of the official website here we

would just want about the little taco

shop up so this is the about page and

that's what we have and we could put the

same in the title about the little taco

shop everything else is pretty much as

we need it for now so I'll press Ctrl s

to save that and of course we see a

little Auto formatting now where it

included the lines the spaces that you

see here but we'll just leave it as is

and then we will come back and get that

information or abstract that out of the

index.html when we get to that point now

moving back to the index.html file I'm

going to scroll down and we have a

header section already clearly defined

but we can see it goes clear off the

page I don't have the closing tag here

yet however everything we see here is

really all I want in the header now we

had a figure here with an image but

we're going to pull that out of the

header and put it inside of its own

section so select everything from the

opening figure to the closing figure and

I press Ctrl X to cut

and then I'm going to backspace and

remove those spaces and then I'm going

to type

section and press Tab and so I get a

closing tag as well and then press

return or enter so I get a new line and

then I'm going to control V to paste

that figure in so now the section

contains the figure and the header

contains the nav and the H1 and I'm

going to do that on all of the pages but

and I'll remove that HR which was the

horizontal rule however I want to apply

some classes here as well that will help

us format our CSS so before I make these

changes to the other Pages let's apply

those classes in the final lesson before

this project we learned about the bem

block element modifier naming convention

and I'm going to use that some today for

each section of the page so we'll start

here with a class and we're going to set

this equal to header the same as the

element name and it will be the parent

class for everything inside so when we

label the H1 we'll say class and here

I'm going to say header two underscores

and H1 likewise for the nav we'll say

class equals and then we'll have header

two underscores and nav and when we get

to the unordered list we'll say class

equals and then we'll have header

two underscores if I could find that

underscore key again and then

UL but then I'm not going to apply

classes to the list items some may want

to do that and that would be okay this

is a small project and I don't have any

plans to put Styles directly on these

list items so I can accomplish

everything we're doing today without

doing that so I'll leave that as is

however we do need to rearrange some of

the menu so I'm going to select this top

list item for about and press Ctrl X to

cut it out we'll leave the menu as the

first selection the second selection

will be the hours page the third will be

the contact.html so at the bottom I'm

going to paste in the what was the first

list item it's now the last list item

but it will no longer be an anchor tag

that goes to part of this page it's

going to go to the about dot HTML page

so we'll switch that over and we don't

really need to have the whole

abbreviation here so I'm going to remove

that it was good to learn about

abbreviations in the HTML course but now

we'll just use the word about because

that pretty much sums it up likewise we

can change contact us to contact and

store hours can just simply be changed

to hours likewise our menu

can just be menu and that will still

indicate what these pages are all about

now let's scroll down to our section

that contains the figure and we're going

to call this a hero section it's the

part of the page after the header where

you usually see a large image or an

attention getter that's often referred

to as the hero section so let's give

this section a class and we'll just set

it equal to hero and then inside we're

going to put an H2 element that is not

currently there so we'll type H2 press

Tab and we can complete the closing tag

that way now let's give this H2 a class

equal to Hero two underscores and H2 and

we're going to put a welcome here that

the owner of the little taco shop wants

us to add and it's going to say bien

Benitos which I believe is saying

welcome in Spanish as well so we'll just

have that H2 there and this won't be on

every page it's only going to be on the

home page after that we have some

changes to make to our figure itself now

the figure can just stay there as is so

really what needs to be changed is the

image and maybe applying a new class to

the Fig caption so we're going to start

off with the image and it's still the

tacos and drink image but the dimensions

have changed so we just need to change

the name so it's going to be 1000 and

you can see vs code knows what's in our

image folder and it wants to help us

complete that the alt will stay the same

the alt attribute the title will stay

the same but now we need to go ahead and

Supply the actual dimensions so we can

avoid that content layout shift that may

happen and that was discussed previously

in a lesson as well and of course we

will be styling this image to be a

responsive image too and then we're

going to give the Fig caption a class

while we're here and this class is going

to be off screen

and what that does if you remember when

we had covered that in a previous lesson

is it will take this caption off the

screen but it will leave it available

for screen readers for accessibility so

that is important as well so it won't be

viewable but it will be readable and now

we need to structure these top two

sections the header and the hero section

in all of the other HTML files as well

so we have a good foundation before we

start in on the CSS so I'm going to

scroll up for now and select this header

on line 15 and scroll all the way down

to line 44 where the section ends I'll

hold down the shift key and click my

mouse select all of that because right

now our about.html does not have any of

this content so I'll press Ctrl C to

copy and now I'll go to the about.html

page and inside the body element I'm

going to paste all of that in now it

will currently be the same game as we

have on the index page but we can make

some changes here and the first change

we're going to make is to select this

last list item and control X to remove

it from the bottom of the list and it

will now go once again

at the top of the list so Ctrl V to

paste but it's not going to go to the

about page we just want to put in a

slash which means it will be the root

page that will take us back to the home

page so we'll type home there and then

the next one should go to not just

hashtag menu because that means it would

be on the same page it should go to the

home page which is the Slash and then

hashtag menu and that will take the

visitor back to not only the home page

but then to that particular spot on the

home page which is the menu so now we've

completed or adjusted the menu for our

about page but then we also need to

change this header so instead of Welcome

to the little taco shop let's just put

little taco shop at the top of our about

here

and then after that we can scroll down

and change our hero section just a

little bit as well so we're not going to

have the H2 bambinitos on the about page

we're just going to have the figure and

this is going to be a different image

here so this one will take the last part

of this image file because this is named

tacos delicioso tacos delicioso if I

could pronounce that correctly and then

we'll have a different caption here as

well which should say tacos

delicioso

I could double check my spelling on that

as well and let me go ahead and check

the title tag the title is basically the

same so I'll copy that but we'll put an

exclamation mark in there because the

title and the alt do not have to be the

same the dimensions are the same 1000 by

667 we're once again going to have a

class of off screen on the Fig caption

but the caption should be different so

this will be try these

delicious

tacos and we can save and now we have

the header and the hero section complete

on the about page so now we can make the

same similar changes to the other two

pages we have but we won't need to paste

in the content we really already have it

there so let's go to the hours page and

we can scroll down and look at that menu

and what we're going to have to do is

apply those classes once again but we

essentially already have the menu that

we're going to need to have on the hours

page we're already linking to home

however the next one should be menu so

let's cut out that about with the

control X

and we will link to the home page and

then the hashtag menu and then we'll

have hours after that or I'm sorry we

won't have hours after that we're on the

hours page we're going to have contact

and then we'll have the about page which

once again needs to remove the Slash and

the hashtag and we'll say about dot HTML

and ALT Z to wrap this code because we

no longer need the about LTS it will

just be about and then we'll make those

similar changes here no longer contact

us it will be contact no longer our menu

it will just be menu and then home so we

can save now let's scroll down and we'll

take that figure once again control X to

remove it

and then underneath the header create

just a little space I'll highlight that

HR to remove it we'll type section and

now in the section we'll paste in our

figure

and then I'll give just a empty line

after the section and we're now ready to

apply the classes as we expect to have

them here on the hours page as well or

we I guess we could go ahead and change

the details on the figure it's going to

be tacos tray again but it's going to be

1000 by 667 I believe but let's check

this because vs code will help us so

tacos tray there we go 1000 by 667

and then the rest of this won't change

except the dimensions so 1000 by 6 67

and then the Fig caption once again is

going to need that class equal to

off screen there we go now we need to

add the class up above which is hero

and save now let's go ahead and scroll

up and we'll apply those header classes

once again at the top for the hours page

so we have class equals header and then

I'm just going to copy this to save just

a little time

paste it into the H1 paste it into the

nav and paste it into the UL and now

this first one is going to be two

underscores and H1 the next one is going

to be two underscores and nav and the

last one is going to be two underscores

and ul and now we've added the classes

we need one more time let's make those

same changes to the contact page now so

our starter will be the header with a

class of header the H1 will then have a

class of header two underscores an H1

and nav will have the class of net our

header two underscores and nav and the

unordered list will have the class of

header two underscores and UL for

unordered list looks like I put some

Extra Spaces in there I'll remove but

we've applied the class to the header

let's look and see if we have the menu

in the order that we want it as well so

we want to start with home and then

about is okay but once again it needs to

be to the about page here so we'll say

about

dot HTML and we're going to remove the

abbreviation alt Z to just wrap that

code so we can see it all

remove the abbreviation so it's just an

about link which we will select with

control X then and remove and put it at

the bottom of the list and the second

one should be menu which is where we

really want customers to go then hours

and about there so that is in the

correct order we'll remove the extra

wording so we just have menu

hours and about and save and now finally

one more figure to remove to put in its

own section element so highlight that

Ctrl X to remove it

we'll leave the header to itself I'll

delete that horizontal rule element then

above here we'll add the section element

inside we'll go ahead and add the figure

the section will be a class equal to

Hero

and then here we have tacos close up so

this is going to change as well so we'll

say tacos now we've got close up 1000 by

649 which is just a little different so

we'll delete that and now the height

here is

649. the Fig caption once again gets the

class equal to

off screen and save and now we are

finally ready to write some CSS and what

we're going to do at the top is what

you've seen me do at a lot in a lot of

different tutorials and that is import

some fonts from Google I'm going to

control B so you can see this full line

for just a second and notice I'm

importing two fonts here so after the

URL you see family equals and there's

fugaz one and then there's also nanito

that you've seen me use in several

tutorials using both of those fonts

today and if you remember from the

typography lesson of how we can go get

those fonts from

fonts.google.com you can do that and

then import those into your CSS as I

have after that we're going to have a

CSS reset it will be fairly minimal and

you have seen minimal ones throughout

some of the lessons but let's go ahead

and label our sections as we create our

style sheet today it's going to start

out with the everything so selector the

all selector but then a couple that you

may not have seen that are commonly in

resets that I did not add in the lesson

on pseudo elements but you see these

pseudo elements so you also see the all

selector with the after and the all

selector

with before so we're going to do that

for all of those and then we'll put in

what you typically see me put the margin

0

padding of zero and then a box sizing of

Border box now that's not all of the

reset that I want to use today but

that's a great start we also need to put

something in for the images and this

will make all of the images

display block which gets rid of that

minimal little space below the images

that they were originally designed to be

in line so they have that little spacing

problem and that will remove that then

we'll set the max width to 100 percent

and we'll set the height to Auto and

this will make the images responsive for

our project I'm going to control s to

save that much and then scroll just a

little bit there's a few more styles to

add to this reset the form elements like

input text area and button for example

the ones that we're going to use today

so we'll say input

button

text area all three of these and other

form elements that you may use do not

inherit font properties like other

elements do so we need to say font

inherit if we want that to happen and

when I save we'll probably see them

formatted yep on three separate lines

there but that is the end of my reset

for this project okay after that I'm

going to add another section and this is

where I will Define CSS variables now

I'll Define these as I need them and

then be able to come back and reference

them so I'll just say variables here and

then as you know that starts in the root

selector so I'll just have a selector

here and then inside I'm going to have

some labels too and the first one that

we will do today is font and I know what

I'm already going to do for font so I

can at least add one variable now and

that will be FF for font family and the

main one that I'm going to use is that

in Neato font and then after that I'm

going to have the fallback of sans serif

and then for the headings on the project

is where I'm going to use the other font

so I'll say font family headings and

here I'm going to use

let me spell this correctly fugaz one

and then it has a fallback of cursive

okay I can add just a few more variables

that I know I'm going to use right away

and the other one for fonts is the font

size so I'll just call that fs and I'm

going to use the clamp function that we

learned about so the font can grow and

shrink and this is modern CSS this helps

us prevent adding it prevents us or

keeps us from adding mini media queries

as some older CSS might have done so our

page can stay more responsive without

having an abundance of media queries

attached to it so our minimum size today

will be one REM and then we'll allow it

to grow at 2.2 viewport units based on

the height and then the max size would

be 1.5 written that's what we'll put in

and so that will allow the font to grow

as the page gets larger and of course it

will stop so it doesn't get any smaller

than one rent okay after these fonts

variables I'm also going to put in

another

note here four colors I like to Define

all of the colors in variables and that

way I can just change them in one spot

and see how they work together I will be

coming back to add more colors here but

I'm going to start off with a background

color and I just want a basic Orange

it's going to match something that's in

the photo that we have and I think

that's going to look good then I'm also

going to use a background

Color dash fade and that's because we're

going to use a linear gradient now I've

picked out this color it is a fade of

the orange color so I'm using RGB and

then it's 252 220

160 and you'll see it's a faded orange

after that I'm going to use background

image to create this gradient that we're

going to fade with so here I'll say

linear gradient

and then we'll go to the bottom

and then we'll put in our variables that

we just created above so we'll start

with the background color

and after the background color we'll put

a comma another variable

and we'll start in and we'll go to the

background color fade so we'll start at

the top with the full orange and we'll

fade down to that faded color okay

that's looking like a pretty good start

but I could put in just a couple more

for the body so just underneath this I'm

going to put in two dashes and

body dash background color so I'm

planning on a different background color

for the body element than I am the HTML

element and you'll see how that works

here I'm just going to put in a basic

white with hexadecimal code and it looks

like I left out the semicolon over there

there we go so now everything formats

better and then we'll just have our

standard font color I don't even need to

say body font color it's going to be the

main font color and this will just be a

black with hexadecimal code as well okay

I will be coming back to add more

variables but right now I want to move

on to the next section and just add a

few utility classes that I always use so

I know what I need to put here I'll put

in utility classes normally I would

probably just copy and paste these from

a file that I would already have written

them in before but we'll go ahead and

write these out we've got our off-screen

class and this is a style I use to move

element off the screen but yet keep in

the document flow so a screen reader

will still read the content but maybe I

don't want them to appear visually on

the page so I'm going to say

position and we'll set that to Absolute

and then I'll say left and we'll say

minus 10 000 pixels and so it will be

way off the page

the next class I need is no wrap and

this is when I want to ensure that some

of the text does not wrap in an area

that is awkward and we can do that with

the white space property and then we'll

just set that to no wrap and we'll see

how we apply that class later and the

final one is simply a center when I want

to Center text let's say in a paragraph

or in a heading we need the text align

and we can set that to center with the

utility Styles complete we're now ready

to finally start applying some Styles

directly to elements and classes so I'm

going to bring vs code to the left and

go ahead and launch the project to the

right now remember we removed the few

styles that did exist and everything

we've created so far really doesn't

apply to the page except for that reset

at the beginning so we have removed more

than we have added to the current

project but we now have have variables

ready to apply and utility class is

ready to apply but we also want to add

what I would call General Styles so

let's put in a section here and we'll

label this the same way we have the

other sections are in the same style and

now with our general Styles heading

we'll start with the HTML element itself

now I'm going to use a different color

on the HTML element that will be the

background for the body element but if

you remember from some previous lessons

we also use scroll behavior on the HTML

element and we'll set this to smooth and

this allows a smooth transition to when

we link to other parts of the page and

we'll still be doing that on the home

page this index.html when we go to the

menu that will be located

below the big image and so in the second

half of the page so we'll have scroll

Behavior smooth and if I save that you

won't see any changes to the page

because that affects more of a behavior

but I'm going to try to save after every

property applied so you can see those

changes the next one we'll apply is font

size and we'll use a variable for font

size that we already created and now

when I apply that we'll save and you see

the font size instantly got larger and

that reminds me earlier when I applied

the font size variable above I believe

or that was in the background color fade

let me bring this back to full screen

quickly because I think it's in the

linear gradient vs code tried to help me

out and it accidentally added a second

VAR to each of these that should have

been noted when the video was created as

well so hopefully you've already caught

that error but I need to correct it here

so now we just want one VAR each in that

linear gradient and we'll save and if we

come back now to the page we don't see a

difference yet because that's not

applied but it will be applied here very

soon so down here in the general Styles

once again in the HTML we have increased

the font size now let's say font

family

and we'll use the other variable we

created there which was FF

and if I save again we should see the

font family has changed and it does for

the page after that we're going to set a

background color

and this will be a variable as well and

it's the BG color we see here in the

list and I just want to make sure vs

code doesn't add a second VAR now you

can see we've changed to that orange

that we set but now this is actually the

fallback because we're going to use the

background

Dash image and here we're going to use

that background image variable we

created

and we'll find that here in the list as

well and save and now we should see it

go from Orange to that lighter orange as

we scroll down the screen and that's

what happens so it's a linear gradient

from a full orange to a lighter orange

but this will change as well as we apply

some styles to the body so we'll see how

this is going to be applied to the

overall page now here we're going to

have a background Dash color as well and

this is the variable and here we started

this with body so it's the body

background color

and now we'll go to the next line and

save I can see this is wrapping just a

little bit so I'm going to press alt Z

so anytime it wraps it'll just go down

to the next line for us so we can see

everything okay now we want to set a

font color now currently you notice it

changed everything because the body is

completely over the HTML element that

will change when we adjust the width of

the body as well but for now we'll just

see white again so now the color for the

font will be variable and this will be

the font color variable that we set

and really we shouldn't see a change

because it's basically the default font

color of black now let's have a Min

height for the body and we'll set that

to 100 viewport units of height

and if I save we shouldn't see much of a

change because it's already taking up

over 100 viewport units of height

already after that we'll set a Max width

to 800 pixels now I'm not sure of the

width here to the left but we can see

really 800 pixels is still within the

range of this so let's drag this over

and look at the full page expanded now

and now we can see here was the 800

pixels and now we see the HTML element

behind that goes ahead and expands to

the full width of whatever viewport is

available so we see that orange that

linear gradient fade here we will change

this so the body will be in the middle

and we'll see orange to the left and the

right I'll move this back to the right

for now and now underneath this we need

to define a couple more things one is

going to be the margin for the body 0 on

the top and bottom but Auto on the left

and right will Center this so when I

save again we don't see the change here

but when I drag this over we now see the

body is centered bringing this back to

the right we want to add some borders a

border on the left and the right so I

need to set a borders variable and a

border color variable so I'm going to

scroll back up here to the colors and

let's set this border color variable

first so we'll say border

Dash color and this is going to be a

flat black so 333 for the hexadecimal

you can see it's a flatter black

compared to the true black that's above

it here with zero zero zero then I'm

going to put in another comment here and

just put

borders some might put the Border color

under borders but I want all of the

colors grouped together so that's just

my preference now here four borders

let's go ahead and set this borders

variable that we might use more than

once in our project as well and this is

going to be one pixel

solid

and now let's go ahead and use the

borders color variable that we created

now vs code once again put in two vars

so I have to watch out for that when

I've already typed VAR sometimes it

wants to insert that for me okay we've

created a border color variable and a

borders variable we'll scroll back down

to the body element

and to finish out the body element we're

going to say border left we're going to

set this to

borders

and now I'm going to press shift alt in

the down arrow so it just copies that

down because I also want a border

Dash right but I don't want it on the

top or the bottom and then I'm going to

set well let me go ahead and save and if

I bring this over you can probably see

the borders

just barely outlining the left and the

right

but now I want to set a box Shadow as

well on the body

and that will be 0 0 so what we would

typically see for the X and Y but then

there's a blur and I'll set that to 10

pixels and I'll use that border color

again

there we go and save

and now of course we can't see it here

but when I drag this back over we can

see there's a little bit of blur

along each side and that's what we want

just a nice subtle effect so as we

scroll the page and we'll see it stand

out even more on this lighter orange at

the bottom you can see the blur along

the left and the right of the body here

where we have our Center column okay

dragging this back I'm going to scroll

for some more room and then we have just

a few more General styles to apply

before we get to classes and the

different sections of the page let's

have our on our lowercase here H1 H2 and

H3 headings on the page I'm going to

apply the font family which was for the

headings so that's dash dash FF and then

we'll select headings and that will

change the headings font you can see

that change on the page immediately and

then we're going to apply some letter

spacing now we could do this with pixels

or different values I'm going to use EMS

which would essentially be the same as

referring to the font size that's

already on each heading so the spacing

will vary to based on which type of

heading that it is and if we looked at

this as a rem instead of a em then it

would be 1 10 of that setting so what we

have for the font size already at the

smallest was one REM but at the largest

it was one and a half so that could be

anywhere from 16 pixels to 24 pixels so

one tenth of that would be anywhere from

1.6 pixels to 2.4 pixels but this will

just space out this font and I think

this heading font needs just a little

extra space so when we save you can see

the letters have now spaced out just a

little bit more now I'll select the H2

and the H3 but not the H1 we have a

couple of styles we want to apply here

so we have a margin Dash bottom

so on the bottom only we'll set that to

one m and now we're going to use a

separate color so I need to define a

highlight color up above in the

variables again so here we have Dash

Dash and I'll say highlight Dash color

because we might highlight other things

on the page besides headers with this

variable as well so I called it

highlight color it's a color I've picked

out to go with the orange but it's not

Orange it's 51

178.51 and save and you can see it's a

green color much like we'd see here on

the bottle of Jarritos over here this

Mandarin has a nice orange but it also

has a bit of a green in the label so

let's try that with the highlight color

as well so now using this highlight

color

and scrolling back down to the H2 and

the H3 we'll set the color here and

we'll be VAR

and we'll use highlight color

now that we have that and save we should

see that change on the page and yes our

Bienvenidos and about LTS and taco

trivia has all changed as well as our

menu and remember this about section is

going to get moved to the about page we

just haven't moved it yet okay after the

H2 and the H3

going to select the paragraphs on the

page and set their line height which

this is something I frequently do it

looks a little bit better and we'll just

set it to a little bit larger value it

doesn't have to have a specific M or Ram

or pixel here line height going way back

to our typography lesson can just be a

numerical value here so we've set it to

1.5 you might not see much of a change

from that but there's a little bit let

me take it away

and save and yeah you might see just a

bit of a change there but not a whole

lot but I like something I do like to

add okay the paragraph has the line

height let's look at our links on the

page up here so these are going to be

our main links

on the whole project really we don't

have a whole lot of extra links so I'm

going to select the anchor which would

be a link of course you have to have an

href with it but just to select the link

itself and then we can say any link

which is a pseudo class selector and

this any link pseudo class selector if

you remember selects both the lick links

that have not been clicked and links

that have already been visited and so

here we'll say color

and now we're going to need to set a

link color variable as well as hover and

active so I'm going to scroll back up

and find that colors list of variables

and we'll go ahead and set the link

color variable link Dash color this will

just be a black color again and then

we'll set also

link Dash hover and here we'll use hsla

which will allow us to have a black

color but then we'll also have this

transparency and I'm going to say 0.6 so

it's 40 percent transparent and 60

visible essentially

after the link hover variable will also

set a link Dash active and for that

we're going to set it to Orange which is

the same as that HTML background

let's save those three variables and

scroll back to our links that we're

styling and here for link color we'll

say VAR and then Dash Dash

link and it is our link color that we're

selecting

and then the next one we'll have would

be the anchor

with a hover

but then also let's say anchor and you

could say Focus but here I'm going to

use Focus

visible which the difference is the

focus might remain on the selected

element however Focus visible after it's

used it will change and it might not

make much of a difference in this

project but it's something I've started

to use more and more instead of just

using Focus so here I'm going to say

color VAR and we'll set this to once

again link but it's link hover

and we'll put the semicolon after that

as well we can save those changes we see

we've got black links here the hover of

course is already working so you can see

it fade now as we hover over each one of

those but then after both of those we

still need the active State as well so

we have the active pseudo class selector

and here we're going to say color

and not color with parentheses color and

then VAR parentheses Dash Dash

link and it's going to be active there

we go

save and so now if we were actively

selecting a link so when I click on it

you can see it turns orange and menu

it's still fairly small up here but when

I hold down the mouse button the link

turns orange and now our general styles

are finished for the project so we are

ready to move on to the header section

so I'll add a label inside of our style

sheet for the header

and then we will start applying styles

to the header section I'll scroll up so

this header is at the very top here and

well at the very top there we go and

then the first style we'll apply is now

to the header class because we started

using bem the block element modifier

naming convention when we get to the

sections and the first one we applied

that to was the header so we'll say

position and we'll make the header a

sticky positioned element we'll put the

top at zero so it's at the very top and

then we need to put the Z index to a

setting of one so it stays on top of

everything else that might scroll under

it and when I save we don't see much of

a change yet but we certainly will soon

the next thing we'll style is the header

two underscores and the H1 so the title

of the page itself and here we're going

to say

text align

and we'll set that to Center and save

and you can see that text did center now

we've got just a few more variables to

add so I'm going to scroll back up to

the variables once again and we're at

the colors list and I'm going to add a

header Dash BG color

and here we're going to set that

background color to black as well after

that we'll set a header Dash color and

I'm going to set that to White

and then after the header color while

I'm here I'm going to go ahead and set a

nav

background color and set that to White

also so we've set three new colors there

then underneath the Border section I'm

going to add another label and say

standard padding and I'm going to create

a couple of variables here so

padding let's say Dash TB and that means

top bottom so you might want to

abbreviate that differently to

communicate that better I just happen to

use that abbreviation this time I'm

going to set this just to 0.25 em and

then the next one is padding Dash side

not size but side so on the left and the

right and differently here I want this

to be 2.5

percent so total if I apply this to both

sides it will take up five percent of

the width I'm going to save that you

won't see a change applied because we

haven't applied any of these variables

yet and then while I'm here one more to

add will be a

standard margin and underneath that

we'll just say margin variable and I'm

going to use clamp again here so at the

smallest it will be one em and then

we'll set it to 2.5 viewport height

units and then 1.5 em will be the

largest it would possibly be now that

this is for the top and the bottom on

the left and the right I'm going to set

it to zero so even though that wrapped

what we did was apply clamp to the first

value of the margin shorthand and then

we applied 0 to the second value which

would be the left and the right okay

with those variables defined now let's

scroll back down to that header section

where we were applying other styles so

we had the header and we were at the

header H1 I'm going to apply the

background color now so I'll say

background Dash color

this will be VAR and then we'll have our

header background color that we could

select

and I'll save and we can see that change

now it is all black so we need to apply

a color and this will be VAR as well two

dashes and header color

and now that we've selected that we will

save and now we can see welcome to the

little taco shop across the top once

again

after the color let's apply some padding

and we're using the shorthand here for

padding so we'll say VAR

two dashes and padding and this will be

top and bottom first and then we'll say

VAR two dashes for padding and this

would be the padding on the sides and

we'll save and we got just a little bit

of padding now to apply itself to the

top and the bottom left and the right

for the header looks like I'm not

closing that out properly so put that

extra curly brace there we go and we're

finished with the header H1 now so now

let's move down to header two

underscores and Nav Now for the nav

we're going to have a separate

background color variable that we

created so VAR two dashes and here it

will say nav background color

and now something to discuss quickly you

may be wondering why I created these

extra variables and yet some of them

have the same color values well I'm

specifically naming them so I know where

they apply and later on when we create a

dark mode they may vary more than they

are varying now in the light mode so

it's good to have that extra control and

extra labeling over these color

variables okay now that I've applied

that background color let's add a border

I want lowercase here border Dash bottom

to our nav and there I'm going to say

VAR and apply that borders variable that

we created so there's borders

and I can save that and we now see a

line across the bottom here of the nav

because it's also within this header

element and then after that border let's

say font Dash weight we'll set that to

bold when we save we should see those

links change a little bit the font

definitely changed there

and what else can we apply let's say box

Dash

shadow

0 for the X 6 pixels for the Y 5 pixels

for the blur but this is going to be a

shadow that looks like it's coming

straight down so then we'll also set a

minus 5 pixels and that offsets that

blur and then we'll have VAR and we'll

set the color here to the Border Dash

color and save and now we get this nice

little straight down Shadow underneath

that bottom border of the nap the

navigation but also essentially the

header itself and finally we need to

style the unordered list so adding the

header two underscores unordered list

and here we'll start out with some

padding and I'll say bar dash dash

padding and this would be the top and

the bottom and then once again we'll say

VAR dash dash padding and this would be

the side value

save that now you can see those dots for

the unordered list were brought back in

so we know we've added that extra

padding it has just a little more room

but now let's say list

Style

type we'll set that To None which should

remove those dots beside each list item

a display of flex and when I save you'll

see that change because it instantly

makes it a row by default

we'll say justify content

space Dash evenly and we'll save and now

it spaces out those items and then let's

add a gap and let's call the Gap one Rim

so what we expect there and so we

definitely have a gap between those

items even if they were all squeezed

together if the screen got smaller and

now a couple of quick notes on the

header before we move on one is we did

learn how to make an animated mobile

header but we're not applying it to this

project because it would essentially be

Overkill we've just got the four links

and four pages to the project and we can

easily link to those on mobile or in

desktop by just listing them out here on

the page so you don't always have to

apply everything you know how to do to

every project and I didn't want to do

that to this project and it's worth

noting why also we previously had

welcome to the little taco shop across

here but that's really a lot so quickly

I will open the file tree go to the

index.html and bring this back and let's

scroll up and find our H1 welcome to the

little taco shop and let's just remove

move the welcome to the because what we

really want is just little taco shop

across the top after that we can go back

to the file tree Once Again select the

CSS and hide the file tree I know we're

squeezing all the code over here to half

the screen so we can see the page more

often but when I bring it back you'll

find that it's not wrapping and it may

be a little easier for you to read so if

you're working on it with me maybe

you're just viewing the code like this

so you can see those longer lines where

we've used some variables are not

wrapping to a second line now when I

bring it over and look at it like this

so I just wanted to show you that I'm

going to bring this back to the left and

now likewise we can bring the project

over and look at it in full screen as

well and you'll see it's coming together

a little bit better we've definitely got

some changes to make yet however this

has certainly helped and if we look at

the other Pages since we put in that

work ahead of time to put in the correct

image uh changes to the HTML to create

those hero sections and of course apply

the classes to the header and the nav as

well we see those changes applied as we

go to each page already so we're making

a lot of progress we just have some more

progress yet to make so now I'll drag

this back to the right and we can begin

the next section and that next section

is our hero section so right underneath

our last header style we'll create a new

label and we'll call this the hero

section with the label and for that

we'll start out with our hero class

which if you remember is applied to that

section element we'll say it's position

relative because we're going to place

something absolute inside of that hero

section as well after that we have a

hero H2 and if you remember this is only

on the home page our index.html and that

is our Bienvenidos welcome here so after

that we can go ahead and apply some

styles to that and the background Dash

color

for that H2 is going to be a new

variable I need to create so let's

scroll back up to this color that we'll

have in our variables list once again

there's all the colors so at the bottom

here we're going to call this two dashes

in hero Dash color and now this color is

very much like our highlight color so

it's RGB

5117851 but then we also need a

transparency color here so we could 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 viewable and 25 percent

transparent so when we scroll back down

let's apply this to that hero background

color here

so we'll say VAR dash dash hero and

there's the hero color

after this hero color and I can save and

we're not seeing much of a change right

now but we will here in the future we'll

say color and actually I'm realizing I

just labeled that wrong and I also need

a hero color but I also need a hero

background color so if I could label

those correctly in my mind it would

definitely help us out so let's go back

up here this should be the hero

background color that I just created

instead of the hero color so let's label

this BG there we go underneath this

we're going to have a

KIRO Dash color and the hero color

itself should just be white once again

for now okay now we should apply these

correctly you can see when you get many

colors it can be very helpful to label

those and think about them in a good

order and I'm not always doing that even

when I do take all the other precautions

so now I've got a hero background color

for the background color and here this

should be VAR dash dash hero

color for the font and now save and

since it disappeared I think I may have

possibly applied something incorrectly

even now so let me shoot back up to the

top and take a second look at these hero

colors here and I see what I've done

wrong I have rbga instead of rgba so it

just takes one typo to set something off

rgba and now we should be good and we

have the green color there and you can

see our green background now for that H2

with the white lettering here at the top

and of course we're going to change this

some more if you remember when I

previewed the project at the beginning

we saw this is really an animated drop

down let's add some more styles to this

H2 before we approach the animation so

we'll say padding and here we'll have

0.25 M and then 0.5 M on the left and

the right we save that we can see that

extra padding applied

letter spacing and here let's give this

a 0.1 Rim so again just that 10 percent

which should space it out just a little

bit after the letter spacing let's say

text Dash Shadow and so we can apply a

shadow to this lettering we'll say two

pixels x offset 2 pixels y 5 pixels blur

and now let's use that border color

variable

that we have used in the past for

shadows and we save now that helps that

white stand out just a little bit it

lifts it up off of that green background

just a bit because of that shadow now we

need to say

position

absolute and we're going to move this to

the top and it's going to be minus 100

pixels

and first let me save this before I move

it so you can see what changes it

instantly makes it an element that is

not in the document flow and a block

element would of course span the 100

width but now because it is removed from

that flow due to position absolute it

does not have 100 width as a block

element normally would okay now let's go

ahead and move it off the page to start

out when the page loads so this would be

minus 100 pixels but before I do that

even I guess I should show where we're

going to place it to the left and the

left would be 20 pixels this value will

not change so it's just moved in just a

little bit but now

the top will be minus 100 pixels and now

it should disappear and it will

disappear it has disappeared but it will

of course be animated and drop down and

reappear once we apply that animation

and now we need to create the animation

itself and then we'll apply it so here

let's say at

keyframes as we learned in our animation

lesson and let's say show Welcome is the

name of our animation

we'll start out with a zero percent so

where it starts out at the very

beginning

we'll say the top is going to be minus

20 pixels instead of that minus 100

and now we'll transform we're going to

do two transforms we're going to have a

skew and that will make that lean just a

little bit we'll say zero degrees and

then minus 5 degrees

after that we'll also have a scale y

and we'll set that to zero to start out

with okay after the zero percent now

let's say at 80 percent and this is

where I like to give it just a little

bit more than it actually ends up with

so it gives it just a little bit of

extra movement or bounce so we'll say

the top is 30 pixels now will definitely

be visible

the transform it needs to start out

essentially with the skew again and

we're going to move the skew just a

little bit so I'm just going to copy

these so we can just change the values

inside paste those in and so now instead

of zero degrees it's going to be 10

degrees here we'll leave that at minus 5

degrees and the scale instead of 0 is

going to be

1.2 and now let's get our finishing

values at 100 percent for the animation

here this will be a top at 20 pixels

and then we'll once again have the

transform and I'm just going to copy

that down

and this would be a minus 10 degrees and

a minus 5 degrees and then the scale is

going to be 1 instead of 1.2

and when I save you won't see anything

yet because we haven't applied the

animation but now let's go ahead and

apply that animation here so we'll say

animation

and this is the show Welcome animation

we'll make it take a half second to

complete we'll start with the ease in

and out transition and let's give it a

delay now I could make this longer to be

more dramatic but let's give it say a

one second delay so we see the page load

and then we get a little welcome drop

down and we'll use the forwards property

here which means it will keep the state

of when the animation ends so it will

remain visible as well let's save and

see what happens

there's our welcome now to see it again

we'll have to of course navigate away

and come back to the home page but then

we see our welcome drop down that's a

nice little animation to go with our

project now let's move this over to a

full screen and of course this is how it

appears here but if I go ahead and press

Ctrl shift and I or we were to right

click and choose inspect let's choose a

mobile device like the iPhone 6 7 and 8

and make sure it's still positioned

correctly I can go to a hundred percent

view we can see it a little bit better

let's reload

and there's our welcome so yes it's not

crowding into the image too much and

everything looks good it's always good

of course to check your mobile design as

you go and I've been leaving the screen

open so we could see everything but

typically I do design for the smallest

first and you do want to check this

along the way and we will continue to

check it so for now I'm going to go back

to full screen and drag this back over

to the right with the animation complete

I'm going to drag vs code back over to

full screen now and we need to look at a

couple of sections in the HTML that are

on every page before we get to specifics

about each page and those remaining

sections are the main element and the

footer element so let's go to the footer

of the index HTML first because I

usually like to style that after the

header so once we get down to the footer

itself we can see we have footer here

with no class currently let's go ahead

and had the class of footer as we did

with the header before

and then let's also apply some classes

here to our copyright line so we have

copyright and then the HTML entity which

is the copyright symbol right here and

then we have the little taco shop well

we want to wrap this in some span

elements inside of this paragraph So

these lines do not break where we do not

expect them to we don't want the little

taco shop or we could just put little

taco shop we don't want this line to

break so let's put a span element here

and now of course it generates the

closing span element immediately I'll

put the closing paragraph tag on a

separate line and paste the closing span

afterwards I'm going to do the same here

too for copyright

I guess I need to create the element

instead of just typing span there we go

we can copy that closing span and put it

here so we've wrapped both of these in

Span elements now let's give them both

the class equal to no wrap one of those

utility classes we created that ensures

that this line will not break in the

middle of this content and this line

will not break in the middle of this

content so that helps us by ensuring

this presents itself in the way we want

it to this will not prevent it from

being all on one line but if we're on a

smaller device and it needs to wrap the

lines it's going to break where we want

it to and not in the middle of that

content somewhere else let me go ahead

and remove that extra line there and

then let's apply some styles to the

footer but we can also put this footer

in each of the HTML pages so after I

save the index and copy the footer I can

go to the hours page and I can replace

the footer that is here and we will not

need that HR that horizontal rule so

I'll highlight it as well just to remove

it when I paste that in

let's do the same for the contact page

and put that in here paste and save and

then we'll also need to do that in the

about page but if you remember the about

page doesn't have everything else yet so

it doesn't even have a main element that

we will be adding but let's save this

for now and now go back to the index now

that we've updated the HTML for the

footer let's do the same for the main

element and this will not take much at

all right now we have a main element

with no class and as you can expect

we'll put a class equal

to Maine here and then here we have an

article that has the ID of about well

this is going to be moved to the about

page so let's select this full article

here down to the closing tag and then

I'll control X I'll go to the

about.html and this is going to go

inside of a main element that has the

class of Main and you can see I created

that with the emit shortcut by typing

main dot Main and it instantly created

the main element that has a class of

main inside we'll paste that article

which will be the content inside of this

main element now I'll save this much and

we'll come back but now let's go back to

the index.html where we need to label

the article that's inside of this main

element so I'm going to highlight that

HR and remove it as well but now the

article that's in here has an ID of menu

but it also needs to have some class

classes in the first class we're going

to apply here is going to be main two

underscores

article because each main element on

each of these index pages in the project

contains an article if not more than one

article so we will label that and we'll

make sure that this is the only article

that's inside the main and if it's not

we will need to change it but it looks

like it is and that's fine it contains

the menu which we will come back to as

well but those are the two main classes

that every HTML page in the project will

need so let's go to the hours now

scroll up to the main here and it looks

like it doesn't currently have an

article but we need to apply the class

equal Main and to stay consistent here

let's go ahead and add an article

element to this HTML page so we have

article

I will go ahead and cut out the closing

tag and paste it above the closing main

tag and now let's give this the class

that is expected as well so it is

main 200 scores article

and save that now let's go to the

contact page and here in the contact

page you can see we have two sections

and an H2 so let's go ahead and apply

the class equal to Main and let's change

these section elements to articles to

stay consistent with the rest of the

main content here and you can see we

have a opening and closing and we have

two section elements so I'm going to

press Ctrl D and I got the closing Ctrl

D again to get the opening of the second

one and Ctrl d one more time to get that

closing tag now I can just type article

once and it changed all of those but now

I need to select just the opening

article so I'm going to select the full

thing including the less than and

greater than sign Ctrl D again and it

just selects the opening article of the

second one the right arrow to get to the

end the left Arrow wants to get just

behind the word article and now I can

add space type class and then set that

equal to main 200 scores and article and

now this should be applied to both so

we've got it here on the top article and

we've got it on the second article that

is on the contact page one other quick

change to the contact page is I want to

put the r location information above the

contact form so let's control X

and then just move up here above this

article

and paste in our other articles so we've

just switched that information around so

now that our location information with

the telephone is on top and the contact

form is on bottom and finally let's go

to the about HTML and you can see we

have a class of main that we applied

already but now

let's apply the same class here that is

main 200 scores and article and save

because I believe if I remember

correctly there was only one article for

this page as well so now we've made all

the adjustments for the main element and

the footer element on each of the HTML

Pages let's select the style.css file

once again and pull our code over to the

left so we can see the project on the

right and now we can continue to make

some more changes after we have styled

the hero section we're now ready for the

footer section so I'm going to put in a

label in the style sheet for footer

and now we can apply those styles with

the footer class and here this is going

to be position

sticky as well as the header because we

want it to stay in place so the bottom

will be zero so that will put it

directly at the bottom and I'll save

that much and let's go ahead and scroll

so we can see the footer down here it's

our copyright with copyright symbol and

the little taco shop

now let's go ahead and add a background

color

and this background color will be the

variable and we'll just apply the header

background color so it stays in sync

with the header

and if I save yes it all turns black so

we need to of course apply the color

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

background

let's apply some padding as it looks

pretty scrunched right now so we'll say

padding top and bottom we are using that

shorthand again so the next one would be

Patty inside

and now we'll go ahead and save that so

there's just a little extra padding

around that now let's put text align

and set that to Center and save and so

now we can see our copyright with the

copyright symbol and a little taco shop

is centered and we have our footer

across the bottom it stays in place when

we scroll as does the header I'm going

to copy this heading we put in here for

the footer and then I'm going to scroll

up and put in a very similar heading for

the main element so I want all caps

again to make that change after that

let's directly style that main class

first

and speaking of copying it's going to

get the same padding that we had here so

I'll just copy that and put that in for

the main and when I save we'll see we

get a little extra space here with our

menu our menu is not looking so great

right now and it's one of the last

things we'll do so let's start looking

at some of these other Pages the hours

look pretty good they got just a little

bit of extra space from that padding or

the about has a little more information

on it as well and so we can see some of

that there let's go back to the hours

for now okay after we've applied that

basic padding to the main element itself

we have the main 200 score article class

and here let's apply a scroll Dash

margin Dash top

and this will be 6.5 rims you usually

have to play around with this value to

see what works based on your project and

how much space possibly your nav is

taking up because what this is going to

do is enable the article information to

show instead of scrolling underneath the

header and then let's set a margin here

and we'll just use our VAR

and margin and save now this is

something we actually would see back on

the home page now if we choose menu and

it Scrolls well we're not on a device

right now that would actually use up the

page or we haven't expanded this menu to

take up more room but what will happen

will be it will prevent the menu from

scrolling underneath this header if we

have a taller manual or we're taking up

more room by the time we have finished

the Styles that's probably what will

happen Okay a couple of extra things to

put now and one of these at least we'll

see differently on maybe the contact

page because it has some extra room here

already 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

child pseudo selector

and we'll give this a margin Dash top of

one em so this would be the

first child that we would see here the

first article and that would be the same

on any page it gives just a little more

room between that hero image and the

rest

and now I'm going to copy this down so

shift alt in the down arrow

add the extra space and this will be for

the last child and we do have the one

page that has two different children and

that has the our location and the

contact form so for this last child we

want to calculate some height here so

let's say Min Dash

height we're going to calculate we'll

take 100 VH which would be 100 width or

100 height pardon me of what is

available now let's just subtract 20

rims from that and save to give it just

a little extra room to scroll and this

might be more visible when we don't have

as much content such as well the about

page has some if we go to the hours page

let's see now we have some extra room

here as well so if we remove this

and then save we don't have that extra

room it's kind of scrunched it's nice to

have that extra scrolling room and

that's why that is being applied so

again preference as a lot of Cs CSS is a

preference now we have just a little

extra room there for the scroll and now

we're ready to move on to individual

page sections I'm going to drag vs code

back over to full screen I'll scroll up

here and copy the main comment divider

that we have or label if you will and

here I'm going to switch this to about

and save so we'll start in on our about

page in the about section I'm going to

do something different here that some

may agree with or may not agree with

with bem but I don't want to refer to

the main as the parent for the about

information I want the word about there

so we know it's on the about page so I'm

going to add another class here that is

just called about and that goes to the

article so then what I refer to inside

of this article instead of referencing

main as the parent I'm going to

reference about it just makes more sense

to me for these classes in particular

and I've only got a couple to apply but

I want class about and then I'm going to

use two underscores trivia and then on

the paragraph that has the answer I'm

going to say class and then equals this

will be about

answer so we have about trivia and about

answer and even better than that I think

I might put the word trivia here as well

so trivia Dash answer it's just a

two-word label but that makes more sense

to me as well so we've got about trivia

and about trivia answer and I did want

two underscores there as well so there

we go now let's switch back to the style

CSS and put those classes in here so

we'll have our about 200 scores in

trivia remember I put in about class in

there but I don't really have any Styles

in addition to apply there I just wanted

to refer to that about class as the

parent and so we'll leave it at that

margin will be that variable that we

defined for a margin

and then for the about trivia answer so

we'll have about two underscores trivia

Dash answer

here we're going to set a margin Dash

top equal to 1M and save let's pull this

over and see those changes applied to

the about so here we go and see we've

got a little extra space here too which

also helps our scroll and then when we

show the answer

that is nicely formatted as well moving

on to the contact form so I will focus

on that and let's scroll up to see this

content that we have on this page we

definitely have enough height here and

we have two different articles working

with forms can be difficult but let's

see how we can apply the Styles here I'm

going to put in a new label in our style

sheet and I will put

contact right here and then let's scroll

up to make that the very top of the page

and now let's start off with our contact

two underscores and H2 but I don't

believe we've applied these classes yet

so let's drag this over to full screen

look at our contact page and see what

classes we need to apply to the rest of

this HTML I'm going to leave the address

as is it needs no further classes

however the contact form itself does and

I'm going to apply that same philosophy

that I did to the about page where I

have main article but I don't want to

refer to the main element as the parent

I want to refer to contact so I'm going

to put a contact class here at the

beginning for the article now for the H2

I'm going to put class and I'm going to

set that equal to contact 20 underscores

and H2 likewise for the form we can make

this a contact form so I'll put class

class equals contact two underscores and

form we'll do the same for the field set

I'm going to start copying this so I

just have to change the one word

and instead of contact form this would

be contact

field set and now for the legend we're

not going to apply that class but we're

just going to put this off screen and we

already have a utility class for that so

this class will be

off screen for the P here we'll go ahead

and put in this contact form once again

but we're just going to change the word

form to P for paragraph and it looks

like I should have selected the full

element and then the next one as well

and now I'll arrow to the end one Arrow

to go inside and paste in this class and

now I can change

both at the same time and put in the P4

paragraph we'll save now we need to do

something similar for the label so let's

go ahead and select all three of the

labels

and then we can arrow to the end paste

in our class and then once again Arrow

over change form and change this to

contact label now let's do this for the

inputs so I'll select the first one

control D and there are only two inputs

so that's all we need arrow to the right

and paste in the class and then change

the contact form once again and I

shouldn't have done that but now I can

control D to select it as well and then

we have contact input as well but now

we're going to have a contact text area

so I just need to paste that in and

switch this

to text area and I believe nope there's

one more and that would be the button

and we have two buttons so Ctrl D to

select the second one

arrow to the right to be at the end

paste this in and this class is contact

button so Ctrl D to select both of those

now that we've applied all of the

classes that we're going to use in the

form let's go back to the style sheet

and drag it back to the left and we'll

be looking at the form here on the right

for the H2 we're simply going to set the

margin to zero and save that

now the field set and notice the label

of the field set is already gone because

we applied or the legend because we

applied that off screen so it no longer

had the contactus words here but we'll

put in

contact two underscores and field set

and this will be a border of none so it

will just remove that look even though

the field set is still there

after that contact two underscores

paragraph

here we'll set a margin to one m on the

top and bottom zero on the left and the

right that gives us some more space we

could certainly tell that difference

then the contact 200 scores label

here we'll say display of block

and font weight

of bold and we'll definitely see these

changes makes our form look better as

well now we'll select both

contact two underscores input and the

contact 200 scores

text area

for this we'll say padding 0.5 M you can

save and we'll see some change there the

inputs got a little larger

then we'll say a border Dash

radius of 15 pixels save and you can see

they're rounded I'm going to scroll now

that the form has grown a little larger

so we can see everything again

okay after the Border radius we're going

to have a border Dash

width of two pixels to just make it a

little larger around each of the inputs

and then a width of 100 percent and save

and now those inputs take up the full

width that they have available to them

our buttons down here still need a

little bit of help so let's say dot

contact 200 scores button

now we'll say padding 0.5 M for those

and save we can see the padding gets a

little larger for those now

and then we'll apply a border radius to

match the other border radius 15 pixels

and this should possibly be a variable

that I have not created but that would

allow us to just change it in one place

and it would change it for the form as

well as the button

underneath that we should have border

width and oh not border width on the

buttons I'm sorry let's have a

background

color

let's say VAR and let's pick that

highlight color so we can have a

different color on these buttons

that looks good except the font doesn't

look so great there so for the VAR let's

say the header color

and that should turn that white and make

it stand out just a little bit more

those buttons definitely look better

than they did before so a quick check

let's take the Border radius property in

control C and then I'm going to do Ctrl

F to search for it and let's see how

many times it has occurred

it's just twice here inside of our

project so if you wanted to you could

absolutely make a contact border radius

variable and then you would just change

it in one spot and of course the form

the inputs and the buttons would match

but you don't have to I did not clearly

at this point but that would be an

option so now before moving on to the

menu let's look at each section that

we've already styled for our page and

here's the full page so our about page

has a nice huge hero image and we see

the about LTS some information and our

Taco trivia that looks good the hours

page another nice hero section and a

simple bit of information about the

hours and let's look at the contact page

we scroll down we see the our location

information after the hero and the

contact form as well so that all looks

good I think the menu is still going to

need some work and we might apply

another style or two yet that we haven't

but we're making a lot of good progress

let's go ahead and control shift I to

see how everything's looking in a mobile

device as well so maybe we could choose

fit to window and we see this iPhone 6 7

and 8. let's look at the iPhone 5 and

that also looks good let's reload and

see how that animation works that works

as well so yes the menu needs some help

but how do the other Pages look oh the

other Pages still say the little taco

shop hours instead of just little taco

shop or something similar and again

we're on the smallest device that we

might ever see right now which is the

iPhone 5se things may have changed in

the future of course if you're viewing

this at a later time so here it wraps

the two lines on the header but anything

larger than the absolute smallest device

it looks like it won't as long as we

adjust our headers here instead of say

the little taco shop hours we can just

say little taco shop here it just says

contact us and on the about page once

again it just says little taco shop I

think we want our header to be

consistent and say little taco shop no

matter which page we go to so let's go

ahead and make those changes as well in

the HTML as we go back to the code so

I'm going to close this back out drag

this back to the right and bring the

code over to the full screen quickly

going to each HTML page will make sure

that the heading matches so it should

just say little taco shop where we have

the header H1 for each page scroll to

the top of the hours and we'll see what

we have here it says the little talk

Taco Shop hours so we'll go ahead and

remove the in hours

save that file the contact page

said contact us well we would prefer it

still say

little

Taco Shop here and of course the H2S

will handle the other labels on the page

so we had our location and below that we

should also have the contact form as

well there we go let's see what was here

yep our contact form so that looks good

and the about HTML should also just say

little taco shop and it does and of

course the titles of the page say more

about the page as well so about the

little taco shop here

the title at the top of this says

contact us LTS I guess to keep

consistency we could say about LTS on

this other page as we're going with that

abbreviation several places so

about LTS there the description can

still say about the little taco shop and

then hours let's see what the title is

here LTS hours that's great and of

course for the index we want the title

to be the little taco shop so everything

is looking good once again in the HTML

let's go back to the CSS and start

working on the menu now before applying

styles to the menu I want to pull up an

mdn reference so I'm just going to paste

this link in and I'll make sure it is in

the course materials as well so the

course resources but here on the grid

layout and accessibility page in mdn it

says grid and the dangers of markup

flattening so what we're going to be

doing is taking the HTML table that's in

the index page that comprises the menu

that is displayed and we're going to

make it a grid too often many people

just use div elements to make their grid

and a grid knee needs that flat

structure essentially for the grid items

so it can review or refer to each grid

item in that regard because it's not

going to look at sub grid items subgrid

is a proposal they're discussing here

but it's not implemented as well so we

want to avoid that dangers I'm going to

pull the code back over and bring up the

index.html

and we can see our table and right now

the table is not flat notice how it has

parent elements like the T head element

and of course table row elements and

then inside we get the th and TD

elements for those table cells whether

they're a header element or they're just

a table data element and so grid doesn't

work that way it needs flat elements but

we can still work with this we don't

want to remove the semantic markup of a

table to further illustrate my point

instead of just having this here

underneath I'm going to paste in what

you might see a table constructed of for

a grid using divs now this is a

flattened markup table essentially that

would be applied to grid and notice how

I just use divs and applied all of these

classes and this is what you do not want

to do but I guarantee you will probably

see this somewhere when a grid is

applied and you see a table on the page

I'm going to press Ctrl Z though because

this once again is not what we want to

do and you can tell by this markup it is

not flattened however there is a

solution for this and it is a display

setting that we can put in the CSS that

will help us convert our table to a grid

I'm going to drag this back to the left

so we can look at one more web page and

I will link to this as well in the

course resources and it's the can I use

web page and I'm looking at display

contents notice what it says about

display contents it causes an element's

children to appear as if they were the

direct Children of the elements parent

essentially that ignores that parent

element and that will flatten the

elements for grid to use without

removing those elements so we just need

to put display content events on some of

these parent elements that grid will not

use it says this can be a useful or this

can be useful when a wrapper element

should be ignored when using CSS Grid or

similar layout techniques and then when

we scroll and look at everything as far

as how well it is applied now let me

pull this out to the full page so we can

see everything from can I use you can

see it's got basically 95 percent

acceptance here and we're not going to

worry about Internet Explorer again and

most every other major browser is

accepting that use here Opera Mini is

one that's not an UC browser for Android

but Chrome Safari Safari on iOS Chrome

for Android we're good in almost every

major use case here so I'm comfortable

with using that as we switch our HTML

table over to a grid and again I will

link to both of those for you back to

our website here back to the right and

now I will pull this back over to look

at our code in a full screen so we can

get the ideas of what we're doing with

the table as I did with the contact and

about pages I applied a separate class

here to refer to as the parent and I'm

going to do the same here it's going to

be the menu class and then I will refer

to these again with bem notation but I'm

going to refer to menu as the parent so

here we're going to have a class I'm

going to set this equal to menu 200

scores and H2 for the r menu heading

then the table itself

say class and then menu two underscores

and container because this is going to

contain our menu for the caption for the

table

we'll use this class and set this to off

screen our utility class once again as

we will not want to view this caption on

the page but we do want to retain it for

accessibility now we will be setting the

table head and the TR element the table

body element and the table foot element

to that display contents so grid

actually ignores those the content we

want for the grid and the content that

we actually want screen readers to read

will be inside of the th and TD elements

so that's where we'll apply the classes

here so all of the opening THS that we

have here I'm going to select

three right there and we might even have

a fourth but I think we just want three

right now for the menu headers so we'll

take this over with the arrow to the

right and I'll say class equals and this

is going to be menu two underscores and

header now something else I want to do

here one thing I noticed and I must have

done this in the HTML course as well so

if you went through that you can apply

the scope column to this first cell as

well and I'm not sure why I didn't

before it might have just been an

oversight the second thing is we were

looking once again at how to do

abbreviations in HTML but I want the

full word quantity here now so I'm going

to remove the abbreviation

and just have the word quantity in the

second th cell for the table okay after

we have got the menu headers now we're

going to have menu item classes so we

will come through here and then whether

it is the TH or the TD in these other

cells I'm going to make it a menu item

so I'm going to start off with the

remainder of these table data cells

because there are several I'm pressing

Ctrl D to get all of them selected

and I think that's going to be it nope

one more maybe there we go one more so

at the end of that I'll arrow to the

right I'll put class

and I'm going to set this equal to menu

two underscores and item okay scrolling

back up to where we have the crunchy and

then of course we have the soft label

down here we're going to apply classes

here as well I'll have a class I'm going

to set this equal to menu two

underscores item and then I want a

second class here that is just going to

be menu two underscores and CR for

crunchy as we'll need to refer to that

later for the grid possibly and then for

soft we're going to do the same thing so

it's going to be a class

equals menu two underscores item and

then menu 200 scores SF for soft and

finally let's scroll down to the very

bottom where we have chips and salsa it

spans three columns so besides menu item

here I also want menu two underscores

and Cs and I believe I have now applied

all of the classes that I wanted to

apply for the menu itself one other

thing I am going to do while I'm here in

the HTML is remove this line break and

then we have a paragraph here and I'm

going to apply our utility class of

Center

to this paragraph that has our back to

top link that should appear underneath

the table let's go back to our style

sheet and let's drag this to the left so

we can see changes applied to the table

now as we apply these Styles I'll start

by scrolling up so we can start at the

very top of our available space and I'm

going to put in a label for the style

sheet for the menu

now underneath this the first thing I'm

going to do is select the T head element

the t-body element the T foot element

and the TR element and this is the only

table in the project so I feel safe

doing this without classes if it was a

larger project I might have made a

display contents class and then applied

this to each that class to each one of

these elements so here I'm going to say

display contents it also took those

parents out of the flow so now even

though they're still in the page it made

them all run into one line so we will

definitely see changes now as we make

the table

so or the grid I should say

let's create that menu container class

if you remember this is applied to the

table element itself so we'll say

display grid and if I save after each

change we should definitely see changes

as we go so now just by applying display

grid it changed how that viewed after

our display contents was applied now

let's say grid Dash template Dash

columns and we're going to use the

repeat function

we want three columns

each with one fragment so let's save now

and we once again see changes to that

table now let's go ahead and map out our

grid

template

areas but we really haven't assigned any

specific classes like those that we

applied to crunchy or soft so it might

still look a little strange when we do

this essentially though we only need to

assign the labels to the ones that are

going to take up more than one grid

Square so other in other words I can

just kind of create the other labels

without assigning them to elements so

I'm going to have HD1 HD2 and HD3 I

won't end up assigning those to classes

at all then I'm going to have cr

1 this is crunchy as you might guess the

abbreviation HD was for header and then

crunchy one price for one taco now I'm

just going to control alt and the down

arrow a couple of times because one here

is going to get changed to 2 and then 1

here is going to get changed to three

okay after that let's create one line

here for soft so we'll have soft taco

soft one and then soft one price after

that

shift alt down arrow shift alt down

arrow select one control D change those

to a two select one Ctrl D change those

to a three

and save and so now we have the crunchy

rows and the soft rows and the header so

at the very end we're going to have the

chips and salsa row so cscs CS because

it had a row span of three after that we

have essentially mapped out those grid

areas it doesn't look like we want it to

yet though because we haven't assigned

that crunchy label to the crunchy label

that we or class that we have and the

soft label to the soft class or the

chips and salsa label to that class so

we still need to add those likewise

let's go ahead and add a small Gap 0.1

em so as we discussed before that could

be as small as 1.6 pixels or about as

large as 2.4 depending on the font size

applied then let's give a margin bottom

of one in as well now let's apply some

of those labels so our grid looks a

little bit better so we'll start out

with the menu two underscore CR for

crunchy and here we apply the grid area

label of CR when we save we don't see

much of a change yet but I hope to in

the near future

menu two underscores and SF for soft and

here we'll say grid area

SF

save again so we see a little bit more

of a change

and then we'll say

menu two underscores CS this will be

grid area CS

and save we definitely have seen some

changes in the Grid it's not what we

want yet but we're getting there let's

make the color

here a VAR Dash Dash

highlight color for this

Okay so we've got a chips and salsa that

is now green and then we'll say font

weight

bold as well and save that looks good

now let's go ahead and apply some of

this to the other areas as well so let's

say

menu 200 score CR and menu 200 scores SF

here I'm going to take these two and

maybe I should have organized this

differently on my thought pattern but I

want both of those there as well however

there's also some other styles so I want

a height

of 100 percent

as it takes up some of that extra space

why is that not applying to crunchy I

may have to go back and see what I did

wrong there 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

a grid so we could do that yes the

crunchy style is not being applied so we

have menu CR

and that is what needs to be applied

there let's go back and look at our

HTML and see if that class was applied

properly to the CR section oh it's just

one underscore it needs to be two

save and now

go back to style and bring this over and

now crunchy and soft both have that same

style and everything is aligned better

that makes more sense as to why it

wasn't coming together quite as quickly

as I expected and before we move on

let's see if we could apply this

differently now we still need the grid

area here for menu CS but we could

possibly remove these

and let's see if we could include

the dot menu to underscore CS without

really making something strange there I

think that's fine and it's a little more

efficient we aren't repeating those two

lines and now let's look at these

headers and we could possibly add those

in as well so one more comma and we'll

say menu 200 scores header and save and

yes I think that style is going to work

out as well however we still need menu

to underscores header because we want to

add a border Dash bottom to each of

those so we'll say VAR and bring in our

borders variable that we have created

and save so now we have a border across

each one of those headings now let's

scroll for some more room and we're

going to select that menu header again

like it's spell menu 200 scores header

and then we also want menu 200 scores

item

now for both of these we want a width of

100 percent

and then we'll set a padding to one em

and let's put a border

and then let's set medium

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

maybe we could remove that border bottom

and still be good and we save yes and it

looks the same so one was just

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 in

the center and when we save that looks

good as well now we didn't apply that

above to the menu item where we set the

same grid and Center because we also

really didn't want to apply these other

styles to those menu items we wanted to

keep them this separate color and not

have the font be bold but that's looking

pretty good right now as far as

converting this menu table and leaving

that semantic HTML in place we can apply

some final touches to this menu as well

but earlier when we were referencing the

Border Dash radius property we said we

were only doing it twice and therefore I

didn't go ahead and create a variable

but now I want to use it again and so

now that I'm using it in another place I

definitely do want to create that

variable so I'm going to scroll back up

to the variables section and underneath

borders

I'm going to create a border Dash radius

variable and just set that to 15 pixels

so now that I've created that we can use

that variable in all of the places that

we are applying a border radius so now

let's go ahead and change these two that

currently exist to VAR

Dash border radius there we go

and save that so no other changes will

be made there but now we can apply these

final touches to our menu table as well

and we can use that border radius

property now I could apply classes to

the header and the footer but I'm not

and they are being ignored for some

things concerning the grid when we set

that to display contents however they

are still part of the document so we can

still use them for selectors so I'm

going to select the T head and then the

th inside of the T head and say the

first child which should be the very

first cell that says tacos and here

we're going to set the Border Dash top

Dash left Dash radius and now we'll use

our

border radius variable once again

and when we save we can see this now has

the Border radius of 15 pixels so

likewise I'm going to just copy this

down so I don't have to retype

everything shift alt and the down arrow

this is going to be the T head th last

child and instead of the top left it's

going to be the top right everything

else should be the same and now we see

that same border radius applied over

here to the right finally we have this

one large chips and salsa cell along the

bottom of this table for the menu so

here this will be the T foot and then

we'll select the table data cell inside

here we can set the Border Dash bottom

Dash left Dash radius and this will once

again be VAR two dashes border and use

that border radius variable

and once we save this we see that

applied to the left corner so it just

needs to be applied to the right corner

so inside this same selector here for T

foot TD we can now also apply this

to the right corner and save and there

we have our rounded corners for our

table as well we're getting near the end

but there is a little more to do let's

go ahead and look at the page in full

screen or at the full site now and

here's our back to top we can click we

have the smooth scrolling that goes

there we can go to the hours page

everything looks pretty good there the

contact form everything is good here

the about page and the trivia that's all

working well and our animation shows

here let's look by shift control and the

letter i to go into a mobile view notice

how well our grid conforms it

automatically adapts we didn't have to

apply a media query the grid just works

in this mobile view and that's great

let's look at some other views here's a

little bit maybe larger phone there we

go so it is quite a bit larger it is the

iPhone 678 Plus

and there will size it down to 75

percent let's go ahead and look at the

iPhone x that gets taller so that should

also make our text just a little larger

based on how we used clamp with that

everything's still looking pretty good

the form still adapts to the screen size

the menu looks good and it took us right

to the menu when I clicked the menu link

the about page the hours all is looking

pretty good I think we could apply

possibly a little bit of space or a

class we might have to back to the top

that we applied down here I think we at

least centered it so we might change

something there but overall it's good to

just evaluate your project and see how

everything looks to you as you go and

you can tell it's looking good on mobile

as well so let's go back to full screen

view and we're going to make just a

couple of changes there is one media

query I would like to apply to this

project although using modern CSS for

the most part we've been able to avoid

media queries we are going to put this

media query at the bottom of the page so

we'll say at media and then we'll say

screen

and now say Min width and we'll say 576

pixels which is our small break point

and that is similar to what bootstrap

uses the CSS library or framework if you

will and here we have header 200 scores

H1 now let's select the pseudo element

here and this is the before pseudo

element and we're going to set some

content

on this H1 let's give a space and what I

want to do

is put a taco Emoji in here and actually

I want to put the taco emoji and then

the space so we have a taco space and

then we have the heading as you might

expect I also want to do this with the

after so I will just copy that down

again shift alt and the down arrow we'll

switch before to after and now with the

after we want the space to come first

and then the taco so we've got Taco

space heading space Taco so this should

show up on any screen that's larger than

576 pixels in width so when we save now

we have tacos in the heading as well and

that's a great addition for the little

taco shop and it applies to all the

pages where we set up our classes

correctly but if we go to a smaller

screen where we might not be able to fit

all of that in

they disappear and that is great too so

that only shows in larger viewports

let's go to an iPad there we have the

tacos so just mobile it will not try to

squeeze those tacos in and that is fine

let's drag this back over we can apply

just a little bit more to the media

query as well and this is just something

I want to do for the menu 200 scores

header

then we're also going to have it in the

menu to underscore CR which was the

crunchy

menu 20 underscores SF which was the

soft

menu 200 score CS which was the chips

and salsa we're going to set the font

size to 125 so just a little larger on

these larger screens for the headings

you really if you wanted to you could do

it to all of these but I just really

wanted to make the heading stand out and

so everything we've wrapped around here

that you see in green has applied that

larger font now just another 25 percent

larger than it was there is one more

media query to apply but it's not based

on the width it's based on the

preference of light and dark mode we

have styled our light mode this would be

our normal viewing for the website but

many prefer dark mode these days and

that includes myself so I definitely

like to add dark mode when the

preferences are set for that so if your

system preference is dark mode that's

what will display my system preference

is dark mode so I'm going to put this

media query directly under the the

variables we defined so it will be

applied right away because all it really

does is change the variables for those

colors that we're using on the site so I

will say at media put our parentheses

then put prefers Dash Color dash

scheme

and here I'm going to say dark so that

is what my system is already set to so

anything we put in here will start to

overwrite what we already have for those

variables so we need the root pseudo

selector it's the pseudo class and now

let's overwrite

the background color

and this is going to be

black now we will not really see the

change here because we're not seeing

that orange color until we drag this

over to full screen so if I save drag

this over to the full screen now you can

see it's dark but it's still fading to

that light orange because we haven't

changed that other variable yet either

so let's change the

BG Color dash fade variable as well and

I'll just make that gray just like my

last name I'll save and now let's drag

this over once again you can see it's

fading to a gray instead of the orange

to a light orange the next color we'll

put in here will be the header

background color now we'll start to see

these changes so header BG color

oh I'm sorry just header color not BG

color

let's make this

white smoke and Save

and then let's go ahead and change the

nav

I said color now I need background color

and by the way the white smoke I just

find that to be easier on my eyes than

the Pure White that we've used in other

spots let's set this to RGB

2020 which is just a different shade of

black essentially and now you can see

that background color for the nav menu

definitely got darker okay so we're

going to have to change that text

eventually too let's set the hero color

and this is for our little animated part

that drops down so our hero color

is going to be a different flat black

now when it drops down you can see that

has also changed now let's set the body

background color itself so this will be

a big change when we first see it that

will also be this flat black

and that has made a difference now let's

go to the font color itself which is

what's being used on most of the page

and we'll go with that white smoke

that's just a little easier on the eyes

than the pure bright white

and so let's find a page that's using

well here we see it inside of these

table cells here but if we go look at a

different page you can see it is being

used right here as well okay after the

font color let's apply the

highlight color

and where this was that green let's use

white smoke here as well so when we save

I believe that's in the animation

and I'm not seeing that applied right

now I'm not seeing the animation because

I'm not on the right page here we go and

oh no it wasn't in the animation because

that has the separate background color

that is slightly transparent but it is

in some other areas like we were using

it for the H2S and h3s and the table

headings so we can see that's Now using

white smoke as well okay now let's

switch the Border color that's being

used let's also make that white smoke

now our table is standing out and now

that border color was a bit of the

Shadow behind the lettering so now we've

got a little bit of white shadow behind

Bienvenidos and that stands out on that

green as well helping the dark lettering

stand out and we still need to change

our link colors so

link Dash color

we'll make that white smoke you can see

we're really making use of that color

for this setting also say link hover is

now going to be orange

and then

link active

is going to be the lighter orange so RGB

252 200 103.

and save so now when we hover over a

link it becomes orange

when I hold down it's a lighter orange

and then we go to ours everything looks

pretty good now you may have your own

preferences for dark mode as well but

just scan over the site see how you

think it looks does everything look like

you want it to oh these buttons need a

little bit of help yet let's check our

other page and make sure everything else

looks good and then we might need to

change something about those buttons

we'll have to see what is going on there

and that might be a correction that

needs to be made in how they're

initially being set as well so let's

find where we had a

button which was a contact button and

you can see the header color which

remained white or white smoke was being

used but then that highlight color was

the background and that has changed I

think we need to change this from header

color to button color and give us some

or give ourselves some control over what

color is the text on top of the buttons

so we've added a button color variable

now we need to Define that above and

then of course change it when it gets to

dark mode as well so we were fine with

it at first when it was the same as the

header color so that's what we'll start

off with and I believe that is just

white so we'll put that and also put it

in as

white here but now we need to change

this when we get to dark mode so let's

bring this down into our dark mode

definitions add this and let's change it

to Black right here and save now let's

go ahead and go to our contact page so

scroll down and now we can see the text

on our buttons and so that looks good

the about page is looking good let's

make sure the answer looks good for

trivia that's fine here's an additional

Link in our page to the reference for

the trivia

the menu we scroll right to that

everything looks good there

hours pretty good I still might want to

create a little space here with the back

to top but other than that it's fine and

back to the home okay so we are down to

the final touches of the project so one

of those things might be to organize the

CSS now this is your own project but if

you're working in a team for example you

might want to organize that I'm going to

drag this over to full screen for this

discussion let's say the colors we have

here there's there's probably the

largest list that we have of anything in

this project is the colors it might help

to just use the abcss technique here to

organize these so if we highlight all of

those press Ctrl p and then the greater

than symbol and now we might choose sort

lines ascending so now all of our colors

are ordered alphabetically and I can

find them probably much faster now that

I've done this so considering that maybe

we should do the same thing for our dark

mode we'll highlight all of those Ctrl P

greater than symbol and choose sort

lines ascending now you're welcome to do

that for any or all of the properties

and styles that are within this project

if you so choose now before we finish

this project there's one more thing we

can add that would be a very nice touch

but it is a preview of what's to come

for you yet and that's because it's a

touch of JavaScript just a little bit

and I'll show you what it does it will

update the year so it will put in the

current year no matter what year it is

and you will not have to come back and

update the copyright on your site so

let's put in a time element right here I

want lowercase so I'll give this a time

with an ID attribute of year

so there is our time element and we

don't really need to put anything in it

we'll just leave it as is with the ID of

year right there now let's go over to

our file tree and inside the file tree

let's create a JS folder and inside the

JS folder let's create a new file name

it main.js

now we only have a few simple lines to

put in here so I'm going to type const

which will help me Define a variable and

I'm going to name that variable year I'm

going to set that equal to document and

when I refer to document I am referring

to the HTML document and then get

element by ID and this will be year so

you know we just set that attribute and

then we are selecting it so we're

selecting that time element on whichever

page we load this JavaScript into from

there I'm going to Define another

variable and I want it to be called this

year notice I'm using camel case to

Define that going to set this equal to a

new date and then I'm going to call the

get full year method for that date so

now I have the current full year in the

this year variable and I have the

element that we just created the time

element in the year variable so I'm

going to say year

set

attribute and then I'm going to select

date time

and I'm going to set it

to the this year variable

and then to display it on the page I

once again want that year element and

now I'm going to select the text content

that's what's displayed on the page

and set it equal to this year and save

that's all I need are these four lines

of code

and with that we can import this into

our page so we'll go back to the index

let's scroll to the top because we want

to load the JavaScript last after the

CSS

and we do that with a script tag and it

will have a source attribute and there

it is so we'll say JS slash and then

we'll just pick our main.js nothing goes

between the opening and closing script

tags however you have to put it this way

it always has a closing script tag it's

not like some of the other elements that

just has a slash to close out the first

one you always see it this way we want

to add one other attribute though and

that is defer and that tells the script

to wait until everything else is loaded

before loading the JavaScript and we

will save now if we go back to our page

notice it says copyright

2022 little taco shop if you're watching

this in a different year and you add

this same code it will say whatever the

current year is there if we go to our

other Pages notice it still just says

copyright copyright symbol in little

taco shop because we haven't added that

JavaScript to the other Pages yet but we

can do that now so let's drag this over

and we also need to make that same

change to the footer on every page so

inside of our copyright line here that

has the span class let's select that

with the c and then we'll go to the

hours page so scroll down

and we will select the same line and

paste in the new line and Save

the contact page scroll down select the

copyright line paste in the new line and

save and we also need the about page I

believe so now let's scroll down and

here we'll select that same copyright

line

and we'll paste in the new line but we

haven't added the JavaScript yet so

let's go back to our index.html now we

could just copy this same script line

and we can use the same Javascript file

for every page so back to the hours page

paste it in underneath our style sheet

line 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

and save and now let's once again look

at our site and notice that no matter

which page we're on we now have the year

referenced in the footer along with our

copyright notice and everything looks

just as it should okay guys just a few

closing notes and you could call them

Corrections if you want to I just want

to adjust a couple of things we're

currently on the hours page for the

little taco shop and I previously forgot

to put in an H2 for this page so I'm

going to do that here on line 48 and I'm

just going to put hours in there and

save something else that's been

bothering me about this page the whole

time was the back to the top link that

we really don't need anymore there's not

enough content on this page for it

really to even be there so I'm going to

remove that back to the top link on the

hours page other than that I'm happy

with how this page turned out of course

everything is preference when it comes

to CSS you're Your Design choices your

preferences may be different than mine

so feel free to make your own changes

also at the contact.html page I

previously removed every HR the

horizontal rule element but I think I

would like to put one back here just

between the two sections on this page or

between the two articles if you will so

I'm going to put this horizontal rule

back between those two different

articles on this one page one other

thing I want to do is just change the

text a little bit on the buttons so I'm

going to click the file tree quickly go

to the style.css file and here under the

contact to underscore button class I'm

just going to add a font weight

of bold and save and now once we want

look at these buttons I just like how

they look a little bit better with the

Bold font always go back and reevaluate

your code make your own choices and of

course you don't have to agree with my

choices the best way to learn is

experiment and see how it works out for

you so that's the end of the project

congratulations you've completed a large

overhaul on the little taco shop website

and styled it with modern CSS very few

media queries necessary we added a nice

animation and it does work in mobile

devices as well even though we didn't

need those extra media queries so if we

go back to an iPhone 6 7 and 8 style we

can now see how all of this looks in a

dark mode and it is still working as we

expect it to great job completing the

project and completing the full CSS for

beginners course remember to keep

striving for Progress over Perfection

and a little progress every day will go

a very long way please give this video a

like if it's helped you and thank you

for watching and subscribing you're

helping my channel grow have a great day

and let's write more code together very

soon