Responsive Portfolio Website Project

Responsive Portfolio Website [2] – Homepage & Main Sass

alright guys in the last video we just can't kind of give you an intro to the project and we also created our SAS workflow so I have nodes SAS running

right now so I'm just gonna make this a little smaller and we're gonna just create our index HTML markup which which isn't that much basically if we look at the finished project here this is the

header this area up here with the menu button also everything in this overlay will go in the header and then this is the main content here so it's just split up into two parts basically so let's go

over to index.html let's get rid of this h1 and let's create a header tag and inside here we're gonna have the menu button remember I said it's gonna be all CSS so we're gonna have a class of menu

– BTN and inside here we want three divs with the class of BTN – line oops BTN – line so I'm going to use Emmet here and do times 3 and hit tab and it'll give me three of them so each of these divs

represents one line in this little icon thing now under the div but still in the header we want to create a nav with the class of menu ok and this is going to be broken into two parts so we have this

side with this side which is menu branding this side is menu nav so let's create a div here called with the class of menu branding and then under that we want a UL with the class of menu – nav

so the menu branding this is actually a background image it's not going to be an inline image tag so it's just going to be a div with the class of portrait ok and we'll put the image in through CSS

and then in the UL we just want a bunch of allies so these lis are going to have a class of nav – item and inside here we'll have an a tag with the class of nav – link okay and this is going to go

to slash and then the text inside the a tag is just going to say home like that and I'm just gonna close this up may give us a little more room okay so we want to copy this Li down so

we can do a new shift option down or shift alt down on a1 windows so one two three because we went four all together this second one will go to about dot HTML we're going to change the text to

about me and then this one here we'll go to work dot HTML we'll change this to my work and then this last one here will go to contact dot HTML and we'll change this to how to reach me

all right so that's our header so if we save this and we take a look it's gonna look absolutely horrendous because we have no CSS yet and you know hTML is just very very ugly without CSS so under

the header we're gonna put the main area so though I'm gonna put this in an html5 main tag so it's same main and inside here we'll have actually before we do that let's give this an ID of home each

page I want to have its own ID and then for the main tag and then if we take a look at the project here I want this to be a heading and this to be this to be an h1 this to be an h2 with their own

classes so h1 this is going to have a class of LG – heading like that and we'll say John Doe and then we're gonna have an h2 underneath which will have the class of SM – heading so small

heading and in here we're gonna say web developer programmer designer and entrepreneur so entrepreneur I'm a horrible speller what is it PR e and was he you are I'm a horrible speller

alright so web developer program our entrepreneur what else do we want to do here now notice how the last name is a different color so I'm gonna wrap the the last

name in a span with the class of text – secondary because that color is actually going to be the secondary color in our SAS in our SAS variable so we just want to move the span right here

like that okay and if we save this and take a look it's gonna look like this now for the icons we're gonna need the font awesome icon library so we want to head over to font awesome comm and you

want to go to this is the responsive version so we'll hit that menu and then go to use on the web getting started and then grab this link right here okay so we're gonna grab that and put that in

our index page at the top in the head right above where we put the CSS file in so that'll allow us to use the icons okay so I'll close that up close this up as well and then down back down here

under the h2 we're going to put a class a div with the class of icons and let's put in a link and I'm not gonna have these links go anywhere but obviously you would have them go to the person's

profile like their Twitter profile and so on the first icon is going to be Twitter so we want an eye tag with the class of F a B and then also a class of FA – Twitter and with Emmet we can do

that like this and hit tab okay so that'll give us the Twitter icon let's save make sure it works good so I want this to be a little bigger so with font awesome we can add the class of FA – 2 X

and save and it gets a little bigger you can also do 3 X for X but we want to X so I'm going to take this copy this down 3 more times second one is going to be Facebook third

one will be LinkedIn and the last one is going to be github okay so we'll save that now we have our four icons do it now the last thing we want on this page is just a link to our

