Designing & Building a Personal Portfolio from SCRATCH!

[Music] hey everybody what's up gary simon here today we have a huge one a two hour crash course on how i would personally handle designing building and deploying a personal portfolio for like a ui ux designer or a front-end developer of which i know many of you are and we're going to go from the ui ux design process in adobe xd you can use figma if you wish or anything else and also the front end development process html css and javascript using visual studio code and then finally deploying it and we're going to be deploying it and making it live on the web with the help of today's sponsor which is hosting juror now they're the fastest growing web hosting company out there they offer they also suggest the best price and quality ratio on the market and even as after this black friday deal they're going to have the most affordable prices that you can find so of course you can register domain names here which is what we're going to do but most importantly they offer a lot of hosting a lot of different types of hosting like shared cloud wordpress vps minecraft even windows etc the list goes on now most importantly when you buy a service from here make sure you use my special unique exclusive code design course at checkout in order to get an additional 10 off of whatever it is you're purchasing all right so we're going to be using their services uh as you'll see at the beginning of the video and then also at the end we'll be taking what we make and we're going to be you're going to see how just how easy it is to launch it live all right on the web so at this point i want to show you the actual project that we're going to create the final project or the end result if you don't want to see it because it's kind of a spoiler then just skip forward to the next time stamp section for now i'm going to show you right here it's live on the web gary simon 101.com just kind of like you know a fictional domain name for my business i'm going to refresh this yes we do have animations worked in here let's check that again very exciting stuff there that's with the help of gsap which is the green sock animation platform i'll show you exactly how to use that um we have more down here we have scroll activated animations with the scroll trigger plug-in for green stock animation platform and there we go of course as always it's going to be fully responsive and everything's just going to work and look great i'm going to show you exactly how to do all of that so as always if you enjoy this make sure to subscribe and you know what let's get started all right so we're going to start off here actually at hostinger i'm not going to start off with the ui ux stuff first i just wanted to show that you can use hossinger obviously outside of hosting but also to register a domain name does this mean you have to use them to register your domain name no uh but i'm going to show you how to do it here anyhow i'm going to do it live i actually don't even know the domain name that i'm going to pick yet i don't prepare very well apparently so we're going to go to domain and we're going to do the domain checker so most sites have this sort of thing and we just want to enter our desired domain name now it may not be available i mean i already know i have gary simon.com.net.org as well i think so i'm just going to enter in something rather random just so we can speed this along so i'm going to put gary simon 101 that better be available as even as a com so checking checking all right it is available so it'll show up available and of course if it's not available um it will tell you it's not available because somebody else has registered it um it'll give you more options you don't have to use a com like i talked about before these are all different domain extensions that they offer here if there's one that they don't offer like such as dot design i don't see it here you can use dot design as well and just have it registered elsewhere either way get something that you like something that i people can easily remember i see some people using domain names that are just way too long and that is annoying all right especially for a person who can't type very well especially if somebody's using it on their phone for instance so get something that's nice and succinct it doesn't have to be your own name like you know gary simon uh john or jane doe it doesn't have to be that you can completely brand it uh into your own you know unique business name as well it really doesn't matter just as long as you know you make it something that uh people can easily remember and they can easily enter in and it's not too long if that makes sense all right so i'm going to go ahead and just um garysimon101.com is available i'm already actually logged in because they've set up an account for me prior to this and they set me up with like a wordpress starter um package but i'm not using wordpress um so we're going to be setting up the hosting later on in this tutorial but i will at least click on domains up here and we're going to get a new domain name and i'm going to type in gary simon 101. oh it basically took me to the same place okay and it has me not logged in okay well i'm gonna hit add to cart it's gonna verify the availability because who knows somebody in that couple seconds time could have chosen it um web hosting you know what i might as well just select the hosting plan as well and so single shared hosting here's the options that we have to choose from this will allow you to have one website uh 10 gigabytes of storage up to 10 000 visitors monthly honestly i might want to go to premium shared hosting or even business shared hosting in the event that you you know you get more monthly visitors for this uh they also offer a lot of different types of hosting here you can have a vps which is virtual private server which allows you to have a lot more control and access over your server you also have a cloud hosting as well for you to check that out so what i'm going to do is i'm just going to go ahead and i add this here this option here to my cart and once i do that now notice it has a high price right here of course that's probably because it's having me pay for 48 months up front so if we change this uh to one month so with our domain it's uh 899 which is a typical registration fee and the hosting uh it comes out to thirty dollars fifteen cents for the month for the first month and of course this would drop down um you know quite a bit for subsequent months afterwards so i'm just gonna hit check out now and let's see here how do i want to pay well pay with balance i i'll just pay him with my paypal also i'm not going to include this part from here you know how to pay for things so i just wanted to show that initial step all right so i just i you know confirmed the payment and it went through i'm going to hit start here we're going to choose a domain name which is gary simon101.com and we're going to select that and it's going to also allow us to specify some basic information here united states not stats of america we'll just put personal hit next step it's going to ask me to enter the contact information i'm not going to include this part just because i don't want you stalkers after me and it is being registered as it's stating i just entered that prior information such as my address and which way do you want to go all right so we can build a new website or we can migrate my website so i'm not sure what these two i actually am going to do this skip i will start from scratch all right so let's finish this i your chosen website location is europe i think i might want to change that north america there we go and finish setup all right so it's a nice pretty nice interface you know as a ui ux designer i like what i see so far um you know straightforward it auto scrolled you to the parts that you need to go upon completing those steps um please wait it takes less than three minutes to complete the website creation so i imagine they're just um you know creating the necessary folders on the shared hosting plan um so your website is ready manage your site go to hostginger control panel so i'm gonna be honest with you i haven't even seen this yet this whole process to me is new right now so far so good so here we go we have the ip address we have the username the domain name right here i'm going to assume that okay that's a previewdomain.com so that's not actually it um sometimes it takes a while for the domain name itself to propagate oh there it is yeah and it's already up so um what we'll do now and uh or what we'll do later is actually when we have the site ready we have the html css and the javascript then we'll come back here to this process of hostinger and we'll get it live on our dot com all right all right so the very first step to getting your website uh process created for your personal portfolio is going to be using a ui ux design prototyping app there's a lot to choose from out there i personally like using adobe xd or adobe experience design um that's one of the two big you know pieces of software right now for this sort of thing figma is also you know the other one that's really popular as well and it's figma's web-based it works in your browser has a lot of great things about it you can follow along with me with figma if you wish uh otherwise you can use adobe xd as well and i'm not using crazy too many crazy features you know what i do here you should be able to do in figma as well um and why do we start in a design application first why don't we go straight into the html css and javascript process so some of my subscribers who watch me all the time they'll know the answer to this already but for those of you who are new to this process the reason we first hop into a design app is so that we can quickly create the the actual aesthetic of what the design is going to look like in the different devices before we start coding and the reason we do this is is because you're kind of going in blind when you're going in to write your html and your css and your javascript in order to create the design while you code that's always a difficult thing to do it's so much faster and easier to first use a design app because when you want to make a change it's really quick and easy you just move a few things around you change colors very easily whereas if you're just trying to do it when when you're coding making changes a lot more difficult when you have to adjust your html structure and your css structure so this is definitely objectively i would say the best way uh to go about the front-end development process or before the front-end development process is to use these apps for the ui ux process all right so we're going to start right here with web 1920. now with with that said you can start with a you know a small device like a mobile viewport here first and the way you would do that is you come over here this little artboard tool and they have a bunch of presets over here mobile is up here at the top and of course if you click it you can start designing everything here me personally it's just my personal preference i like to start with all the bells and whistles of the full desktop experience and then i like to work my way down to mobile now i don't always work my way down to mobile or tablet and mobile in fact we're not going to do that here i'm just going to focus on desktop but we will make the design responsive when you get into the front end development process um so that it works on a mobile first perspective and i'll describe what that means when we get into the front end development process um so and by the way i'm not doing all that because it's going to make the um the tutorial or this course way too long if i were to create an iteration for tablet and also mobile all right so let's go ahead and get started here um and for those of you are new you're probably wondering where exactly should i start you know really when it comes to the ux process which is user experience design which is you know ui design by the way which is user interface design is a part of it's just a subset of the ux process i mean usually ui design will start a little bit later further in the ux process really the way you would start if you're really interested in the full experience of ux design uh is starting by uh researching you know figuring out who your target demographic is we're not going to get all involved in that process we're just going to jump straight into the ui design process first okay so usually when i'm starting off with a design i'm really thinking about obviously the the hero section um which is com the hero section is just basically the part that you sort of see first it contains usually the the navigation um which is the header part or the nav bar but also the hero section has primarily just the headline a sub headline maybe a call to action of some sort so when it comes to your design portfolio i believe you should have some sort of hero section and of course the way you structure it million ways to do it but what's most important is that you understand the ui design fundamentals i talk about this all the time that's understanding things like visual hierarchy which is basically using the other ui design fundamentals to place importance and emphasis on certain elements over each other that's scale which is the size of things in relation to each other that's color and contrast uh that is also alignment and white space so i'll be talking about all these things as we go all right so the first thing um that i like to consider you know like i said is i kind of how um you know what colors am i going to use a lot of tutorials and courses even full courses can be really relegated towards color theory and all of that stuff not going to get too much into that i do know the colors like the primary color that i want to use and so if i just drag out a bar right here like a kind of like a nav bar i'll show you that color so i i do have a reference photo on a different monitor monitor a reference project rather that where i already created this project so just full disclosure that way things will go a little bit easier i'm going to use the color code 6e00ff all right and i've added that to my swatches down there i really like it it's like a mix between blue and purple and we're just yeah like i said usually i'll get started with like a nav bar first so the nav bar when it comes to you know important project like this you don't want to deviate too far from the norms uh even if even if this is for a ui ux designer this is going to be for a front end developer you do have a lot of freedom to be unique and original but you don't really want to stray too far from important patterns when it concerns navigations all right so what do i mean by that well first people are used to seeing usually uh the name of the business or yourself or the website here in the upper left so i'm going to stick to that pattern you can never go wrong with that so i'm just putting my name gary simon and now by default look how ugly that is that's that's a default gray that they use automatically here on adobe xd what's the issue here it's a lack of contrast always want to make sure that you nail down your contrast so we're going to take this we're going to bump it up to white or we don't have to use white we could use any other color that really contrasts well with the background so that can mean come up here that contrasts pretty well and if you're not sure you can always use here in adobe xd or figma the stark contrast plugin and that will let you know if there's enough contrast on your element now i also do know for the topography i'm going to use a font called poppins we're going to make it nice and bold you can get that font for free by the way if you really want to follow along as i am so i'm going to make this nice and pretty big 26 and we're going to align it so alignment remember it's a ui design fundamental when it comes to adobe xd you can move things and you'll get guides when it's pretty much in the center of it either vertically or horizontally so i think i like that right there i maybe we'll push it right there and have a little bit of white space on the side to frame the layout and so by the way the start contrast checker so if we go to plugins and we type in or we go to stark rather we have a rapid contrast checker so this little window over here shows up i can click on this now the background of course there we go double a we have a notice how it has a a little check mark there that means for the minimum contrast ratio we do pass it because you need to be 4.5 to 1 ratio so if i change this to something else for instance like let's say this i'm going to select both and guess what it doesn't pass anymore it doesn't have enough contrast so this is a nice tool to really make sure that you're adhering to what's called the wcag which is the web content accessibility guidelines 2.0 color contrast guidelines a little bit verbose there um but you can research that i've done a video on it on my youtube channel just to learn a little bit more about why it's important to get your contrast correct all right so that's that's all i'm going to do for that now you may have a logo that has a symbol in it or some type of illustration or icon you can do that as well it's not a big deal but for this and the purpose of this tutorial i'm just keeping it real simple so i'm going to hit ctrl d duplicate hold shift and right you know drag this over here and i'm going to have a navigation right here right next to the the logo now that's a subjective uh choice that i'm going to make um when i say subjective it means just personal opinion doesn't mean it's right or wrong but there are objective things that you can do that are wrong like for instance that would be wrong because your alignment's off um so i always try to remember to to point out the decisions that i'm making whether they're subjective or my own opinion versus subjective so we're going to take this and we're going to make this one white we're also now here's where we're going to talk about visual hierarchy i'm going to go back to the original color and i'm going to put in just a few different links here my work my skills and then also hire me so it's going to be a very simple portfolio now what is the issue here with this design wise it just kind of doesn't look that good right i mean you're not sure where you should be looking first because these are all designed the same semantically there's a two different things right here we have the business name or my name and then we have a navigation but they're not designed differently from each other so you're not sure where you should look first all right so that's called visual hierarchy and this is the visual hierarchy in this context is really lacking so we use in this context because we're dealing with type we use the font weight we use the font size we can use the color to and all those things to reinforce the visual hierarchy so first thing i will do is make it white alright so that looks better already we could tell now that these are two different things happening here but i still think we can improve this and i'm going to change this these here instead of being bold to regular all right so here's regular that is already better we can also use size so we're at 26 let's try 20. all right there we go maybe i'll move them a little bit closer you don't want them too close because it'll be hard to use but i think right around there is actually pretty good all right so next up now by the way we could have taken these three links and just put them right here an equal amount of white space from here to there that would be completely fine that's subjective okay i'm going to do something a little bit more unique so what i'm going to do is i'm going to take this and we're going to kind of create like a two-thirds layout where there's going to be a column here which is about you know two-thirds or 66 percent of the width of this artboard and then one-third over here and over here in this section i'm going to go ahead and i'm going to put a few different social media icons alright so i've already created these and i'm going to paste them i didn't create them i got them off the internet this is the icon for dribble so if you're if you're a ui ux designer you should all you should definitely have a dribble account i would if i was still doing client work uh it's very important to try to get yourself exposure so this is a marketing tip essentially so this is dribble this is behance same thing these are basically kind of like competitors to each other adobe owns behance um and then also twitter i'm just adding it just for the heck of it you can put any other ones that you want but i wouldn't put too many no more than four here three is kind of ideal all right so now um one thing that i want to make sure so that we have good symmetry um in good consistent application of white space is just to make sure that we have an even amount of white space from the very right element or the end of this column or this container all the way out to here and you can see that is not necessarily the case so what we want to do is just we'll put that over here there we go all right so that's my navigation all right now you probably think it's kind of weird looking with this being like that but don't worry we're going to continue the trend so we're going to duplicate this ctrl d and we're going to pull this down and i could leave it the same color again this is subjective but i'm going to make it slightly darker and the color code that i'm going to make is just going to be as if i just pulled this down slightly i have a specific color code i want to use though so it's going to be 6e00ff oh wait no it is not it is actually going to be ah i realized i made a mistake for this one it is going to be this top bar this color there we go that the nav bar is going to be darker so 6 7 0 0 ee sorry about that so notice how barely different they are if i made this something like that or maybe black that would be wrong this right here that could work too i mean they're in the same hue it's just a different value in terms of darkness or lightness but i'm choosing to go you know like right here even lighter so there's a lot of you know there's a large degree of subjectivity all right so now i'm gonna have a real nice big solid headline i'm big fan i'm a big fan of that a lot of people get they put a little headline and it's like real small and like weird looking i like big beefy things and i love i like big beefy titles and i like them where they're not very lengthy and i also like them not to be really literal so instead of saying i'm a front-end developer do something better here's what i had in mind beautifully crafted web experiences now how can you beat that hopefully no one else used that and i just they influenced me and somebody's gonna say i stole that or something now i want this to really be big and large so i think that's good and we're going to make it bold because we want people to see this first and foremost so the size that i have it on the original design is like 71 there we go that looks so good now notice the amount of white space i'm using here when you're dealing with this large desktop you you you know this 1900 by 1080 viewport you have a lot of space to work with don't try to clutter everything together don't do that don't do that notice i kept it on the same column that's visible from the very start of that g and gary and it's coming completely down here and it's right on that line that is alignment white space is the distance from like this edge over here and the distance from up here it's even the distance within the type itself that would be too much or too little rather this would be too much white space so just find a nice medium that looks good and is easy to read all right so beautifully crafted web experiences i'm going to actually push that up a little bit more now we're going to have this up oh sorry we're going to have a sub headline i'd like kind of burp there for a second um the sub headline i see a lot of people get the sub headline wrong when it concerns visual hierarchy again so we're dealing with two different pieces of type just like we were up here we don't want to leave them the same we don't want to leave them even sort of the same for instance that wouldn't be good so for my sub headline i'm just going to say meet gary simon all right so again this is smaller than this you know this is 71 this one's 57. that's still not a big enough difference i want to come down quite a bit smaller so let me get this up and we want white space remember between these two this would be maybe a little bit too close so we're going to push it down and in order to further reinforce that visual hierarchy we're going to change it to another color that we'll go ahead and use in this design and so that's going to be right here this sort of like a light pinkish color all right so the color code for that is ff64cb and meet gary simon i'm also going to add just a little icon it's kind of like a down arrow or not down arrow down pointy finger thing i kind of like that plus it's not even an svg it's just a straight up type as you can see we can type that in or change it as type so i like that meet gary simons pointing down and next up we're going to have a little scroll indicator wheel so that's kind of that's going to be a call to action usually sometimes people will have buttons that's fine i'm going to make the determination to just indicate that they should scroll down in this area so to do that we're going to take the rectangle tool and we'll create a rectangle right around there get rid of the board actually now we're going to keep the border but we're going to get rid of the fill we're going to make this white we're going to make it beefy why do i say beefy that is so horrible and then we're going to create this pull all the way in and of course we can make it a little bit thinner and make adjustments to the height all right and then we'll go ahead and take our ellipse and shift alt drag from the center get rid of the annoying border that they add now i think this might be a little bit too large so we're going to take it and we're going to scale these things in all right that's looking pretty good right there i like that so we'll go ahead and group these and we'll put it like right around there all right i like that all right so now what's going to go over here all right there's a lot of different and by the way when we get this to into the front end development process this will be an svg which is scalable scalable vector graphic you want to use that whenever possible obviously you can't you can't do that for photographs those will have to be like pngs or jpgs but when you have elements that are created like in these design apps um when you can make sure that you use an svg file type because i it's completely vector and you can scale it up to any size and it won't be blurry like a rastered image like a png or jpg and we're going to make this animate so it'll this little thing in here will kind of bounce up and down that will give us a nice visual indicator it'll bring attention to that call to action to let people know that you should scroll down to read more about me or whatever okay so this is looking pretty good i like it um what are we going to do over here so some people might be thinking i would just put like a little illustration right here but i wanted to do something a little bit more unique um so what i want to do is i'm going to take our rectangle tool make this perfect square by holding shift and dragging out and we're going to hide the border and we're going to use this color right here and we're going to give ourselves a little bit of a border radius kind of like that um and so what i'm going to do then is i'm going to duplicate this ctrl d and then just hold shift move down and then i'm going to come over here hold shift and move right there and this one we're going to make it white so i'm going to create kind of like just this is graphic design essentially where i'm going to create something that's kind of really abstract but looks good if that makes sense so i'm going to keep on doing this and move this over here and then we'll get it over here make sure you're using your guides when you do this so you'll see these guides show up to let us know that it's on the same exact path as this one and also in relation to the side of this one um this one maybe i'll come down in opacity all right and then i'll duplicate this one maybe we'll push this one out over here um this one will come down in an opacity as well i'll take this one i'll put this one here we'll take this person did i say person because that's not a person and we'll put this one right there look how cool that looks so how did i come up with this when i was originally creating this well i honestly was just experimenting with shapes and stuff and i thought it was cool to kind of align it here i know this is pretty unique i so i went with it and i liked it i then took an ellipse and i put a circle on one of them and i used this color over here so you want you want to use your colors throughout to really just create a uniform consistent design or consistent application of the themes in your ui design so let's duplicate this one and stick it right over here just make sure it's all lined up this time i'm going to use this color up here oh no not for the border right here there we go now look how cool that is i personally like that i'm going to just take everything group it up and there we go that is the hero section so this is going to be like the first thing that people see and then we're going to create some more now so oh by the way i see a little bit of edge here there we go all right so i like this a lot i like the way it looks let's really get a lot more room or height in our artboard because we are nowhere near complete yet so from in my opinion when it comes to the i the initial hero section or the first section that a person sees when they visit your portfolio whether you're a ui ux designer or you're a front-end developer it should really be simple like this um you don't of course when i say simple it doesn't mean you have to do exactly what i'm doing but really it should have a headline and it should have a call to action of some sort it could be a button it could be the scroll right here and it should be interesting it should provoke people it should be provoking it should make people want to learn more about you and of course most importantly it should be good ui design fundamentals make sure you're you're adhering to alignment good color good topography white space contrast etc all right so next up now i've had my opinions in the past about what i think a person should emphasize next after this hero section when it concerns a portfolio um some people go right into an about me section again you really can't go wrong no matter what you put there as long as it's one of three things or a few things um your portfolio your actual work it could go here next um the about me could go here um your skills can go here as well for me personally i kind of want to get in and see people's work first i want to see what they're capable of so what i'm going to do instead of having all of my like thumbnails for my different projects i've created i'm just going to have like a featured project maybe the one that i'm most proud in proud of all right so what i'll do is i'm going to take this type here and then just duplicate it just so i have something to work with and we're going to make this black we want to be able to see this now visual hierarchy is important even from elements this far away from each other because you can still see them especially on a large desktop you'll be able to see two you know both of these elements at the same time possibly so we don't want this one competing with our primary headline or h1 in html so we're going to make it smaller we're also going to change up the title as well of course so i'm going to put in designcourse.com redesign all right and i'm going to pull this out a little bit further and make it a little bit smaller i used size 41 originally so i got pretty close and this is going to be my feature project and because it's a featured project people may not know that so we're going to add a little subtitle but we're going to do it above so i'm going to put here featured project now we got two blips of text right what's the issue here as it stands visual hierarchy so we want to reinforce that these are two different elements this is the title of a project and this is a label essentially for what i'm doing here you know what this is what this is so this is a featured project what i'm going to choose to do is i'm going to use this color all right i like that i'm also going to use all uppercase so i'm going to click on this little icon to make it uppercase automatically i'm going to scale it down as well quite a bit so for me i'm using size 20 and i'm also going to use some letter spacing you know perhaps out this far i kind of like that and then our alignment is a little bit off i think i want them to be a tad bit closer maybe right around there now look at that that is just so much better than what we had before when there was no difference between the two i'm also going to have a kind of like a design element it's nice to kind of stick with the theme of what you have going on if you've established some sort of you know unique design like this so i'm going to take right here if i go back here to my layers i'm going to paste in this ellipse and i'm going to put kind of like a watermark version of this up here in the corner the very left corner that looks weird now but we need to drop this underneath and i'm going to take the opacity way down so that we have just kind of like a watermark it's barely visible you can still read the type that's sitting on top of it that's what's important you don't want to do something like this because that's a little bit strange a little bit hard to read the feature so i'm going to go much much lighter i actually may even change the color here to match this there we go and then we're going to have a little bit of a some description some accompanying text so i'll just take this and duplicate it and again we're dealing with three different elements now so they all three of them should be different from each other this is going to be a description some lorem ipsum so the size of this is going to be 20. it's going to be medium where are we at there we are and it's also well before we get to any more changes let's get all the text in here so there's a plug-in you can get called lorem ipsum quick lorem ipsum ah we might actually no that's fine right there too much line height right way too much so let's bring that in right around there and we can also change the color to be a little bit uh a little bit um not as much contrast so not black but instead i'm going to use 3b3b3b and perhaps we'll make it a little bit thinner we'll get rid of this line right here maybe this there we go and maybe we'll push it down like right around there so now what are we going to do with this area right here well designcourse.com i took a screenshot of it we're just going to put that right around here and then we're going to take all this and maybe center align it to the height of this element there very simple as you can see all right so now let's create another section i'm going to take this and i'm going to put this right here and this time i'm going to extend it and we're going to use one of our other primary colors of this pink now notice how this is overlapping that's completely fine we can achieve that through css when we get to that process and i just kind of like the whole overlapping effect i mean we could have done this that's fine but i'm choosing to do this so it's one of those subjective decisions so in this next section i'm going to talk about i'm going to have three different panels a three column layout where i have just a few of my skills listed all right so we're going to use a card based design and a card is just like a like a rectangle usually that includes some information with it so we'll create just the rounded edges here um and it's important we get the the width right almost from the beginning so if we repeat grid me make sure we have uh we're going to make sure that it's not extending out too far there we go so we're actually really close that's a good width right there already right around there so i'm just going to ungroup that real quick delete those two so now we have a good width we can choose to have like an icon at the top a little title and then maybe just like one sentence that's a pretty common pattern for that sort of thing i'm not going to sit here and design these from scratch because i don't want this to be longer than it needs to be but i did use you know the pen tool and the line tool and the this tool the ellipse tool to create this little design here for it's like an icon so it's a custom icon that i created and this first blip is going to um be about it's going to it's about ui ux design so this is just kind of like a little mouse icon illustrating that it's kind of like a design type thing with bezier curve handles or whatever next up we're going to have our text and this is going to be center of the line so i'm going to left click and drag out all the way from the very left and right of the card and it's going to say ui ux design i'm going to center it there we go now we know it's centered in this actual container we're going to use and we're going to make this bold we'll make this black all right make sure our icon is centered as well and then we're going to have just a few lines of text underneath it again you want to make sure you have good visual hierarchy so i'm going to paste in some lorem ipsum text so for this we're going to use popham's medium on 18 points so medium 18 and also we're going to make it like a dark gray that 3b 3b 3b that we were using before all right so now there's not enough white space on the right and left so we're going to take this whole alt and drag in all right so line height is looking to be we're going to take it down just a tad bit to 37 and there we go so notice a lot of white space all around this container there's not a lot of element there's no there's no elements right up against the side or even near the sides that's what you want especially on you know tablet and desktop when you have a lot of room to work with um so let's go ahead and take these five elements or four elements rather and we will replicate them so we could do that with the repeat grid all right that looks good i can ungroup the grid now and then right click these two and ungroup those and then i i can delete these and i'm going to paste in just um the next two are just type based icons that i created all right and then we'll take the other one and again this is just the poppins font that i use and i just changed up some color this one here is going to be identity design so maybe this person deals with identity or logo design um in front and development yep right there oh my god i'm not typing well today develop meant there we go all right so look at this this is what we have so far i really like it let's continue on maybe we'll make this a little bit less in height we'll take these push them up a tad bit there we go all right so the next section we're going to actually going to have our portfolio i like where we list out a number of projects so um for this one i'm going to copy one of the things that i had all right this is kind of looking strange here let me increase the size of this there we go all right so this is uh frettastic.com this is an app that um i created with the help of a friend earlier in this year in 2020. i think we have like 15 000 users they're free users of course but uh but yeah pretty good um so we're gonna do like an all yeah we're just gonna um have on the right like a thumbnail and then on the left we'll have a something similar to very similar to this so i'm just going to copy this paste it over here remember we're on the same path all the way up actually is this equal let me see there it is okay all right so this is just going to say like i guitar app all right and this is going to say frettastic oops fantastic.com and we'll leave the lorem ipsum text there for the size of this type yeah we're using 20. that looks pretty good all right i kind of like that and then we'll take this we'll repeat the grid and we'll just show three at a time now you can do that that's completely fine so if i ungroup this we could also if i ungroup that as well we could alternate these so like we take these put them over here let me take this and then um put this like right here along this edge so you could alternate these if you wanted to but to keep things a little bit more simple we're just going to stick on like the same area and we're going to use a gsap which is the green stock animation platform to animate all this stuff in you can just you can obviously keep on going uh you can have maybe a small about section section at the bottom um and then also the footer so for the front end development process we're only going to cover up to the bottom of this point so all this is going to be covered but just to show you more a more complete version we'll have maybe a call to action like what you see hire me and then we'll have you kind of have down here a footer and then we'll end it just like oops we'll end it right here all right awesome awesome stuff so you can go ahead and save that and also i'll call this portfolio post and now it's time for the fun part the front end development process which involves the html css and javascript all right so here i am in visual studio code so i'm aiming at this for people who perhaps are brand new to this sort of thing um so visual studio code is a free code editor by by microsoft very popular most people in front of devs are using it these days and like i said it's free you can't go wrong so i have a new folder created called my portfolio and i also do have the images already ready to go so here's some of the images that i have so like the behance ideally these would be svg graphics um the ones that i found were just pngs those will work just fine and i'm referring to um this one right here or rather sorry this one right here these three graphics there's also the little preview graphic we have a few of the svg based graphics like for instance hero design what is that that is this element and the way you export the elements that you create in adobe xd this is all a group and i this is called group two normally we call this like hero hyphen image that's the file name it will be exported as we right click we export selected choose svg choose the export to which would be you know your new folder you're going to create for this project and then um inside a folder called images and just hit export all right so that's what all those are i'm going to make these all available in a project um zip file that you can download so um now what we need to do is create an html file so we're going to call it index.html and the reason we're calling it index is because this is the home page and most servers recognize index as being the starting point so if we go to garysim101.com which we registered earlier then we can just i just go there instead of having to type garysim101.com forward slash index.html and so here in visual studio code we can use these little code snippets to make our life a little bit easier so we can hit exclamation point enter and that gets out some of the quick boilerplate for html so for this particular tutorial slash crash course or whatever you want to call it i'm going to i'm going to assume you have basic understanding of html and how it all works if you don't then check my channel for uh a front end developer crash course that i put out earlier this year and then there's tons more from other awesome youtube creators on youtube as well that you can use and then of course you don't even have to use youtube there's many sources from which to learn html we need to link up a css file which is what we're going to do um more towards the end because we're going to first we have to write our html so we use the ring the link element we're going to point it into a folder called css main.css so let's create that folder called css and a file called main dot not css we're gonna use sas so sas is something that allows us i also have a crash course on sas it allows us to do things that normal css can't do and it gets transpiled into normal a normal css file called main.css so in order for that to work you have to use the sas compiler which is a plugin so we come over here to the extensions and then you want to choose we want to have installed uh the live sas compiler right here and click install to get that installed i'm also going to be using another one while we're here called live server you want to install that as well so the way you use these is we choose watch sas all right so now notice it created see a main.css file we don't edit this file we only edit this file changes we make in here will be reflected in the main.css main.css is what's being looked for by our index.html so we're again we're writing in sas because it gives us certain abilities that make our life easier rather than just writing plain old css if that makes sense and it will if you understand sas and take the time to watch my crash course on it or anybody else's outside of that when we're developing we want a way to see what this thing looks like in the browser every time we make a change in here every time we save something so we're going to right click open with live server that's that live server extension so when we do that it's going to open up a browser with our project 127.0.0.1 blah blah index.html now i'm going to squash this and put it in the upper right normally i would use my other monitor but i want you everyone to be able to see what i'm doing and so what i'm going to do is pull that all the way down and then we're going to pull this one right next to it and we're going to uh when we get to the html or the css portion after writing the html we're going to i do what's called mobile first css and i'll explain that when the time comes for now we're going to write the structure of the html so when it comes to structuring your html there's not one perfect way to do it um there's definitely ways you can do it that are less preferable than others or in other words are more verbose meaning too much tags there are an unnecessary amount of tags um i'm going to do my best i'm not going to say i'm the absolute best front-end developer in the world i'm pretty decent though and so i'll just i stop talking we're going to start writing our html so the html is like the skeleton or the structure the framing of your site based on the elements that you need and then css beautifies it so you're going to see when we start writing this html we have no css it's going to look but ugly compared to what we have here and right here so it's always useful to look to to refer back and forth constantly even put it on another monitor so it's there your your your prototype because that's going to help you figure out which html elements that you need to write for or an account for all right so for me um we're basically going to get started by creating a whole container for our navigation right here so this is going to be one big block of html so for that i'm going to write in where it's going to be a div and a div is a common way to structure layouts in html and i'm also going to use emmett m-e abbreviations they're called like this little exclamation point that we used there's a lot of other ones you could use i also have a crash course on emmett others do as well check that out but in order to write instead of write that writing this div class equals nav container instead of having to write that out i can just do this instead a period a period in css means a class so we put this and hit enter and guess what i didn't have to write all the other stuff so that's what m abbreviations are i will be using those um so we have our our whole block so think of this as eventually being if i save this you can't see anything because we haven't styled it there's no content now if we hit this we'll see asdf or blah blah blah blah up there but this think of this as just eventually being a block for this a square just like this thing right here all right so the next up we're going to create a container for just this section you know to go to house these three items right here and so i'll call that i'm going to use the there's a lot of different tags in html or elements we're going to call that header and then we have to account for let me close out this other one yeah there we go all right and we're going to i specify next inside of the header element what's the first thing that comes it's the logo so we're just going to use a hyperlink and you may have heard about that before i'm going to use an abbreviation so you can use a for the element name and then period class is going to be called logo so this is what that creates so we don't have a page for that to go to usually it would be your index.html so won't we just put that because usually the the company name if you click it you're expecting to go back to the home page and inside for the anchor text as it's called between those tags we're going to put gary simon all right so that's accounted for now we're going to have the navigation all right so the navigation it's these three elements right here so we're going to use the nav tag we're going to use an unordered list we're going to then specify the list item and inside of each list item we have a link and then inside of the anchor text we're going to put the very first one which is my work shift alt down arrow key will replicate that line so i'm going to do that twice my work my skills ah there we go my skills and then hire me all right so these little hashtags means nothing's gonna happen when they click on and it'll go anywhere all right so that's all the html for that section so we're still inside the nav because we have to account for right here these three elements so inside of there we're going to have a class that that contains all of those so we'll just call this social header a div class and then an unordered list a list item with a link going nowhere and then an image because we're using images for those the source is going to be images dribble.png the alt here is going to be dribble we're going to replicate that two times this will be behance and then this will be twitter alt means when somebody with a screen reader who's visually impaired or if you hover over the little graphic with your your icon it will it will show this text and this is something that is required um for your image tags all right so look how ugly this is now without css css will allow us to completely change all of how this looks all right so now that's the top part that is this whole part right here all this this html markup is responsible it's going to be responsible for this that's all we need next up this section let us get on with that all right so i'm going to call this i'm going to wrap this in a container called hero all right inside of there we have this content right here these three elements the h the h there's going to be an h1 element this is going to be a paragraph element i believe or a span and then we have this image svg so we want to wrap that in their own container so this will be content inside of there we're going to have an h1 with a class of stagger up i'm going to wait for that because that's that's the actual animation part because we're going to animate all the stuff i'm just going to play h1 for now and this is where we put that text beautifully crafted web experiences i'm going to paste that in then we're going to have a div class of meat all right and i'm going to simply paste in a span element that has this little down thing so if you you go to google and you type in html down pointer or something like that you can find that and paste that as well and then we're going to type in paragraph meet gary simon and then finally outside of that we're going to have our span element our i'm sorry our svg graphic which is that little scroll indicator now you could use an image source and just reference images forward slash scroll to svg but because i want to animate it we're going to put that code inline in here so what i mean is we're going to scroll to svg i'm going to copy this actually i'm going to get rid of some of this stuff we don't need i'm going to copy that and we're going to go straight to our html we're going to paste that in there and we're going to save it we can't see it because it's white and the background here is white but trust me it is there all right so now what we're going to do is let me get this uh let's yeah that's fine right there so now what we're going to do um is at this point we have to have an account for this section this little graphic right here hero image same thing i plan to animate this these in as well through a sequence animation and again i'm going to show you how to do all that we're going to do that outside right here it's still inside the div class hero but it's not inside our div of class content it's going to be right here kind of in its own column so it's sort of like a two column layout so again we're going to go back to our hero design again we don't need some of this stuff in fact i'm going to copy it from my reference code here and i'm going to paste it right there so class make sure you add class hero hyphen design um i also have classes added to these as well called square animation that's for the animation part you'll see how that comes into play later on but everything else should be pretty much the same all right so now if we say that we'll see a big old graphic here nothing looks good so let's continue on outside of this div tag so this closing div tag is a relation to the hero section now we have all of our html completely written for for this entire section right here next up let's focus on this so we're coming down here to the bottom and we're going to call this we're going to use uh another a tag called section because these are sections of content and we're also going to give this a class called featured the classes will come into play you'll see later on when we get html and into that part and as you can see if we come out here and look at our project it's a two column layout pretty much we have this column of stuff right here and then we have this column so we're gonna have a column called uh left and also a column called oh nothing this is actually going to be an image because in that column is just an image right here all right so inside of left we have a few things to take care of so what i'm going to do is i'm going to have yet another container and you'll see why before we get to the type that's there because there's three different pieces of type you'll see why i choose to do that when we get to the animation portion so i'm going to have another one called inner and i'm also going to call this transition 2 right here all right so hopefully i know that's confusing right now but hopefully uh when we get to that section it'll be clearer so we're going to have a paragraph of class subtitle and this is feature what did i say guitar app i think yeah i said guitar app for that little sub headline what i'm referring to is right here did i put a featured project oh okay that's right i was thinking about the other one so this needs to be changed to featured project now notice how i'm not making it all caps we can do that with css um so we're going to have a link here because that this this title will be clickable um this is going to be class featured title again the reason we're giving these classes so that we can style them specifically this would be designcourse.com redesign and then we have the lorem ipsum text so paragraph of class i mean a paragraph of class featured desc for description and i'm just going to paste in the amount of lorem i forget how how many uh words i used of lorem ipsum but there is a plugin you can get like if you type in lorem10 it'll give you like 10 units of lorem ipsum text just like that so i think i did like 15 or 20. so you can see this stuff down here all right and then after that oops where did i go okay after that we have uh just our image uh of that thumbnail and that's gonna go right after our closing left uh div tag right here so image source is gonna be images project hyphen 1.png alt will be featured project and then we also want to give it a class it's going to be right so we have a left and right class now and then i'm going to put transition 2 here just so i don't forget about that part transition 2 is for the animation stuff all right and that's it that's all the html right here hit ctrl b by the way we can close this give us more space that's all the html that we need um like i said for this section now this little um circle we're going to create that and i'll show you a real clever way where we don't even have to create an html element for it all right so next up we have this element down here or this section rather so let's get that accounted for that's going to be another section and this time we'll call that skills so section skills and so for section skills i let's go ahead um so we're going to have a skills we have to have a container for those three different elements those cards rather so we're going to put in skills hyphen container and then an unordered list and then a list item of class transition two again this is all going to make sense when we get to that part let's uh separate these out a little bit so in here we're going to have a fair amount of um html inside of these list items all right and so because for each one of those list items we have to create this this this for the html so for the first one we're going to have a a container specifically for the icon so we're going to call that icon container and then one oops i think we'd use plus is that what we do no i forget that emmett part to add like another class i forget what that was i don't use that one commonly no big deal though um and then we're gonna have our image inside of it so images icon hyphen ux.svg the alt is just going to be a ui ux icon outside of that is going to be the little title so paragraph class skill hyphen title that'll be ui ux design and then also a description so paragraph of class feature hyphen desc we're also going to have another class called skill description and then also we're going to have our lorem ipsum text inside of that so we'll save that and this is what we have so far down there and then at this point we just have we're just gonna copy that stuff real quick um and then we're going to create like just two more so do we take this list item right here paste it in two more times and we're just going to change this to 2 and this to 3. and you'll see how that comes into play when we get into the css portion so we also have to change this um this is going to be front end and this is just going to be identity i believe it's called i want to make sure that's right no it's logo sorry about that all right and then we'll just change this up as well so this is front end development and this one is identity design so we'll save that and then we can see all three of them here again really ugly but that will change rapidly so we're done with that section now so we have all these closing divs from everything we opened up there next up we just have this uh these three elements remaining and that is it then we'll get to the css portion so right here uh we just have to basically it's a two column layout we have this and then we have this so let's get those up and running so we're going to call this section portfolio for class and inside of here we're going to have a portfolio container for each one of those all right and also um this is going to be called we're asking to add a transition 3. again that'll make sense once we get to the the gsap animation portion so we're going to have a another container that will contain all the text so this is going to be called portfolio left and so the text we're just going to have another one of those inner divs and then we're going to have a paragraph of subtitle my work or actually no this one was guitar app and then let's replicate this two more times this right here is featured title this one is frettastic.com and then here's our description down here so again i'm just going to copy a brief description all right and then also the class name is featured oops don't want that featured hyphen desc all right so now what we can do is after i believe which closing tag yeah it's after this tag so after portfolio left we put the image so it will make it clickable so ahref goes nowhere and inside of that will be the image source is images forward slash freddy dot jpg frettie and then alt is just going to be fantastic all right that's really large but you'll you'll see how we'll fix that in later so now at this point you would just create as a replicate or copy and paste as many of these that you need to all right so we're just gonna i'm not gonna make each product like unique with unique images and titles you get the point now you would change this all for your different projects that you have so we'll save that and that's it that is all of our html that we have accounted for quite a bit i know but now let's hop into the css process and really get this looking good all right so if you remember when i was talking about uh mobile first css what that means is we want to make sure let me close these out we want to make sure that we start writing our css so that it looks good in mobile first and it just makes your life a lot easier and usually your css code a lot more simplified so what we do is we progressively enhance it as we start to account for larger sizes like this is like around this would be like mobile this would be somewhere in a range of uh tablets and then we have desktops out here and so you'll see through responsive design and media queries how we can start to start to progressively enhance the site usually a layout is more simple and simplistic on a mobile device because you have less screen real estate to work with and then so we progressively enhance it and add in more features perhaps or design elements or whatever all right so let's go ahead and get started with that so with that said what i usually like to do i start with a body tag you don't have to but it's just what i do we're going to say height 100 viewport height reset to margins to zero you can see what that does it kind of just got away from there's a little bit of a you know white space from there and then font family pop-ins now if you don't if you if this is a serious project you want other people to use it you need to make sure that um for people who don't have the font installed this won't work so what you want to do is make sure that you get the poppins font imported into your css so if i type in google.com fonts and i type in poppins we click on it and now you can also download the family locally to your computer but right now we don't care about that we want to make sure we're importing this so what you can do is select which styles you're going to need like how bold they're going to be like um this one we want to make sure that we add that now you can see where it says use on the web we want to import this so you notice it says font weights 700 um now you you normally you don't want to have every single one of these because it takes a long time to download them um so you just want to select which styles make the most sense based on what you need so like i said 700 we have this one added we'll probably use um 300 which is light and 400. all right so now if i where did that little there we go so now we choose import we copy this not the style tag so just this and we paste it that's it so now people without that font and installed on their computer or their devices they'll have access to it and then also you can put a comment here and put arial for like a fallback font all right next up there's some resets that i like to do where there's common html elements that appear throughout my particular project that i like to just overwrite some default reset values so you the unordered list shows up quite a bit here so unordered list um we're just going to say list style type none what does that do it gets rid of these little dots so watch save it and there they go there's also some white space um through margin and padding on these so i want to change that as well margin zero padding zero so watch what happens when i save that there they oh they go that goes away and the reason i'm getting rid of it is because i want to control that myself there's also the hyperlinks so text decoration none that gets rid of the underlines and then also image uh we're going to say width 100 and that makes things responsive although that looks horrible yeah that's why you want to use svg by the way all right so now let's get started um let's work with our nav the very first thing that shows up which is our nav container this is in relation to oh let me scroll back up here this bar right here so let's reference our nav container so nav container it's a class so we put a period and we have to give it the background right that background color the background color you grab the value up here copy that right there ctrl c so we say background there we go obviously not what we want but at least it is the right background color so now also inside of nav container this is one of those things that regular css can't do but sas can we can embed uh our rule sets here so we can put color white so for all of the links which are appearing here my work my skills hire me you see the a link right there we're going to make the color of those white there we go and then um let's reference our header header shows up next right here so we'll go back header we're going to display flex which is a way to create a what's called a flexbox layout all right and we're going to to justify content space between all right so the reason that's not working is because i put a period by accident that's not a class this is an html element right there so i was wondering why is this not changing anything so there we go so let me just back up real quick so this is what display flex does this is without it so display flex we'll put them on um two columns and then because we want this to be right aligned for mobile we're going to add i justify content space between all right so now we want to also add white space around it padding two m units margin works on the outside of elements and outside of the element itself and padding works on creating white space on the inside of an element all right so now we've pushed that away from the browser so that we've given ourselves some white space at this point it's kind of strange because we're only dealing with the mobile view and we don't have a mobile we didn't create a mobile prototype of this design so this is where i'm making some choices where i didn't you know design for initially which is why in an ideal world you would have a design for you know what the thing would look like what this user interface would look like at a lot of different um devices all right so outside of that inside of here inside of our header let's see header is our logo class logo that's what we want to reference so we're going to say logo and we're going to make the color that certain greenish color that we had grab the color code copy paste that so now it's that color it also needs to be bold font weight all right next up we also have inside of the header our nav and our unordered list and list items so let's get that situated i don't like how it's like there's three on top it should be column based floating to the side of each other so we'll say nav we're going to float right and our unordered list i might remove that but on our list we're going to display flex because that's going to put them all next to each other and then we're going to have our a elements display block this has to be added nothing will happen here but this has to be added for padding to work so padding 0 on the top and bottom 1em on the right and left there we go so float right does that do anything here i think it does because if i drag this out okay it doesn't i didn't need that at all so uh what we could do is just get rid of that and that and then shift tab that and it should still work okay that was my bad all right so that's it for our mobile navigation now you're probably wondering why didn't i use one of those little hamburger menus the three you know horizontal lines because i didn't have to i have enough room for just the three links now if i had four links i would definitely have to use one of those hamburger menus and we'd have to use you know there's you could do it through javascript in order to open up a panel it does make things a little bit more complex and most projects will probably have to use that but because this is simple we don't have to and when you don't have to don't do it if this is less clicks to get to these pages than in having to click a menu first all right so next up i social header right here this social header where do we have room to fit this they're not that important we can put that in the footer or somewhere else so what i'm going to do is just hide this initially on mobile the way we do that we can see the div class is social header so we reference social header and we say display none goodbye look up look how much better that looks already so now uh we're going to worry about our hero section and that class is div class of hero we have a class of content inside of it which basically um holds all of this stuff which is in reference to this this this and this all right so let's go ahead and work on that so we're going to have our hero section we have to give it that background color because remember it was slightly lighter than the nav bar above it so we're copying that color code background all right color so the color of the font and the text inside of it will be white we're going to display grid now we have we have flexbox and we also have the grid and those are different ways that you can choose to lay out a website i probably could have used flexbox to do this but i like mix and matching especially just for the purpose of the tutorial and learning different ways to do things so text the line center padding 4em all right i this is probably a little bit confusing because why is this stuff all the way cut off that's because of this large graphic down here uh don't worry though we will fix that because for the hero design which is a class hero design right here which is reference to this stuff i'm choosing not to have it on mobile so we're going to do hero design in fact what we could do instead of doing here design display none we could just put hero design as a comma right here so we can have two selectors if they have the same value or property and value all right so now look at how much better that looks already all right so next up uh we're gonna have our little meet button because these aren't supposed to be on top of each other this is supposed to be to the left all right so for meat meat is a container if we show you real quick me contains two elements a span element which is the little icon and then this paragraph so what we can do is display flex oops make sure everybody can see this so display flex margin 0 auto width is going to be 200 pixels we're using absolute value for there and then font weight will be bold and colors that is going to be that pink color we're uh using which i have the color code off the side of the screen all right and then we have to move the hand down so how do we do that well we just take the span element margin top 1m unit and margin right 0.5 m units look at that now we also have the little scroll element right here as well um i think we need to put uh class uh equals scroll right there so now we'll say scroll with 30 pixels and margin top more white space 2m units there we go that's the mobile i design for the site so far now if we expand this out it just starts to look a little bit crazy right so we'll get to that part eventually but we still have to worry about all this stuff and making it look good so continuing on um the next section that we have here i after the hero design because we chose to hide this is featured all right so uh what we'll do now is i features is the first time section appears the section element and for all the sections i have a couple of properties we want to apply to all those sectional elements so we're going to say section padding on the top and bottom is going to be 4 m units and also on the right and left is going to be 2 m units so you can notice how you know that affected things it gives us white space on the right left and also a lot more on the top as well twice as much and for for mobile we want everything to be centered all the text all right so notice all text now is centered inside of those sections all right after that featured we're going to say position relative now that's really not going to change anything but it was necessary because we're going to create this little circle right here all right so this circle like i said we don't have an html element for it specifically so what we can do is we could say featured before this is a pseudo selector so we say content is empty there's nothing in it position absolute so when we have a position absolute element we take the parent container or the container that it's based on and we say position relative otherwise this won't work in fact i'll show you how it breaks if i remove that in a bit so we're going to make this circle a width of 200 pixels a height of 200 pixels and a border radius of 50 percent which makes it a circle otherwise it would just be a square and then we give it that background color which is that light pink color i have this on my reference mod otherwise just go back to xd and grab the color code and there it is so you can see it now why is it over there well first we want to do top zero left zero and then z index we'll put as negative one and that gets it behind the text so if we remove this position relative it actually ends up going up here so we want to position that element relative to the parent container so that's why we put position relative here so that's when it went away because it was like up here or something we couldn't see it was behind this stuff all right um so now we have to work on our subtitle because if you recall it looks like this all right so we're going to take our subtitle text transform uppercase watch what happens and now it's all uppercase also font weight will be bold the color is going to be the purple color and letter spacing will be 0.2 m units now again i had to experiment maybe i put one m unit first i mean i don't know what i did it was like crazy right so you have to experiment with your values in css and then also font size we make it small 0.85 m units all right i like that all right um now we have our featured title class which is right here feature title for the designcourse.com redesign right here so we have to reference that because it's like the default blue hyperlink color so featured title color black font weight bold font size we're going to increase to 1.3 m units margin top we're going to decrease the amount of white space and then display block will allow that margin to work there we go now the description that is featured desc and that's going to be color that's that 3b 3b 3b 3b 3b and then margin bottom will be 3m units to get white space away from that element font size will be 0.85 m units and then line height will be 1.8 m units and then font weight is going to be 500 will that work i think it did okay um actually you might want to make that a little bit darker to come to think of it all right maybe make it a little bit bigger 0.9 that's better in my opinion okay you want to make sure everything's readable now we have our next section skills which is down here so we need like that pink stuff over here the pink background which is right here so we're going to say skills background ff64cb all right and then we have our skills container which has all of our unordered lists and then each of the three cards so skills container unordered list and list item now the reason these are empty i thought i was going to have like a css specifically for it so what we could do i realized i actually don't at all so in order to get rid of that what we can do is just ul li there we go and then we can put in background light padding 2m units border radius 1m unit margin bottom to separate them away from each other i won't say they will see what i mean see there's no space between them one m unit all right and then we have our icon container which is inside of here so icon container will say height is 100 pixels display grid place content center so there's only one image inside of it so it's going to center it horizontally and vertically look at that and then margin zero auto we'll make sure there actually i don't think i mean have to put that i don't know we'll see um and then what i do is remember we have a one two and three one two and three well here's why we did that we're gonna put and one we're gonna say width is 50 pixels so each one of these are they they're like this one's more square this one's more you know that bigger it's just different orientations so we have to adjust the width independent of each other so 2 width 100 pixels works better there and then for three this one is with uh like 60 pixels all right i think that looks pretty good this could probably be a little bit bigger but i'm not going to go crazy about it so now these titles i lack a visual hierarchy this needs to be bold and such so outside of there we're going to say skill hyphen title font weight bold all right and then finally our feature description which is the description underneath margin bottom two i mean i'm not sure if we even need that well we might for the future we'll see i'm just going to leave it so there we go looking pretty good so far next up we only have a couple more things because these look actually pretty good already right just a couple more things so our portfolio this is uh the class on this the last section called portfolio we're going to say background um we're making the background i believe just a very light gray i think i had it white though completely white i didn't even mess with that but this is like a very light gray that i'm choosing to use text align is already centered so why did i do that yep don't need that all right and then also portfolio oh by the way some people get mad because i'm using a reference code like a reference monitor me and other creators like friend and developers get crap for this sometimes but honestly if we were just winging this and doing this from scratch the flow of the tutorial would be much longer because it just takes much much longer to figure out how everything should be structured some people like to see that and i've done live coding before but it just makes a more concise compact tutorial plus trying to do stuff live while you're recording and people may be watching you you're stuttering over yourself it's just not good um so portfolio container a img all right so we're selecting from the portfolio container and also the link in the image inside of it we're saying border radius 1m units to round off those corners margin bottom 2m units here we go and that is it that is the very first you know the mobile viewport of this design it all looks solid in my opinion and it works well so but what happens when we come out here it starts to look strange that's a lot massive that's massive so we need to start fixing things as we increase in device width device widths so if you ever want to know how many pixels your viewport or this area that's viewable and the device or your browser is ctrl shift i will get you out um dev tools in both chrome and firefox um and when you move it in and out see we have like right here this value is changing i'm not sure if you can see it like this is 800 pixels or so so we're going to create a viewport you have to ask yourself at what point should things start to change about this design i would say right around 800 pixels we could start making adjustments to this design so we're going to write what's called a media query all right so i'm going to paste in what that looks like media only screen and minimum width 800 pixels so anything that happens any rule sets like our css that is defined in here will only apply to greater than 800 pixels all right so that's what mobile first css responsive css design is um so let's just get ourselves right a little bit past 800 pixels like 803 and start making some changes so the first thing i'm going to change is about like our this area i still think this is fine i'm not going to change that but this area i think we could put into a two-column layout much like we have right here because this is not centered and you know we have our two columns one in here one and two there so what we're going to say and let me just move this over and by the way i can save space by just bringing this here so what we're going to say is we're going to take featured and we're going to take our portfolio class and text align left so that's the first change all right because that's what we have in our um our prototype featured and then portfolio container we're going to say and by the way portfolio is in reference again to down here so it took those and made those text line left as well also portfolio containers for reference to what's holding this the parent container there and we're also going to say display grid grid template columns the first column we're going to say is forty percent wide and then auto and it'll just automatically fill sixty percent of the right so look at that so now we have a two column layout same thing here doesn't look good though kind of white space issues here so we're going to adjust things next we're going to take our left column which i believe is in reference to this area right here and also our portfolio left and we're going to say display grid place content center so this kind of centers things and this keeps it centered there as well because if we take this off it stays up top and you have uneven amount of white space so if you keep that back it puts it in the center all right so next up we have the right column which i think in this context is this class this right here this element and we're going to say margin left 2 m units and then margin top we're going to push it down by one m one m unit rather all right and then skills is going to be margin top negative 5 m units so skills is in reference to this remember i wanted this overlapping effect putting negative 5 here will help us do just that and then also we're going to put margin bottom negative seven m units that does the same overlapping kind of effect there and then padding top seven m units to push it down from here and then we're going to create the three column layout here so we have skills container which again contains if we go here where are my skills at they're here right here so skills container contains our unordered lists um ul we have to put here we're going to put in display grid grid template columns we have three of them of equal width so we put the repeat function three of them for auto value no white space so we have to fix that grid gap 1m unit so now we're getting close to the prototype all right so i now what we want to do is specify our portfolio so our portfolio class padding top uh we need to push this down so like these are real close so i'm putting seven and m units so we're pushing them down a little bit and then also our portfolio container img for image is going to be margin left 2 m yep 2 on 2 m units to push it over to the right and then also uh yeah that's it so that's it for the first media query that we have all right so watch what happens when we get underneath 800 pixels right here everything's stacked then it changes stacked and then changes that's the power of responsive design with media queries all right so now even further we get out further we can make changes like up here we can we can do we can really introduce this section all right so let's do that how are we going to do that so i think we'll do this around 1050 pixels so in other words if i drag this out to around 1050 that's right where i think we have enough room to convert this into the design that we created originally for desktop so i'm going to copy that media query all right and inside of here hero height 90 viewport height so what that means is once we get out to 1050 it's going to take this whole height and make it about 90 percent of the viewport height all right and you'll see what ends up happening here as we work on this further let me um take this down just a bit all right so now we're going to have our header and we're going to start working with the padding i'm going to work with the padding in several different areas as you'll see before we do that though i want to put in nav container and we're going to do display grid grid template columns will be 66 percent in auto all right and then background will be unset so temporarily this is hidden nav container if you recall is right up here it contains two elements a header and our social header we're going to bring that back so we created this as a display grid and created two columns out of it based on this element and this element so in order to get our color back here we have to target the header right here right so i what we'll do is inside of nav container we'll say header and we'll say background and we'll bring back that purple color that um we hid in here so if we save that there we go just like we have in the original um so now i also kind of want to as the as we increase the width i want to create a larger gap over here for the beginning of the design essentially so what i'm going to do is we're going to take our header and we're going to create that gap just by using padding so padding 2m on the top still 2m on the right 2m on the bottom but 4em on the left so it pushes that out so if you can see that if i bring bring this over here if this was 2m units this is where it was before but now we're just saying four um also the social header i'm just gonna paste this one in the social header as well um is gonna be over here so the social header we don't yet see because we have to display block that but for now i'm just dealing with the padding you're not going to be able to see this i'm just kind of keeping the padding adjustments for those three sections over here so sections all sections as well will have 4am for padding not the default 2 that's currently there so 4. all right so now let's get our social elements back in view so what we do for that um it was it was in a parent container called social header and then we're going to say display block now because before it was display hidden so now they're brought back and for the unordered list we're going to say display flex then we're going to justify content space between then we're going to do the width will be 7 m units uh oh something happened oh i forgot to put a semicolon there and then float right all right and then also image let's make these width 20 pixels all right so there we go now we've basically recreated the layout that you see here with exception to this stuff yet so we still have to get to that part all right so next up we're going to take our hero which is this big block and we're going to say display grid grid tab columns is 66 percent and auto oops there we go and then we're going to say background unset padding zero all right so now we take our content and then we say background and we make it that purple color that we we were using before which is slightly lighter than the part above it notice how that's all come back and then we're going to say padding 6m units 8m units on the right 6m units on the bottom and on the left will be 4m units now we also want to text a line left this all right now this one has to be worked in a little bit we'll we'll fix that in a second though um let's get to our h1 inside of content and we want to large the font size because we have more room to work with and then line height will increase that to 1.2 m units all right now for meat meat shows up outside of the hero section and we'll say margin is unset that gets it back because margin 0 auto which is what it was before centers things margin on set will just reset that all right hero design that's the graphic right here that's currently hidden let's get that up hero design display was hidden so we're going to unset that now it's showing up margin left is going to be negative 50 percent and then margin top will be 15 width would be 100 percent look at that how cool is that now we're still going to make adjustments outside of this media query for bigger ones but that's looking good so far so next up uh the only other adjustment i'm gonna make is the portfolio um image right here so those portfolio images are pretty large so i'm gonna say portfolio image float right and then max width 500 pixels oops clicked on it by accident there we go right so all this changes right here this all looks good at this point so next up i think at around 1250 we're going to make another adjustment so outside of that media query we're going to put a new one so only at about 200 more pixels we're going to make some more adjustments and that's to padding primarily so the padding up here for header if you recall was this value but we're going to increase that as the browser gets larger because we have more white space we can include so i'm doing this with padding it might be a better way to do it but i everything's going to say the same here except for the left so we're pushing everything to out this way more so watch what happens when i do that so it's going to push that over here i'm going to paste in the next part social header that's going to be two or ten n units because there's 10 m units here this is this is the from the left this one's going to be from the right social header over here so this needs to have equal white space so save that that's going to be positioned there next up is the sections we have to adjust those as well so we push those in so just watch what happens when i undo that paste so we'll paste that back just pushing and giving ourselves more room on bigger devices and then finally hero content all right so hero content again if i if i remove this this is what that looks like and then we add that increased padding and now everything's in line all right so let's check this out so far notice how it's changing and adapting from here to there all right and i think we have one more rules uh yeah just one more media query and this time i'm going to paste the whole thing because it's basically just the same concept this is 1550 pixels instead of 1250 and i'm just adjusting all this stuff from like 10 m units to 20. so now right there is where 1550 enters the equation and everything's looking solid that is it for the actual layout portion of the html and css i probably want to create a little bit more padding up here so this is centered but not a big deal um so now we're entering the next phase of this tutorial or this course uh where we get into the animation which is really really fun all right so we're going to create a new gib hub repository as it's called so github if you don't know what that is i'm not going to go into explanation but it's basically a way for you to manage and push your project to the internet from your local development and then from hosting jury your hosting account we're going to pull from it all the files so we're going to create first have to create a free account of course after that you can create a new repository so we're just going to call this gs portfolio and you can have a description if you want um if you want a private so no one else can see it choose that otherwise just use public like i'm going to do um and yeah we're just going to yeah leave all this the same create here so what we're going to do is we're going to go to view and we're going to go to terminal and we're going to do this through the command line you may have to download git uh for windows in order for these commands to work and so the commands i'm talking about are right here let's just move this over control b now we can see all these things that we need to do you can also use github for desktop as well to do all this stuff to avoid this part if you want so we're going to do git and knit here we're going to say git add readme we're going to do commit oh let's also commit add all files rather then git commit first commit all right and then get branch m main and then we're just going to copy all this stuff right here actually let me make sure i have all of it in view and then finally git push u origin main all right so now we have to enter the password that i've set up for this already i haven't used this in a while there we go i entered the right one and now if we go back here and we refresh there it is we have our css images in index.html so now we're going to go back to hostinger.com and i'm going to go to login all right and i'm going to go and once it's loaded to gary simon 101 manage for the hosting now i haven't actually done this yet so i don't know if it's going to work but we're going to scroll all the way down here to get and this is where we add the repository url which is right here so we put in this so for public you put this but for private you put that branch is master usually this is the master branch all right so our branch here that we've designated i don't think it's called master click on one branch and it's called main i think we're going to change that to main here we're going to leave this directory there so we're going to hit create and again i've never worked with this it may not work um we'll see what happens here momentarily all right git repository is now stored um here we go so auto deployment view latest build output i don't know what that means okay so let's hit put deploy sure you want to deploy we're going to hit yes [Music] all right so my question is is look at that there it is what do you know so we could probably hit auto deployment and that will probably be a situation where um basically every time there's a new commit to github when you make a change to your site and you push all those files it will automatically pull from here that's what i'm assuming but look it all works it is easy as that now i think about it i probably shouldn't have made this 90 viewport height because there's a lot of white space but you know what no big deal we could probably just take that down a notch either way um i really like what's going on here refresh this again just to see it in action and look at that so with that said definitely check out hostinger.com they're the ones who made this whole portfolio you know course a possibility check out the very top link here in the description to help support them because they supported me obviously getting your portfolio up is very easy with the help of the github and automatic deployment so if you guys enjoyed this as always make sure to subscribe and i'll see you guys next time all right goodbye

Channel: DesignCourse

Views: 213,545

Rating: 4.9516959 out of 5

Keywords: design portfolio, web design portfolio, how to make a portfolio, ui design, ux design, frontend development, gary simon, designcourse, how to build a portfolio, frontend developer portfolio, hostinger

Id: 9iUJJHEIpls

Length: 118min 26sec (7106 seconds)

Published: Wed Nov 25 2020