Coding

Sass Tutorial for Beginners – CSS With Superpowers

  • 00:00:00 hey thanks for checking out this video
  • 00:00:01 we're going to cover the basics of sass
  • 00:00:03 and then we'll create a project from
  • 00:00:05 scratch and deploy it and I'll show you
  • 00:00:07 how you can easily include sass in your
  • 00:00:09 workflow and I want to give a big thanks
  • 00:00:11 to Bo and free code camp torque for
  • 00:00:13 publishing this video free code camp is
  • 00:00:15 an awesome resource and on behalf of the
  • 00:00:17 community thank you for all that you do
  • 00:00:19 so before we get into this video I'd
  • 00:00:21 like to quickly let you know who I am
  • 00:00:22 I'm a husband a father and a programmer
  • 00:00:25 I've got over two decades of IT
  • 00:00:27 experience
  • 00:00:28 I'm a full-stack developer I recently
  • 00:00:30 decided to create a YouTube channel and
  • 00:00:32 initially I just wanted to help people
  • 00:00:34 but after my first couple of videos I
  • 00:00:36 realized that it's actually helping me
  • 00:00:38 to become a better programmer I do
  • 00:00:40 research for every video and a lot of
  • 00:00:41 times I come across things that I didn't
  • 00:00:44 know or a better way of doing things so
  • 00:00:46 I'm learning and teaching at the same
  • 00:00:48 time so win-win so my channel is new but
  • 00:00:50 I upload new videos every week I'd
  • 00:00:52 greatly appreciate it if you check out
  • 00:00:54 my channel and subscribe and that's
  • 00:00:56 enough of this let's get into the video
  • 00:00:57 so we're going to go over the basics of
  • 00:00:59 sass and set up our environment and then
  • 00:01:01 we'll go through a project from
  • 00:01:03 beginning to end using sass there's time
  • 00:01:05 stamps in the description if you'd like
  • 00:01:06 to skip through certain parts so what is
  • 00:01:09 sass
  • 00:01:10 it's a CSS extension language and gives
  • 00:01:13 your CSS superpowers once you see how
  • 00:01:16 easy it is to write and how logical and
  • 00:01:18 organized it can be you'll never write
  • 00:01:20 plain CSS again you'll see what I mean
  • 00:01:23 in a minute let's look at what you need
  • 00:01:25 to write CSS first you'll need a code
  • 00:01:28 editor and I recommend vs code because
  • 00:01:30 it's open-source and has great
  • 00:01:32 extensions and awesome community support
  • 00:01:35 now your browser can't read sass so it
  • 00:01:38 has to be compiled into plain CSS but
  • 00:01:41 don't let that scare you it's easy there
  • 00:01:43 are several ways that we could go about
  • 00:01:44 this we could use nodejs to run a
  • 00:01:47 compiler that will watch our sass files
  • 00:01:50 and compile them automatically for us or
  • 00:01:53 we could use gulp to do the same thing
  • 00:01:55 or we could use an extension in vs code
  • 00:01:58 and for this video that's what we're
  • 00:02:00 going to do we're going to use live sass
  • 00:02:02 compiler another extension that we're
  • 00:02:04 going to use is live server if you're
  • 00:02:07 unfamiliar with vs code and how to set
  • 00:02:09 it up for web development I do have a
  • 00:02:11 video on that I'll have a link in the
  • 00:02:13 description
  • 00:02:14 below all right I'm going to quickly
  • 00:02:16 walk you through installing the live SAS
  • 00:02:18 extension so in vs code we'll go to
  • 00:02:20 extensions and we will search for live
  • 00:02:23 SAS and there you'll see live SAS
  • 00:02:26 compiler go ahead and click on that and
  • 00:02:28 then click install and after that's
  • 00:02:30 installed we're going to look at some
  • 00:02:32 settings so let's go to our settings and
  • 00:02:36 then we'll search for SAS
  • 00:02:39 and then click on live SAS compiler
  • 00:02:42 there and then you'll see in the format
  • 00:02:45 settings we're going to want to change
  • 00:02:47 the save location now these settings are
  • 00:02:50 a personal preference by default it will
  • 00:02:53 compile your CSS and put it into the
  • 00:02:56 same directory and I prefer for the
  • 00:02:59 compiled file to go into my distribution
  • 00:03:01 folder so we'll click on edit in
  • 00:03:04 settings JSON and then here we're going
  • 00:03:06 to add some settings
  • 00:03:09 so these are your options so the default
  • 00:03:12 is at the top here format is expanded so
  • 00:03:15 there's no compression going on the
  • 00:03:18 extension name is dot CSS and then the
  • 00:03:21 safe path is null so that means it's
  • 00:03:23 going to go into the same directory as
  • 00:03:25 your sass files so you can also change
  • 00:03:28 the format to compressed if you want and
  • 00:03:30 it will go ahead and compress and minify
  • 00:03:33 your CSS all in one shot and then you
  • 00:03:37 can change the extension name to min CSS
  • 00:03:40 and then you see with err where we can
  • 00:03:42 put it into our distribution folder so
  • 00:03:45 I'm actually going to do just a
  • 00:03:46 combination of the two for this video
  • 00:03:48 and we're going to keep the format and
  • 00:03:50 expanded and the extension as dot CSS
  • 00:03:53 and we're just going to change the safe
  • 00:03:55 path to slash dist slash CSS and then
  • 00:03:59 we'll save that and we're good to go
  • 00:04:03 all right now that we have all of that
  • 00:04:05 set up let's create a standard folder
  • 00:04:07 structure here so I have a new project
  • 00:04:09 folder that I've created and I opened it
  • 00:04:12 in vs code and let's go ahead and create
  • 00:04:15 a folder here called dist
  • 00:04:17 and then within our distal der we'll
  • 00:04:22 create an HTML file index.html we will
  • 00:04:30 use Emmet when we use exclamation enter
  • 00:04:33 get a template here and we'll just name
  • 00:04:36 this sass tutorial that will add link
  • 00:04:43 here to our CSS so currently we don't
  • 00:04:48 have one but we will be adding it notice
  • 00:04:52 the extension here is CSS not sass or s
  • 00:04:55 CSS so this CSS file is what's going to
  • 00:04:58 be compiled eventually once we've
  • 00:05:00 created our sass file now before we
  • 00:05:02 create our sass files it's important to
  • 00:05:04 understand that there are two syntaxes
  • 00:05:06 supported by sass so there's the S CSS
  • 00:05:10 syntax and it uses the file extension s
  • 00:05:13 CSS and this stands for sassy CSS
  • 00:05:16 it's basically a superset of CSS which
  • 00:05:20 means essentially that all valid CSS is
  • 00:05:23 valid s CSS as well I'll show you that
  • 00:05:27 in a minute but because of this
  • 00:05:29 similarity it's the easiest syntax to
  • 00:05:32 get used to and the most popular now the
  • 00:05:34 other syntax is the indented syntax and
  • 00:05:37 this was the original syntax for sass
  • 00:05:40 and it uses a file extension dot s a SS
  • 00:05:44 the indented syntax supports all of the
  • 00:05:47 same features as s CSS but it uses
  • 00:05:50 indentation instead of curly braces and
  • 00:05:53 semicolons there are a few other minor
  • 00:05:55 differences but we're not going to be
  • 00:05:57 using SI SS in this video so we're not
  • 00:06:00 going to go over those alright so we'll
  • 00:06:02 be using the S CSS syntax and so let's
  • 00:06:04 go ahead and create that structure so be
  • 00:06:06 sure you're in the root of your project
  • 00:06:08 and go ahead and create another folder
  • 00:06:10 here and we're going to name this s CSS
  • 00:06:12 and then within here we're going to
  • 00:06:15 create a
  • 00:06:16 main scss alright now that we have that
  • 00:06:20 file open we've got our extension
  • 00:06:23 installed so now you should see this
  • 00:06:24 watch SAS at the bottom so go ahead and
  • 00:06:27 click on that and you're going to see an
  • 00:06:29 output here you'll see here that it's
  • 00:06:31 watching for our SAS files now and it is
  • 00:06:34 compiling and generating them
  • 00:06:36 automatically and now it's watching for
  • 00:06:38 us to save the file again and when we
  • 00:06:40 save it it's going to automatically
  • 00:06:42 recompile and create that CSS file every
  • 00:06:45 single time that we save the document so
  • 00:06:48 we didn't add this CSS folder here but
  • 00:06:50 now we have a folder in dist
  • 00:06:52 and so that extension created the folder
  • 00:06:54 and it created our CSS file and of
  • 00:06:59 course we don't have anything in our SAS
  • 00:07:01 file and so I don't expect to have
  • 00:07:03 anything in our CSS file either
  • 00:07:06 so remember we said that any valid CSS
  • 00:07:09 is also valid sass so let me show you
  • 00:07:13 what I mean by that so here in our sass
  • 00:07:15 file we can add let's just do something
  • 00:07:19 generic here we'll say body background
  • 00:07:24 and we'll set it to blue and I'll hit
  • 00:07:28 save and it automatically compiled our
  • 00:07:32 CSS for us so now if we go to the CSS
  • 00:07:35 file
  • 00:07:35 we'll see body background blue just the
  • 00:07:38 same as we see it here so we can write
  • 00:07:40 plain CSS in our sass file and it will
  • 00:07:43 work just fine so I also have a live
  • 00:07:46 server installed so I'm going to go
  • 00:07:47 ahead and hit that go live and here you
  • 00:07:51 see we have a blue website so an
  • 00:07:54 important note here is that we should
  • 00:07:56 never modify the CSS file only modify
  • 00:08:00 the s CSS file every time the compiler
  • 00:08:03 runs is going to overwrite the CSS file
  • 00:08:05 so the first sass feature that we're
  • 00:08:08 going to look at is variables now you
  • 00:08:10 might say CSS has variables too and
  • 00:08:13 that's true CSS does have variables now
  • 00:08:16 but sass has had variables long before
  • 00:08:19 CSS currently CSS variables
  • 00:08:22 compatibility across browsers is about
  • 00:08:25 90% so that's pretty good and I don't
  • 00:08:27 see any reason not to use CSS variables
  • 00:08:30 but when you use sass variables they
  • 00:08:33 don't compile into CSS variables they
  • 00:08:36 compile to the actual value so let me
  • 00:08:39 show you what I mean there so in normal
  • 00:08:43 CSS we could add variables like this so
  • 00:08:52 now we could set our background here
  • 00:08:54 using a CSS variable just like that and
  • 00:08:57 so now if I save this you'll see that
  • 00:09:01 our CSS file is pretty much identical to
  • 00:09:05 the s CSS file and if we switch over to
  • 00:09:08 our website we now have a gray
  • 00:09:11 background so now let me show you the
  • 00:09:14 difference between this and the sass
  • 00:09:16 variables so with sass we can
  • 00:09:19 get rid of the root and instead of the
  • 00:09:24 dashes we'll add in a dollar sign so a
  • 00:09:28 dollar sign indicates that it is a
  • 00:09:30 variable so instead of calling the bar
  • 00:09:38 we will just input the variable and I'll
  • 00:09:43 save this we'll switch over to our
  • 00:09:45 website and it's still great and let's
  • 00:09:49 look at our CSS now we don't have any
  • 00:09:52 variables defined it puts the actual
  • 00:09:55 value there so using SAS variables has
  • 00:09:59 100% compatibility across browsers
  • 00:10:02 alright next let's talk about maps so if
  • 00:10:05 you're familiar with JavaScript you
  • 00:10:07 could compare maps to arrays maps are
  • 00:10:10 lists of key value pairs so I'll create
  • 00:10:14 one here so we'll define a variable and
  • 00:10:22 we'll name it font weights and then to
  • 00:10:31 define a map we start with parentheses
  • 00:10:35 so answer a key so we'll say regular
  • 00:10:39 will be the key and then the value will
  • 00:10:43 be 400 will enter another one we
  • 00:10:47 separate these by commas
  • 00:10:48 so we'll say medium will be 500 and then
  • 00:10:56 bold will be 700 it's probably not the
  • 00:11:03 best example but you can create a map of
  • 00:11:07 colors or different things so that we
  • 00:11:10 have something to really add this to
  • 00:11:12 let's put some HTML markup in here so
  • 00:11:17 we'll add a div with the class of main
  • 00:11:20 and then we will put a paragraph and
  • 00:11:25 we'll just put some warm in here 50
  • 00:11:29 all right it's now in the body we could
  • 00:11:32 apply font-weight globally if we wanted
  • 00:11:38 to get a value out of the map we'll use
  • 00:11:41 map get all right and so it's looking
  • 00:11:44 for the map and that would be font
  • 00:11:47 weights and then the key would be lets
  • 00:11:57 say bold so this may seem like a bit
  • 00:12:01 much but if we have our font weights
  • 00:12:03 defined throughout our CSS and many
  • 00:12:06 different areas and for some reason we
  • 00:12:08 want to change the way that the normal
  • 00:12:11 medium or bold font looks let's say we
  • 00:12:13 want bold to actually be nine hundred
  • 00:12:16 instead of seven hundred I can change it
  • 00:12:18 in this one spot instead of searching
  • 00:12:21 through all of my CSS and changing it on
  • 00:12:23 each individual line now before I save
  • 00:12:26 this let me pull up the website now and
  • 00:12:29 our text we forgot a text color let's
  • 00:12:33 apply our color and we'll set that to
  • 00:12:37 text color now we see that everything is
  • 00:12:41 in bold so this looks at our map and we
  • 00:12:47 tell it which key to look for it finds
  • 00:12:50 the key and then it extracts the value
  • 00:12:52 and it puts the value here as font
  • 00:12:54 weight so go to CSS will see that our
  • 00:12:57 font weight is set to 700 right next
  • 00:13:01 let's talk about nesting so nesting
  • 00:13:03 might be one of the best features of
  • 00:13:05 sass but depending on how big your
  • 00:13:07 project is be careful with too much
  • 00:13:10 nesting using classes that can be reused
  • 00:13:13 instead of nest after nest is much
  • 00:13:16 better but to demonstrate nesting we
  • 00:13:19 will look at our paragraph here so we
  • 00:13:24 have give the class of main in a
  • 00:13:27 paragraph
  • 00:13:29 so let's look at the main dev first
  • 00:13:32 let's say that we want to Center it and
  • 00:13:34 add some margin on the side so well so
  • 00:13:38 we'll set the width here to 80% and
  • 00:13:43 we'll set margin top and bottom to zero
  • 00:13:47 left and right to auto and this is just
  • 00:13:51 plain CSS so if we go here we'll see now
  • 00:13:55 it's centered and we've got some margin
  • 00:13:57 on the sides all right so now if we
  • 00:13:59 wanted to style our paragraph normally
  • 00:14:02 we would have to do main and then
  • 00:14:08 paragraph and do it like this or we
  • 00:14:10 could just do paragraph and that would
  • 00:14:13 globally change all of the paragraphs
  • 00:14:15 but we don't want to do that with sass
  • 00:14:19 we can nest
  • 00:14:21 so within main we could just do this and
  • 00:14:27 let's say we just want to put that font
  • 00:14:29 weight only on this paragraph we'll move
  • 00:14:33 it down here and I'll save that switch
  • 00:14:38 and we'll see the same thing nothing has
  • 00:14:41 changed and if we go to our CSS you'll
  • 00:14:46 see that it has written it as proper CSS
  • 00:14:49 so that the browser can parse it now if
  • 00:14:52 we want to do this properly let's add a
  • 00:14:55 class here to the paragraph will set it
  • 00:14:59 to main paragraph and then so instead of
  • 00:15:08 targeting the tag directly we could do
  • 00:15:11 main paragraph
  • 00:15:18 I save that now it compiles properly
  • 00:15:21 into CSS but with sass we have some
  • 00:15:27 shortcuts so instead of typing main
  • 00:15:29 again we could take this part out and we
  • 00:15:33 can use in amperes and so amperes an
  • 00:15:36 equals the parent all right so let me
  • 00:15:41 save that and go to our CSS now it's not
  • 00:15:45 quite right because it's main underscore
  • 00:15:46 paragraph on its own not within the main
  • 00:15:49 parent so to fix that we actually have
  • 00:15:53 to use something called interpolation
  • 00:15:55 and what that means is we don't want
  • 00:15:58 just dot main paragraph we want
  • 00:16:01 everything before it so we have to wrap
  • 00:16:04 the ampersand in hashtag curly braces
  • 00:16:08 and so now what we could do is add a
  • 00:16:12 hover on the paragraph and so we want to
  • 00:16:16 add that on the paragraph not main so
  • 00:16:18 we'll nest that again and this time
  • 00:16:21 we'll use just one amperes an and we'll
  • 00:16:24 use : hover like we would normally and
  • 00:16:30 then let's just change the color to pink
  • 00:16:37 all right and now I'll save this and if
  • 00:16:40 we go to our website and we hover over
  • 00:16:43 it now it's pink alright let's look at
  • 00:16:47 our CSS let's see what happened here so
  • 00:16:50 we've got everything separated as it
  • 00:16:52 should be in CSS now so let's talk about
  • 00:16:55 separating files so with sass we can
  • 00:16:58 create partial sass files that contain
  • 00:17:01 little snippets of CSS that you could
  • 00:17:03 include in other sass files so if we're
  • 00:17:06 working on a large project it's a great
  • 00:17:09 way to modularize your CSS and make
  • 00:17:12 things easier to maintain a partial is
  • 00:17:15 simply a sass file named with a leading
  • 00:17:18 underscore so the underscore lets sass
  • 00:17:20 know that the file is only a partial and
  • 00:17:23 that it should not generate a CSS file
  • 00:17:25 so the compiler is going to ignore those
  • 00:17:28 files that begin with an under
  • 00:17:30 or so let's create a partial here make
  • 00:17:33 sure that you're in your scss folder and
  • 00:17:35 we'll create a new file and we're going
  • 00:17:38 to name it underscore resets dot s CSS
  • 00:17:44 all right now in this resets file we're
  • 00:17:47 just going to include our normal resets
  • 00:17:50 so we will do a box sizing of border box
  • 00:17:55 margin zero and padding of zero all
  • 00:18:03 right just some normal resets there I'm
  • 00:18:05 going to save that and then in our main
  • 00:18:07 s CSS we'll want to include them at the
  • 00:18:10 top here because generally will have our
  • 00:18:13 resets at the top and so to include that
  • 00:18:16 we will use in at import and then we
  • 00:18:22 will indicate the name so notice here
  • 00:18:27 that we don't have to put the underscore
  • 00:18:30 or the extension so now if I save this
  • 00:18:33 and we look at our main CSS it has
  • 00:18:37 compiled our resets into our main CSS
  • 00:18:40 from the partial and also notice that
  • 00:18:42 the vendor prefixes are automatically
  • 00:18:45 added by the compiler so what we could
  • 00:18:48 also do is we could create another file
  • 00:18:51 here and we could name it underscore
  • 00:18:54 variables dot s CSS and then in our
  • 00:18:59 variables we could take all of these and
  • 00:19:04 we'll put them into our variables
  • 00:19:07 partial and I'll save that and then I'm
  • 00:19:10 going to use alt shift down arrow to
  • 00:19:12 duplicate that and we'll include our
  • 00:19:19 variables so now if I save that you'll
  • 00:19:24 see that the variables are still working
  • 00:19:28 so by using partials we could separate
  • 00:19:31 major components into partials and this
  • 00:19:33 is especially helpful when working with
  • 00:19:36 a team on large projects we can break up
  • 00:19:38 the components and work on them
  • 00:19:39 individually all right so now let's talk
  • 00:19:42 about functions so if you're familiar
  • 00:19:44 javascript functions and SAS are very
  • 00:19:47 similar so to create a function we'll
  • 00:19:49 put it here at the top and I'm going to
  • 00:19:51 say at function to define that this is a
  • 00:19:54 function and then we will name it
  • 00:19:56 so this this map get and the font
  • 00:20:01 weights down here it's a bit much it's
  • 00:20:03 kind of ugly we can shorten that up
  • 00:20:04 especially if we're going to be using it
  • 00:20:06 all over our CSS so we're going to
  • 00:20:08 create a function that is called weight
  • 00:20:11 and then we're going to open parentheses
  • 00:20:15 and we're going to put an argument in
  • 00:20:17 here we're going to put a variable of
  • 00:20:21 weight name and then we're going to open
  • 00:20:25 it with curly braces and within the
  • 00:20:27 function we're going to return and we're
  • 00:20:31 going to use map get and we're going to
  • 00:20:35 target the font weights and the key is
  • 00:20:44 going to be our weights name so this
  • 00:20:47 variable here is one of you passed
  • 00:20:49 within our SAS file whenever we call it
  • 00:20:52 so instead of map get down here we're
  • 00:20:56 going to use the function name weight
  • 00:20:59 and within that we'll pass it the weight
  • 00:21:03 name that we're looking for and if we
  • 00:21:06 change this to regular it would return
  • 00:21:10 the regular weight so let me save this
  • 00:21:14 and we'll go to our CSS now we're
  • 00:21:16 looking for the font weight let's see
  • 00:21:18 what it what it is
  • 00:21:19 font weight of 400 right so that's our
  • 00:21:22 regular font if I go back here and
  • 00:21:24 change it back to bold and we check our
  • 00:21:27 compiled CSS now it's 700 all right now
  • 00:21:31 we'll move on to mix ins and so mix ins
  • 00:21:35 are similar to functions so to
  • 00:21:37 demonstrate this let's add some more
  • 00:21:41 HTML markup so I'm going to just
  • 00:21:44 duplicate this this paragraph here when
  • 00:21:47 you use alt shift down arrow create
  • 00:21:49 another paragraph
  • 00:21:52 and I'm going to save that then back in
  • 00:21:54 our SAS file in the main here let's say
  • 00:21:58 we want to display this as flex and we
  • 00:22:03 want to justify the content center and
  • 00:22:07 align items
  • 00:22:11 Center if you haven't learned CSS
  • 00:22:14 flexbox and CSS grid I have videos on
  • 00:22:16 those as well I'll put links in the
  • 00:22:18 description below let me save this and
  • 00:22:21 let's switch over to our website and we
  • 00:22:23 see now that our paragraphs are side by
  • 00:22:26 side because we define them as flex so
  • 00:22:30 by default that is going to flex to a
  • 00:22:32 row go back to our code here and let's
  • 00:22:35 just say that we have many of these Flex
  • 00:22:38 boxes that we need to create and we
  • 00:22:40 don't want to type display flex and
  • 00:22:42 justify content and the line items a
  • 00:22:43 million times so we'll go up here and
  • 00:22:46 we're going to create a mix in so at
  • 00:22:48 symbol mix in and we're going to name
  • 00:22:51 this and we'll name it Flex Center and
  • 00:22:56 then within Flex Center we're going to
  • 00:22:59 put all of this content that we don't
  • 00:23:01 want to repeatedly type and now within
  • 00:23:06 main instead of typing all of that we
  • 00:23:09 will include the mixin so @include and
  • 00:23:14 then flex enter just like that now I'll
  • 00:23:19 save that and let's check out our CSS
  • 00:23:21 and in our main we've got all of our
  • 00:23:25 flex and again it's added all of the
  • 00:23:28 vendor prefixes as well now similar to
  • 00:23:31 functions we could also pass an argument
  • 00:23:33 into the mixin so let's say we want to
  • 00:23:37 pass it direction and then we could
  • 00:23:44 define flex direction as direction so
  • 00:23:50 now instead of including Flex Center
  • 00:23:53 we're going to also include an argument
  • 00:23:55 here and by default it is a row so let's
  • 00:23:58 let's define it as column and I'm going
  • 00:24:02 to save that and let's go back to our
  • 00:24:04 website and
  • 00:24:05 you'll see that they are in a column and
  • 00:24:07 not a row and of course if I change this
  • 00:24:10 to row and save it and now you'll see
  • 00:24:13 they're in a row alright so mix-ins and
  • 00:24:16 functions are very similar but just
  • 00:24:18 remember that functions should be used
  • 00:24:21 to compute values and return values
  • 00:24:23 mix-ins should define styles another
  • 00:24:27 example of a mixin is choosing between a
  • 00:24:30 light and dark theme so by default right
  • 00:24:33 now our website is a dark theme so we
  • 00:24:36 could add a mix in and we'll name it
  • 00:24:41 theme and we're going to pass it a
  • 00:24:45 boolean value so we can assign boolean
  • 00:24:47 values to variables so we will say light
  • 00:24:53 theme and by default we're going to set
  • 00:24:58 it to true so now again if you're
  • 00:25:02 familiar with JavaScript we can in SAS
  • 00:25:06 we can use if statements so we're gonna
  • 00:25:10 say if light theme so that means if
  • 00:25:13 light theme is true then we're going to
  • 00:25:17 set background now currently background
  • 00:25:22 is set to primary color but what we're
  • 00:25:25 going to do is we're going to wrap this
  • 00:25:27 in a light and and then we can tell it
  • 00:25:34 how much delight in it by we're gonna
  • 00:25:35 say a hundred percent so it's basically
  • 00:25:38 going to invert the color and then we
  • 00:25:41 will need to set the color as well
  • 00:25:44 currently that's set to the text color
  • 00:25:47 the text color is white by default so
  • 00:25:50 we're going to need to do the opposite
  • 00:25:51 so we're going to darken the text color
  • 00:25:56 and we're going to do that by 100%
  • 00:26:02 all right so now to use this we're going
  • 00:26:05 to create a let's go down here at the
  • 00:26:10 bottom and we're going to create a light
  • 00:26:13 class
  • 00:26:15 and we're going to include our theme and
  • 00:26:21 we're going to pass it that variable so
  • 00:26:25 light theme true I don't have to
  • 00:26:30 actually type this light theme I could
  • 00:26:32 just say true this makes it a little bit
  • 00:26:34 more identifiable all right so let's
  • 00:26:37 save this and now we need to add this
  • 00:26:40 class somewhere so let's just let's just
  • 00:26:43 add it to the body for now class of
  • 00:26:47 light save that and now let's go to our
  • 00:26:49 website now we have a light theme and so
  • 00:26:53 now if we change this to false let's see
  • 00:26:56 what happens it's still a dark theme
  • 00:26:58 even though we have the class of lights
  • 00:27:00 on body it's still a dark theme how is
  • 00:27:03 that possible so let's look at our main
  • 00:27:06 CSS we've got our body here the remain
  • 00:27:10 all of our main paragraphs but there's
  • 00:27:15 no light theme here go back to our CSS
  • 00:27:19 and we've got it included here
  • 00:27:21 well we've included the theme and we've
  • 00:27:24 said false so if we go up here to theme
  • 00:27:27 so if it's true it's going to add these
  • 00:27:29 CSS styles to the light class if it's
  • 00:27:34 false it's not going to add anything so
  • 00:27:36 that means the light class is empty so
  • 00:27:39 when the compiler runs if it finds a
  • 00:27:41 definition that's empty it's just not
  • 00:27:44 going to include it in the CSS at all
  • 00:27:47 all right so if I go back here and I
  • 00:27:49 change this back to true let's look at
  • 00:27:53 the compiled CSS and now we have our
  • 00:27:56 light class all right back at our main
  • 00:27:58 sass file
  • 00:27:58 mix-ins are pretty cool so I'm going to
  • 00:28:01 show you one more mix in this one has to
  • 00:28:04 do with media queries so we're going to
  • 00:28:05 create a mix in and we're going to call
  • 00:28:08 it mobile and then we're going to use a
  • 00:28:15 media query so just a normal CSS media
  • 00:28:19 query we're going to say max width of
  • 00:28:23 let's just say 800 pixels
  • 00:28:26 and then in here we want to include
  • 00:28:29 content so this content will be passed
  • 00:28:33 when the mixing is called
  • 00:28:36 now what we also could do instead of
  • 00:28:39 defining this this width here we could
  • 00:28:43 actually use a variable and it would be
  • 00:28:44 better to use a variable because if we
  • 00:28:46 ever wanted to change it would be easy
  • 00:28:48 to change so we're going to create a
  • 00:28:51 variable here called mobile and we will
  • 00:28:56 just set that to 800 pixels and then
  • 00:28:59 back here in our sass file instead of
  • 00:29:03 putting the value there of 800 pixels
  • 00:29:06 we'll just include the mobile variable
  • 00:29:11 all right so now let's see you know what
  • 00:29:14 did I miss here content there we go
  • 00:29:17 now to include this let's say if the
  • 00:29:22 width gets below 800 pixels we're going
  • 00:29:25 to want that to change to a column all
  • 00:29:28 right so here within main so here we're
  • 00:29:31 going to include our mix in some include
  • 00:29:34 and then that is going to be mobile and
  • 00:29:38 then within this basically view this as
  • 00:29:42 your media query so what do you want it
  • 00:29:44 to do when it's below 800 pixels so
  • 00:29:47 we're going to say Flex Direction column
  • 00:29:52 alright let me save that and I'll switch
  • 00:29:56 to the website all right so let's make
  • 00:29:59 this smaller and there you go
  • 00:30:02 once we get below 800 pixels it changes
  • 00:30:05 to a column alright and then move it
  • 00:30:08 back over it's back to a row alright and
  • 00:30:13 then if we ever need to change the
  • 00:30:15 widths we have the variables here where
  • 00:30:18 we can change our widths all right so
  • 00:30:20 now let's talk about extensions so we
  • 00:30:22 can extend an element and so the element
  • 00:30:25 that we extend it to would then inherit
  • 00:30:27 all the styles from the selected element
  • 00:30:30 so to demonstrate that let's go to our
  • 00:30:32 HTML
  • 00:30:35 change the classes to paragraph 1 and
  • 00:30:37 paragraph 2 all right so now here we
  • 00:30:40 will change this to paragraph 1 and so
  • 00:30:43 let's say that we want to extend all of
  • 00:30:45 the styles of paragraph 1 on to
  • 00:30:48 paragraph 2 we want them to look the
  • 00:30:51 same but we just want to change one or
  • 00:30:53 two things on paragraph 2 and we don't
  • 00:30:55 want to have to retype all of the styles
  • 00:30:57 on both paragraphs so we could do this
  • 00:31:00 we have to interpolate again the
  • 00:31:01 ampersand and then we'll do a paragraph
  • 00:31:06 two and then here we could extend main
  • 00:31:15 paragraph 1 and we'll save that switch
  • 00:31:23 and now they're both identical just as
  • 00:31:26 they were before but now we want to make
  • 00:31:29 a change to this paragraph so we've
  • 00:31:33 extended all of the same properties but
  • 00:31:35 let's say we want to will use hover
  • 00:31:38 again and this time we'll change the
  • 00:31:41 color to our accent color all right
  • 00:31:50 and so now we have our accent color so
  • 00:31:56 if there was a bunch of styles here in
  • 00:31:58 paragraph 1 and we didn't want to retype
  • 00:32:00 everything we could just extend from
  • 00:32:03 that class on to this class the last
  • 00:32:05 thing that we're going to look at is
  • 00:32:06 operations so addition subtraction
  • 00:32:10 multiplication division so a normal CSS
  • 00:32:14 we could do calc and then I don't know
  • 00:32:17 why we'd want to do this but if for some
  • 00:32:19 reason we wanted to subtract 40% that
  • 00:32:25 would work just fine but in SAS we don't
  • 00:32:32 need the calculation
  • 00:32:35 and it will work just like this
  • 00:32:38 we'll hit save go back and just the same
  • 00:32:43 now one thing to note with the normal
  • 00:32:46 CSS calculation I could do minus 400
  • 00:32:53 pixels and see this will work just fine
  • 00:33:01 but with sass we can't mix types so the
  • 00:33:07 operation has to be of the same type so
  • 00:33:10 if we're using percentage they all have
  • 00:33:11 to be percentage or they all have to be
  • 00:33:13 pixels so now let's see what that looks
  • 00:33:15 like in the CSS so we have 80% minus 40%
  • 00:33:20 so now we just have the result of that
  • 00:33:22 which is 40%
  • 00:33:31 so if we so if we use the normal CSS
  • 00:33:34 count let's look at what the compiled
  • 00:33:36 CSS looks like so it's gonna go ahead
  • 00:33:38 and pass that entire calculation into
  • 00:33:41 our normal compiled CSS alright so
  • 00:33:46 that's pretty much the basics of sass so
  • 00:33:49 if you want to learn more you can look
  • 00:33:51 at the documentation on sass lang calm
  • 00:33:56 sass is very powerful and once you get
  • 00:33:58 the hang of it it's hard to go back to
  • 00:34:00 normal CSS alright
  • 00:34:02 now let's look at a real world example
  • 00:34:04 so this is what we're going to build a
  • 00:34:06 portfolio website has this cool animated
  • 00:34:09 menu and several pages and the menu
  • 00:34:12 along with the entire website is
  • 00:34:14 responsive and we're going to take a
  • 00:34:16 mobile-first approach when we build this
  • 00:34:19 so here I've got v/s code open and I've
  • 00:34:22 created a project folder on my computer
  • 00:34:24 and then I opened it in vs code and all
  • 00:34:27 that I've done so far is I created a
  • 00:34:29 dist folder along with an image folder
  • 00:34:31 and I just brought in the images that
  • 00:34:33 we'll be using in this project I will
  • 00:34:34 have a link in the description below so
  • 00:34:36 that you can download the project files
  • 00:34:38 as well so in the dist folder let's
  • 00:34:40 start out by creating in index that HTML
  • 00:34:43 file I'm gonna close the sidebar by
  • 00:34:47 pressing ctrl B and now let's start with
  • 00:34:50 our HTML markup so we'll use Emmet
  • 00:34:52 exclamation enter it gives us a
  • 00:34:55 boilerplate and let's title this will
  • 00:34:58 just go with Mike Smith portfolio we're
  • 00:35:05 also going to add our style sheet which
  • 00:35:08 will be created for us from our sass so
  • 00:35:11 we'll add a link and we'll set that to
  • 00:35:14 CSS main dot CSS and the body here we're
  • 00:35:20 going to start out with a header and
  • 00:35:24 then we'll create a div with the class
  • 00:35:27 of menu button and then within here will
  • 00:35:33 create a span with the class of menu
  • 00:35:38 button burger
  • 00:35:43 so the menu button is going to be pure
  • 00:35:46 CSS we're not going to use any images or
  • 00:35:48 fonts for that now within the header
  • 00:35:52 let's create a nav we'll have a class on
  • 00:35:55 that of nav and then we'll create our
  • 00:35:58 menu items so we'll have a ul with the
  • 00:36:02 class of menu nav and then our allies
  • 00:36:07 will have a class of menu nav item all
  • 00:36:18 right now we'll have a link with the
  • 00:36:22 class of menu nav and that is going to
  • 00:36:31 go so our first one will be home so
  • 00:36:34 that's index.html and we'll name that
  • 00:36:39 one home all right so now we're going to
  • 00:36:41 take this Li and we're going to
  • 00:36:43 duplicate it down three times so alt
  • 00:36:45 shift down arrow one two three
  • 00:36:47 so in our home this is the page that
  • 00:36:50 we're on right now so we're going to set
  • 00:36:51 this Li to active and then the next one
  • 00:36:55 will be our about and so we'll say about
  • 00:37:00 me the next one is our projects we'll
  • 00:37:06 say my projects and the last one is our
  • 00:37:12 contact and I will say contact me
  • 00:37:18 we right I think that's it for the
  • 00:37:21 header let's go to our main section now
  • 00:37:27 all right we're gonna start with a main
  • 00:37:29 tag and then we'll have a section and
  • 00:37:35 we'll have a class of home and then
  • 00:37:41 we'll create an h2 and in here we'll say
  • 00:37:46 hi my name is then an h1 with the class
  • 00:37:56 of home name then here we'll put the
  • 00:38:02 name so Mike and then we're gonna have a
  • 00:38:05 span with the class of home name last
  • 00:38:13 and then here we'll put the last name
  • 00:38:16 Smith and then we'll have an h2 and this
  • 00:38:23 will be as titles web developer designer
  • 00:38:33 and programmer
  • 00:38:38 I mean now we're going to add our social
  • 00:38:41 icons we're actually going to put that
  • 00:38:44 in our section still so we'll add a div
  • 00:38:51 with the class of social icons and then
  • 00:38:58 a link and that's not gonna go anywhere
  • 00:39:02 and then we'll add the icon so we're
  • 00:39:05 gonna use um Brittany's font awesome and
  • 00:39:08 I'll show you how to set that up in just
  • 00:39:10 a minute so we're gonna use an icon with
  • 00:39:12 the class of FA B and another class of
  • 00:39:16 FA Twitter and we're also gonna add a
  • 00:39:21 class of FA times – alright and then
  • 00:39:28 let's take these three lines and copy
  • 00:39:33 that down three more times and then
  • 00:39:37 we'll change Twitter to Facebook and
  • 00:39:48 Instagram and github alright and then
  • 00:40:01 after that one last thing is footer and
  • 00:40:06 that's just going to contain our
  • 00:40:08 copyright so we'll do campers and copy
  • 00:40:11 for the copyright symbol and then
  • 00:40:14 copyright whatever you current year is
  • 00:40:18 we're going to have some basic
  • 00:40:21 JavaScript we're going to include a
  • 00:40:23 script the source and the source will be
  • 00:40:28 J s main DJ s alright I think that is it
  • 00:40:34 for the markup so let's look at the font
  • 00:40:36 awesome we also have to add something
  • 00:40:37 here for that all right so this is font
  • 00:40:40 awesomes website and they recently
  • 00:40:41 changed things up a little bit you
  • 00:40:43 actually have to sign up for a free
  • 00:40:45 account so I've already logged in and
  • 00:40:47 I'm just going to go to my kits and
  • 00:40:52 kit that I have and so what we need to
  • 00:40:54 do is to copy this script and put that
  • 00:40:57 into our HTML files so I'm just going to
  • 00:41:00 hit copy code and then we will put that
  • 00:41:04 here alright so I think that is it for
  • 00:41:06 the index.html let's go ahead and save
  • 00:41:09 this and we'll see what this looks like
  • 00:41:13 so I have I have live server installed
  • 00:41:16 so if you just right-click here you can
  • 00:41:19 say open with live server or you can see
  • 00:41:22 there's some shortcut here you can see
  • 00:41:25 that that looks pretty ugly
  • 00:41:27 there's no CSS so okay so let's start
  • 00:41:30 with our sass I'm gonna open the sidebar
  • 00:41:34 by pressing ctrl B and then make sure
  • 00:41:36 that you're in the root and create a
  • 00:41:39 folder s CSS and then within s CSS we're
  • 00:41:45 going to create a file of main dot s CSS
  • 00:41:51 and we're actually going to start with
  • 00:41:55 let's create another file and we'll name
  • 00:41:58 it underscore config dot s CSS so that's
  • 00:42:02 going to be a partial and we're actually
  • 00:42:03 going to create partials for all of our
  • 00:42:06 elements in a large project that's what
  • 00:42:09 you would do you would separate
  • 00:42:11 everything into partials and this isn't
  • 00:42:13 a large project but we're going to go
  • 00:42:15 through that workflow so that you can
  • 00:42:16 see it let me close the sidebar here
  • 00:42:18 control B and our config we're going to
  • 00:42:21 have our variables so we'll have a
  • 00:42:25 primary color and that's going to be a
  • 00:42:31 dark grey and then we'll have our
  • 00:42:34 secondary color and that will be an
  • 00:42:42 orange and then we'll put our resets in
  • 00:42:46 here so box-sizing border-box margin:0
  • 00:42:53 and padding:0 just some standard resets
  • 00:42:58 all right I'm going to save that and
  • 00:43:00 then we'll go to our main CSS and the
  • 00:43:03 first thing we need to do is import
  • 00:43:04 that config so we'll say import config
  • 00:43:08 and we don't have to put the underscore
  • 00:43:11 or the extension alright first let's
  • 00:43:14 let's look at the body and we're gonna
  • 00:43:19 set the background to the primary color
  • 00:43:24 and then we'll set the the text color
  • 00:43:30 for now we'll just set that to a white
  • 00:43:33 we're going to come back to that in a
  • 00:43:35 minute the height would be 100 VH so 100
  • 00:43:42 view height and view view that as a
  • 00:43:43 percentage so basically it's 100% of the
  • 00:43:47 available viewport height I'm going to
  • 00:43:50 change the font family
  • 00:43:51 I like the sagoo and we're gonna set the
  • 00:43:58 line height so one all right now what
  • 00:44:04 we're gonna target our h1 h2 and h3 and
  • 00:44:10 I want the font weight of those to be a
  • 00:44:14 little bit less more normal 400 and then
  • 00:44:18 we've got some links in here so we're
  • 00:44:19 going to target all of the links
  • 00:44:21 globally and we're gonna set the color
  • 00:44:26 to white for now and the text decoration
  • 00:44:35 to none all right and then let's look at
  • 00:44:40 our header so for the header we want it
  • 00:44:47 to have a position of fixed we need it
  • 00:44:50 to always be on top of everything else
  • 00:44:53 so we're going to set a z-index up to a
  • 00:44:55 width of 100% and padding of one rim so
  • 00:45:04 if you're unfamiliar with rim and M
  • 00:45:06 units so Ram units are based on the font
  • 00:45:11 size of the body so the default font
  • 00:45:14 size of the body is 16 pixels and so 1 1
  • 00:45:18 would be 1 times 16 to ram would be 2
  • 00:45:22 times 16
  • 00:45:23 so that would be 32 pixels if we change
  • 00:45:27 the font size of the body to 20 pixels
  • 00:45:29 then one room would be 20 pixels in two
  • 00:45:32 room would be 40 pixels M a.m. it's
  • 00:45:35 pretty much the same thing except it's
  • 00:45:38 not based on the font size of the body
  • 00:45:40 it's based on the font size of the
  • 00:45:42 parent all right so now let's go to our
  • 00:45:45 C main let's target the main here and
  • 00:45:49 we'll set a height of 100 percent and a
  • 00:45:54 width of 100% and then we'll start doing
  • 00:45:59 some nesting let's target our social
  • 00:46:01 icons for that for those I want them to
  • 00:46:08 be position fixed with a bottom so from
  • 00:46:15 the bottom one rim and from the left one
  • 00:46:20 rim within the icons there are links so
  • 00:46:26 let's target those we want a padding on
  • 00:46:30 those of let's say 0.4 m and then on
  • 00:46:34 hover we're going to change the color
  • 00:46:42 we'll set that to our secondary color
  • 00:46:50 lastly we'll target our footer and we'll
  • 00:46:55 set the font size on there to one rim
  • 00:47:02 we're gonna set a fixed position on this
  • 00:47:04 as well because we're going to we want
  • 00:47:06 that to be at the bottom say bottom
  • 00:47:12 point for room and then right one room
  • 00:47:19 I'll do a text align right adding a one
  • 00:47:25 and we'll set the color on that to white
  • 00:47:29 for now
  • 00:47:30 so before we save this unload it we
  • 00:47:32 actually have to initialize our SAS
  • 00:47:35 extension so we're running the live SAS
  • 00:47:37 compiler extension so what we'll do is
  • 00:47:40 we'll hit watch SAS if you don't have V
  • 00:47:43 s code setup I've got a video with the
  • 00:47:46 web dev setup where we walk through the
  • 00:47:48 installation of these extensions and hit
  • 00:47:51 watch SAS
  • 00:47:53 and it opens up an output here and it's
  • 00:47:57 watching and it is compiling our CSS
  • 00:48:00 every time that we hit save and
  • 00:48:02 automatically updated with live server
  • 00:48:05 we go to our files here we can see that
  • 00:48:09 it created a CSS directory and we have
  • 00:48:11 our main CSS here all right so that is
  • 00:48:15 still not looking great let's look at
  • 00:48:17 some CSS that is directly applicable to
  • 00:48:20 the home page so what we're going to do
  • 00:48:24 is we're going to create in this s CSS
  • 00:48:27 folder we're gonna create a new Harshal
  • 00:48:29 and we'll name it home that s CSS
  • 00:48:32 alright so in here we're gonna target
  • 00:48:35 our home class and we're gonna set the
  • 00:48:39 height to 100% put a padding on the top
  • 00:48:44 of 40 VH so again that's like view that
  • 00:48:49 as a percentage forty percent of the
  • 00:48:52 available viewport height we're gonna
  • 00:48:54 set the overflow to hidden we don't want
  • 00:48:58 any scroll bars on the home page it
  • 00:49:00 should always fit we're gonna align
  • 00:49:02 items to the center and we'll do a
  • 00:49:08 text-align:center and then let's set our
  • 00:49:12 background so we're gonna have that
  • 00:49:15 picture and that is URL we need to go up
  • 00:49:20 one level so dot dot slash image slash
  • 00:49:24 and then it was modeled – one dot jpg
  • 00:49:29 and then we're gonna set a background
  • 00:49:32 size to cover alright let's just save
  • 00:49:37 that and see what we have so far oh and
  • 00:49:39 we have to go back to our main and we
  • 00:49:41 have to import that home so import home
  • 00:49:48 save alright so I think the image is
  • 00:49:51 here it's just let's expand this yep so
  • 00:49:55 the image is actually there it's just
  • 00:49:57 not positioned properly yet
  • 00:50:00 so what we're going to do back in our
  • 00:50:02 home on the background we're also going
  • 00:50:04 to set some positioning so we're going
  • 00:50:07 to say Center top that's a little bit
  • 00:50:11 better now the image is too too bright
  • 00:50:15 it's too white so we're gonna put an
  • 00:50:17 overlay on top of it and there's several
  • 00:50:19 ways to do that you could use HTML
  • 00:50:21 markup and then target that and create
  • 00:50:24 an overlay that way you could use pseudo
  • 00:50:27 elements but we're actually going to do
  • 00:50:29 it right here in the background so we're
  • 00:50:32 going to add a linear gradient and then
  • 00:50:35 we're going to say we want the gradient
  • 00:50:37 to go to the right and then we put in
  • 00:50:42 our colors so we're going to use RGB a
  • 00:50:45 and then that takes the first part of it
  • 00:50:50 takes your color so we're going to set
  • 00:50:52 primary color we're going to use that
  • 00:50:57 variable and then we will set this to
  • 00:51:00 0.9 opacity and then we'll do another
  • 00:51:05 RGB a for the second gradient value and
  • 00:51:09 again primary color and we could do 0.9
  • 00:51:16 again and have it the same across but
  • 00:51:18 we're going to set the right side of it
  • 00:51:20 to 0.3 then we need a comma here alright
  • 00:51:24 and you save this there that looks a lot
  • 00:51:27 better make sure that you're still
  • 00:51:29 within the home class and now we're
  • 00:51:31 going to target our underscore name so
  • 00:51:36 this is going to be the home underscore
  • 00:51:39 name the amperes and remember amperes
  • 00:51:43 and always refers to the parent so it's
  • 00:51:45 the same as typing dot home underscore
  • 00:51:48 name okay so we get in here we're gonna
  • 00:51:51 set our font size to five rim we'll set
  • 00:51:56 the padding on the bottom to one rim
  • 00:52:01 margin on the top of one rim and we're
  • 00:52:08 going to set a border on the bottom
  • 00:52:12 and we'll set that to two pixels solid
  • 00:52:15 and for now we're going to set this to
  • 00:52:18 white and then within that name remember
  • 00:52:22 we have a span that goes around the last
  • 00:52:25 name and so that was represent which is
  • 00:52:30 going to be the same as dot home
  • 00:52:33 underscore name – – last and we're going
  • 00:52:40 to set the color on here to the
  • 00:52:44 secondary color and the font weights
  • 00:52:49 we're gonna increase that one up to 700
  • 00:52:51 all right let's save this that's looking
  • 00:52:53 pretty good alright so when we're
  • 00:52:57 hovering over these icons the color just
  • 00:53:01 kind of pops right in so I'm gonna add a
  • 00:53:04 bit of a transition to that so back in
  • 00:53:07 our config let's add a mix in so at
  • 00:53:11 symbol mix in I will name this
  • 00:53:16 transition ease and then we will set a
  • 00:53:23 transition and will set all 0.05 seconds
  • 00:53:31 ease in out okay so normally on the
  • 00:53:37 transition I would target what we're
  • 00:53:39 trying to transition it's the color is
  • 00:53:41 the position what is it here we want to
  • 00:53:43 reuse this so when I include this mix in
  • 00:53:46 I want it to target any transition that
  • 00:53:48 it can set it to a point 5 or half a
  • 00:53:51 second ease in and out alright so let me
  • 00:53:54 save this let's go to our main and we
  • 00:53:57 had a hover in our social icons right
  • 00:54:01 here alright and so let's add the
  • 00:54:04 transition on the link so we'll do to
  • 00:54:09 include the mix and we do include and
  • 00:54:11 then the mixin name transition ease
  • 00:54:15 alright let's save this and now let's
  • 00:54:17 hover over them
  • 00:54:19 you see that it's slowly changing the
  • 00:54:22 color
  • 00:54:24 okay so now let's look here at our
  • 00:54:26 colors we have it set to white but in
  • 00:54:28 our config we have the ability to change
  • 00:54:31 the primary and secondary color so if we
  • 00:54:33 change the primary color to white then
  • 00:54:36 you won't be able to see the text so
  • 00:54:38 what we're going to do in our config is
  • 00:54:40 we're going to create a function that is
  • 00:54:41 going to give us an appropriate color
  • 00:54:44 for our text so to create a function
  • 00:54:47 we'll do at function and this is a lot
  • 00:54:51 like a JavaScript function if you're
  • 00:54:53 familiar with JavaScript so we're going
  • 00:54:55 to set this to set text color and we're
  • 00:55:01 going to pass it a variable of color and
  • 00:55:07 then we're going to use an if statement
  • 00:55:08 so we're gonna say at symbol if and then
  • 00:55:11 lightness we're going to evaluate the
  • 00:55:15 lightness of the color that we're
  • 00:55:16 passing it so if the lightness is
  • 00:55:20 greater than 40% then we're going to
  • 00:55:26 return we'll just we'll set this to
  • 00:55:33 black
  • 00:55:34 all right so if the lightness is greater
  • 00:55:36 than 40% so it means it's a light color
  • 00:55:38 then we want to return a dark color so
  • 00:55:42 black and then we'll do else so if it is
  • 00:55:50 a dark color we want to return white all
  • 00:55:58 right so now we can use this function
  • 00:56:00 instead of declaring the color go back
  • 00:56:04 to our main here so instead of white
  • 00:56:07 we're going to call set text color and
  • 00:56:12 then we're going to pass it our primary
  • 00:56:15 color so it's going to evaluate this
  • 00:56:17 primary color which is dark and it's
  • 00:56:20 going to return us the white value so
  • 00:56:23 anywhere else that we have the color set
  • 00:56:26 we can swap that out so say set text
  • 00:56:29 color primary color
  • 00:56:34 let's see did we set that anywhere else
  • 00:56:36 I think there was one other spot yeah on
  • 00:56:40 the footer
  • 00:56:42 set text color primary there we go we'll
  • 00:56:50 save that nothing's going to change
  • 00:56:53 obviously in now so we also had here on
  • 00:56:59 our border so this line that goes across
  • 00:57:01 in the middle here we're going to set
  • 00:57:04 that as well set text color primary I
  • 00:57:08 think we're good there okay so
  • 00:57:11 everything is looking pretty good except
  • 00:57:13 for our menu of course so let's start to
  • 00:57:16 it let's let's get to work on our menu
  • 00:57:17 so let me open up the sidebar here and
  • 00:57:20 we're going to create a new partial so
  • 00:57:24 underscore menu scss and we'll close the
  • 00:57:29 sidebar and let's see first will target
  • 00:57:32 the menu button we're going to set that
  • 00:57:36 to a position of absolute set the
  • 00:57:41 z-index here to one right one REM and
  • 00:57:47 top one rim okay so we're gonna
  • 00:57:52 absolutely position this so we want this
  • 00:57:54 in the top right corner we'll set the
  • 00:57:57 height to 20 pixels and the width to 28
  • 00:58:04 pixels and when we hover over this we
  • 00:58:08 want a cursor:pointer and we're going to
  • 00:58:11 include our transition mix in so include
  • 00:58:16 transition ease because we're going to
  • 00:58:18 be adding some transition animation to
  • 00:58:21 this
  • 00:58:22 alright so within the menu button we
  • 00:58:25 have our menu button burger so we can do
  • 00:58:29 amperes and underscore burger and this
  • 00:58:36 one we will again position:absolute
  • 00:58:42 we're going to say that this one will be
  • 00:58:44 right zero and top is going to be 0.5
  • 00:58:50 rim the width of 28 pixels height of 3
  • 00:59:00 pixels and the background will be our
  • 00:59:05 set text color and that's going to be
  • 00:59:10 our primary color and again we're going
  • 00:59:15 to include on this one our ease
  • 00:59:18 transition alright and so let's save
  • 00:59:22 this and see what we have and actually
  • 00:59:24 we have to remember back in our main we
  • 00:59:27 have to include this so import that was
  • 00:59:33 menu all right and so now we have a line
  • 00:59:40 so that's just one line and so again
  • 00:59:44 let's look at the HTML so the menu
  • 00:59:49 button is basically a wrapper and we're
  • 00:59:52 using this we're going to be using this
  • 00:59:54 as our click event within the menu
  • 00:59:57 button we're gonna have our bars for the
  • 01:00:00 hamburger we just configured the middle
  • 01:00:04 bar and so we had set it to 28 pixels
  • 01:00:09 wide 3 pixels high and the background
  • 01:00:11 color is going to be the text color
  • 01:00:13 which is going to be white and so now
  • 01:00:16 what we're going to do to create the
  • 01:00:19 other two bars is we're going to use
  • 01:00:22 pseudo elements so within the burger so
  • 01:00:26 we're going to use a ampersand before
  • 01:00:29 and with the pseudo element we have our
  • 01:00:32 content and we'll set that to nothing we
  • 01:00:38 have a position of absolute step the top
  • 01:00:43 2 negative 8 pixels so we want it to
  • 01:00:46 move up 8 pixels from its initial
  • 01:00:49 position and the width
  • 01:00:54 we'll be twenty eight pixels height of
  • 01:00:59 three pixels background color will be
  • 01:01:05 the set text color and we're going to
  • 01:01:11 also include our ease transition okay
  • 01:01:19 and now let's save that and now we have
  • 01:01:22 our top bar alright and so now to add
  • 01:01:27 the bottom bar we're within the Berger
  • 01:01:29 class still so we're going to use
  • 01:01:32 amperes and after and we're basically
  • 01:01:37 going to do the same thing so I'm just
  • 01:01:39 going to copy this and then instead of
  • 01:01:44 eight pixels up we want to go eight
  • 01:01:46 pixels down and I want the bottom bar to
  • 01:01:49 be not the same width so we'll set that
  • 01:01:52 to twenty all right and then let's save
  • 01:01:54 that there we go so now we have our menu
  • 01:01:58 button okay so now on the menu button
  • 01:02:00 we're going to have it animate a bit so
  • 01:02:03 again still within the Berger through
  • 01:02:06 JavaScript we're going to assign it an
  • 01:02:08 open class so when the open class gets
  • 01:02:14 applied to the menu we want it to
  • 01:02:17 transform and we're going to rotate 720
  • 01:02:23 degrees and then we're going to set
  • 01:02:28 background to transparent let's save
  • 01:02:36 this for now and we'll come back to it
  • 01:02:38 let's go ahead and look at the
  • 01:02:41 JavaScript so let me open up the sidebar
  • 01:02:44 and in our distribution folder let's
  • 01:02:47 create another folder name it jf and
  • 01:02:50 then within j/s let's create a file
  • 01:02:52 rename that main j/s all right close the
  • 01:02:57 sidebar let's start by targeting our dom
  • 01:03:00 elements so we'll set some constants
  • 01:03:03 here and we're gonna set the menu button
  • 01:03:08 we'll use document dot query selector
  • 01:03:13 and then here we can query by tag or by
  • 01:03:18 ID or by class so we'll use class here
  • 01:03:23 and menu button was the class alright
  • 01:03:29 and we'll create another constant of
  • 01:03:31 hamburger so the menu button again
  • 01:03:35 that's the basically the wrapper and
  • 01:03:38 then the hamburger is our span so we'll
  • 01:03:43 do a document query selector and that
  • 01:03:49 was a menu menu button burger okay so
  • 01:03:58 then we're going to create a variable
  • 01:04:01 called show menu we're gonna set that to
  • 01:04:04 false so initially the menu is not shown
  • 01:04:08 then we will add an event listener to
  • 01:04:12 the menu button we're going to listen
  • 01:04:18 for the click event and then we will
  • 01:04:21 toggle the menu we'll call this function
  • 01:04:26 that we're going to create here so we're
  • 01:04:29 going to create a function called toggle
  • 01:04:32 menu and so we'll start by saying if not
  • 01:04:40 show menu so the exclamation is a not
  • 01:04:45 operator so if show menu is false then
  • 01:04:49 we're going to get that hamburger class
  • 01:04:54 and we're gonna target the class list
  • 01:04:57 and we're going to add open so we're
  • 01:05:04 going to say that it's now open then
  • 01:05:08 we'll need to set our show menu to true
  • 01:05:13 so now we know that the menu is open and
  • 01:05:16 then we'll put our else statement so if
  • 01:05:19 the menu is open we want
  • 01:05:21 do the opposite right so hamburger
  • 01:05:25 classlist remove open so just the
  • 01:05:32 opposite and then we're also gonna want
  • 01:05:33 to set our show menu back to false all
  • 01:05:38 right so that's it for the JavaScript
  • 01:05:41 for now we'll add a few more lines in a
  • 01:05:42 minute but let's save this and let's see
  • 01:05:45 what it does so there we go it rotates
  • 01:05:50 and the middle line becomes transparent
  • 01:05:54 so if I click it again it should go back
  • 01:05:57 to normal there we go so that is the
  • 01:06:04 first part so the goal is to make that
  • 01:06:06 turn into an X so now what we'll do here
  • 01:06:10 is in our open class we're now going to
  • 01:06:15 target our pseudo elements so we'll do
  • 01:06:18 ampersand before so this is targeting
  • 01:06:22 that top that top bar and we're going to
  • 01:06:26 set the transform rotate to 45 degrees
  • 01:06:32 and we're also going to add a translate
  • 01:06:40 translate moves it and the first value
  • 01:06:43 is going to be your X or your horizontal
  • 01:06:46 position so we want to move it five
  • 01:06:48 pixels over and then the second value is
  • 01:06:51 your Y or your vertical so we want to
  • 01:06:54 move it down eight excells all right
  • 01:06:57 let's just let's save that and see what
  • 01:06:59 we have so far
  • 01:07:01 there we go that's part of our X right
  • 01:07:04 there okay so now let's target our after
  • 01:07:10 so amperes and after that's going to be
  • 01:07:14 the bottom line now remember the bottom
  • 01:07:16 line was a bit shorter so we need to
  • 01:07:17 actually change that so say with 28
  • 01:07:21 pixels make it the same as the top now
  • 01:07:23 and then we will add our transform with
  • 01:07:28 a rotates of this time will be a
  • 01:07:31 negative 45 degrees to make that other
  • 01:07:34 the X and then we will translate this
  • 01:07:39 one to three pixels over and negative
  • 01:07:43 seven pixels and move it up a bit and I
  • 01:07:46 had to play around with these numbers to
  • 01:07:48 get it to work just right but this is
  • 01:07:49 what I came up with so let's save that
  • 01:07:52 and now when I click it we should have
  • 01:07:55 an X there we go all right pretty cool
  • 01:08:00 okay so now we want to show the menu
  • 01:08:06 all right so for the menu let's target
  • 01:08:08 the nav and on that we want the position
  • 01:08:12 to be fixed and the top of zero and the
  • 01:08:20 left of zero width of 100 view it so
  • 01:08:26 with with view width it's the same as
  • 01:08:29 view height so 100 would it be like
  • 01:08:32 saying a hundred percent of the
  • 01:08:33 available viewport width we're gonna set
  • 01:08:36 the opacity to 0.98 so just want to see
  • 01:08:41 a little bit behind it and initially
  • 01:08:43 we're gonna set the visibility to hidden
  • 01:08:46 okay so within the nav we're going to do
  • 01:08:48 the same thing in JavaScript and we're
  • 01:08:50 going to add a class to it so it's gonna
  • 01:08:52 be the same thing we're going to do the
  • 01:08:54 amperes and so it's me nav dot open and
  • 01:08:59 then if it is open we want to change the
  • 01:09:02 visibility to visible still within the
  • 01:09:09 nav let's target our menu nav all right
  • 01:09:14 and then in the main menu nav menu items
  • 01:09:17 the home about me my projects contact me
  • 01:09:20 so we're gonna display those as flex and
  • 01:09:25 then we're going to see flex flow we'll
  • 01:09:30 set that to column and then if for some
  • 01:09:32 reason we have a weird device height
  • 01:09:36 will set this to wrap we're going to
  • 01:09:42 align items center justify content
  • 01:09:46 Center we want the height to be 100 view
  • 01:09:50 height overflow:hidden we don't want any
  • 01:09:54 scroll bars ever on our menu we're gonna
  • 01:09:57 set the background to the primary color
  • 01:10:00 I'll do the list style so let's get rid
  • 01:10:04 of those those bullet points let's do a
  • 01:10:09 padding on the right
  • 01:10:13 to see one rim and then we'll do a
  • 01:10:16 transform and translate actually we're
  • 01:10:21 gonna do a translate y we'll set this to
  • 01:10:24 a negative 100% then we're going to
  • 01:10:29 include our YZ mix in all right so what
  • 01:10:31 this is doing if you're not familiar
  • 01:10:33 with flexbox
  • 01:10:35 I have a video on that as well you can
  • 01:10:37 check it out at my channel so what we're
  • 01:10:39 gonna do on the menu is we have it
  • 01:10:41 translate Y so that is going to be your
  • 01:10:44 vertical and we have a set to a negative
  • 01:10:46 100% so that means the position of the
  • 01:10:49 menu is going to start off the page at
  • 01:10:52 the top and when we click the button we
  • 01:10:55 want it to come in from the top so what
  • 01:10:57 we'll do here is within our menu
  • 01:11:03 navigate sass aynd the open class then
  • 01:11:08 we want to transform translate Y to 0 so
  • 01:11:15 the initial position and we're going to
  • 01:11:18 need to go into our JavaScript add some
  • 01:11:20 more lines here so we need to also
  • 01:11:23 target our nav so that is going to be
  • 01:11:27 document query selector nav and then we
  • 01:11:38 will also need our new menu nav which is
  • 01:11:43 the UL that one's menu nav all right so
  • 01:11:57 we have those and so now we're gonna do
  • 01:11:59 the same thing in here we'll take our
  • 01:12:04 nav class list add open and then our
  • 01:12:12 menu nav
  • 01:12:17 open all right so I'm just gonna take
  • 01:12:21 these copy them down here and we're
  • 01:12:24 gonna change add to remove control D to
  • 01:12:29 select multiple of the same so if I
  • 01:12:31 highlight remove I can control D so and
  • 01:12:35 select all three of them and have three
  • 01:12:36 cursors and it's a good little shortcut
  • 01:12:39 to learn that's it for the JavaScript
  • 01:12:42 for now let's save that and let's see
  • 01:12:45 what we have so now you see that the
  • 01:12:48 menu items are gone so now when we click
  • 01:12:51 on this there we go now we need to
  • 01:12:53 format our actual links here so let's go
  • 01:13:00 back to our menu sass okay so still
  • 01:13:04 within our menu now we're going to see
  • 01:13:08 it was menu nav and ER score item so
  • 01:13:13 we're gonna target each item the menu
  • 01:13:16 itself is coming down from the top but
  • 01:13:19 we want the menu items to come in from
  • 01:13:22 the right so we're going to transform
  • 01:13:26 translate X this time so X is your
  • 01:13:30 horizontal and what the initial value is
  • 01:13:33 going to be 100 view with so we want the
  • 01:13:37 links to be all the way off the right
  • 01:13:39 side of the page we're going to include
  • 01:13:43 our transition mix in and then in
  • 01:13:51 JavaScript we're going to add the open
  • 01:13:54 class just like we did on the others and
  • 01:13:57 when it's open we want to transform
  • 01:14:01 translate X to the initial position so
  • 01:14:07 that we'll bring them in from the right
  • 01:14:08 we're also going to add an active class
  • 01:14:12 to our menu items and then we're going
  • 01:14:16 to target the a the link within and we
  • 01:14:20 want to set the color on that to the
  • 01:14:23 secondary the secondary color and so
  • 01:14:27 that's just going to highlight which
  • 01:14:29 page' currently
  • 01:14:30 and then in the JavaScript we have a
  • 01:14:34 couple more lines to add all right we're
  • 01:14:38 going to add a constant here of nav
  • 01:14:40 items and we'll do document and we can't
  • 01:14:46 do query selector because that selects
  • 01:14:48 one element so we're going to use query
  • 01:14:50 selector all and we're going to get an
  • 01:14:52 array of elements here and that is menu
  • 01:14:56 nav item all right and so then down here
  • 01:15:03 we need to add that we need to add that
  • 01:15:07 open class to these so what we'll do is
  • 01:15:09 we'll do nav items and we'll use a high
  • 01:15:13 order array function we'll do for each
  • 01:15:15 we're going to use an arrow function
  • 01:15:17 here so we're gonna loop through the
  • 01:15:23 items and we're gonna pull each time
  • 01:15:25 we're going to pull one item out and so
  • 01:15:28 in the function will say item class list
  • 01:15:31 dot add open alright so we'll do the
  • 01:15:40 same thing down here except instead of
  • 01:15:47 adding we're going to remove all right
  • 01:15:51 and that should be everything for the
  • 01:15:53 JavaScript now there's nothing else that
  • 01:15:54 we're going to add in here so let's see
  • 01:15:57 what that does now alright that came in
  • 01:16:02 if you could barely see it they come in
  • 01:16:04 pretty quickly from the right but at the
  • 01:16:07 same time that the menu is coming down
  • 01:16:09 so it's not very noticeable so let's add
  • 01:16:12 some more sass to our menu all right so
  • 01:16:17 now make sure that you are within the
  • 01:16:20 menu nav so all right and we're gonna
  • 01:16:25 use ampersand link so it's going to be a
  • 01:16:29 minion a blink we want to display these
  • 01:16:37 inline-block we're going to do a font
  • 01:16:43 size of two REM text transform to
  • 01:16:49 uppercase adding top and bottom of to m0
  • 01:16:56 left and right font weights of 300 and
  • 01:17:00 we're going to include our ease
  • 01:17:04 transition and then on hover we're going
  • 01:17:11 to do a color of secondary color
  • 01:17:16 alright let's save that let's see what
  • 01:17:18 we have now
  • 01:17:21 that looks pretty good but see they're
  • 01:17:22 coming in all at the same time and
  • 01:17:25 they're coming in too quickly
  • 01:17:26 let's go into our menu SAS and then all
  • 01:17:30 the way at the bottom we're going to
  • 01:17:32 include a for loop so very similar to
  • 01:17:35 JavaScript if you're familiar with that
  • 01:17:37 at 4:00 then we're going to declare a
  • 01:17:40 variable I and we're gonna say from 1
  • 01:17:44 through 4 because we have 4 links all
  • 01:17:51 right so now we're going to target our
  • 01:17:52 menu and you nav item and we're going to
  • 01:18:00 target the enth child and we can't just
  • 01:18:06 put the the variable in here you see how
  • 01:18:08 it's highlighting red is telling us that
  • 01:18:10 you can't do that within a function
  • 01:18:12 so we need to wrap this with dollar sign
  • 01:18:17 curly braces so now we've targeted the
  • 01:18:22 enth child so this is going to iterate
  • 01:18:25 through the links so the initial one is
  • 01:18:28 going to target the first link then it's
  • 01:18:31 going to count up one so that it'll be
  • 01:18:33 the second lake the third link the
  • 01:18:34 fourth link so on each link we're going
  • 01:18:38 to do a transition delay and in here we
  • 01:18:42 can use the variable as it is so we're
  • 01:18:45 gonna do the variable times 0.1 seconds
  • 01:18:50 and then we're going to add to that 0.15
  • 01:18:56 seconds I know this is a complicated
  • 01:18:58 formula formula but it's what I came up
  • 01:19:00 with all right so it's going to iterate
  • 01:19:03 through each one and it's going to add a
  • 01:19:05 delay to each one so they should stagger
  • 01:19:07 in alright let's save that and now let's
  • 01:19:12 see what we have there we go
  • 01:19:16 all right so let's look something is a
  • 01:19:19 little bit off here let me go yeah okay
  • 01:19:23 actually here in the whole menu the
  • 01:19:26 margin bottom or the margin should be
  • 01:19:28 margin bottom on the name it's a little
  • 01:19:33 bit off right there so let's save that
  • 01:19:35 there we go that looks much better so
  • 01:19:38 that's gonna be it for the home page so
  • 01:19:40 now let's look at the about page so let
  • 01:19:44 me open the sidebar here and in the
  • 01:19:48 distribution folder we want to add a
  • 01:19:50 file about HTML and let's go ahead and
  • 01:19:55 add the sass file for that as well we'll
  • 01:19:58 add the partial underscore about s CSS
  • 01:20:01 close the sidebar let me close some of
  • 01:20:05 these we don't need the JavaScript
  • 01:20:07 anymore we shouldn't need the menu all
  • 01:20:12 right so let's start with the HTML
  • 01:20:14 markup well we're just gonna begin with
  • 01:20:16 the index.html we'll copy everything
  • 01:20:19 from there paste it into about and let's
  • 01:20:23 say about Mike Smith all right the menu
  • 01:20:30 the now let's take the active off of the
  • 01:20:33 home and we'll put it on the about and
  • 01:20:40 then let's look at our section here
  • 01:20:42 let's change this to about and in this
  • 01:20:46 first part of the section here let's
  • 01:20:48 delete and we'll add a div about bio
  • 01:20:53 image
  • 01:20:58 and then within here we'll have an h2
  • 01:21:01 with the class of text secondary and
  • 01:21:08 we'll say bio so we're gonna add a class
  • 01:21:13 here text secondary so this will be a
  • 01:21:15 reusable class anything that we put it
  • 01:21:17 on will have the secondary color so
  • 01:21:19 let's go ahead and do that let's go to
  • 01:21:20 our main sass file and we'll just put it
  • 01:21:24 right here
  • 01:21:24 we do text secondary and this is just
  • 01:21:29 going to change the color to the
  • 01:21:32 secondary color right and let's just go
  • 01:21:37 ahead while we're in here let's add our
  • 01:21:39 about sass partial right in here let's
  • 01:21:45 add a paragraph and add some lorem in
  • 01:21:48 here thirty now under this we're gonna
  • 01:21:52 have some jobs almost like a small
  • 01:21:56 resume we'll add a div with the class of
  • 01:21:59 jobs another div jobs job so each job so
  • 01:22:11 the first one will say we'll put an H to
  • 01:22:14 the class of text secondary and let's
  • 01:22:20 say 2017 to current and then we'll do it
  • 01:22:27 H h3 we'll say that he works for Google
  • 01:22:31 and then an h6 in his position full
  • 01:22:37 stack developer and then we'll add a
  • 01:22:41 paragraph with some more lorem I put 20
  • 01:22:44 on there let's take this job here and
  • 01:22:47 let's duplicate it two more times so
  • 01:22:50 I'll shift down one two all right so
  • 01:22:54 let's change this one to 2015 to 2017
  • 01:23:01 and let's say that was Microsoft
  • 01:23:08 and let's see front-end developer and
  • 01:23:15 the last one here will say 2012 to 2015
  • 01:23:22 or we'll just make something up web
  • 01:23:25 design Co and we'll say graphic designer
  • 01:23:37 all right then everything else we want
  • 01:23:40 the social icons we want the footer yeah
  • 01:23:44 everything else is the same
  • 01:23:45 okay so let's got all that yep let's
  • 01:23:49 save this let's go into our SAS file all
  • 01:23:53 right we'll start with our about class
  • 01:23:55 let's add a padding on here to the
  • 01:23:59 bottom I'll add two REM and then within
  • 01:24:04 here we have our about bio image here
  • 01:24:12 we'll set the height to 50 view height
  • 01:24:16 the width will be 100% and then we're
  • 01:24:21 going to do the same thing with
  • 01:24:22 background that we did in the home page
  • 01:24:25 here so I'm gonna copy this I'll paste
  • 01:24:30 that there and then on here we'll have a
  • 01:24:37 display as flex and we'll set the Flex
  • 01:24:43 direction to column a line items center
  • 01:24:48 and then justify content we're going to
  • 01:24:52 use flex end okay now still within our
  • 01:24:56 about let's target the paragraph that's
  • 01:24:58 the bio paragraph will set a margin on
  • 01:25:01 the bottom there of two REM alright
  • 01:25:06 let's just see what we have so far we'll
  • 01:25:09 save that alright we'll go to about me
  • 01:25:13 it's already looking pretty good so we
  • 01:25:16 set the view height to 50% we've got the
  • 01:25:19 image back there with the overlay
  • 01:25:21 we've got the title here and the
  • 01:25:23 paragraph displaying is flex set it to a
  • 01:25:25 column and so that we can align Center
  • 01:25:28 and then flex to the end we still got a
  • 01:25:32 bit more to do here we put that this why
  • 01:25:37 does that say block end margin bottom
  • 01:25:41 all right so we put this two round
  • 01:25:43 margin on the bottom so it wouldn't go
  • 01:25:46 all the way to the to the edge actually
  • 01:25:49 here this paragraph should have been
  • 01:25:52 here so we have to be careful with
  • 01:25:54 nesting nesting too much can become an
  • 01:25:57 issue I didn't want to target all of the
  • 01:26:01 paragraphs so I actually missed
  • 01:26:05 something here we forgot to wrap this we
  • 01:26:08 needed to wrap this in and about bio all
  • 01:26:18 right so now let's target on still
  • 01:26:20 within the about let's target the about
  • 01:26:23 bio and we'll set the width here to 80%
  • 01:26:28 and then text-align:center and then I
  • 01:26:34 want to target the text secondary so
  • 01:26:40 that's the the heading I could just
  • 01:26:42 target the heading directly there's many
  • 01:26:45 different ways of doing things but we'll
  • 01:26:47 just target the text secondary and I
  • 01:26:49 want to add a padding on that on the
  • 01:26:51 bottom of one rim alright let's check
  • 01:26:54 that out there that's looking good
  • 01:26:57 alright so now let's style our jobs so
  • 01:27:01 still within about we'll go to jobs and
  • 01:27:06 then within there let's set the width to
  • 01:27:11 60 view with so 60% of the view width
  • 01:27:15 I'll set a margin on here of to rim top
  • 01:27:19 auto write 0 on the bottom bottom left
  • 01:27:24 we're going to display this as grid
  • 01:27:28 we'll set the grid template columns to
  • 01:27:33 initially one fractional unit and then
  • 01:27:36 the grid gap will set two to run so if
  • 01:27:43 you're not familiar with CSS grid I have
  • 01:27:46 a video on that as well check that out
  • 01:27:48 in my channel all right let's see what
  • 01:27:50 we have so far all right looking better
  • 01:27:53 now within jobs we have a jobs job so
  • 01:28:00 each job we're gonna have a background
  • 01:28:04 and we're going to lights and so we're
  • 01:28:10 gonna use the primary color and we're
  • 01:28:12 going to lighten it by 10% then we wanna
  • 01:28:17 padding will add 0.5 REM all around and
  • 01:28:22 then a border bottom will do five pixels
  • 01:28:28 solid and secondary color alright that's
  • 01:28:33 looking good um everything's a little
  • 01:28:35 squished together so within the job here
  • 01:28:39 let's just go ahead and target the
  • 01:28:41 headings directly will say h2 and h3
  • 01:28:47 we'll set those to a margin top and
  • 01:28:52 bottom of 0.5 rim and 0 left and right
  • 01:28:56 on the h6 I'm gonna set the top and
  • 01:29:02 bottom a little bit less so let's go
  • 01:29:04 point 3-0 on left and right there we go
  • 01:29:10 that looks pretty good
  • 01:29:12 alright so now notice the social icons
  • 01:29:16 and the copyright are getting in the way
  • 01:29:20 a bit alright so let's go down here
  • 01:29:22 still within about let's target our
  • 01:29:27 social icons and this time we're going
  • 01:29:31 to display these as flex and we want to
  • 01:29:37 set the Flex direction to column
  • 01:29:41 all right so now they're out of the way
  • 01:29:44 that looks good and we need to do
  • 01:29:47 something with the footer now so let's
  • 01:29:51 target the footer and we're going to
  • 01:29:56 transform we'll start by rotating it
  • 01:30:01 we're going to rotate it 90 degrees and
  • 01:30:05 we're going to translate or move it the
  • 01:30:12 x value will be a negative 3 rim and the
  • 01:30:16 Y value will be a negative 5 rim I had
  • 01:30:19 to play around with these numbers as
  • 01:30:20 well so there you go we flip flipped it
  • 01:30:25 up and put it on its side now it's out
  • 01:30:27 of the way as well all right so that is
  • 01:30:30 it for this page we'll get into the
  • 01:30:33 responsiveness once we're finished with
  • 01:30:36 all of our pages all right so now let's
  • 01:30:38 move on to our projects page so let me
  • 01:30:41 open the sidebar and in this let's add
  • 01:30:45 another file and this is going to be
  • 01:30:47 projects HTML and then let's go ahead
  • 01:30:53 and add our sass file as well the
  • 01:30:56 partial underscore projects dot s CSS
  • 01:31:02 all right close the sidebar and now what
  • 01:31:05 we'll do here is let's just use the
  • 01:31:08 about let's copy everything from there
  • 01:31:10 into projects and then we'll modify it
  • 01:31:15 alright so we'll say Mike Smith projects
  • 01:31:22 and let's take the active here and let's
  • 01:31:27 put it on the projects link
  • 01:31:31 all right so let's rename this to
  • 01:31:34 projects and I'm actually going to have
  • 01:31:37 the image in here as well so let's
  • 01:31:41 rename this to projects bio image and
  • 01:31:46 then within the bio image I will delete
  • 01:31:50 this we'll add an h1 with a text
  • 01:31:57 secondary class and we'll say my
  • 01:32:00 projects alright and then let's get rid
  • 01:32:04 of the jobs here
  • 01:32:08 alright so now here let's put a div with
  • 01:32:13 the class of projects items should be
  • 01:32:22 projects projects items and then
  • 01:32:29 projects item alright items and then
  • 01:32:35 item this time we're going to use an
  • 01:32:38 image and the source is going to be
  • 01:32:44 image and then project one for the alt
  • 01:32:49 so I'll just put my project
  • 01:32:53 all right under this we're going to have
  • 01:32:55 a div with the class of projects
  • 01:33:01 projects buttons all right so we're
  • 01:33:06 gonna have an overlay over these and
  • 01:33:07 there's going to be some buttons within
  • 01:33:09 the overlay so in here let's add a link
  • 01:33:14 the class of projects button and that's
  • 01:33:21 just not that's not going to go anywhere
  • 01:33:23 and then we'll put an icon here and it's
  • 01:33:28 going to be FAS F a I
  • 01:33:31 oops not gas FAS alright and then after
  • 01:33:38 that let's say
  • 01:33:41 preview all right and then let's take
  • 01:33:44 this link and we're going to alt shift
  • 01:33:48 down arrow copy it we want to links here
  • 01:33:51 this one is going to be instead of I
  • 01:33:55 it's going to be github and actually any
  • 01:33:59 since it's a brand we have to change to
  • 01:34:01 FA B for brand and let's change this to
  • 01:34:07 github alright so that is one project so
  • 01:34:14 let's highlight this and we're going to
  • 01:34:16 duplicate it we have six total projects
  • 01:34:18 so we're going to duplicate it five
  • 01:34:19 times alt shift down arrow one two three
  • 01:34:22 four five alright let's go back up to
  • 01:34:25 the first one alright here's the first
  • 01:34:29 one and all we're going to change on
  • 01:34:31 these is the the project image
  • 01:34:36 everything else will stay the same so
  • 01:34:39 two three four five and six
  • 01:34:48 alright and then everything after that
  • 01:34:50 the social icons the footer everything
  • 01:34:52 else would be the same so let's save
  • 01:34:55 this let's go ahead and check that out
  • 01:34:59 it's going to look ugly I don't know
  • 01:35:02 yeah okay can't really tell what's going
  • 01:35:04 on there so let's go to our SAS and the
  • 01:35:08 SAS here is going to be pretty close to
  • 01:35:10 what's in the about CSS one for the most
  • 01:35:13 part the top part anyway so let's just
  • 01:35:15 copy this and we'll make some
  • 01:35:17 adjustments alright so this is going to
  • 01:35:22 be projects padding-bottom to around
  • 01:35:26 this good image this time I want it to
  • 01:35:29 be a 30 view height background all of
  • 01:35:34 that's good flex columns Center flex and
  • 01:35:39 all of that's good so here's where
  • 01:35:42 things will change up a bit we'll take
  • 01:35:43 the paragraph out we're going to target
  • 01:35:45 the text secondary and I want the font
  • 01:35:49 size to be a bit bigger set it to 2m
  • 01:35:53 and I want the margin on the bottom to
  • 01:36:00 rim all right and then we don't need
  • 01:36:04 this
  • 01:36:08 alright so here a lot of this is the
  • 01:36:13 same so we'll change jobs to projects
  • 01:36:18 items so that's the wrapper
  • 01:36:24 all right so let's take the let's take
  • 01:36:26 this part out and then we also have
  • 01:36:32 projects item so on the item we're gonna
  • 01:36:37 set the position to be relative because
  • 01:36:44 we're going to need to absolutely
  • 01:36:46 position other items we're going to set
  • 01:36:49 the boarder bottom to five pixels solid
  • 01:36:55 and the secondary color we want the
  • 01:37:02 overflow to be hidden and talk about
  • 01:37:04 that in a minute
  • 01:37:06 cursor:pointer now within here we have
  • 01:37:11 the image and we want the width on those
  • 01:37:15 to be 100% right now they're way off the
  • 01:37:18 page all right let's um let's stop there
  • 01:37:25 and let's see what we have well I keep
  • 01:37:29 forgetting in our main sass we need to
  • 01:37:32 import that so let's import our projects
  • 01:37:35 save and that looks much better
  • 01:37:39 alright let's get back over here to our
  • 01:37:41 sass file so that's looking okay we're
  • 01:37:44 gonna do something with these buttons
  • 01:37:46 now let's go in here and we're gonna
  • 01:37:49 create an overlay this time we're going
  • 01:37:52 to use a pseudo element so we're going
  • 01:37:54 to use this is the projects item and
  • 01:37:59 then create an after we have our content
  • 01:38:04 we'll set that to blank position here is
  • 01:38:08 going to be absolute that's why we have
  • 01:38:11 the apparent container set to relative
  • 01:38:13 all right we're gonna initially set the
  • 01:38:15 top at 100% so that is gonna push it all
  • 01:38:19 the way to the bottom initially it's
  • 01:38:21 going to be under its element and so
  • 01:38:25 that's the reason why we set the
  • 01:38:26 overflow to hidden that way we don't see
  • 01:38:29 it because when we hover we want it to
  • 01:38:31 pull up from the bottom all right
  • 01:38:33 where's that left to zero set the height
  • 01:38:37 to 100% and the width to 100% we're
  • 01:38:45 going to set the background to the
  • 01:38:46 secondary color and opacity initially
  • 01:38:53 initially is going to be zero and let's
  • 01:38:56 include our transition alright that's
  • 01:39:01 looking good now that's really not gonna
  • 01:39:04 do anything and we'll save it you'll see
  • 01:39:06 it really looks the same because that
  • 01:39:08 item is hidden so let's create a hover
  • 01:39:12 event here so this is gonna be the item
  • 01:39:15 that's ampers an hover and what we're
  • 01:39:21 gonna do is on hover we need to target
  • 01:39:24 the pseudo element so that's gonna be
  • 01:39:27 after we want the top to be zero instead
  • 01:39:32 of 100% so it's gonna put it back where
  • 01:39:35 it should go and the opacity I want to
  • 01:39:39 set it to point zero nine I just want to
  • 01:39:42 barely see through it all right so let's
  • 01:39:44 save that now if we hover over it there
  • 01:39:48 we go it comes up from the bottom and
  • 01:39:51 becomes visible all right so now we
  • 01:39:56 still have these buttons to deal with
  • 01:39:57 okay so this so we're still in the item
  • 01:40:00 all right and what we need is projects
  • 01:40:04 buttons so projects is the main so we're
  • 01:40:09 gonna have to come down here and make
  • 01:40:11 sure that we're not under the item we're
  • 01:40:13 under the projects so amperes and
  • 01:40:18 buttons here we're gonna set a position
  • 01:40:23 of absolute on the top is going to be
  • 01:40:29 zero height of 100% width of 100% we're
  • 01:40:39 gonna set a z-index of one we're going
  • 01:40:42 to display these as a grid so let's do
  • 01:40:45 our grid template columns
  • 01:40:49 and these will always be in a two column
  • 01:40:52 layout so we want the preview to be on
  • 01:40:54 the left and the github to be on the
  • 01:40:56 right so we're going to use repeat I'm
  • 01:40:59 going to say repeat twice one fractional
  • 01:41:02 unit so that will make them equal and
  • 01:41:05 we're going to align items to the center
  • 01:41:09 and text-align:center
  • 01:41:14 okay let's save that and now they're
  • 01:41:18 there but I only want them to pop up
  • 01:41:20 when I hover let's target the individual
  • 01:41:24 buttons now so projects button here
  • 01:41:30 we're going to set the opacity to zero
  • 01:41:32 initially I'm going to set the color to
  • 01:41:36 the set text oops
  • 01:41:41 set text color based on the secondary we
  • 01:41:50 want to base it off to the secondary
  • 01:41:51 because that's what's going to be behind
  • 01:41:53 it all right and then let's include our
  • 01:41:57 transition and now we need a hover so
  • 01:42:01 campers and hover on hover I want the
  • 01:42:06 text color to change so we're going to
  • 01:42:09 say color and let's see we can do can do
  • 01:42:14 this on orange I think that's going to
  • 01:42:18 return a white but when I hover over I
  • 01:42:21 wanted to change the black just to show
  • 01:42:23 that that I'm hovering over it
  • 01:42:26 and so I want it to be the opposite so I
  • 01:42:29 know that this is white so I can kind of
  • 01:42:35 a hack but I can do I can wrap that in
  • 01:42:40 another set text color and so that's
  • 01:42:43 going to set the text color against
  • 01:42:45 white which is going to be black now
  • 01:42:48 what we need to do is I want the button
  • 01:42:51 to display when I hover over the project
  • 01:42:55 item so in order to do that I have to go
  • 01:42:59 to the project item here and we'll go to
  • 01:43:02 our hover event and after the
  • 01:43:04 pseudo-element will do projects button
  • 01:43:10 and then we'll change the opacity to 1
  • 01:43:14 all right let's save that let's see what
  • 01:43:17 we have okay the hover is not working
  • 01:43:24 why is this set to column rolled color
  • 01:43:30 sorry about that
  • 01:43:31 all right let's see okay it was opposite
  • 01:43:35 all right so initially this is black and
  • 01:43:39 when I hover over it it changes to white
  • 01:43:45 for the social icons on the footer there
  • 01:43:48 great we're gonna leave them just like
  • 01:43:50 that all right that's all looking good
  • 01:43:56 so now let's look at the contacts page
  • 01:44:00 let me pull out the sidebar and under
  • 01:44:04 dist let's create contact dot HTML let's
  • 01:44:10 go ahead and create our SAS partial
  • 01:44:12 underscore contact dot s CSS all right
  • 01:44:20 let's go ahead and in the main let's go
  • 01:44:23 ahead and add that before I forget
  • 01:44:25 and that was contact alright let's just
  • 01:44:31 let's use the project's HTML we'll copy
  • 01:44:35 that we'll paste that in the contact
  • 01:44:41 and we'll say contact Mike Smith all
  • 01:44:52 right and then let's change our active
  • 01:44:54 here to our contact link change our
  • 01:45:01 section class to contact and then
  • 01:45:06 everything within here we can go ahead
  • 01:45:08 and remove so we're going to add an h2
  • 01:45:15 and we're just gonna say contact me all
  • 01:45:21 right and then let's add a div with the
  • 01:45:22 class of contact list and then we'll add
  • 01:45:29 a div with the class of contact contact
  • 01:45:35 email within here we'll have an icon FAS
  • 01:45:41 FA and Volokh and then we'll just say
  • 01:45:47 email there then we'll have a div with
  • 01:45:51 the class of text secondary and within
  • 01:45:56 here we'll put the email so we'll just
  • 01:45:58 say email and email calm all right so
  • 01:46:02 let's copy this down twice all right so
  • 01:46:07 we have an email we also have a phone
  • 01:46:12 that's going to be mobile alt say phone
  • 01:46:19 and this just put a number in here there
  • 01:46:28 we go and then this last one is going to
  • 01:46:32 be address and for that we'll use the
  • 01:46:38 icon marker alt and say we'll say
  • 01:46:44 address and then just put a generic
  • 01:46:48 address one two three
  • 01:46:50 first streets Houston Texas all right
  • 01:46:57 everything else past here we're gonna
  • 01:46:59 keep the same all right
  • 01:47:02 let's save that let's go to the contact
  • 01:47:06 page it's gonna be ugly
  • 01:47:07 there we go all right so let's go to our
  • 01:47:10 contact SCSS so from here this one's
  • 01:47:14 gonna be a lot like home so let's just
  • 01:47:17 copy all of this from home into here
  • 01:47:23 change this to contact all right so
  • 01:47:26 we're gonna have a view height of 100%
  • 01:47:31 padding on the top 40 view height okay
  • 01:47:34 so here we're going to change this we're
  • 01:47:37 gonna display this as flex and we're
  • 01:47:41 going to set the Flex direction to
  • 01:47:44 column background is good we're going to
  • 01:47:49 use that same thing alright and so then
  • 01:47:51 everything after this we can take that
  • 01:47:54 out so here we're going to target the h2
  • 01:47:59 and we're going to set the font size to
  • 01:48:02 3 rum and margin-bottom
  • 01:48:08 to two rum and then we're going to
  • 01:48:11 target the contact contact list we're
  • 01:48:18 going to display this as grid so get our
  • 01:48:23 grid template columns and initially it's
  • 01:48:27 going to be set to one fractional unit I
  • 01:48:29 want a grid gap to run and we're going
  • 01:48:37 to change the font lips we're going to
  • 01:48:38 change the font size to 1.5 rim alright
  • 01:48:43 and then yeah let's let's say that see
  • 01:48:46 what we have alright that's looking okay
  • 01:48:49 so far let's see I think I missed
  • 01:48:52 something here flex column yeah we need
  • 01:48:56 to align items Center there we go
  • 01:49:03 so that is all of the pages let's go
  • 01:49:06 through we've got our main page here and
  • 01:49:10 then our about me and projects looking
  • 01:49:18 good alright and then the contact
  • 01:49:26 actually you know what I want to do on
  • 01:49:29 the contact I want to change the social
  • 01:49:33 icons I want them to be up here so right
  • 01:49:37 here let's do social icons let's change
  • 01:49:44 the position to initial and we'll set a
  • 01:49:48 margin top on there of to around yeah I
  • 01:49:52 like that better it's all in the same
  • 01:49:54 spot to contact and next we'll make this
  • 01:49:57 responsive all right let's see what this
  • 01:49:59 looks like before we make any responsive
  • 01:50:02 changes actually doesn't look terrible
  • 01:50:09 but obviously we don't want to have this
  • 01:50:12 menu when we're at this size let's see
  • 01:50:17 the other pages that actually doesn't
  • 01:50:20 look terrible either but we'll make a
  • 01:50:23 few changes here maybe make this text
  • 01:50:25 bigger and let's check out projects oh
  • 01:50:29 yeah that's that's too big you know
  • 01:50:33 we'll need to adjust that grid and and
  • 01:50:37 we'll make these in line instead of
  • 01:50:41 stacked all right so the first thing
  • 01:50:48 that we need to do is we'll go to our
  • 01:50:51 config in our sass file and we will go
  • 01:50:55 and then at the bottom we're going to
  • 01:50:57 include some mix-ins
  • 01:50:58 so at Mixon and we're going to create a
  • 01:51:03 mix and for for some media queries so
  • 01:51:07 we'll start with a medium sized and so
  • 01:51:11 we're going to include in this mix in a
  • 01:51:13 media screen
  • 01:51:16 and let's it will put a minimum width of
  • 01:51:22 768 and then in here we will put at
  • 01:51:28 content so now when we call this mix in
  • 01:51:31 whatever content will be will get passed
  • 01:51:34 into this media query all right so
  • 01:51:37 that's for the medium size let's go
  • 01:51:39 ahead and just copy this down alt shift
  • 01:51:41 down we're going to create two more so
  • 01:51:44 we're going to create a large and that
  • 01:51:47 is going to be 1024 pixels and then
  • 01:51:50 we're gonna create an extra-large and
  • 01:51:53 that will be anything over 1600 pixels
  • 01:51:58 all right and I'll save this and let's
  • 01:52:01 start with let's just go back to the
  • 01:52:03 home page here so what we're gonna do is
  • 01:52:09 we're gonna create a new sass file I'm
  • 01:52:13 gonna name it underscore responsive dot
  • 01:52:18 F CSS all right and then let's go to our
  • 01:52:25 main s CSS and let's include that there
  • 01:52:33 we go
  • 01:52:34 save that so now in our responsive we're
  • 01:52:39 going to include our media queries those
  • 01:52:42 mix-ins
  • 01:52:43 so we're going to include media medium
  • 01:52:47 we'll start with the smaller smaller
  • 01:52:49 sizes and then work our way up so start
  • 01:52:52 with the menu so menu button at this
  • 01:52:58 size we want the visibility to be hidden
  • 01:53:01 and then our nav I want the visibility
  • 01:53:07 of this to be visible and then within
  • 01:53:10 the nav we have our menu navigation
  • 01:53:17 because we don't want the full page nav
  • 01:53:20 to come up we want a nav bar at the top
  • 01:53:22 so let's change this display here to
  • 01:53:25 block by default it's fixed
  • 01:53:29 and then we're gonna transform and
  • 01:53:31 translate why because we had that all
  • 01:53:37 the way at the top so now we need to put
  • 01:53:39 it back in its place and then let's set
  • 01:53:43 a height here to 100% that is available
  • 01:53:47 to it set the background currently it
  • 01:53:51 has the dark grey back around the
  • 01:53:53 primary color so we're going to set that
  • 01:53:56 to transparent and then we're going to
  • 01:53:59 text the line to the right then within
  • 01:54:02 here we have our items so that is menu
  • 01:54:06 nav item and we need to display these in
  • 01:54:11 line all right and then we're going to
  • 01:54:16 add a padding on the right of 1.5 mm
  • 01:54:24 then we need to target the menu link
  • 01:54:28 then on the link we're going to change
  • 01:54:31 the font size because we we made it
  • 01:54:33 bigger earlier so by default I think it
  • 01:54:36 was three round so we're gonna change it
  • 01:54:38 to 1.5 mm let's see what we have so far
  • 01:54:40 we'll save that all right now let's
  • 01:54:43 check it out so we get over 768 there we
  • 01:54:48 go nice that looks good back all right
  • 01:54:58 let's see what we need to do on the
  • 01:55:01 about page I think we'll just make this
  • 01:55:04 text a little bit bigger as we go yeah
  • 01:55:13 okay so outside of so we're still inside
  • 01:55:18 the media the medium media query or
  • 01:55:21 outside of the nav so we're gonna add an
  • 01:55:24 about bio and then let's change the font
  • 01:55:30 size to 1.5 REM make it just a little
  • 01:55:35 bit bigger all right let's see and that
  • 01:55:40 looks good
  • 01:55:43 yep alright let's look at the projects
  • 01:55:51 so it's one column there and then yeah
  • 01:55:56 we're going to want to change that
  • 01:55:59 so let's target projects and then within
  • 01:56:04 the projects I think it was the bio
  • 01:56:08 image
  • 01:56:11 yeah the heights on there because let's
  • 01:56:13 see when we get yeah it's getting a
  • 01:56:17 little too close I think so let's change
  • 01:56:20 the height so I think it was 50
  • 01:56:26 initially so let's go 40 view height and
  • 01:56:31 then projects items let's change the
  • 01:56:39 grid templates columns and we're going
  • 01:56:42 to change that to a repeat two of one
  • 01:56:46 fractional unit all right and then this
  • 01:56:51 my projects would probably need to
  • 01:56:53 increase that a bit so that was say we
  • 01:56:56 could target the text secondary and
  • 01:57:01 we'll change the font size there to
  • 01:57:04 three rim alright let's save that and
  • 01:57:08 see what we have yeah that's that looks
  • 01:57:13 good all right I don't think there's
  • 01:57:20 anything I'll say let's go to contacts
  • 01:57:25 yeah so let's let's make this – lets add
  • 01:57:31 contacts contact list and what the grid
  • 01:57:40 template columns and we'll do the repeat
  • 01:57:44 to 1fr on that one as well
  • 01:57:52 alright let's see yeah that's good
  • 01:57:59 alright so that is on medium screens so
  • 01:58:02 let's move on to the large screens a
  • 01:58:06 couple of things that we're gonna change
  • 01:58:07 here so let's include that mix in media
  • 01:58:11 query so include media large I think
  • 01:58:17 projects yeah let's let's make projects
  • 01:58:22 let's turn projects into a three column
  • 01:58:24 at a large layout so let's see where was
  • 01:58:29 that we could take this paste it here
  • 01:58:38 get rid of the bio image and close that
  • 01:58:45 out and change this to a three that
  • 01:58:48 should work I'll save it
  • 01:58:52 alright medium-sized to large size three
  • 01:58:57 yeah that's good
  • 01:59:00 alright and then let's do the same thing
  • 01:59:03 for the contact let's change that to
  • 01:59:06 three so I'll just copy this put it
  • 01:59:12 there and change that to three save it
  • 01:59:17 to there we go that looks pretty good
  • 01:59:21 that looks good
  • 01:59:25 alright and then the last part let's see
  • 01:59:29 let's go to projects so right in this
  • 01:59:39 area the image is getting too close so I
  • 01:59:44 want to increase the height on this on
  • 01:59:46 an extra large screen so let's go to our
  • 01:59:51 last mix in that's the large media query
  • 01:59:56 so let's include it's the extra-large
  • 02:00:01 and so let's hear that was a projects
  • 02:00:06 bio image and then let's change the
  • 02:00:12 height to 50 VH there we go that looks
  • 02:00:23 good all right and then let's see we
  • 02:00:32 could make this have a fourth column
  • 02:00:34 possibly but I think it looks good
  • 02:00:39 so let's go through it real quick we've
  • 02:00:41 got the main screen looks good on a big
  • 02:00:44 screen
  • 02:00:49 and go down to a small screen looks good
  • 02:00:53 as well we have our menu right let's go
  • 02:00:57 to our about me that looks good let's go
  • 02:01:02 to a larger screen now I could take
  • 02:01:05 these and turn them into columns as well
  • 02:01:07 but I like the way that they're stacked
  • 02:01:10 because of the years so the current is
  • 02:01:13 on top and then it goes down so I'm just
  • 02:01:15 going to leave this as a column I think
  • 02:01:17 it looks better and then projects we
  • 02:01:20 already looked at that that looks good
  • 02:01:22 and then contact so that that looks good
  • 02:01:32 as well
  • 02:01:32 nice
  • 02:01:35 all right so let's talk about deploying
  • 02:01:37 this so we're gonna deploy this today on
  • 02:01:39 github pages and we could also use net
  • 02:01:42 liffe I that's another good one but I
  • 02:01:43 went ahead and uploaded the project to
  • 02:01:45 github and if you're not familiar with
  • 02:01:47 git and github I have a video on that as
  • 02:01:49 well you can check out in my channel but
  • 02:01:51 it's very simple so I've got this
  • 02:01:53 uploaded and we're gonna go to settings
  • 02:01:55 and then if you just scroll down to the
  • 02:01:59 github pages portion I just set this to
  • 02:02:02 the master branch
  • 02:02:07 alright let's scroll back down and now
  • 02:02:12 it says your site is ready to be
  • 02:02:14 published so we could set a custom
  • 02:02:17 domain if we want I'm just gonna leave
  • 02:02:19 the default there so now if we go here
  • 02:02:26 and go to dist
  • 02:02:28 there we go so this is live on the
  • 02:02:32 internet now so that's going to be it
  • 02:02:34 for this video if you stuck around to
  • 02:02:36 the end thank you for watching
  • 02:02:37 alright so before you go if you like
  • 02:02:40 this video a thumbs up is appreciated I
  • 02:02:42 upload new content every week so hit
  • 02:02:45 subscribe in the Belle to get notified
  • 02:02:46 if you think this video or any of the
  • 02:02:49 videos on my channel might be helpful to
  • 02:02:50 someone else please share them i'm also
  • 02:02:53 on twitter and instagram at code stacker
  • 02:02:55 thanks for watching