Responsive Portfolio Website Project

[Music] hey what's going on guys in this project or this is the series I should say we're gonna be building a responsive portfolio

website from the ground up okay so this is a little different than most of my series most of my series we build some kind of small application using the framework or something like that we're

going to build this just html5 css3 we're gonna use sass which is a CSS pre-compile err and a little bit of vanilla JavaScript so no frameworks no bootstrap nothing like that and even if

you're a beginner if you just if you're just starting HTML CSS JavaScript I still encourage you to go through this series and code along with me and I think you're gonna learn a lot because

we're gonna use things like NPM which is the node package manager to install node sass which is our sass compiler and even if you have no clue it's asses still watch it and I'm gonna explain things

step-by-step I want this to be beginner friendly as well as fun for intermediate web developers alright so let's take a look at the actual project before we do anything so it's very minimalistic as

you can see the home page has a background image it has an overlay and then we just have the name a slogan and some social media icons okay so the coolest thing about this website is the

menu now this button is pure CSS and if I click it you'll see it just rotates into an X and back we're gonna do that with css3 transitions and the transform property and then we have this overlay

with the image on this side and the menu on this side and the menu kind of floats in from the right - as you can see and then the about page is very simple and we're actually going to use grid CSS

here we needs grid template areas so you'll learn a little bit about that and if we look at the my work page again grid CSS here this is going to be responsive as well which I'll show you

in a second and then the contact page is very simple we're actually going to use flex here I wanted to switch it up a little bit and we have these little hover effects from using CSS transitions

all right so let's take a look at the responsiveness so if we go down to about here that's probably like around the size of a mobile device and you can see everything is centered

looks nice and if we click on the menu it's now in a vertical fashion rather than horizontal so this is completely responsive as well if we go to the about page everything is nice and stacked and

neat if we go to the my work everything is stacked same thing with the contact all right and if we go to the my work page there they're all in basically one you

know one project per row if I go a little bigger turns into two little bigger to three and the biggest is gonna be four okay so that's pretty much it for the project it's not like it's not a

huge website but there's actually a lot that goes into it especially when we get into like the sass and the transitions and stuff like that so you're gonna learn a lot now let's take a look at the

structure real quick just so you can kind of get an idea of what we're doing so I have notes ass running down here which is just compiling any sass that we create all of our sass goes into the S

CSS folder as you can see here we have a cup some partials we have a config file where we can change the colors and we can change if we want to not show the image we can say false and you can see

the image goes away we can change the opacity if we change that to 0.5 now the image is more prominent if we whoops if we want to change the colors well change the the primary to white now notice the

text is white right now because it's on a darker it's a primary color was dark if I change the primary color to a light color and then let's change this to I don't know blue or something oops yeah

and then save now the text is dark because we're actually going to create a SAS mixin that will make the text dark if it's on a light background and light if it's on a dark background and we can

look around the site now and you can see all the the primary and secondary color changes so it still looks pretty good so you can use any color scheme you want but I'm going to go back to the dark

grey and the yellow and if you guys want to use this as your actual portfolio that's fine I mean this is completely open-source the only thing I ask is that you don't sell it you can

use it in any other way that you want all right now in the dist folder is basically what you would deploy to your host we have the compiled CSS and then our HTML Javascript in any images okay

so that's the dist folder and that's pretty much it the rest of this stuff is just your package jason will create our SAS script here so it's not going to be too difficult but it is like a

modernized project so hopefully you guys enjoy it alright so in this video what we're going to do aside from this introduction is we're going to set up our workflow so we want to install node

SAS you want we want to set it up so that when we create any SAS in our CSS folder here it gets compiled into our distal der so we just want to set up a workflow and structure and and then

we'll move to actually start you know writing our HTML and stuff like that alright so let's get started alright so I'm gonna go ahead and leave the the finish project open in case we need it

for reference so I'm gonna leave that in this tab now there's a couple things you're gonna need for this project obviously you need a text editor and if you have something that you've been

using that's fine but what I would recommend is vs code or Visual Studio code it's incredibly intuitive and fast and easy to use it has great extensions and and it's just it's definitely the

best text editor that I've ever used and it's very very popular in the web dev community it's completely open-source so if you're on Windows Mac Linux doesn't matter so that's what I'll be

using I'll also be using a couple extensions so if you want to follow along to a tee then I would definitely recommend it you're also gonna need nodejs installed and nodejs is a

JavaScript runtime but it the reason we're installing it is because it comes with something called NPM or node package manager and the compile tool that we're using for sass is called node

sass and we need NPM to install it so that's the reason that you're gonna need this and I know a lot of you guys probably already have it installed but go ahead and download it install it you

