Building a Resume Website from Scratch with HTML and CSS | Cassidy Williams | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Building a Resume Website from Scratch with HTML and CSS

teacher avatar Cassidy Williams, Software Nerd in Chicago

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (1h 14m)
    • 1. Introduction

      1:16
    • 2. Your Editor

      2:41
    • 3. HTML Introduction

      5:17
    • 4. HTML Headings and Paragraphs

      7:38
    • 5. HTML Lists and Links

      10:38
    • 6. HTML Images

      7:06
    • 7. HTML Review

      4:41
    • 8. CSS Introduction

      4:12
    • 9. CSS Selectors and Properties

      8:04
    • 10. CSS: Classes and Spacing and Borders, oh my!

      15:38
    • 11. Hosting your Resume Website

      5:55
    • 12. Conclusion

      1:03
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

77

Students

--

Projects

About This Class

9be2fde2

In today's day and age, a paper resume is great, but a web resume is better.

In this course, I'll be teaching you the HTML and CSS you need to make your own resume website.

I'll show you not only how to write HTML and CSS, but also how the languages work together, and how to host your website online.

I've also peppered in tips for you about using Visual Studio Code as an editor, how to include Google Fonts, and easy ways to get your resume online without having to pay an arm and a foot. 

3452aa60

Who is this class for?

You, silly! But for real, this is for anyone who doesn't know how to use HTML and CSS, or those who want a refresher. If you want your resume online (which you should, it's the 20s!), it's always better to make it yourself. 

What do I need to get started?

Nothing! No prior coding experience is required. I'll show you which code editor to download, and how to set up everything from the ground up. 

Meet Your Teacher

Teacher Profile Image

Cassidy Williams

