Build & Deploy a Personal Portfolio with TailwindCSS - 2022 Edition

hey everybody what is up gary simon here so today we've got a great one for you i'm going to show you how to build and launch and deploy a modern portfolio and this is applicable to whether or not you're a designer or a developer like a front-end developer or a back-end developer and so let me show you exactly what we're going to be creating today and this is the design that i created and we're going to walk through a lot of the design considerations when you're setting up a portfolio and also i'm going to show you how to use tailwind css to make this a reality in the browser we can also see it is fully responsive and so we've got you know a little bit more of the lengthy side of the tutorial but it's going to be very worth it if you're interested in the process of creating a really effective portfolio that will help you land jobs essentially or clients if you're a freelancer so teleon css if you're not aware it's a utility first css framework that allows you to relatively quickly just kind of take a lot of the css the manual css work that is required to bring something like this to the browser and other devices and just focus on classes essentially so i'm going to be showing you how to do that as well and then finally i'm also going to show you how to deploy it using hostingjurt.com with automatic git deployment now hosting jira which is the sponsor of this video make sure to click on the very top link here in the youtube description to get access to hosting juror and the plans that we're going to create in order to deploy this process and use the coupon code design course for a 10 off discount so hostinger i they've sponsored a number of my videos previously they're a great web host with many different features as you can see they're all listed here for this particular project i'm going to use the premium shared hosting plan so if we select this you'll see that you have a lot of different options to save a lot of money depending on the span uh the duration that you want to work with and a lot of different payment methods and of course you know outside of the black friday promotion deal that we saw on the home page here also make sure to apply this design course coupon code for 10 off and so i'm going to be showing you how to launch this and deploy this project that we create near the end of the video and i'm going to use a link a time stamp as well to where you can just jump right to that deployment process if you wish and what's really cool it's automatic get deployment which means every time you make a change to your website and you push that change to github it will automatically update the and just basically download those updates from github and automatically push it to your website live so it's a very seamless and just very simple process and i'm going to show you how to walk through all of that so let's stop talking and let's get started all right so we're going to spend some time talking about this design here which is something i threw together and what i believe constitutes an effective portfolio either for a designer or a developer of some sort and it has at a bare minimum i would say four different sections and so i'm going to go through each of these sections and i'm going to talk a little bit about do's and don'ts essentially now if you're curious about what this app is it's ifigma and figma is basically the most popular ui ux design tool and the idea is is you design your projects first in something like figma there's other competitors like adobe experience design otherwise known as adobe xd or sketch and those are the primary three although there are other ones that you can choose from as well and the idea behind it is you first design what your website should look like in a browser or device or whatever and then you get to the coding portion now a lot of developers just like to hop right into the code portion without first designing it but that's not the way to go it's very difficult to iterate and make changes to your layout as you're coding because that requires changes to the code sometimes so here we're able to rapidly make changes easily without having to deal with code and also if you're dealing with a client or an employer who has a final stay like a stakeholder as they're called then it's a lot easier to make those changes here and they're also able to create prototypes i didn't do any prototyping here but it allows you to kind of create interactivity uh page transitions between different pages just to show what it will look like and how the app where the website will behave on actual devices all right so let's get started here with the first one we can see we have three different layouts here this is for like a desktop this is for like a ipad or a tablet and then this here is for a phone so it's important if you're you're dealing with another developer of the front end developer which is the person's responsible for making this thing a reality in the browser through html css and sometimes javascript it's important that they understand how you want this layout to change based on the available width or you know based on based on the the device that it's being viewed upon so um outside of that all the content is essentially the same we're just laying it out differently so the very first section of a portfolio i would say that is so important is the most important section in my opinion is what's called the hero section and that's right here underneath this now before we get to that i will talk a little bit about your navigation uh typically it's going to be your name up here in the upper left branding across all websites and apps and stuff for the most part is typically found in the upper left that's where people are trained to look like for the company name and so if it's your personal name your personal brand i put your name up there right up there all right upper left don't try to be too unique especially if you're new and then your navigation your navigation should consist of those links to the the the four or at least the four sections that i say are an absolute and that is a way to get back to the home and that's pretty much the home button is pretty much the button you want on every website it's it's they've studied it in terms of ux people want to be able to get back to the home section or the home page and then also uh your work that's the number one thing that a potential employer or somebody who's looking to hire a freelancer wants to see they want to know what you're capable of and so definitely include you can you can word that differently like my portfolio or something like that but definitely showcase your work also clients that's another thing kind of works with your portfolio and who you've worked for you can have a client section and work that in just you know within the portfolio section uh but if you have some notable clients you you may want to you know make your own page specifically for that and then typically i you could put it in about me section as well i chose not to put it here but providing at least the bare minimum of information about yourself such as location uh your name obviously your age i these are all very important obviously and then also a way to either hire says hire me or contact me so whatever you deem to be the most important element that you want them to see use what's called visual hierarchy in terms of ui design to emphasize that so we've really emphasized this hire me button outside of that we have that hero section that was talking about and this is the air the area in which you see uh you you create the first impression really if if you have a bad designed hero section i that's going to be an immediate turn off especially for somebody who's looking for a designer if you can't design your own hero section well well it's not worth looking at anything else is what they're they're probably going to think a hero section consists usually of at least three different items that is the headline very important because it's usually going to be it's going to be the first thing people see because it's large and it demands attention i'm also a big advocate of using ad copy that makes sense marketing 101 when it comes to ad copy or copywriting is you want to emphasize benefits over features for you for your headline so building beautiful web experiences is definitely better than saying something like software developer or i'm a web designer or my name is gary simon a lot of people use or misuse the headline when it can be much more effective so i would definitely research effective ad copy for determining your headline um so that's the first one that you'll see on a hero section another one is going to be a call to action of some sort i've seen people on their portfolios leave this section out you definitely want to have a call to action which is essentially an action that you want the visitor to take and that could be in the form of a button as it is here or it could be in the form of a form that somebody fills out or it could be just a scroll indicator icon that's animating up and down letting them know you want you want them to scroll down the page to learn more um and then another one is going to be an illustration a photograph in this case um some sort of texture um that will really help fill up the space that you have available especially for a large desktop and give it context so you don't have to put a picture of yourself a lot of people do you don't have to you can have like an illustration of some sort in this case clearly this guy is not me but if one thing i've seen people who do use photographs of themselves which makes perfect sense it's a it's your personal portfolio sometimes they'll use the pictures of themselves that look like it was shot from an iphone 4 it's all pixelated and it's not good lighting listen if you're serious about this invest a little bit of money or if you have a friend with a good camera and maybe some lighting invest in yourself so that you can create a really professional photograph it's going to go a long way more than what you probably think have a professional and well-designed site and if you're going to use a picture of yourself make sure it's not all blurry and just kind of thrown on there without thought all right so next up i did decide to include this this of course is entirely optional i kind of wanted to show um interactivity when we get to the front end development portion so this is just a dot side a dot navigation which you'll see how that animates when we get into the actual project you probably already saw at the beginning of the video so my work all right so my work in this section i designed it fairly simply simply um i had just a little you know paragraph here a couple sentences or rather just one sentence rather and then we have the project thumbnails you know based on what you've done now this is an area i've seen so many aspiring designers screw up on their portfolios because their thumbnails don't look very good um and here's what they like a beginner will typically do they'll have a web design or something some project they created um and they take a screenshot of it and that's it there's a screenshot there's no perspective there's nothing on this like no thought really given i've done a video about this i'll try to remember to link that in youtube description about how to create truly effective thumbnails these are all just pulled from a figma plugin called unsplash and they're actually really solid and professional it's it's it's a picture you know of somebody using the app on their phone that's one way that you can approach it it's not the only way though and i've discussed that in that video which you can watch uh on your own time if you wish and obviously obviously when these are clicked upon uh you you could just expand them like if you're just showing a logo a logo is typically a logo but ideally you'd link it to a new page uh where it's kind of a case study you know you outline the challenges you know the problems that you help solve you link to the actual live website hopefully and that's another thing if you can try to get projects that are live on the web for real clients um i see a lot of people using projects that they created from tutorials covid 19 trackers that's been a popular thing calculators i mean honestly if do everything in your power understand if you're new you may not have all this you know all these projects do everything in your power to get a project in multiple projects that are live that are that people can visit on a website url that will really help sell you as a professional much more than just showcasing what are you know projects that we're probably creating from tutorials next up after that client section again notice how i'm reusing patterns in terms of ui design if you're kind of new to this maybe you're a developer who's look watching this video because they want to learn how to make a portfolio you have to understand ui design fundamentals and principles that's why i suggest going to designcourse.com and signing up for my course but what are those principles i'll just a real quick rundown color and contrast understanding how to apply and use those effectively especially when it comes to type uh it's also white space and that's the empty space in the areas of your design there's alignment to make sure things align up properly there's visual hierarchy which is you know really directing the eye by using those other ui design principles to emphasize based on priority certain areas so for instance if i if i took this down maybe to 40 pixels now you're not really sure where i should be looking first right so you scale is one way that you can emphasize visual hierarchy you can use color as well um white space and alignment and all those things but notice how i'm at while this is a simple design there's not a lot of complex things happening it's all designed consistently all those fundamentals have been applied consistently throughout so i have a headline here all right it's designed exactly the same here i'll see beginners sometimes center some headlines while the other ones aren't i see whatever you choose to do whichever aesthetic you choose to use stick with it consistently that also applies to a color scheme i'm using the same colors all throughout here same font sizes where it makes sense to et cetera et cetera so of course this this is just one way that we could lay out potentially a client section just to show different clients and then here's a hire me form sometimes i i see people get the forms wrong a lot in a multitude of ways um the ones that come to mind the most is they're not leaving an actual form they'll only put their email address and that's it you have to remember if you have a client who is maybe on a mobile phone without an email client set up or something like that or they're using somebody else's device they may not have access to an email client to quickly email you so you always want to have an actual form on the website that they can use now if you do have a form which i suggest you do you should definitely make sure you research good form design practices i see a lot of people making inaccessible designs for their forms all the time for instance there might be enough contrast around the text area sometimes people just put a simple border underline and then that confuses people they're not sure where to click in order to enter the information sometimes they will use placeholder values instead of actual labels right here if you're going to use a placeholder value for the label then make sure it's a floating label so that once a person clicks inside of it that label doesn't go completely hidden and that can cause issues with people who might forget what they're supposed to be typing in that given field and then the final note i'll make about this is give other ways to contact you some people they might not want to use a form to contact you maybe they'll want a phone maybe they want an email maybe skype or twitter so put all those things make yourself as available as possible now some people say i don't want to put an actual email address because i don't want spam listen deal with the spam there's anti-spam software that you can get and you can get you can register an email specifically for this purpose of receiving contact here so that way you don't have to clutter up your your main email just make it as easy as possible for people to contact you at any time for the most part and that is it for what i would call essential um now as you can see here i have these other variations that i created but in terms of responsive design it's all just about intelligently understanding how to change the layout to adapt to the the little amount of space that you have increasingly so uh when you get to smaller devices so here between desktop and tablet you can see it looks mostly the same things are scaled down which is typical but for the most part it's pretty much the same instead of having three by three right here for the columns we have two by two and then we have an odd number here because we have nine of them i decided to stretch this one all the way across just to fill up the layout um this right here we collapse from a two column layout where we have the identity or the logo on one column and then the information on the right here we could just collapse it all and center it and we'll do all this by the way in the front end development portion with tailwind css and then of course we just continue on and for instance the thumbnails would just be uh one column essentially with having just one thumbnail on their own uh row essentially and so as you can see here we collapse this down here we're going to do that um and everything else is the same essentially after this thumbnail portion everything will be exactly the same as this that's why i didn't you know complete it all the way down and that's essentially it if you're really interested though in you know learning effective ui ux design it's not an easy process that's why i created designcourse.com definitely go there to check that out if it's not released yet at the time you're watching this enter your email there and um otherwise yeah it will be available on january 4th of 2022. okay so now let's go ahead and get to the front end development process all right so now i'm here in the code editor and this is visual studio code and it is basically the de facto most popular code editor for front end developers doing this sort of work working with html css javascript etc and as we can see here and by the way it's free so if you don't have it yet go you know just type in visual studio code you'll be able to download it and install it now right here is where the files are listed out here as we can see we have personal portfolio it's a folder and it's empty files are usually listed out here so we can see that it is indeed an empty folder so to get to that point um you can open folder and then just create a new folder and then just hop into there and then open it up and your project will look like this so before we begin we want to make sure that we have what's called a node package manager installed short i short for that is called npm the acronym nodejs.org if you don't know if you have it installed you can type npm hyphen v in the terminal which i'll show you in a second but yeah you want to go ahead and click on this and you would download it for either windows mac os i think they have it for other operating systems as well so you definitely need that in order to follow along i'll go ahead and close that and let's go ahead and open up the terminal so view terminal and what i'll do is go ahead and we're going to like i said if you type npm hyphen v you can see mine's pretty outdated uh but what we want is access to mpx i which is installed within the node package manager by default and what we want to do is we're going to head on over real quick to the installation section of tailwind css and tailwind here i i'm going to elaborate a little elaborate a little bit further on this just now you know for those of you who are relatively new to this sort of thing when you're building out a website you're always just dealing with uh html and css and sometimes javascript and if you don't want to write out just straight up html css without some sort of framework uh you can do that completely fine um but tailwind css is a framework uh that allows you to build these websites in a different manner than if you were to do it just custom and it has a bunch of utility classes as they're called and it's essentially taking care of all the work within your html document rather than doing a bunch of custom work in your css document if that makes sense so i definitely recommend if you don't know html and css to this point you should definitely learn the basics of html and css before trying to venture out into something like tailwind css all right so installation there's a variety of ways uh next js view if you have a view project laravel gapsy next react etc um we're going to use the process where we used mpx to install it and as you can see we have this command right here make it larger so we can see it npx tailwind css init so that's going to create a configuration file in our empty folder but before we can do that you have to make sure that you have the tailwind cli or the command line interface utility included when you install tail and css so we need the tailwind css npm package so let's go back to our code editor here wrong one and we're going to type in npm i tailwind css and we'll put hyphen g for global now we'll install it everywhere we only have to do it one time for a particular machine and there we go it is now installed now at that point we can then run that command that i highlighted tailwhen or mpx tail one css init so let's just paste that in and we'll see what happens all right so now we can see it created this tailwind configuration file now if you go back to the italian docs and you type in configuration or search bar you will find this lengthy page right here it's all about learning how to customize your tailwind css i are telling you know installation essentially this allows you to you know just get the general scaffolding your colors right your color scheme uh any sizing all of it's pretty much optional so things that you don't i you know specify in the the actual uh config file they will be um it'll just revert back to whatever's default um because they all have default settings so we are not going to use any plugins because there are plugins that you can use so we can just go ahead and get rid of that and we are going to leave dark mode false you have dark mode and light mode of course and ui design these days we're just going to leave that false theme we are going to want to add a few things so inside of extend right here we're going to put in colors so this is going to be an area these are just a bunch of objects uh that are nested within each other if you know anything about um you know javascript essentially uh but these are this is gonna be where we can specify just overall colors that uh tailwind will then use essentially so for instance like our body my fingers were not in the right spot on my keyboard so body uh what's our body color right so we're gonna revert back to our i where is it at oh yeah right here our project it looks black but it's not the fill color for this is actually one seven one seven one f all right and so i can specify that right here and you and so you might be wondering uh where where do you find this information at you know how do you know the how do you change the body color is with this well it's in that lengthy configuration um documentation so you can find all the possible settings that you're going to use or would possibly want to use for your project and so trust me there is a lot of information here and really i wouldn't try to learn all of them just for the sake of learning take them one by one based on the needs of your project if you go to google and you type in tailwind how to configure x y or z chances are you're going to find something on the documentation itself or from somebody who asked the same question on a site like stack overflow so there's a lot that we can specify and talk about here but we're going to keep this pretty simple so i have a number of other colors that i want to specify and i'm just going to go ahead and paste these in and as you can see we have selected text so like if we highlight text on the web page what will that selected text background color look like it's this color code all of these different colors here um these are all available i'm gonna i'm going to make this project available so you can see the code source um and that'll be a link in the youtube description um outside of that the only other thing that we want to specify here still within the theme section is going to be the font family so we're going to put a comma after the colors object there and we're going to put in font family because we do have a specific font we want to use that's going to be called poppins and we put in here poppins for the actual font name and then we're going to put in sans serif it is a sans-serif font so if for whatever reason uh a person's internet connection goes could put and it doesn't download the font it'll just revert to a sans-serif font um so let's go ahead and save that and that's all we're going to need for this particular configuration file we will not have to adjust it again next up for getting everything installed we want to get our index.html created so we're just going to create a new file and then i'm going to hit exclamation point enter and that will get us here just with a quick starter template for html document so for me what i'm going to put in i just for a title is just personal portfolio of course you would want to use something much more better than that in fact let's talk about that um google of course you should always try to strive to to get traffic from google and especially if you have like a local business you can put your keywords there like uh you know gary simon dash you know web developer in cleveland ohio or something like that or ui ux designer you want to put those things in the title um outside of that what we also want to do is we want to import that uh poppins font because that's the font that's used in our figma project when we created i created the design rather so what we want to do is go to fonts.google.com and we we know that it's a google font so we're going to type in poppins we click here we choose all the weights that we want um i forget what all three of the weights i have already saved but i'm just going to choose you know you don't want to typically you don't want any more than three font weights because every way that you added ends up uh adding more load times more download so once you have them all selected which actually it's the weight 400 600 and 700 so these aren't actually correct so 400 we'll find 600 right here and then 700 um and essentially what you want to do is i copy this code right here if you use import i you can use this but it's not recommended usually but you can actually import it in inside of another css file if you wish to go that route but i i'm just going to copy what i have on the side here on my reference monitor this right here so yours should basically look like this code up to this point now before we import those we're also going to link another style sheet that doesn't yet exist in our project called tailwind.css all right so we're going to create an index.css first though now index.css is where we're going to write all of our custom css and trust me there's not many role sets because the whole point of tailwind is to you know avoid having to write custom css but you still you'll find in most projects you're still going to have some things that have to be custom because it's not a utility class for everything so when we write in here our code we are going to have a script that runs and we have to create that package.json file in a second to run that script but it's going to take everything we write here and it's going to transform it into a tailwind.css file which will include tailwind itself along with anything we write here custom so it's going to be looking for tailwind.css but we're going to be writing our css here in index.css so now that we have that ready we can go ahead and create um the next step and we could do this through the command line as well we can type in npm init hyphen y and that means yes just answer yes to all the default questions or whatever if you don't put that flag there it's going to ask you like you know what are the keywords and what's the name and all that so now in our package dot json file we're going to create a our custom script and we're going to call it build all right now inside build we're going to specify the following npx command that is going to be tailwind css so this is just like specifying this following command here down in the command line but instead it's going to run this like every time we save our files here and you'll see how in a second so we're going to put dash i for input forward slash index.css and then hyphen o for output to tailwind.css all right and then we're going to add the flag hyphen w right there all right so we're almost ready and we're gonna make sure everything's working and everything's connected up here in a second um so what we'll do here is we're going to go back to our index.html we are going to first make sure we're going to do extensions make sure that you have the live server plugin installed so just type in live server obviously it's already installed for me i've been using it for a long time once you have that installed we then we can then right click on index.html and i open with live server right here so that's going to open up this blank page right here now the way we know if i things are working here correctly we need to first run our script here um but before we do that we're going to make a change really quickly to index.css we're just going to say body we're going to remove this of course but we're just testing body we're just going to say background color blue so it's going to change from white to blue if this works correctly um and then we're going to run this command and it's going to be npm run build all right which will mean it's going to run this by default so let's try that out npm run and build and notice it ran the command here and notice it created that tail1.css file we click it as you can see it has our color there and because index.html is looking for tail1.css it should make our page blue there it is so now we know it's working almost done with the setup we have to go back to our index.css and we have to import a couple of things that are specific to tailwind so if we go back to installation we're going to take this right here at tailwind base at taiwan components and utilities all right that's going to import everything that we need or is that it's essentially going to import tailwind itself all right so when we save this notice this is going to run again it's going to say done and it's going to take a little bit longer because these things uh yeah 6 seconds 6.1 seconds or so now if we click here and as you can see it's a very long file that includes a tailwind along with uh anything that you created that was custom now if we go back it's still going to be blue so we know that our css is working as well so every time we make a change to these files the live reload refreshes the server or the browser for us automatically which is very handy all right so now that we have it all set up we can go back to body we'll remove that tag right there and now we can start with the bulk of the tutorial which is going to be creating uh and getting our site ready um working here specifically primarily in index.html okay so the first thing we want to get started with when it comes to writing writing your html markup as you should hopefully already know we're going to get started with what starts at the top of the page which is the the header or the navigation the nav bar whatever you want to call it so of course that consists of the logo in this case it's just a type based logo so we don't need to import an image like an svg or anything and then over here we have a navigation very standard navigation that we're all going to style up try to get it looking as close as possible to this section minding the white space all around the overall width and of course that'll be flexible depending on you know the the size of the browser and if it's maximized and given the resolution and all the other stuff so let's uh keep this in mind this is kind of what we're aiming for and this is the html markup that we have to create for and then we'll start looking at all the many utility classes uh to make this stuff possible um you know in terms of trying to present it as close as uh as possible to this and initially we will refer back to the documentation a lot just so i can get you in the habit especially if you've never used tailwind before um that way you're gonna learn how to you know when you go on your own you'll be able to look up you know based on the documentation uh what you need to use which which classes do you have to use to make this thing not only look like it does here but also here and make it responsive essentially okay so let's get us started uh first tag we're going to use for html is going to be header and by the way you can use emit abbreviation so i'm not going to say here typing all these little brackets and stuff as you see here let me make this a little bit larger and we can also close this um and that way when we type tags like maybe like a link we just hit a and it gets the boilerplate out of the way i do have an emmet uh crash course you can look up on my youtube channel search as well all right so we're going to have a header um we're going to have a container inside of that header and it's going to be based on a div element um so we're just going to call this container by default so the way you specify div with a class is just to put period and then the class name and it gives you that initial markup ready to go right there all right so we have these two nested inside of each other so far and then we're gonna have inside of there we'll have the logo alright so typically you'd make this a link i'm gonna i by default i i had a person basically create all this uh this this markup for me because i don't have enough time uh but we're just we're just gonna use a div element for this for now so um we're gonna say class text hyphen large and we're gonna put jonathan doe or just do in fact you know what i want to take this class off first because i sort of want to just show what everything looks like without applying tailwind classes and stuff like that we just want to get the markup done here first and then after this we have the navigation that's seated to the right at least on desktop so what we'll do there is we're going to put in another class or just a div rather and we're going to have our links inside of there so our nav links we'll just have a href this one will just go to the um the top it'll go nowhere this would be home and then let's replicate this a few times shift alt and the down arrow key four times because that's how many links we have we'll put in on this one my work on this one we're gonna put clients and then this one will be i hire me now because hire me is in a button format we can take advantage of uh the buttons html element so we're going to put button here i might have to put a space there there we go so in our button here we'll close that up and of course this is going to have our classes as well and and this will have some classes are this top one at least now notice on our design we have this one this is the active link and there's different ways to show the active or currently active page um you can underline it you can add an icon et cetera et cetera i'm choosing just to change the color um we have to find a way to denote that so we're going to put in a class of text selected hyphen text so it's text and it's selected text right there these are going to go to different areas of the page so we're going to put work clients and hire so it's essentially a one page website there's not separate html documents or anything for each of these four pages it's all going to be on the same page and we're going to make it smooth scroll to each one of those sections all right so if we save this and we look at our situation here this is what we have uh this is what things look like without htm or css that's applied all right so uh before we start working on the html for this section and making it look like at figma we are going to work with the body element first so what i mean by that is this is the very first tag in terms of what's rendered on the browser so in body here we can start applying some of our first tailwind utility classes so the first one we're going to add so we do class equals and this is where all of your utility classes go they go in the class attribute here in html and we're going to put in bg hyphen body all right so if we save that look it is the color of our design how did it know to use that color well if you recall uh back here in our config file it says body right there and that's where it grabbed that eye information from essentially very cool stuff now there's some other things we want to specify like our default font color we're going to put text hyphen white so where am i getting that from again we're going to refer back to our documentation we're going to search and we're going to type in text and we can kind of scroll down here and see if there's a specific area in terms of text color so text colors we just type hit that and it's going to give us different areas now sometimes it may be a little bit tricky to find exactly what you're looking for so if i type in text white for instance there we go now we found it so you may have to do a few searches because it's such an elaborate documentation but as you can see text white is an option you could do text transparent text black text gray different shades of gray different shades of red all these are at your disposal essentially all right text white we're also going to specify font poppins right here and again it's grabbing this information where he specified poppins all right i and if we save that it might be hard to tell if it's actually poppins by looking at it but i can tell because i've been working with poppins for a long time i also have a um a browser extension here on chrome called what font you click on it and you hover over it and it says poppins because i'm hovering over that so if you ever want to know what you know type or what font something is use what font it's a free extension all right so let's go back all right just about one more now we're gonna i have some padding here around the the entire body element which is essentially the body element consumes this entire area so we want to have white space because if you look over here at our design by coming back here real quick you'll see there's white space all around it right so we're going to put padding now if you don't know what padding is hopefully you do because if you're at this point you know basic h or css rather so padding is the white space on the inside of an element so in this case on the inside of the body element margins on the outside that's white space applied there so we could put padding 12 or we can also put padding left or pl padding right pr top you know pt and then bottom we want padding bottom so we only want to have padding at the bottom with the size of 12. so what exactly does the size of 12 even mean again we're going to go back here we're going to type in sorry about that padding and you could see p like if you want to add padding on all four corners you just put p hyphen and then the amount and then so this right here essentially tells you how much that's going to be five rem units is 20. if you put 80 it's going to be 20 remune it's going to be really large so then it's going to show you exactly a lot more about padding same thing essentially with margin except it's just affecting on the outside of containers rather than the inside right here all right great stuff let's continue on all right so for our header we're going to put a padding because right now if we look at the the project there's hardly any white space right so what we want to do is we're going to add a class of padding y and we'll put six so let's see what that does notice how it pushed it down now by the way i am zoomed up to 200 percent this is what it looks like at 100 on a 4k res monitor at this point in time um so that's that's good right here that's what we want um let's also make uh our text larger for the jonathan doe because it's pretty small as it is so we're gonna put text hyphen lg which is short for large so if i go to here it's going to make it slightly larger so if i hit ctrl shift i or f12 to get our dev console up here and we click this little icon to select an element it's going to tell us font size 18 so that's large this here is font size if i click it it's 16. so it's actually not that much larger anyhow so if we go back here and we type in text size or font size or something like that right here we'll see we have a text extra small so it's only 0.75 ram it also specifies a line height for you large is 1.125 ram which is 18 pixels if you want to be larger just look at the size over here so 5xl is actually three rem units et cetera et cetera et cetera all right so hopefully it's starting to click with you to understand that you just look at the docs based on what you need and search what you need all right so now we're going to add a couple more things i notice we have a header class with a div of container so we're going to set a few properties here flex if you understand css maybe you've heard of flexbox before we want to make this a flexbox container because we have two elements we have the actual logo and we have the navigation here and we want to create those at least on desktop to be two columns so we're making a flexbox container if you don't know what flexbox or what the css grid is pause right now go do a search on google read up there's videos i've done videos on it and just check that out first and i'm going to mute this so we don't hear that anymore um so what we're going to put is flex and by the way go to the documentation type in flex and i in our tailwind css to learn about these properties specifically so now we've made a flexbox container we can also specify some flexbox specific properties like we want to justify uh the space between so that's going to move the logo all the way over here and then the navigation all the way over here we're also going to put items hyphen center and let's just see what this does by default just to see what's happening so far okay so we see we have this container it's left the line and it's not yet centered so we're going to do that next but it is kind of starting slowly but surely to look like i our actual result over here not quite it's kind of just crammed over here looking a little bit silly but for now it's getting close and that's what we want now how exactly do we get this whole thing centered up well margin auto in css is how you center things or one of the ways that you consider things um centered it's essentially centering them so what we can do is put margin on the x-axis which is horizontal is going to be hyphen auto so now it should be moved to the center as it belongs awesome awesome stuff so there's also uh a way to specify things in order to make them responsive all right so when i say responsive we'll take this and we'll drag it in we could see by default it's doing a pretty good job of making it responsive notice how it's collapsing automatically it's because it has that container class on it uh right here but there's also some issues with white space around here at certain areas it kind of loses it and so we can also specify certain things certain css properties or tailwind properties to only be specified at certain widths all right and so these are this an entire section on responsive design responsive design right here intelligent css and it's going to tell you all about that so here's the break points just another way of saying just dragging these in there's certain break points you can you can kind of see even out the tailwind documentation there's a break point right here where that sidebar navigation collapses we don't see it anymore so i've done several things like that on our layout that we're going to have to consider and the way you do that is by specifying this right here i'm going to make this large so we can see it notice how it says md colon and then i width 32 on maybe on large it'll be width 48 and so that way you can specify different properties based on the width of the device essentially or the browser in this context um and so this lets you know at small that's 640 pixels um medium large xl2xl right so this is for like a really large desktop and up so the way this works is if you just specify any of these properties like we've been doing without the responsive selector first then it's going to apply it um at the smallest screen size possible but then if you add this this will be at i anything larger than 640 pixels this is going to specify something at anything larger than 768 pixels and what i mean by that the 768 pixels if i hit ctrl shift i to get our dev console up when we scale this in it might be hard to see on my screen but there's a little area right here on the upper right hand corner of your browser that shows the width of the browser from here all the way to here and so we could see at you know 600 8 582 it changes based on the width of the screen so hopefully that you understand what that means essentially and you will once you start working with this more so so what we're going to do is we're going to say after mx auto we're going to put in i well this is not responsive yet i want to put a padding on the x-axis of eight all right and what that will do is create inner white space around the entire container element of eight now we can't really see this but it's moving things away further than what it was before notice it's not touching the sides of the design anymore so hopefully you can understand that after this we're going to say on medium i device sizes or browser sizes and up we're going to say padding x 14. now why would we do that well the larger the screen size you have the more white space you can have so in this context inside of container we're going to specify that white space and that extra white space um through padding i and we're going to make it larger from 8 to 14. and then we're also going to put here a large we're going to say padding x 24 so it gives us even more padding and then finally i'm going to put width full right here so if we save this doesn't seem like much has changed but it's giving us good white space all around essentially great all right now after that let's continue on so text large this is good now div class right here we're going to add a few things as well we need to get this these items away from each other because they're real close i'm going to zoom this up what we're going to do is specify a class of md hyphen flex so what does that mean that essentially means that on a small device it's not going to include this flex container and on a large device or a medium and up it's going to apply a flex container for the two-column approach and so what that essentially means is by default on a small device this navigation will be hidden so we're going to add the hidden class which is a part of tailwind css and that's because we're going to hide this because we don't have enough room on a small device to have these four links it'll be too close and smashed into the logo so what we do is we collapse it into what's called a hamburger menu icon of sorts and we're going to do that html markup in a second so um on on medium devices like a tablet and up we're going to have this right here so we're going to do also here is going to specify a new property space hyphen x hyphen 12 and what that means is it's going to create this is the amount of white space between these elements here and then also we're going to put in items center another tailwind class and we're going to save that now if we look at this i'll revert back real quickly to the original size notice we have our white space now if we drag this in it's hidden notice it's hidden why because by default it's hidden but then on medium and up we change it to flex which ignores the hidden attribute right here exactly what we want now when this is hidden we want to show something else so we kind of reverse this and show a an icon all right so now what we'll do is one thing before we get to that actually yeah text selected that's what that works perfectly we want to work on this button real quick so now what we'll do is another button we're going to add some more classes so remember we want our button to look like this in our design so if i expand this out we want this all right so it might be actually helpful if i bring this real quickly our area i'm gonna i'm gonna zoom it up we're to put it right there and then we're going to take our browser just so you can see what's happening at the same time ignore my messy desktop there we go so class the first one is going to be a a padding on the x axis which is to the right and left of this particular button of 6. notice how kind of move things away and then we're also going to specify a padding y which is on the top of just two then we're also going to specify bg hyphen theme and again it's getting that from that config file which includes our primary theme color so now we're getting really close to what we want um text is already white and we'll also put another utility class that we haven't used that's specific to fonts which is bold so we can make it bold there you go just by putting font hyphen bold now at a hundred percent this is what it looks like which at this point is very similar to what we want we essentially want for our jonathan doe let's go ahead and make that bold as well so font fold save it and there it is awesome so we've essentially recreated exactly what we want for the navigation up until this point all right so let's go ahead and do that if we drag this in we see there's nothing here but we want what is over here in our design so if i get back our window let me just pull this out real quickly we want this we want this icon right there all right so the way you can do this i'm going to make this file available as well right click and we can come here to i'm oh sorry i was i had a brain for i thought it was down here but it's up here copy as svg so we can get that specifically and then we're going to put in right after our closing div tag for the navigation we're going to put in a div class of md hidden so when it gets to the medium size we hide what it whatever is inside of this div and this is i this right here now by default some changes were made to make this um fit exactly as we wanted it to uh in terms of font size so i'm going to paste this in instead so it's fill white it's still the same information for the path and the d attribute but we've changed it here to the width and height from 26 to 18 and all that so if we save it there it is all right so one thing i did not do just because this would be really extra long tutorials make actually make this function on click you would want to attach a class that would then bring back this navigation right here um and design it in a mobile-friendly manner maybe where it kind of slides down from the top um or slides in from the left i've done videos on that in the past though there's many other videos and it would work just fine all right so there we go that is the full uh navigation now i know this has taken quite a lot long time just to get this point but i really want to do a good job of describing exactly what's happening here just for those who are brand new because i know some people complain that i talk too much but i want to be thorough as possible so that people have the best learning experience as possible so i digress let's continue on so what is the next section it is that hero section i right here so this hero section consists of a few different things we have this little navigation then we have this column and then this column and we need to create the markup for all of that all right so let's go ahead and switch back here and let's get started so this is our header section um we're going to give ourselves a little bit more lines to work with and let's get started so there's going to be overall a class that's going to be an overall container that just houses those three elements those three blocks the navigation the uh the the headline and the call to action and then the picture so we're gonna put container here and open that up and then inside the container we're going to have a mess of other utility classes for this we're going to put margin top of 16 so it's going to move this container down by 16 tailwind units essentially from this just to give us a good amount of white space so that our text isn't straight up against um the navigation which is never a good thing we're also going to put and make it a flex container as well because we have those items inside it that will end up i you know to the left and right of each other so we're going to put flex and also justify between which we've already used previously and then items hyphen center and then on the margin of the x we're going to put auto just like we did with the top one to center everything that's inside of it so if i just type you know some random characters you can see right now it's kind of off there because we applied some other utility classes that kind of push this in so we have to apply those as well to this one and so we're going to put px hyphen 8 and rather than just putting all this stuff again we're going to copy this right here i believe width full i is on there as well yeah so we want to copy these four and just paste it right here so now they should be uh centered up and this white space is created by the p ah or the margin top 16 rather all right so hopefully that makes sense next up we're going to have another container inside of here and it's going to be a flexbox container as well so we're going to have a our div class of flex and we're going to put in flex wrap and wrap is another flexbox specific property and then also on medium we're going to say flex no wrap and we'll see how these things sort of work once we um add the actual content in and we adjust the size of the browser um after that we're going to have a specific section just for the left navigation and that's the dotted navigation that we saw in the design so we're going to put nav and we're going to give it a class and this is going to be displayed as inline block so it's the same as saying display inline block and css but this is the the tailwind way of doing it and then we have some other uh properties that we have to put in here so on large desktop and up we're going to say margin right 24. that moves things away from it um by 24 tailwind units essentially um on large and up so it's quite a bit higher um on large we're also going to put margin right oops sorry i meant width is going to be 4. it's also going to be fixed which means when we scroll down on this page it's going to stay in view the entire time which is typical for that dot sort of side navigation we're going to put in here another tailwind property of left or utility rather a left percentage and then hidden on uh devices that are smaller all the way up until xl so this side navigation we don't have enough room for on smaller devices so we hide it on everything up until large devices hopefully that makes sense all right so that's that for that portion now we have to create the markup here almost for each individual icon but we're going to have one more uh element that wraps a parent element that wraps around it that makes it position absolute all right so what we'll do is put in a class of absolute all of our net dot navigations will go in here inside of there we're going to put in left hyphen 50. now this right here is something that we're going to need to specify as a custom css class um so this is what this right here is not tail and css you'll see in a second what that is we're also going to put in transform tailwind allows you to apply transform animations um with their utilities so you don't have to do it custom so we'll put transform and then we'll put hyphen translate uh hyphen x hyphen one half right there after that we're going to put space hyphen y hyphen x this is going to separate things out um the the individual dots inside of it and then margin top is going to be 36. all right so that pushes it down quite a bit further than from over here we can't see anything yet because we don't have anything inside of here i suppose i could do asdf um but yeah we let's go ahead and just keep on knocking this out we're almost done with it i know there's a lot of classes here and it might be a little bit overbearing at times but it all makes sense once we actually visualize it in the browser next up after this we're going to have uh our this is going to be the market for the actual dots so the first class is going to be nav hyphen dot of course that's not um tailwind that'll be something we have to do specifically so nav dot this is going to be a selected circle because the first one is selected by default it's a colored in just to show you real quickly uh right here that's the selected one we're also going to put in at that point it's going to be display block so we put block a width of seven and a height of seven rounded hyphen full all right so for for basically it's converting that uh that rectangle to a circle and border hyphen four because uh they're going to have borders as well border hyphen nav and bg hyphen body for the color so that's how you specify the color um after outside of that we're gonna have an ahref which i believe oh sorry that's supposed to be class right there href here could be just uh there right there for for now and then inside of here i do want to weigh when somebody hovers over these for them to see the name of you know when they hover over it you want them to see like where that where's that going to take them so we're going to put a span in here of class and class is going to be bg black so we're going to make it uh black behind the text padding on x and 2 on the x value is two padding on the y value is one we're also going to put in rounded md so on it's basically rounding the little edges around the type i in a medium level again you could type in rounded corners 101 css and you'll find what the available ones obviously large and xl are and small you can use as well margin left is going to be 10 so we're pushing that label away from the little icons and then opacity is going to be 0 by default because we're only going to show it on hover but i'm going to leave this off for now just so we can kind of see and then inside this is just going to say home all right so now we can start to see it's starting to take shape right here okay now before i forget let's go to our talents our index.css rather and let's hide this one we don't need it and let's specify some of the properties that were custom that we didn't put in already so one thing i want to do right off the bat is html and body we're going to put scroll behavior smooth and we'll only be able to see this effect once we have enough content and when we click on these it's going to it's going to smoothly scroll down to those areas rather than have a big jarring jump also we're going to have left i is at 50. that's that's the custom class we created that's what we named it and we're just going to put left 50 percent we're also going to have the same thing for right at 50 percent all right same thing with top we will eventually use these two although we haven't yet and this is top um a few other classes that i'm just going to paste in here for now i in fact i'm probably going to end up pasting all of them right now because i don't really want to deal with custom css at this point so at line 20 i've pasted all this stuff in all right so we have dash z hyphen one so that's simply creating a class that we will eventually use for making this i oops what am i doing let me select all this and just there we go so i right here z index one or negative one rather that's what that's for secondary title so this might look a little confusing but it's a way to extract um proper or not properties but utilities from tailwind css and taking all those properties and values and sticking them inside of this rule set essentially so we have secondary title oops let's close that out we're going to get to that in a second um we also in by the way the squiggly line just ignore that it doesn't mean it's necessarily broken we don't have to worry about that secondary title before we're gonna get to that um secondary or section did i say second here yeah then section paragraph we're applying these tailwind properties badge we're eventually gonna have and really not too much more and you'll see kind of how these come into play once we get to specifying them here's the nav dot um i'm just kind of getting these all lined up um and then the nav dot hover span that's what's going to make these things kind of show up so now i'm going to save this nothing changes of course we're going to go back and we are going to add the opacity of 0 on here opacity hyphen zero so oops zero right here now when we hover over these it shows up and that's essentially what we want we could also see this is filled in because we specified that uh class that gives it the color essentially all right i know we've we've done a lot here let's copy this and we're going to simply paste it um three more times now for some of these this is not a selected circle so we're going to get rid of this one all right and we could also get rid of the block one right here we can copy this paste that and we do have to specify this this is going to be work this will be clients and this will be higher so let's save that okay i guess i screwed that up yeah i did i don't know why i didn't think we needed the block but we do actually there we go now if we were to have enough content we would scroll down and this would stay um this this it would stay fixed and it wouldn't hide and scroll away with the rest of the user interface okay so now oops let me close that out let's go ahead and continue on to the next section um and again we're still inside this div class over here so after our nav element we're going to put in the main hero sections uh where we have the headline and the call to action so this is going to be our second column essentially so we're going to have a class of flex also a flex wrap again another flexbox specific property we're also going to have a bunch of other stuff and instead of typing this all out we're just going to paste it and i'll be able to describe it really quickly so let's put a space there so we have um on this element on large we have margin left 20. we're justifying its center and that's again that's flexbox specific uh stuff to to have this particular area centered on medium and up we have justify start again flexbox property um and then we have max with xl and right here in the uh documentation we could see it's utilities for setting the maximum width of an element so max width xl in the case of what we were using um of course margin top zero and on medium it is going to be on the margin y we're setting it to 36 all right so that's a fair amount of white space right here um after that we're going to have our h1 element which is our headline and we're going to put in building we're going to use just a manual line break right there beautiful web experiences all right so let's save this and see what's happening so far uh to this point and we'll come back here there we go very small as we can see and so we need to create a make a few adjustments on this specifically so let's move this over so we can see what's happening as we code this we'll drag this in sorry i just lost my spot there we go let's drag this in all right so we're going to put an h1 here class this is going to be um a font weight here of bold so font hyphen bold text is going to be 5 xl so that's for the font size let's save that now we're getting somewhere um on medium and up it's going to be text hyphen 6 xl so on mobile it'll be 5 xl is shown there but once we get to medium it's going to make it 6xl on large it will be i let's see text hyphen 7xl we're going to text hyphen center this on mobile but on medium as we can see we're going to put in text hyphen left to left align it so now if we bring this back and we see how this the font size changes slightly at each break point and notice how it goes back to tech center awesome stuff so now we're getting places and it's very exciting to me personally all right especially because uh my i've been talking and my voice is going and we're not even close to being finished uh but we're going to move things along a little bit quickly because i think you're starting to understand if i want to figure out something to do with intel1css all i have to use is documentation as it was with most of the cases most technology so we're also going to have inside of here an area if i show you in the design i let's go over here where we have this so we have a button that has this icon which is svg and this type now the amount of uh html markup and classes for this it is a lot so i'm just going to simply paste all of that information and actually i'm going to copy the right section there we go i'm going to paste this next section here this is it's a lot just for a button but it is svg a lot of svg though and this is what it looks like so if i save this we'll see our button pretty much very close to exactly what we wanted and had design already and so but let's just real quickly overview the actual content here so essentially we have a div class container of the entire thing um we're specifying with full flex justify centered and on medium up we're saying justify start which is in relation to the flexbox then we have the button itself we're giving it padding or white space on side of it color is bg theme text white we're making the font way bold margin top 12 flex item center and space 3 between the actual svg element and the type right here so it's between these two elements and then we have a div just to hold the svg information itself and then the span of my work and that's the button all right so exciting stuff uh because our design is now working well if we go back and just see how the button responds um we can see it basically stays exactly the same it's centered here and it's essentially what we had designed already all right so continuing on it looks like we do have this is up a little bit too high so i have to make sure go back and make sure we added the right eye classes here and sure enough i put in margin top 37 which is not an actual thing it's margin top 36. you can't put any random number you have to make sure that they exist uh where they need to be and now it is down exactly where we want it there we go now it's looking pretty solid in my opinion all right so the next section of the design is right over here where it says my work all right so this is going to get a lot easier now because these sections share a lot of commonalities in the html structure along with the classes that apply them so let's go ahead and get started with the my work section right here all right so let's come down and right after that oh i'm wrong we don't have the image of the person so if i hit ctrl b we'll get back our side panel here we have to uh get in the image and you can get this from um the reference files and i'm going to open this up off my reference monitor and copy an image folder so create a new folder called img or just drag it from the reference files i'm going to right click and reveal and file explorer real quickly and i'm going to hop into that directory and just paste an img folder with something called man.png which is that person that you saw so then what we'll do is after uh the second closing div tag we're going to put in an image source of image forward slash man.png alt is just um we'll just put man and then we're gonna have a series of utility classes here as well so for class we're going to put these so we're going to say width is going to be 3 4 of its parent container margin top 12. on medium it's going to turn into absolute medium and up making it absolute so that it can kind of go behind text if it needs to and then margin top 6 on medium margin top will be 0. in all these classes you kind of just create as you're you're you're dragging the browser in and out to see how it's responding and where it's sitting and where you want it to sit so hopefully that makes sense also z um one that's a custom css that we defined here in the index.css so now let's see if our person's there yes look at that it's like magic i love it now we can proceed to the very next section so at this point because this is kind of a lengthy tutorial already what i'm going to do is just copy and paste each section and quickly go over the markup so for the my work section this is the markup that we have here so what we have is a div class container margin top 64. so we're using a lot of white space between these elements it's a flexbox justify between item center i'm not going to go through all these other ones because i think you're starting to get the process here outside of that we have just a this is all wrapped in a section as well with a width of full we have our h2 element of my work we have a paragraph of section paragraph is here and then we have our grid uh and the css grid is a great way to layout things like thumbnails it's it's similar to flexbox but it's kind of enhanced in a way and then here's all of our different images so if i hit save we come down look at that so now let's do the next section of course that was uh based on the design here we have clients all right so i'm going to refer to my reference monitor real quickly and this one kind of has a lot of html as well and so if i go back to our code editor we're going to come down here and we're going to paste this actually it's a lot of repeat we just have three different clients essentially again i definitely encourage you to to go through all these again a lot of these are all classes that you've already been subjected to that are already explained um and a lot of the initial uh html for these is the same in each of these sections so container mt64 containing nt64 section you know with full then we have the same h2 element and the the section paragraph and then here's the custom stuff where we have the clients and each one of these is a client essentially um and it's pasted just three times so it doesn't look as intimidating as it is um but essentially we're just creating um a two column layout where on the left we have the logo and then also on the right we have all the information um associated with the the fictional client and then we have this border right here that's applied as well so all this stuff you can see um that's uh essentially structuring all of this as we need so here's the svg for the apple logo the client info is right here all very pretty self-explanatory once you go through the code and then we'll go ahead and hit save and check that out to see it in action notice we also wanted it to collapse on medium uh and smaller so if we look over here here's our client section and we'll see it responsively and it collapses from medium and on down awesome awesome stuff now one final section is going to be the form area all right so the form essentially behaves exactly the same except um here it's two columns where we have this information we have enough room to put this additional information but then on tablet all of it collapses down all right so let's i i'm going to go ahead and just do that section the hire me section real quickly and we're just about done with the html markup and we're going to put that right here so again when it comes to form elements i keep on clicking that by accident it comes with form elements you have i you know your tailwind specific classes that are help you easily style all that up again same for opening elements that we have here and then we're going to use the grid for this area and we're just creating a container for all of it and then inside of here we have a div label input for the name and then the email and then the text area down here and then finally the button that submits uh the second column has the contact info right here and socials right here and there you go so if we save this and we come back up here we'll see that we have our form highlights nice good accessibility and there we go if i get this back to a hundred percent this is what it looks like very very similar as you can see to the actual mockups created in figma so let's get this section right here working this nav because right now if we click it nothing happens so we're going to have a little bit of javascript in order to make that work we also want these icons to light up when you're scrolling too so there's some java a little bit of javascript that we're going to do for that so we're going to put script source is main.js which doesn't yet exist let's go ahead and create that main.js all right and inside of main.js we're going to create a function that will update everything again i'm just going to go ahead and paste this and then describe what's happening so here's a function called update list now this is going to be responsible for when a person's scrolling uh either with their finger on a phone or tablet or their mouse in the browser i for highlighting the given area or the given dot based on you know which section it corresponds to so you can see we're getting uh the h1 and h2 elements so why are we getting those well those are are all the different that they basically define where each section begins and so if we can use javascript to uh get the bounding client rect right there uh dot top this will give you the information in terms of um how far away each of the sections are from the top of a browser and in doing this and returning this value we're able to then i query select or all or get all of the selected circles which is the class that's applied to any of the elements with selected circle and we can iterate through each one of those and we can remove a class called selected circle same thing with our nav dot over here um our nav dot this will allow us to add based on uh the the position of or based on what's returned here um if it's the correct section essentially so if you've never touched javascript this is going to be a little bit out of your wheelhouse for sure so if you don't understand it now don't worry about it um i would definitely say though if you're interested in this sort of thing definitely you know take a javascript course you know of course the function in and of itself just by declaring it doesn't do anything so we have to run it so we're just going to run update list and so finally what we have to do is we have to run our call update list and update it every time i a person scrolling down so what we do is window.add event listener on scroll you can do click events and all these other type of events we're going to open up and just say update list so we're going to call it so let's save that we're going to go back to our project and here we are all that code is responsible for making this happen essentially awesome awesome stuff so what happens if we actually click on these uh they're not working just yet and that's because we need to make an adjustment and right here i forgot to specify on these ones this has to go to the work section also the client section and then finally down here we'll have higher and so these right here are corresponding to the ids that are given to h2id work id clients and then also higher right here so if we save that now it will smooth scroll to those sections so work or maybe want to go to higher and there we go and the same thing will occur if we do it up here as well all right so that is the full actual project and now what we can do is deploy it using hosting so the first thing we want to do is go to github.com and let's do that right now i already have an account created you can create an account as well to get to this point but what we want to do is to create a new repository all right this is going to store our website files essentially so i'm going to call this just a personal port as in portfolio and then we'll go ahead and for this we're going to leave it at public i if you want to make it private which is recommended it adds extra steps to this though you just have to specify a key and all that but we're going to make it public for this and we're going to create the repo here all right so now it gives you some information in terms of how to initialize this to uh to github based on your project so there's a few things you could set this up in desktop or you can do this in command line you're going to need git so you're going to just type in google install get and get to that point where you have it already installed and so we're just going to use this method here and i'll show you how to do that so let's open up our personal portfolio section i'm going to move this off screen and you'll see the commands that i'm about to write so view uh terminal we're gonna put new terminal and we're going to by typing git init all right then we're going to type in git add period which means simply all we're going to then give git commit hyphen m will just say first commit by the way if you don't understand git there's a lot of free courses it's it's definitely you know in git and github in general it's definitely worth knowing especially if you're somebody who's dealing with code branch uh we're going to put hyphen uh uppercase m and i'm just going through all the steps by the way uh main and then we're going to copy and paste the rest of it because this is a long command right here git remote add origin and then this url right there of course yours will be different because you have a different account and then get push hyphen u origin main all right so this is going to upload everything here that we specified um right there um so now if we go back and refresh this you're going to see all of our files all right so that's the first step and now we have to head on over to hostinger.com i'm going to go ahead and choose under hosting we could do shared web hosting for this you have all the pricing options that you can there you can then make your own decision i'm just going to choose the uh um this section right here for the premium and i'm going to leave this just at just for my purposes we'll just leave this at a year the total is 21. 48 cents now again you're gonna make sure that you enter the coupon code design course to get your discount applied here uh very important that you do that and i'm gonna go ahead and pause and just fill out all this information and there we are so now we're just going to walk through this real quickly we're going to hit start now we can uh select a different platform if we wish but we know we don't have a platform we did everything pretty much custom so we're going to skip i will start uh from scratch and at this point we have a the option i selected gave me a free domain so i'm just going to enter just a fake domain name i haven't even thought of it i'm going to think of it really fast i'm going to make sure it's something that exists already so i'm just going to put design course um hyphen hostinger.com of course you'll want to use something you know like your name if you can get that as a com or some other extension so i'm going to hit search and we tells you it renews in a year or so we're going to hit continue notice how everything is super easy to get this set up this is all looking good to me for server location the domain name and contact information this is actually an old address for now so that's fine i'll just leave that for the time being and here we go it's going to set up everything based on your server environment and everything that you just specified and it should go here pretty quickly less than three minutes great it is done definitely less than three minutes we're gonna hit manage site right here all right so i there it goes i was kind of it was curious because it said it's not registered it yet um so if we hit preview my website for instance uh it's doing this sort of browser cache checker thing or whatever please allow it to five seconds come on cloudfare flare rather go go go go and there it is so this is um what it would look like let's see if we design course hostinger.com right now it's not yet available but we do have like this preview right here all right and then we're going to scroll down all the way here to the very almost the very bottom and we're going to click on get all right so what we want to do now if we had a private uh repository we would generate an ssh ssh key from here it would give us the keyword copy it and then we would go over to this section into settings of assuming this was you know again private uh and then we would go to um deploy keys and we would add it there but we're not gonna do that we're gonna do just create a new repository here and what we want to do is paste in the actual github url to our project so if we go back just to right here we're going to copy that we're going to go back here and for public repositories as you can see it gives you an example this is exactly what we want and then the branch here that we have is no longer uh called master it's called main all right so you're going to want to put main here change that and then directly uh for the directory we can just leave that blank so just go ahead and click create it's going to load a little bit and then we're going to have some options we could deploy it right here and then we can also set up automatic or auto deployment uh right here now let's just uh let's set up auto deployment and it can make our life a little bit easier so what we'll do is we'll click this on the webhook url we're to go back to our github project we're going to go to settings and then we're going to go over to web hooks so we're going to add a web hook and we're going to copy in this area right here or paste rather that deploy key that we set up or the webhook url rather sorry we're going to leave content type as what it is by default and we're going to leave secret empty and just the push event is what we want and then add webhook right here all right so it should tell you it was successfully created we sent a ping payload to test it out et cetera et cetera et cetera now if we click on preview my website right here there it is it's automatically pulled from github and it's going to function exactly as we intended and of course if we want to make a change to this like for instance let us change uh maybe this button view my work instead and you know you make an update to your site for whatever reason uh we can come over here and find our button view my work all right we'll save that and we'll go ahead to git add and we only change the index.html so we're going to do that git commit hyphen m i updated uh cta or call to action and git push all right so now with the automatic deployment if we go back to our site here this should now have updated to view my work so it's an automatic deployment every time you push to github github would then send a ping essentially to hostinger which will then download the updates and automatically deploy them to your website awesome awesome stuff all right everybody hopefully you enjoyed that i know it was a bit lengthy but hopefully now you have some confidence in terms of both what it means to create a really solid portfolio whether you're a designer or a developer of some sort and also how to deploy a project with automatic github deployment and so i definitely check out the top link of this youtube description which is the sponsor of this video hostingjird.com they're a really solid host and obviously with excellent pricing and as you've seen during the sign up process it is very smooth very user friendly and easy to use alright everybody i will see you next time alright goodbye [Music] you

Channel: DesignCourse

Views: 21,459

Keywords: personal portfolio, portfolio website, how to build a portfolio, web design portfolio, developer portfolio, tailwindcss tutorial, tailwindcss 2022, tailwind css 2021, tailwind tutorial, gary simon, designcourse, responsive design, deployment, hostinger

Id: Vp6GC3jKG20

Length: 97min 58sec (5878 seconds)

Published: Mon Nov 15 2021