can use the latest version that's what I usually grab or you can use the long-term support version whatever you want is fine and then lastly I would recommend that

you have git which is version control should have this on your system anyway and if you're using Windows this comes with a nice command-line tool or terminal tool called git bash which

gives you some UNIX tools and it's really nice and whenever I use Windows I use get bash so you might want to install that as well alright so and we're going to be using it a little bit

get a little bit in this course or in this series so let's uh let's go ahead and close these up I already have all the stuff installed I just wanted to kind of show you so let's go let's let's

open up vs code in a new project so first of all I'm gonna create a new project folder now I'm gonna use the terminal here and if you're if you're brand new to this stuff

don't let the terminal scare you it's not bad we're not doing anything advanced just go ahead and open it up and let's create a new directory to work and so mkdir for make directory and I'm

gonna call this modern underscore portfolio and then we're gonna CD so change directory into modern underscore portfolio and from here I want to open up my visual studio text editor or

visual studio code I should say so to do that I can say code and then dot which represents the current folder now this may not work for you if it doesn't then you can open up vs code and just go to

your command palette which I believe is shift command P and then type in shell and then right here you can see it says install code command in path so if you click that you'll get this little

success message down here and then you should be able to use that that code command but you don't need to use the terminal to open a folder you can simply click on open file over here and then

open your folder it doesn't matter all right so now what we'll do is create some of our actually before we do that I want to go over my extensions and vs code that I'll be using so first off we

have live server which allows us to open our HTML on a dev server that has auto load so I won't have to keep reloading the page highly recommended for any kind of

just like static website development I'm also using bracket pair colorizer which is completely optional but I like it because it matches colors of brackets and curly braces and parentheses so that

you don't get lost if you have like a lot of nested if statements and stuff like that and this will also work in sass as well as JavaScript but you don't need it but something that I use and

then prettier is a code formatter so it'll format HTML Javascript CSS and I have it so that when I save my file it automatically formats now it won't do that by default if you want that to

happen if you want it to get to format your code on save like I do then you have to go to settings in vs code so you can do ctrl comma or command comma or just go to the little gear and then

settings and let me close this up and then the setting that you're going to need is this right here where is it editor dot format on save that needs to be set to true so what you would do is

just search for editor dot format and it'll pop up on the left side over here so right here format on save just click this click true and then it'll get put over here and then you just want to save

it with ctrl s or command s ok that's really the only setting that you need to kind of do what I'm doing here all right so if you are using vs code I would suggest those those extensions and in

that setting and you should be pretty much identical to my environment alright now first thing I want to create is my disk folder so I'm going to create a new folder called dist and like I said this

is where all of our HTML goes all of our compiled CSS our JavaScript our images stuff like that so I'm just going to create an index dot HTML file in here and I mean I'm going to be using Emmet

which comes with visual studio code and it just makes for quick HTML like if you want to do a class on an h1 you could do h1 dot test tab gives you a class of tests if I wanted to do like an ID of

hello I could say hello tab gives me an ID and if you want a div you don't even have to do you don't even have to write if you can just do like hash test tab and it gives you a

div with the idea of test now you can create a boilerplate and HTML boilerplate with exclamation and then tab and it gives you your head body tags it gives you your viewport meta tag for

a responsiveness so it's really handy and in our title I'm just gonna say welcome to my portfolio and in the body for now let's just put an h1 and we'll just say hello so let's save this now

you can open this up by just going to your file system and opening up the the HTML file but I'm gonna use live server so you can right-click or control-click and you can go to open with live server

and then it will open in your browser okay and this is Auto refresh or auto reload if I were to let's make this a little smaller here if I were to let's like add an exclamation and then save

right away it's gonna reload so it's very very handy so now what I want to do is create a folder outside of my dist called scss okay because we want to want to start to work on our sass workflow so

in here will be our sass files so I'm going to create a file called main scss ok this will be our main sass file any other files we create will be partials that we basically import into this file

now we need a way like I said for our sass to get compiled down to regular CSS because the browser doesn't read s CSS files so for that we're using something called node sass so this is the github

page and it uses libsass which is the C version of of the of the preprocessor and it's very very fast so it's another reason I really like it now in order to install node sass we need to use NPM as

you can see right here so before we actually install node sass we need to create something called a package.json file which is basically like a manifest for our project and to do that we can do

it with p.m. in it now you can go to your standard terminal like this or you can open up the vs code integrated terminal which is what I'm gonna do we can go to

view integrated terminal or you can just do ctrl or command backtick and it will you can toggle it all right so let's run NPM in it and it's just gonna ask us some questions package name that's good

version good description let's say responsive portfolio website that's fine everything else is fine if you want to put your name here you can do that and I'll give it an MIT license and enter so