Software Nerd in Chicago

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello. My name is Cassidy, and I'm a software engineering teacher, and I am here to teach you how to build a resume website. Oftentimes, when you're going to career fairs, looking for jobs and even given my business cards, it's hard to convey what you know and hard to show off your resume. People aren't taking paper resumes, and honestly, it's It's about time that paper resumes. Go out the door and you have a digital one online and chances are you might know how to build one. And so, in this course, I'm going to be shown you all the essential H two Malan CSS that you need to know to make a resume website that you can then put online. I'll show you the basics of HTML how toe right at what kind of editor you need to put it in . I'll add CSS, which lets you make it look nice and pretty, and then I'll show you exactly where you can put it online for free or paid if you so desire and make it so. That way, when you have a business card, when you're showing people something on your phone, you can point directly to your resume website that you built from scratch. And so let's get started. I'm looking forward to having you in the course. Thanks for joining in. 2. Your Editor: first and foremost before we actually write any code. Before we learn anything you need to have an editor and your editor can be pretty much anything. But the one that I recommend is called Visual Studio Code. And to get to it, go to code dot visual studio dot com. This editor is compatible with both Mac and Windows and with Lennox to it's It's a It's a great editor. It's open source. It's free, it's it's awesome. So what I'm going to do, I'm going to open up the website myself, and you can just download it right here. You don't need to download any special things. As you can see, it has Mac Windows of Lennox. I'm doing it on a Mac today, but it works just for you. And you could read more about it. Actually. Hey, that's me of as you look through and check out the editor, it has a lot of stuff built in lots of great extensions and everything. You can change your code coloring and font and everything. It's awesome, but anyway, go ahead and download that, and it will redirect you to the getting started page. Don't worry about that. once you've downloaded it and installed it, um, you can hit, pause and make sure that you do that. Um, then you can just open it up and you should see some kind of welcome screen like this. And once you've seen a welcome screen like this, what you're going to do is you can open up your finder, open up your windows, explore whatever you're using on your computer and just create a new folder. And I'm going to create a new folder called My Resume. And in this folder is where we're going to be doing all of our work and we'll be putting all of our different files in there for a website. So when you go to the editor, you can click open folder, or you can do file open, whichever you prefer, and then go right in there to your resume folder and open it up and so you'll have a blank screen right here. And really, there's nothing more for you to see. It just shows that your folder name is right up there, and what you can do is you can create a new file, and we're going to create a new file weaken Say hello, world just like that to make sure that it works. But what we're going to do is we're going to save this as index dot html So hit command s control s or do file save and save it as index dot html And so it'll appear right here. And so again, files saver, save as or command us or control s. And this is all you need to have right here. And this is where we're going to be doing the bulk of our work. So once you've gotten to this point, we should be all set to move on to actually learning what HTML is. 3. HTML Introduction: So let's get right into the very most important aspect of this class. HTML html stands for hypertext markup language, and you don't necessarily need to know that. But the key is that it's a markup language. Mark up just means that you are actually marking up, uh, the language that you that you put together and so as you, right. Hello. My name is blank, etcetera, etcetera. You can you can wrap things in HTML. And so when I say wrap things in HTML, the most important concept in HTML is tags now tags air pretty much all that HTML is there . There are different things that you could do with tags, but the core of these tags are what HTML is, and I'm going to start teaching you some tags, some of the most important tags. And for now, let's actually go back to our visual studio code, and we're going to put together a very, very basic HTML website. So now that we're back in our visual studio code and you have your editor open, I want to talk a little bit more about those tags that I told you about. An HTML tag is basically anything that has a word in between these brackets where the front of the tag is this And then the back of the tag is this with this little slash everything in between. Everything in between is the content that you want in between these tags. Now word is not an actual tag, but what is an actual tag is P. And so you could do P and slash P and P stands for paragraph. And so everything inside these P tags will be a paragraph. It's a very, very semantic language. Every single tag has a different meaning. And so I'm actually going to delete all of this, and I'm going to create a very core HTML website, and I'd like you to follow along. So what will have you do is do HTML and then slash html. So everything inside of this is going to be an HTML document. And then, inside of that, I'll have you do head and then slash head and below that will have you do body on slash body. And then once you've done that, we're going to do one last one, and it's a special tag. It's Doc types. You do exclamation point doc type html and this one doesn't have a closing tag. And so you might have just had a lot of this thrown at you and some going to explain This is a very special tag doc type because it doesn't have that ending tag with the slash right there. What this does is it tells the Web browser Hey, this is about to be an HTML document. This is about to be a website. Every single website has one of these at the top. It's just something you have to include. Everything inside of HTML is the language that you're writing. And inside of that HTML we have ahead in a body kind of just like a person. Um and it's really a good way to think of it like this, where the head is all this stuff that you don't necessarily see. But it's a good way to make you think. And so if I did title and I'll just say my website right here, this is the Websites title, and I'll explain that a little bit more once we've saved everything and then in the body. This is what we actually see. You see what's in the body. Will you see what's on the body of a person? And so All right. Hello, world. Right here. And so now I'm going to save it again. On Mac, it's command s. And on Windows, it's control s or you could just do file save. And now, once you've have all of this written down, now we're going to actually go to our browser and so see how you have your index that HTML saved in the my resume folder. Why don't you double click on that? And it should open up in your browser of choice and hey, it says, Hello, world. Now I want you to take a look at this for a second, and I'm going to expend it this way in this place that we can have our code side by side with the thing that we're making. So you'll notice this Hello World is what's actually on the Web page. And that's what's in the body again. Everything in the body is going to be what's on the Web page. It's what you see now in the head. That's just the stuff that kind of helps the Web page think, and you might be wondering where this my website is, and it's actually right here in the title. And so anything in the title is going to be the name of the tab. If I wanted to change this to cast City like that and then save it now, when I refresh the page, it'll say Cassidy right here on. So I'm going to change this to Cassidy's resume, and then when I refresh the page, that's the title right there. And so everything we put in the body is going to be something that we actually see on the Web page, and this is where we're actually going to put all of the contents of our resume on our resume website. So that's the basics of tags. And now we're going to be moving on to the next section, where we'll be talking about headings, paragraphs, lists, all kinds of things that you'll need to actually build a resume on the Internet. 4. HTML Headings and Paragraphs: all right. So you know the basic HTML tags and these are great. But if you're going to be making useful websites that you can navigate and style and and make look really good, you're going to need to know a bit more. So I'm going to start teaching you the next most important tags, headings and paragraphs. Let's get started. So right now this hello world, it's pretty normal, but we don't necessarily need toe have. Hello world. Let's just say that we want to have the heading of this website just be like, Welcome to my resume or your name or something like that. I'm going to do your name first. What I'm going to have you do is make a tag, each one So H one and then slash H one. And then inside of there, I'll put Cassidy and then when I hit, save and then refresh the page. Now we have Cassidy in big letters, and it could be your name. I could I could have Cassidy, the Rock Johnson or something and anything that you put inside of these tags. When you refresh the page, it'll show it up, and it will be nice and big. This is called a heading tag H one, and there are several heading tags, as you can imagine, because there's no one there. I'm just going to stick with with Cassidy right there, and I'm gonna actually show you some other tags to Let's just say you wanna have a subtitle and be just like the best Web developer ever. This isn't an H to tag, and if I were to style this and then refresh the page now it has the best Web developer ever, but it's in a slightly smaller font. And as you might notice, if I were to do H three and say Okay, but really like that and then fresh the page, it gets a little bit smaller. And so, as you can imagine, it keeps going. You can do an H four and say, I promise, continue being kind of silly like that. Maybe it's not true Age six, but she's close like that. As you see, it gets smaller and smaller and smaller. These air heading tags. They only go from one through six, and so you only ever need to worry about H one through H six. Typically, you rarely see people use more than H ones through h threes. But you know these air useful tohave. Let's just say you have something like my blawg Then the heading of the website will be my blawg. But then, for every single post, he would have the block post title. So blood post number one blood post number two, etcetera. In between each blood post, you could do something like this. Post number 12 than three. And then if I refresh the page now you have the big title of your website is my blood. But then each post is this smaller text. So those air headings, basically, they make your text big and they semantically tell your website Hey, thes air headings And you might be wondering why I keep mentioning this word semantic. And that just means that these tags have meaning. And, um, really, the most important aspect of this meaning is accessibility. Let's just say someone's navigating to your website and they're using some sort of assistive technologies to read your website with a screen reader or some other technology that's that's going through it. It's important to define when things air headings when things air smaller headings when things air inside the body and for our next tag, when things are paragraphs p my postal, just do that on. Then if I refresh the page P is a paragraph tag. And so if someone is navigating your website and they have, I don't know, just a bunch of different blogged posts like this, they can say, Ah, this is the heading of each block post, and then this is the content of each one because they can see that these air paragraphs and then each of these h twos are the block post titles. And then this h one is the actual title of the blood post. You can actually assign rules to all of these tags, and it makes it really useful for someone who might be navigating your website anyway. That was a bit of a side note. This P tag is very important. P stands for paragraph as you use websites and have a lot of content in them. Ah, lot of content will be inside p tags because you can put as long as paragraphs as you want , and when you save it and refresh the page, your paragraphs can be very long. This this actually isn't that long. But if you wanted Teoh, fill it with a lot of content. You can, um, now one thing to note is inside a paragraph. It's just one line of text. And so if I did my post and then did something like this, this is awesome and then saved it. You are able to necessarily have just line breaks in your paragraphs unless you have a break tag and a break tag is BR, and it's a weird one. Br slash Like this. It's a one of those singular tags, kind of like Doc type. Whenever you want to make a line break in a paragraph, then you do be our and now their these to my posts and this is awesome are on separate lines, and that's really important. If you want to have just one paragraph, that's all part of something. But you wanted to have multiple thoughts within a paragraph of, and you just want tohave light breaks. You do a B R and that that moves whatever content after the BR onto the next line, and you could put Byars wherever you could. Technically put a BR in between this word awesome. And then when I refresh the page, it put a line break in between that word awesome. And so these are some really good tags to know paragraphs, headings and breaks. Also, one more that I wanted to know. There's a very similar tag to be our and it's called H R and H are actually stands for horizontal rule. This tag right here, it's actually technically stands for blank rule, and this one sends for horizontal rule. But it's easier to remember this is a break, and then this is just a horizontal rule. And when I say horizontal rule, I'm actually going to put a couple here and you'll see why, when I save and then refresh the page, it actually puts a line on the site. And so if you wanted to have a line between sections of your resume or in this example, it's a blawg. We have our big heading here, and then in between each post, there's a line breaks that we there's a really clear division between content. So again to review H one through H six thes air, different headings where H one is the biggest one and then H two is the next biggest age three is the next biggest so on and so forth. P stands for paragraph. And so if you have a paragraph it and you have content and you want to put that on there, you would put that inside API tag. If you want to break up content, you can put a BR tag which stands for blank rule or break if you if you want to remember it a little bit easier. Um, and then if you want to put a line between things, you have horizontal rule HR thes two are special tags because they don't necessarily need this ending slash. And, uh, yeah, these are basic content tags. Technically, you could build your entire resume website with these tags and be totally fine. But I would like to teach you a couple more just so that way you can see all that HTML has to offer. And then once we've done all of that, we can actually style these to make these have nice fonts and look really pretty 5. HTML Lists and Links: All right, let's move on to a few other tags that are really essential for you to be able tohave, especially in a resume website. So right now I have This is a block post. I'm going to get rid of a couple of these just because you don't necessarily need them. But the first thing that I want to talk about, the first thing that I want a list is a list. Now, if you would like to make a list on a website, what you do is you make a u l ah, you l stands for a Nordling ist and inside UL tags, You have l I tags, which are called list items. So everything in an L I tag is a list item in the overall U L A Norden list. So if I say I'll just do 12 and three, I'm gonna copy and paste some of these. Really click 12 on three. Then when I save this and refresh the page, we have this a Norden list with bullet points 12 and three. Now, if I wanted to have this be a numbered list where it actually has the numbers 12 and three . There. I turned this from an A nordeste to an ordered list, ol. And so when I change this toe ol and then refresh the page, then we have 12 and three listed there. Now, let's just say you actually wanted to have ah nested list. You wanted to have multiple layers of lists or sub bullet points. You can totally do that. Let's just say in this point Number two you really wanted to emphasize something. You wanted to have multiple bullet points because let's just say I worked on something big , something like that on. Then if I reversed the page, it shows that now, if I wanted to have whatever those something big things were, you could actually put a list inside of a list if you saw inception. This is like list deception on. You could put another ol or another UL in there and then just have more allies, and I could say this was a big thing. I don't know, and we'll just have this sub list right here like that. And then if I refresh the page now, you can see these sub bullet points here, and I could actually turn this into a no Well as well. Like I mentioned, you can have a Wells And you, Els. You can find a list them all over the place. And it would just have this sub list here. And so it takes care of the tabbing for you. I personally use you Els a lot more than o. L's again a new ordered list versus ordered lists. But that's really up to you if you want to have different bullet points or the same bullet points and so you can have again each individual list item and then you can have these sub bullet points like this. And so this is generally how list is structured where it's a UL with allies inside. And then you can have as many layers of these as you wanted. If I again wanted to have some kind of sub list in here and be just like, no, really like that, I could have 1/3 layer like this. It takes care of the bullets for you. It takes care of the tab ings for you, and you could really have a nice layout like this. And so, as you can imagine on a resume as you're explaining different line items on your resume and , uh, what you did in different jobs. Ah, these kinds of lists would be really useful for you. And this looks pretty complex. I'm just going to shorten this really quick so you can have a nice clean look at what this should look like. I'm just going to do one and two, and again, if you want to have multiple layers of lists, you can just put another UL inside of there. But this is, ah, core basic list that you would have on a website. Now, as you're navigating around websites, you tend to click on links. Links are kind of the core of the Internet. You should be able to navigate around different pages, and you can have links anywhere. You could have them inside of lists you could have inside of paragraphs. You could even have them inside of headings. And you. If you want to make a link, you need to have what's called an anchor tag. And because it's the word anchor, it's the letter A. So this letter a means an anchor tag. And let's just say Go to my Twitter or go to Google. Go, go to whatever you want a little, do that or go to skill share. How about that skill share Now if I actually want to make this link work right now, if I do this, nothing happens. It looks like a paragraph, but it isn't because it's an anchor. What I need to do is add what's called an attributes to this tag, and so again we have the name of the tag that's at the Ford in the back. But if I want to add more details to this tag, I can actually put more details just inside of the opening tag. And so, H ref actually means that this is where you're going to be going if you click on this link . And so I'll put http P s colon slash, slash skill share dot com like this. And so right now it's kind of a longer line. I'm actually going to minimize this sidebar there so you can see it better by the way control or command be moves the sidebar away, and I'm just doing that. Seacon read everything. So again, I have skill share inside of this a treff so it's h ref equals and then inside of quotes, the link you want to go to. So if I were to refresh the page now, now you can see it's turned blue and it's an underline. And so I'm gonna open that link in a new tab. And as you can see, it actually goes to scale shirt right there. And so that is how you make links. And so, as you can imagine, you could make a link to go to your Twitter to your linked in to your get hub to your code pen to I don't know your instagram whatever you might want to direct people to you, just put the girl that you want there, and then whatever the text is, you could even be kind of sneaky and be like Go to Twitter. But then it actually goes to skill share. Watch out for that, folks, but this still goes to skill share because it's just the name of the text that leads to this link. And so, anyway, this is. This is generally what an anchor tag is. Now let's just say you have a resume website that's multiple pages long you can do that and I'm gonna open up this side bargain right now. We just have the one index that HTML But what I could do if I right click and then open a new file on Let's just say I have I don't know, portfolio dot html like this. It could be a blank html page. I'm going to select all and then just paste in there and and I'll just say, uh, my portfolio like this just to have something on the page. Um, if I wanted to navigate to another Web page that I've created, what I can do is I can do what's called a relative link. So currently, what this is called is an absolute link. An absolute link is something that just goes directly to some page that is defined. But if you want a relative link something that's relative to the file that you're in, and so right now we have an index dot html. But in the same folder we have this portfolio dot html. It's like a sister link. What you can do is you can direct this link to the portfolio dot html, and the way that you do that is docked slash and then port folio dot html Like this and all turns this to go to Port Folio. And so if I were to refresh the page and it says Go to portfolio and click on it now it says go to But it has my portfolio. It has that H one tag inside this portfolio dot html and I can flush out a whole separate HTML page like that. So this dot this dot slash this just represents the current folder that you're in. And then this is the file that were referencing. Let's just say you have a much bigger website and you have a folder. Let's just say and it's, uh I don't know sites, air pages, pages. Sounds pretty good. I could put portfolio inside of pages like Miss by just dragging it in. Yes, I'd like to move it into pages. And now in this tag, if I were to refresh the page, it wouldn't be found because it's no longer at my resume slash portfolio. This link is no longer correct, and so again dot Slash is the current folder, and we need to go into pages Slash and now that directs it to portfolio inside the Pages folder. And so when I refresh the page and click on that now it's going to my resume slash pages slash portfolio like that. And so that's That's an important thing to know. If you have a multi page website that's kind of up to you if you want Travel Multi Page website. Typically you want to stick toe one page both on a printed resume and also just on a website resume. But it's something to know if you want to have links, and so you could have links to your different profiles or two different pages of your website using the anchor tag. And then this attributes on the anchor tag called H ref on. That's how you do that. So again, you well, an ally of thes and a Nordling ist and then a list item. And then if I wanted to make this a numbered list, I would make it an ordered list and then save that refresh and then you have the one in the two there, and then these air anchor tags, anchor tags let you link to all sorts of different things. Um, I could have this link to again, I'll do, Ah, skill share again. Skill share dot com and then do go to skill share. You can have multiple links. This one is an absolute link, and then this one is a relative link. So the portfolios relative and then this one's absolute, as you noticed. Oh, man, these are on the same line. That's fine. But let's just say we want them on different lines. We could put in r B R tag right there and then Now they're on separate lines. And so if I were to click, go to portfolio, it would go to the portfolio. And then if I were to go to skill share, it would go to skill share. And so that's how you make links. And that's how you make lists on an HTML page. 6. HTML Images: now for this last section, I'd like to talk to you about images. Now. Images are also their own special tag, and they might appear similar to anchor tags, and they also might appear similar to those blank rule tags. Now, to add an image to your website, you're going to have I m G. And then you're going to have this slash and then close the bracket. So this is how it's kind of similar to those BR tags. But next, you need to add an attribute to actually populate that image. If I were to just save this right now and show it, nothing would actually happen. Toe actually populate that image. There's an attribute to it, so makes it similar to that anchor tag, and it's S R C equals and then in quotes. Now this SRC stands for source, and that's the image source right here and again. If I refresh the page, nothing's going to show up. And that's because there's nothing actually in this source. I could put something random in there, and what would actually happen is it would show this little blink broken image icon what you need to do in here is actually put a you Earl. Um and so I actually have this silly little Batman picture that I have the URL for. And what I could do is put that inside of there. And then if I refresh the page now, we have this giant Patman image, and I can do a little br, uh, right in front of it, cause right now it's on the same line. Is that skill share? But if I save that now, it's going to be on the line below skill share. And that's how you do an image if you want it to be absolute. Now it's very similar to having Thea salute Link where you have this link to skill share. If you have a link to an image great. I don't know if you have it hosted somewhere else you could You could put a link to the image right there now, similarly to this relative link. Let's just say you have an image on your computer. I'm gonna do that Command B or controlled be if you're on a PC. You have our file structure here, and let's just say you want an image inside of this folder. What I could do. Let's just sale. Save this image on. Don't steal images from people who know if I need to say that. But just in case, um, if I wanted to save this image and I'm just gonna call this Batman that J peg inside of here now fire to exit out of that and then look inside of our folder structure. Here we have this image. And so what I can do is I can make a relative link to that image and so dot slash for the folder that we're in and then batman dot jpeg. So then if I save it, there's gonna be no difference. Except now the batman dot J peg lives inside of our folder. So if you have images inside of your computer that you want to put in there on, let's just say you have it that you wanted to be on your portfolio page or whatever. That's where you can get your Batman image. And so I did want to talk a little bit more about thes relative links. And so right now, again, because it's in the same folder. We just have the dot, slash Batman and all was well and good. But let's just say I wanted to access that Batman image from the portfolio dot html. If I were to do that, let's me just copy and paste this all the way in portfolio dot html. The problem with this is this. Batman dot jpeg is not in the same folder. The portfolio dot html is in pages, not in that top level. And so if I were to go to portfolio, it would just show a broken image because there's no image Batman Dodge a peg inside of the Pages folder. If I want to go to something outside of my folder, something above pages, what I do is actually dot, dot slash. If there's two dots, that means it goes outside of the folder and so far to refresh the page. Now, Now it's going up one folder, and it's getting the Batman from outside of here. And so as you can imagine, it can start getting a little wacky. But let's just say I have a folder called Image or Images or Assets. However, however you want to say, I actually like images right here, I could put batman dot J peg inside of images like this. You just dragged that like that. Yes, I'd like to move it. And so now we have pages and images thes air to separate folders in this structure. And so now when I refresh the page, Batman is no longer there because it's no longer at this top level. So now I would do dot, dot, slash and the images like this and save it. And now it's going up one folder dot, dot, slash and then into the Images folder with this images slash and then batman dot j Peg. And then here. If I were to go back to the home page, the images broken because Batman is no longer in the current folder, so I would just do images and then batman dot jpeg like this. And so now is the current folder, and then images slash because it's the images directory and then batman dot j peg. And so that's how if you have a much more complex website again, we're just building this for a resume. But as you use these skills elsewhere, as you start adding folders and more and more HTML pages and images, that's how you just put that image in it's own separate folder and use a relative link for that. And so that's images. There's one other attributes that you can add two images that's pretty important. And that's Ault. And so you do all equals and then in quotes. And what you can do here is at a description of the image. And I could just say Batman with the tongue or something like that. Now what's important about this Ault is that it adds a description to the image if the image is broken, or if someone who's using a screen reader and can't see her page they can see a description of the image. And so if I'm looking at this and I'm hard of seeing or I'm unable to see the image, or let's just say that this just is a broken link like this. If I were to refresh the page, it has the broken image and then Batman with the tongue. And so at least I know what the image is supposed to be. Or if I'm just not able to see the image than if I were to save the page and then refresh it if I were to hover my mouse over it. Then eventually my by old settings were really low in my browser. But usually when you hover over an image on a website, then you can see what the Alz tag is would like a little description right there. It's not showing up for me right now. It might show up for you that all text will appear underneath your mouse there. And so alter is really important to include just for accessibility reasons. But really images a funky tag that's a lot like the BR tag where you have the name of it. You have the attributes source, and then you have the other attributes called Ault, and so these are really important ones again. You can put relative links in there or absolute ones. 7. HTML Review: No, this is kind of the end of our HTML section. I did want to touch on one final thing before we actually move on to CSS, and that's comments. Now let's just say you're looking at your website and you do some funky HTML or you're not entirely sure what's going on, but you just want to leave a note for yourself, but you don't want it to actually be on the page. You can add what's called a comment now. A comment in HTML is the open bracket exclamation point dash dash, and then you close the comment with this dash dash on, then ending the carrot. This is a comment like this, and so if I refresh the page, there's no changes here. But you have a comment in here for yourself. And so this is for you as the Web developer. So I can say this will be for navigation, for example, and so all of the links for navigation will go in there and I can leave a note for myself saying, Ah, this, I don't know, should be updated with my new job or something like that, because again, this is a resume again you refresh the page, you don't see it on the page, but it's a little comment or note to yourself on. And so it's really good to just have these just in case. And let's just say you wanted to say, uh, this, uh, this image right here. It was last updated on I don't know, July Force July 4th or something like that. It's good to have these notes for yourself sometimes. And so comments or something that's that's kind of good to know in HTML, not necessary, but it's it's useful. And so, uh, that's pretty much it for the HTML sections. Let's do a quick review, so we have heading tags H one through age six. We have this age to down here. These are just headers for your website, and so it could save my resume. And we know that this is the big, most important thing on the site. Anchor tags are links their anchors toe other pages on the Internet. Whether they're your own pages or someone else's H ref is the attributes that you need on this anchor tag to point to whatever is in these quotes, and so H ref equals and then inside of quotes is the link. Um, we have BR tags, B R stands for blank rule, and that just makes a new line, and you can have them wherever. And so I have one right here and then I also have one. After the links for the image images, we just went over those we have image. And then SRC is the attribute for source and then alter, which is the alternative text in case the image doesn't show up or someone needs it. Um, next again, we talked about comments, comments or just notes to yourself, and they have this open bracket and then exclamation point dash dash. And then you end a comment with Dash Dash Uh, and then that line there and you can have multi line comments. You could say, Well, this is cool and anything in between. Those two tags won't appear on the Web page, so it's it's really useful. Or let's just say you want to, I don't know, take out the list for now. I could put the ending right there, And so now the list is gone. Anything could be inside a tag of And so when. Let's just say something new has been released. You can remove that. And now, suddenly, Hey, the list is back, and it's not inside the comment anymore. Um, speaking of lists, this is an ordered list because it has one and two. There s 00 l for ordered list and then list items. This is just anything inside of a list. And then if you wanted to make a do bullet points, you could do you l for a non ordered list and then refresh the page. Wola, you've got that going. We've got another header down here, and that's a smaller one, age two. And then finally p for paragraph. This is just a paragraph normal text that you want inside of there and then hr horizontal rule. It makes this line. Um, these are the key tags in HTML. Now that you've gotten these, you can pretty much flush out your resume to be whatever you want. What I would do right now, before you actually move on to the CSS basics is actually write out a little bit of a basic resume for you. I'll do the exact same thing I'm gonna do resume for Batman here on going to have a list of things that he's done. I'm gonna have some horizontal rules in between. I'm going to have different sections organized by the different headers. And then once I've done that, we can actually style it and make it look pretty. So why don't you do that with these existing tags and then move on to the next section? 8. CSS Introduction: Now that we've finished talking about HTML, it's time to talk about CSS. CSS stands for cascading style sheets and, honestly, cascading just means everything you do is in order. There's a cascade and a style sheet is, ah, sheet of style. So you're styling your page. You're kind of decorating it. It's like putting makeup on the face of of your HTML, the key aspects of CSS R selectors and properties selectors and properties on. We're going to be getting a lot more into those in the next video, but the first thing that I want to do is actually show you how to put CSS onto your page. So if you open up your HTML resume that you have so far, um, I have Batman's here. So as you can see in the title for the tab, I have Batman's resume. I have Batman's name here as well as his links. I have you know, just patman dot com and the Twitter and everything, and then email um, quick side note. If you ever want to have an H ref to email, you do mail to Colon and then the actual email address there. I didn't talk about that last time. But anyway, I have those going there that I haven't h two with a P tag for the objective and just stuck that in there for Batman's education. I didn't actually know where he went to school or anything, so I kind of made those up. But anyway, had ah list where it's just two allies inside of a U L on We have these headings here and then did a list of experience and then relevant skills. These air all mostly just ul tags and heading tags with some h ours in between. Um, so anyway, I assume your resume looks something like this. And as much as it works, its not necessarily the prettiest thing in the world. And you know, there's a lot of websites out there that just use age to melon. No CSS, and that is totally fine. But we want to add a little bit more personality to our pages, So we're going to add CSS to the page now to actually add CSS to the page. First, we're going to make a CSS file, and so over here, I want you to make a new file and just call it main dot CSS and main dot CSS will just keep it as a blank file for now. But now we're going to connect this main dot CSS to index dot html on the way that you do it is actually inside of the head rather than in the body so below the title. I want you to create a new tag and it's going to be link. So we're going to be linking these files together and very similar to the anchor tags. Will have an eight ref and then in here will do dot slash again cause it's in the same folder main dot c. S s. And so that's how we link the main dot CSS to our index dot html. Then we have to add one more attribute and its rail, and we're calling it a style sheet and then we're going to do ah slash close. And so it's very similar to our image tags where it has the two attributes and then this slash on the closing tag Great here. So link a treff main CSS and then roll style sheet. You just need to stick that right there in the head. Then once you've done that. It won't necessarily look any different because our CSS looks exactly the same. But here's what I'm going to have you do. And why did have you just put in going to have you do body and then to curly braces and then inside of there, I'm going to have you do color red and so color colon the word red semi colon inside of this body and then save that. And then when you refresh the page, wow, all of your texas red Now. Okay, I'm going to explain more about how this actually works later. But make sure that you just have something like that inside of your main dot CSS. This is how you connect it. And now let's actually talk about what's happening here and how to write some CSS of your own 9. CSS Selectors and Properties: I mentioned in the previous video that CSS is all about selectors and properties. Let's actually talk about what that means now. So currently on our HTML page again, everything is pretty much the same. We have this link a trip here now, though, and everything is red over here. And that's because we set the text color to be read. Now when I say selectors, this is a selector. It's selecting the HTML tag body. And so everything inside the body, which is pretty much everything because we put everything inside the body, is going to have the text color red. That being said, let's just say I want just all of the headings. Let's just say all of my h twos toe have the color blue like that blue and then save it. Now if I refresh the page, everything under H two, because that's been selected has the color. Blue properties are just what you assign right here, and so color is just one of many properties that you can actually put in there, and you can get really creative just with color alone. But we don't want to just have color. We want to be able to change the background color. We want to be able to change the font. We want to be able to do all sorts of different things. And honestly, there are so many properties in CSS to go through. I can't actually name them all in one video. There are whole courses out there on platforms everywhere, from from YouTube to skill share to scream but you to meet a Corsair to everything where it's just going over all of the CSS properties. But for you, really, you'll want to pay attention to fonts, two colors and uh, that's about it for her recipe fonts and colors of and making sure that you could do some, you know, nice spacing and everything. And so I've talked about color. Color is just text color, and you can change the text color of anything. Let's just say you want everything inside of a UL tag toe. Have the color green. You can do that and then you save it and then refresh. And now everything in the UL tags has the color green. And so as you can imagine, there are all of these colors. There's also some funky ones, like I could do magenta and then fire to save that. Magenta is a valid color, but not all colors out there work. Typically, instead of actually naming colors, what you'll uses, what's called a hex color. And if you're in design at all, you've probably used hex colors before. Um, hex colors air. Just a combination of you do a hash tag and then some set of characters like I could do 000000 And that's the color black and refresh page that's black. I could do F F 0000 and then save that, and then that will be read of. There are so many combinations. I like FC FC FC when I do that one. That one is a really, really light gray that you can't see because of the white background. But it's nice to have a background color to be that light grey instead of just a straight white um, and so if you want to use hex colors, you don't have to memorize all of these different color codes for all these different things. What you could do is you could look up text color picker, and there's tons of them on the Internet. I'll just pick the 1st 1 And as you click around, let's just say I want my text. You know what? It's Batman. I'll do like a really dark blue. It has this code right here. And so this looks nice. I'm going to just copy this code, and I'm going to say that I want the default text color on here to be that. Now, if I refresh the page off, it's that nice, dark blue. And so just look up an HTML color picker, and then you can kind of pick your colors from there. And, um, again, this is just text color. Let's just say you want the background color to be something. Instead of using the words color, you would use background. A property is always the name of something than this colon, the value of what you want to assigned to that property and then a semi colon. And so if I save this and then refresh the page now we've got that dark moon. It's the background color and, you know, because now the text is going to be black, because that's the default value they're gonna do. Color is white like that and refresh the page. So now we've got white text on this dark blue background, Um, and again you can experiment with it. Background colors is just the word background, and then text color is the word color, and you couldn't you could mess around with that. I also mentioned that fonts are something that you might want to mess with. And now fonts are defined by font family. And then I'll do that Colon and then that in there. And then you can name the font in there Now. Not every computer in the world has the same fonts. There are some that do. For example, Ariel. Ariel is on pretty much every computer out there, and for farm families, it's a funky one. You need to do the name of the font in these quotes comma and then Sand Saref. If it's a San Serif font, meaning it doesn't have the little tails on there. And then when I refresh the page Ah, look at that. It's not times New Roman anymore. Um, and there's all kinds of fonts out there that you could use. But like I mentioned, not everyone in the world has the fonts that are on your computer, and so they're not necessarily going to have the same experience. What I recommend for choosing a font is actually getting what's called a Web font is a font that's hosted on the Internet that you can use. Um, and for that I recommend Google fonts, google dot com slash funds. And there are tons of fonts on Google fonts, and some of them are pretty plain. And then some of them are kind of funky. You can decide what you want there. Let's just say I want a filter and I wanna have some fund that is a display fund. I don't want handwriting or mono space. Maybe I will have a Sarah fund. Um, then kind of just pick and choose what what you want from their, um, And let's just say I want to choose this font right here for my website. I click the plus sign, and then it lets me select this font, and it tells me exactly what I need to do. And so copy this code into the head of your each to Mel document. I'm going to do that. I'm going to copy this and then put it above my CSS. Make sure you put it above your main dot CSS line. And that's because I mentioned that CSS is cascading style sheets. You need the font to be defined first before you actually use the thought. So you put that above your style street there, and then you can actually use this font family CSS in your CSS. And so I'm copying that line now and then I'm gonna put it here instead. So I'm going to save that. And now when I go back to my page and refresh now, I get to use that front. So again, background color and then font family. That's what's important here. Of these are the ones that you're probably going to use the most when you're styling your website and I'll show you a few other ones that aren't just the basic ones in the next video. But I did want to cover that and again these air called selectors. It means that you're selecting a given html tag. And so, for example, if I wanted to select P tags, I could select one more. I could do P and I want the color of pea or How about this? I want the background of fee to be out of no black. Keep it simple and uncreative for now. And so now that I've added this background to pee now just the background right there is black. And in the next video, I'm going to go over just a couple more, slightly more advanced things in terms of selectors and properties, and then we'll be able to move on to actually putting this online. 10. CSS: Classes and Spacing and Borders, oh my!: Now that we've covered the basics of what selectors are and what properties are. I want to talk a little bit more about what you could do with selectors on what you could do with these properties. Now let's just say you're looking at all of this and you're just like, Hey, you know, I'm loving the way this looks except I would like I don't know my education header to be different from all of my other headers, but I don't want to use a different HTML tag. I really like that. It's an H two for the size, but I really want to be able to change the color of it or something like that. What you can do is you can separate this out, and so I mentioned the education better. If I put a class attributes on my H two and then I could name it whatever I want. Um, let's just say education, because again, we're not being super creative right now. What I can do is I can select just this class in my CSS. So anything with the class education or anything with the class special about that has that the values that I give it in CSS. So I have this class special on the H two. Now if I want to select that class, what I do is a dot special like this. And so before, when we're selecting just html tags, we just have the name of it and that's it. And then the curly braces. If I want to select a class, I do dot special. I could have the color be Ah, I don't know, Scion Scion is a color. And then if I refresh the page now, education because it has this special is scion and it doesn't have to just be on an H two. I could add this class anywhere on. So let's just say I want, for example, this ally right here to have the class special, and I also want I don't know, this UL down here to have the class special. Now when I refresh the page, everything that has that special class now is styled with that color sigh in and I could do more things with it. I could say that I want the background color to be, I don't know, dark red. I'm pretty sure that's a color. So it is nice. Now look at that. It's not beautiful people, but I'm showing you what you can do with it. And this kind of is just to show you the power of what actually can be done by selecting more than just HTML tags but also selecting classes. Now, this is not looking that pretty really quick. What I want you to do is pause the video right now and I'm going to make some changes where I'm actually going to choose some pretty colors and some pretty fonts, and then I'll work on some spacing with you. All right, this looks a little bit cooler. So what I did was I added a different hex color for the background, and I made just the text color be white for the whole body tag. And then I made the found family aerial for the whole page. But I added another fund from Google fonts for the H one right here to make it a little bit , I don't know special. And then all of the H twos had that PT two serif that we picked earlier. I added this yellow color that I actually put on a couple of their tags. There's that we would be kind of a significant color on. And then also something that I didn't mention before is you can select multiple tags by just putting a comma in between them. So I did hh three comma A. And so, as a result, I was able to select both the H three and the A tag to make them both yellow right there. And then also for this special class, I decided that special will be something that I want to highlight specifically on this resume. And so when I added that special class to these L I items now, it just has this background on this color attached to it. So that way, people could note that those are particularly special to Batman. And so that's how I made this a little bit cooler it It's really just messing around again with the backgrounds, the colors and the font families, and then adding selectors here and there where you need them. But I would like to talk a tiny bit about some more complex ones. So one thing, for example, is spacing. One thing that you might notice is that there's a lot of spacing after these h three tags right here. And sometimes the spacing is good, for example, after this age to tag. But sometimes you might want a little bit more space in between things. Now, when you want to add space around any sort of text or any sort of element, you add what's either called margins or padding and margins and patting pretty much do the same thing for what we're doing. But really, it adds spacing around a box. And so you might notice that right here with this education, we have this background color in this box right here. If I wanted to add spacing inside of this lighter gray box, then I add padding. But if I wanted to add spacing on the outside of this box, then I would add margins. And so, for example, I talked about this H three right here. How there's a lot of spacing around it. If I wanted to reduce the spacing, what I could do is I could select just H three to H three right here, and I could say margin zero because we don't want any margins around it right now. The browser default has some spacings there. If I refresh the page now, those are all squished in there. So we don't have to worry about that anymore that that spacing is fixed. But let's just say I wanted to have a little bit more spacing after all of the lines in here. Or let's just say I wanted to have I don't know more spacing around this. References available upon request This reference is available upon request. Thing down here is also an H three, and so I've removed all the spacing around it. But what I could do is I could do a class and then I'll say extra spacing about that. And so, after adding that CSS class or that HTML class that will select and CSS to the H three, what I can do is I could do extra spacing and I could add a lot of spacing around it. And so I'll do margin. Oh, I don't know, 50 pixels pixels. It's really pixels on the screen, and it kind of varies from screen to screen. Typically, I'd say 100 pixels is kind of around an inch, generally play around with it, and you can kind of decide and now if I refresh the page now, references available upon request has 50 pixels this way, this way and on the left and right. We don't necessarily want it on the left. And so what you could specifically do is just to margin top 50 pixels like that. And there is the same thing with margin. Bottom margin, left margin. Right now, there's lots of spaces there could do. Margin bottom. Let's just say we want to have a lot of space there. 100 pixels like that. Now if I refresh the page now, we have that space there, and so you can add whatever spacing you want. Let's just say again for these. We want to have a little bit more spacing on the inside of this box toe. Make it go forward a little bit, these air H twos. And so what I'll do is I'll do padding because we wanted to be on the inside of the box. I'll do padding left. I'll say 20 pixels just to add a little bit of bump on the left. Now the text is still inside of that box, but there's a little bit of spacing in there and so you can kind of mess around with it and add whatever spacing you want. Um, sometimes I like to do a little bit of padding around thes boxes. I might just do all of the sides instead of just on the left. Take that out and now there's thes nice blocks of space in there. I actually like the way that looks. I'm gonna keep that, and that kind of makes it so that way. It's a it's a little bit more stylistic and nice. Now you might notice these line heights. These air kind of squished in here, especially if you have really long sentences, because these are just examples. These might be smaller, but for you, because you probably have a more complex resume than Batman here. You might want a little bit more spacing on lines right here that's just called the line height. And so what I can do is select UL and then inside the u L. I want the line height of the text to be, I don't know, let's say 24 pixels just kind of making up a number right now and we'll see how that looks . Ah, look at that there's more spacing in here and there. It's nice, it's it's it's decorative, And, uh, now it looks pretty good. I actually kind of like the way that looks to, um, and so again, the spacing margins is on the outside of kind of the invisible box around everything. And then padding is on the inside of that box, and then you can add pretty much whatever properties you want inside of CSS. Again. There are so many, it's it's hard to describe them all. Ah, one other thing that I wanted to talk about before we actually move on to hosting website is Borders. Now, around every single box. It's actually called the box model. Every single box that is kind of wrapped around HTML, the invisible box or colored. If you have a background color, there is a border, and you can decorate that border. However you want, For example, with our Batman image right here, let's just say I wanted to go down here and I'll do image. I Am G is the tag that we're selecting I could do Border is three pixels because it's going to be three pixels wide. I'll say it's a solid border instead of like a dotted or dashed border. And then I'll do that yellow. Now if I refresh the page now, we have that solid yellow border on the outside of there, which is pretty nice looking, actually, and I could make it as thick or Astana's I want I could do something like 30 pickles and it'll be huge. But it kind of works, especially depending on the colors that you've chosen and the styles that you're going with you can. You can really experiment with this and make it nice, and you can add this border to anything I mentioned. There's other things you could do in there. There's dashed on. Then it would be a dashed border, and you could get pretty decorative with it. And, uh, so borders air kind of a weird property where you have the size of the border, the style of the border, and then the color of the border on the color could be hex. You could just say red. You could say whatever you want right in there. The style is either solid, dotted or dashed. So this is the dotted one and kind of looks fun. I personally stick with solid almost all of the time and then the sizes that size and pixels that we've already seen before. And you can put a border around anything. It doesn't have to just be images. I could say that. I want some border around this paragraph right here. I could go down here and say, I don't know. Border is, uh, three pixels, solid white. Let's just say might look kind of ugly, but it gets the point across a now we have this box around it, and I could also do it with ease. Bigger boxes right here. If I take this out, I could say around my H twos. I want to add a border in here border. I could do two pixels solid, and then I don't know. We'll do that yellow color again. I'm liking that yellow color. Put that in there, save and refresh. And now we have this nice border around there, too. It's It's starting to look pretty good. You notice the's h ours. They're looking less pretty more and more as time goes on, especially because we have thes h twos looking so good we could get rid of the H ours entirely. But we also could style them to into style. In HR, it's just like styling. Anything else? HR right here. And you actually style the border of it. And so you would do. The border is two pixels solid. I'm gonna use that yellow again. Then when I refresh the page Now, this is what that HR looks like, and so you can kind of experiment with it, Decide how you want to style that HR, um, it could be something that you get rid of entirely in your HTML or if you want to stick with it, you can use it. But this is starting to look like a pretty good resume. Borders also don't have to just be a square. You could make them round two and two style that Let's go back down to our image. You add a border radius, border radius, and with this one, it takes in just one value. But it could be anything. And so I could say 10 pixels, and that just means it will have a radius of 10 pixels and it's slightly round there. But it could also take in a percentage. And so if I did 50%. That's 50% of the with of the image, so that will make it a circle and you could do 1/4 of that. So it's just a really, really rounded one. Words 25 then when I do that, then it's just a rounded border there. But that allows you to kind of do some nice little things. I often see people do circular images like this, and then they might do tiny little things like that. If I wanted to do the border radius here, I'll do Border Radius and then just, I don't know, five pixels. They're making these numbers up just to show these concepts, but now it's just slightly rounded. It looks pretty good. And, you know, I've decided I don't really like the h ours in between these I think they're not necessarily needed anymore. So I'm gonna take those out just because our design is evolving, we don't necessarily need them. Notice how I added a little comment. Should I study more? Yes, Bruce. Okay. Now, if I refresh the page there and you know, I think this resume is looking pretty good. I am happy with it. I hope you're happy with yours, too. If you want to experiment more with CSS Properties, you could look up CSS properties on any search engine and it'll show up earlier. I pulled up this W three schools dot com, and it has all of the properties listed on here. And so you can really just go through an experiment and add all sorts of fun things to your CSS properties at different images and icons and things if you want and really just experiment again and mess with this. But the ones that I've talked to you are the ones that are more necessary to know for your specific resumes, and it allows you to have something that looks pretty good without too much work. Luckily, this isn't a ton of code. This is 50 lines of code exactly of CSS, and we have something that's pretty good looking here, and if you want to experiment more, you can add as much margins and patting as you want. You can add borders wherever you want colors, different fonts. You can have as many phones on the pages you want. As you can see, I have three going so far and you could. You could mess with that, too. And I do recommend looking at W three schools for more properties that you might not necessarily know how to use but you want to mess with. For example, I don't know with text, you could choose how you want to space out some of your text, or if you want to align your text center or if you just wanna have it. So when you hover over something, it changes colors. There's so many options here, but I'm going to stick with this for now for this course, because I don't want to overwhelm you too much. And there's also plenty, of course, is out there. If you want to learn all of the nitty gritty properties of CSS, let's move on to the next video, where we're going to be hosting your resume online. 11. Hosting your Resume Website: Oh, my goodness, we are almost done. Now it's time to put our website online. And when you want to put something online, what you uses what's called a Web host and there's tons of Web hosts out there, there's there. So many. And chances are if you are a university student, you actually have a free Web host to that. Your school provides. That's, uh, very little known tip. A lot of schools provide a free Web host, but let's just say you aren't in school anymore and you're not sure which host to pick. I'm going to show you a few that I really like that are either free or super low cost that I've used before. So now I'm going to go over to my browser and our website is here. We've seen it before. Nothing new is happening here, So what I'm going to do is I'm going to open up our finder, and if you're on Windows again, Windows Explorer and you could look at all of our files here in our index, our main CSS, and then we have those pages and images. There were not really using the portfolio inside of that pages folder anymore, but I'll show you how to do it anyway. Now the first host that I really like and I do recommend is at code pen dot io code pen dot io Code pen is a great site where you can just experiment with HTML, CSS and JavaScript. And there's all kinds of cool things that people have made on there. I've made quite a few things on code, Ben, and it's great for learning more advanced age. Turn on CSS. But to actually host our existing website, what we'll do is we'll go to projects right here and then for the projects. What you could do is with this new project is you can drag and drop your files here to upload them. And so I'm just going to select all of these and just drop them right into this editor here . No, we don't Wait. Let them upload. And now our website exists on code pen. It is that easy. Now, if you want to actually see your website in action, you would change the view and you would click up live you and then your website will look just like it did right here and there are ways to add your own custom like let's just say you had in this case batman dot com or whatever that can direct right here to this website . And there are instructions on the code pen blogged for actually pointing a domain to it on the domain is just that you are l batman dot com or whatever. Whatever your your domain is that you've purchased. Now, let's just say you don't want to use code, Ben. You want to use something else. Another great one is glitch glitch dot com glitch dot com is an awesome website just for making websites. And there's all kinds of cool projects and there are lots of people learn together. There's there's all kinds of great experiments that you can mess with its. It's a really cool place, um, and you can create an account on there, or you could just work anonymously. Now, if you want to make a new project, you have to start from one of the templates or clone from a get repo. I'm going to assume you don't know, get at this point that's, ah, the whole separate topic for another course, but what you could do is you can have this brand new Web page, and as it loads, it has this'll read me in there, and it has all of these files already made for you. So let's just say you don't remember doc type and you don't want to mess with putting together this whole template. It will do it for you, and it's great. But we already have done this so we can delete this weaken, delete this script because we're not using it. We can delete this style that CSS and it has all of these things that we just don't need. But similar to code pen, we can take these files, drag them in, and then Walla we've got our index dot html and our main CSS now for the images. It didn't actually load the folder itself. So what we could do is we can either create a new folder in here or we could just drag her image in here. And so now it's in the Assets folder when it's on glitch. And so because it's in the Assets folder now, we again have this image in here. We need to change. Our images here will change this to s sets right there. Now, if we want to actually see our website exist now that we've fixed our girl and everything, we just go here we click live app, and then this is the earl of our Web page. And so this could be the Earl of your project of your resume website. Um, and it's all done for you. And if you want to buy your own domain to point to it, you can do that too. Now, the last host that I really like is nettle. If i net lif i dot com Nullify is great for sites like this, and what you can do is you can click this get started for free once you've gone to nettle. If i dot com and I've already signed up, actually, so I'm just gonna sign in with my get hub And I don't have any websites on their But what we can do is we can drag and drop our site folder. And so I'm going to go up one level and get this my resume. And I'm going to drag this in right here and then slowly but surely, Allah, we have it. And when I click on this. It loads and it's online and that is it. And right now it's just this pensive Galileo, whatever whatever dot net lif i dot com. But you can change that and add your own domain name and everything to that, too. And that's it. It's It's super easy. All of these hosts are really great for just having a free way of putting your website online. And chances are, if you buy a domain name again if you have some way of getting, I don't know your name dot com or dot io or something. Ah, lot of those domain purchasing sites have hosting available to that you can add on, so you don't need to worry about any of these. But again, these are the ones that I definitely recommend, and that's about it. That's for hosting your resume. 12. Conclusion: Oh, yeah, she did it. You made your own resume website from the ground up and you put it online, and now the world can see it. This is a huge accomplishment for a lot of people. And I really hope that you're proud of yourself. If you ever have any more questions about html CSS something that might be going wrong on your website, feel free to send me a message. Whether it's somewhere here on skill share on Twitter. Wherever you could find me at Kasa, do see a S s idea and that's where you can find me and just ask me whatever you might need about your resume website. I'm really proud of you. I really am appreciative of you joining in on this course and feel free to share your projects here in the course. I would love to see what you make and would be happy to give any critiques that you might need. And once again, thank you so much for being a part of This is really fun to put together. And I hope you had fun taking it too.