Thanks for checking out this video, we're going to cover the basics of sass, and then we'll create
a project from scratch and deploy it. And I'll show you how you can easily include sass in your
workflow. And I want to give a big thanks to bow and free code camp.org. for publishing this video,
Free Code Camp is an awesome resource. And on behalf of the community, thank you for all that
you do. So before we get into this video, I'd like to quickly let you know who I am. I'm a husband, a
father and a programmer, I've got over two decades of it experience. I'm a full stack developer, I
recently decided to create a YouTube channel. And initially, I just wanted to help people. But after
my first couple of videos, I realized that it's actually helping me to become a better programmer,
I do research for every video, and a lot of times I come across things that I didn't know,
or a better way of doing things. So I'm learning and teaching at the same time. So when when my
channel is new, but I upload new videos every week, I'd greatly appreciate it if you check out
my channel and subscribe. And that's enough of this. Let's get into the video. So we're going
to go over the basics of sass, and set up our environment. And then we'll go through a project
from beginning to end using sass. There's timestamps in the description if you'd like
to skip through certain parts. So what is sass is a CSS extension language, and gives your CSS
superpowers. Once you see how easy it is to write and how logical and organized it can be. You'll
never write plain CSS again, you'll see what I mean in a minute. Let's look at what you need
to write CSS. First, you'll need a code editor. And I recommend VS code because it's open source,
and it has great extensions, and awesome community support. Now your browser can't read sass, so it
has to be compiled into plain CSS. But don't let that scare you. It's easy. There's several ways
that we could go about this, we could use node j s to run a compiler that will watch our sass files
and compile them automatically for us. Or we could use Gulp to do the same thing. Or we could use an
extension in VS code. And for this video, that's what we're going to do, we're going to use live
sass compiler. Another extension that we're going to use is live server. If you're unfamiliar with
VS code, and how to set it up for web development, I do have a video on that. I'll have a link
in the description below. Alright, I'm going to quickly walk you through installing the live sass
extension. So in VS code, we'll go to extensions, and we will search for live sass. And there you'll
see live SAS compiler, go ahead and click on that and then click Install. And after that's
installed, we're going to look at some settings. So let's go to our settings. And then we'll
search for SAS and then click on live SAS compiler there. And then you'll see in the format settings,
we're going to want to change the Save location. Now these settings are a personal preference. By
default, it will compile your CSS and put it into the same directory. And I prefer for the compiled
file to go into my distribution folder. So we'll click on edit in settings, Jason, and then here
we're going to add some settings. So these are your options. So the default is at the top here,
format is expanded. So there's no compression going on. The extension name is dot CSS, and then
the safe path is no. So that means it's going to go into the same directory as your sass files. So
you could also change the format to compressed if you want. And it will go ahead and compress
and minify your CSS all in one shot. And then you can change the extension name to dot min dot CSS,
and then you see what they're where we can put it into our distribution folder. So I'm actually
going to do just a combination of the two for this video, we're going to keep the format at expanded
and the extension is dot CSS. And we're just going to change the safe path to slash dist slash CSS.
And then we'll save that and we're good to go. Alright, now that we have all of that set up,
let's create a standard folder structure here. So I have a new project folder that I've created,
and I opened it in VS code. And let's go ahead and create a folder here called dist. And then within
our dist folder, we'll create an HTML file index dot HTML. We'll use Emmet. We'll use exclamation
enter, get a template here and we'll just name this tutorial. We'll add a link here to our CSS.
So currently, we don't have one but we will be adding it. Notice the extension here is CSS not
sass or SCSS. So this CSS file is what's going to be compiled. Once we've created our sass files,
Now, before we create our sass files, it's important to understand that there are two
syntaxes supported by sass. So there's the SCSS syntax, and it uses the file extension SCSS. And
this stands for sassy CSS is basically a superset of CSS, which means essentially, that all valid
CSS is valid SCSS as well. I'll show you that in a minute. But because of this similarity,
it's the easiest syntax to get used to and the most popular. Now the other syntax is the indented
syntax. And this was the original syntax for sass. And it uses the file extension dot s. css, the
indented syntax supports all of the same features as SCSS. But it uses indentation instead of curly
braces and semicolons. There are a few other minor differences. But we're not going to be using
SPSS in this video. So we're not going to go over those. Alright, so we'll be using the SCSS syntax.
And so let's go ahead and create that structure. So be sure you're in the root of your project. And
go ahead and create another folder here. And we're going to name this SCSS. And then within here,
we're going to create a main dot s CSS. Alright, now that we have that file open, we've got our
extension installed. So now you should see this watch sass at the bottom. So go ahead and click
on that. And you're going to see an output here. We'll see here that it's watching for our sass
files now, and it is compiling and generating them automatically. And now it's watching for
us to save the file again. And when we save it, it's going to automatically recompile and create
that CSS file every single time that we save the document. So we didn't add this CSS folder here,
but now we have a folder in dist. And so that extension created the folder, and it created our
CSS file. And of course, we don't have anything in our sass file. And so I don't expect to have
anything in our CSS file either. So remember, we said that any valid CSS is also a valid sass. So
let me show you what I mean by that. So here in our sass file, we can add, let's just do something
generic here, we'll say body background. And we'll set it to blue. And I'll hit save. And it
automatically compiled our CSS for us. So now if we go to the CSS file, we'll see body background
blue, just the same as we see it here. so we can write plain CSS in our sass file, and it will work
just fine. So I also have a live server installed. So I'm going to go ahead and hit that go live.
And here you see we have a blue website. So One important note here is that we should never modify
the CSS file. Only modify the CSS file. Every time the compiler runs, it's going to overwrite the CSS
file. So the first sass feature that we're going to look at is variables. And now you might say CSS
has variables too. And that's true. css does have variables now. But sass has had variables long
before CSS. Currently, CSS variables compatibility across browsers is about 90%. So that's pretty
good. And I don't see any reason not to use CSS variables. But when you use sass variables,
they don't compile into CSS variables, they compile to the actual value. So let me show
you what I mean there. So in normal CSS, we could add variables like this. So now we could set our
background here using a CSS variable, just like that. And so now if I save this, you'll see that
our CSS file is pretty much identical to the scss file. And if we switch over to our website,
we now have a gray background. So now, let me show you the difference between this and
the sass variables. So with sass, we can get rid of the root. And instead of the dashes,
we'll add $1 sign. So $1 sign indicates that is a variable. So instead of calling bar, we will just
input the variable. And we'll save this, we'll switch over to our website, and it's still great.
And let's look at our CSS now. We don't have any variables defined, it puts the actual value
there. So using sass variables has a 100 percent compatibility across browsers. Alright, next,
let's talk about maps. So if you're familiar with JavaScript, you could compare maps to arrays. maps
are lists of key value pairs. So I'll create one here. So we'll define a variable. And we'll name
it font weights. And then to to define a map, we start with parentheses. So answer a key. So we'll
say, regular will be the key, and then the value will be 400. We'll enter another one, we separate
these by commas. So we'll say medium will be 500. And then bold, will be 700 is probably not the
best example. But you can create a map of colors or different things. So that we have something to
really add this to let's put some HTML markup in here. So we'll add a div with the class of main.
And then we will put a paragraph and we'll just put some Mormon here 50. Right now in the body, we
could apply a font weight. Globally, if we wanted to get a value out of the map, we'll use map get,
right, and so it's looking for the map. And that would be font weights. And then the key would be,
let's say bold. So this may seem like a bit much. But if we have our font weights defined throughout
our CSS in many different areas, and for some reason, we want to change the way that the normal
medium or bold font looks, let's say we want bold to actually be 900. Instead of 700. I can change
it in this one spot, instead of searching through all of my CSS and changing it on each individual
line. Now before I save this, let me pull up the website. Oh, and our text, we forgot to
text color. Let's apply our color. And we'll set that to text color. Now we see that everything is
in bold. So this looks at our map, and we tell it which key to look for. It finds the key and then
it extracts the value and it puts the value here as font weight, we go to CSS, we'll see that our
font weight is set to 700. Right, next, let's talk about nesting. So nesting might be one of
the best features of SAS. But depending on how big your project is, be careful with too much nesting.
Using classes that can be reused instead of nest after nest is much better. But to demonstrate
nesting, we will look at our paragraph here. So we have a div with the class of main in a paragraph.
So let's look at the main div. First, let's say that we want to center it and add some margin on
the side. So we'll set the width here to 80%. And we'll set margin, top and bottom to zero left and
right to auto. And this is just plain CSS. So if we go here, we'll see now it's centered and we've
got some margin on the sides. Alright, so now if we wanted to style our paragraph, normally, we
would have to do main and then paragraph and do it like this. Or we could just do paragraph and that
would globally change all of the paragraphs. But we don't want to do that. with SAS, we can nest
so within main, we could just do this. And let's say we just want to put that font weight only on
this paragraph. We'll move it down here. And I'll save that switch. And we will see. Same thing,
nothing has changed. And if we go to our CSS, you'll see that it has written it as proper CSS
so that the browser can parse it. Now if we want to do this properly, let's add a class here to the
paragraph. We'll set it to Main paragraph. And then so instead of targeting the tag directly,
we can do main paragraph by saying save that now it compiles properly into CSS. But with sass,
we have some shortcuts. So instead of typing main again, we could take this part out and we can use
an ampersand. So ampersand equals the parents. Right? So let's save that and go to our CSS. Now,
it's not quite right, because its main underscore paragraph on its own, not within the main parent.
So to fix that, we actually have to use something called interpolation. What that means is we don't
want just dot main paragraph, we want everything before it. So we have to wrap the ampersand in
hashtag curly braces. So now what we could do is add a hover on the paragraph. And so we want
to add that on the paragraph, not main. So we'll nest that again. And this time, we'll use just one
ampersand. And we'll use colon hover like we would normally. And then let's just change the color to
pink. All right, now we'll save this. And if we go to our website, and we hover over it, now it's
pink. Right, let's look at our CSS. Let's see what happened here. So we've got everything separated
as it should be in CSS now. So let's talk about separating files. So with sass, we can create
partial sass files that contain little snippets of CSS that you could include in other sass files.
So if we're working on a large project, it's a great way to modularize your CSS and make things
easier to maintain. A partial is simply a sass file named with a leading underscore. So the
underscore lets sass know that the file is only a partial, and that it should not generate a CSS
file. So the compiler is going to ignore those files that begin with an underscore. So let's
create a partial here, make sure that you're in your SCSS folder. And we'll create a new file,
and we're going to name it underscore recettes dot SCSS. All right now in this resets file,
we're just going to include our normal resets. So we will do a box sizing of border box margin,
zero, and padding of zero. All right, just some normal resets there, I'm going to save that. And
then in our main CSS, we'll want to include them at the top here, because generally, we'll have our
resets at the top. So to include that, we will use an app import. And then we will indicate
the name. So notice here that we don't have to put the underscore or the extension. So now if
I save this, and we look at our main CSS, it has compiled our resets into our main CSS from the
partial. And also notice that the vendor prefixes are automatically added by the compiler. So what
we could also do is we could create another file here, and we could name it underscore variables,
that SCSS. And then in our variables, we could take all of these, and we'll put them into
our variables partial. And I'll save that and then I'm going to use Alt Shift Down arrow to
duplicate that and will include our variables. So now if I save that, you'll see that the variables
are still working. So by using partials, we could separate major components into partials. And this
is especially helpful when working with a team on large projects, we can break up the components and
work on them individually. Alright, so now let's talk about functions. So if you're familiar with
JavaScript functions in sass are very similar. So to create a function, we'll put it here at the top
and we're gonna say at function to define that this is a function and then we will name it so
this this map gets In the font weights down here, it's a bit much it's kind of ugly, we can shorten
that up, especially if we're going to be using it all over our CSS. So we're going to create
a function that is called weights. And then we're going to open parentheses. And we're going to put
an argument in here, we're going to put a variable of weight name. And then we're going to open it
with curly braces. And within the function, we're going to return. And we're going to use map gets.
And we're going to target the font weights. And the key is going to be our weights name. So this
variable here is going to be passed within our sass file whenever we call it. So instead of map
get down here, we're going to use the function name weights. And within that, we'll pass it
the weight name that we're looking for. And if we change this to regular, it would return the
regular weight. So let me save this. And we'll go to our CSS. Now we're looking for the font weight,
let's see what it what it is font weight of 400. Right. So that's our regular font. If I go back
here and change it back to bold, and we check our compiled CSS. Now it's 700. Right now we'll
move on to mix ins. And so mix ins are similar to functions. So to demonstrate this, let's add some
more HTML markup. So I'm going to just duplicate this, this paragraph here, when you use Alt,
Shift Down Arrow, create another paragraph. And I'm going to save that, then back in our sass file
in the main here. Let's say we want to display this as flex. And we want to justify the content
center and align items center. If you haven't learned CSS Flexbox and CSS Grid, I have videos on
those as well. I'll put links in the description below. Let me save this. And let's switch over to
our website. And we see now that our paragraphs are side by side, because we define them as flex,
by default, that is going to flex to a row, go back to our code here. And let's just say that
we have many of these flex boxes that we need to create. And we don't want to type display flex and
justify content and align items a million times. So we'll go up here, and we're going to create a
mixin. So at symbol mixin. And we're going to name this and we'll name it, flex center. And
then within flex center, we're going to put all of this content that we don't want to repeatedly type
in now within main, instead of typing all of that, we will include the mixin. So at include, and then
flex center, just like that. Now I'll save that, and let's check out our CSS. And in our main,
we've got all of our flex. And again, it's added all of the vendor prefixes as well. Now similar to
functions, we could also pass an argument into a mixin. So let's say we want to pass it direction.
And then we could define flex direction, as direction. So now instead of including flex
center, we're going to also include an argument here, and by default, it is a row. So let's, let's
define it as column. And I'm going to save that and let's go back to our website. And now you'll
see that they are in a column and not a row. And of course, if I change this to row and save it,
and now you'll see they're in a row, or so mixins and functions are very similar, but just remember
that functions should be used to compute values and return values. mixins should define styles.
Another example of a mixin is choosing between a light and dark theme. So by default, right now,
our website is a dark theme. So we could add a mixin and we'll name it theme. And we're going to
pass it a boolean value. So we can assign Boolean values to variables. So we will say light theme
and by default, we're going to set it to true So now, again, if you're familiar with JavaScript,
we can in sass, we can use if statements. So we're going to say if light theme. So that
means if light theme is true, then we're going to set background. Currently background is set
to primary color. But what we're going to do is we're going to wrap this in a light, and then we
can tell it how much to lighten up by we're going to say 100%. So it's basically going to invert the
color. And then we will need to set the color as well. Currently, that set to the text color,
the text color is white by default, so we're going to need to do the opposite. So we're
going to darken the text, color. And we're going to do that by 100%. Alright, so now to use this,
we're going to create a let's go down here at the bottom, and we're going to create a Lites
class. And we're going to include our theme, we're going to pass it that variable. So light theme,
true. I don't have to actually type this light theme, I could just say true. This makes it a
little bit more identifiable. Alright, so let's save this. And now we need to add this class
somewhere. So let's just, let's just add it to the body for now. Class of light, save that. And now
let's go to our website. Now we have a light theme. And so now if we change this to false,
let's see what happens. It's still a dark theme. Even though we have the class of lights on body,
it's still a dark theme. How is that possible? So let's look at our main CSS, we've got our body
here, remain over main paragraphs. But there's no light theme here. Go back to our SCSS. And we've
got it included here. Well, we've included the theme, and we've said false. So if we go up here
to theme, so if it's true, it's going to add these CSS styles to the light class. If it's false,
it's not going to add anything. So that means the light class is empty. So when the compiler runs,
if it finds a definition that's empty, it's just not going to include it in the CSS at
all. Alright, so if I go back here, and I change this back to true, let's look at the compiled CSS.
And now we have our light class, right back in our main sass file. mixins are pretty cool. So
I'm going to show you one more mixin. This one has to do with media query. So we're going to create a
mixin. And we're going to call it mobile. And then we're going to use a media query. So just a normal
CSS media query, we're going to say max width of, let's just say 800 pixels. And then in here,
we want to include content. So this content will be passed when the mixin is called. Now what we
also could do, instead of defining this, this width here, we could actually use a variable and
it would be better to use a variable because if we ever wanted to change, it would be easy to change.
So we're going to create a variable here called mobile. And we will just set that to 800 pixels.
And then back here in our sass file, instead of putting the value there of 800 pixels, we'll just
include the mobile variable. Alright, so now let's see, what did I miss here content? There
we go. Now to include this, let's say if the width gets below 800 pixels, we're going to want that to
change to a column. Alright, so here within main, so here, we're going to include our mixin include,
and then that is going to be mobile, and then within this, basically view this as your media
query. So what do you want it to do when it's below 800 pixels? So we're going to say, flex
direction, column. Right, let me save that. And I'll switch to the website. Alright, so let's make
this smaller And there you go. Once we get below 800 pixels, it changes to a column. Right and then
move it back over, it's back to a row. Right. And then if we ever need to change the width, we have
the variables here where we can change our widths. Alright, so now let's talk about extensions. So
we can extend an element. And so the element that we extend it to would then inherit all the styles
from the selected element. So to demonstrate that, let's go to our HTML, we'll change the classes to
paragraph one and paragraph two. Alright, so now here, we will change this to paragraph one. And
so let's say that we want to extend all of the styles of paragraph one, on to paragraph two,
we want them to look the same, but we just want to change one or two things on paragraph two.
And we don't want to have to retype all of the styles on both paragraphs. So we could do this,
we have to interpolate again, the ampersand. And then we'll do paragraph two. And then here,
we could extend main paragraph one. And we'll save that switch. And now they're both identical just
as they were before. But now we want to make a change to this paragraph. So we've extended all
of the same properties. But let's say we want to, we'll use hover again. And this time, we'll change
the color to our accent color. Right, and so now, we have our accent color. So if there was a bunch
of styles here in paragraph one, and we didn't want to retype everything, we could just extend
from that class on to this class. The last thing that we're going to look at is operations. So,
addition, subtraction, multiplication, division. So in normal CSS, we could do calc. And then I
don't know why we'd want to do this. But if for some reason we wanted to subtract 40%. That would
work just fine. But in SAS, we don't need the calculation. And it will work just like this.
We'll hit save, go back in just the same. Now one thing to note, with the normal CSS calculation,
I could do minus 400 pixels. And see this will work just fine. But with sass,
we can't mix types. So the operation has to be of the same type. So if we're using percentage,
they all have to be percentage, or they all have to be pixels. So now let's see what that looks
like in the CSS. So we have 80% minus 40%. So now we just have the result of that, which is 40%. So
if we so if we use the normal CSS calc, let's look at what the compiled CSS looks like. So it's gonna
go ahead and pass that entire calculation into our normal compiled CSS. Alright, so that's pretty
much the basics of sass. So if you want to learn more, you can look at the documentation on sass,
dash lang.com. sass is very powerful. And once you get the hang of it, it's hard to go back to normal
CSS. Alright, now let's look at a real world example. So this is what we're going to build. A
portfolio website has this cool animated menu and several pages in the menu along with the entire
website is responsive. And we're going to take a mobile first approach when we build this. So here,
I've got VS code open, and I've created a project folder on my computer and then I opened it in VS
code. And all that I've done so far is I created a dist folder, along with an image folder,
and I just brought in the images that we'll be using in this project. I will have a link in the
description below so that you can download the project files as well. So in the dist folder,
let's start out by creating an index that HTML file. I'm going to close the sidebar by pressing
Ctrl B. And now let's start with our HTML markup. So we use Emmet exclamation, enter. That gives us
a boilerplate and let's title this and we'll just go with Mike's With a portfolio we're also going
to add our style sheet, which will be created for us from our sass. So we'll add a link. And we'll
set that to CSS, main dot CSS, and the body here, we're going to start out with a header. And then
we'll create a div with the class of menu button. And then within here, we'll create a span with the
class of menu button burger. So the menu button is going to be pure CSS, we're not going to use any
images or fonts for that. Within the header, let's create a nav, we'll have a class on that of nav.
And then we'll create our menu items. So we'll have a ul with the class of menu nav. And then our
allies will have a class of menu nav item. Right now, we'll have a link with the class of menu nav
link. And that is going to go so our first one will be home. So that's index dot HTML. And we'll
name that one home. Alright, so now we're going to take this Li and we're going to duplicate it
down three times. So Alt Shift Down Arrow, 123. So in our home, this is the page that we're on right
now. So we're going to set this Li to active. And then the next one will be our about. So we'll say
about me. And the next one is our projects will say my projects. And the last one is our contact.
And I will say contact me. Right, I think that's it for the header. Let's go to our main section
now. Alright, we're going to start with a main tag. And then we'll have a section. And we'll
have a class of home. And then we'll create an h2. And in here, we'll say I, my name is then an h1
with the class of home name. Then here, we'll put the name so Mike. And then we're going to have a
span with the class of home name, last name here, we'll put the last name Smith. And then we'll have
an h2. And this will be his titles. Web developer, designer, and programmer. Right now we're going to
add our social icons, we're actually going to put that in our sections still. So we'll add a
div with the class of social icons, and then a link. And that's not going to go anywhere. And
then we'll add the icon. So we're gonna use, we're gonna use Font Awesome, and I'll show you how to
set that up in just a minute. So we're going to use an icon with the class of FA be in another
class of fa, Twitter. And we're also going to add a class of FA times two. Right? And then
let's take these three lines and copy that down. three more times. And then we'll change Twitter,
to Facebook, Instagram and GitHub. Right. And then after that, one last thing is footer. And that's
just going to contain our copyright. So we'll do a present copy for the copyright symbol, and then
copy, right? Whatever you current year is, we're going to have some basic JavaScript, we're going
to include a script with a source, and the source will be j s, main dot j s. Alright, I think that
is it for the markup. So let's look at the Font Awesome, we also have to add something here for
that. Alright, so this is Font Awesome website. And they recently changed things up a little bit,
you actually have to sign up for a free account. So I've already logged in. And I'm just going to
go to my kits. And here's the kit that I have. And so what we need to do is to copy this script and
put that into our HTML files. So I'm just going to hit copy code. And then we will put that here.
Alright, so I think that is it for the index dot HTML. Let's go ahead and save this. And we'll see
what this looks like. So I have have live server installed. So if you just right click here,
you can say, open with live server, or you can see there's some shortcut here. You can see that that
looks pretty ugly. There's no CSS. So okay, so let's start with our SAS going to open the sidebar
by pressing Ctrl V. And then make sure that you're in the root and create a folder SCSS. Then within
SCSS, we're going to create a file of main dot s CSS. And we're actually going to start with let's
create another file. And we'll name it underscore config, dot SCSS. So that's going to be a partial.
And we're actually going to create partials for all of our elements. In a large project, that's
what you would do, you would separate everything into partials. And this isn't a large project,
but we're going to go through that workflow so that you can see it. Let me close the sidebar
here. Ctrl B, in our config, we're going to have our variables. So we'll have a primary color. And
that's going to be a dark gray. And then we'll have our secondary color. And that will be an
orange. And then we'll put our resets in here. So box sizing, border box, margin, zero, and
padding zero, just some standard resets. All right, I'm gonna save that in, then we'll go to
our main CSS. And the first thing we need to do is import that config. So we'll say import config, we
don't have to put the underscore or the extension. Alright, first, let's look at the body. And we're
going to set the background to the primary color. And then we'll set the text color. For now we'll
just set that to a white, we're going to come back to that in a minute. The height will be 100 Vh. So
100 view height view, view that as a percentage. So basically, it's 100% of the available viewport
height, we're gonna change the font family, like the sagoo. And we're going to set the line height
to one. All right, now, we're going to target our h1, h2 and h3. And I want the font weights
of those to be a little bit less, more normal 400. And then we've got some links in here. So
we're going to target all of the links globally. And we're going to set the color to white for
now. And the text decoration to none. Right and then let's look at our header. So for the header,
we want it to have a position of fixed. We need it to always be on top of everything else. So
we're going to set a z index up to a width of 100% And padding of one rim. So if you're unfamiliar
with REM and M units, so REM units are based on the font size of the body, so the default font
size of the body is 16 pixels. And so one, one rim would be one times 16. Two REM would be two times
16. So that would be 32 pixels. If we change the font size of the body to 20 pixels, then
one REM would be 20 pixels and two REM would be 40 pixels, m m is pretty much the same thing. Except
it's not based on the font size of the body, it's based on the font size of the parent. All right,
so now let's go to our z main, target the main here, and we'll set a height of 100% and a width
of 100%. And then we'll start doing some nesting. Let's target our social icons. For the for those,
I want them to be position fixed with a bottom. So from the bottom, one rim, and from the left,
one rim. Within the icons, there are links. So let's target those. We want a padding on those
of 0.4 rim and then on hover, we're going to change the color, we'll set that to our
secondary color. Lastly, we'll target our footer. And we will set the font size on there to one rim.
We're gonna set a fixed position on this as well, because we're going to, we want that to be at the
bottom say bottom point forum. Then, right one room, do a text align right? Having a one realm
and we'll set the color on that to white for now. So before we save this and load it, we actually
have to initialize our sass extension. So we're running the live sass compiler extension. So what
we'll do is we'll hit watch sass, if you don't have VS code set up, I've got a video with a web
dev setup where we walk through the installation of these extensions on the hit watch SAS.
And it opens up an output here, and it's watching and it is compiling our CSS every
time that we hit save and automatically updated with live server. We go to our files here,
we can see that it created a CSS directory and we have our main CSS here. Alright, so that is still
not looking great. Let's look at some CSS that is directly applicable to the home page. So what
we're going to do is we're going to create in the CSS folder, we're going to create a new partial,
and we'll name it home that SCSS. Alright, and so in here, we're going to target our home class.
And we're going to set the height to 100%. Put a padding on the top of 40 Vh. So again, let's view
that as a percentage 40% of the available viewport height, I'm going to set the overflow to hidden.
We don't want any scroll bars on the homepage, it should always fit. We're going to align items
to the center. And we'll do a text align center. And then let's set our background. So we're gonna
have that picture that is URL. We need to go up one level, so dot dot slash image slash and then
it was modeled dash one dot jpg. And then we're going to set a background size to cover. Alright,
let's just save that and see what we have so far. Oh, and we have to go back to our
main and we have to import that home. So import home. Save. Alright, so I think the images here
it's just let's expand this. Yep. So the image is actually there. It's just not positioned properly,
yet. So what we're going to do back in our home on the background, we're also going to set some
positioning. So we're going to say center top. That's a little bit better. Now the image is too,
too bright, it's too white. So we're going to put an overlay on top of it. And there's several ways
to do that, you could use HTML markup, and then target that and create an overlay. That way,
you could use pseudo elements. But we're actually going to do it right here in the background. So
we're going to add a linear gradient, and then we're going to say, We want the gradient to go to
the right. And then we put in our colors, so we're going to use RGBA. And then that takes the first
part of it takes your color, so we're going to set primary color, really use that variable, and then
we will set this 2.9 opacity. And then we'll do another RGBA for the second gradient value, again,
primary color. And we could do point nine again and have it the same across, but we're going to
set the right side of it 2.3 then we need a comma here. All right, let me save this. There, that
looks a lot better. Make sure that you're still within the home class. And now we're going to
target our underscore name. So this is going to be the home underscore name. The ampersand remember,
and present always refers to the parent. So it's the same as typing dot home underscore name. Okay,
so in here, we're gonna set our font size to five rim, we'll set the padding on the bottom to one
rim margin on top of one rim. And we're going to set a border on the bottom. And we'll set that to
two pixels solid. And for now, we're going to set this to white. And then within that name,
remember, we have a span that goes around the last name. And so that was present, which is going to
be the same as dot home underscore name, dash dash last. And we're going to set the color on here to
the secondary color. And the font weights, we're gonna increase that one up to 700. All right,
let's save this. Now it's looking pretty good. Alright, so when we're hovering over these icons,
the color just kind of pops right in. So I'm going to add a bit of a transition to that.
So back in our config, let's add a mixin. So at symbol mixin, we'll name this transition
ease. In then we will set a transition. It will set all point O five seconds, is in out. Okay,
so normally on transition, I would target what we're trying to transition is the color is the
position, what is it? Here, we want to reuse this. So when I include this mixin, I want it to target
any transition that it can set it to a point five or half a second ease in and out. Alright, so let
me save this. Let's go to our main. And we had a hover in our social icons right here. Alright, and
so let's add the transition on the link. So we'll do to include the mixin we do include, and then
the Nixon name, transition ease. Great, let's save this. And let's hover over them. You see that it's
slowly changing the color is now let's look here at our colors, we have it set to white, but in our
config, we have the ability to change the primary and secondary color. So if we change the primary
color to white, then you won't be able to see the text. So what we're going to do in our config is
we're going to create a function that is going to give us an appropriate color for our text. So
to create a function, we'll do add function. And this is a lot like a JavaScript function if you're
familiar with JavaScript, so we're going to set this to set text color We're going to pass it a
variable of color. And then we're going to use an if statement. So we're going to say at symbol if,
and then lightness, we're going to evaluate the lightness of the color that we're passing it. So
if the lightness is greater than 40%, then we're going to return we'll just we'll set
this to black. Alright, so if the lightness is greater than 40%, so it means it's a light color,
then we want to return a dark color, so black, and then we'll do else. So if it is a dark color,
we want to return white. Right, so now we can use this function, instead of declaring the
color. Go back to our main here. So instead of white, we're going to call set, text color. And
then we're going to pass it our primary color. So it's going to evaluate this primary color,
which is dark. And it's going to return us the white value. So anywhere else that we have the
color set, we can swap that out. So say set text color, primary color. Let's see, did we set that
anywhere else? I think there was one other spots. Yep, on the footer. So set text color. Primary,
there we go. We'll save that. Nothing's going to change obviously. In, up, so we also had it here
on our border. So this line that goes across in the middle here, we're going to set that as well
set text color primary. I think we're good there. Okay, so everything is looking pretty good, except
for our menu, of course. So let's start to let's let's get to work on our menu. So let me open up
the sidebar here. And we're going to create a new partial. So underscore menu, dot SCSS. And close
the sidebar. And let's see, first we'll target the menu button. We're going to set that to a
position of absolute. Set the Z index here to one, right, one room and top one room. Okay, so we're
going to absolutely position this. So we want this in the top right corner, we'll set the height to
20 pixels, and the width to 28 pixels. And when we hover over this, we want a cursor pointer. And
we're going to include our transition mixin. So include transition is because we're going to be
adding some transition animation to this. Alright, so within the menu button, we have our menu button
burger, so we can do ampersand underscore burger. And this one, we will again position absolute
we're going to say that this one would be right zero, and top is going to be point five rim the
width of 28 pixels. Height of three pixels in the background will be our set text color. And that's
going to be our primary color. And again, we're going to include on this one, our ease transition.
Alright, so let's save this and see what we have. And actually we have to remember back in our main,
we have to include this. So import that was menu. Right and so now we have a line. So that's just
one line in so again, let's look at the HTML. So the menu button is basically a wrapper,
and we're using this we're going to be using this as our click event. Within the menu button. We're
going to have our bars For the hamburger, we just configured the middle bar. And so we set it to 28
pixels wide, three pixels high, and the background color is going to be the text color, which is
going to be white. And so now what we're going to do to create the other two bars is we're going to
use pseudo elements. So within the burger, so we're going to use ampersand before. And with
a pseudo element, we have our content, we'll set that to nothing. We have a position of absolute
is that the top two negative eight pixels, so we want it to move up eight pixels from its initial
position. And the width will be 28 pixels. Height of three pixels. Background color will be the set
text color. And we're going to also include or ease transition. Okay, and now let's save that.
And now we have our top bar. Right. And so now to add the bottom bar, we're within the burger class
still. So we're going to use ampersand after. And we're basically going going to do the same
thing. So I'm just going to copy this. And then instead of eight pixels up, we want to go eight
pixels down. And I want the bottom bar to be not the same width. So set that to 20. All right,
and then let's save that. There we go. So now we have our menu button. Okay, so now on the menu
button, we're going to have it animate a bit. So again, still within the burger through JavaScript,
we're going to assign it an open class. So when the open class gets applied to the menu,
we want it to transform. And we're going to rotate 720 degrees. And then we're going to
set background to transparent. Let's save this for now. And we'll come back to it. Let's go
ahead and look at the JavaScript. So let me open up the sidebar. And in our distribution folder,
let's create another folder named j s. And then within j s, let's create a file,
rename that main dot j s. Alright, and close. The sidebar, we'll start by targeting are DOM
elements. So we'll set some constants here, we're going to set the menu button. We'll use document
dot query selector. And then here we can query by tag or by ID, or by class. So was we'll use
class here and menu button was the class. Right, and we'll create another constant of
hamburger. So the menu button again, that's the basically the wrapper, and then the hamburger is
our span. So we'll do document query selector. And that was menu menu button for burger. Okay,
so then we're going to create a variable called show menu, we're going to set that to false. So
initially, the menu is not shown. Then we will add an event listener to the menu button. We're going
to listen for the click event. And then we will toggle menu we'll call this function that we're
going to create here. So we're going to create a function called toggle menu. And so we'll start by
saying if not show menu. So the exclamation is a NOT operator. So if show menu is false, then we're
going to get that hamburger class and we're going to target the class list and we're going to add
Open. So we're going to say that it's now open, then we'll need to set our show menu to true. So
now we know that the menu is open, and then we'll put our else statement. So if the menu is open,
we want to do the opposite, right? So hamburger, class list, remove, open. So just the opposite.
And then we're also going to want to set our show menu, back to false. Alright, so that's it for the
JavaScript for now, add a few more lines in a minute. But let's save this and let's see what
it does. So there we go, it rotates and the middle line becomes transparent. So if I click it again,
it should go back to normal. There we go. So that is the first part. So the goal is to make
that turn into an X. So now what we'll do here is in our open class, we're now going to target our
pseudo elements. So we'll do ampersand before. So this is targeting that top, that top bar,
and we're going to set the Transform, rotate to 45 degrees. And we're also going to add a translate,
translate moves it in the first value is going to be your x or your horizontal position. So we want
to move it five pixels over. And then the second value is your y or your vertical. So we want to
move it down eight pixels. Alright, let's just let's save that and see what we have so far. There
we go. That's part of our x right there. Okay, so now let's target our after. So and present. After
that's going to be the bottom line. Now remember, the bottom line was a bit shorter,
so we need to actually change that. So we'll say width 28 pixels make it the same as the top now.
And then we will add our transform with a rotate of this time will be a negative 45 degrees to make
that other side of the x. And then we will translate this one to three pixels over and
negative seven pixels. So move it up a bit. And I had to play around with these numbers to get
it to work just right, but this is what I came up with. So let's save that. And now when I click it,
we should have an x There we go. Alright, pretty cool. Okay, so now we want to show the menu.
Alright, so for the menu, let's target the nav. And on that we want the position to be fixed in
the top of zero, and a left of zero width of 100 view width. So with with view width is the same as
view height. So 100 would be like saying 100% of the available viewport width, we're going to set
the opacity to point nine, eight. So just want to see a little bit behind it. And initially we're
going to set the visibility to hidden. Okay, so within the nav, we're going to do the same thing
in JavaScript and we're going to add a class to it. So it's gonna be the same thing. We're going
to do the ampersand, so it's mean nav dot open. And then if it is open, we want to change the
visibility to visible still within the nav, let's target our menu nav. Right and then then the main
menu nav, we have our menu items the home about me my projects contact me. So we're going to display
those as flex. And then we're going to see if flex flow we'll set that to column. And then
if for some reason we have a weird device height, we'll set this to wrap. We're going to align items
center, justify content center. We want the height to be 100 view height overflow hidden. We don't
want any scroll bars ever on our menu. We're gonna set the background to the primary color will do
the list style. So let's get rid of those. Those bullet points, let's do a padding on the right to
see one rim, and then we'll do a transform and translate actually rindu translate y,
we'll set this to a negative 100%. And we're going to include our ease mixin. Alright,
so what this is doing, if you're not familiar with Flexbox, I have a video on that as well and check
it out at my channel. So what we're going to do on the menu is we have it, translate y, so that is
going to be your vertical, and we have it set to a negative 100%. So that means the position of the
menu is going to start off the page at the top. And when we click the button, we want it to come
in from the top. So what we'll do here is within our menu nav, when the menu nav gets assigned the
open class, then we want to transform, translate y to zero, so the initial position, and we're
going to need to go into our JavaScript and add some more lines here. So we need to also target
our nav. So that is going to be document, query selector. And then we will also need our menu nav,
which is the UL, that was menu. Alright, so we have those. And so now we're going to do the same
thing in here. We'll take our nav, class list, add, open. And then our menu nav, class list,
add, open. Alright, so I'm just going to take these, copy them down here, and we're
going to change add to remove Ctrl D to select multiple of the same. So if I highlight, remove,
I can control D and select all three of them have three cursors. That's a good, good little shortcut
to learn. That's it for the JavaScript for now. Let's save that. And let's see what we have. So
now you see that the menu items are gone. So now when we click on this, there we go. Now we need
to format our actual links here. So let's go back to our menu sets. Okay, so still within our menu,
now, we're going to see it was menu nav underscore item. So we're going to target each item,
the menu itself is coming down from the top, we want the menu items to come in from the right,
so we're going to transform translate x this time, so x is your horizontal, and the initial value is
going to be 100 view width. So we want the links to be all the way off the right side of the page,
we're going to include our transition mixin. And then in JavaScript, we're going to add the open
class just like we did on the others. And when it's open, we want to transform translate x to
the initial position, so that we'll bring them in from the right, we're also going to add an active
class to our menu items. And then we're going to target the a the link within and we want to set
the color on that to the secondary, the secondary color. And so that's just going to highlight
which page you're currently on. And then in the JavaScript, we have a couple more lines to add.
Alright, we're going to add a constant here of nav items. And we're do documents and we can't do
query selector because that selects one element. So we're going to use query selector all and we're
going to get an array of elements here. And that is menu nav item Right, and so then down here, we
need to add that or we need to add that open class to these. So what we'll do is we'll do nav items.
And we'll use a high order array function will do for each, we're going to use an arrow function
here. So we're going to loop through the items, and we're going to pull each time we're going to
pull one item out. And so in the function, we'll say item dot class list, dot add, open. Alright,
so we'll do the same thing down here. Except instead of adding, we're going to remove, right,
and that should be everything for the JavaScript. Now there's nothing else that we're going to add
in here. So let's see what that does now. All right, they came in, if you can barely see it,
they come in pretty quickly from the right, but at the same time, that the menu is coming down,
so it's not very noticeable. So let's add some more sass to our menu. Alright, so now make sure
that you are within the menu nav still. Right, and we're going to use ampersand links is going to be
a menu nav link, we want to display these inline block, we're going to do a font size of two REM
text transform to uppercase. padding, top and bottom of two REM zero left and right
font weights of 300. And we're going to include our ease transition. And then on hover roids do
a color of secondary color. Right, let's save that. Let's see what we have now.
It looks pretty good. But see they're coming in all at the same time. And a coming in too quickly.
It's going to our menu sass. And then all the way at the bottom, we're going to include a for loop.
So very similar to JavaScript. If you're familiar with that at four, then we're going to declare
a variable of I. And we're going to say from one through four, because we have four links. Alright,
so now we're going to target our menu, menu nav, item, and we're going to target the nth child. And
we can't just put the variable in here you see how it's highlighting red, it's telling us that
you can't do that within a function. So we need to wrap this with dollar sign curly braces. So
now we've targeted the nth child. So this is going to iterate through the links. So the initial one
is going to target the first link, then it's going to count up one. So that would be the second week,
the third link the fourth link. So on each link, we're going to do a transition delay. And in here,
we can use the variable as it is. So we're going to do the variable times 0.1 seconds. And then
we're going to add to that 0.15 seconds. And this is a complicated formula formula, but it's what I
came up with. Alright, so it's going to iterate through each one, and it's going to add a delay
to each one so they should stagger in. Alright, let's save that. And now let's see what we have.
There we go. Alright, so let's look something is a little bit off here. Let me go. Yeah, okay,
actually here in the home menu, the margin bottom, or the margin should be margin bottom. On the name
that's a little bit off right there. So let's save that. There we go. That looks much better.
So that's gonna be it for the homepage. So now let's look at the about page. So let me open the
sidebar here. And in the distribution folder, we want to add a file about the HTML. And let's go
ahead and add the sass file for that as well. We'll add the partial underscore About SCSS,
close the sidebar, let me close some of these, we don't need the JavaScript anymore. We shouldn't
need the menu. Alright, so let's start with the HTML markup, we're just going to begin with the
index dot HTML. We'll copy everything from there, paste it into about. And let's say about Mike
Smith. All right, the menu then now let's take the active off of the home. And we'll put it on the
about. And then let's look at our section here. Let's change this to about, then this first part
of the section here, let's delete. And we'll add a div about bio image. And then within here, we'll
have an h2 with the class of text, secondary. And we'll say bio. So we're going to add a class here,
text secondary. So this will be a reusable class, anything that we put it on will have the secondary
color. So let's go ahead and do that go to our main sass file. And we'll just put it right here.
Text secondary. And this is just going to change the color to the secondary color. Right, and let's
go ahead while we're in here, let's add our about sass partial. written here, let's add a paragraph
and we'll add some Lorem in here. 30. Now under this, we're gonna have some jobs almost like a
small resume, we'll add a div with the class of jobs. Another div jobs. Job. So each job. So the
first one, I will say we'll put an h2, the class of text secondary. And let's say 2017 to current,
and then we'll do it h. h three will say that he works for Google. And then an H six is position,
full stack developer, and then we'll add a paragraph with some more Lorem. I'll put 20
on there. Let's take this job here. And let's duplicate it two more times. So Alt Shift down,
one, two. All right, so let's change this one, to 2015 to 2017. And let's say that was
Microsoft. And let's see, front end developer. And the last one here, we'll say 2012. To 2015.
We'll just make something up web design Co. And we'll say graphic designer. All right,
then everything else we want the social icons, we want the footer, everything else is the same.
Okay, so let's got all that. Yep, let's save this. Let's go into our sass file. Alright,
we'll start with our about class. Let's add a padding on here to the bottom, we'll add to rim
and then within here we have our about bio image. Here we'll set the height to 50 view height,
the width will be 100%. And then we're going to do the same thing with background that we
did in the home page here. So I'm going to copy this and paste that there. I think then on here,
we'll have a will display as flex. And we'll set the flex direction to column, align items center
and then justify content we're going to use flex and K now still within our about let's target the
paragraph. That's the bio paragraph We'll set a margin. On the bottom there have to ram. Right,
let's just see what we have so far. We'll save that. All right, we'll go to about me,
it's already looking pretty good. So we set the view height to 50%. We've got the image
back there with the overlay, we've got the title here, and the paragraph displaying is flex, set
it to a column. And so that we can align center and then flex to the end. We still got a bit more
to do here, we put that this, why does that say block end, margin bottom. Alright, so we put this
two rim margin on the bottom, so it wouldn't go all the way to the, to the edge. Actually, here,
this paragraph should have been here, so we have to be careful with nesting. nesting too much can
become an issue. Didn't want to target all the paragraphs. So actually miss something here,
we forgot to wrap this, we needed to wrap this in in about bio. Alright, so now let's target
or I'm still within the about, we'll start at the about veyo. We'll set the width here to 80%. And
then text align, center. And then I want to target the text secondary. So that's the heading, I could
just target the heading directly. There's many different ways of doing things. But we're just
targeting the text secondary, and I want to add a padding on that on the bottom of one rim. Alright,
let's check that out. There. That's looking good. Alright, so now let's style our jobs. So still,
within about we'll go to jobs. And then within there, let's set the width to 60 view width. So
60% of the view width of set a margin on here of two rim top, auto right, zero on the bottom on the
left, we're going to display this as grid, we'll set the grid template columns to initially one
fractional unit, and then the grid gap will set to two. So if you're not familiar with CSS Grid,
I have a video on that as well check that out in my channel. Alright, let's see what we have so
far. All right, looking better. Now within jobs. We have jobs job. So each job we're going to have
a background. And we're going to lights and so we're going to use the primary color. And we're
going to lighten it by 10%. And then we want a padding, we'll add point five REM all around,
and then a border bottom we'll do five pixels, solid and secondary color. Alright, that's
looking good. Um, everything's a little squished together. So within the job here, let's just go
ahead and target the headings directly, we'll say h two and H three. We'll set those to a margin,
top and bottom of point five rim and zero left and right. On the H six. I'm going to set the top and
bottom a little bit less. So let's go point three, zero and left and right. There we go. That looks
pretty good. Alright, so now notice, the social icons and the copyright are getting in the way a
bit. All right, so let's go down here still within about let's target our social icons. And this time
we were going to display these as flex and we want to set the flex direction to column. Alright, so
now they're out of the way that looks good. And we need to do something with the footer now. So let's
target the footer and we're going to transform will Start by rotating it, and we're going to
rotate it 90 degrees. And we're going to translate or move it. The X value will be a negative three,
rim and the y value will be a negative five rounds, I had to play around with these numbers
as well. So there you go, we flipped, flipped it up and put it on its side. Now it's out of the
way as well. All right, so that is it for this page, we'll get into the responsiveness once
we're finished with all of our pages. Alright, so now let's move on to our projects page. So let me
open the sidebar. And in this, let's add another file. And this is going to be projects dot html.
And then let's go ahead and add our sass file as well, the partial underscore projects,
dot SCSS. Alright, close the sidebar. And now, what we'll do here is let's just use the about
let's copy everything from there into projects, and then we'll modify it. Alright, so we'll say
Mike Smith projects. And let's take the active here, and let's put it on the projects link.
Alright, so let's rename this to projects. And I'm actually going to have the image in here as well.
So let's rename this to projects, bio image. And then within the bio image, I will delete this will
add an h1 with a text, secondary class, and we'll say my projects. Alright, and then let's get rid
of the jobs here. Alright, so now here, let's put a div with the class of projects. items should be
projects, projects, items, and then projects, item items and then item, this time we're going to use
an image. And the source is going to be image and then project one. For the alt, so I'll just
put my projects right under this, we're going to have a div with the class of projects, projects,
buttons. Alright, so we're gonna have an overlay over these, and there's going to be some buttons
within the overlay. So in here, let's add a link, the class of projects button. And that's just not
that's not going to go anywhere. And then we'll put an icon here. And it's going to be FA s, fa,
I, oops, not gas, fa s. Alright, and then after that, let's say, preview, right, and then let's
take this link, and we're going to Alt Shift Down Arrow, copy it, we want two links here.
This one is going to be instead of I it's going to be GitHub. And actually he says as a brand,
we have to change it to FA B for brand. And let's change this to GitHub. Alright, so that is one
project. So let's highlight this and we're going to duplicate it, we have six total projects. So
we're going to duplicate it five times. I'll Shift Down Arrow 12345. Alright, let's go back up to the
first one. Right, here's the first one. And all we're going to change on these is the the project
image. Everything else will stay the same. So 2345 and six, right and then everything after that the
social icons, the footer, everything else will be the same. So let's save this. Let's go ahead and
check that out. It's going to look up Yeah, okay, can't really tell what's going on there. So let's
go to our sass. And the sass here is going to be pretty close to what's in the about CSS flow
for the most part, the top part anyway, so let's just copy this and we'll make some adjustments.
Alright, so this is going to be projects. padding bottom to ram is good image. This time,
I want it to be 30, view height, background, all of that's good. Flex columns, center flex, and all
of that's good. So here's where things will change up a bit, we'll take the paragraph out where to
target the text secondary, and want the font size to be a bit bigger, set it to two rim and I want
the margin on the bottom to run. Alright, and then we don't need this. Alright, so here, um, a
lot of this is the same. So we'll change jobs to projects, items. So that's the wrapper. Or it's
let's take the, let's take this part out. And then we also have projects item. So on the item,
we're going to set the position to be relative, because we're going to need to absolutely position
other items, we're going to set the border bottom to five pixels solid, and the secondary color. We
want the overflow to be hidden. We'll talk about that in a minute. cursor pointer. Now within here
we have the image. And we want the width on those to be 100%. Right now they're way off
the page. Alright, let's, let's stop there. And let's see what we have. Well, I keep forgetting
in our main sass, we need to import that. So let's import our projects. Save. Oh, that
looks much better. Alright, let's get back over here to our sass file. So that's looking, okay,
we're going to do something with these buttons. Now. Let's go in here, and we're going to create
an overlay. This time, we're going to use a pseudo element. So we're going to use this is the
project's item. And then we'll create an after we have our content, we'll set that to blank position
here is going to be absolute. That's why we have the parent container set to relative. Alright,
we're going to initially set the top at 100%. So that is going to push it all the way to the bottom
initially is going to be under its element. And so that's the reason why we set the overflow to
hidden that way we don't see it, because when we hover we want it to pull up from the bottom right,
we're gonna set left to zero, set the height to 100% and the width to 100%. We're gonna set the
background to the secondary color, and opacity initially, initially is going to be zero. And
let's include our transition. Alright, that's looking good. No, that's really not going to do
anything. And we'll save it, you'll see, it really looks the same because that item is hidden. So
let's create a hover event here. So this is going to be the item and present, hover. And what we're
going to do is on hover, we need to target the pseudo element. So that's going to be after we
want the top to be zero instead of 100%. So that's going to put it back where it should go. And the
opacity want to set it 2.09 I just want to barely see through it. All right, so let's save that. Now
if we hover over it, there we go. It comes up from the bottom and becomes visible. Alright, so now we
still have these buttons to deal with. Okay, so this so we're still in the Item. All right. And
what we need is projects buttons. So projects is the main. So we're going to have to come down here
and make sure that we're not under the item we're under the projects. So ampersand buttons, here,
we're going to set a position of absolute. On the top is going to be zero, height of 100%, width of
100%. We set a z index of one, we're going to display these as a grid. So let's do our grid,
template columns. And these will also always be in a two column layout. So we want the preview to
be on the left and GitHub to be on the right. So we're going to use repeat, we're going to
say repeat twice, one fractional unit. So that will make them equal. And we're going to align
items to the center, and text align, center. Okay, let's save that. And now they're there. But I only
want them to pop up when I hover. Let's target the individual buttons now. So projects button. Here,
we're going to set the opacity to zero initially, set the color to the set text, oops,
set text color. Based on the secondary, we want to base it off of the secondary because that's
what's going to be behind it. Right, and then let's include our transition. And now we need a
hover. So can present hover. On hover, I want the text color change. So we're going to say color.
And let's see, we can do can do this. On orange, I think that's going to return a white. But when
I hover over, I wanted to change the black just to show that that I'm hovering over it. And so
I want it to be the opposite. So I know that this is white. So I can kind of a hack. But I can do,
I can wrap that in another set text color. So that's going to set the text color against white,
which is going to be black. Now what we need to do is I want the button to display when I
hover over the project item. So in order to do that, I have to go to the project item here. And
we'll go to our hover event. And after the pseudo element, we'll do projects button, and then we'll
change the opacity to one. All right, let's save that. Let's see what we have. Okay, the hovers not
working. Why is this set to column ruled? color? Sorry about that. All right, let's see. Okay,
it was opposite. Alright. So initially, this is black. We want to hover over to changes to white.
For the social icons in the footer, they're great. We're going to leave them just like that. All
right, that's all looking good. So now let's look at the contacts page. We pull out the sidebar,
and under dist. Let's create contact dot html. Let's go ahead and create our sass partial
underscore contact.sc s s. Right, let's go ahead and in the main let's go ahead and add that before
I forget. And that was contact. Alright, let's just let's use the project's HTML Copy that. We'll
paste that in the contact and we'll say contact Mike Smith. Alright, and then let's change our
active here to our Contact link. Change or section class to contact, and then everything within here,
we can go ahead and remove. So we're going to add an h2 and we're just going to say contact
me. Alright, then let's add a div with the class of contact list. And then we'll add a div with
the class of contact, contact email. Within here, we'll have an icon, fa, S, fa envelope. And then
we'll just say email there. And then we'll have a div with a class of text secondary. Within here,
we'll put the email so we'll just say email, at email. com. Alright, so let's copy this down
twice. Alright, and so we have an email, we also have phone. And that's going to be mobile, Alt,
C phone, and this will just put a number in here. There we go. And then this last one is going to be
address. And for that, we'll use the icon, marker, Alt, to say, we'll say address, and then just put
a generic address 123 First Street, Houston, Texas. All right. Everything else past here,
we're going to keep the same. Right, let's save that. Let's go to the contact page is going to be
ugly. There we go. Alright, so let's go to our contact CSS. So from here, this one's going to be
a lot like home. So let's just copy all of this from home. into here. change this to contact.
Alright, so we're going to have a view height of 100% padding on the top 40 view height. Okay,
so here, we're going to change this, we're going to display this as flex. And we're going to set
the flex direction to column background is good, we're going to use that same thing. Alright. And
so then everything up to this, we can take that out. So here, we're going to target the h2. And
we're going to set the font size to three, REM and margin, bottom to REM. And then we're going
to target the contact contact list. We're going to display this as grid. So get our grid template
columns. And initially it's going to be set to one fractional unit. We want a grid gap to run
and we're gonna change the font oops, and change the font size to 1.5 rim. Right and then yeah,
let's let's save that. See what we have. Alright, that's looking. Okay, so far. Let's see,
I think goodness something here. Flex column. Yeah, we need to align items center. There we
go. So that is all of the pages. Let's go through. We've got our main page here. And then our about
me. And projects looking good. All right, and then the contact. Actually, you know what I want
to do on the contact, I want to change the social icons, I want them to be up here. So right here,
let's do social icons. Let's change the position to initial and we'll set a margin top on there
have to rim. Yeah, I like that better. It's all in the same spot to contact. Next we'll make this
responsive. Alright, let's see what this looks like. Before we make any responsive changes,
actually doesn't look terrible. But obviously, we don't want to have this menu. When we're at this
size. Let's see the other pages. That actually doesn't look terrible either. But we'll make a few
changes here, maybe make this text bigger. Let's check out projects. Oh, yeah, that's, that's too
big. You know, we'll need to adjust that grid. And then we'll make these inline instead of
stacked. Alright. So the first thing that we need to do is we'll go to our config in our sass file,
and we will go and then at the bottom, we're going to include some mixins. So mixin. And we're going
to create a mixin for for some media queries. So we'll start with a medium size. And so we're
going to include in this mixin, a media screen. And we'll put a minimum width of 768. And then
in here, we will put at content. So now when we call this mixin, whatever content will be will get
passed into this media query. All right, so that's for the medium size, let's go ahead and just copy
this down, Alt Shift down, we're going to create two more. So we're going to create a large,
that is going to be 1024 pixels. And then we're going to create an extra large, and that will be
anything over 1600 pixels. Alright, and let's save this. And let's start with, let's just go
back to the homepage here. So what we're going to do is, we're going to create a new sass file. I'm
going to name it underscore responsive, dot SCSS. Alright, and then let's go to our main s CSS, and
let's include that. There we go. Save that. Now in our responsive, we're going to include our media
queries, those mixins. So we're going to include media medium, we'll start with the smaller,
smaller sizes and work our way up. So let's start with the menu. So menu button. At this size,
we want the visibility to be hidden, and then our nav. We want the visibility of this to be visible.
And then within the nav, we have our menu nav. And we need to make some alterations, because we don't
want the full page now to come up, we want a nav bar at the top. So let's change this display here
to block by default, it's fixed. And then we're going to transform and translate. Why? Because
we had that all the way at the top. So now we need to put it back in its place. And then let's set a
height here. To 100% that is available to it. Set the background currently it has the the dark gray
background, the primary color, so we're going to set that to transparent. And then we're going to
text the line to the right. Then within here we have our items. So that is menu nav item. And
we need to display these in line. Right and then we're gonna add a padding on the right of 1.5 rim.
Then we need to target the menu link. Then on the link, we're going to change the font size because
we we made it bigger earlier. So by default, I think it was three REM so we're going to change
it to 1.5 REM let's see what we have so far. We'll save that. Alright, now let's check it out. So
we get over 768 Here we go. Nice. That looks good. All right. Let's See what we need to do
on the about page? I think we'll just make this text a little bit bigger as we go. Yeah. Okay,
so outside of. So we're still inside the media, the medium media query are outside of the nav. So
we're going to add and about bio. And then let's change the font size to 1.5. REM, make it just a
little bit bigger. All right, let's see. That looks good. Yep. All right. Let's look at the
projects. So it's one column they're in, then yeah, we're gonna want to change that. So let's
target projects. And then within the projects, I think it was the bio image. Yeah, the heights on
there? Because let's see when we get. Yeah, let's get a little too close, I think. So let's change
the height. So I think it was 50 initially, so let's go 40 view height. And then projects,
items. Let's change the grid template columns. And we're going to change that to a repeat to have one
fractional unit. Right? And then this, my projects would probably need to increase that a bit. So
that was, so we could target the text secondary. I will change the font size there to three REM.
Right. Let's save that and see what we have. Now that's that looks good. Right. don't think there's
anything? Let's see. Let's go to contacts. Yeah, so let's, let's make this to let's add contacts,
contact lists. And what the grid template columns, and we'll do the repeats to one of our on that
one as well. All right, let's see. Yeah, that's good. All right. So that is on medium screens.
So let's move on to the large screens, a couple of things that we're going to change here. So let's
include that mix in media query. So include media, large, I think projects. Yeah, let's,
let's make projects, let's turn projects into a three column at a large layout. So let's see where
was that? We could take this. paste it here. Get rid of the bio image and close that out and change
this to a three. That should work. Let's say that. All right, medium size to large size three. Yeah,
that's good. All right. And then let's do the same thing for the contact. Let's change that
to three. So I'll just copy this. Put it there and change that to three. Save it. To There
we go. That looks pretty good. It looks good. All right. And then the last part. Let's see,
let's go to projects. So you're right in this area, the image is getting too close. So I want
to increase the height on this on an extra large screen. So let's go to our last mixin. That's the
large media query. So let's include the extra large And so let's hear that was project's bio
image. And then let's change the height to 50 v H. There we go. That looks good. Right? And then,
let's see, we could make this have a fourth column, possibly, but I think it looks good.
So let's go through it real quick. We've got the main screen looks good on a big screen
and go down to a small screen looks good as well, we have our menu, right? Let's go to our about me,
that looks good. Let's go to a larger screen. Now I could take these and turn them into columns as
well. But I like the way that they're stacked because of the years. So current is on top,
and then it goes down. So I'm just gonna leave this as a column, I think it looks better. And
then projects, we already looked at that that looks good. And then contact. So that that looks
good as well. Nice. Alright, so let's talk about deploying this. So we're gonna deploy this today
on GitHub Pages, we could also use natla phi, that's another good one. But I went ahead and
uploaded the project to GitHub. And if you're not familiar with Git and GitHub, I have a video on
that as well, you can check out on my channel, but it's very simple. So I've got this uploaded,
and we're going to go to Settings. And then if you just scroll down to the GitHub Pages portion,
just set this to the master branch. Alright, let's scroll back down. And now it says your
site is ready to be published. So we could set a custom domain if we want. I'm just
gonna leave the default there. So now if we go here, and go to dist, there we go. So this is
live on the internet now. So that's gonna be it for this video. If you stick around
to the end. Thank you for watching. Alright, so before you go, if you'd like this video,
a thumbs up is appreciated. I upload new content every week, so hit subscribe and the bell to get
notified. If you think this video or any of the videos on my channel might be helpful to someone
else, please share them. I'm also on Twitter and Instagram at code stacker. Thanks for watching.