Create a Beautiful Portfolio Web Page using HTML and CSS | Kalob Taulien | Skillshare

Create a Beautiful Portfolio Web Page using HTML and CSS

Kalob Taulien, Web Development Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (59m)
    • 1. Introduction

    • 2. Project Setup

    • 3. Using a Framework

    • 4. Installing The Library

    • 5. Template Setup

    • 6. Background Image

    • 7. Image Setup

    • 8. Content Setup

    • 9. Adding Content

    • 10. Social Icons

    • 11. More Icons

    • 12. Adding Tooltips

    • 13. Summary


About This Class

Learn how to create a beautiful and flexible portfolio web page. This web page is a large "card" style and is designed to look great and help direct people to your other portfolio places such as Instagram, Twitter, Facebook, GitHub and more. 

To get the most out of this course...
You should already know some basic HTML and CSS. You don't need to be an expert but you'll need to know how to create links, copy/paste SVG's and use CSS classes. 

We'll start by creating a web page template, then we'll add the overall page structure, add some images for immediate gratification while we're working on this, and lastly we'll fill it in with content. 

As a bonus, we'll also install a little tooltip plugin as well to give our links a little extra "WOW" to them.



1. Introduction: hello and welcome to creating a profile page for your Web development profile. Now, as you can see here, we are going to be creating this exact page. Now, your project in this course is going to be to basically customizes to make it look and feel like you. But the general layout is going to look like this, so we're going to get started with HTML and CSS. But you don't actually really need to know too much of that because we're going to be using a framework called Tailwind that allows us to get away without having to write custom CSS. We can make beautiful, beautiful websites without having to do very much work at all, and it always looks super custom. So if you were interested in building something like what you see on your screen, join this course and let's get started right away. 2. Project Setup: okay, Before we can write any code, we need to set up our text editor. Now, it doesn't really matter which text editor you're using. You can use sublime V s code, Adam brackets. You could actually even get away with just doing all of this in code pen dot io if you wanted to, but for me, I'm going to be using V s code. So I have just opened up V s code here, and what I'm going to do is just make this a little bigger. And actually, I'm going to save this already. So this is just a new file, and I'm gonna put this on my desktop and create a new folder. I'm going to call this profile, and the file name is going to be index dot html. And that's just because when you're creating a website, Web servers tend to use the name index as the first sort of file that it looks for its not going to look for profiled out HTML or anything like that in a folder is always going to look for it index dot html. Let's go ahead and say that and actually, I got a little had myself, but I want to do here is open up that entire folder NVs code, and it's going to show me that on the left here I can actually see my index dot html file. And so we just want to you get a Project folder and an HTML filed called index dot html set up in this video. That's all we want to dio. Once you have a folder called Profile or Whatever you want to call it and you've got a file in there called index dot html, go ahead and head on over the next lesson, but before anything you're going to need an index dot html file somewhere on your computer . 3. Using a Framework: before we get started writing some code, let's take a look at the framework we're going to be using now. This is a relatively new framework, and it's called Tailwind CSS. And I think it just tailwind CSS dot com. Yeah, there it is. And this is a utility first to CSS framework. So you might have heard of bootstrap or you like it or foundation. It's not really anything like that Where Bootstrap Andi Foundation and you I can all these other sort of frameworks like Boma. They come with the idea of building these these entire components. What utility first is is it just gives you CSS shortcuts so you don't actually have to write your CSS code. You just need to know what you're looking for and how to write it. So, for example, if we wanted to change the oap a city which we're going to do a little bit later if we want to change the up a city of something, where is it? Let's do a find hero. Pacenti. There you are by default. Tailwind comes with a pay city dash 100 minutes full of pasty, so you can completely see it and it goes down by 25 eventually ends up at a pasty zero. So it's completely see through. And what I'll do is I'll make that a little bit bigger here, and you can do this with pretty much everything. So let's do font smoothing. This is a cool thing. All you have to do is add anti alias or sub pixel anti alias to your body, and it will automatically smooth your fonts for you, which is really, really nice. Makes your site just look a little more crisp. Next we have. You know, we've got all sorts of stuff in here. We've got grid, we've got Flex box. We've got almost all sorts of stuff, but we're not really going to work with too much of a complicated CSS. First, we're going to keep it fairly simple. For the most part now, one thing to keep in mind is this is mobile first know what that means is we're going to be writing code for mobile and up, and so essentially we want to make this look really good on our phones and on and on our tablets, and then we're going to make it look good on our desktop, but when we're writing the code, so it looks like we're doing it together. But the idea is that mobiles such as your phone tablets ipads things like that should always look the best, because that's where most traffic is coming from on the Internet these days. So if you want to get a little bit of a head, start head on over to tailwind CSS dot com, and you can just look through their documentation. Now we can get really, really advanced and you conduce, um, really cool stuff with us. But again, we're going to keep us nice and simple because that's all we need for a profile page, really is something nice and simple. So when we're talking about things like our configuration, theme, break points, things like that, it's good to know about that stuff. But if you aren't familiar with that, that's actually OK. We can get very, very far with really nice websites just by looking at, uh, just some of the utility first components here, so patting, for instance, look at this. If we wanted to add a patting of 0.25 realms, we could add P Dash one, and we could do this with P. T. There was another one of your P excellence. Patting X That's your ex Access and P why is going to be your Y axis and you're going to see this with margins as well. So just growing down here, pl is, you know, patting left P r is patting, right. Same thing with margin we've got with Max with all sorts of stuff in here. So we're not going to go through all of this just because, um, while it's pretty straightforward, all you need to really know is that, like, CSS if you want to make something, have a maximum with there is a max with sizing component entail Lindsay S s. And that's what we would end up using. So feel free to take a look through that or just go through the restless course with me, and we will just start right away and make our profile Web page 4. Installing The Library: All right, let's go ahead and get our templates set up. So I'm going to open up my editor again. Visual studio code. And I've have that index dot html file that we originally created. I just have that open and in V s code, I have this really nice shortcut where I can type html Colon five on the tab. So each email Colin five and then hit tab, and it just automatically fills a bunch of stuff for me. This is really, really nice. Now, if you don't have that feature in your text editor, you can always download the source code, and you can just grab this part. So in the source code, you're going to have access to the entire project. Ah, but you're going to want to just grab this template stuff so you can cut out all the other stuff that you're going to end up seeing. Let's change our title. I'm going to make this for mine. So I'm Caleb Tallinn, a little aliens profile now to get set up with Taylor, and what we need to do is actually add tellin CIA's As to our library, our to our index file rather So we do that with just a standard link, just like regular CSS, and we give it and r E l of style sheet and an h ref of this link here. Now I can never remember this, and I just had this in my clipboard. Eso If you want to pause here, you can write this as well or just grab that source code. It's https. Unpackaged u N p k g dot com slash tailwind CSF slash dish dist slash Tilmant document and dot CSS and that will give us our simple tailwind. Set up No one's we have that. All we have to do is open up this file in our browsers. Let's go over to I'm just using Firefox here and let's go file open, open, open file. And so it just opened up my profile, former there and let's open up index dot html and we should see absolutely nothing. That's good. That means things are reset the way they're supposed to be using this particular library. We just haven't written any code yet. In the next lesson, we're going to actually get set up with our entire templates. We're going to add some classes maybe a background image and sort of get the structure of our page properly set up, and it's actually want to start taking form is going to start looking like something. 5. Template Setup: All right, welcome back. Let's go ahead and get started with our entire template here. So what we're going to do is actually start writing some code and it's it's more this skeleton, so it's not going to look great right now, but in a couple of videos is going to look fantastic. The idea behind this is that HTML is basically the skeleton of your website, so you can't necessarily see someone skeleton, but you know that it holds them upright while they're standing or sitting. And so website is the exact same way HD miles skeleton. And then we put a nice decorative layers on top of it. We put paint on top of radiance, colors, images, things like that. So let's get started with our base html here. So first things first, we have a body class, but we also are going to want somewhat of a rapper s so that we can have if we take a look here. This whole section here we want all of that to be centered all the time. How do we do that? And if we go back here, all we have to dio is type active class is equal to, And then we can give it all sorts of classes on. And that's the nice thing about telling is we don't have to write a lot of CSS. It's already written for us, but we do need to use a lot of classes. So if you've written a website before, you might have seen classes equal to, like profile. Or if you're using Ben style and be like Profile Header something like that in Tailwind, we actually do something completely different. We're going to see upwards to 30 40 50 classes on an element, and that's just because we're applying everything one at a time, writing, patting, riding margin. We're adding, Ah, what the text is supposed to be like a passage e how we're supposed to be adding things like Max with containers, things like that. We do it all one by one. So first things first. We've got Max with for Excel, and that just means the Maxwell is going to be for exile. Now if at any point time I write something like this near like Well, what is four x l? You can always just head on over to Tailwind and you know, what's the Max with that we're working with so you can click on the max width here and Max with four XL by default is going to be 56 realms. We also want this to use a flex box and we want the flex box items to be center. Horizontal padding are not patting but horizontal spacing. We want that to be auto so that our pages actually centered and then on a large green. This is getting to the mobile stuff. We want large h is equal to screen. We're going to add some flex wrapping here as well. And the M X Remember I was saying earlier about the X and y So this is margin X and that's going to be hado. We also want the margin. Why? To be somewhere around 32. And what this does is the murder Y says basically about this box. But then on the outside, you've got the spacing above and below. That's the Y axis, just like a graph. And then lastly, we say lg margin y is zero. And so what we're saying here is from large screens and up, make sure that margin why is zero, but anything from or anything under the large screen. So medium sized Karina small screen, maybe an extra small screen, depending on how you have your project set up, is going to have a margin. Why of 32. So we're saying always have a margin of 32 but on large screens and up, make sure that there is no margin above or below and that sort of the whole more while first approach. It's sort of how we make websites these days. So we're basically saying Hey, at the margin to be top and bottom for everything. But then, you know, as you scale your screen size up from smallest to biggest, make sure that that large size screen is going to have a margin. Why of zero. Let's go ahead and close that and create a closing def tag. Now in here, we need to columns because if we look back here, we can see that we've got a content box here and an image box here and that looks way better than what you see my face right now. Um, profile pictures are the best, aren't they? But you can see that we have these two columns so I've got a content column on the left and I've got my image on the right. So these are considered columns and doesn't really matter of using calendar boots trapper anything. Really. Most websites conform to some sort of grid system, and that means there's going to be columns. And so we need to add that column. So I'm gonna add a note here that this is going to be a content content. Call him and let's put a note underneath here and content column, and that's just going to tell me sort of where my code is going to be. And then we also need that image column. So let's call this image column and let's copy that and call it end Image column as well. And now we can put our columns in here. So we've got this content column What needs to go in here? So go ahead and add our content. Call him in here. No, make that just a tad larger and we want to add tive with a class. We have all sorts of classes we will have in here. So with full, we want this to be the full with we've said that this is going to have a max with of four XL, which I think it was 56 rooms. So this is just saying that this Devyn here is going to be the full with, but it's also using flex eso. If you're not familiar with Flex, what this is going to do is say, hey, you've gotta flex box. And basically, for every child in years of them, we're going to have one here, one here, make sure that they can stretch and wrap and be on the same line. And then we said with flex rap Hey, you know what? Actually, if one of these boxes gets a little too big, pop it down onto the other line. So we've had with full LG with and this is a weird one. Eso on a large green were saying the width is going to be three out of five on every other screen, so medium size and small screens were going to say the with is going to be full. So again we're doing mobile first here, so full with and then on screens that are large and up so large, extra large, extra extra large things like that is going to be three out of five, and we're going to give this some rounding surrounded. It's going to be large and large, rounded large. And then let's also add some more responsive stuff in here. So this is just going to really make this change a little bit. Not too much, but a little bit. As the screen actually change, the size is, well, experience us a little bit later. So this is rounded, left large, rounded right, none Shadow to Excel BG Gray 900 oh, passivity capacity of 75 mx of six And lastly, we're going to say on large there's going to be a margin on the X of zero. You know, we can say stuff here. Let's go ahead and refresh this page. Okay, so you can't really tell that anything big is happening, But we do have this rounded nous thes rounded corners over here, and we don't have rounded corners over here, and that's exactly what we have over here. We've got this rounded corner. It's hard to see, but we don't have the rounded corner over here. So we've actually created this content area and we can start adding content in there in just a little bit. Next, we're going to need to add this image. So let's go back here and then back here and at our image column. So this image column is going to be div dot and what I can do is in V s code. Or if using sublime, there's this thing called Emmett. You can type div dot and a tab, and that's going to create your class for you. So with full and on a large, we want this to be a with of two out of 5 to 5. And what we see here is that two out of five plus 3 to 5 on large is going to be five out of five. That's you. Boil it down. That's a one out of one and again, uh, really comes down to some simple fractions here. But one out of one is 100% and so these add up to be 100%. Three out of five plus two out of five is equal to 5.5 100% with no 100% with is going to be 100% with of the max with that we set here, not the max with of our entire page. And we can just put image here and that doesn't I don't even need to fix that, typo, because we're going to get rid of that in just a little bit. And now we can see it says image here. Now this is getting a little bit crazy with all these classes. So I think we should do something a little more visual. Let's go ahead and actually had a background image, and I'll show you where you can get some really cool background images that may or may not represent you but could still be really cool just for even just a project. 6. Background Image: Okay, let's add a background image. So if we take a look at our final project here, I've got this matrix like background image, and that's pretty cool. I'm gonna show you where you can get your own images so we can go to this place called unspool ash dot com. And this is where you can get a bunch of royalty free images. Now you should give people shout outs to any sort of images that you end up using. But a lot of cases you don't really have to. Not on a site like this, something some type in coding and see what we come up with. Let's make the screen size bigger. Coding, coding, coding. Do we see anything in your that sort of represents us? Ah, see that I'm looking for a background image. So no, let's go us cause it said coating set up. I just want coding anything in here. Let's skip right to it and let's look for Matrix. I don't even remember how I found that original background image, and there it is matrix. So all you can do is click on that download free and download the file. So let's download this file and this was downloaded. But what I can do here is just open up my finder, create a new tab here, and what I'm going to do is just download that image into this folder here, or copy and paste. If you downloaded it into a different folder and I'm going to rename this to background dot jpeg and first of foremost say thanks attribution is appreciated and allows contributors to gain exposure. So, Marcus, uh, spice key? I'm guessing. So if I said your name wrong? Ah, but Marcus, thank you for this. This photo. Um, appreciate it because it looks really cool. Let's open up our editor again. And now we need to actually add this image to our entire body background. You can see my project here. I've got background on J peg beside my index dot html file. So now we can add some classes to our body. We're going to add some nice classes. So first things first, we want to use a specific font. Funk Sands, we're gonna say anti a liest. The text is going to be gray 100 s. Oh, this goes up to 900. So 102 103 or four or 567 108 109 100. The lightest one is going to be gray 100. But you could also say Text white if you wanted to, but I'm not going to have to say Text Gray 100 leading text is going to be normal and tracking wider and B g background is going to be cover now for the actual background. We're going to say the style is going to be and I guess we are actually writing some custom CIA's as here, But you can see too much more on this other than setting background images. Really, eso the background image is going to be a you Earl and it's going to go somewhere. Now that's this. U R l needs to point up to hear this background dodge a pack. No, these are in the same folder, so I can just type of background and dot J. Peg. Let's take a look and see if I have any typos on my page. Cool. So now we have a background image. The next lesson. Let's go ahead and add an actual image in here and again that just keeps it nice, and visual really makes us feel like we're actually doing something because, frankly, just writing a bunch of HTML doesn't feel that good. But when you can actually see your changes to me, that feels really good. So let's go ahead and make some more visual changes. 7. Image Setup: All right. Welcome back. Let's take a look at this image here. So we have this image, and we want to basically put this into our current work in progress Profile site. So first things first, the image needs to be a certain size. Otherwise, it might not actually be a little larger than your content. Like what I have here, you may need to crop or resize your image for me. Already have an image sort of picked out, and it just happened to be a really good size already. So what I'm going to do is in my folder here and already have this in my clipboard. I'm gonna paste this in here, and you can see my project. I have Caleb dot PNG and so this image just needs to go in here. And what we can write is image the source is equal to, and it needs to be Caleb, about PNG k a l o b dot PNG. Now we need to add some classes to this because everything in Tailwind uses classes we need We need to add, like, a ton of classes to basically everything eso we've got rounded. None. We don't want that to be rounded at all But then on large, we want this to be rounded lg So again on mobile, don't round this at all on large and up around it shadow to excel So we're going to add a double extra large shadow to this, even though you might not necessarily be able to see it. Maybe on a lighter background, you would be able to see that. So depending on what background you choose, you might actually be able to see the shadow back there. Now let's say this is actually hidden by default. This is not going to show up whatsoever. However, we are going to say on large screens, we're going to make this blocking, and that's display him block. And so, basically, on medium small, extra small screens, this is always going to be hidden and on large greens is going to show up. So let's save this and, you know, file save and let's go back to our work in progress and refresh this and there we have an image. Now if I right click and inspect, Element can actually go into mobile view here, so responsive, I don't necessarily want this to be 3 20 Maybe I want this to be 900. But actually, on 3 20 you can see that the image doesn't show up. Still doesn't show up on 800 1200. There's the image. So this is getting into the whole mobile first thing where on Mobile, we said, Don't show anything but on larger screens show something, and that's what we did here. So a little bit later, what we're going to do is when we start working with our content, we are going to actually throw an image up here. We can see if I again. I do that inspect element thing and go into responsive view here. And let's make this significantly smaller. Let's make this 450 pixels wide. We should see something like this. So let's go ahead and do that a little bit later. We don't need to do it right now, um, but we are going to do a little bit later so nights get over that and and in the next lesson, we're going to work with our content in here. So it doesn't just say stuff here, so it's actually going to say something pretty nice 8. Content Setup: Okay, let's go ahead and add some content in here. We have this continent just as stuff here, but on the final project, it actually says a bunch of other stuff. We want this to look nice for people who are going to come see our website. So let's add some content. Something open up the S code again. You don't need to use V s code. You can use Adam Sublime. You could probably even get away with using code pen dot io if you wanted to. But what we want here is this content column and we want to basically get rid of stuff here and write some new stuff. So first things first. We have, ah, a little bit of inter styling that we want to do something that's not necessarily going to be applied to this element, but to its immediate child element. So we can see that there's a bunch of padding or possibly margin around here. So from the border to like the top of the K from the bottom border to the bottom of, you know, just down there to the bottom of that f, we can add basically margins or padding in there to make sure that everything sort of moves in a little bit and that our text isn't hugging the side because it doesn't look very good when it's hugging the side. So let's add that in first, and what I'm going to do is just call this maybe an inner column inner column and let's go ahead and put And in her column no. One here. I need a div, and we just use a lot of dibs eases. But in here, I want to add, Let's say, a padding of four. So it's do padding Dash four, and I don't actually recall exactly how much it is. Let's go back to the Tailwind Dogs and go to padding. Dash four is one room that looks pretty good. One room is something somewhere around there, Mind you, I am also zoomed in at 150% so feel free to adjust as needed. We also need a few other things in here. Eso patting four is going to be the default, but on medium size screens and larger, we're going to say that patting action needs to be bigger, needs to be 12 and so that actually looks a lot more accurate here. So patting 12 3 rims and that looks a lot better. That looks a lot more like three rooms, not just one room going to say the text needs to be centered, but on large screens, the text needs to be left aligned. And then we can say just a test. This. I would stuff here to go back to our page and I just say that Let's go back to a page refresh and that's that's looking okay. No one's gonna zoom into about 150%. So it's starting to look a little more like this. Not bad rating that's actually ever to that. So we can do a proper comparison here. It's starting to look very similar. It's now. We just need to add some content in there. No, I think it was last lesson where I said we needed a mobile image. Might as well do that now. Yeah, that mobile image shows up right here, so let's go ahead and add that into our content section because we know that this image is going to be hidden on medium and small devices. We can effectively saying that this isn't there anymore. And on medium small devices, that's not there. But on every other device it should show up, sort of in the center of the content here. So let's go ahead and add that. And here we have div. We want to make sure that this is block class is equal to block. We also want to add LG hidden so on large. We want this hidden and the reason we do that is because this image down here is hidden but on large and up its display block. So we've got the opposite here. It's display block at all times, except for large and up, in which case is hitting six the exact opposite of this image. Here. We want this to be rounded feel. Let's give us a shadow as well, a shadow of an extra large MX auto. We also have this cool thing in Tailwind where we can actually give it negative margin or negative padding so you'll see things like Mt. 16. Ah, and that's going to be margin top 16. But if we actually want to move something down from where it currently lives, we can say, minus Mt. 16 we want to give this a height of 48 48 and B g cover and B G center so background cover . And that's going to be whatever that background image that we specify is going to be didn't take up the entire container of this entire def element. And lastly, we need to add a style in here so the background image itself is going to be a you Earl, and it's going to be whatever we want it to be now. I wanted to be my face. That's going to be Caleb dot PNG's Caleb Got P and G. Next, let's move down a little bit and let's add a little bit of a title. So this title and again that does not need to be in mobile view. We need to add that title regardless, and so we can do that once. But having applied across mobile and non mobile sites have been each one in here, and this is going to have a class of text three XL, and if that's not quite big enough, or maybe you think it's too big, you can always go back to the tailwind Dogs here and text. We've got a line color decoration. We've got font sighs. Here we are. Font size is going. Pretext three XL is going to you 1.875 realms. We want this to be bold. So fund old, we're gonna say this text has to be white. There's going to be a patting top of eight and, ah, large and higher. There's not going to be any padding. The reason we do this is because we have that image can. If we do this, we have this image. And so ideally, this image would actually set way up here. But we said Negative margin, top of 16 Whatever that turns out to be. We can actually check that in here as well. Merge in top negative margins. Not in there. Let's do this. Negative margins. Negative margin of eight. And you can sort of see that it offsets it a little bit. And so that's what we did here. But because that's offset, we also need to give this more padding above it, so everything else gets pushed down as well. And so that's why we're adding so much padding, but on large screens. We don't need that because there's no image up here, so we don't need that extra padding at the top. And let's go ahead, and I'm gonna call us Caleb Colleen. Ah, but you'd obviously fill it up with your name. Not bad, right? So no, Pretty good. So now that we have something set up. Ah, and it started to actually look like something in the next video. Let's go ahead and add some proper content. 9. Adding Content: Okay, let's go ahead and add some content. We have basically this line here. I know we've got a bunch of text and some social icons. Maybe we leave the social icons for another video, but let's get some of the content in there at least so we need that. That underlying that border on there's so many different ways. We can do that in CSS. We can actually use the border. We can use the horizontal rules or just straight HTML. We can use a horizontal rules. HTML With CSS as classes, we can do all sorts of stuff. But what we're going to do here is we're going to write a classical div are element called Div. We're going to give us a class and this is going to be MX auto. So margin ex auto, so it should be centered on large. This is going to have m x zero, so it doesn't really matter. So in large screens there is no margin on the X axis and then we're gonna say by default it has a width of four out of five and a patting top of three Border, Be too border teal, we do 500 actual. It's do border, not Thiel. It's do border white. That might look a little bit better. Um, And then let's give this a no pass ity as well. A capacity of maybe 50%. And we can just say that and refresh your page. And we have this border sort of at the bottom here. And so what we said was border bottom to, but the border color should be white. The whole thing should have a capacity of 50. And now we can move on to our next piece here. So our next piece is going to be a little bit of content. And it has some icons in there which we might actually skip. Depending on how long this video ends up being, uh, we might I just add those icons a little bit later. Okay, so the next section we want here is the professional web developer and teacher and my location. So I'm from Edmonton, Alberta. Canada. Uh, you would obviously put your profession what you do, what you do best and your location and there, if you want to put your location, doesn't have to be. But I like doing on just so people know where I'm from. Let's go ahead and here. Um and I need to add two paragraphs. Let's go ahead and add one paragraph here and I'm going to end up just copying and pasting most of this. Little bit later, this one's going to say professional Web developer and I'm a teacher and I'm gonna add some classes in here. So class up here, I've got a little bit of patting up here. I haven't bowled, um, all sorts of stuff in years. Let's go ahead and add these classes. You notice it's a little bit different, but not too different from here. And we'll avoid the icons just for the time being. Just give us a petting top font. This top one needs to be bold. How we're going to say this is going to be flex just because we're going to be adding on S V G a little bit down the road, so we're just sort of planning ahead for that right now. Items center. Just if ah, a center LG Just if a, uh, center justify start and so this has to do with flex a same with items center and flex. Let's go ahead and say that and just take a look at what we have here. Okay? Not bad. Missing the icon, but not bad. Okay, so I'm gonna copy this move on down and just paste that in there, and I'm just going to adjust whatever I need in here. So patting top probably doesn't need to be four does. Definitely does not need to be bold, but let's take a look at what this looks like first today, today Don't do. And it's like this stuff and say, It's stuff in here. Okay? Stuff in your that patting top is a little much. So what we do just just that by about half. Ah, the text is not the base color of Texas actually going to be. Let's make it like gray 300. You could make it darker. You make it lighter if you wanted to. It's also make sure that this text is a little bit smaller and on large screens. Let's say the Texas going to be small, so it's going to be extra small on regular screens, but on large enough, it's going to be a small size, and that is about it's let's go ahead and refresh. This looks a little better, and that's put my location in there and again. You'll just put your location. If you want to. Doesn't again. It doesn't have to be your location. It could be really anything else. It could be. Ah, your top skills, your best qualities, anything like that. Edmonton, Berta, Canada. That's where I'm from. Neat. So we got something like that in there. We need those icons. We can add those icons and just little bit. Let's go ahead and add these two sections. And then maybe in the next lesson. Well, I had some of these icons in there. Let's go ahead and add two more paragraphs. We're gonna add one paragraph in here, and these are going to be almost identical as well. So what I'm going to do is write the 1st 1 and they're gonna copy it and just add it. What I need to add, it s o padding. Top is going to be eight because we have some spacing in here. You see, there's it'll section in here. Let's make sure that that padding exist 88 ish somewhere around there again, you can experiment with whatever you think looks and feels best to you. And we're gonna say this text needs to be small. And in here I could just right. I am a full stack Web developer. I'm a digital teacher and a lover of education. So that pretty much sums me up in a nutshell. On gonna copy all of that. And I'm just gonna pace not back in here. Padding two might be a little close. We can take a look at that in just a second. Ah, and what else I need to write in here is this line. Check out my social links below for some of my work, which we will be adding in this lesson, we can have those in the next lesson or next couple of lessons. Okay. Okay. This doesn't look too bad. Doesn't look too bad. I'm actually pretty happy with that too. I thought maybe four would look a little better. Let's experiment here. Ah, four isn't bad either. So what I'm looking at here is when I changes to to save that go back here. You can see that this tightens up just a little bit. And you wouldn't think that the three or 48 pixels makes a difference, but sometimes it does it. It's the fine details that makes a page look really good. So we are just going to leave us at patting top two. And last but not least, we need to add some sort of contact button. So let's take a look at this. We got this. Contact me button in here. Ah, and we just want that to show up, Sort of like a regular button on that could go anywhere. We're not going to work with that. We are just going to make out a link, and it could go to any other page. We could go to your get up. It could go to, uh, maybe a different page that you have Contact page, contact form a Google form. You have lots of options out there. So first things first. Let's create a new Div here on Let's give this not a class but a padding top of 10 issue Ah , and the patting bottom of eight. And let's just rate stuff. Let's see how this looks. Okay, that's sort of setting up the spacing in your so it's looking pretty good. Let's go ahead and at a Lincoln year. So we've gotten a A trough is going to go absolutely nowhere for the time being. But there's going to be a class in here in this class is going to have a background color. We could change this background color if we wanted to. Ah, but we could use like background uh, teal 500 if we wanted to. Or maybe like a 700 we can say when you hover over this. This is nice thing about telling as well. When you hover over this, change the background color to teal 900. So it's just going to get a little bit darker. We're going to say the text should always be white. Ah, the font should always be bold patting Why eso that's up and down padding. Why is going to be too? And you're patting X is going to be four so left and right. And lastly, we want this to be rounded full so it's completely round. So we've got those nice rounded corners around here. Let's go ahead and write. Contact me. Not bad. Not bad in the next lesson. Let's go ahead and add some icons in here. I'm gonna show you where you can get a bunch of icons on how you can install them on your website without having to use another library. Anything like that. We're just going to use regular SP. Jeez. 10. Social Icons: All right, We need to add to my guns in here. We're missing an icon over here. I come over here in a bunch of social icons at the bottom here, and you can add any social icons you want. I'm only going to add support for Facebook. Twitter get hub Instagram and YouTube. Ah, and then these two icons up here as well. So what I'm first going to do is create this bottom section cause I think that's going to be needs. And I'm not going to show you how I do it every single time We have seven icons. I'm not going to do the exact same thing seven times and make you watch me do it seven times. It's boring and no way to live your life. But I'm going to show you one or two ways that I can do this right here. I'd like maybe get hub and Twitter on, and then I can use those S P G's and you could do the exact same thing that I do. So let's get started with this. Let's create that social media icon section sort of down below. So we just below the contact me section. Let's go ahead and put social media icons and these air just html comments so that when someone else is looking encoder, you're looking at your code a year from now, you can say, Oh, I know exactly what this is. You don't have to read the code. You could just read the comment So Div Class is equal to we need a margin. Top two separate this from the other section just above the content area up here that says , Contact me patting bottom. Uh, I mean it. Just take a stab it 16 again. If you know 16 looks weird to you, Uh, or if it's wrong, you can always just change that. There's a lot of different numbers that we go through, and if you ever like Caleb, which ones can we use? It always go to tailwind CSS dot com. And in the docks, it says, patting zero all the way through seems to go up. 1234568 10 12. And that goes up by fours and it goes up by eights. So P 60 is not a thing but P 56 p. 64 our classes. We can use three on P 16 LG. So large screens and up We're gonna give it patting zero, and we're going to give this a default with of four out of five, we're also going to say on large screens, we're going to use a full with MX auto. Some margin on the X Axis auto. We're gonna say this also has be flex when you say flex rap. So if we have too many icons and years is going to break those icons onto a new line for us , we want to make sure that all these items are centered and we want to make sure their spacing between each one. So let's do justify between, and that is all flex, boxy stuff. And if you're ever wondering, Caleb would what does item center do or what is justified between do Well, there's two ways of doing this. I could go through each one of these classes and tell you exactly what they do, but it's a full CSS courses. You might not actually be interested in that, but instead what I can do is set you up for success. So if you're ever wondering what items center is or justify between. You can always go back here and let's do this, justify content. Is there between in here justify content space between And all I did was search and type the word justify, and it shows me all sorts of stuff. And there's good examples of how all of this works. So if you ever wanted to change that, you could next. We need to create a Lincoln here because all of our social media links in here, these are all links. So let's go ahead and make sure that these actually can go somewhere. Let's go ahead and add a a draft and this at a class, and the class is just going to be a link, and this one's going to be Facebook. I don't care about spotting, all right, because we're going to replace that in just a little bit. The next one is going to be maybe get hub. And you know, even before that we could say, this one is going to be Twitter. Let's just take a look at sort of what this looks like. So I save that file in a refreshing. You can see that nicely spaced out, but they're not icons. So what we can do is we can go to simple. I think it's simple icons dot org's Yeah, eso if this site doesn't exist for some reason in the future there are tons of icon sites you can literally just type in to Google SPG icons or free SPG icons. And what we can do in here is let's take a look for Facebook. Ah, and there is a round one in there, so that's OK, go ahead and download that and I'm gonna open this with and I'm just going to select V S. Cody and Blades sort that so I can find it easier visual studio code. And so it gives me this whole SPG in here, and all I have to do is it's like all of that. It's cut, and that's remove this by pasting on top of it. That's why even spg and they're now let's go ahead and take a look at what this looks like . Okay, Okay, well, we do have an SPG in there. That's good little big though, so we need to add some classing to this so honor spg itself. We can actually specify some pretty nice things so we can say Let's say this is going to be an H six Fill with the current colors. Ah, and the text is going to be I don't gray 600 Ah, and then maybe let's add some hover as well. So what happens when you hover over it so we can do hover? Let's change that To text to maybe from Grey to teal I'm gonna guess teal a sooty I'll 500 . You know what? No, it's just to text White is that we can actually see that something is being hovered over to go and refresh this page. Hey, not bad, not bad. So it's a Facebook. I can't. Okay, okay, I'd actually said Facebook icon in there. That's the title in the SPG. So let's just change out to standard Facebook. So that's one icon. Let's go ahead and add another icon. Let's go back to simple icons and let's do a Twitter search and I actually want to set this up automatically. Dont know why thats not stepped on the machine. I do this all the time. Uh, hit okay. And this one is the twitter, so select all. Let's cut that It's like that time and based Now we want those exact same classes. So it looks the same across all of our icons. Copy. And that's on the SPG itself. Let's go down here and based and let's see what that looks like. Okay, so it's starting to come together. It looks pretty good, doesn't it? Now we also have get Hub and Instagram and YouTube on all sorts of other things in here. So what I'm going to do is I'm going to leave that up to you. What I want you to do is go and find your own icons because maybe you don't have a get up account. Maybe you don't have a YouTube account that you want to promote to people. Regardless, make sure you have your social icons on there because this is going to be the page that people land on Ah, when they google you. And so if you want them to connect with you or see your work on, get up. I had to get a bike on. If your photographer and you want people to see your your photographs on Instagram, for instance, make sure you add your instagram again. All you have to do is go to simple icon set Or or really any other SPG sort of icon website on? You can type insta. It's to Graham and you could just down with that one if you want to dio. So what I'm going to do is I'm going to turn off the video and I'm going to fill in the rest of these just so you don't have to watch me do this. How many more times? 23456 more times actually was bad counting five more times. So Ah, go ahead. Ad your icons. And also don't forget since you're in skill share, you can always update your skill share project with your current work in progress and constantly updated as you go, what long as well or update your project of the very end on. I can take a look at it and you can share with the community and get other people's inspiration and inspire other people as well 11. More Icons: all right. I actually forgot one thing The icons appear are actually a little bit different. Um, and I didn't want to leave you hanging, so let's go over that quickly together. Should only take about a minute or two once you've actually found the icons that you want to use. So just going back TVs code here. Ah, in this section you can simply paste your SPG that you have eso I just found an SPG that I like. It's a globe eso, you know, a fairly standard one. If you're not using your location, you can just use, you know, whatever represents the tax that's in here. So I've got a location, so I'm using a globe. Um, What I did was where I had Edmonton, Alberta, Canada. Right here is I just put that SPG right above that tax and recently did That was because we said in this P class up here, we said, This is flex. So let's go ahead and refresh this. That looks a little bit better now, doesn't it? And we could do the same thing with this one up here, we can basically just grab whatever spg we found. Ah, and pasted in there on the classes that we're looking for here is 84 and you feel like Caleb. What's NH four? We can always go back to telling h Dash four class reference. That's height, height of four. It's one room feel current, and you feel like, Hey, Caleb, what does feel current? You know, same thing and the use of just says, like use feel current to set the field color of an SPG to the current text color. Okay, that's all we're doing. So the current text color is whatever is up here somewhere up there, we don't need toe. Look at that. Oh, but hey, actually, we said it so tech steel 700 then patting right four. So if we save that and refresh our page, we have these little icons in there. If you don't like those icon colors, you can always changes like on colors, just by changing the text color as well. So let's go ahead and change that toe white, so it's a little more visible. I like that on the bottom one text. Teal is still a little bit too dark for me. Eso Let's go ahead and see what 200 is as I, darker moments later may be too late to try. 400. There we go, and that's how we add those icons up here. 12. Adding Tooltips: all right. There's one more thing we have to dio when we hover over this, for instance. And justice, get up. It's kind of boring on you. Don't want to make sure you have your own you girls in there as well, and this one doesn't go anywhere on in the demo that we saw in the very beginning of this course, it hovers over, and it's your get up. And this is a really cool little library called tippy tippy dot Js. I'm gonna show you how to quickly install that and that just gives your your pages a little extra pizazz. So I'm gonna open up my editor and what I can do is I can close that Don't need it. I don't need it and scroll on down to the bottom and we can add some JavaScript at the very end. Here, have some particular script in there, and we can also add actual external script. So let's go ahead and add Tibby Now adding a new script is as easy as saying script. SRC is equal to some u r l slash script. Now we actually in two of these tippy relies on this thing called popper popper dot Js And then we have to install tippy as well. Now, luckily, this is really easy Now, I just had this in my clipboards. You'd have to watch me type this in taipo type of this over and over again, which I did a couple times when I was recording this. Um, so it just goes through unpackaged dot com slash popper dot Js version one disc, um, de popper, blah, blah, blah. So that just adds a little javascript to our page. And then the other one that we have here is actual. Tippi is we're going to use tippy Js at four. And so if we just save it here, nothing's going to happen. If we refresh your page, we're gonna see anything. And so we need to make sure this is actually activated. We need to write a little bit of javascript for this. This is actually super is easy because we have tp dodge as installed already, so we can say tippy and we're going to look for every link. So a link and what are we going to do? We're going to use set that placement to be at the top and that's it. So this is just taking a JavaScript object Bunch of settings in there on this is going to look for every class called Link, and it's going to add placement of the top. Now, if we refresh your page, what are we going to see? You can see that something trying to show up, but nothing does. We need to add some text. Let's go back up to our icons here, and we want to throw it on our link class because that's what we're targeting our links and we want to do Here is type data. Tippy content is equal to hello world in which one is this on? This is on the YouTube ones. Let's go back here, Refresh. We can see it says Hello world. So let's just go ahead and change that to at you're YouTube. And the nice thing about this is we can literally just populace onto each link, and this link is going to be instagram. So instead of your YouTube, this is going to say your insta and this one's going to be collapsed. Get up. So you're get hub and this one is going to be last but not least, actually, don't think it is. Uh oh. Twitter. And I think we saw Facebook left. Right. So you're Twitter. And then if you've got a Facebook one, you can add that in there as well. So you're about Facebook. Go ahead and refresh her. Facebook, your twitter, you'll get hub your instant, your YouTube just like that. 13. Summary: Okay, this is the summary lesson. Eso first of all, thank you for taking this course. I hope you got to build something really cool. Don't forget, you can also get all of the source code just by downloading the project resources. Ah, this is what we started off with originally. And we made some modifications along the way. This is what we finished with. And so it's very, very similar. And we swapped out are different. Different? I convert for Facebook. I made a few different color changes along the way. Just cause, you know, after I saw it a second time, maybe change a few things. We use a tailwind. CSS. So this is a new CSS framework, a newish on its utility first. And so instead of building an entire components, you build things out with just CSS class is almost a javascript crosses you build things that was just CSS classes. We add a lot of CSS classes and you can actually see that where is a good example. But, Bubba Bubba, bomb on our content. Calm about 1234 56789 10 classes, which is getting pretty up there and I've seen as a highest 30 or 40 before. But the nice thing is, we don't really have to write too much custom. JavaScript. The only custom are not JavaScript custom CSS. The only customs he has, as we really had to write, was our background image and the image for my mug shot, which would be your buckshot. Hopefully. So we learned a little bit of a tailwind. We installed it. We did a bunch of things there. Ah, we found where we could get a bunch of free images. Eso You can always go to a splash dot com to get free stock images. Ah, it's always good to say thanks to the person who basically gave you the image, if you can. On then we also learned that if you go to a simple icons dot org's, you can find pretty much any icon for anything. There's 13 currently 1300 freely comes. I'm sure that numbers had to go up pretty quickly, but at any point time you just download any one of these that you want a copy and paste the SPG text into your project and its swaps out the icon for you so with all of that said again, Thank you for taking this course. I appreciate taking the time. I hope you enjoyed this course. Don't creating download the source code on also, you come join me on Facebook in a group called Learning to Code. There's currently about 45,000 members in there s. So if you're interested in joining a totally free community of other coders developers, things like that come take along. People are sharing resources and learning new things every single day in that group again. It's totally free and optional. You don't have to if you don't want to. Last but not least, this guy here is me. That's me. I mean, this photo looks way better than the little corner of me down here. But that's me. I'm Caleb telling if you want to support me further, I you can always follow me on Twitter or you can follow me on skills or both if you want to . I'm also on Instagram and all these other platforms. But Twitter is the big one for me. But also Hey, since you're already here on skill share how you might as well follow me on skill share as well, and you can get updates on my nose courses. Ah, and any sort of updates our progress updates that I put out there as well. Newsletters Things like that. Feel free to follow me on skill share. And don't forget, you can always take your project and update your skill share project as well. So there's a dedicated section in skill share where you can update your entire project. You don't have to do with comments. You don't have to leave code pen link or anything. You can actually leave entire images. You can embed code pen right into your skill share project. You can write notes and stuff in there, and then I can also review it and share with the rest of the community as well. So again, if you are working on this on your own and you want to change this image and that image and make this a lot more personalized for you, go ahead and share that on skill share in your skill share project