Transcripts
1. Learn to code basic websites overview: welcome to coding basic websites with HTML and CSS for kids and beginners. This course is for any child or beginner with no previous coding experience. If you can write a complete sentence, then you can learn this. HTML and CSS is used by every website. In each video, I'll cover a different topic, and along the way will be a few quizzes and coding challenges to practice what you learn by the end of this course will have built this example. Website. My name's Kevin Kennedy, and I'm the creator of product design online dot com. I invite you to enroll the day for lifetime access to these videos and I'll see you and the first lesson.
2. Course Requirements: I everyone and welcome to the course requirements. There's just a few quick things that we need to go over before we get started. The first thing is, you need to make sure that you have up to date Web browser. I'd recommend getting Google Chrome, which you can download for free at the link on your screen. Once you have chrome or your desired Web browser pulled up, we're gonna go ahead and type in J s been dot com now, After it loads, you'll see that we actually already have some HTML code on the left hand side here. So what we want to do is select all of it and hit the delete key. After that, we're gonna go ahead and type or name on the left hand side and make sure that it actually outputs on the right side. Now, if everything seems to be working okay and your name shows up on the right hand side, then we're all set and ready to go. I will see you guys in the next lesson or we'll dive right in to the history of HTML
3. HTML Overview: everyone and welcome to the HTML overview. Computers used languages just like people. In fact, there are over 200 programming languages out there. So what is HTML? Well, HTML stands for hypertext markup language. HTML is the way that computers communicate with the Internet. Hypertext is the process of linking objects to each other. So when one object is clicked, your taken to the next object. Now let's take a closer look at how hte email is actually built. HTML consist of a number of different tags, which we're gonna cover in this course. Most tags have a beginning and a closing tax, So by now you may be wondering who actually comes up with this stuff. Well, HTML is actually created by the W three C or a group of people who work together to develop standards for the Web. Now that you know what HTML actually stands for, let's take a really short quiz and then I will see you guys in the next lesson where we're going to start writing the basic HTML structure
4. Basic HTML Structure: everyone. And welcome back in this course, we're going to cover the basic HTML structure that is used by every website. So before we get started, we want to make sure that we have only the necessary things open and Jaspin. So if you see here, if you have any of these other tabs open, we want to close them. So all that we should have selected is the HTML button in the output button, and then we're gonna go ahead and delete our name. So the first thing that we have to do is tell the computer toe actually read HTML. So we're going to start by typing the less sand symbol followed by an exclamation point. And we're gonna type the word doc type in all caps, followed by a space in HTML and lower case, followed by the graters Dan symbol. So this is something that is required at the top of every HTML document. So now that we told the computer to read HTML, we need to tell it where it's going to read the HTML. So to do this, we're going to create a tag that just has the word HTML in it. So we're going to start off by creating our opening tag and then by using the Ford Slash symbol. We're going to create a closing tag and I'm going to go ahead and just return this so it's on a separate line, so the next tag we want to write is going to be the head tack. Now the head tag is going to be were replaced. Everything that we don't want toe actually display on our website. But we want our Web browser to know about it. So we're gonna go ahead and return this onto another line and within the head tag, we're going to create the title tag. Now. The title tag is going to be were replaced the title of our website. So for this example, we're going to create a website for the chunky chocolate chip Cookie Dough Co. So let's go ahead and tight that in the title tag. Now, if I zoom back out, you'll notice that the title of our company isn't actually displaying on the output page and that's actually a good thing. That's what we want because the title tag is actually meant to display the title of your website up here on the tab of the Web browser. So we just want to look up here and make sure that everything is correct. Now I'm gonna zoom back in to our HTML code that we're gonna put a return after the head tag. Now, we're gonna create the body tag. Now, the body tag is where all of the HTML code is going to be placed that we actually want to display on our website now, within the body tag. We also want to create the footer tag. Now, the footer tag is the tag that we're going to use to place all of the things that we want to be on the bottom of our website or the footer. Now we have the basic HTML structure that will need to use to create any website. But before we move on to the next lesson, I want to show you one more quick thing. Now, if you notice here when I delete the body tag the issue Mel actually turned red. Now we ever see the issue, Mel turning red. That actually means that we haven't air somewhere within our HTML code. Now, typically, this happens because of a typo or because we misspelled or forgot to put in our ending tag . So if you notice here when I type body back in the red air sign actually goes away and everything goes back to normal, that's everything for this lesson, and I will see you guys in the next video.
5. Nav tags: everyone. And welcome back. And this quick lesson we're gonna talk about knave tags. The knave tags represent the main navigation of the page. Now, all we have to do is go ahead and hit return after body, and we're gonna go ahead and enter the knave tack. Now, eventually, we're gonna actually place links insider navigation tag. But for now, we're just gonna leave it alone. We're gonna move on and actually create the first text on her page. So I will see you guys and our next lesson.
6. H1 to H6 heading tags: everyone and welcome back. And this lesson we're gonna cover the heading tags, no heading tags or how we create headlines similar to newspapers or probably websites that you've seen on the Internet. So the heading tag is defined by using the letter H and then a number one through six. Now, if we use H, one is going to create the largest, heading all the way to the number six, which is going to create the smallest heading. So let's go ahead and write this out and take a look at what it does. So if we hit return after the navigation tag, we want to type each one followed by the closing H one tag. Now let's go ahead and actually write our company name within the H one tag. So if you notice here on the right hand side, it should be out putting the name that we just wrote. So let's go ahead and write an example each six tag to show the difference in size. So if you notice here, H six tag is much smaller than H one tag, so we'll do one more example, and let's go ahead and write out an H four tag to see how big that one is. So if you notice here, the age four tag is in between the size of the H one and the age six. Exactly what we expected. Now, when writing our HTML document, we can use the H tags. We're heading tags as much as we want. But the key to remember is we want to use the H one tags for our most important items and the H six tags for the least important items. So now that we've seen the difference that the H tags can create, let's go ahead and delete these two example ones. And then we're gonna actually create four different headings for our example website. So let's go ahead and create the age three tag that we're going to highlight it. We're going to copy and paste it three more times. Then we're gonna go back to the 1st 1 recreated we're going to start typing in all natural ingredients, then a 2nd 1 We're going to type in instructions than the 3rd 1 We're gonna type in nutrition information and then in the 4th 1 we're going to create when free cookie dough for life. That's it for this lesson. Thanks for watching, and I will see you guys in the next lesson.
7. Paragraph tags: everyone. Then welcome back. In this episode, we're going to cover the paragraph tag to define the paragraph tag. All we have to use is the letter P. And we want to use the paragraph tag for each individual paragraph or body content that we create. So we're gonna go ahead and add Ah, slogan toe our website. So under the H one tag, we're gonna hit return, and then we're going to create the P tag, followed by the closing tag there, and we're gonna go ahead and type in our company's slogan. So let's type in the best chunky chocolate chip cookie dough in the world. And you know what? Let's go ahead and put this in quotes. Since it's our slogan. Now, when writing our HTML code, we want to remember use the paragraph tag each time that we wanna divide or create different sections of content. And every time we do this, the browser is gonna automatically ad space in between paragraphs. So I'm gonna go ahead and copy this line here and paste it a few times. Just a show example. So you can see on the right side here there's actually space in between the paragraphs. Whereas if I were to copy the text within the line, it's going to keep adding to the paragraph. Now, I'm gonna go ahead and undo this. Actually, let's go ahead and highlight all of this and delete it if you followed along and let's go down to the foot or tag here and we're gonna highlight in between our tags it return, they were gonna create the paragraph tag again. And now we're gonna write some body copy within our foot or tag. So we want to place the copyright symbol in there. So let's go ahead and open up a new tab with Google and let's just search copyright symbol and then we're actually gonna highlight this and just copy it right into our code. And then we're just gonna fill out some more information on our company here. So if we look at our web page here on the right hand side, you can see that we're starting to get the main sections of our website now later on in this course, we will actually start to style and make more separation of each section by color and a few other things. But for now, We're gonna go ahead and take a quick coding challenge to practice what we've learned so far on. Then I will see you guys in the next lesson.
8. Creating a line break: now. In the previous lesson, I covered how you can create different paragraphs by simply creating MAWR paragraph tags. But in some scenarios, we may want the text of the same line or paragraph to be on a different line. So to do this, we just have to create the line break tag or B R. And the line break tag is one of the few tags in HTML that doesn't have a closing tag. So all we're gonna do is after the word cookie here and our title. We're gonna place BR and you'll notice here on the right hand side that this actually pushed the words Doe Co onto the next line. Now we could have created this exact same effect by putting an H one tag below and creating the words Doe Co. Within that. But there's a few benefits that we get from using to be our tag. For one, using the BR tag is much better because it creates a break in the content without telling the computer that it's different content. So what I mean is, if we had actually created two different H one tags or paragraph tags, then our computer is going to interpret the code that those texts are not relevant or they do not belong together. But in our scenario, they do belong together and really one of the other main reasons the BR tag comes in handy is if we decide later on that we don't want to have a line break their weaken. Simply just delete the BR tag without having to worry about deleting other tags or whole another line of code. So that's everything for this lesson and the next lesson we're gonna cover how to add links to our website. I will see you guys in the next video.
9. Adding a link: everyone and welcome to adding a leak in this section. We're going to add links to our navigation section. So let's go ahead and get started by hitting. Return in between the navigation tags now to create a link tag. We're going to use the letter A. So let's go ahead and tight that out. And then we can go ahead and put our link title within the link tag. Now, if you look over here on the output side, you'll notice that the text doesn't seem to be any different than all of the other text on a page. And that's because we need to put the link your l within the link tag. So after the first a, let's put a space and then let's tight a treff and then equals, followed by quotations. Now H ref stands for hypertext reference, which means that whatever link we place within those quotation marks is where our link will take us. So now if we look at the right hand side will notice that our mouse changes because we actually have a link here. Now let's go ahead and click on it and see what happens. Now Everything seems to disappear. Well, that's because we don't have a u R L within our link tag toe actually take us to. So if we go ahead and click the output tag twice, everything should reappear. Now there are a few different things that we can place as links within our a treff. One of the things we can do is just place the hashtag symbol as a placeholder, which means that when you click on the link and nothing will happen. So now let's go ahead and click on that, and we notice that nothing happens. And so, in some scenarios like this were already on the home page, that would be a good use of it, so no one goes anywhere. Now. Let's go ahead and copy our whole link here three more times, and then let's fill out the rest of our navigation. So the 2nd 1 we're going to write about the 3rd 1 we're going to write contact and the fourth and final one we're going to write purchase. So now if we look, we have all these different links here and they're clickable, but we don't have been taking us anywhere now because this is a beginner's course. I'm not going to go too far in depth into all the different things that we can link to. And in this course we're not actually gonna create four different pages and have them all linked together. But I do want to show you a couple more quick things that weaken do with links. So the first thing that we can do is we can create a link to an outside or different website. So if we hit space after the H ref in the quotes here, let's go ahead and type Target equals and then underscore Blank. Now we want to go ahead and go within Rh raft quotes. We're gonna type http Colin for a slash ford slash google dot com. So the reason we put this target in here with the words underscore Blank in quotes is that's going to tell the browser to open a new tab when we click on the link. So let's go ahead and click on the about tab now, and it should open a new link and take us to Google, and it looks like everything worked. Now let's go ahead and close out this Google tag and then we're going to delete all of this . Recreate our hash tag link there, so it doesn't take us anywhere now. One other thing that we can also linked to is we can place links to PDFs or any other documents that we have hosted on our website. But for this course, we're not going to do anything with our links. Were just gonna use the hash tag as a placeholder. In the next lesson, I'm going to cover how to add image to our website. I will see you guys in the next video.
10. Adding an image: everyone and welcome to adding an image in this lesson. We're going to add image of a giant, chunky chocolate chip cookie right underneath our slogan. So to get started, let's hit return after the p tag of our slogan, and then to create the image tag we're going to use I M G, which is an abbreviation for the word image. So let's go ahead and type that out now. One thing to note is that the image tag is just like the BR or line break tag that we did up here. It does not require a closing tag. In fact, if we place a closing tag, it will actually just cause issues down the road. So the next thing that we need to do is put the source of our image within the image tag. So if we put a space after the letter G, we're going to type SRC, which is an abbreviation for source, followed by the equal sign and then quotations. Now all we have to do is paste the u R L to R image within these quotations. So let's go ahead and open up a new tab within our browser and we're going to go to google dot com slash images and we're going to search cookie and then PNG image as one word. And if you scroll down, let's see 1234 rows. I found this great image right here. So if we click on that and click view image, we're going to select the your L and then hit command, see or control, see to copy it. Otherwise, you can right click and hit copy. Then we're gonna go back to our code and then with in the quotation marks were going to paste it. So now we should see on the right hand side that we have this gigantic image of a cookie now on our website. Now the cookie appears to take over our whole entire website and it's a little bit too big . So what we want to do is set the height and the width of this image size. So, after our quotation marks, let's go ahead and type height equals and then quotes. And then let's go ahead and type in 250 p x, which is short for pixels. So now if you look at our cookie, it's much smaller And if you look, we can actually change the height just by changing the amount of pixels here, so we can make it really small or really large. Now we can also set the with just like we set the height. But one thing that we want to note is that if we set the with to something different than the original ratio of the image, it's going to stretch it funny. So what we can do is just type in Otto, and that will make sure that the ratio of the image stays to its original state. Now there's just one more thing that we need to cover with the image tack. Any time that you use the image tag, it's required that we type an old attributes. So to do this, we're going to type a lt the equal symbol and then quotation marks. Now the altar attributes is where we put a description of the image that can be displayed if the website has any trouble displaying the image. So let's go ahead and type a good description of our cookie now to test this and to show an example for you guys, I'm going to delete a few characters in this, your l and you should notice on the right hand side that are all attributes displays here. So if you look right here, this is what will display if there's trouble with your image loading. The All Attributes is also used for people with disabilities that you screen readers that read the code of your website if they are visually impaired. So let's go ahead and undo that. If we broke the link and make sure that our cookie appears on the right hand page in the next lesson, I'm going to show you how to create an image that access a leak. I will see you guys in the next video.
11. Creating an image with a link: everyone welcome back. And this lesson we're going to turn our cookie image over here into a clickable link. So to get started, let's place our cursor at the end of the paragraph tag were replaced our slogan and hit the return key. Now all we have to do to turn an image into a link is wrapped the image tag within our link tag. So let's go ahead and create the opening A tag, and then let's click before the H three tag and create are closing link tag now to make this a little bit easier for us to read later on, let's click in front of the image tag and hit the tab key. So there's a little bit of a difference here now, within our first a tag we need to put a space followed by the H ref equals Where will place the source of our link or where we want the link to send the user. So for this scenario, we want a link back to the original website where we got this cookie image from. So if we go back up to our Google image search and hit visit page, let's go ahead and copy this you Earl and place that by the H ref. Just like before we wanna type, target equals and then within the quotations underscore blank because we want users to not have to worry about returning back to our site, and this will automatically create a new tab in the browser whenever they click on it. So let's go ahead and click on her cookie to test that it's working and Walla. It looks like everything worked fine. So now we can go ahead and close out of all these extra tabs and before we move on to the next lesson will be a quick coding challenge to make sure that your understanding everything so far after you take the coding challenge, I will see you guys in the following lesson where we will start to learn the div tag and create separation within our website.
12. Using the div tag: everyone. I'm glad you made it through the coding challenge in your back and ready to learn more. Now in this section, we're going to cover the DIV tag. Now. Div is short for the word division in the diff tag helps us create different divisions or sections within our HTML document to help keep our code a little bit more organized. So if we look over here on the left hand side, you can probably imagine if we kept writing MAWR more code, it would start to get kind of messy and hard to read. So that's why we use the DIV tag to separate sections of content that are relevant now. The dip tag will also help us later on when we start to cover CSS and we'll see why it's important to wrap different sections and dip tags as it helps us define different colors and fonts and more. So let's get started by wrapping all of our relevant sections with the diff tag. So we want to click at the end of the navs hag and hit the return T. Then we're going to type Div and then let's go ahead and tab end each one our slogan and then our link in our image stuff. Now, after the closing link tag, let's hit return and let's type the closing DIV tag. Now let's go ahead and wrap all of our H three headers and dip tags in preparation for later on when we start toe ADM. Or information to them. Now, one thing that weaken do when writing code is used copy and paste to our advantage. So in this scenario, I'm going to type the opening day of tag and copy it in front of all the other each threes . Then I'm going to return them onto the next line. Now we're going to return after our first age three closing tag and right the closing def tag. Now we can just go ahead and copy and paste that and do the same thing for all of them. Copy and pasting just helps us write the code a little bit faster, and it ensures that we have less typos than if we were to write every single div tag out one by one. So at this point, it may be a little bit hard to grasp why we need the diff tag. But later on in the CSS section of this course. It'll be much easier toe. Understand why we started setting up our code this way. Thanks for watching. And I will see you guys in the next video.
13. Creating unordered and ordered lists: everyone and welcome back this lesson. We're going to continue adding content into each of our sections on the right hand side, and we're going to cover how to create a new ordered an ordered list. And a Norden list is a list that doesn't have numbers but instead uses bullet points now to start out. Let's hit return after our H three tag for the all natural ingredients heading. And then let's create the U L tag on the UL. Tag is simply short for a Nord Erred lists. Now, before we start typing the text that we want to be on her list, let's go ahead and hit return and then we need to create the L. I tag. Now the L I tag has to be used for every single list item. So in this scenario, I'm going to type out a number of different ingredients. And for convenience sake, I've entered the list as an article attached to this video, so you should be able to just copy and paste the list, or you can follow along and type everything in while I do so now that we've typed everything out, if we look on the right hand side here, you'll notice under our ingredients heading we have an a Norden, or bulleted list of all the ingredients in our cookie dough. Now we want to create step by step instructions. So for the instruction section just below, we wanna have numbers for our list. So to do this, let's hit return after the H three tag and let's use the tag. Oh well, which is short for ordered lists now, just like the a Norden list above. We also need to use the L I tag for every single list item that we wanna have on the list. So again, I'm going to copy and pace all of the lists tags just so we have enough. And then I'm going to start typing out the instructions, which are also included in the article attached to this video. - Now it looks like we have a few extra L. I tags, so let's just highlight those and delete him. So now if we look at our right hand side and scroll down a bit, you'll notice that the Instructions list has numbers on left hand side, whereas Thean greedy INTs list has bullet points. Now if we ever needed change. These always simply have to do is edit the O and the U. So now if we look, we can change them back and forth. Now that we have the ingredients and instruction section filled out, we're going to move on to the next lesson and video. Where will cover how to create an input form?
14. Creating forms: everyone and welcome to creating forms it forms is a way to capture a customer's information, such as an email or name. So to get started, let's hit return after the each three tag that says Winfrey. Cookie dough for life. Now, to create our form, we need to first create the form tag. Then let's go ahead and hit return now to create the field that allows the user to type in , we need to use the input tag. So let's type out input. And one thing you'll notice is the input tag does not have a closing tag similar to our image tag. So all we need is just the input opening tag now within the input tag we needed. Put what type of field this is, and because we're just gonna collect the name in the 1st 1 we're going to write out type equals, then text. Now, if we scroll down on the right side, you'll see that now we have a field here where the user could write their name. Next thing that we want to do is labeled the top of it, so let's go ahead and create the paragraph tag again, and then right name within it, and now you'll see that it shows up above our field input. Next, we want to create another input section where we can collect the user's email. So let's go ahead and Kabi the name and the input sag with command, see or control see, and then paste it underneath our 1st 1 So now you'll see, we have to say the name. So what we want to dio is delete the second name and type in email now, in order to tell the computer what value is what we want to add the name within the tag. So let's go ahead and type in name equals. And then we'll put name for that one, and for the 2nd 1 will type in name equals email. Now the name equals function is just for the browser to understand what it is. It will not show up on the right hand side, and in this course we're not going to cover all of the details to make our form function properly. But there is just one more thing we need to create. We need to create a submit button that allows the user to click on something in order to submit three MFO. So let's go ahead and hit return, and we're going to create one more input tag. But this time we're gonna create the type submit, and now you'll notice that a submit button actually shows up on the right hand side. Now, typically, we would then have to go back to the form tag of here and right out some more code that would tell the computer where does submit the form to? But because this is a very beginner course, we're not going to cover that in this video or any of the videos following with that being said. That's all for this course and creating forms and the next course, we're going to cover how to create tables and we'll start adding in our nutrition information. I will see you guys in the next video
15. Creating tables: everyone welcome back and this lesson. We're going to cover how to create a table, and we're going to fill out the information for our nutrition information section, but it gets started. We need it hit. Return after the H three tag and create the table tag. I will buy the closing table tag. Then let's go ahead and hit. Return in between them now within the table tag. There are a few different tags that we can use. The first tag that we need to use is TR, which is short for table row now. Within our table row, we have to specify one of two different tags before we type out our information. So the 1st 1 that we can do is create the th tag, which stands for table heading. So typically, we're only going to use the th tag once, and we're going to use that to create headings for a table. So let's go ahead and type out calories and let's go ahead, copy that whole row and paste it again. Now you'll notice that calories is next to the other calories that we just copied, and that's because we've created a second row so If we were to keep copying this, it will keep creating more rose. Now for our information section, we're just going to have to rose. So let's go ahead and delete both of those. So we're Onley leaving, too now. The second tag that we can use within the TR tag is the T D tag, which is short for table data. So let's go ahead and change the second calories tag here to T d. Now, if we look at the right hand side here will notice that the table heading is in bold while the table data is regular. So let's go ahead and change the calories of this second tag here to 98. Now we're going to select everything within the TR tag, including the tag itself, and copy this a couple of times. Now we're going to fill out all of our nutrition information now, just like the previous videos where we did that list for ingredients and instructions. I've included all the nutrition information in the document attached to this video for your convenience. Otherwise, you can continue to watch the video and follow along as I type everything in. - So now that we have all of our information filled out in the nutrition information section. There's just a few things that I want to show you now. We created two different columns here, but you can actually create as many columns arose as you would like. You simply just need to keep placing the th or the TD tags within the TR tags to create more rows. So if you look here, we just created two more rows under the protein section. So I'm going to undo that now that we've covered how to create tables and HTML, Let's take a quick quiz and then I will see you guys in our final HTML video.
16. Creating comments in HTML: everyone and welcome to our final video in the HTML section of this course. In this video, we're going to cover how to create comments within our HTML code. Now there's a few reasons that we'd want to create a comment on her coat. One of the reasons is that we can leave notes for ourself or maybe even others that were working with. Another reason is that we may want to comment out some of our code so it doesn't display until we decide later on that we do want to display. So let's go ahead and take a look at how we create comments. Inner issue. Mel coat. So let's scroll down. So we see the nutrition information heading now. Right above that, we're going to click after the diff tag and hit return Now to create a comet. We start out with the opening tag, which is the less land symbol, followed by an exclamation mark, followed by two dashes. Now, if you notice after we type that tag, all of the following code turned green and that's because the browser doesn't see where to stop reading it. As a comment because we haven't created are closing Tech. So to create the closing tag for a comment, we're going to hit space and then to dash marks, followed by the greater than symbol. So one thing to notice is that we don't need an exclamation mark in our closing tag of comments. Now, within our comment tags, we can create or actually write out the comment that we want to leave for ourselves. So let's go ahead and type out a comment. So if you notice here, I typed out. This nutrition information is from 2017 so this may be a comment that you would want to leave. So if you went into your websites code later on, you would know how old the nutrition information Waas. Now we were working on this website with a friend or coworker. This comment may also be helpful because it would let them know when this information was created. Now let's go ahead and take a look at how we can comment different objects out so they don't display on the right hand side. So, as an example, we're going to comment out our cookie image so we can see it disappear and then reappear when we take away the comment. So to do this, let's create the opening tag of our comment right in front of the A tag. And then, after the closing a tag. Let's go ahead and create the closing comment tag. So now, if you look at the right hand side are cookie, has it disappeared, and you'll notice that all of our code is now green. Now, if we decided later on that, we do want our cookie to show up on our website than all we have to do is Go ahead and delete our comment tags and you'll notice that the cookie reappears on to our website. If we look at Oliver Code on the left hand side, you'll notice that we've covered quite a bit so far. This is the final video in the HTML section. There's going to be a quick quiz to review all of the different elements we've covered within HTML. After you take, the quiz will dive right into the history of CSS, and then we'll start adding color and different fonts to the right hand side of our website . Keep up the good work, guys, and I will see you right after the quiz
17. CSS overview: Hey there. Welcome to the CSS overview. CSS describes how issue Mel elements are to be displayed on screen. We can change color size fonts and more. CSS stands for cascading style sheets. Cascading means that styles can fall or a cascade from one style sheet to another, enabling multiple style sheets to be used within our HTML document. Throughout, this part of the course will use the HTML tags that we learned about in the previous videos in order to style the different elements of our Web page. Let's take a short quiz and then we'll cover the CSS in tax or how we write out the CSS.
18. CSS syntax: everyone and welcome to the CSS Syntex lesson to write out CSS. We start out by using a selector. Now these convey be the HTML tags that we learned in the previous videos, or they can also be I DS or classes that we're going to cover later on. In this course, after the selector, we use an opening curly bracket, followed by a property. Now the properties are going to be all of the different videos that we cover in this section. Each property tells the browser to do a different thing, such as change, color change, size change, decoration, etcetera. After the property, we put the colon symbol and then we put the value. So for the color example, we had right the name of a color such as blue after the value we need to create or type a semi colon. Now the semi colon tells the computer that's the end of that property and value, and it will go on to read the next one. Now we can write multiple properties or values paired up with different selectors. So for this example, I'm going to create one more property and value and then we need to close everything off with the closing curly bracket. Now everything in between are curly brackets, is the declaration. Essentially, it tells the selector what we want to do with our code. That's the basics of the CSS syntax. In the next video, we'll take a closer look by diving right in changing the background coat.
19. Background color: everyone and welcome to the background color lesson Now to get started. The first thing that we need to do is open up the CSS tab at the top of our browser window . So if you click on the CSS button here, you'll notice that now we have a CSS column. Now, this is where we're going to write all of the CSS for the remainder of this course. Now the background color property allows us to change the background color of our different HTML elements. So the first thing we're going to do is change the entire background color of our Web page . So if we look at our HTML on the left hand side, here will notice that we have all of our different elements wrapped within our body tag. So to write this out, we first want to write out body, which is our CSS selector, followed by the curly brackets. And if you notice when you type the first curly bracket, the 2nd 1 will pre populate for you. So then you want to hit return, and now on the next line, we want to type or property, which is background dash color, followed by a colon, and then we want to write out the color so there are a number of different colors that weaken right out, but they have to be Web safe colors, so they have to be either hex codes, RGB codes or color names. So we're going to write out a hex code, which is de nine b three eight c, followed by our semi colon. Now, remember, as we covered in the last video, the Semi Colon tells the computer that that is the end of the declaration. So after it reads that it knows it can go on to read the next property. Now, if we look at the right hand side here will see that the background color of her Web page is now this light brown color. Now we want to change the background color of a few more elements of items that we want to really stand out. So we also want our company name to stand out. So if we look at our company name here on the left hand side will notice that it is in each one tag. So let's go ahead and change the background color by using H one as the selector and then right background color in as the property and for the H one. We want to make it a light blue color. So let's go ahead and use the hex code three BB nine ff. So now if we look at the right hand side here, the light blue color should appear behind our text. Now let's just go ahead and scroll down and let's go ahead and write in a background color for our footer. So if we remember in the HTML section of this course, we use the footer tag for HTML. So let's go ahead and type out footer as our selector. And once again, let's type out background color. And now this time, let's use an example color that is Web safe so we can type out a number of different color names, and to see a full list, you should visit the W three c website toe. Learn more, but for this course, let's just go ahead and type out light gray, and now you'll notice that our footer down here is light Grey. Now, if you notice on the right hand side, the background color kind of ends really close to the edge of our text. Now, don't worry. Later on, in this course, we're going to cover how Toe ADM or Margin and padding to give the text more room to breathe. Now, before we move on, let's just add one more background color. So we want to make sure that all of our subheadings here stand out a little bit more than they do. So let's go ahead and call them by using the H three tag. And then let's change the background color of those toe white. So that's all we haven't sore for this course. And the next lesson we're going to cover how to create I ds. I will see you guys in the next video.
20. Creating an id: Hey there. Welcome to creating an I. D. And I D allows us to style something specifically without affecting all the other similar tags. So to create an I. D. We first have to go over to our HTML. So let's go ahead and create an I D for all natural ingredients section. So we're going to create an I D tag in the DIV tag that wraps this section. So let's go ahead and write out I d equals followed by quotation marks. And then we need to come up with an I. D. Name. Now an I D name can contain Onley characters. A through Z. They could be lower case or capitalized, and it can contain numbers zero through nine. But it cannot start with the number now. Typically, when coming up with the name, you want to come up with something that corresponds to your category or section. So it makes the most sense when you look at your code later on. So, for this example, we're just going to call her I d name ingredients. Now let's go back over to our CSS panel in this time, instead of calling our element by writing out Div. We're going to write out ingredients so we can actually even copy this just to save some time. And then we need a have ah hashtag in front of that, which is the symbol that represents an I. D. So now we follow that with our curly brackets and let's go ahead and create a background color property with the value F nine F nine F nine. So as you see here, we now have a slightly gray color on the right hand side, and it on Lee affected this section because we created just one I d. So we want to also create ideas for the following sections because we want each section toe , have a different color. So let's go ahead and create an I D for the instruction section and let's use the hex code ff A a 80 because we want the instruction section to stand out and have a soft red color so it catches our attention. So let's go ahead and do the nutrition information section. - And now let's go ahead and do the wind free cookie dough for life section. So let's just name this one win for short, and we can copy this over to save some time, but then let's change the color here. Two orange. So that stands out a little bit. Let's go ahead and type, and I d for our slogan here because later on, when we cover some or CSS properties, we're going to change that. But we don't want to affect the rest of our text. So if we look for slogan here, which is in a paragraph tag, let's create the I D equals slogan. So in summary, you want to use I DS any time that you want to change specific elements on your Web page without affecting any other elements. Now remember, the I DS can only be used once, so if you need to use it a few times or more than once, you want to create classes, which we're going to cover in the next video
21. Creating classes: everyone welcome back. And this lesson we're going to cover how to create classes. Classes are essentially the same as I DS that we just covered, except that classes can be reused as many times as we want. So to create a class we need also create a name for it and add it to our HTML. Just like the I DS classes can contain the same characters a thers e lower case or capitalize and the numbers zero through nine. But just like I DS, they also cannot start with the number. So let's go in the left hand side and let's create a class for our H three elements because later on in this course, we're going to change the style of all of our subheadings inner HTML document Here on the left hand side. Let's go ahead and write out class equals quotation marks and then within the quotation marks are class name. Now for this, we're going to write out title and then we're just going to copy this and paste this into our other titles. So we should have one and all four of our sub headings or titles that we've created here now, later on in this course after we learned a few more properties and values, we will use the classes to alter the style of our subheadings. That's all for this video. I will see you guys in the next lesson.
22. Creating a border: Hey there and welcome to creating a border. And this lesson we're going to cover the border property and the many different values that go with it. So to get started, let's go ahead and add a border to our company name here. So because we already changed the background color by calling the H one tag, we can go ahead and add our property to that. So after the background color here hit return in type out border, followed by a colon symbol. Now the border property requires three different values after it. So the first thing that we have to tell it is the border thickness or with by telling it how maney pixels. So we have to type in a number, followed by P X, which is short for pixels. So let's type in four p x now. The next thing that we have to tell it is what style we want our line to be. So for now, let's just go ahead and write out solid. And as you'll notice, we already have a border added to our Web page on the right hand side. Now it pre populated black because the color of our Texas black, but the third value that we can change is the color. So let's go ahead and change this to a shade of blue by typing out the hex code 15 89 ff, followed by our semi colon. Now there are a number of different borders that you can create. So let's go ahead and edit the type here where we wrote solid and change this to dotted. So now if you see on the right hand side now we have a dotted border. Now we can also type in dashed or double, or we can type in hidden if we want it to not display until we change your mind later on. So let's go ahead and re type in solid and leave it at that for now. So if you notice here on the right hand side, the border just followed the value that we had called in the shape that it already has. So we have a very square border. The outlines our blue background. Now, in the next video, we're going to cover the border radius property where will add rounded corners to our border. I will see you guys in the next video
23. Border radius: everyone and welcome to the border radius lesson. Now we want to change the border that we just created in the last video toe have rounded corners. So let's go ahead and go back up to R. H. One selector up here and after the border property we just created Let's hit return and let's type out border radius with the dash in between, which is the property that we use to specifically select the radius or rounded nous of a border. Now they default to zero, but we can type in any number of pixels. And as you notice here on the right hand side, when I type it in, it automatically changes. So if I type a very high number, it'll be like that versus a very small number like that. Now we can also use percentages with the border radius property. So let's go ahead and leave that at four pixels. And now I want to show you how we can create rounded borders for specific corners, meaning that it doesn't make all four corners rounded. We want to add a rounded border to all of the titles that we created and creating a class video so to call the class, we use a period followed by the class name which we use title and then we want to fill in the border radius property. Now, if we just type out five PX for now, you'll notice here that the borders have been created now for the nutrition information and the all natural ingredients. It's a little bit hard to tell that it changed because of the background color being very similar. Now we can also create round of borders for Onley specific corners by typing out which corner we want to be changed. So to do this, we start out in the upper left hand corner with the first value, followed by the right hand corner and continue on going clockwise. So let's take a look at what I mean. So if we type in zero after five, p. X now will notice that our right hand corner is now square. So we want that toe also be rounded, cause we want both the top corners to be rounded. So let's type in five p x and then let's do 00 So now if we look at the right hand side will notice that the top two corners around it in the bottom two are square, so we could change any number of combination here to round specific corners or leave them square. But let's go ahead and leave the top two rounded in the bottom two square. Now, if we scroll down will notice that we also have this on all of our other ones. But again, it's a little bit hard to see on these two because of the background color being similar. But you probably also noticed that the background kind of shows through around a corner here because it's still square. So to change this, we need to add the border radius property to all of our I D tags down below. And because we want them to be rounded all the way around, we're just going to type out five pixels once. And if you notice here, the all natural ingredients one has now been changed. So now we just need to copy it over to the other three ideas that we created. So now if we take a look at the right hand side will notice the All Forever sections now have rounded corners and everything is slowly starting to come together. That's all for creating a border radius. I will see you guys in the next video
24. Padding: everyone, Welcome to the padding lesson in this video. I'm going to show you how to create space in between your content in the border. So let's take a look at this diagram, which explains the difference between padding and margin. So if you notice here, padding is the space in between our content and the border, whereas margin is the space outside of our border. Thus, padding cannot have negative values. So to get started, let's add some space in between our title of the company here and the blue border that we created in a previous video. So let's go up to our H one selector here and after the border radius. Let's hit return and then let's type out the padding property. So to define the padding property, we need to add a value of pixels. So let's Typhon 20 p x. And as you see here now, on the right hand side, we have a lot more space and it just makes it a little bit easier to read. Now, when we just added 20 pixels in, it added 20 pixels on every single side around the content. So the top left, right and bottom Now We can also specifically add padding toe on Lee one side or specific sides if needed. So if we look at the right hand side will notice that the titles or subheadings we have here, they're a little bit crunched in needs more space. So let's go ahead and add padding to the top and bottom and the left and right sides. But we want the top and bottom to be slightly different than the left and right sides. So under age three Selector, let's return after a background color property, let's create the padding property again. So now if we create 10 p x, followed by five p x. You'll notice here that it added 10 pixels to the top and the bottom and then five pixels to the left and the right hand side. So if you write out to values in a row like we just did, the 1st 1 stands for the top and the bottom, and the 2nd 1 stands for the left and the right sides. Now we can also specify padding for just one side, so let's go ahead and take a look at how we do that now. Our nutrition information section here is a little bit crowded in the text in the second column here seems Teoh, but up next to some of the other words. So we want to add padding just to the left side. So let's go ahead and do this by calling the TD selector, which was one of the HTML elements we used in our table. If we look over here on the left hand side now, let's write out padding Dash, and then you want to write out the direction you want the padding to be. So in this scenario we want the padding to be left. And now let's write out 30 pixels. So if you notice there after we wrote 30 pixels, all of the second column, Tex jumped over to the right because we added more padding in between here. Now there's just one more thing that I want to show you with the padding property if we go back up to our age three selector where we wrote the padding 10 p x and five p x. I want to show you that you can also specify individual sides by giving it four values. So if we were to write three pixels and 20 pixels. You'll notice here that now we've written out the top value, followed by the right value, followed by the bottom, followed by the left. So it always starts at the very top and then it goes clockwise. Let's go ahead and undo that and leave it at 10 pixels and five pixels. So we've covered quite a bit of CSS so far. So before we move on, let's take a short quiz and then I will see you guys in the next video.
25. Margin: everyone and welcome to the margin lesson. Now, if we take a look at our charge, Yen will notice that margin is how we generate space outside or around the elements. So if we notice here, it's the space that's outside the border now because it's outside of the border and it doesn't affect the actual content. Margins can include negative values, so typically, we use margin to add or take away space in between our sections. So, for example, we're going to try to add space in between our cookie and the all natural ingredients section so they're not so close together. So let's go ahead and do this by calling the image with our image selector. And then let's type out the margin property now, just like we covered with padding margins could be specified to Onley one direction, or you can alter every single direction at once. So let's take a look at what I mean. If we were to type out margin and then 20 pixels will notice that that added space on all four sides. Now, if we delete that indu margin, dash bottom 20 pixels will notice that that only added space to the bottom of the cookie. Now, just like padding. We can also call each side by writing them out in order, starting with the top. So let's go ahead and write out our values. We want to add 20 pixels to the bottom of the cookie. So what we can do is set zero for the top value zero for the right value and then 20 pixels for the bottom value. And then we need to set zero for the left value. So once again, if you notice here, we now have 20 pixels underneath our cookie, which gives it a little bit more space. Now, one benefit of writing out margin this way, instead of writing margin out, specifically toe one direction is that we can go back and change our margin quicker if we need to later on. So, for example, if I decide later on, I need to add some more space in between the cookie and our slogan. I could simply go in here and change that without having to change our property. So that wraps up this video. The next lesson. We're going to cover how to change font size so we can make our slogan stand out a bit more . I will see you guys in the next lesson.
26. Font size: everyone and welcome to the font size lesson. Now, if you remember in our I D video, we created an I D, which is unique. Toe our slogan. So if we look at the left hand side here will see I d equal slogan. Now we're going to use that to call our i D. So we can change the size of our slogan and make it a bit bigger. So under our age three. Tag, let's use our I D selector by using the hashtag symbol and then slogan. And then we're going to write out the font size property. Now the font size property is fund dash size. Now to fill in the value for the font size property, we can use pixels percentages, or we can use the word small, medium or large. So let's take a look at what those words do. So if you notice there when I typed out small, medium and large, they changed a little bit. But we don't have too much control over the size, so for the most part you'll want to use pixels because you can specify the exact size of the type, so let's go ahead and write out 26 pixels. So now we'll notice here on the right hand side that our slogan is much bigger and easier to read. So that's all it takes to change the font size of any of our different elements that have type. In the next video. I'm going to show you how to change the weight of the phones.
27. Font weight: everyone. And welcome to the font weight lesson in this video. We're going to change the weight or thickness of our fund in our slogan and in our titles down here. So to start out, let's use our slogan selector and let's type out fun Dash, Wait. And now there are a few different values that we can use to change the weight. So the first thing that we can dio is weaken. Type in bold and you'll notice here. Now it's more bold or weaken type in Boulder, or we can type in lighter. And then we can also type in normal If we want to make sure that our font way is set to normal. Now we can also type in the numbers 100 through 900 and 400 equals normal. So let's take a look by just putting in a couple different values. So 600 makes a little bit thicker. We do 300. We may notice that some of the lighter weights don't change, and that may be because of the fought that we have in our document. Now, later on in another video, I'm going to show you how to change the font or typeface. But for now, let's go ahead and just type in bold and leave our slogan at that. Now let's scroll down toe our title class here and let's give that a font weight of 300. So you notice here after I type that in the font weight got a little bit lighter and wasn't quite so strong. And that's what we want for now. So let's go ahead and move on to the next video, where we're going to cover the text, transform property.
28. Text transform: everyone and welcome to the text transform video. Now the text transformed property allows us to alter the text so we can have capitalized upper case or lower case letters. So let's take a look at what I mean by using our H one selector and under the padding here , we're going to write out texts dash, transform and then let's write out capitalize. So if you notice here, it looks like nothing changed. Well, that's because our text was already capitalized because the way we had written it out in our HTML. So let's go ahead and write out upper case, and now you'll notice on the right hand side. All of the tax is now in a capital letter or upper case. Now we can change us the lower case and we'll notice that everything has a lower case letter. We can also set this to none, and that will default the text to however you wrote the HTML. So let's go ahead and change this back to upper case because we want the title of our company to really stand out. Now that's all for this video. In the next video, we're going to cover how to change the color of the text
29. Text color: everyone and welcome to the color video and this quick lesson we're going to change the color of our company name. So to do this, we need to use the color property. So let's go up to our H one selector here and after text transform, let's write out color. And now, to add the value in just like the background color property we covered in a previous video , we need to use a Web safe color so we can use either color names, hex codes or RGB colors. Now we just want to change this toe white so we can either right out the color or the name white, or we can use hashtag f f f s ff. So now if you look at the right hand side here will notice that the color of our techs has now changed to a white. So that's all for this video. I will see you guys in the next lesson.
30. Aligning the text: everyone. And welcome back in this video, we're going to cover the text, align property. The text align property allows us to align the texts either left, right, centred or justified. Now I should warn you to be cautious when using justified text. Justified text is most commonly seen in newspapers because they have very small columns, and so it creates space in between. The words to make the left and right hand side have straight edges. So if you look at a newspaper like this icon, you'll notice that their columns or gutters created in between the columns of text. Now the reason you need to be careful using it on a website is that oftentimes websites have larger paragraphs and not small columns like newspapers. Now let's go ahead and get started by center, aligning our slogan and our company name. So after color in our H one selector, let's right out text align with a dash in between and then let's tight center. So if you notice there right after I finished typing out center, the company name center lined itself. So we want to also center line our slogan. So let's copy this line and paste that into our slogan selector. Now let's go ahead and scroll down on our right hand panel and if we notice here or nutrition information section is centered, aligned and a little bit hard to read. So the left a line that we need to look at what html element we need to call. So if we look at our table on the left hand side will notice that if we call the th tag all of those tags we can change to be left line. So under T d here, let's right out th as their selector and then text, dash, align and then left. So now if we go ahead and look at that, it's much easier for I to follow all of the different words in that column. That's all for the text Align video Before we move on. Let's take a quick quiz and then we'll discuss how to change the font family
31. Font family: everyone. Welcome to the font family video. Now the fought family property allows us to change the fought or typeface better Web page displays Now, because this is a beginner course, I'm just going to show you how to use Web safe fonts or fonts that are already installed on your computer. So let's go ahead and go up to the body selector here and after our background color property hit return and then we'll type out fine dash family, followed by colon. And then we can type out any of their Web say fonts that you see on your screen. So let's go ahead and type out Ariel. And now you'll notice the all of the fonts on our website on the right hand side have changed to the aerial flying. Now, when typing out our font family, we want to set a few fallback funds in case someone's computer doesn't have the first pot. So let's type comma, then type out Helvetica and then comma. And then lastly, we want to type out Sands Dash Sarah, followed by our semi colon. Now, by putting San Serif as the last fought here, that makes sure that no matter what fonts they have on their computer. It will choose a San serif font, so we don't have to worry that our website will look extremely different because someone has a different computer Now. We can also change the five of a specific element by adding the font family property to just that selector. But for now, that's going to wrap up this video. I will see you guys and the next lesson will cover the font style property.
32. Font style: everyone and welcome to the font style video. The font style property allows us to change the style of the text to either italics or oblique, or we can set it back to normal. So for this lesson, we want to change our slogan to italic so it stands out a little bit more. So let's go ahead. And after the text, align property hit, return and type out front dash style and then I tallit. So now if we notice on the right hand side, our slogan is now a night Alec and it looks a little bit different than the rest of our texts. Now, if later on we decide we don't want it to be italics, we could either set this back to normal, or we could just simply delete this since higher property. But we wanted to be a Talic, so let's go ahead and put that back in. Now, before we move on to the final video of the CSS section, let's take a short quiz
33. CSS comments: everyone and welcome to the final video of the CSS section. Now, if you remember in the html section recovered how to create comments within our HTML code. Now, we can also leave comments in our CSS code, but they use a little bit different syntax. So to create a comment, you start out with Ford Slash followed by an ass trick, and then you have to end the comment with an ass trick and afford slash. Now we can type out just about anything in between each Asterix. So let's go ahead and take a look at what we can do now. Typically, when writing CSS, your document will start to get longer and longer. If you're working on a pretty big website or project, so comments are a great way to section everything out. So when you look at your code later on, it's much easier to find what you're looking for. So let's go ahead and select everything from our footer and cut that out and paste that into the bottom here now, above our footer. Let's go ahead and create a comment with afford slash ass trick and then let's type out footer details In all caps followed by an ass trick in another Ford Slash. So now if we're scrolling through our CSS, we can quickly find our footer details. Now, just like HTML, we can also use the comments to temporarily hide or disable our coat. So let's go ahead and disable the footer here and see what happens. So now if you'll look, our background color of the footer disappeared. And if we undo that and fix our comment, it will reappear. So let's go ahead and also add a comment up here for company name and let's go ahead and make it all caps, so it's a little bit easier to find later on. And let's create Wilmore comment for our company slogan. So just like the HTML comments, you'll notice that the comments do not show up on the right hand side there only for the CSS code itself and for you to look at later on to make your life a little bit easier. I want to thank you for coming all the way to the end of this course, but I recommend that you do the last section, which is a final project to practice what you've learned so far.
34. Final project: Hey there. Welcome to the final project. This project is designed to help you practice all of the HTML and CSS elements that we covered in this course, while also giving you freedom to create something original. Once you have that link open, scroll down to the bottom until you see final project guidelines and download the document . Then before we move on to the conclusion video, there'll be a quiz covering all of the different quiz topics in the course. If you have any questions, please reach out to me through the contact form on my website.
35. Conclusion and next steps: congratulations. You made it to the end of how to code basic websites for kids and beginners. I'd also like to take this time to thank you once again for enrolling in my course. You've come a long way and you've learned a lot of new information. Now, remember, learning how to code is something that takes time and practice. The only way to truly get better is to continually practice and keep spending more time doing not only what you just learned in this course, but learning more. Should you have any questions about html CSS or this course? Please contact me through the contact form on my website. I wish you all the best of luck in your future coding endeavors.
Kevin Kennedy, Product Designer
