Responsive Portfolio Website Project

Responsive Portfolio Website [6] – Work & Contact Pages

all right in the last video we created our boat page and we added the responsiveness we use the grid grid template areas now we're going to create

our not a contact our work page so let's create in the dist folder a file called work dot HTML and we're gonna copy let's copy the about page actually so we'll grab all everything that's that's index

let's grab everything that's in about and let's paste it into work okay and we'll just kind of we'll close this up and let's go up to the top let's change the title to we'll call it we'll just

save you my work and let's change the current class from the about to work so right here okay and then we'll go down here let's change the LG heading to my and then secondary will be work let's

also change the ID here to work and let's see for this for the for the little subheading let's say check out some of my projects alright and then let's see we're gonna use the grid here

as well so I'm gonna this this div with the class of about info I'm going to change this to projects and then just get rid of everything in it okay so this div ends here so everything inside

projects let's get rid of all right we want the footer the same that's that's fine so in the projects we're gonna have a class of item we're gonna have a bunch of these but I'm going to create the

first one first so item inside here will have just an a tag that doesn't go anywhere so I'm just going to put just put a number sign in an exclamation and this will be the image for the project

so it's going to be image it's going to have actually it's not going to have a class till the source will go to image slash remember we have that projects folder and then we have project

jpg and then for the alt for the alt I'm just going to put in project doesn't matter so inside the item we have the link around the image now under that link with the image inside of it we want

to have an a tag with the class of BTN – light so we're going to create some button styles okay so BTN light like that doesn't matter where it goes and then inside

this BTN light let's put an icon so I'm going to use an icon with the class of FAS and the class of FA – I like that and then next to it we're going to say project okay so that's the link for the

project now I'm going to copy this a tag here put another one below it I'm going to change it to button dark and then we're going to change this to fa – github because we want this to be the

github icon and then we'll change the text also to get up okay so if we save this and we go to my work it's gonna look horrible okay the image is full size but don't worry about it for now

for now we just want to copy the div with the class of image this whole thing here and let's see we have how many do we have actually so we have one two three four five of these so let's do

five so that's one let's do two three four and five alright now we want to change a couple things actually we just want to really change the image of each one so with project one second one will

be project two dot jpg we can keep this stuff that's fine project three four and five okay so if we save that we're just gonna have three huge images with this text here but

that's that's pretty much it for as far as the HTML go so we can actually close that up and close up about and let's open up Maine dot scss and we want to start

working on the the projects area so down below let's go above the footer I like leaving the footer at the bottom let's go below the about CSS that we did

and let's say work slash projects and we have a class of projects we're gonna display this as a grid so display grid I want to I want to shrink the images down real quick before we do anything else so

all the images that are embedded inside projects we want to set the width to 100% of its container so let's save that that'll shrink it down alright now for the grid we want to we want it to be by

default three F three fractional x' across okay so three images or items so let's say grid – template columns and let's set this to just like we did before we'll set it to repeat three

times one fractional like that and save okay now we want a little bit of a gap as well so let's say grid gap and let's do 20 pixels like that what else do we want to do here let's let's let's add a

border to the image so right here will say border and the border for the images I just want to be white they don't have to be a special color I want the hover to actually be the secondary color but

by default let's make them white and solid okay like that and then let's put let's do the hover of the images so inside here will do ampersand colon hover

and we want the I'm gonna actually make the opacity of the image I will say opacity let's make it 0.5 when we hover over it and then let's make the border – color so we just want to affect the

color secondary color and then let's do the transition as well so we can simply include the ease out and now if we save when we hover over the images you can see it fades the opacity fades in we get

the transition we get the yellow border and so on alright um what else do we want to do here obviously we want to do these buttons but actually I think the grid gap I used I used REM units

originally so if you want to change that let's do 0 0.7 Ram like that there we go alright so let's do the the buttons now I'm not gonna embed the button light and the button doc into into the projects

because I want to be able if we wanted to use these buttons anywhere else I want to be able to do that not just within projects so we'll go down below here and let's say button styles okay