JavaScript file which we haven't even created yet so let's go right above the body and put in a script tag with a source attribute that points to J s / main j s and we might as well create

that so let's go into dist okay make sure you're in dist create a folder called J s and inside J s create a file called main dot J s and we're not going to touch that just yet all right so

that's our HTML that's all we need on this page so we can actually close this up now let's head over to our main dot s CSS we can close that package.json up so the

first thing I want to work on as far as our CSS or sass is just like the core the core styling now I want to add a border box I'm sorry a box sizing property for everything so if you want

to select everything in CSS you use the asterisk and we want to set box sizing to border box which will just take a little make it so that if we have padding on anything like padding on the

inside it's not going to affect the the height the width or the height of it it's just going to be it's just going to be within the box model so we want to do that and then in the body we want to

make sure that it has a height of a hundred percent at all times we want to take the margin away so margin zero and as I save this will take effect now the font we obviously don't want Times New

Roman so let's change the font family and let's change it to this Segoe UI and then to homogeneous sans serif so I'm gonna save that you see the fonts changed let's see what else do we want

to do here let's let's change the line height so basically the space between lines I'm going to put 21.5 and save and I think that's all we want to do here as far as the body so

below it let's take care of the headings so we'll put a comment in here we'll say headings let's do h1 h2 h3 should be commas h2 h3 and for all headings

I want no margin so I'm gonna set margin zero when I save you'll see that that margin gets it disappears and then I'm also gonna add a font weight I don't want it to be I don't want it to be that

thick so I'm gonna say font – weight and we'll set it to 400 save and now you can see it's it's much thinner so with sass what we can do instead of doing like h1s going down here and doing h1 dot LG –

heading like we would with regular CSS we can go inside here and we can nest now we don't want to just do dot LG – heading because what this is referring to is a class of LG heading within an h1

h2 or h3 we want it to be attached to it because if we look at our HTML we're get it we want the h1 that has LG heading as its own class not nested within it so what we do is we just add an ampersand

in front of this okay so that's going to be the same as doing h1 dot LG heading or h2 h3 dot LG heading and for this we want to set the font size to 6 REM okay so I'm gonna save that and it's gonna

get really big now if you don't know what a REM unit is it's basically a multiplier of the the HTML tags font size so the font size of this right here alright and its default font size is 16

pixels so unless you you declare it here as something else it's going to be 16 pixels now one REM is going to be 16 pixels if we have 6 REMS that's going to be 6 times 16 okay and

start in terms of font size and I can show you this in the chrome tools so if we open up our chrome tools with command option I or f12 on Windows and we go down here to our CSS let's

actually use this tool right here to select the h1 you can see font size 6 R M we already know that we can see that here but on this side you can see the computed properties and if you look at

the font size it's 96 pixels because 16 pixels times 6 is 96 now if I were to declare my HTML font size here so let's say font size and let's say 10 pixels and save now you can see the computed

size is 60 pixels because now that it's 10 6 r m is going to equal 6 times 10 rather than 6 times 16 ok so hopefully that makes sense and I have a video on my channel that talks all about r m and

m units and vh and BW and stuff like that mmm units are basically the same thing except it doesn't go on the HTML element it goes on the parent element of

whatever you're styling it goes on that font size all right so let's let's also add here actually that's all we want I just want to change the font size and then for the small heading let's do

ampersand dot SM – heading for this I want to get rid of the margin bottom let's do margin bottom I'm sorry not get rid of it add to it I want to add to R M which is going to be 32 pixels save that

and you can see it kind of pushed that the icons down and then I'm going to add in just an overall padding okay so I'm going to say padding let's do 0.2 RAM on the top and bottom

and let's do one rim on the left and right all right now the reason I'm doing that is because I'm actually giving it a little background if we look at the finished project see how the the heading

has a little background that's slightly lighter so what we'll do is we'll say background and with sass we have something called lighten that we can use so lighten takes in two parameters one

