we're going to be creating this minimalistic black and white portfolio website it is perfect for complete beginners in web development you only need a basic understandment of HTML syntax and CSS styling to get started we're going to have a pretty nav section up here and we click that it takes us to the next section on our page we have an About Me section we have your experiences section we have your projects of course where we can link to the live demo of the project and the GitHub repo we have a contact me page where people can send you an email or reach out to you on LinkedIn and of course here they can download your CV and get more of your contact info and if we take a look here we see that the website is also fully mobile responsive with a nice hamburger menu up here replacing our desktop navigation we are going to learn how to build all the parts of this website from scratch using only vanilla HTML CSS and JavaScript and we're gonna host and deploy this website for everyone and all our friends to see using netlify we're gonna use GitHub for Version Control we're gonna use GitHub desktop to smoothen the process we're going to use Visual Studio code for writing our code and we're going to use Google fonts for adding a custom font to our website so let's get started first of all if you don't have a GitHub account I would go to github.com and simply create an account it's quite straightforward once you have an account Next Step go to desktop.github.com and download GitHub for your computer if you have Windows or Mac set that up it's going to ask you to log in with your GitHub account once you have logged in it's gonna look a bit like this next step is to download visual studio code you get that from code.visual Studio code so download that and install once you have installed Visual Studio code and run it for the first time it's going to look a bit like this I am now in the finished project folder but we're going to start from scratch in a moment so let's set up our project folder you see that I the current repository I'm in on GitHub desktop is this finished project that I already made but I'm going to create a new repository and if that's your first one this is how you do it so we go to file click new repository we're just going to call it whatever we want it's not important I'm going to call it something similar to the finished one HTML Dash CSS Dash Dash portfolio [Music] tutorial two there we go and then we just create the Repository and we hit this publish repository that's going to put it out on from our desktop here from our GitHub desktop it's going to publish it to our GitHub where we can access it online on an on any computer and you can choose to keep this code private or not that's up to you I'm gonna open that up to to be public and there we go once that is finished we can open this repository in our Visual Studio code and then we see that we indeed open that project right here you can see the name of the project here encloses welcome information you can also delete this file here you don't need it let's set our project structure up so first off we're going to create a folder and we're going to call that assets and in this assets we're just going to download from the repo in the description it's going to look a little something like this we're gonna go to this code here this green button I'm going to download that zip we're gonna open that folder we're going to extract it here we're gonna go inside and we're going to find the asset folder inside the asset folder just Target everything let's actually just drag it in like this so these are all the assets all the pictures that we're going to be using for the website all the logos all the images and the resume and here you can already switch this resume to your own this is just a template I found online now that we have our assets we're just gonna create the rest of our files we only need four more files we're going to start with our HTML called index.html we're going to create the next file called style dot CSS we're going to also have another CSS file called media queries dot CSS and we're gonna have a script.js file and that is all the files we need for this project so let's get started with our HTML structure first off you're going to hold shift and exclamation mark or one it's going to show this one up you're going to click this exclamation mark and it's going to give you some basic boilerplate HTML syntax we're going to write in this title we're going to write my portfolio the next thing we are going to do in our Visual Studio code is we're gonna download an extension we're actually going to download two as you can see on this side here these are extensions if you don't have any and haven't downloaded any before don't worry it's quite easy you see these are the ones I have installed and we're gonna install one called live server this one by rhythwik date we're gonna just click install here that is going to enable us to basically run this website as if it was hosted online and that's going to be very useful when we are developing our website and also when we are testing our JavaScript code that we're going to be running the next thing we're going to install is prettier code formatting this is going to help us basically keep our code in line indented and basically keep it streamline the process of keeping our code clean and easily read this one is optional but highly encouraged so we can go back to our Explorer we can close that even next thing we're gonna do is to reference these style sheets in our HTML document we're going to write link style sheet first one is Style CSS you're going to hold alt and shift and you're going to hit arrow down this is going to copy that line this is also a style sheet we're going to link to our media queries file and hit save we are then gonna add in the bottom of the body we're going to add a script and then when you start writing that you see that this is the source we're going to add the scripts.js file here so now all the three other files they're linked to this index.html document now we're ready to look at our website let's just write hello here to see if it works when you have installed a live server you should be able to see this button down in the right corner here you're going to click that and that is going to open our new web page as you can see hello shows up our web page is live I'm also opening the already finished project here in a new tab so that we can reference it and kind of switch back and see how it looks like so let's go back to our vs code and now we can start creating our website the first thing we're going to create inside our body element is a nav element it's going to have an ID of desktop nav and we're going to use this ID to Target it with our style sheets if you haven't been using ID before inside the nav we're going to create a div and it's going to have a class of logo and here we're going to write John Doe or you can write your name because we're just going to use our name as a logo but you could have put the picture here if you wanted to under that we're going to put another div and inside that div we're going to have an unordered list and that is going to have a class of nav links inside there we're going to have a list element and inside that list element we're going to have a link element and this link is going to go to each section what we're creating here is the navigation at the top of our web page and it's going to lead using this hashtag it's going to lead to each section that we are going to be creating later because each section is going to have their own ID tag similar to this this one is going to be called about and like previously we're gonna hold down shift alt and press down three times save ourselves some time there experience projects contact experience projects contact save and you see that prettier is doing its job indenting it for us let's go see our page perfect things are working and if we click about you see that the URL is updating so nothing is happening on the page because we haven't created that section yet but basically we see that the links are working as intended now let's start styling our website I'm gonna put our style sheet if you just drag it to the right side of vs code see that you can get a split screen here I'm going to drag the style sheet there and we're going to start styling our navigation but first we're going to style put in some general styling and what I am doing here is I'm commenting out so this everything in green is basically commented.code you can type this um like slash and Then star and then you can type whatever you want and then end it with a slash and a star but an easier way is to just use the the hotkeys for that which is holding in control and C so if you just control C you're going to comment and Ctrl C again you're gonna uncomment the first thing we're gonna do is we're gonna Target the whole page using start we're gonna add a margin of zero and a padding of zero as well this is going to remove any of the padding in margin beside as you can see now it's completely until the end of the page it's just so we know uh any padding and margins that are on the page is padding and margins that we have specifically put body I'm gonna Target the entire HTML in the body and we are gonna say font family ah now we're gonna need to download and import that font we wanted to use from Google fonts inside of fonts.google.com we're going to search for pop-ins I'm going to click that and we are gonna go I have already been here before but I'm going to remove these start from scratch we're going to scroll down and until you get to this light 300 I'm going to click that and click the 400 the medium 500 and the semi bold 600. then you're gonna go up here and you're gonna click on this import and you're gonna copy this code with this button and then we're gonna go back to our code we're gonna paste that in here remove this style save I'm going to go back to Google fonts we're going to scroll down and copy this CSS rule to R code and we're gonna paste that in here there we go save and let's see how our website is looking you can close this Google fonts now we don't need it there we go we see that the font has been updated next thing we're going to add is HTML and we're going to make it so that the scroll behavior is smooth this is so that when we add our links to the different sections on our page it's gonna not instantly go to that page or that section it's going to scroll down in a smooth manner we're going to Target our paragraph elements and we're going to set all of them to have a color RGB of 85 85 85 save we're going to add another comment right transition transition and this is going to be for the all the links and for another um class we're going to be making called BTM from button and so that whenever we click these ones they have a transition that is going to basically change between two states two Styles and not be instantaneous we're going to write oh forgot the actual transition transition all 300 milliseconds ease okay so these are things we're not going to see in effect just yet but it's good to just have them out of the way and set up correctly now let's start for our navigation another comment here desktop nav we're gonna Target the nav itself so this element we're going to Target the nav links foreign Flex okay now we see that we have flexed the whole navigation as you can see here turn off that so the nav has been flexed and everything inside of the nav the logo and the div is basically lying inside of the nav fixed okay for the knob we are gonna justify the content space around we're going to align items Center and we're going to set it to a height so the knob has a height of 17 view height so if you haven't been working a lot with flexbox it's kind of a subject subject in its own but basically the display property is what decides how things are arranged on your page so it can be as a block which is like the or inline which is the standard way where one element comes first and the next element under it and the next element under that again but if you choose to display it with a flex then suddenly it can come on the left or the right side of it and you can kind of start adjusting it based on The View width as well as you can see so it's quite useful and very much used um tool basically flexbox and as for the height 17 view height basically means that whatever the view height of this screen is so this screen is like let's see 667 pixels so 100 view height takes basically the whole screen and now this nav is set to take 17 of the whole screen you can see here if I set it in our console here if I set it to 100 view height instead you see that the nav takes the entire page 50 view height and it takes half let's just reload that okay next thing we're gonna style is now links by itself we're gonna add a gap two REM between the elements that are flexed we're gonna add a list Style none to remove the bullet points in our links we're gonna add the font size to increase the font size a bit of REM as well if you're not familiar with REM it's basically a unit of of measurement within front-end developments it you can basically think of it as it's another way to than to say pixels it's not pixels but it is related to it so I think by default a paragraph is set to one REM and we can see that our navigation is starting to look better starting to look like something that the finished product is going to look like we're gonna style the link element next we're going to give them a color of black we're gonna give them a text decoration of none we're gonna give them a text decoration color of white and then we're gonna Target the links when we hover over them we want to change the color to Gray we want to add a text decoration underline we want to add a text underline offset one REM actually let me show you I'm going to comment out this we're going to go to the page if I now hover over the links here you see that the underline is a bit tight to the text and I don't really like that style that's my personal preference you can leave it if you want but I like to basically space it out a bit so as you see that it's more underneath and a bit more space between the text and the line and we're also going to add a text decoration color RGB of 181 181 181 and we're going to save that we're going to check out the page and it looks pretty good next thing we're going to Target the logo we're gonna make it a bit bigger using font size to REM and so that's that's looking good but as you can see when we hover over the logo our cursor changes and we don't want that so we're gonna Target our logo hover and we're gonna change the cursor and we're gonna set it to default so now when we hover over the logo nothing happens whilst one we hover over our links by default it has it changes the cursor to a pointer so with that I think our navigation is is done let's check out yeah pretty much the same so back in our code we're going to add the next element to our HTML document document we're going to add another nav because we're going to create the hamburger menu now so it is it's going to have an ID of hamburger nav inside there we're going to have another div actually this one we can just copy I'm going to copy the logo save ourselves some time it's going to be identical under there we're going to have another div it's gonna have a class of hamburger menu inside this div we're gonna have yet another div I'm gonna have a class of hamburger icon and this is where we're gonna include some JavaScript it is the only JavaScript in this entire HTML page it's a pretty basic on click function we're going to create to basically open and close the hamburger menu when we click it so it's gonna call it's gonna be an on click and we're gonna call that function that we haven't created yet toggle menu and then inside of this div we're going to create a span and then that we're gonna hold shift alt plus press down twice so that we have three span elements these are going to be the lines of the hamburger menu that we're going to style later they're not showing up now and then under this div we're gonna have another div it's going to have a class of menu links these are going to be the actual links that are going to be opened when we open with this function and here we can also just copy these links here and just paste them right in the only thing we're going to do here is we're gonna add the on click event because we want to be able to both close it open it I mean when we click this hamburger icon but also when we click any link we want the menu to close so we're gonna just add the on click inside each link element we're going to save that so let's see how that looks perfect well not perfect yet obviously but we're gonna style it just now to make it look like a hamburger menu here we're going to write hamburger hamburger menu we're gonna Target the hamburger nav we're gonna display none so that when we are in a desktop view the hamburger is just not showing up we're gonna add a hamburger menu class and then we're gonna set its position to be relative we're gonna display inline block we're gonna Target hamburger icon we're gonna display it Flex there's a bit of code going into the hamburger styling so bear with me on this one but we're gonna get through it Flex direction we're gonna put to column we're gonna justify the content space between we are gonna add a height of 24 pixels the width of 30 pixels and a cursor of pointer okay I think now is the time to also start our media queries because we want to actually be able to see the hamburger menu when we are working with it so I'm going to drag that over to our style section of vs code and I go into the media queries one and here we're gonna write media screen and Max width 1200 pixels and then we're gonna inside here we're gonna Target the desktop nav and we are gonna display none so what this code means is that when the screen size is lower than 1200 pixels the desktop navigation it's gonna disappear and what we want instead to show up is of course the hamburger menu so we're going to Target the hamburger nav we're gonna set its display to flicks so let's test that what happens when let's see I'm just going to refresh the page here the hamburger menu is accurately showing up but the navigation is not disappearing let's see what's the what's the problem here did we write it correctly desktop ah I see I have a a typo here in the HTML save that there we go that was it very common thing in website development is a typo and then now we were lucky I saw it immediately but you might be looking deep into the code into some complex JavaScript trying to figure out what the bug is and you just had a typo very typical so um let's go back now we can actually test our let's go back to our style sheet or or style.css now we can test the hamburger menu let's see let's keep it like that so we can see the changes and then we can continue to add our styling so now we want to Target our hamburger icon and then the span which are the lines of the hamburger I'm gonna put the width of 100 of its container we're going to put a height of two pixels we're gonna put a background color of black and we're going to put a transition to be the same as the one we made actually not we're going to make another transition we're gonna make all 0.3 ease in and out and this is basically what's gonna make the hamburger menu turn into an X when we click it because when we click that X it's gonna close the hamburger menu as well next thing menu links and we're gonna put the position of absolute we're going to make a top it's going to be going from the top 100 percent it's going to be going from the right zero percent it's gonna have a background color of white this is the actual links we're gonna be seeing when we open the hamburger width of fit content and we're gonna have a Max height of zero we're gonna have an overflow of hidden we're gonna have a transition of all this is going to be the same copy that and put it there okay so let's see how it's looking now it's looking much more like a hamburger so when we did decrease the screen size and you can see that here lower than 1200 see it turns into a hamburger and that hamburger of course when we click it now nothing happens because we haven't made the function yet so let's do that so we're going to open our script we're going to write function toggle menu we're defining the function that we used earlier and we are gonna write we're gonna make a new constant called menu and it's going to be equal to the document that means that it's we're basically using an inbuilt system in JavaScript that we're going to Target an element on our web page and we're going to basically be using that element we're going to type query selector and we're going to be writing dot menu links that is let's see this one so we're targeting this whole element using this line we're going to hold down shift alt and press down copy that we're going to write icon here and we're gonna write instead of menu links hamburger icon next thing is we're gonna Target that newly made constant menu we're gonna add a class list we're using the toggle function another inbuilt JavaScript function and we're going to add the class open we're gonna shift alt down and we're just going to change that to icon and there we go that is all this function needs so what we're doing here is we're targeting these two elements and then whenever we click it it's gonna either add or remove the Open Class uh in the that element and that open class is going to have some styling so let's create that now we're missing a couple of things first let's Target the menu links and then the each link within it I'm gonna display block add padding 10 pixels text align Center font size 1.5 Ram color black text decoration none transition we're gonna copy this one and put it there next up menu links and then the list elements inside it we're gonna have a list style of none remove the bullet points again and under here menu links open so that means when we add this class this is what it's going to do so it's going to have a Max height of 300 pixels next thing hamburger icon open span for the first child that means the first span element and we're going to write transform rotate 45 degrees as well as Translate 10 pixels and 5 pixels what we are doing here is we are transforming the line by rotating it into an X and we're also moving it slightly because when we rotate it it is actually going to be skewed so we want to also not only rotate but also move it slightly in both X and Y directions we can Target this whole line or this whole section shift alt press down two times and here we're going to have instead of first child we're gonna have nth child and then the colon two so here we're targeting the second line we're going to remove this code we're going to write opacity zero which means removing the first the second line completely and here we're gonna keep this code we're gonna write last child and instead of 45 it's going to be minus 45 and instead of 5 it's going to be minus 5. so there we go we're also going to add a hamburger icon span first child and we are gonna transform none we are also going to copy this twice opacity one and here we're gonna have yeah transform done okay so that was a whole bunch of code but now we are done and the hamburger menu should be working let's see we click it it opens our whole hamburger menu as we can see menu links open Let's see we click it and we see that the open class has been removed so every time we click it it either adds it or it removes the open class that is the only thing that this function is doing this on click toggle menu and when we click one of these the menu should also disappear and it works congratulations you've built your first fully functioning hamburger menu if that was the first time now we can close this script or we don't need it anymore we are done with JavaScript we are also done with the heaviest part of this tutorial it's good to get it out of the way in the start the next thing we are gonna be adding some styling for is the sections because all of the parts in our page is going to be divided into sections so we're going to Target a section actually let's just build the sections first so you can see what I mean the first section we're going to build and you can also close these navs now we are done with them as well so after the last nav before the script we're going to create a section and this section is going to have an ID so we can Target it later profile so this is our hero section could have been called hero but that's what I called it I'm going to give it a div and inside that we're going to have a class of section underscore underscore pick Dash container and inside of this or div we're going to have an image and it's going to have a source we're gonna write we're going to write period and we're gonna write we're going to write dot slash assets and we're going to write profile pic and then I'm going to Target that one in the alt we're going to write John Doe profile picture and we're gonna save so let's see what that looks like there we go that is a big ass picture we're going to style that later but we see that it works under this div we are going to add another div it's gonna have a class of section underscore underscore text and inside of that we're going to have a paragraph with a class section underscore underscore text underscore underscore pd1 and inside here we're gonna write hello I'm and under the paragraph we're going to add a H1 with a class both title and we're gonna write John Doe and then on Final paragraph with the class section underscore underscore um text underscore underscore P2 and inside here we're gonna write front and developer let's see how that looks yep there we go so as you can see we haven't flexed this section as we did the nav we're gonna do that and you can see that things are just coming one after the other and they will continue like that if we left it with the default display settings under our last paragraph element we're going to add another div with a class of BTN container button container and we're gonna add a button with a class of BTN BTN color two so we haven't made these classes yet we're going to make them later we're going to add another on click and it's going to be targeting the window which is basically saying the whole web page and we're gonna open and we're gonna write these colons and we're going to write dot slash assets you see vs code already suggests we can click this another slash we can write resume and suggest the resume and there we go so let's check if that showed up and is working we have let's see where's the button let me just close that hmm it is not ah of course we didn't write anything here so download CV inside of the actual button there we go now if you click that we see that the resume is opening great back to our code we are gonna copy paste this button and inside here we're going to leave everything in the class as is on instead we're going to just write color one instead of color two we're gonna have on click and it's gonna be instead of window open location href and it's gonna be set to dot slash and then hashtag contact which is basically sending the person to the contact Section of our website that we haven't yet made but we see that hopefully when we click this button it's gonna update the URL oh it is not doing that let's see let me just refresh it is not working contact info let's see is that ah we don't need these uh this colon and we need an equals instead let's save let's see if it works now and it works you see that the URL is updated and when we have our contact page or section it's gonna lead there so back to our code under our button and under the first div we are gonna add another div it is going to have an ID of Socials container it's going to have an image and its source is going to be dot slash assets you're learning this already now LinkedIn PNG we're gonna just write my LinkedIn profile we're gonna add a class of Icon which we are going to be creating and we're going to create another on click here with location href equals and two semicolons inside here we're going to write http s basically here you can just paste in your LinkedIn profile I am just gonna write LinkedIn dot com slash but here is normally where you would put your own profile link okay let's see if that shows up correctly yep when we click it it goes to LinkedIn so obviously it's very big and hasn't been styled yet let's copy this image because we're gonna add our GitHub as well so instead of the LinkedIn picture we're gonna uh start writing git GitHub and then we're just going to change this my GitHub profile the icon class that is the same and here we're just going to write Git Up okay and equal here and same here you just add your own GitHub account URL that is all for this profile section let's get to styling it so now you understand what the section part is here in the CSS file so we're going to Target all sections basically everything that has that is within this we're going to say that every section has a padding top of four view height because we want a bit of space between each section and then we have a height of 96 view height and together they make up a hundred we want to have a margin of zero in the top and bottom and 10 RAM on the sides and we have a box sizing border box and then we're going to have a Min height of fit content basically it's ensuring that things are not overlapping each other and that it looks nice we're gonna have another class here section container [Music] we're gonna display Flex and then we're gonna Target profile section specifically uh here we're gonna Target the profile ID we're gonna display Flex so you might see that we're repeating ourselves a bit display Flex display Flex I could have you know written it like this targeting them both at the same time saved myself for some pieces of code but I'm specifically not doing that in order to make it more clear for you when you write the code which section which style goes to which section although you might do this differently when you are working with a real project you might shorten these things put them together write dry CSS which means it stands for don't repeat yourself I still find that doing it in this way although it is repetitive it is very easy to see what is styling what so we're going to add a justify content Center we're going to add a gap of 5 REM we're going to add a height of 80 view height let's see how it's looking it's looking closer to what we are gonna have as the finished product we're going to Target our section underscore underscore pick container [Music] we're gonna display Flex I'm going to set the height to 400 pixels we're going to set the width to 400 pixels and we're going to set the margin to zero in the top and Auto on the sides no sorry Auto on the top and zero on the sides and that is styling our image as intended then we are going to Target the section text align self to Center and text align Center let's see yeah it's a bit what you see now I'm gonna have to style those icons soon next style is section underscore underscore text and then the paragraphs in them it's going to have a font weight of 600 and the section underscore underscore text underscore underscore P1 it's gonna have a text align of Center we're going to copy this code it's gonna have a font size of 1.75 REM is going to have a margin bottom of one REM and then we're gonna Target the title and it's gonna have a font size of three REM and text a line of Center finally in the section social s container and display Flex justify content Center margin top one ram and GAP one REM then we're just going to create a little section for the icons there's several and we're gonna add icon cursor pointer and we're gonna make them have a height of 2 RAM so let's see how that looks perfect we can see that our buttons are not fully styled yet we're gonna do them just now but everything seems to be aligned the way that we want them to also we see that we are lacking some styling on the on the text here we might have missed something but let's see let's do the buttons first we see that we're we're going to put some hover effects and change the styling at the border so let's do that first and see if we have missed something here or if we had put that styling somehow in the buttons section so the next styling it's going to be called buttons we're gonna Target button container display Flex and justify content Center gonna add a gap of one REM and then we're going to Target the etn a font weight 600 transition all 300 milliseconds ease padding one ramp width eight REM border Radius 2 RAM and then we're gonna Target the ptn color one and BTN color two we're gonna give them a color and we're gonna give them a border of RGB 53 50 3 53 53 save that we're gonna say 0.1 REM solid then we're gonna copy this down we're just gonna add a hover behind the two hover colon hover and we're gonna make the cursor when we hover turn into the pointer so we see that these are links and then we are gonna copy this again we're gonna remove the hover on the first one and we are going to change the styling to set a background of RGB 53 53 53 we're gonna set a color White text then we're going to write button color one cover set the background to RGB 0 0 0 and then we're going to set the button color two two background none BTN color 2 over border RGB 255 255 255. one sorry 0.1 REM solid and the last one BTN container set that to have a gap of one rim how is it looking amazing all apart from this one so what class is this section text P2 so let's see if I misspell that perhaps in our style Ctrl F and you can search for that underscore underscore section PEX text ah let's see I just wrote P1 again so P2 let's see I think that was it yeah so as we can see we have finished our hero section we have our profile we have our download button it works Opening Our CV up we can go to our contact page which will lead us to our contact info at the bottom we can open our social media profiles and all the buttons up top work and if we decrease the screen size the navigation turns into a hamburger now the rest of the hero is not yet a mobile optimized we're gonna get to that but let's just ignore that for now back in our code let's close this profile section and start the next section so in our next section that's going to be our about section so it's going to have an ID of about and we are gonna inside of that create another paragraph with a class of section underscore underscore text P1 we're going to reuse that and we're gonna write get two no more we're gonna go down here we're gonna change this class to title we're gonna change this to H1 and we're gonna write about me under the H1 we're going to create a div with the class of section uh let's see we haven't created that section container inside of this div we're gonna create another div with a class of section underscore underscore click container inside of here we're gonna add an image with the source of asset about thick dot PNG and this is just going to say profile picture and it's going to have a class of about pick there we go under this div we're gonna have another div a class of about details container inside here another div with a class of about containers don't forget the s another div class details container I know this is becoming a lot of containers but bear with me it's for the greater good image inside of that one with the color sorry with the source of assets so I haven't actually explained that before we're using this dot slash to go basically uh into the asset folder and then in the asset folder by using slash we are gonna choose the let's see experience PNG and then the alt text is going to be experience icon and then the class is going to be icon let's see how that looks so here we go if we now click the about here in our navigation we go to the about page and this is the icon we just added as along with the profile picture looking good under this image we want to add an H3 where it says experience we want to add a paragraph that says 2 plus years and then we add a br which stands for break to go to a new line and we want to write front end develop ment looking good so far so good and then under this dead we want to add another div with the class of details container as well and then we can actually copy most of this or all of this inside here and we're just gonna change from experience to let's see education and remove that to education icon class stays the same and we're going to write education and we're gonna write Bachelors of Science let's say in the bachelor's degree okay and here we're gonna write master of science in the random master's degree how is it looking awesome now under not the first but the second div here we're gonna add another div and it's gonna have a class of text container and here is where we're gonna write the about text we're gonna write lorem let's say 50. hit enter and we get some lorem ipsum text see awesome then under this div and the next one let's see right before the section ends we are gonna add an image and it's gonna have dot slash assets Arrow this is going to be the arrow that is on the side here that takes us to the next section on our page it's going to have Alt of just Arrow icon it's gonna have a class of Icon and arrow and it's also going to have an on click event that is going to go to location href and it's gonna have two colons here single and we're gonna go to dot slash experience section of our page which is the next section we're going to be making so that is all for this section let's now add the styling scrolling down we're gonna write about section I'm going to Target the ID about position that to relative we're gonna Target the about containers [Music] we're gonna add a gap of two REM and then we're gonna Target about the details container we're gonna justify content to the center we're gonna Flex the direction to column and we're gonna Target about containers along with about details containers or container and then we're gonna add display Flex to both of them actually we're going to add some more in the about containers we're gonna add margin bottom to rim and we're gonna add margin top to REM next thing we're gonna Target is about pick we're gonna add the Border radius of 2 RAM we're gonna Target the arrow we're gonna add the position of absolute because we want it to be absolute on the page and not relative to anything else I actually want where it's going to be absolute to the section right minus five REM and bottom 2.5 REM so that is basically putting it minus five from the right corner here minus five Ram is there and then 2.5 Ram up from the bottom which is there and it's absolute within this whole section next things we are targeting is details container I'm going to add a padding here of 1.5 gram we're gonna add the flex of one we're going to add a background of white we're gonna add the Border radius of 2 REM we're gonna add the Border of RGB and it's going to be 53 53 and 53. and it's going to have 0.1 grams solid border and the Border color of RGB one six three one six three one six three and last a text aligned to the center as for our picture we see that we are lacking some styling yet let's add that section container gap of 4M and a height of 80 percent and a section underscore pick container of a height of 400 pixels and width 400 pixels and a margin of Auto and zero ah there we go it looks pretty spot-on to what is the finished product let's see about and if we go to the same page it looks identical so now we have our hero section done and we have our About Me section done let's go to the next experience section back in our code we can close our about and we are going to add on a new section it's gonna have an ID of experience inside of here we are going to be writing another p with a class of section text P1 we're using reusing this class if you have noticed that we're also going to write an H1 here with a class of title as well reused we're gonna write experience the right way um at least I think that's the right way we're going to write a div with a class of experience details container and inside of here we're gonna write another div it's going to have a class of about containers and inside of this one another div class details containers so quite familiar syntax as the page above um and inside of this one We Are Gonna Write Our H2 which also has a class experience sub title and here it's going to say front and development and under the H2 under the H2 we're gonna add another div with the class of article container that is a lot of divs and a lot of containers so please bear uh with me and watch out for any typos I might have done some myself we'll see that when we see the final page inside the article container we of course want to add an article inside the article it's going to be an image this is going to be the what we're building here is going to be the this section and every article is going to be basically a skill that we have okay so we're gonna give this source asset folder and we're gonna give it our check mark check mark PNG and here we're gonna write experience icon and it's also have a gonna have a class of icon under here we're going to add a div and inside this div we're going to have an H3 that says HTML and a paragraph element that says experienced how is this looking back to our page we're actually let's also check this button if it works it works like a charm so this is also being styled already from the Icon styling we have and the various containers that we're using here so we're reusing the style we already made and you might notice that it's going a bit quicker you know the titles are still like we just made them once and now we're reusing them so that's the benefit of thinking a bit beforehand or rewriting your CSS when you're doing a project like this because a lot of The Styling you could optimize and definitely there are plenty of room to optimize this further we are going to copy this article five times so hold down alt and shift and hit the down key five times one two three four five this is going to be a bit of a repetitive section but we just basically want to change these values to the different skills that we have so CSS will relieve that as experienced we'll leave the class and the alt the same oh I have a mistake here let's remove that from all these otherwise it's it leaves the room for some bugs there we go so back to our CSS article we're gonna remove the oh actually we're going to keep everything the same because we're just reusing the only thing we're changing is the text so awesome so then we're gonna go down here we're gonna write SAS intermediate we're gonna write Java Script oh that was the wrong place Java Script basic we're gonna write type script basic and we're gonna write material UI intermediate [Music] all right how is this looking well we have the whole list it's not styled properly of course yet but it's showing up pretty good next thing we want to add is the this is the front end part we want to add the back end part that we see here and we are gonna cheat a bit because we're just gonna copy this article container actually we're going to copy the whole details container Arrow shift alt arrow down if you remember then we can kind of close this first details container focus on the second one and here we are gonna change these to post grid SQL and write basic here no Js intermediate and express Js intermediate and get intermediate all right now we have both our skill sets ah we need to remove the last parts Let's see we have two two articles too much also you here you can add as many as you want um as many or as few skills you actually want to put there so let's see again yeah now it's looking good so let's start styling this section I think that's everything we want to have here or actually let's uh let's go up here to the about section we want to grab this Arrow which is just an image and we're just going to copy that and use that in our experience section let's see the last part here right before the end of the yeah that's the correct place I think let's see um might not have done that right let's see No it should be that was not right let's see what I did wrong well first of all we need to write the projects but it shouldn't be that hmm it's showing up here where wait let's see if I close this it's still in the the section and that is very weird what happens if I remove it yeah it seems like we are foreign well this is a part of writing anything any code any project you have to like um oftentimes bug check see what's going on so it's showing up inside of the experience section but it is not in the section it is showing up here that is very weird we have our ah of course I know what's wrong it's because we haven't given um these arrows that is that makes a lot of sense so these arrows actually use the position absolute so that means that this arrow is absolute to its the first parent element that has the user's position relative and because we haven't yet made the experience section have the position of relative it is going back to the main profile section so let's just change that real quick let's add that styling let's add the experience section here and see if that resolves it Let's see we have experience and then we have a position of relative let's see if that did anything and there you go that solved the issue now our arrow is showing up in the first parent element that is now experience that uses the position of relative that's just how positioning works and position absolute works and yeah get a gotta keep your code straight and but yeah bugs happen all the time gotta get used to that as for the rest of the experience styling let's add some more so we're going to Target The Experience subtitle we are gonna add some color here RGB 85 85 85 we're gonna add some font weight of 600 font size of 1.75 Ram and a margin bottom of 2 RAM experience details container display Flex justify content Center and flex Direction column how is it looking not much has changed visually these are going to come into play later now we want to Target our article container [Music] we want to display it not inline but Flex we want to text align initial we want to flex wrap then we want to put it as a wrap basically when the container when these are gonna be bigger than the container which is not happening now they're going to wrap under each other so let's see what happens when I decrease yeah there we go so now instead of going up over the container whenever the container that is called let's see let's open it up here about kind of details container whenever it is too small for all its content the content is basically going to wrap itself down to fit the width of the container that is what this um styling property of flex wrap does I'm gonna add the flex direction of row [Music] we're gonna add a gap of 2.5 REM and we're going to add a justify content space around next thing we're gonna Target is the article we're gonna put the display of flex as well with the width of 10 Ram and a justify content of space around as well as well as a gap of 0.5 REM and the last thing we're going to Target in the experience section is the icon inside of the article and we're going to put the cursor to not pointer but default right default there we go so how is this section looking now we are missing something we have we don't have our border let's see okay so we are missing a bit of styling here let's see why the border is not showing up it is styled as the details container it is having a border here and it is not doing that here let's see I probably just missed it details container yeah it doesn't have a border okay let's go up to R and we don't have that all right it's in the um ah we probably let's see the details container ah typo once again it can be fickled we have an S here plural and singular we're mixing them around if I had written this code over again I would probably stick with one let's save that and see what happens there we go and our styling is as intended let's see is it similar let's click on the experience here and here and then it gets to the same place ish yeah the reason one is higher than the other is due to the media queries we're gonna add later but they do look very similar don't they yeah okay then we are done with the experience section next section we're gonna make is the project section so we can close this part and we can create our next section give it an ID of projects I'm going to scroll down here and I'm going to remove this color that I started writing for some reason I'm gonna add our project section here so that's ready in our project section we are gonna write another paragraph This is getting familiar we're going to add the P1 we're gonna browse my recent I'm gonna add in each one class title projects and then under here we are gonna add another div with a class of experience details container with a div under it or inside it with a class of details container and color container so two classes inside we're gonna add another div with a class of article container and we're going to add an image and it's gonna have a source of assets and it's gonna have the project one PNG and here in the alt we're just going to write project one capital and we're gonna give it a class of project EMG IMG under this div we are gonna write an H2 I'm gonna give it a class of experience subtitle as well as project title here we're just going to write project one under this H2 we're going to write another div with the class of button container inside here a button class BTN BTN color two and project BTN inside we're gonna have GitHub written and we're gonna add a class no sorry uh on click and it's gonna lead to a location Dot href equals let's see why okay we're gonna add the single quotes here and I double quote here there we go and here we're gonna just write https and I'm just going to write github.com but here you can put your own GitHub repo for any projects that you have made we're going to save that let prettier deal with the formatting and check out what it's looking like on our web page there we go our first project is up and running not styled very pretty but it is there with a link that works okay cool now the rest is just basically copy paste so we can save a bit of time there first we're gonna add the second button let's just copy this button in here this button is going to have button color the same class it's gonna have just a live demo written instead I'm gonna leave that as GitHub but when you deploy a project like we're gonna do with this portfolio website you can of course link to the finished URL here so is are both showing up let's see yeah and they both have this nice hover effect that we have already previously made now we're gonna close it all the way up here until the details container color container and we are just gonna copy this two times because that's going to be our projects our different projects so let's see one two and three perfect now we can update each one let's see project one is done project two we're just going to change the image to project two the alt to project two we're gonna change the text here to two and leave this as is save and check that that worked that's the next project perfect and the same for the last one we copied here we're going to write project three three and three and save and check that works like a charm okay as well as in the other sections we are gonna add right before the end of the section our Arrow so let's go grab that in the experience section let's see there's the arrow close that again let's see there we go and paste it here check to see if it's added properly yeah of course the same styling issue we had in the past so we're gonna Target in our CSS the projects we're gonna this uh position it as relative and then we're gonna check was it relative or absolute yeah position relative projects did I call it project or projects projects it's correct let's see maybe I didn't save let's update the page maybe it's not showing up yet because ah it's there it's because the page hasn't been uh the project pictures are taking too much space but it is showing up correctly there okay so then we are done with the HTML section let's get to styling I'm going to close this so you can see what we're doing um in the project section we want to add our color container we want to add a border color RGB one six three one six three one six three we want to add the background of RGB and 250 250 250. done with this one Project image we want to add the Border radius of 2 RAM width of 90 percent and height of 90 percent feel free to play around with these um these metrics I'm basically picking something that I that I found to look good but you can definitely tailor this to your own liking next thing we're going to Target is the project title margin one rep color black and we're gonna Target project BTN color black and Border color RGB we're just going to copy this one actually there we go I think that is everything we need for our project section let's see hmm obviously not something is not working so as we can see here they are supposed to be flexed and they don't seem to be Let's see we inspect this it's good that we're having all these problems because then you get to see how to basically go around bug checking so the first thing I like to do is just inspect what's going on we already have a finished product here so we have something very easy to compare with so this container as you can see here is flexing and so is this one I'm wondering that this about containers is probably not being fixed and I'm wondering if it's yet another s that is either missing or too much let's see it was about containers and here it's called let's see hmm it is not inside any container called about did we miss it let's see projects yeah I think I just forgot to create it so above our um or actually under our experience details container we're gonna add another div we're gonna call it uh with a class of about containers and we're gonna cut this section out I'm gonna fold these in two three and we're gonna add a div on the end and save and then let's see if that solved our issue it did okay looking good it does look similar to what the finished project is going to look like let's see go to projects here we go to projects here it's working perfect if we go from the experience part to projects it is working okay there we go big change just for getting one div we are getting close to the final section of our project and that is going to be our contact page so I'm just going to create that section in our CSS I'm going to close this project section I'm gonna add our last section and it's gonna have an ID of contact inside the section we're gonna have another paragraph with a class section text P1 and it's gonna write to get in touch under here another H1 class title contact me and then under there a div with a class of contact info up upper container info info upper container there we go and inside here another div with a class of contact info container [Music] and inside here an image and it's gonna have the assets folder and it's going to be the email PNG with an email icon as an alternative text and a class of Icon as well as contact icon there we go we are gonna add a paragraph here inside here we're going to add an link it's gonna use the mail to inbuilt HTML and we're going to send that to example mail at gmail .com so when people click this on a phone for example or any device that supports it it's gonna open their local email app and we're going to write example at gmail.com if they also just want to write it manually I'm going to save that and check out how that looks cool we have our contact me section as well as well as our email here if we click it here it's not gonna do anything not at least on my browser because I don't have that functionality but on the phone I can assure you that it works we are gonna copy paste this div we're gonna reuse most of it we're gonna change this to let's see we're going to keep the we're going to change this to LinkedIn link edin icon and we're gonna change the this is gonna stay the same okay and this is going to be changed to Linked In and we're gonna change this knot as a male 2 but as a link to LinkedIn profile so it would be like your profile here save that and see looking good there's a bit of a slight ah in our example page here I haven't changed the logo here so we're gonna have to do that with this change the size of this image here but we're going to get to that no worries that is all we need in this section let's go and add some styling to it so first we're gonna Target the contact Section we're gonna display Flex we're gonna justify the content that is this that is flexed to the center I'm gonna Flex Direction column I'm gonna put height to 70 view height uh we're gonna Target the contact info upper container display Flex we're gonna justify the contents to the center we are gonna add a border radius of 2 RAM we're gonna add a border of RGB here it's going to be 53 and it's going to be 53 here and also here we're going to add 0.1 REM solid we're gonna add a border color of RGB one six three one six three one six three we're going to add a background of 250. on all of them and we're gonna add a margin of 2 RAM Auto and the padding of 0.5 gram how is it looking much much better starting to get there we are gonna add the next part which is the contact info container and we're gonna display this Flex we're going to align items to this Center we're gonna justify the content and we're gonna put that to the center we're gonna add a gap of 0.5 Ram and margin of one REM we're next gonna Target the contact info container and the paragraph inside of it we're gonna make the font size larger we're gonna contact and icon within it and we're going to change the cursor we don't want people to click the the icon because it's actually not a link it doesn't do anything but by default since we're using the icon class that we have previously made we want to specifically make this cursor the default instead but only within the contact icon that we have here so compared to the social media icon here I think I also want to try to make the sizing be the same so I'm going to add a height of 2 RAM and see if that solves it no let's see to REM okay let's uh let's just see if this is doing anything 10 Ram yeah indeed so it seems that the email icon is just a bit smaller than the then the LinkedIn icon or that the LinkedIn icon is bigger so we're just gonna add an extra class here or we're gonna many ways to do that we're just gonna add some styling contact we're gonna add another class called email icon and we're gonna add that one in the email icon class list there we go now we can Target it specifically we're gonna say that the height is 2.5 ramp let's try that that looks much better that looks like it's the same height so maybe if you zoom in close they're different but close enough to to fool anybody having a quick glance okay so that's corrected and we are done with our contact Section let's close the contact section and we're gonna add a footer the last part of our website inside the footer we're going to add a nav inside that we're going to add a div and we are gonna add the class called nav links container in here we're basically just gonna copy paste what we have in our desktop nav let's take everything from the UL and paste it in here and then we are gonna add under the nav paragraph we're going to write copy right copy right that's how you write that and hashtag one six nine and then a colon or a semicolon that is probably called This is basically the sign when I save this I can show you that's the sign for the copyright symbol it's an HTML symbol next thing we want to write 2023 John Doe or whatever year you're watching this in John John I'm getting more and more dyslectic as uh this tutorial goes on John Doe all right reserved there we go that's looking very official and then we just need to add the last styling to our footer footer section [Music] and then it's gonna be footer and we're going to write height of 26 view height and a margin of zero on the top and the bottom and one ram on the sides further we want to Target the footer and all the paragraph elements inside of it we want to text align them to the center how does it look perfect so there we have it our desktop version of our website is done let's check About Me section works The Experience section works project works and contact Section works and these buttons seem to be working as well takes us up to the about section perfect now as we can see this all turns very very bad when we start decreasing the screen size it's not responsive we are going to fix that right now and I think for this part I am going to be putting the screen side by side so that we can see what we are doing here we go we don't need the HTML anymore so I can close that and we are done with our CSS like our normal style sheet our desktop style sheet if you if you will so now we're going to focus on the media queries and we're going to Target different screen sizes to make them look as we want them so if you click this button up here see I'm gonna decrease this oh click that button we're gonna add the dimension of the iPhone SE I'm going to make this much smaller put that to a hundred no let's see 75 zoom out okay that's how it looks so far quite terrible and now let's let's say see that it updates perfect okay we are ready to add our our media queries uh where you gonna start with a bigger size so we're going to copy this up here we're going to change this side to 1400 pixels we are gonna rewrite this we're gonna Add profile the profile section we're going to make it a height of 83 view heights we're going to add a margin um bottom of six Ram we're gonna add about containers and we're gonna Flex wrap use wrap getting better and as for the 1200 view width we're gonna add some more things here we are gonna add experience as well as the ID and the experience details container class and then we are gonna put them to a margin top of two REM foreign profile as well as section container we're gonna give them a display of block getting better still weird but getting better and we're gonna Target our Pro and we're going to make it disappear when it actually gets uh to 1200 pixels and we are gonna Target our sections as well as our section container and we are gonna adjust the height to fit content and then we are gonna Target our section by itself we're gonna add a zero we're gonna add a margin of zero and five percent looking much much better still not great but much better then we're gonna add a section underscore underscore pick container width 275 pixels height 275 pixels and a margin of zero Auto 2 REM last class in the 1200 pixels is about containers and we're gonna add a margin top zero so it's starting to look good it's still a bit wonky mostly because of this contact me section here that it pushes the page a bit further than it needs to be but we're gonna tackle that right now so we're gonna copy this part for ease we're just gonna do like this we're gonna write 600 pixels here instead and we are gonna Target the contact section along with the footer and we're gonna give them a height of 40 view height we are gonna Target the profile and give it a height of 83 view height as well as a margin bottom of zero we are gonna Target the article and we're gonna give it a font size of one rep we're gonna Target the footer and the nav inside of it give it a height of fit content and the margin bottom of two REM next is about containers contact info upper container as well as BTN container forget the dot there and we're going to give them a flex wrap of wrap looking better and better next one is the contact info container we're gonna give it a margin of zero call contact info container again as well as the P or the P inside of it and the nav links the lists and the a font size one ram to decrease the font size a bit specifically in the links and the contact page next thing we're going to Target is the experience experience sub title we're gonna give it a font size that's this one font size of 1.25 REM it's here actually as we can see we're going to Target our logo I'm gonna make it a bit smaller font size 1.5 ramp we're gonna Target our nav links Flex Direction these are at the bottom we're gonna give them a flex direction of column perfect and we're going to give them a Gap a little bit of a smaller Gap REM 0.5 and we are going to text align them Center yeah looks much better next thing targeting is the section underscore underscore pick container and we want to adjust the width to be Auto and then we want the height to be 46 view width [Music] and we want to justify content to be Center there we go that is looking quite finished we just have a couple of more lines section underscore underscore text underscore underscore P2 and we're gonna make those section texts a bit smaller 1.25 Ram looking good we're gonna Target the title next font size to ram looking even better and then the text container that would be these I think yeah I think that's here or it's here let's see we're going to text align that to justify right we want to make this appear a bit nicer on the mobile like that basically justify the text to take the whole width of the container and like that are whole website is done so it's looking good on the mobile as you can see the links work the hamburger menu works the whole page is fully mobile responsive if we go to the pad version you could say you can still see that it looks good it looks very responsive and if we go to the desktop it is also looking good so there we go the next thing we're gonna do is to deploy this website on netify for free so that you can share this whole website with your friends with your colleagues and you can start putting your own projects out there live for everyone to see so back in our vs code when you have been saving if you've had GitHub desktop open doesn't matter if you haven't but you can just open it now and it is going to automatically see that you have made a lot of changes to your repository so as you can see here it shows that basically you've added all the assets you've added all of this code in each of these files so we're just going to make a comment here finished webs website tutorial we're going to commit to main with this button and we're going to push origin which is going to push our whole code to GitHub now we're going to go to our browser again you're gonna go to netlify I'm opening this in Incognito because I'm already signed in you're gonna go to sign up you're gonna sign up with GitHub with your GitHub account so your username email password Etc once you have signed in it's going to look a bit like this this is my personal notify account so it's gonna look like this you're gonna go to add new site and you're going to click on import existing project here you're going to click on connect to git provider GitHub it's going to ask you probably for some authorization you're going to approve everything and you're gonna go and search here maybe if you only have one repo you're gonna see it here but you can search tutorial or whatever you call your Repository and it shows here as this is the one I've just been creating I'm gonna click on this I'm gonna leave everything as it is as default and we're just going to click deploy site we can see here that the site deploy is in progress it goes quite fast oops didn't mean to click there within a couple of seconds there we go it says published we can click this link here and lo and behold our site is live now you can share this with whenever you want if you enjoyed this tutorial please leave a like and a comment that would mean the world to me tell me what you liked what you would like to be improved in the next video and you can also comment down below and tell me what you would like to see next and what you would like a tutorial on next so I hope you enjoyed I'll see in the next one have a good day