that's going to create this file here package Jason which is just that adjacent file with some key value pairs and hold some information if we install anything with NPM it'll get put in this

file inside a dependencies object so let's go ahead and let's clear this up and do NPM install or I and then no - sass ok and that's going to install it what it's gonna do is create a node

modules folder up here anytime you install something with NPM it gets put in the node modules now notice we have a ton of files in here that's because node SAS itself has its

own dependencies and then some of those dependencies have dependencies and all that stuff is in here so you don't have to worry about this you never have to go in this folder and touch anything it's

also not going to get deployed to your server so it just kind of sits there all right now we have node SAS installed so the next thing we need to do is set it up so that it works now to do this we

use something called an NPM script and you can see we have this scripts object and it has this test what I'm gonna do is change this test to SAS I'm just going to call it SAS we could call it

anything and this is just echoing something out so I'm gonna just get rid of this double ampersand exit one and just change this right here to say hello from will say hello from SAS script I

guess doesn't matter and save and now down here to clear the cell we can do ctrl L and to run it us an NPM script we do NPM run and then the name of the script and we called it SAS

so let's do that and you can see we get hello from SAS script so obviously this isn't what we wanted to do I was just giving you an example of in showing you how to run it

so let's take out everything in between the double quotes and we want this to run the node SAS program so node SAS then we're going to add the dash W flag which means watch okay so we want to

watch the s CSS folder which we just created and we want to set an output so - oh we want to output the compiled SAS to dist slash CSS like that and then we just want to add the dash dash recursive

flag so recursive because if we don't do this we're gonna have some issues with partials and having it auto reload so that's it a very simple so just to reiterate notes ass is gonna watch this

file it's gonna compile all of our sass into regular CSS and put it in this file and we don't even have to create the CSS file in the distal do it on its own so let's save this and let's go down here

and let's run it so NPM run SAS okay it's gonna do this it's just gonna kind of just stop and it's just watching the s CSS folder so now we'll do is go into our main file and let's write a little

bit of sass so I'm gonna create a variable so to create a variable we use a money sign and we're gonna call this primary - color use a colon hair to assign it to let's say number sign four

four four which is a dark gray and then I'm going to just put in a body tag and for our in the body I'm going to say background and let's set that to the primary color now once I save watch what

happens so we're gonna get a green message down here saying that it rendered complete and now if we look in our disk folder we now have an s CSS folder if we look in there we have a

main.css so it basically took the sass file compiled it into regular CSS and put it here and if we look at that file this is what's in it just a body with the background of gray okay now you

don't want to touch this you don't want to touch your regular CSS file that's that's the compiled CSS you want to work within your s CSS okay so that's what we'll be doing now if we go back to our

project here you'll see there's no gray background the reason for that is in our index.html we didn't include any CSS so what we want to include is the compiled version so we want to go into CSS and

then main dot CSS so let's put a link tag here and let's say in CSS slash main dot CSS and save and now you can see we have the gray background so whenever we add anything to our sass it'll auto

update so let's make the color we'll say color white and save and there we go so it's gonna just Auto reload so this is a nice little workflow having node sass and live server 4 vs code because you

can just update your sass it gets compiled and then it auto reloads in the browser alright so what I'm gonna do now since we have our basically have our workflow setup is I'm going to open a

new terminal so I want to keep this running I'm gonna click the plus sign a new terminal I'm just gonna create a git repository but before I do that I'm gonna just create a file called git

ignore dot git ignore so let's say touch and the touch command just creates a file so we'll say touch dot git ignore I spell that right get ignore and you can see that right here get ignore I'm gonna

just click on that and go inside of it and just put in node underscore modules because we don't want that to be added to our repository that's just our dependencies so let's go ahead and just

save that file and close it and then let's initialize a git repository so we'll say git init and that what that does is it just creates a hidden folder called dot git and all of our

repositories where stuff goes in there so I want to add everything that we've done so far so we'll say get add dot so add all and then let's make a commit to the

repository right now it's just in the staging area now I do have a get a crash course on my channel if you want to watch that if you're interested but we're just going to do get commit we

want to put a dash M flag so that we can just put a comment in here and we'll just say initial I'll say initial workflow setup like that and then it gets committed okay we're not going to

push it to github or anything right now it's just local okay so that's it let's go back to our other terminal where our node SAS is running because you want this to run down here because if you

have an error like let's remove the money sign and save and you'll see SAS will actually give us an error and tell us where it is and what's wrong so let's put that back all right

okay so I think that that's gonna do it for this video now that we have everything set up so in the next video we're gonna start to add our markup to our H index HTML and then we'll start to

work on our CSS or we'll create the menu button and all that stuff so I will see you in the next video