is the the orig color which in our case is the primary color and then how much we want to lighten it so I'm going to say 0.5 and if I save that you'll see that actually

you can't see that can you background what I do I do wrong here I'm not 0.5 – there we go alright so now you can see that we have that that background and we can see the

padding the space between now we're going to have a background image at least we're going to have the ability to so we want to be able to kind of see through this and we can't do that like

this right now it's just going to completely block out the image to be able to see through it we want to wrap it in an RG be a function okay so we want to wrap this again like that and

then put a comma here and then 0.5 is the opacity that we want okay so I'll save there'll be no difference now but you'll see the difference when there's an actual image

all right so that's that's it for the headings now let's just move on to the links so all links I want the color to for now be white and I want to take away the ugly underline so text – decoration

we're going to set to none okay so looks a little better now let's work on the header okay so for the header we're gonna set the position to fixed because I want I want the header to always stay

at the top okay so the headed by the header I mean this right here where the menu button is I always want that to be at the top even if we have to scroll okay so for instance if we go here

actually let me just yeah so if I scroll you can see how it stays stays at the top if we don't make that fix it's not going to stay so header fixed we're gonna put a z-index of two just so it's

always up front basically a z-index is how close to you an element is so if we put like a z-index of 1 it would be behind as the index of 0 would be behind so the bigger the number the closer

towards you it is and then let's set the width of the header to a hundred percent so it kind of just stretches across the whole screen okay and since we set it to fix now everything is basically like

pushed under it now the text secondary we might as well take care of that texts – secondary so we want to set the color of this to a variable that we haven't actually created yet so let's create

another variable called secondary color – color and that's going to be it's going to be a yellow color it's going to be a hexadecimal value of EEC e1a okay so that's the color we want for

secondary and then down here for color will just add secondary color save and now we get our little yellow last name so now let's deal with the main so if we look at the main tag that's everything

that's not in the header so that the h1 the h2 the icons so we want to add some styling for that so let's say main and we're gonna add padding let's add padding all around a 4 R M so if I save

that it's going to just do 4 R M around everything okay that's in the main and let's set the height to 100% and then we want to style the icons because right now the icons there they're just too

close together and also I want the hover to be the secondary color if we go to the file project here and we go to the homepage and we hover over them we get the secondary color so inside main

because we can do nesting here we're going to say dot icons so since we're nesting it this is only going to affect the class of icons inside of a main tag that's how this works so let's add

margin top I want to just push them down a little bit so I'm gonna say margin top one rim push them down and let's add for each for each icon its wrapped in an a tag right so we want to put an

in here oh yeah so if we look here inside the div class icons each icon is wrapped in a link in an a tag so for each one we're gonna add some padding let's do padding of 0.4 REM and save and

now you can see there's some space in between each one now for the color I only want it to be on the hover so we can go inside this a tag and we can use ampersand and then colon hover okay

which is the same as doing like in regular CSS just a colon hover like that and then on hover we want the color to be secondary so let's say secondary color and let's save that so now when I

hover over it we get the yellow here all right now we're gonna want to do some transitions and transitions and CSS basically it's just it's taking time to do something whether it's fate whether

it's bringing in something from a position like fade come bringing it in from somewhere moving it around or what else changing colors changing opacity so you can fade stuff in that's what a CSS

transition does so if we add to this hover right here let's see what do I want to do let's let's say transition and let's say we want in that the first parameter is what you want to transition

so basically we're just transitioning the color but I'm gonna say also basically all anything that is transitional okay and then the next is going to be the time it takes so I'm

gonna say 0.5 seconds so a half a second and then the next is is like the the motion I guess which is we're gonna do ease out okay so it kind of slowly eases out now I save this and we go and we

hover over you can see it just kind of fades in see how that it instead of just going right to yellow it fades and actually if I make this a bigger number maybe you can see it better

we'll do 1.5 and see it fade in so that's basically what the transition is doing now I could just put color here like that because that's basically the only thing that we're transitioning