you could even create a button dot s CSS if you want you could do like how bootstrap does in every little element create a separate SAS file but I don't really like doing that so we're going to

use a little bit of inheritance here so I'm gonna create I'm gonna do a class of BTN now notice we didn't act we don't have a class of BTN attached to anything but I want these the button light and

the button dark to have some similar styles wait a minute why isn't that github showing let me just check that real quick I think I FA – github what should that should be showing I class F

a github the heck let me just double-check this oh it's F a B so when you use social media icons it's not FAS its F a B so for the first class so we just want to change those

alright there we go alright so back back to where we were so for the BTN style here this is like we're gonna we're gonna create some basic styles for both buttons and then extend this class into

button light and button dark and you'll see what I like what I mean so I want to display these as inline – block okay so that they're on their own line and they go all the way across and then padding

it'll say 0.5 REMS and let's do one REM and border I'm going to set to zero no border we want to have a margin bottom of 0.3 REM and then I also want let's see we want to hover effect so we're

gonna say in here and % hover and let me just check this real quick yeah so if we hover one we want the secondary color for the hover so let's say right here background we're gonna set that to the

secondary color and let's also set the color to our set text color function and pass in secondary color as the background all right now we want to extend this into button because remember

if we look at our HTML if we look at our work HTML and we look at the buttons it's BTN dark and BTN light we're not using BTN at all so in sass we can extend this class so

we want to go underneath it and say BTN – dark and let's add BTN – light okay now I want to take all of these styles and import in bit not import but extended into these so I can just simply

say at extend and we want to extend the BTN class alright so we want to put this in both of these now if I save this now that those styles are getting put on these on

both of these now what is different about these is is obviously the colors so we want to add separate colors so let's do background so this is the the button dark so I'm gonna do let's see

for a button dark let's say darkened will say darken and we want to darken the primary color and we want to darken it by 50 all right and then let's set the color of the text to 333 let's see

what that looks like that's not right that's because this should be white there we go and then for this one let's just copy what we just did here and go to the

light and instead of darken we're gonna use lighten okay lighten primary color by 50 and color for the text will be 333 and save there we go let's see that's still not right you know what we don't

want to display:inline-block we want to display as block there all right so that's good that's what we want now if we look at the other page it looks it's identical but if we were to stretch this

stretch it out it stays at 3 I actually want for 4 columns for items on big big screens and then if we make it smaller we want it to be too and then very small one that's obviously not that's not

doable so we need to make this responsive right so let's go to our mobile dot s CSS this is where we make everything responsive and let's let's start with the extra-large because on

extra-large I want I want it to be 4 items per so to do that we're gonna say dot projects and we're going to just change the grid template columns okay so we're

going to change it to repeat and instead of three we want for fractional x' 1fr so I'll save that and now if I make this bigger it gets to four when it's like whatever is whatever we set it to one

one seven one four extra large something like that so that's that takes care of the extra large for large screens I want three so I guess I'll just grab this and put it inside here and we'll just change

that to three whoops not to three okay and then let's see for medium screens I want it to be 2 so media media MD will go to the bottom of that which ends here so we want to make sure we're inside of

it and we're gonna change this to two okay and then for small screens we just want one fractional so we don't even need to repeat we're just going to do one fractional okay let's save so this

is a large screen or is this medium medium is right here that's right so two on medium when we get to small turns to one and it's stacked awesome so now that's completely responsive so that's

done let's go ahead and just do a quick commit get that all we're gonna get commits and let's see we added the work page with grid I'll just say work page and

responsiveness okay so now we want to do is create the last page which is the contact page which is pretty simple so in our disk folder let's create a file called contact dot HTML and basically

we're going to use flexbox for this just to create these boxes so if we look at the page here you can see our boxes so let's copy from about grab everything from about paste it in contact let's go

up to the top change it to contact me and let's see let's move the current class right here off of this nav item onto the contact or how to reach me nav item and then down here let's change the

ID from about to contact I'll change this to contact and then me that's fine let's see for the h2 we'll say this is how you can reach me and then under that we basically want to get rid of of

