Make a Digital Business Card with HTML and CSS

1. Course Introduction: Hey there, you may have noticed technology is growing faster and faster in pretty much every industry out there, and Web technology is no exception. Learning HTML and CSS are great skills toe have not only for your career, but also just for personal growth. I'm Nathan Blair. I'm a Web developer, and I learned HTML and CSS from tutorials like this one. I can tell you from personal experience that you can do it too. All it takes is a few fun projects, lots of practice and a little guidance to get you started. And this course will be learning by doing. We're gonna create a simple HTML and CSS design that can be used as your digital business card. We'll start by talking about how to set up a website project on your computer. Then we're gonna dive right into some design with CSS styling. I'll leave you with a few of my personal tips as well as some things you might want to check out after the course. By the end of the course, you'll have a publicly accessible page and some code you can show off to anyone. This course is for you. If you've got some basic computer skills, maybe even design skills. But you're really interested in learning how to build your own website or how to make simple changes to an existing site. You'll need to have a basic understanding of how to navigate your computer. You'll also need a code editor of some sort. Now I prefer to use Adam, but many people love sublime text or visual studio that's really up to your preference. I've posted some links to each of these in the project description, so you can go check those out. Lastly, be sure to have a good head shot photo to display on your page. Or, if you prefer, you can use a logo or really any image. It's your call. So are you ready to add some HTML and CSS skills to your arsenal? If so, let's start coating 2. HTML Document and Syntax: away, right, ready to get started. Let's learn a little bit about HTML first. What HTML stands for is hypertext markup language, and you can read up on a lot of history that went into H two mil. But basically it is the building block of the Web as we know it. If you look at any Web page today and you view that source by right clicking, you can see the HTML that goes into the background. I don't know if you can see on this screen size, but HTML is there. You've got some basic HTML tags, and then you've got a whole lot of mumbo jumbo on. This site will ignore that for now, but everything on the Web is in some way shape or form HTML. So to get started on this project first we need to make sure we have our environment set up correctly. So let's go ahead and open a new finder window. And you know, what I like to do is if you go to your home folder a lot of times, you'll see Sites folder. If you don't have one yet, you can create one, so go ahead and open that up and we're gonna create a folder for our project. I recommend creating a project folder to keep all your project files in. So it's just a little more organized and easier to manage when working with websites. This is also commonly known as the website route the site route. Let's give it a simple name. I'm just gonna go with tutorial and one more step. I'm just gonna make it easy on myself and add this to my favorites. Now let's move on to the next step, which is creating our document. So for this step, you're gonna need some type of code editor like I mentioned, you can choose whichever software appeals to you most. Let's go ahead and open up our code editor and create a new file. I'm gonna go ahead and save this in my new tutorial folder. This is where saving the folder and favorites comes in handy Now. The standard for HT mill documents is that your home page is gonna be called index and then the extension of the file is dot html Good and click. Save Now. Very first, tang we need is a tag that tells the browser what type of document. This is so we're gonna type doc type and immediately with a code editor, you're going to see that it suggests tags for you. It's smart and knows what you're typing, and you can either click on this or hit tab. All right, so the next very basic tag is an html Tech. And this tells the browser that this is where we're starting our HTML and with every tag from this point on, we need an open and a closed tag. So this one is opening our tag. The next one, using a slash, closes it. So now we've got open HTML and close a she male. All HTML tags follow this basic principle, typically within an HTML tag. You've got a head and a body within the head. That's where all the meta information goes about your Web page, things like your page title, and you can see it auto filled home. But let's give it a different title. Let's say our name. So I'm gonna type Nathan Blair. Here we go and not within body. That's where all your custom HTML goes. That's where you're gonna build the site that you're going to see on the screen. Now, before we jump ahead to that, let's take a look at some other meta tags that you can add to the head. What I like to do is keep notes on these things because I don't necessarily remember all the different meta tags. And in fact, there's one thing we missed. We could also add the language to our HTML tag. Let's go ahead and put that in there. So this just tells the browser, Hey, look, this document is gonna be in English, all right, let's look at a couple other meta tags here. You see the tag meta probably 90% of the time you're going to be using the UTF aid character said. So I would just recommend sticking with this. And the next meta tag we're gonna add is for responsive design. We'll get into this a little bit later, but this basically just ensures that your Web page scales correctly when it's viewed on an iPhone or an iPad or a large screen. Let's added something to the body to just for fun. All right, save it. And hey, let's take a look at what we've got. So how do you view an HTML document from your computer. Well, it's pretty easy. Let's go to the document and just drag it into your browser. And hey, look at that. There's our hello world. If you look in the title, you'll see your title text and you've got a basic HTML document. So that covers the basic HTML syntax. Let's add some elements in our next video. 3. Basic Elements: Headings and Paragraphs: All right, So we've got our beautiful hello world text and a big blank empty page. Let's fill it up a little bit with some basic text elements. So back in our code editor, let's had a title. This is one of the basic tags that every browser recognizes. Go ahead and type H one into your body and close it out, too. And in the middle of this tag, we're gonna type are title. I'm gonna use my name for that. Let's save this and check it out. Refresh the page. And hey, look at that. We have a little bit of styling. It comes right out of the box because every browser knows what an H one tag is. And there are other heading tags as well. If you hit H two, you've got age two tags H three h four. The list goes all the way down to six, and each one comes with its own sizing. So, as you can see, as the number gets higher, the title gets smaller and the styling of these headings can be changed with CSS, which is what we're going to get into later in this lesson. Now we don't need all these headings, but let's keep H two. And in our H two, this is going to be our subheading. And I think this is a good place to put either your job position or some others subheading that you would want on your business card. So I'm just gonna put Web developer. Save it and let's check it out. Great. Okay, let's take a look at another tag. It's the P tag, which is short for paragraph. And let's just check out what that looks like. And a lot of editors You can just type Boram and it will give you Laura made some text. How you see, this is a long string here, but it's great for sampling things. Uh, As you can see, the styling of a paragraph tag is much simpler. It's meant for as you guested paragraphs. Now, in our case, we don't need a whole paragraph of text on our business card. I mean, I guess you're certainly welcome to do that, but I think this is an appropriate place to put our email address. All right, save it. Let's take a look. All right. Great. Now this doesn't look like much yet But I promise you it's all going to come together. We just have to take this one step at a time. As we learn. One thing to keep in mind when designing a Web page is semantics. What does that mean? Well, browsers and other devices that read your Web page are going to expect certain things from different tags on your page. For instance, within a heading tag, it's expected that that will be a header of some sort. Same with an H two in a paragraph. Some devices, such as Green readers, will use thes semantics to navigate a website. So it's important to keep in mind what content you're putting into these different HTML tax . In our next lesson, let's go over mawr html tags that you have available and will create a list with 4. Tables and Lists: way. So we've learned about basic text elements. But what are some other ways to structure our texture Information on the Web? Well, one example is a table. We're not gonna use a table in this particular project, so don't feel like you have to type any of this out. But it's one of the basic HTML elements that you should know about, so I'd like to review it real quick. So within a table you have a few standard sections. You have a T head, a T body. And if you want a T foot now, within these sections, there's always a TR, which stands for a table row and within that T d and the TV is each individual cell. Let's mock up a quick HTML table so you can get a feel for how they work. Let's just make some basic headers and the body were gonna do the same thing and then the same thing in the T footer. And just to save time, I'm gonna copy from here and paste it in. But let's make some different strings. All right, let's see how that looks. Alright, Great. So we have food. Barbat inthe e table header. We've got 123 and our first row and then ABC in the footer. Now, if we had a more complex table or an actual table, we would likely see more than one row. So it looks something like this, and each one might have its own values so the table can get longer and longer. You can add more columns who you like. There's a lot more you can do with HTML tables. I won't go into everything here in this tutorial, but just know that tables are a great resource for when you're building your website. Here's something that we will use in our project. There's something else you can use to display structured information, and that is a list. There are two types of lists. In HTML. There's an ordered list, which is the ol tag, and there's also the A Norden List ul and each one of these. There is another nested tag for each item. It's a list item element, or L I. Let's see what the difference is between these two types of lists. We're gonna add some items to each one, and let's see, huh? So as you can see, an ordered list is ordered and as numbers while on a nor did list is just bullet points. I tend to use the A Norden list a lot, but there are certainly applications for an ordered list as well. For this project, we're going to use the A Nordeste. This list will give us a good format for listing out all the different profiles that we want to link to from our web page as a placeholder. I'm just gonna put the name of each website I want to link to one of my favorite coding websites, as you saw before, was get hub. So I'm gonna add that in here. I'll also put lengthen and Twitter. All right, let's say that and see how it looks. All right, there we go. Now, as we move forward with this tutorial will add links to these items. But for now, we're off to a good start. You know what? In fact, I think that's a good topic for next video. Let's go ahead and add some length to our items. Old 5. Links and Images: Now that we've got our list items, we need to add some links. So let's go ahead and clean this up a little bit. First, I like Teoh. Keep everything on separate lines just to make it a little more readable for myself wrapping around this Get hub text. I'm gonna add a link tag. A link is actually called in anchor tag, which is just a so open anchor Close anchor in the middle is get hub. Now we need to add the u. R l hear the way we do that is using an attribute we're gonna use specifically the H ref attributes Many elements in H e mail have attributes, and they're just bits of information that you can add to the elements to make them behave a certain way or change different aspects about them. This attributes in particular, adds a your l for your link. So in this case, I'm gonna add my u R l to my get hub profile. It's best practice to include the https in the front so that the browser doesn't get confused about whether this website is part of your server or if it's going somewhere else . All right, So now that have added my link. Let's give it a try. Go ahead and refresh the page and check it out. We've got a link. Now let's see if it works. There it is my get hub profile. But as you can see, it opened it up in the same browser window. And you don't necessarily want all your traffic to go away from your site as soon as someone goes to one of your other pages. So let's go back and let's change that a bit. There's another attribute that could be used on an anchor tag called Target. And no, that's not referencing the popular shopping center that's actually telling the browser which window to use. So we're gonna say blank. And that basically means we want this to open up in a new tab. Let's save that and try it out. Refresh the page and click our link. There we go. You've got a new tap. Let's do the same thing for other links. I'm just gonna copy and paste to make this a little easier, and we're gonna replace these with different you URLs. And now let's change the text within the anchor tags. All right. Let's see what that looks like. Great test. The links have not long been, but it works. All right, Great. So now we've got three links. Let's step it up a notch and really do something fancy. We're gonna add an image to this page. This is another element that uses attributes. Let's take a look. Let's add our image up at the top of our document. The image tag. It's just I m G. And typically we use two attributes with this tag. Let's first talk a little bit about the old attributes. Old is alternate text. The reason. We need alternate text. Foreign images? Well, some people on the Web can't see images. They're blind. So screen readers can read this alternate text and understand what image is on the screen. So it's great to add some nice descriptive texts within your own attributes. Let's leave it blank until we know what image we're adding. Now, this is where you're gonna need an image or a logo to put on your business card. I've got one set up already my standard profile image that I add everywhere on the Web, and you're gonna put it right inside your tutorial folder where your Web root is going to be. Let's go back to our code. So since we know that it's on our Web root, we could even see it here in our project. We can just type the file name here. Let's save it and take a look. Oh, hey, check it out. That's me. So we've got our image set up. Now let's add some old text. Nathan Blair's smiling face. If you refresh, you'll see Nothing's changed, but a screen reader will be able to read that text, and any blind visitors to your website will know what's going on. This is great. So we've got some images. We've got some styled text. We've got some links. Let's keep moving forward and add a little bit of structure to this page. 6. Block Elements and Semantic HTML: all right, so we're adding content to this page. It's looking great, but it would be good to section off the content just so we'll have an easier time styling, but also for semantics. We had mentioned semantics before. Let's look a little bit more in depth about how you can improve your semantics on your website. If you take a look at the Indian Web docks, that's very common Web documentation made by in Mozilla. They go into a lot of great detail about all the different semantic tags that you can use on the Web and what they're used for. I won't go into all of these, but as you can see, there are so many. They talk about content sectioning, using a sides and footers and headers. They've got text content. The list goes on and on. Feel free to browse this. Take a look at all the different Web components and all the things you can use on your website. But let's just review a basic Web page layout that you might see on the Internet today. Typically, on a website, page has a header, and within that, usually there's a knave bar at the top well, there are semantic elements that you can use such has header and nap. Below that, there's usually the main section of the website, and within that there's typically a main article like texts or a block post. And there's maybe a sidebar, which could be an aside and then below everything. There's usually a footer. All of these items are actual HTML tags that you can use to section off your website and make it more semantic. So let's take a look at some of the elements that we can use to section off our page, even though it's going to be a very, very simple page. We can't use a lot of them, but there are a couple we can take a look at. So back in our code, let's start off by just wrapping everything in what's called a block element. And the way we create one is using the DIV Tech. A DIV tag is basically just a block on the page. It's very useful for styling, moving things around, positioning them in the place you want them on the page. Now, in a lot of code editors, you'll notice a class attributes appears this will be used later with our CSS instead of class. Let's change this to I d. Just like that and I d attributes is again used mostly for CSS, sometimes JavaScript, which is far more advanced than we need to go into. But it's essentially a way to identify a specific element on the page, and they're always unique. So you never want ideas that are the same on different elements on the page. They always should be unique. In this case, this is our site rapper. There's only one of them on the page, So let's name it that I sometimes like to do this to just keep track of what the elements are being used for. Now let's add all of our content into that block. And let's take a look at what happens when we do that absolutely nothing as because a DIV tag doesn't have any inherent styling. For the most part, you won't notice any difference, adding this, but it will give us a better structure for when we go into styling later. Let's go back to our code and at a few more elements now would be great to tell the browser what is our main content. What should we be focusing on? Well, basically, the entire car. It is our main element, so let's just wrap it in that great. So now we've got a main element with all of our content, and it's within a site. Rapper If you go back to your page again and refresh. Still, nothing happened again. Main is sort of like a block element. It doesn't have any initial styling, but it's great for structure. Let's add another I D to this main tag. We'll call it card. And you know what? Let's section off our content a little bit. Let's create a couple more DIV tags. Let's create one for our image and the other for text. And this time, let's use the class attribute to name them. We'll name it image, block and text block if you save it and look still no change. I know it may seem like you're doing nothing right now, but I promise you it will come in handy in our next steps. In the next lesson, we're gonna do some fun stuff. We're gonna get into CSS styling 7. Getting Started with CSS: All right, so if you've been following along so far, we've got a great little HTML document here, but it's a little bit boring. Well, in this next step, this is where things get a little more interesting because we are going to apply some styling with a thing called C. S S. And what CSS stands for is cascading style sheets. It's a form of markup that browsers used to apply styles to websites, and it uses a cascading pattern, meaning that styles at the top of the sheet are going to be overridden by competing styles at the bottom of the sheet. Let's go ahead and take a look at some of the different ways you can add CSS to your document. Now. One way you could do this is just by adding an in line style directly to one of your elements, and this is generally not recommended by today's standards. But just for the sake of demonstration, let's simply add a style to our paragraph element. So the way we do this is by typing style equals, and then within the quotes, we are going to put our styles, so I'm just going to start with a very simple style. That's color. Let's save it and take a look at what that does. All right, so you can see it's that simple. We've got red text on our paragraph. Pretty cool, right? Well, this can lead to problems down the road when say, you're developing a larger site and you've got these in line styles mixed into your code everywhere. How do you manage all that? Well, instead of using in line styles, you could also put styles up in your head. Let's do that real quick and how you do that. It's just by typing style and you see it already adds, in some stuff here, we're just gonna leave it like that. Now, up here, you are going to need to use what's called a selector to determine which elements you want to apply your styles, too. So let's review some of the basic selectors we have element selectors, and that just matches the element name that you're applying styles to. So I'll use the paragraph element, so that's going to be targeting our paragraph, right? We also have class selectors and the way we use those as we just use the period character or dot and in type or class name. So let's target the text block. We're gonna target the class of textbook. And finally, let's add an I D selector. And the way we do that is using the hash tag or number symbol. So will target card. So that's going to be targeting the idea of card here. No notice the syntax here for each selector. We always need to include an open and closing curly bracket, and inside those brackets, that's where we're going to put all of our styles. So let's go ahead and add some styles to these for the paragraph. Let's just change the you text color again. So and for the text block, let's add something different. Maybe had some blue text for the entire text block, so this means the paragraph will get read text. Any other text should get blue. And for the card, let's do something different. Maybe a background color, and we'll keep it simple and say gray. Now notice this syntax to add styles. All you have to do is add the property, the style property, a colon and then the value of that property. And you know there are tons of style properties out there will cover a lot of them for this tutorial, but there will be a lot more. So definitely check out that documentation and just play around with all the different things you could do with your CSS. All right, so we've got our styles applied. Let's see what that looks like. Go ahead and refresh. There we go. It's all there. That wasn't too bad, right? We have our gray background blue text, but then a read paragraph. Now, this method of adding CSS still isn't exactly ideal. I mean, what if you have multiple pages on your website and they all use the same styles? This is where external style sheets will come in handy, And that's actually generally the best practice by today's standards. So let me show you how to set that up. We're gonna create a new file and go ahead and save it as style dot CSS. All right. You just copy all the styles we already have here, and we can get rid of this extra stuff and we can paste it all into our style dot CSS. Now, before we go back to our page, we also have to link it up to our HTML document. Right? So the advantage of this external style sheet is you can just link it to every HTML document you have. So if you have multiple pages, you can use the same style sheet for every single page. So the way we do that is by using the link tag you hit tab, you'll likely see style sheet filled in for you. And you don't actually have a CSS master file. That's just, I guess, a placeholder for your actual file. So what we'll do is we'll add style dot CSS and let's see how it looks. Refresh. All right. So, as you can see, we've got all our styles still there, So that means our external style sheet is working. Now let's add some of the styles that we actually need for this project. So we're gonna go ahead and just get rid of a lot of this stuff here. But we're gonna keep the text block selector now for text color for, like, paragraphs and stuff. I like to use a color that is not quite black, kind of like a dark gray, and you can get that sort of finite control and your colors. If you use something called a hex value. And if you're unfamiliar with hex values or hex colors, I would just recommend doing a Google search for hex color picker. And actually, in the Google search results itself, it will come up with a color picker that you can use, and you can pick out your favorite color. I've got one pre selected here just to save some time, so I'm gonna paste that in here. And that's what your hex value is gonna look like. So let's go ahead and refresh and see what we get. All right, so it's such a subtle change. You can't really tell if this is a dark grey or black, so I want to introduce you to a great tool that you can use in every browser out there. It's called the Inspector Tool or sometimes is called the Developer console. But basically you can just select anything on your page by right clicking and click on Inspect, and you'll see this tool pop up where you can see all of your HTML. You can hover over it and see what you're looking at and when you click on an element here . You can see all the CSS styling that you've applied to that element, and we can see that we've got our color here, and it's actually because it's being inherited from a parent, right? So is because CSS is passed down to the Children of each block. So if we apply some styles to our main tag or card, then it's going to be passed down to his Children as well. And I want to show you one more thing you can do with this tool. You can actually preview changes to your CSS. So say I wanted to see what it looks like with red text. See, the changes are made instantly. You could also add new styles. So say I wanted to add a background color. There you go and just know that this isn't actually making changes to your files. It's not saving anything. If you refresh the page, it just resets. So this is just previewing things. All right, let's add something else. Tore a page, maybe, ah, background color in our style dot CSS. Let's target the body. So we're gonna use the element selector for that, and that's going to be selecting our body tag. So let's add a background color. And I've got another hex values pre selected here. So I'm gonna paste that in and let's see what it looks like. There we go. All right, so we've got our CSS working with our HTML in the next lesson. I want to show you some ways you can organize your website project a little bit better, and also maybe we can add some texture to the background of our card old. 8. Background Images and Relative Links: away, right? So we talked a little bit about background colors. But, you know, you can also add background images. So I want to recommend a great website for that. You know, I can never remember the girl because it's a little bit complicated. But if you Google search subtle patterns, it's the first result here. So this is a great resource because they have an excellent selection of subtle backgrounds for your website. But you can preview them and you can search for something you're looking for, like maybe paper and you can find all sorts of paper textures. Let's look for something extremely subtle That reminds me of sort of like, ah, business card stock. Uh, let's see here. I like this groove paper. Yeah, looks pretty good. So all I have to do download it, you're gonna download a ZIP file, go and open that up, and we're gonna use the smaller version. So we're gonna copy that into our project. And here we go. We've got our assets. Let's go ahead and use that as a background. So let's go back to our code. And let's see, I would like that to only apply to the card itself. I'm gonna target this selector card. I just use the number sign to target and I d. And the idea is card. We're gonna apply a background image and the girl will simply be groove paper. Got Ping now, one thing to keep in mind For every CSS style that you write, you always want to include that semi colon at the end. Let's save this and we don't need this anymore and we're gonna refresh. All right, there's our pattern. It's very subtle, but it's there. You can see it now. You know, we don't have very many files here, but this could get a little unwieldy. It would be nice to have a little more structure to our project because as we add more assets say we have a larger website that we're working on. We're gonna want a group things into different folders, right? Well, of course, we could just create some new folders, maybe one for images. Those in there maybe 14 CSS that in there, that's nice and organized. But what happens now? Toe all of our links, everything becomes broken. So why did it break? Well, because we're telling the browser groove paper dot ping is located directly in our project route, but that's not the case anymore. Now it's an images. Same with our main image were saying profile that JPEG is located in our project route, but not the case anymore. How do we get around this? Well, we have to provide the path, and what we used in Web development typically is a relative path. So instead of typing out the entire website and then the path, we don't need to do that. If it's all on the same server, you could just use the path that's relative to the file you're working with. So in this case are file is on the route and we want to access an image that's in the images folder. So we type images slash profile J pick. Let's take a look, uh, are images back? What about our style sheet? If we did the same thing and refresh, we're not seeing anything. Well, for one, we need to change the path to the style sheet itself. So right now we're not getting any CSS styles. Let's do that first back in our HTML, let's change the path to CSS slash style that CSS because we're here. We want to access file inside. CSS Refresh. Okay, there are styles back, but we still don't have the background. Why is that? Well, because style dot CSS is not in the site route. It's within the CSS directory. So what we need to do actually is step out of that directory and then into the images directory to get to our groove paper ping. There's a syntax for that, and it's basically just two dots and a slash. That's telling us. All right, go backwards one directory and then access the images directory. And that's where you'll find the image. Let's save and give it a refresh. Ah, there we go. It's working again. Great. In our next lesson, let's talk a little more about find properties and styling Some of these links 9. Typography: so far in this project, we've just used the default font for the browser, which is typically a Serra font. And it's not ideal for every project, right? So let's take a look at some of the property to you can use to start a your fund. What I like to do is set a base font on the body property so that that font is inherited by all its Children. I'll show you what I mean by that. So let's use the font property. And first we're gonna set a baseball on of 16 pixels. 16 pixels is, ah, pretty much a Web standards. So I like to stick with now. We'll add a 16 pixel font size at a slash and then line height after that, which we're gonna make one. And that's just saying that we don't want each line of text to take up more space than the characters actually are. So, you know, a line height of one character, right? Okay, so next we're gonna keep it very simple, and we're just going to specify all right, we want Ariel fund if it's available. If not, then San Serif. Okay? And you can see that immediately all the fonts on the page changed. How did that happen? Well, it's because with CSS, if you had a style to a parent element, all its Children will also inherit those styles. So if you inspect this main element, you'll see the same font styles are inherited from the body. Now let's go down to say our headings. Now What if we wanted smaller headings? Well, let's take a look at what it's using now. Well, it's using a different unit of measurement called to M. M units are basically a way to take the font of the parent element and multiply it by a certain number. So in this case, it's saying, OK, take the base font of 16 pixels, multiply it by two. So let's go over to our code and let's wrap these headings in a block element. We're gonna give it a class of header and move these elements inside all right and back to our CSS. Let's go ahead and at our base fund styles in. I like to copy them straight from the browser, paste it in here, and now we're gonna add our new font. So for headings, for header three and we're gonna give it a font size of 0.8 a. M. Let's take a look at that. All right, so it's slightly smaller, But the Texas actually within the H one element in the H two element, which have their own font sizes applied, this can often get pretty confusing to people. I mean, what if the text block had its own, uh, font size of three m and then Oh, my gosh, how do you calculate all this? Right, so it can get a little tricky. But there is another unit of measurement that could solve that problem for you. And that is realm. If you just add an r in front, were back to normal, right? So well, almost so Bram will say. Okay, I don't care about the parent. I just want to be relative to the base fought, so it's gonna look at the font size of the body element. So this is truly saying 0.8 times 16. Let's go ahead and change our code to use rim. Refresh the page and we're still good. Now, what about these links? They're a different color than the rest of the fun. Well, links are changed a little bit differently. They're interactive, so they have a few more properties that you can work with. So let's check that out. If you inspect one of your links, you'll see in the inspector that we have this little colon H o b. If you click on that, you have a bunch of different elements states that you can work with. What this means is say, you're hovering your mouse over a link or say one of them active or say you tab to one. You see how it's different there, while each one is a different state that this element can be in. So let's had some hover states to her coat. And first of all, let's specify a specific color for our links. I've gone ahead and picked out a color myself, so we'll put that in their color. All right, And let's refresh. Okay, so that's a little better. Now let's go back and let's add a hover state right again. I've got a slightly different color for a while. We're hovering over pretty fresh, and now it hovers. Great. Now you may be thinking, I don't want thes underlines, So if you don't want any underlines under your links, you can remove it by saying text decoration. No, let's add that style to our code as well. Alright, anchor tag. Save it. Refresh. There we go. In the next video, I'm gonna show you a couple libraries that I really like to put in some nice icons and also style up the fun even more with Google fonts. 10. Libraries: while aerial fund is nice, it would be good to specify your own fun, especially if you want this to look a little more professional. Well, there are a few free libraries out there, and one of them is Google fonts. Let's take a look at it. So if you go to fonts dot google dot com, you'll see all their different fonts that you can use on your website. I encourage you to look through and find your favorites. I've got one that I kind of like, So I'm gonna type in p. T. Stands. There we go. And we're gonna add that to our selection. Once you're done selecting everything you want on your website, open this up. As you can see, they have some pretty good, detailed instructions for you. So they've got a link tag just like we added our style sheet. Let's go ahead and copy that and paste it into our HTML. Now we want to make sure that we added over top of our style sheets so that we can use it within our CSS styles because what's gonna happen is the browser is gonna read this document from the top to the bottom. So whatever resource is need to be used within this CSS document, you need to make sure they're overtop. So we've got our style. If we save and refresh, we're not going to see anything changed. That's because right now it's still using the aerial fund. So if you go back to Google fonts, you'll see that they show you the font family you should be using. So we'll go ahead and copy PT Sands and let's go to our style sheet. And what we can do is we can add it right in front of aerial. So this is saying all right, we prefer PT Sands. But if that's not available than okay, use aerial. But if that's not available, then all right, just use any sand Sarah fought. So if we say that and refresh, there we go, we see RPT Sands. Great. So what else can we dio? Well, it would be nice to replace these text links with little icons. Maybe an icon for the gin tub loco, maybe the linked in logo and the Twitter logo. Right. Well, there is a free library, four icon funds called font. Awesome. And here it is. So let me show you how to use this on your website. They have pretty simple instructions. Just click on, start using for free. And all you have to do is the same thing you did with our Google Font library. And they actually have this handy little copy link here. So I'm gonna use that. Same thing is before let's paste this in right There. Should be fine. Save it. And now let's see how we can use it. So if you search for the icon you want in my case, I'm gonna look forget Hub. There we go. So they have a few different choices. I think I'm gonna go with the round one. I'll click on that, and it shows you the HTML you can use for that icon. So I'm gonna go ahead and copy that. Go back to my project and in place of get hub, I'll paste that in here and let's see how that looks. Uh, there we go. We've got a little get hub logo. That's pretty cool. So let's do the same for the others. All right? And let's see how that looks. All right, this is really coming along, So we've got our icons. We've got our custom Google font. So in the next lesson, I'm gonna talk about how you can position any element on your page old. 11. Positioning Elements: a walrus, right? So you may be thinking, How the heck are we gonna move all these elements in the right position and let's start small. Let's start with these icons. They've got some weird little bullets now and doesn't really work with icons. Let's fix all this. So if we inspect, let's take a look at the difference between display types. If we look at the ally, that's list item. You can see that the display is list. Item makes sense, right? What about some other elements? Like a paragraph that's saying display block? And what about a dip? Same thing block. So each element comes with its own inherent styling, and you want. If you want to see your choices, you can say display and then see what it recommends. There are lots of different types. We won't go into all of them, but the one that's gonna help us the most right now is display in line block. Let's go back to our code and take a look. So let's see. We have a bunch of ally elements within, are you? Well, Instead of adding a style to every single ally element, let's add a class name toe our parent. You will. Let's call it no style because we're going to remove the default style from our list and make it our own. Now for our no style class, we are going to say OK for the element with no style. We want every ally element within it to be display in line block elements that are in line blocked. This play type will wrap like texts, but stay all within one block. Let's go ahead and save it and let's see what that does to our project. Refresh. Ah, there we go. We have it all horizontal, but there's still a lot of space here. Well, what's going on here? Is there still some default styling applied to the U L element? And we only targeted the ally to undo some of these styles. Let's go back to our code and fix that to target the U L. We just need to target the class no style. Let's go ahead and remove the default styling by saying list style none, which gets rid of the bullets if they're still there, and we'll also say padding left zero. Now you may be wondering what is Patty? Well, first, let's refresh and you see it gets rid of that space on the left. Now let's check out what padding is in your inspector. You'll see a nice little diagram of what this is. This is called the box model. The box model refers to all the different sizes pertaining to margin border padding and how they relate to each other within an element. It's often difficult to completely understand how the box model works until you really just get your hands on some code and play around with it. So I encourage you to do what I'm doing now. See how things interact and take a look at this nifty little diagram to see how it works. Okay, so just like how we positioned these icons in a horizontal fashion, well, we could do the same thing with our image and our text, right? So let's go ahead and do that in our code. So how are we gonna do this? Let's look at it. We have an image block and a textbook, so we could just add a display of in line block to each of these blocks. Let's try that out so we're adding a display of in line block to both the image block and the text block. Let's save it and see how that looks. All right. Well, that's a good start. It's a little weird looking. For starters, I think the text should be aligned to the top of the image, right? So let's see how we can do that back in our code. Let's also add a vertical line top and refresh that. There we go. That's a little better now. I would like a little bit of spacing between these two elements. And as we just learned, we can do that with either padding or margin. Since we really only need spacing to the right of the image, I'm going to add a right margin to our image. So here, under sad style to our image block and we'll say, margin, right, Oops, and we'll just give it a one m space. Save it and let's check it out. All right, so that's looking a little bit better. What else can we add? Well, let's had some padding around the entire card, actually, So we're gonna go to the card selector and add padding that's going to add padding around the entire card as we saw before, so patting and will say to em again, Save and refresh. All right, it's looking a little bit better. Okay, so that's a very general overview of how the box model works and how you can position and space things on the page. There's a lot more to learn there, but this covers the basics. In our next video, we're going to talk about sizing. 12. Resizing Elements: Well, this is really coming along here, but that image is way too big. Let's talk about some of the different ways you can resize elements now a very simple way to apply sizing to images. It is just to use their with and height attributes. So on my image tag, I could just add a width attribute equals and, let's say, 1 50 And the browser will interpret that as 150 pixels and great look at that. It also applied a height for us, so it kept the aspect ratio correct. My images square so the width and height need to be the same. What do you think will happen if I apply a different height from my within the scenario? Let's check it out. Let's say 100 pixels instead. Oh, I've been squished, so just keep that in mind. You typically don't want to add both with and height to images, but instead you should just let the browser preserve the aspect ratio for you. Now that's a great way to add within height. But in modern Web development, it's typically handled within CSS. So let's look at how you can do the same thing with CSS instead. First, we're going to delete thes extra attributes and let's go to our CSS so we can just target any image within the class of image block. Heading width or height is pretty simple. On CSS, you could just use the width property and give it a pixel value or a percentage, or M. Whatever your preferences, I'll stick with pixels here and let's just stick with 150 just like that. Let's see what that gives us. Great. Now these width and height properties can also apply to other elements on your page, so we could also use it to limit the width of our card. So that's not spanning across the entire page here. So let's added down here to our card element. For now, let's just try a with of 600 pixels and see what that looks like. Let's go back and refresh. Great, so you can see the card itself is now limited to 600 pixels wide. It's not spanning across the entire window. Now I personally feel like this is a little bit too wide. There's a lot of extra space on the right here. It's a little bit weird. Let's just shrink this down a little bit, and this may be different for your name. If you have a longer name or a shorter name, just feel it out and see what looks good to you. Ah, let's say maybe five 10 pixels looks a little better now. One thing to keep in mind is responsive design. For instance, What happens if we're viewing this on a small screen, like a mobile device will in our inspector? We can preview that by using this handy tool to toggle devices. Unfortunately, our design is not very responsive right now. Since we're using fixed pixel values, the browser is basically just shrinking things down, trying to fit everything within the device. Here's what we can do to get around that. In addition to our with value, we can also add a max with and set it to 100% so that just tells the browser never scale this card beyond 100% of the screen. So that way, on even smaller devices like an iPhone five, the text will just wrap down, and there's never horizontal scrolling. Okay. Before we forget, let's copy these styles and put them in our code. So we're going to replace this original with. There we go. Let's just make sure everything's still working. Looks great. There is still one caveat, though. Unfortunately, not all browsers are equal. Let's take a look at this same page in Firefox. Open up the Inspector. So it looks okay now. But then take a look at when I scroll to the right. We don't want any of that horizontal scrolling, so it seems like in Firefox, the max with is not quite working. The problem here is a complication with our box model. Right now, the browser is applying our max with to the content of our box. But the padding is adding some additional with beyond the size of our page. And we can get around that by adding another property called box sizing and add a value of border box. This tells the browser to apply the with up to the border of our box model instead of constraining it to the content area. I know this is a little bit of an advanced concepts, so don't feel like you have to fully understand what's going on here, but I just wanted to make sure you have this compatibility fixed within your design. So be sure to add that in there. Let's go ahead and copy this extra property into our code. And let's take a look in Firefox first. All right? Great. And what about chrome? All right. Looks good. All right, this is nice and responsive now. So in the next video, I'm going to walk you through some of the ways that you can align these elements within your page. 13. Alignments: so next. It would be great if we could position this whole card in the center of the page. Well, there are a few ways that you can position elements using CSS and let's go over the different ways we can do that. How you position elements depends really on the display type. In the case of a paragraph element, for instance, you could add the style text align center, and it centers it within the paragraph. In this case, the paragraph is not very wide, but we'll leave that as aligned left, which is the default in the case of in line blocking elements such as our list items. Well, those could be aligned using the same text align method so you can add a text aligned center and it would center all these in line block elements. But we're not going to do that. What we want to align is our overall card, which, as you can see, is a block element. Block elements are a little more challenging to center. What we can do is utilize the margin so that we can provide equal spacing on both left and right side of the block. So the way you can do that is by adding margin auto, this tells the browser, okay, automatically determine he maximum margin for both the left and the right side of this element and just equal them out. And that gives us a center alignment. Now, further, we could add to this margin because we want a little bit of spacing from the top of the page. Right? Well, how do we do that? We could add a margin top and give it one M. And there we go. Or we could also do this. Now, how the heck did that work? Well, let's take a look at the diagram here. It's applying one M or 16 pixels in this case to the top and the bottom, and then the left and right are automatically calculated. The reason for this is because this is actually a shorthand property. If I click this arrow here, you can see that it's actually determining all these separate properties. So margin is shorthand for a margin. Top margin, right margin, bottom water and left. And it's in that order. So say you wanted Ah, margin top of one m. And you wanted a margin right of to em. And you wanted bottom to be three m and left to be for him. I don't know why you would ever want that, but just to illustrate, you can see that it applies to each one in that order. So we're gonna leave it. Let's leave it at ah to M auto. That gives us a little bit of space at the top, plus the centered alignment. All right, let's go ahead and apply these styles to our code before we forget. We're gonna apply this toothy card here, fix our spacing, save and refresh. All right, there we go. Looking pretty good. Now there's one other way. You could align items which I wanted to just briefly go over. We won't use it in this project, but let's say you wanted to move this image over to the right. Well, you could easily do that by using the float property by default. There is no float. But if you floated right, well, look at that. It moves the image over to the right most side before it hits the padding of the car. Right. So you can use that to your disposal as well. A lot of people will float things left. Ah, in order to make websites more responsive. We're not gonna use that technique in this project, but just know that that's also at your disposal Old. 14. Advanced CSS: right, So this is really coming along. There's a couple more tweets that I wanted to add that are little more advanced, but I think we're ready to tackle them. So first of all, it would be nice if we could just click on this link and it would open up our email client . Right? So let's go over to our age to mail, and we're gonna just add a link to this. As you remember, links are the anchor tag now for the H ref. We're gonna add a special girl that basically tells the browser to open up the email client on the person's computer so that would be mail too colon. And then you're gonna add whatever email address you want to send email to. Let's go back to our browser, refresh, and you see that it's a link. Let's go ahead and click on it, and it opened up in my other window. But I can show you here. There it is. So it opened up my inbox. I don't have male set up on my computer right now. I won't do that right now. What are some other things we can add? Well, just as we horizontally centered are card. It would be nice to have it vertically centered as well, so it's right in the middle of the page. Believe it or not, that's a little bit advanced, but I'm gonna show you how to do it. So there's a fairly new property available to most almost every browser. At this point, it's called Flex Box, and there are a lot of details on Indian about how Flex box works. It can get a little bit complicated, but I'm going to just show you basically how to use it to vertically align elements. Because really, that's one of the best ways to do it these days with modern browsers. So let's get rid of this and let's go back to our code. So the way Flex box works is you need an overall wrapping element, and then you can position elements within that. So we're gonna use thesis ICT rapper as our overall parent element. And let's see, let's go ahead and added above card, and the first step is just to make it display flex. Now, in order to vertically center on the page, we're going to need to make sure this element is taking up the entire page. Right? So we're gonna add in, ah, height of 100%. So that way it will take up the entire page, and we're going to say flex direction should be column because we want to center vertically , justify content should be center. And a line item should also be center. So what? That saved. Let's see what we have so far. Refresh. And well, nothing happened. Why is that? Let's take a look. All right? So hard problem here is that Yes, we're taking up 100% of our body, but her body isn't 100% of her window. Why is that? Well, neither is the HTML document itself. So how can we ensure that the entire window is taken up by our HTML document? The way I like to do it is actually add styles to the document itself. So I can add a height of 100%. That makes sure that the HTML document takes up the whole page and I could do the same for the body. And there we go. Let's go ahead and apply those styles to our code. I'm gonna put that at the very top HTML and body height. 100%. All right, Everything's working as expected. Awesome. Let's see a couple other things I would really like for these corners to be a little bit around. And so it looks more like a card. Well, let's try that out. The way we can do that is by adding what's called Border Radius, and it's pretty simple. So along with border, there's border, radius and weaken. Just apply the standard, either pixel or M whatever you prefer. I'm just going to give it a let's say, five pixel radius. That looks pretty good. But, you know, actually, I feel like we maybe we should use them so we'll do 0.8 m. Ah, yeah, that's nice. That way it's relative to the rest of the page. So let's save that to our code, find our card and in our border radius and refresh. Great. All right, one final tweak. It would be really nice if we could just add a subtle shadow there, so it really popped out from the rest of the page. Let's see how you can do that. What I like to do is go to a box shadow generator because there's a lot to box shadows. I do not feel like calculating it on my own. So box shadow generator and there are a ton of these online Pick your favorite. I'm just going to click on the 1st 1 I see. And the controls are pretty intuitive year. So it's a pretty good sight, I'd say. Uh, let's see. Let's make it a little bit more subtle. Okay, so let's give that a try. All you have to do is copy all of this and paste it onto your card. Let's go ahead back to our browser, and we don't need this anymore. Let's refresh. All right, that's awesome. So now that we've got our design made, I think it's time to put it online to show off. Right? So in the next video, I'm gonna show you how to do that for free 15. Publish Your Code: a walrus. Right. So we've got our finished product. This is our file structure, as you know, we to get all these files on the web so that it can be accessed by anyone in the world. How do we do it? Well, there are a bunch of options out there. You could buy some hosting from. You know, the various hosts out there. I'm sure you've seen commercials for them. Ah, go, Daddy, Host Gator. Ah, there's a ton of them and they make it pretty easy for you to do. Or you could keep it simple and go to get hub. As you know, I love get help because it's on my card. All right, so let's go to get up and all right. I already have an account. I'm very active here. You're not gonna see all this, but what you want to do is create a new repository. Once you sign up, forget hub. You can create a repository which is basically just a place to put all your files. Now, it does not have to be public if you don't want it to be. But if you wanted to be online, then you should probably keep it public. It's also great to have a get hub account. If you're trying to get into the Web development community Ah, it's a great place to show off what you can do as far as coding how active you are. Ah, and just to communicate with other developers because there are a lot of open source projects on get up that you can have access to and just contribute to yourself. Anyway, what we do here is we need to come up with a repository name. This will also sort of tie into the U R l of your business cards. So keep that in mind when you're coming up with your name. I'm just going to keep it simple. So in the name it card tutorial and you don't have to supply a description. I'm just gonna skip that from now. We're gonna keep it public, and you want to initialize it with a read me just for fun These All right, So let's go ahead and create a repository. And here this is your chance to add all your files. So just go over here to upload files, and from here you can literally just drag and drop all your files into the window. So select everything we have in our ah tutorial directory and put it onto your repository. It's gonna upload everything with the directories and everything. And this is your chance to say, All right, What did you just do? Well, it comes with a default text, and I like that. So I'm just gonna commit changes that way. So it's commit changes. This may take a little while. Once it's up and running next, we're gonna go over to settings. This is where you can go ahead and launch your web site. So scroll down to get hub pages, we want to choose a source. It should be the master branch. Save it. And if you scroll back down, you'll see that get help pages is now enabled, and you can change the domain. But I'm happy with this. So if you click on your domain, there it is. Your code is now alive and you can share that euro with anyone you want 16. Wrapping Up: Congratulations. You have taken your first steps to learning HTML and CSS, and you've got a cool Web page to prove it. Now, don't worry if some of this is a little bit difficult to retain, it is a lot of information. Just remember that you've got the code that we've just written for reference. You've also got the Indian documentation, so feel free to look through that if you need some tips. Also, you don't have to stop here. You could take this project a couple steps further. If you're up for some bonus challenges, I would recommend a couple things you could think about, adding a background image to the Web page. You could play around with the border radius and make it more of a Kirby style or a circular style. You could also expand this card and make it more of a mini bio. You could go into some of your background some of your skills. Once you're happy with your design, I encourage you to share it in the Project Gallery. I'm looking forward to seeing some of the finished products out there also. Hey, if you like this course, please feel free to follow me here on skill share. Also, you can follow me on Twitter and I would love any feedback you have for me in a review as well. So anyway, thanks for tuning in and a happy coating old.