that's the only property that there is here but what I want to do is set it to all because I'm going to create a mix in because we're going to be using this this same thing the same transition for

a lot of different things so I'm going to go up here to the top and I'm gonna do at mix in which is basically like a function and call this ease out okay so we're going to say mix in ease out and

then let's take that transition so this whole thing this whole line right here I'm going to just cut that and I'm going to put that up here like that and then all we have to do to use it is go down

here and we can simply do at actually I'm sorry I want to do include so when you use a mix in you want to do at include and then the name of the mix in which is ease out like that so let's

save and we should get that same effect so we get that that ease in except I want to change it back to 0.5 not 1.5 that's too long so 0.5 so now anytime we want to add

this transition to anything we'll just go ahead and add this instead of repeating the same thing and that's what variables and mix-ins are good for alright so I think that's pretty much it

for like the oh you know what we want to do is we want to move this down because if we look at the final project notice how light the heading and stuff is pushed down more than the inner pages

see how that these are up higher so remember we gave the main and ID we gave it an ID of home so inside main I want to be inside main but not inside anything else so it would be right here

we're just gonna do ampersand ID home so many main that has the idea of home this is going to affect so I just want to set the overflow to hidden because I don't want to have any scroll bars ever on the

homepage it should always it should always not have scroll bars that's what that's going to do and then the h1 inside the main tag with the idea of home I just want to add a margin – top –

and I'm gonna set it to 20 VH and save let's go back to ours and you can see it got moved down now VH is another unit just like REM and M basically it stands review port heights and you can think of

it as and I've said this before think of the height as a hundred slices across so if you say 20 VH it's gonna take 20 of those slices and that's that that's what this is if you said a hundred VH it

would take up the whole thing if you said fifty VH it would take up half it would take up 50 of those 100 slices there's also V W which you could think of the slices going to up and down

and a hundred would be the whole hundred if it was fifty it would be 50 of those 100 okay so hopefully that makes sense that's that's I think it was I think it was Travis from dev tips that gave that

explanation and that that just made a lot of sense to me so that's that's what I use to explain those units so now what I want to do is take care of the the background image so we're gonna create a

variable up here called show – home – image and that's going to be set to true by default and I also want to put the actual image in a variable so home image which will be URL and I'm gonna we need

to get the actual image now I'm gonna include the code in the description so you can go ahead and grab that and that'll include the image so I'm going to go in my disc four and I'm just going

to create a new folder here and call it IMG and then grab the images and bring them over so in in your code you should have whoops let me just copy these so you should have background JPEG which

is the background to portraits one his portraits small and then projects which includes all the the images for the my work page so you want to get those in your disk colder in an IMG folder so now

I'm going to include the background image here which is going to be dot dot slash because we want to go outside of the CSS folder and then into IMG and then into the image name which is

background dot jpg all right hat jpg and then the last variable I want here is the opacity let me just close this sidebar up here so we're gonna do background – opacity and we're going to

set that to 0.9 all right so now let's handle the actual background now there's going to be a lot of stuff like we need to check to see if the home if show home image is true if it is then we want to

include the background we also need an overlay because we don't want just the image we won't be able to read the text we need this we need this gray overlay or whatever the primary color is as an

overlay so I don't want to do all that stuff inside here in the body so I'm going to create a special mix in for it so we're going to say mix in and we'll call it background and then we're just

going to include that inside the body so include and then background yeah actually we do that and yes we actually don't need the parentheses so it saved that so in this mix in here we first

want to check to see if the image is actually enabled because if it's not then we don't we don't want to do anything else it should just be just like this but if it is so we'll say if

actually we need to do a tiff in sass and then we want to do show at the variable of show home image okay so if showhome image is true then we want to take the BG image remember we

gave the eye the body and idea of BG image we want to take that so we're gonna say ampersand ID BG – image okay and this is gonna work because this mixin is being placed

