Build a Responsive Online Portfolio from scratch!

what's up internet and welcome to this video which i'm gonna show you how to make your very own portfolio completely from scratch and deploy it onto the internet so you can share it with your potential employers friends your grandma anyone you want we're going to be doing this video thanks to hostinger which is this week's sponsor and the reason i am able to show you how to deploy your website hostsinger.com is pretty affordable i was amazed when i saw the prices first off i think the most popular package is the most beneficial to you as a developer for the sake of cents 2.19 month you get a free domain free ssl so we will go into what that is later if you don't know what that is free email and of course all the storage and other perks so that is the one that i would suggest of course there are other options so you just have to choose the one that suits you most i do actually have a little discount for you as well so if you would like please do go ahead and use my code to get 10 off on top of all the prices that you see here at hostinger.com if you were to ask my honest opinion the best thing about her singer is the fact that it's super quick we can literally upload the files and then be on the internet in seconds but also their price to quality ratio because i think in this world where everyone's a little bit skeptical maybe you know you get what you pay for seeing low prices might be a deterrent but honestly the quality is amazing their customer service is quick so you get stuck you can pretty much have a solution in no time so yeah that is it this is what going to be using and i'm going to show you how to do it step by step so let's do it okay so let's break down exactly what's going to happen in this video in the first part we're going to find a domain that we like and register it with hosinger.com the next thing we're going to do is actually create our website so we're going to create our portfolio we're going to make it responsive so we're gonna make it look different for web tablet and mobile so it looks it's best and then we're gonna host our files on to the internet so that everyone can see our amazing portfolio that we just made so before we get going i really want to make this website responsive by that i mean that is going to look different on mobile than it does on tablet and website and we're going to be doing this thanks to flexbox i am also going to be using a tiny bit of javascript and that is to make our hamburger menu collapsible so it's just the smallest bit of javascript if you haven't used javascript before don't worry it's only tiny the majority of this video is going to be done with html and css so if you want practice with that or if you're new to it and just want to give it a go please do try code along with me i do also have a fundamentals uh 12-hour web dev bootcamp in which i go into html and css in a lot more detail so if you've never had it before perhaps try that before attempting this or you know just throw yourself in the deep end and code along with me okay as always please do like and subscribe to my channel it would really mean a lot as it would allow me to get the means to keep creating more awesome content for you guys so give it a like give it a sub and let's do it okay so here we are on the home page panel the first thing that you probably want to do is actually buy a domain so i've already gone ahead and bought the domain that i'm going to use but i'm just going to quickly show you how to get yours so just go to get a new domain and simply type in your desired name in so you can do joeblogs.com and such it will then search for the domain you are looking for and its availability you will see that joeblogs.com has been taken however we can have all of these other options and then we would simply add them to our cart continue to cart and check out it really is that simple it really is that low of a price this price has a discount on it and it's per year so just go ahead and check that out when you are ready okay great once you have purchased your domain and you go back to the hostinger home panel you will see the domain that you have bought show up in the domains right here so this is the one i previously purchased annakubo.com and some other ones that i purchased previously too cool so that is it i now own my domain it is active i can also choose to make this auto renew or not so that is it that is how you would purchase a domain the next thing we're going to do is actually create our project so we can host it on the domain we have just bought so that is what we're going to do next that is coming up okay so we're going to be doing this completely from scratch so let's do this the first thing you want to do is actually create a folder where you're going to store all your files for the website so i'm just going to call this new folder on my desktop and let's call this i'm going to call this portfolio just like that next you need to download a code editor tool so for this tutorial i'm going to be using vs code this is what vs code looks like by all means feel free to download any code editor you like this is just a personal preference so now that we are here we need to actually go in to the folder that we just made so i'm going to click file then open and then navigate to my desktop where i saved the portfolio folder and just click open and there we go we are now in the folder called portfolio on our desktop so we are in here there's currently no files in the portfolio we need to create first off an html file so i'm going to do this by literally clicking this new file icon right here and let's call the file index and that give it the extension of html to tell our code editor that we are working with an html file and there we go we have now made our first file in our portfolio folder so if i go back here and just double click in here that's exactly what you will see great so let's go back to our code editor now the first thing that i'm going to put in here is some html boilerplate like that so feel free to take this we are going to talk through this in a second this is just your standard html boilerplate if you want to know more about it please do watch my uh 12 hour web dev boot camp for now i'm just going to carry on so the first thing i'm going to do in this file is actually give it a title i'm going to say portfolio this is not going to be visible in our browser however it will be visible in the tab of our page so if i open this up in our browser so i'm literally getting this file and opening it in our browser of choice i'm going to get the whole path and then i'm going to go to google chrome and just paste that you will see portfolio show up here okay so that's what we have done we've just named this file portfolio and it's showing up in our browser up here and this is just the path to my index.html file in the portfolio folder on my desktop okay so that's what we're doing we're just viewing that file in the browser let's carry on i'm just going to make this a little bit bigger for us so that we can see this later okay so now that we have that we need to actually put some stuff into the browser so we can see it i'm going to do that in between the two body tags okay so i'm going to put it in here but above the script tag for our javascript so we don't need this yet but just know that we are going to be adding a little bit of javascript later so i'm just going to leave that there and we're also going to style up all the divs that we put on our body so once again if you are not comfortable with this please do watch my 12 hour web dev course or just try carry just try coding along with me it's it's up to you now the first thing i'm actually going to do is link up my style sheet to this so our style sheet's essentially going to style all the elements we put in our index html file however we want so i'm just going to call this style css and i'm going to link my html file to it by simply going styles css okay so that is now linked and again let's create a javascript file and link it to our html file so that is now linked that is now done let's get to adding some elements so the first thing for my portfolio that i want is to create sections so we're gonna have a hero section and then a section that we can tell the user a little bit about ourselves and then a section where we can showcase our projects and then a footer so to do this i'm literally going to create a section it's a section tag that's for the header or the hero sorry about us portfolio stuff and then i'm gonna have a footer so there is actually a footer tag so let's just go ahead and put that in footer like so and for this section the first section i'm actually going to give this a class of hero so that we can style it a little bit differently to the other sections but for now let's get to styling the sections so up in here i'm going to decide that anything that is a section i'm going to want to give this a height of let's say for now 500 pixels and then i'm gonna just give it a yellow color for now just so we can see what is happening exactly and then a border solid black one pixel okay so now if we go to the browser you will see one two three sections this is because we have one two three section tags now this one is the class of hero but we haven't actually written the hero class yet so it's not overriding anything if i then go ahead and get the class so dot for class of hero and then decide that even though it is in a section tag i want to override the background color and make it blue we refresh this you will see the first section that has the class of hero is now blue but the others have stayed the same we have also inherited the height from the section itself so the height is 500 pixels we've inherited that okay cool so obviously i don't really like the way this looks let's take this a little bit more seriously and decide that we want our hero section to be as tall as whatever browser we are viewing this in so i'm going to give this a height of a hundred and then put viewport height so it's going to be a hundred percent of the viewport height so now there we go we have made the hero section as big as our viewport height and the others are around about this big but i'm happy with that okay and then of course we also need a footer and then the footer i'm just going to give that a height of let's put 500 pixels as well just for now and background color let's say black and there we go so we have all of our sections let's carry on so i'm just going to actually change this to white because i want those sections to be white and i don't really want a border um but let's just keep it for now so we can see what is happening we will get rid of it later and i'm going to change this background color to be a hex color so once again if you don't know about hex colors please do watch my uh video my 12 hour web dev course i'm going to give this the hex color of a25 so it's gonna be a dark blue i quite like that feel free to use whatever color you want okay i think we should focus on the header section first so in my header section i know that i'm going to want to have a nav bar in here with a logo and some contact details so let's do that first so in here in my hero section i'm just going to create a navbar and in it it's going gonna have an unordered list with list items so there's one list item two three and then i'm gonna have about me projects and contact so now if i refresh here you will see it uh showing up but it's very small let's style it up so it looks good in my browser so i'm just gonna go to my style section and anything in the hero section i want the font color to be white and the font size for now let's just put 40 pixels as a default the next thing that i want to happen is actually get the nav bar to appear on the right with the words next to each other and get the logo in here too so the next thing i want to do is in my nav bar on the same level as the unordered list i'm just going to put a div here this is going to be for my logo so these two on the same level however as we look here they will appear to be stacked over each other i need to make them appear in line instead so i could easily do this by adding some styling to the navbar itself so let's grab the nav bar and i'm just going to use display flex to make them appear in line rather than stacked and then i want the same for each of these so once again in the unordered list this time i'm just going to use display flex like so and there we go we of course need to style this out a little bit so let's go ahead and do that so let's move back here and then this time i'm actually going to grab the list items itself and style them up so let's grab the list item and this time i actually want them all to have the same width so i'm going to give them each a width of 200 pixels and let's go have a look so that immediately looks better already next i want the logo to always be at the left and the unordered list always be on the right i could do that with something called justify content space between and i'm going to do that on the navbar as the unordered list and div with the logo live inside of that so justify content space between and there we go so this is not for now this is actually for later when i want to get rid of the underlining that comes with a link so i'm just going to put text decoration none and on the unordered list type list style type and then none and there we go another thing if i want these spaces to be exact based on the letter length instead of assigning a width to each list item so for example instead of me doing this i'm just going to comment that out i could give the unordered list a width so let's say i always want this to be 500 pixels and use justify content space between to space out each of the list items so that is another option if you want them to be spaced out exactly in between or i could do space around which will give me the exact same space around each one so it is up to you i'm going to leave this as space around and make this a little bit smaller so the default font size for anything in our heroes section is font size 40 however once we get into the unordered list i want the font size to be font size 30. so that looks better to me we will change the fonts a bit later on for now i'm just going to keep going with this so we have our logo right here at the moment i'm not going to style it up or give an image that is something that we're going to do a little bit later on a nifty tool when you're making a front end is to use the inspect tool right here and as you can see everything we have made is showing up if we inspect the page and i can also inspect the elements so here for example if i just get the navbar that is our nav that we made and our unordered list with the spacing around each of the list items so that's quite handy the next thing i want to do is actually get our name displaying in the hero section so i'm just going to get rid of that for now and then in here so we have our section and in it we have our navbar the next thing that i want in here is just a h1 tag with my name like so and then i'm going to put a paragraph of full stack developer feel free to change the text in these as you wish and there we go so that is it uh the text size is just default i can change the h1 tag to have whatever size font i wish so once again i am just going to grab the h1 tag and say that the font size for any h1 tag is going to be let's say 90 pixels and there we go next i want to actually give some spacing to both the h1 tag and the full stack developer uh paragraph tag but i want the spacing to be equal so there's two ways i could do this i could get the p tag and add some margin to the left of the h1 tag and the p tag or i could put them both in a div of their own so that's what i'm going to do i'm going to put them both in a div so we've just created a div i'm just going to put these inside of it so i can treat them as one so i'm going to apply styling to both of these by putting them in this div tag which i'm going to give the class of hero text to so now if i go back here and then grab the hero text class and then give it a margin left of 40 pixels there you go you can see both the h1 tag and the p tag have been affected because they are in a div of their own and if i inspect the page you will see the div hero text so that's what it's in there we go div hero text that's what it's in at the moment it is below the nav div cool so perhaps let's maybe give this a bit more spacing i'm going to say 80 pixels and let's carry on so that is what it's looking like at the moment i can choose to have this centered at whatever point in the page between the nav and the bottom as i wish so perhaps let's do that but first i'm just going to add a little button here so let's get to adding a button past now there are two ways you can add a button you can literally get the button tag however it comes already pre-styled and i don't really want this so i'm just going to make a div and give it the style of button so i'm going to give it a class i'm going to call the class button and then i'm going to put about me here and then i'm going to actually get the class of button and style it in my stylesheet so let's make the button or any button anything any element with a class of button is going to have a width of 200 pixels a height of 100 pixels and a background color of coral so this is what it looks like at the moment it's not very exciting it's literally just a square we need to style it up so let's do that i'm going to actually change the height to perhaps 80 and i'm going to give it a border radius to make it look more like a pill of half the height so i'm going to put 40 pixels next i want anything in here text align to be centered okay so that's looking better the last thing i want to do is actually uh make it in the middle so i can just do so manually let's perhaps make this a little bit smaller it seems to be too big so i'm just going to play around with it that's essentially what css is most of the time so that's looking good okay i think it's time to change the font on the website so i want a custom font i don't really like the fonts that we are given so i'm going to go to google fonts and here i'm just going to pick my favorite font so i am quite partial to poppins so what i would do is just go to the bottom i'm going to select the extra bold the bold and the semi bolt and all i really need to do is copy this that has been made for us and then in the index html right under the style sheet i'm just going to paste that link and now i'm going to add this to the css so up here in the section because i want it to be everywhere in these sections or actually we can do it in the body and that will apply it to the whole to everything inside these body tags so let's get the body and then just put font family mary poppins and then sans-serif as a backup so if we go here now there we go that immediately looks a lot better i'm all about this let's carry on so the next thing i want to do is actually change the margin of the h1 tag i don't really like it it's unnecessary so i'm going to go in here and put margin [Music] 0 and then same for the p tag so let's grab the p tag and once again put margin zero great so everything is looking a lot closer to itself which is the look that i was looking for i'm also gonna make this uh thinner so as you can see we've downloaded different weights i want the weight 600 so font weight i'm just going to put 600 actually let's make this 100 i haven't added some of the font weights so i can actually let's get perhaps a regular so i've just added the regular in there too and let's just go for light as well just in case we need it i'm just going to take this again and put it back in here so that now it has all these different font weights so let's apply the font weight here okay so that looks thinner which is what i want we can make it as thin as we want it's totally up to us i'm actually going to change the font size in here too i'm going to make it 30 pixels okay this is looking good i'm really happy with how this is turning out once again for the button let's do the same and then let's perhaps give it a top border top padding padding top let's inspect this so it's added a padding of 5 pixels to the top so i'm just going to change the height of this okay so that is it i like the button maybe let's give it some margin top let's say we give it 20 pixels okay cool i am happy with that next let's get to centering everything in this div to be in the center of the hero page minus the navbar so let's have a look in here so we have our nav section next we have the hero text section so the next thing i'll do if i want this to always be in the center of the hero section i can actually make another div and then put that div in here now the hero text section will always be in the center of the div which is outside of the nav so now if i get this div and give it the class of let's say hero area and then just above here wherever we want i'm going to get hero area and use display flex because we need to make it flexible based on whatever height of browser we are in display flex and then flex direction column so that is our whole hero area let's first make the first hero area be height 100 height 100 percent of whatever parent divot in so now the hero area is going to be literally everything outside of the div and let's make this appear to be in the center of it so anything in the hero area i'm going to center and i'm going to do it with justify content once again center and there we go now we can of course uh re-jig this around if we wish it's totally up to us if i want this to maybe a little bit higher than the center we can do that so i'm actually going to do that i'm going to get the hero text and i'm just going to give it a margin bottom of 100 pixels so that's looking a little bit higher maybe let's put 200 pixels okay so now that is our whole text area this is always going to be in the center of the hero area cool so now no matter if we view it on mobile or in our browser it's going to be in the center of wherever we view it on so that is looking cool let's carry on okay next i think it's time to style the button a little bit so let's do that i want it to essentially change if i hover over it or if i click on it let's do that in our css over here okay so to make the button change on hover i would literally grab the class of button and then using this and writing the word hover i can apply a different styling to it so in this case i'm just going to change the background color to be a hex color of a lighter shade of orange that i have found so that is the lightest shade of orange that's going to change and now same for if we actually click on the button so i'm just going to grab the class or element with a class of button and write active and then i'm just going to give it a background color of maybe let's make it gray this time so i'm just going to pick a dark gray and then also let's change the font color so color and choose eight zero eight zero eight zero okay and just to be precise let's change this to eight nine eight nine eight nine so yeah let's just stick to using perhaps hex colors throughout this to make things consistent i'm just going to leave coral there because i quite like it and now there we go again you can change these to whatever colors you wish next up i'm just going to put some social icons on the left so let's do that now okay so let's have a look back here so we have our hero area and in it we have the hero text i just want to have a div with the socials and the hero area 2. so let's give this a class of socials and in here just we can see what's happening i'm going to make a div and inside i'm going to put twitter this is just a placeholder we're going to be replacing these with images let's also put linkedin and let's also put github you can choose whatever order you wish now the next thing i know about our hero area is that i'm gonna actually need these to appear next to each other so let's do that let's find our hero area and even though i did say um i wanted the flex direction to be column i'm actually going to need to change that to just b display flex and now i need to space these between so i need some space in between these so justify content not center but space between okay so that is looking better and once again i just need to center this and i do that with align items center so that is looking perfect i'm really happy with that obviously we did give this a bit of a padding at the bottom so we can do that with the socials too it's totally up to us i can essentially grab these socials class and go padding bottom 200 pixels and there we go so that looks a little bit more aligned in the center this is looking great now i want to focus on adding images so to the logo and to each of these so let's do that before we carry on with linking up all these links to different things on our page okay so the first thing i'm going to do is in here i'm actually going to rearrange this all a little bit i'm actually going to create a uh source folder i'm going to put in my app.js and my style sheet in here and this means that i need to change the path to these so i need to go into the source directory and get my style sheet and then i also need to go into the source directory and get my app.js file so i'm going into the source directory and getting the app.js file that's what i'm doing i've done this as i also want to put an images folder in here where i'm going to store all my image files so i can actually go into my downloads so i've already made a logo and i'm just going to drag that into my images folder and you can see my logo shows up here i've chosen to make my logo as a png file so it has a transparent background so when you're dealing with logos i'd really recommend having a transparent background and you can do that by saving as a png there's loads of ways to do this one example is using a site i like to call called pixlr.com and you can create your logos in here so that's that's just an option for you or if you have your own logo that's fantastic too so there's our logo the next thing you want to do is actually put it instead of this word logo here so instead of having a div i'm actually just going to change this to be an image tag so i'm going to use the image tag so it's actually a self-closing tag so we don't even need that we just go like this and then inside the image tag itself i'm just going to tell it where to find the image so i'm going to go into the source directory i'm going to go into the images folder and i'm going to get the logo png so that's what i've done it is also important to have some text for those who are visually impaired so i'm just going to have ania kubo's logo great so now if i go here well you will see our logo but it's huge we also need to change the size of it so i can do that with our css let's go ahead and give this a class of logo and style it up so back in here i'm literally going to grab the logo and let's give it a height let's see 30 pixels for now and see how that looks okay it's a bit small i'd say we should go with 80 pixels okay that's looking better and let's give it a margin all around so i'm going to give it a margin all around let's say 30 pixels okay cool so that is looking great we have our logo we have our navbar that's what it looks like when it's small and that's what it looks like when it's big next let's do the same but for the icons on the right so for this i'm actually going to search the twitter svg and i'm just going to you can embed it so i can literally just get this we can paste it in our socials so i'm just going to keep the div but then put the svg link so you can see it it's just very small we can of course change it as we wish we can give it a different color size anything we want so we've got our twitter svg let's now also get github i want this one so once again svg we have to click the i agree license agreement embed i'm just going to copy this and put it in between there that's looking good and finally let's do linkedin so i'm getting the order a bit long but whatever you want to do is fine so i'm going to choose this one i agree to license agreement and embed copy that and once again in between these two tags i'm just going to put that like so so now we refresh so i've kept these in the divs this is because i actually want to keep them stacked over each other and it's just an easier way to do this however i do want them to appear white so i can just add a fill of the hex color white to each of these so one two three four five six so once again this is the hex color now if i refresh you will see they are appearing white let's perhaps make them bigger let's make them so i'm just going to go here and replace the height and width of each of these to be 50 as i think that's a better size for our website and there we go the last thing i want to do is actually give them all margin two so i'm going to do that perhaps on these and give this a class of individual social class social class social and i'm going to grab that class just give it a margin all around of 10 pixels we can of course change it as we wish maybe let's make it 20 pixels okay great i think this is looking great let's get to linking some stuff up so the first thing i want to do is link up each of these to the websites themselves so here i'm just going to put an href to the website so the first one that we have was twitter so i'm just literally going to put http s www.twitter.com and change this to an a tag so that now if we click on it it will take us to twitter.com okay obviously feel free to edit this to your own personal website so for example i would put on your kubo like that so now if i click on here of course i need to refresh this it will take me to my page great let's do the same for the others not forgetting to change them to a tags so i'm just going to copy this because it's easier and then change this to an a change this to an a tag and so we have github and linkedin so i'm just going to change this to github aniakubo and linked in any kubo i don't actually know if those are my uh links but i'm just going to keep them there so you know what to do let's just go ahead and put these in divs themselves so i'm just going to wrap that up in a div wrap the second one in a div and wrap the third one on a div so that they keep the same styling it would seem the a tag doesn't like to behave in the same way as a div okay and that's perfect so we've linked up these here we next need to link up the about me the projects on the contact and i'm going to do this with anchor tags so if we click one it's going to take us to a section on our page but first let's build out these sections themselves so let's do that i'm going to start with the first section which is the about me section which is going to give whoever's on my website a little bit more information about myself so let's do that i want to have some text on the right hand side so a title and some text and just an image of myself so hopefully we know how to split that up by now we are done with the hero section let's move on to the second section so this is the section about me in it i already know i want one div that's going to have some information so let's give this the class of information and in it i'm gonna have an h2 tag this time because i don't want it to be the same as the h1 tag in our hero and then the h2 tag i'm just gonna have about me and then i'm gonna have a paragraph tag saying hello my name is ania kubo hi um i am a software developer and you chew with a passion for teaching okay so that is that so we have that one div and then we're gonna have another div that's gonna have um let's say headshot and cool let's style them up so i know that in both these sections uh this one that i've just made and the next one i want everything to display flex so let's perhaps just style these up to do that i'm going to put sub section so that it doesn't affect the section that we have in the header so there we go subsection and let's style it up so sub section display flex and then everything in here i want to justify content space around cool so we've done that and next i want to grab the information section because at the moment that is our information section so there's our subsection that is our information section because we don't have an image it's spanning the whole way however we can choose to essentially just make it go halfway if we wish so one thing i'm also going to do is actually apply some padding to each of these let's say padding 30 pixels oh let's make it 60 pixels actually okay or make it 80 the same as at the top padding 80 pixels so everything in this section is going to have a padding of 80 pixels here is my information section there is the h2 tag about me let's change the h2 tags to be bigger and make it font size this time let's make it 80 pixels i'm just going to move this to be with the h1 tag as i think it should uh be quite similarly in a similar location as the h tags and the p tags let's actually make this maybe 70 pixels we don't want it as big as the h1 tag do we so i even think that's too big 50 pixels okay so that's that's looking better again please feel free to change this as you like okay that is looking good next i want to add an image of myself so i'm just going to get an image so once again in here the div with the class of headshot inside i'm actually gonna get make an image tag so once again it's self closing so we don't need all that i could rename this to headshot container as that's what it technically is so let's do that and then give this a class of head shot give it tell it to get the image from and then once again i'm just going to drop my headshot in here so i'm literally going to drop my headshot like that and then i'm going to go into my source go into the images and get the headshot okay and once again we just need some alternative text so anya kubo head shot and there we are i'm huge let's change that so as we know we would go into the styling let's grab the head shot head shot and then i'm going to just give it a width of 300 pixels [Music] so we can of course change it to however big we wish so i think i'm happy with that i'm just going to give myself a border radius of 150 pixels to essentially make it look like a circle this is what would look like a mobile which is looking good so we go into the page and this is what we see and then we see a little section so that's the little section about me we can now actually get rid of the height of each section so that it auto adjusts to however whatever we have in it so now it's just spaced evenly between what's inside of it and the padding so when i look at it in mobile it's relatively centered let's just center the image in there because i really care what this looks like on mobile we do most things mobile first now so let's actually get this time we need to get the headshot container and use display flex align items center great so that's what it looks like on mobile this is looking good next i need a space to put all my projects so let's do that okay so once again this time in the second sub section i'm just going to put a h2 header that's going to be in the middle of the section this time and then i'm just going to put projects and in here well i want to essentially have a div with all my projects but i want to space them out evenly so that's going to be one project and let's say we have four projects in here let's actually give each of these the class of project card so that's one project card this is the second this is the third and this is the fourth let's go ahead and style up the project card i'm gonna give each project card a width of 200 pixels and a height of 500 pixels and then actually just eight let's just do border for now border one pixel solid black just so we can see what is going on ah yes that's because we use display flex didn't we and i've changed my mind i want the project's title to be in the middle so we need to get rid of the styling for the subsection cool and now we need to make all of the projects appear next to each other using display flex so let's do that let's give this a class of project container just add display flex okay so there we go and once again i'm going to use justify content space around okay so this is looking okay apart from the width and needs to be much larger okay so that is looking better however i want this to be centered so let's give this a another class this section subsection alternative and then we can start that up let's put it in the same rough section place as the other one so subsection here and then session alternative display flex however this time we want flex direction to be column and we want text align center great so that is looking good let's also give this the same padding as the subsection great so i'm really liking how this is looking let's get to putting some project work in here with some links so let's see what this is looking like on mobile all our projects are looking like this but we can change that because we can change what this looks like on mobile but we'll do that a bit later now this is totally up to you we can have our project cards instead of a border have a box shadow that looks a little bit more like this and we can mess around with exactly how dark they are we can also make these a different color so i can make it a little bit lighter which i think i prefer let's go a little bit lighter more so i'm just going to change this so this is a neat way of changing it even more if i wish okay so i could do something like that i'm also going to get rid of these styling from around each section as we don't really need it anymore i'm just going to get rid of that so that looks a lot better if you ask me okay now what we have in the cards is completely up to you i'm just gonna have a simple image of a project and a link to take me to that project so i can do this like so okay so now let's get to actually putting some stuff in our actual project cards so what i am going to do is essentially decide that i want an image in each one so it's a self-closing tag so each one of these is gonna have a source it's gonna have an alt alternative name so let's just put something generic i'm gonna put project one image and then i'm also gonna give this a class of project image so we can style it up so we've got our image the next thing i actually want to do is put in an h3 tag this time i'm just gonna put project one and then i'm gonna put some uh text i'm actually gonna give this a class of subtext because we wanna make this a tiny bit smaller than the current paragraph text this is my project and some text about it i enjoy making this project so this is just generic obviously you will have something else whatever you wish um so we've got some subtext the next thing i want to do is actually put a hair line in here so i'll show you what this is and then i want a another uh p tag with the class of subtext view here so we can actually view the project so that's what each of my project card is going to have so i'm just going to copy and paste this is into each one like that let's actually change this to project two project three and project four okay now let's get to making a sub text so i'm just going to do this all my other text so right here under the paragraph i'm going to put sub text and let's make the font size half of that so i'm just going to put 15 pixels and i am going to put font weight as 300. so let's view that okay this is looking quite nice i just need those images so i'm just once again going to go into my folder and just drag the images in here so we can see them and i am simply just going to put the path to each so source images project one source images project two and source images project three and then finally source images project four now if we view this of course they'll be massive so that is way too big let's style it up so i'm just going to put project image and then let's put width as 300 pixels and border radius 150 pixels and see how that looks let's maybe make it to 250 instead and one two five and i'm also going to give it a top margin so margin top of 25 pixels okay so that is how it is looking so far um i am into it perhaps let's just space them out a little bit more so get the project card itself i'm just going to add some margin to all of them let's say 10 pixels okay cool so that is how it is looking so far i'm really into it i think it looks really nice let's just actually style the hairline as well so i'm just going to grab the hairline element and i'm going to give it a margin left of 20 pixels and a margin right or 20 pixels too there we go now the next thing i want to do is actually link up these to go to my projects as well as start using anchor tags to take me to the correct section in my project okay so let's do that first right here i'm going to make an anchor tag so put these in an anchor tag i'm just going gonna get the view here put it in between that and give this an href i'm just going to put my github page obviously um feel free to change this i'm simply putting a placeholder for now like so so that where that's where it's going to take me uh if i save this and refresh you also get all the styling that comes with an a tag i don't really want this so let's get rid of it i'm going to give it a project link class so we can style it up without it affecting any other tags so project let's do link decoration none and let's make the color the same as that ah i meant to put text decoration none okay of course so that's that and it indeed goes to my github page so that is good uh let's style it up for all the others so i'm literally just going to take this whole p tag and replace it with these don't worry you'll find it's hard to read i will put the whole project uh in the description for you so there we go they have all now got the tag let's get to linking up everything else okay so for this i'm going to use anchor tags in here i'm actually going to put each of these in a anchor tag of their own and i'm just going to put href and this time i'm gonna make my link go to an id on our page so this id is gonna be called about me and then i'm just gonna get this id and make it go to the about me section so i'm just going to put id about me like that so that if i now refresh this and click here it will take me to the about me section so that's how that works let's also get to removing the styling for it so i'm just going to this time remove the styling of an overall a tag to have it again text decoration none but also i want the font to be white so that should look back to normal even though it's still tagged let's link up the project and the contact and the button now so we know how to do this let's go up here i am once again going to put this in an a tag and same as this one i'm going to get the projects put that in here i'm gonna get the contact put that in here delete this and then use the href to link to an id of my choice let's just say projects and then once again here href an id of contact let's go contact me so now let's find these sections that we want to link to here id projects and then let's put the rest in the footer so id contact me and then finally get the button itself so once again just put the a tag here about me and link it to the element with the id about me so let's see if that works refresh and great that seems to be working the projects doesn't work why is that ah we didn't put this in the a tag i was rushing there we go let's test that out now i'm fantastic so everything is linked up i'm really enjoying this site next let's do the contact me so i'm just going to quite simply use the h3 tag or whatever tag that we use yes h no it's the h2 tag so i'm going to put the h2 tag in here say contact me and i am simply just going to put a p tag with my email address now if you want to learn how to make a contact form so you don't have to display your email on your website but instead it's going to have a form here that you can fill out and then whatever the user fills out will get sent to your email then i have the perfect tutorial for you for that just check out my channel first before we move on though i need to actually change the footer so that any text in here will be white and then i'm also going to use a line text align center so that the text is centered now i'm also going to get rid of the height as we don't need that anymore but let's apply a padding of 80 pixels like we did for the other sections great and there we have it we are nearly done the last thing i want to do is actually add a hamburger bar and make these stack over each other because as you can see if we view the the website in anything smaller than a thousand pixels it just looks too squashed i don't really like it and especially for the top here it just gets a bit clumped up together so let's change that so i think as soon as we get to a thousand pixels we want stuff to start changing so we're gonna make our website responsive i'm gonna show you how to do that now so now if i go up here and then use media only screen and max width 1000 pixels i'm saying that anything under or equal to a thousand pixels is gonna have a different type of styling so i'm gonna grab the project container as that's the thing that i want to be affected so project container i'm going to use display flex and this time i'm going to flex direct flex wrap wrap so now if we go under a thousand pixels you will see they are stacking over each other they are wrapping so that looks good and then over a thousand pixels it just looks normal under a thousand pixels starts to wrap so that's the first piece of responsive uh coding that we've done the next thing i want to do is actually do the same for the menu so this is going to require a little bit of javascript i hope you are excited so the first thing we're going to do is actually import font awesome so font awesome if you haven't heard of it before is this we can use all of their cool icons all you need to do is put in a script so i've already got that but please do sign up to font awesome to get your own i'm just going to get rid of this for now and under where i get the google fonts i'm just going to put my script for font awesome so that is my personal script let's carry on now here so under where i make the unordered list i'm just going to put a button and give it the class of hamburger and an id of hamburger and in here i'm going to use an icon so the icon i'm going to use i need to give it a class of fas fabrs save and refresh and you will see here i have a button with a hamburger icon so that is looking good let's just style it up a little bit because i don't really like the way it looks so i'm just going to grab it by its class i'm going to put border zero and then i'm just gonna background color of transparent as i don't really wanna see it so now if we look here well there it is but it's a bit dark let's change that so once again i'm just going to color white and font size 30 pixels and there we go that's looking a lot better the next thing i want to do is only make the hamburger visible if it's under a certain width so once again i'm going to use at media only screen max width 1000 pixels and then i'm actually just going to put that in here because i only want to see it if it's a thousand pixels or under and in here i'm going to use display none and then display block okay so now you will see it and now you don't now you see it now you don't let's do the same for the unordered list so let's grab the unordered list here and put display none as we don't want to see it if it's over under 1000 pixels so there we go great hamburger menu hamburger normal nav menu let's carry on now it's time to put in some javascript so the javascript will essentially show me all the other menu icons if i click the burger okay so let's do that now so in here i first need to actually grab the element with the id of burger so i'm going to use document get element by id to grab the hamburger id and then let's save this as hamburger button and then also we need to grab the nav list so i'm going to save this as nav list and then once again document get element by id nav list so we haven't actually given it an idea of nav list so let's do that now here we go that's what we want so i'm just going to give an id of nav list because we just want the unordered list next i want to write a toggle function so i'm going to write toggle button like so grab the nav list get its class list and i want to toggle a class that i have yet to write and that is the show class okay so i'm going to write that but first let's actually attach this to the hamburger button with an event listener so add event listener click so if we click the hamburger button we want to toggle the button and we just generally want to oops function we generally just want to toggle the class of show so let's do that let's go back in here find the unordered list now i'm going to get the unordered list and add the class of show i'm just going to put display block for now so we click it they display okay there we go so they are currently displaying i don't like this around the button so let's remove that hamburger focus outline zero oops hamburg go okay so that's got rid of that for now the next thing i want to do is actually just make them display a bit nicer so at the moment they're just quite literally displaying we need to add some more uh styling on the show so there's plenty of ways that i can do this at the moment they are literally just showing up to the left what i can do is actually make the nav bar display things differently so if it's a thousand pixels and under let's get the nav bar and then i am going to make it align items flex start okay so that's looking a little bit better perhaps let's give this some margin and then on here i'm going to put background color and just make it a little bit lighter than our so i'm just going to take the blue from the hero section and put it on the unordered list and then using here i'm just going to drag it up a bit to get a lighter hex color of blue now i'm just gonna get the logo and i also want this to disappear if we go under a thousand pixels in width okay and on the nav bar i want the nav or anything in the nav to display a stacked over each other which is why i'm using display flex and then i'm going to put column reverse and then on the unordered list i'm also going to put margin 0 pixels to get rid of that extra spacing i'm going to put background color here i'm also going to add the lighter blue background to the nav bar and a line self flex end for the hamburger so that it looks like so okay that's immediately looking a lot better for mobile if i do say so myself and i also want this under a thousand pixels in width okay great i think i am happy with this now it is responsive it's looking good now it's time to get these files and put them onto our domain let's do it okay so we have now made our portfolio we have made it with an html file css file and javascript file we now need to get those files and put them onto our domain so i'm going to show you how to do that to do that we will need to go to the hosting tab we will then need to add a website and then i'm just going to enter the domain name that i've literally just bought so anya kubo.com and put in my password so there we go our domain is now on our list of websites i would then click to manage that scroll down to here to where i can find the file manager and in here where it says public html so let's just double click that we see a default php file now what i want to do is essentially go to here so now i'm just going to upload some files and i'm literally going to go into my desktop into the portfolio that we have been working with and select the portfolio let's select the index.html file first click open and upload so that is our index.html file that has been uploaded now i'm going to make a new folder and call it source so i'm just replicating what is happening in my project i'm going to go into the source folder and once again upload the files that are in my source folder so that's app and styles css make sure to name the folders exactly as you did in your project and once again i'm just going to make a new folder and this time call it images so that we can go into this folder like so and upload all the image files and click open and up load okay so essentially we are replicating the folder structure that we built so if i go to here to the root into public html that is exactly what you will see aniakubo.com you will see that all my files are here on the internet we are hosting it on aniakubo.com we've done it it really is that simple okay so we've just uploaded the files in the same file structure that we had in our project fantastic the next thing you want to do is actually make this secure and i would do so with the ssl and i would have to just set it up so it's really simple i would just choose the website i would like to install an ssl certificate for and install ssl your ssl is now installed and we have automatically forced https on your domain this is fantastic so now when i visit it it's secure we no longer get that no secure we no longer get the not secure message popping up simple okay so i hope you've enjoyed my tutorial on how to get your domain by the end of this you should have your own domain with your portfolio on it so that you can take it share it with absolutely whoever you wish thanks so much for watching please do write in the comments if you found anything unclear once again we are just simply uploading all our files into the public html directory just as they were in our project so just ignore these ones here that was already here before just keep it there and just upload to the index.html the root then our source folder and our source folder which has the images folder and the app.js and the style css file and then the images which have all our images so that is exactly the same as we had in our project amazing thanks again

Channel: Code with Ania Kubów

Views: 69,680

Keywords: responsive website, responsive web design, responsive navbar, how to build a portfolio, build website in html and css, build portfolio in html and css, hamburger dropdown menu, hamburger dropdown menu css, media query, website in html and css, flexbox, build a website tutorial, build a portfolio, build a portfolio website html css, build a portfolio website, software development, hostinger, deploy website, software engineering, html website, website tutorial

Id: -D6oTPA4vXc

Length: 88min 28sec (5308 seconds)

Published: Wed Mar 10 2021