Sass Tutorial for Beginners - CSS With Superpowers

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.