in the body so it's going to look at the body and it's going to look at any ID of BG image and then we're going to set the background to the home image we have it in a variable so let's go ahead and save

that and there we go so we get the background as an image now I want to add the background let's see I'm gonna add a couple properties here background attachment we want to set that to fixed

and see how it's only showing part of the image we want to set the background size backgrounds not position size we want to set that to cover okay we want to cover the entire space so let's save

and there we go now obviously this is this is not acceptable the text is pretty much unreadable so we need to have what's called an overlay and we could crew we could put another element

inside here inside the body and we could call it overlay and save it and then go back and inside here we could add in dot overlay okay so overlay inside the body actually we would want the overlay in

the BG image body so we want to put that here like that and the overlay we want to give it a position of absolute okay so we want it to basically cover the entire thing we want it to cover this

whole the whole body and to do that we want to start at the zero top so basically top 0 right 0 so we're going to start right here top right 0 we want to go over 100

and up and down a hundred cent so let's do with 100% and let's do height 100% so if I go ahead and save this nothing's gonna happen because we have no background here for the overlay now if I

say I want a background and I use the primary color and save what happens is the color is now over the image and we can't see the image so we have to use an RGB a value which is red green blue

alpha and it allows us to have a color but also have an opacity so you can see through it now in SAS we can actually wrap this primary color in our GBA so we can go like that and then our GBA takes

in a color and then a second value of the opacity now remember we have a variable called background opacity so I'm going to put that in and save and there we go now we have a problem here

and can you see what that is the text is behind the overlay now remember the Z index to Z index took the higher the number the closer it is to you so this overlay I want to push behind the the

content the text here so we want to set a Z index so I'm gonna say Z – index and I'm gonna save it to a negative number just to make sure that it gets pushed back so let's set it to negative one and

save and there we go so now the text moves up front okay so if we wanted to change the opacity we could simply say like 0.5 and save and there we go but I like nine now one thing we could

do to just to save a little markup here is this class of overlay we don't actually need this because we can use something called a pseudo element we can use an after pseudo element so if I get

rid of this overlay right here okay obviously that's everything's going to go away the styling I want to change this from being a class of overlay to being as a pseudo element of

there : after so we can say hamper simp and then : after now whenever used before or after you put in a Content variable and you can actually insert content before or after whatever it is

in this case the BG image the body with the idea of BG image now I don't want any Content that should be a semicolon I don't want any content so I'm just gonna put an empty string here just just just

some quotes so let's go ahead and save that and we get the same effect so it essentially put in a pseudo element something that's not actually in the HTML but the CSS treats it like an

actual element that's after this element hopefully that makes sense it's really hot it's actually pretty hard to explain but I think this is cleaner because we don't have to actually have an overlay

div inside of our HTML all right so I think that's going to be it for this video guys we pretty much have the the home page done except for a couple other things that relate to all pages not just

the home page so in the next video I want to start to work on the menu this is going to be probably the the most difficult part of the project we're going to use quite a bit of sass we're

actually going to create a separate file well that's speaking of that let's do one more thing before we go see how we have all these variables and mix-ins right in our main s CSS let's put this

in a different file because this is getting really messy so let's create a new file and this is gonna be a partial so partial should start with an underscore and then we're gonna call

this config dot s CSS and then we'll take all the variables and mix-ins out so I'm going to cut those out and let's put these in config and save now if I save main dot s CSS it's going to

actually give us a bunch of errors down here because it's looking for stuff that is no longer here so we want to import one import our config file and to do that we simply do at import and then

inside of quotes we put in the name of the file not the underscore or the dot CSS just it's config and let's save and now everything's back okay and this is much

cleaner because all of our variables and stuff are now held in the config file all right so that's it guys in the next video we'll start on the menu

In this part we will create the homepage HTML markup as well as the core Sass/CSS for the project. You will learn about variables, nesting and more

Code For This Project:
https://github.com/bradtraversy/modern_portfolio

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia