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.