everything under that so actually what I'll do is change the about info to a div with the class of boxes and get rid of everything within that div so that div ends right there so let's grab

everything in it and get rid of it so now we just have this box's div and in each one it's going to be very simple we have the email the phone and address and we want the the heading like email

to be yellow at first so let's let's put in an h2 here so div class boxes actually want to div within here and then know h2 I don't know why I said that we just want a span with the class

of text secondary okay in here we're gonna say email and outside of the span we'll put let's say whatever John Doe at test.com so that's our email then we'll copy this

div let's close this UPS may give us a little more room so let's copy this div I'll do two more okay the second one is going to be his phone number and then this last one is gonna be the address so

I'm just gonna make an address up I'm gonna say 50 Main Street say Boston Mass Oh to 101 and that's it let's save if we go and look at the page it's just gonna look like that so we want to add some

styling to this so let's go to our main dot s CSS and we want to go down to the bottom let's see let's go right under we'll go above the button styles let's go right under the work projects page

and we'll say contact page okay so we have a class of boxes right so let's say boxes and we want this to be a flex container so we want to say display instead of grid we're going to

use flex now normally I'd probably use grid because that's what we're using on the other pages but I just wanted to kind of throw this in here because I want it to be just a mix of different

technologies but you guys can do what you want with it after so we're gonna say flex – wrap wrap so that when it gets too big okay so like when they don't fit it's going to just go like on

to the next line like that so we want it to flex wrap we want to space the content evenly in between so we can justify content and we can say space evenly

that's what we're gonna choose and then I also want to align the items to the center and then let's just do a margin top for when they're stacked I want to do a margin top of one rim I'm sorry not

wearing this stack this is for the actual boxes so this is for the top here alright so let's go ahead and save this and see what happens so when you when you do display flex it's automatically

going to align them this way all right now we want to do each div within the boxes class so in here we're gonna say div and let's do a font size of let's say – r m let's do a border of three

pixels white solid let's do padding for padding will do 1.5 REMS and on the top and bottom in 2.5 excuse me on the on the left and right and then let's do margin – bottom three

REMS for when they're stacked okay now we're gonna have a hover effect and I do want it to kind of to have that ease out of transition so I am gonna add that mix in here and include ease out so

now let's take care of the hover actually let's save it see what it looks like good so and you can see if if we make this bigger it goes like that okay so the wrap causes it to kind of

knock down so for the hover I want to be inside the div and we want to do an ampersand colon hover and let's do padding 0.5 ram top and bottom let's do 1.5 because what I want to

happen is when we hover I want the padding to change I wanted to give I want that that effect like that okay so I'm changing the padding on hover and you don't have to do this it's just

something just I don't know just something to add so 1.5 let's also change the background to be the secondary color and let's see we want the color of the text to be to

use that set text color function okay so set text you can see we're using this all over the place so set text color and the its background is secondary color so we want to put that in there okay and

then for the span because remember this the email phone address that's inside of a span and we don't want that to be yellow we want that color to change as well or else we won't see it with the

yellow with the secondary color background so in here let's just say span will nest this in here like that and we'll simply say color we'll just copy this use the set text color okay so

let's save that and now if we hover over it you'll see we get that effect okay make it bigger all right so pretty simple and there's nothing we need to do to make it more responsive because you

can see it just stacks automatically and it looks good alright so that's it guys whoops that should actually go to whoa I guess that was cached or something the home page

why is that going there let's let's um let's change that why is that going there it's because we need to actually change it to go to index.html I believe yes and I think we have it going to

slash yep let's change that so for each menu item that is for the home right here we have to change that to index.html so that's contact let's go to about change it here let's go to what

else do we have index and work alright you save that let's close these up and I think I think that's it guys so I'm just gonna make a quick commit

and I'm just gonna say initial website finished okay all right so in the next video what I want to do is deploy this thing so we'll do that next and we should be finished up

In this video we will create the work and contact pages. We will use CSS Grid for the work and Flexbox for the contact

Code For This Project:
https://github.com/bradtraversy/moder…

💖 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
Posts by traversymedia
http://www.instagram.com/traversymedia