Transcripts
1. Introduction: Hello and welcome to Web Development Fundamentals, HTML and CSS. I'm Chris, I self taught web developer and the creator of two successful classes here on Skillshare, understanding web development and how to efficiently build WordPress sites with Divi. In this class, we're going to cover something that is very fundamental for building for the web and that is the use of HTML and CSS. HTML is the markup language that gives structure to webpages and applications across the web, while CSS is the style sheet language used to describe the presentation of HTML. HTML and CSS worked very closely together to create the visual look and layout of your website or web application. In this class, we're going to cover them together. Whichever specific path you choose to follow as a web developer, one thing is for sure you're going to need some knowledge of HTML and CSS. If you're ready to dive in and learn the fundamentals of HTML and CSS stay watching and I'll see you in the next video.
2. What you'll need: Before we get started, you're going to need some necessary tools for web development, as we are only doing front end web development, just with HTML and CSS. All we're going to need are two things, both are for available for free. The first one is, a web browser. I use Google Chrome. Your Web browser for those of you who haven't heard the term before, it's just the thing that you use to browse the Internet, but you can also use it to open any web page, even if it's just on your computer written in text file. It basically interprets what we're building today, HTML and CSS, and displays it. That's very important for what we're about to do. The second thing is a code editor, and I use one code atom. It's developed by GitHub, and is one of the more popular ones, but you can use whatever you want for EVA. In terms of browsers, most people will use Firefox, Safari, Internet Explorer, or Edge, that actually covers 90 percent of Internet users. Firefox and Chrome, which is the one I use are available on Windows, and Safari is available on Mac, and I'm pretty sure Internet Explorer or Edge, which is a newer version, is just Microsoft I think that's only PC, but I would recommend Chrome, Safari or Firefox. I've got these all installed on my computer as well. Let me just open Firefox as well. The reason why I recommend these three is they all come with developer tools. What I mean by that is if I go into Google Chrome, which is my preferred browser, and I press Alt command I. This will bring up my developer console, and you may not understand what's going on in all these different tabs here, but it's very powerful to have this. This makes it much easier to debug. We can edit our website or any web page on the fly to test new things, we can see styles that are applying. It's very good to have these tools when you're developing for the web. Safari, I believe it's, called Web Inspector. Show Web Inspector. I think we need to go to an actual page first. Let's just go to Google.com.au, show Web Inspector, and as you can see down here, we have a similar interface, and on Firefox, what do they call it? Console. I just use chrome. I'm not sure what they call it, but we'll find out in just a sec. They just call it the inspector. So you can go into, Tools, web developer, and click on any of these to get a similar interface. You'll see the inspector where you can inspect elements console, debugger. Again, don't get overwhelmed by all of this stuff. I'm just letting you know in terms of choosing your browser. If you just stick to Chrome, Firefox or Safari, you'll be more than okay. If you want to follow along as closely as possible, Chrome is definitely a good option. The second thing you're going to need is a code editor. I've been using Atom for a while now and I really like it, but there are other options of a free options like Sublime Text, you could use Vim, or you could use another one called brackets. All of these I'm quite sure are free, and they all work in a similar way. Again, if you want to follow along as closely as possible with what I'm doing and you just don't have a preference towards a code editor, you can just choose atom. One thing I should say is technically, if you're on a PC, you could use Notepad to develop web pages as well. I'm pretty sure on Mac, I could use TextEdit theoretically to create web documents, but you won't get all the special features that make it easier to develop for the web as you would on a code editor like Atom, Vim, or sublime text. I would highly recommend picking up a proper code editor, and not developing through Notepad or TextEdit. Again, if you don't know what I'm talking about, just download Atom or Sublime Text or Vim, and you'll be sweet. If you've got a code editor and a web browser, you're pretty much ready to go. Those are the two things that you really need. But in terms of knowledge, if you're starting from scratch, if this is your first time learning about web development, I definitely recommend you go and check out one of my previous courses, so you can just head to my profile, and my previous course, understanding web development, a beginners guide to the web. This will give you an overview of all of web development, and so I highly recommend anyone coming to my courses after that one to go back and refer to that one. We talk about concepts, like HTML and CSS, but also how that fits in with back-end programming. The difference between front-end and back-end, how to deploy your websites, getting a server, all those different things. I just provide an overview of web development in that course, and so I highly recommend that one first. Just so you know, where HTML and CSS are fitting into the overall picture of web development. Otherwise, if you feel you have a good understanding of web development or you've already taken this course already. We're pretty much ready to dive straight in and get started with some HTML. I'm really excited to get started and I will see you in the next video.
3. What is HTML and CSS: In this video, we're going to cover what is HTML and CSS. We actually discussed how HTML and CSS in one of my previous classes, understanding web development, so if you've taken this one, you probably already have a pretty good understanding of what HTML and CSS is. But in this video and in this class in general, we're going to dive a little deeper into it. A good place to start understanding HTML is the introduction on w3schools.com. If I go to w3schools.com, I click "Learn HTML" and then I click "HTML Introduction", it talks about what is HTML and gives us a simple HTML document. I think they do a pretty good job of summarizing HTML, it stands for Hyper Text Markup Language, and it describes the structure of web pages using markups. You've got elements that make the building blocks of HTML pages, elements are represented by tags, and inside tags are pieces of content. An important thing to note is that browsers don't actually display HTML, but they use them to render the contents of the page. So basically what we see here is code that is interpreted by our browser in order to construct the page and see what it is you see in your browser. This is a little bit meta, but we're on a web page right now. What we're looking at is the results of HTML and CSS put together in our browser to create a website. But how we get to that point is through HTML. Just to drill this home, we can go to any web page, say for instance, this web page, and right-click on it and click "View Page Source", and then you'll see what actually is fed to the browser to give you that result over here. This is a pretty complicated example I guess, you've got at the start, lots of CSS here that's embedded in the page. You can scroll down and see some JavaScripts there. I wouldn't get too confused by that, but you can start to see here lots of HTML with classes and other attributes. I don't expect you to fully understand what's going on here, that's what this course is about. But I just wanted to make the points, everything you're seeing in your browser is HTML and amongst other things like CSS and JavaScript. How can you think of HTML? I like to think of it as a structure, but also defining elements. As you can see in our document down here, once we create a tag, we're defining it, but where we place it inside the document, defines the structure as well. As you can see, this paragraph tag is after this heading tags so if we were to change the order, that would change the structure, and as you'll see as we go through the course, we can nest tags within tags and creates, I guess, a tree of elements that is known as the Document Object Model or the DOM. Again, don't worry too much about that, we are going to cover the Document Object Model for very long. That's a little bit about how HTML, what is CSS? Well, we can go to the CSS menu item on w3schools.com and go to the introduction page of that and we get a little bit of an overview. Basically, CSS describes how HTML elements are to be displayed on your screen, on paper or in other media, as it says here. It stands for Cascading Style Sheets, and we can store our CSS in different places, reuse different styles, it just makes everything more organized when we store CSS in separate files or define rules within the same document as the HTML. Again, we're going to cover all of this, so you'll see it happening right in front of you. But if we go back to the page source of any website, let's just do this website because it's right in front of us, we have CSS right here, and that is actually embedded CSS rules in the document. But if we go down to any element, we can maybe start to see, and I'm not seeing something come up straight away, but we can search style, and we can start to see a HTML element with an attribute of style, where we can also define some CSS as well. You can go to any web page and you can see CSS and you can see HTML. But oftentimes, the CSS code is stored in another document that is referenced by this document. We'll see that very shortly as well. In the meantime, to drill home the difference between CSS and HTML, I want to show you a web page that has no CSS whatsoever. For this, I'm going to need a certain extension. You don't need to download this extension, I only downloaded it for the purpose of this demonstration so you can just follow along. But if we go to any website, let's just go to Google.com, and I have this extension here which allows me to disable all styles. I can go into the CSS menu of this, press "Disable All Styles", and you can see what the Google home page looks like without any CSS. I'm currently logged in, so there are some of my information there. But essentially you can see that the search box there, is there, you're getting the suggestions, I guess, this is showing up and you're getting the buttons and the images, but it's all over the place and it's not styled nicely. If we turn it back on, you'll start to see everything's laid out, and you can start to see the importance of having CSS because this website here is pretty much unusable. But to be fair, the Internet nowadays heavily relies on CSS and styling. There is examples I could show from the 90s or something, where there's no CSS involved whatsoever. Actually I do have an example to show you. If I go to www-cs, I found this web page which apparently is created without any CSS whatsoever. I was able to go in and find that it was loading a stylesheet, but we can just go in and delete that link. This is pretty much what a website looks like without CSS. As you can see, the links here are either colored purple or dark brown, I guess, you could call that dark purple, blue, or if you click on them, you can get red. You'll see that the elements are like stacked on top of each other, there's no columns, it's basically just images, texts. You can bold some text, that's about it, you can put in some Chinese characters that looks like, you can put in links, you can put in this horizontal rule, and you can stack links on top of each other, but you're pretty limited. I mean, in the 90s, you might be able to get away with a website like this without CSS but in today's day and age, you absolutely need CSS and it's so vital to making any kind of web document. I hope that communicates to you just how important it is to have CSS alongside your HTML, and how together they are fundamental and complimentary. One thing I'll mention about HTML and CSS is that when you start researching it on the web or checking out other courses, you might hear people or read people referring to HTML and HTML5 as though they are different things. Like if I search HTML5 on Google, I get a bunch of articles with HTML5 in them obviously, and if I search HTML, I just get HTML. It's similar type, websites like w3schools.com, both have a page on HTML and HTML5. It can be quite confusing knowing, well, what are you learning in HTML or HTML5? As you can see, HTML5 is the latest release of HTML, and it's been out for almost three years or around three years now. It's definitely the new version of HTML that has been around for a while. I'm just going to refer in this class to HTML and HTML5 as basically the same thing because we should be developing in HTML5, not HTML4 if we're learning web development today in 2018, or forever on if you're listening in the years to come. Same thing with CSS and CSS3. If we type in CSS, we'll see all these links, CSS3 and you've got similar web pages that differ from CSS to CSS3. Again, CSS3 is just the latest version of CSS and I think like HTML, it's been out for a very long time. I'm just going to refer to CSS, and CSS3 as basically the same thing in this course. That's enough theory for now. I don't know if I needed to talk about CSS and CSS3 but it is something that has confused me as well because I've seen HTML here and HTML5. People often refer to them as separate things, but at the end of the day, we are learning HTML and CSS in 2018 or beyond. We can just think of HTML and HTML5 as the same thing. That's enough theory for now. In the next video, we're going to stop talking about HTML and CSS and actually start developing some. I'll see you in the next video.
4. Getting started with HTML: First up we're going to open our code editor. For me, it's Atom. While that's loading, I will go back into our browser and let's revisit that page by W3 schools. So I'll go there. Click "Learn HTML", click "HTML introduction". So I want you to scroll down to where it shows you this simple HTML document. Let's have a look at what's going on here. There's two parts to this, and one is the tags. You can see the tags from these less than sign and greater than sign with a bit of text in-between. Then there is content, which is just text in this instance. You've got Page Title, My First heading, My First Paragraph. It's actually formatted quite nicely here and your code editor should do the same. You can see these different parts color-coded. So you can tell that this is a tag and you can tell that this text is part of this tag from the color. So with tags, you've got opening and closing tags and tags with no content. So up here, for instance, this is a tag that doesn't have an opening or closing. You only need to put this in once. But if you look to the next tag, we've got HTML. But then down here we've got again, but with a slash in front, and that denotes the closing tag. Basically, anything that is in between the opening and closing tag makes up what is that tag defining. That sounds abstract but if we look at a more concrete example here with the title, this denotes that the title is starting. Then we put in the title and then we use the closing tag to say we have finished putting in the title. The title goes into what's called the head section of your HTML document, but there's also a body section that is opened and closed here. We're going to go into head and body in just a minute, but what I want to get across here is that we've got tags. This is the basis of HTML and what's between the tags and what's in the tag here defines the element. In this example we've just got text, but we can put anything in there, we can put other tags in there. We can put images in-between, and basically, this is HTML. This is our markup, it will be a very simple example. Now what I want to do is take this whole example and move it into our code editor. So I'm just going to select everything. Press "Command C" on a Mac to copy. I'm going to get rid of these welcome messages from atom. I'm going to click "New File", and we're given a blank file. Now there's no formatting yet because it doesn't know what type of document it is. So what I'm going do is I'm going to click "File" and save this straight away. So what you need to do now is to navigate to where you want to store it. As we move throughout the course, we'll be adding more files, so we should really set up a project directory. I'm just going to go to desktop and create HTML and Css project. I'm just going to call it that. So now we have a folder to house our project in. What I'm going to name this is index.html. You don't have to call yours index.html. The important part is that you've got dot HTML at the end because that will tell your computer and anything else that's trying to interpret what that file is, you're telling it specifically that this is a HTML document. Index is a common word or name to give a HTML document that sits at the center of your project. So I think index in this case, dot HTML is a really appropriate name. We'll click "save" and suddenly you'll start to see the colors come in similar to what we had here. So we'll see some formatting here and we can clearly see what's a tag and what's a piece of text or content within the tag. The other great thing about having a code editor that is, I can click on the opening and it'll highlight the closing so you can start to see where it closes. If I was to just do this and get rid of the closing, that would break my document. Maybe it'll still show up in this instance. But once you have a full document, you definitely want to be closing at all times. Now just to make it a Little bit easier to show nesting, I want to indent the title so that you can see that it sits within head, and I want to indent this because it sits in body. If we were going to create another tag and put it underneath, I would expect to tab across as well. You'll see this a lot in web development to show off nesting, but we'll cover nesting in a future video. Right now, I just wanted to go over the tags we had here. I mentioned we have empty tags, so there's no need for a closing tag, but then we have these opening and closing tags. At the very top, we have HTML, which defines that this is an HTML document. There's not much more to say about that tag except that try and keep everything in between those two. We've got the head section. The head section is where you put in your metadata. We're going to do a full video on HTML head later in this class. But for now, one of the things that you're going to need on your web-page is a title. So we can put title in-between the head tags. So when you view your document in a browser, maybe let's just go right in now. What I can do is click on "finder" new finder window. I can navigate to where my project is and I can literally drag this index.html write into my browser. As you see here, this is not an address on the internet, but were still able to interpret it through our browser because it is simply HTML and Css and JavaScript when we add it to this project. So as you can see, page title sits up here. If I was to go back into the code editor and change Page Title to HTML document and click "Save" then reload this file. You'll see that the title of this page is now HTML document. So you can start to see that right here everything inside the window of your document is the body. Then everything that is in head, if we go back to here, is stuff that supports that. So you've got the title that goes into, when you're looking at a tab on Google Chrome or you're opening up a window that will show up on the window itself. You can put in other things here related to SEO, you can link external style sheets into here. Again, we're going to go into head in more detail later, but that is essentially the difference between head and body, which is what you see here. I did say that we would cover nesting in a later video, but it is a simple concept so I will just cover it right now. I'm going to throw you some elements in that you may not be familiar with already. Don't worry, we will cover them later. But just to demonstrate nesting, if I was to grab this paragraph tag, put it in here, call this second paragraph. Then within here have another div tag. Divs are basically just blocks in HTML. Then I can put in my third paragraph, you can start to see nesting happening here. So as you can see, we've got body and within body we've h1, P and div. Within this div we've got P plus another div, and within that div we've got a P, that is essentially nesting. Right now It's not going to make too much sense until we have more elements logically presented on the page. But essentially, you've got this h1 tag, a P tag, and then a div that goes right after it. If we were to define some styles on this div tag, it would affect everything within it. These are called children of this tag and this is called a parent. But again, I'm getting a bit technical here. We don't need to go into that much detail just yet. But essentially, you're going to see this a lot in HTML and it's called nesting. I'm just going to reverse those changes by pressing Control Z. That pretty much covers the basic document you have that we found in the example here. So in this video, we got acquainted with title, we got acquainted with h1 and P. But there's a lot more elements to use in HTML. So in the next few videos, we're going to cover some of the other elements that can make up your HTML document. So I will see you in the next video.
5. Headings and Paragraphs: In this video we're going to cover headings and paragraphs. We've already got a heading and a paragraph within our document already, but we didn't really explain how each of these elements work. With heading tags, we can go back to w3Schools and start to dig into headings a bit more. But as you can see, they have a great example here where they're creating six different headings within six different sizing. But in reality, headings are more important than just the size. Search engines actually use headings to index the structure and content of your web page. There are two important points to mention here about headings. Let's go back to our document here and see that we've got an h1 tag, why have we got an h1 tag? Well, h1 is meant to be the top level heading. If I go back to our document, I'm going to open up a new tab and just drag it in again so I can have both open, and if this was say, a blog post or a document about page or whatever, let's just say it's an about page, you would use h1 to say "About Us". Just for consistency, we will create a title here that says, "About Us" as well. Make sure you're always saving. I'm just using Control S but you can also go "File Save" there and flip back to your document and as you can see, the title is about us and the top level heading, which is defined by h1 is there. Maybe if you were doing a documents, a post about us, you would have about us, a first little paragraph, but maybe you want some subheadings as well. The next level heading would be h2. About our history, maybe if this is like a company or a duo, maybe you want to have a sub-level heading, and then you would put in another paragraph tag maybe and then we could have multiple h2's on that level, if that makes sense. Our history, our values, let's say put in there, and I could throw more text into these paragraphs, but this is just demonstration purposes, obviously. If I go back into our browser and refresh, you can see that our top level heading is about us and our history and our values comes under that. Now in HTML you have up to six levels, so you can go deeper and deeper, maybe there is two headings under our history. So you would go and use the next number h3 to go deeper and have another sub-level heading, but as we mentioned just before, it's also important what headings you're using for SEO. Don't just think of h1's as the big aversion of h2 and just think about size when you're writing your HTML document, you definitely want to follow the structure where you have your top-level heading, which is h1 and then everything under it goes down in numbers. It's not just about the size of the heading, it's also about making it more readable to the user, but then also telling search engines like Google, the structure of your page and that is a tool that Google uses to figure out how to index your page, but then also to figure out how readable it is. Structure is important for the reader, it's also important for search engines and all you got to know is that you got to have heading one as your top level heading and then work down from there. If we're going to have a heading underneath heading one, it'll be h2 and then heading underneath h2 would be h3 and so on and so forth. The other thing you can do, which is not really a heading, is a horizontal rule. It's defined with the h as well. But basically, if we wanted to have a separation between those two headings, we can put in a h tag. This isn't a sorry, a hr tag, this is a self-closing tags, so you don't need to put any content in it. You don't need to do this, for instance, you can just put in the less than sign, hr, greater than sign. Going back to our page and you can see there's a horizontal rule in there. The next thing is paragraphs and I'm going to refer to W3Schools as well. The important thing to note about HTML and making paragraphs is you can not change the output by adding extra spaces or extra lines in your HTML code. This should be defined by using paragraphs by specifically saying that you want to have a line break, and you'll have to put in HTML entities and the like to get more white space. Again, don't worry too much about that, we will be covering that in a future lesson but for now, let's just demonstrate this. Our first paragraph, and then let's space down and say hello, goodbye. Let's go back and you can see that oldest white space that we created and outline break, it doesn't come across. Paragraph, if you wanted to have separation of lines, one way you could do that is by putting this into another p tag and that tells your browser that this is a new paragraph so have some spacing in between. If I want to put that back to how it was, put in hello, goodbye. Now you'll see it's on a new line because it's a new paragraph. It's in this new a paragraph tag but again, the white space in-between, isn't there. A way to get around that is by using the pre tag. If you use the pre tag, it will display with a fixed font and it will preserve both spaces and line breaks. If I go back into here and we create a pre. Actually, let's just modify what we already have, I'll add and re into that. Now that paragraph element, that paragraph tag is now pre tag, and as you can see, we've got this weird font but we have got our line spacing. I don't know a situation in which you would need to use pre. Sometimes as a developer, it can be useful to display code because code you want to show indenting and a little bit of formatting, but oftentimes it's best just to use pre if you wanted. Weird amount of white space in-between words, there's ways you can do that but if you wanted separation between having new lines, you can have a new p tag like this. Another way to have new lines is also to use another empty tag code, br. If I just go in-between these two words and put a br in, pretty sure that stands for break and you can go over here and see that now there is a line break. It's a little bit separate because there is no padding or margin between these two lines. If you just wanted to break the line, you can do this, but if you were writing lots of paragraphs, you would maybe once you put them in different paragraph tags and having it structured like that will make it easier to style down the track, because you can define how big you want the gap to be between the different paragraphs. The same goes for up here with heading one in your styles, which we'll go into in CSS, we can define how big this margin is between here and our first paragraph. That's pretty much headings and paragraphs. These are the most simple building blocks of your document but in the next video, we're going to go into three really common ones that you'll see all the time in HTML documents. I will see you in the next video. Let's continue building our HTML document in the next video.
6. Links, Images and Buttons: As I mentioned in the previous video, links, images, and buttons are pretty common in HTML, and that's what we're going to cover next. What each of these does is pretty self-explanatory. I'm just going to jump straight in and put in some links, buttons and images into our projects right away. I'm going to first need an image, and I must admit I haven't prepared one earlier, so I'm just going to find one now, and force forward. I got this random image here, and what we are going to do is put it in the project directory alongside my HTML document. That is a crazy name. I'm just going to call this photo just for simplicity Stake. There we have a photo that we can reference and bring into our project. I'm going to go back to my code editor and I'm going to go after the headfirst heading tag, the H1 tag, and I'm going to create an image, which is pretty simple. We just do an image like that. Now of course, if I just press an image tag there, nothing's really going to happen because we are not really telling the document where the image is coming from. There needs to be an attribute. This is going to be our first look at attributes, but we're going to go deeper into it later. If we do a space after the name of the tag and put in some text, we will see that in brown in my particular case because I'm using Adam. What we're doing here is assigning an attribute. I'm going to press "Equals" and then I'm going to open and close brackets. Because what we're putting inside here is called a string. A string is just a technical term for some text. But the quotation marks basically say, take this word for word. Again, don't get too worried about all the syntax here. Just know that you have to put in some text, equals, and then some text on the other side of that equals within quotation marks. You can also do single quotes as well if you prefer. That, we'll see the implications of that later on. All I need to put in here is if we go back here, the name of the file and where it's stored. Seeming it's in the same folder as our HTML document, I can just put that in there. I'll press "Save". Go back over to our HTML document and suddenly you see the image there. But what it's going to do is it's going to blow that up into the full height and width of the original photo. What we can do is put in some other attributes here, width and height. You can also define width and height in CSS. But because images have been around since the early days of HTML, we are able to define widths and heights of them as well. What I'm going to do here is constrain it to 100 pixels, and the unit for pixels is px. Don't put a space in-between. Make sure to have it right next to the digit. Then what I'm going to do is I'm going to press "Save". I'm going to get back to here. Then you'll see it's 100 by 100, but unfortunately, the image wasn't squared to begin with, so you've got some stretching here. If I go, sorry, I did that a bit too fast, using Chrome, I can right-click on here, click "Inspect". I can see our HTML document in an interactive way inside our browser. What I did just then was I went to inspect that particular element and it will show me the tag that's creating that element. Then what I did is I hovered over photo. JPEG. I can see here the natural sort of aspect ratio and pixels that it was originally. You can see here that these two numbers are the same. If I make it a square, it's going to look a little bit weird. Let me do some quick calculations to figure out how we can keep those proportions. We want it to be 9.6 times smaller than it originally is. We can put the height as 75. I'll go back in here, put the height in as 75. That should give us roughly around the same dimensions, there you go. There's our image. We can also put in a link. We can do that by using what's called an anchor tag, and it's very simple. It's just a, and then you close with an a tag and then anything in-between these a tags is the text that is linked. I'll just put in, This is a link, and if we save, go back here. We can see that there's a link there, but it's incomplete. That's because we haven't given it an important attribute called href. If I space to add an attribute and I put in href, and I use the same convention, equals and then double-quotes. I can link it somewhere. Now we don't actually have another page to link to. What I'm just going to do is put a placeholder in here and a common placeholder is just a hash or a pound sign if you're from America. I'm going to press "Save", and I'm going to head back here. Then suddenly we can see the link is formatted like a link. Not only is it got blue, and if I click on it, it's got red. Then after I've clicked on it, it will turn to this purple color. It's also, you can see my cursor change when I go over it. Over here I've got this texts, highlighting tool. Then over here I've got a cursor to indicate that I can click on this. Again, it's not going to do anything because we haven't linked it to anything. Let's just say we had a page that was called blog. Then we go back. If I was to click on this, you'll get file not found because we don't have that. In fact, I made a typo there. I just want to put it like that. If we press this, we will get a blog. But we don't have anything at blogs, so we won't see anything. Good placeholder for now, is just to have the hash or the pound, and we still get the formatting of a link and the behavior of a link, it just doesn't go anywhere. Now the final thing was a button. I guess a button works similar, but it comes with certain attributes or stylistic properties that just come standard. We can define a button like this. Then in between the opening and closing tags, we can put in the text that's going to appear in the button. We can say this is a button. I', going to save that, go back, and you can see here, this is a button. We can achieve a similar look, styling, a link tag. But a button just gives you a button straight out the gate. If you just want to put out a button, it may be assign some JavaScript to it. You can have it so that when you click this "Button", let's go demonstrate this with an extra property called on-click. We can just do basic alert, Button clicked. Don't worry about too much about this. This is all JavaScript which we're not covering in this course. But if I click on this now, the page says button clicked. That's the way we can get some interaction with buttons. But essentially, often times I'll find myself stylizing a link tag to make it look more like a button. You can get a similar look and a similar behavior from a button, as you can from a link tag. There you have it, the building blocks of basic HTML. We've got an image, we've got a link that doesn't really link anywhere, and we've just got a random button that will give us an alert. As you noticed, we went into attributes a little bit in this video. We've expanded on just the tag names, just the content, but now also assigning attributes. In the next video, we're going to dive deeper into attributes so that we can understand the more attributes are very important in HTML. I will see you in the next video.
7. HTML Attributes: In this brief video, I just wanted to talk a little bit more about attributes. As you saw in the last video, we used some of them, but I just wanted to get a little bit more theoretical in here, so that you understood attributes better and we can move on and use them more often without there being any confusion. If we go back to W3Schools and we click the menu item for attributes, here are some really common ones. The href attribute we just used. We give the link address of an a tag with href. Again, you'll see this format continue on. We've got the attribute name, we've got the equals sign for assignment, and then we've got a piece of text within double quotes or single quotes. Again, we did src in the last video, so we can give an image tag, the actual address of the image in which we want to display. We can define width and height. Another important attribute is the alt tag. The alt tag is an attribute that specifies alternative text to be used when an image cannot be displayed. It's basically a way of describing the image because maybe the title of this image is not that descriptive or it's not really known what the image is, especially when somebody is listening to a webpage i.e a blind person. There are certain screen readers that can actually read images, but only if you define an alt tag. If you have a picture of a girl with a jacket, you should put in an alt attribute there to share with the screen reader what the image actually is. The other thing to note about alt is it's a good idea for SEO purposes. To have your website show up in Google more regularly, to have an alt tag because then you're giving more information to Google to figure out whether your article is relevant. If you're writing an article about girls wearing different outfits and you had each of your image tags with a girl with a jacket, girl with a dress, so on, so forth, you are showing to Google that those images are actually relevant to the content of your page. We go down and we see another really important attribute, and this is bordering on CSS here, is the style attribute. We don't have to create a separate CSS document to define styles on an element. We can go right into an element, so I'll show you here and we can define a style. Same convention, style equals open and closing quotations. We can put color in American spelling. Let's say green. You put the semicolon there to say that this is the end of that style and we click "Save", go back to here and we can see that that paragraph is green and we can see it happening over in our developer tools. That one Is really important, we'll get more into that in later videos. Title attribute, we can add to p tags to display a tooltip. That's a cool little feature. Never really used that though, and we have some recommendations here from W3Schools which I think are pretty good recommendations. It doesn't require lowercase attribute names, but they highly recommend you use them. it's just good to have a convention. We could do style like this, but there really is no need. Just keep things clean and have it as a lowercase word. Also important is that you make sure you use quotes. Apparently, you can get around it. Apparently, HTML5 does not require quotes but it is still a very good idea to have them and if there's a space in between like in this example, this is going to break because it doesn't know where the attribute and its value is ending. If you just put a space in there, that could be a new attribute. We don't know. Always use quotation marks. But we don't have to do double quotes, we could do single quotes as well. We could just go into here, for instance and instead of double quotes, put a single quote in, save that, go back to the page, we get the same result. That doesn't matter either way we can use single quotes or double quotes. If we were to do this example here and put a title on one of the p's, we could, let's see. Let's go into title here and say this is the second paragraph called, and then we put in another double quotes, second paragraph. See how we've broken it now. We have these double quotes to start and end the attribute value. As you can see from the coloring here, it looks like to the code editor and the browser that we have ended that string. I don't know what's going to happen. If we refresh the page and we go over to our second paragraph, we will see that it ends after called because we put in a new quotation mark. If we look at the element in our developer tools, we can see that second and paragraph have come up and they're in a different color and it's just a mess. What we can do to get around this is simply by changing the type of quotes. We can use single quotes now instead and then we can press "Save" and then when we hover over, we can have part of the text that shows up in quotes. But if you wanted it double quotes for instance, we just need to change the positioning of these. We could have, starting with single quotes and ending with single quotes, and then this particular piece of text have double quotes surrounding it. If we hover over, we can see that. It's just important that if you want quotes within your actual text in your attribute, that you need to use the opposite of what you use, the alternate. If you opened it with double quotes, you're going to need to use single quotes inside, and if you opened it with single quotes, you're going have to do vice versa. That's a final word on attributes. If you want to get more nerdy and geeky about it, definitely check out this page on w3schools.com. But those are just basically the things I wanted to mention about attributes. Now I feel like we can move on and use attributes throughout our project. In the next video, we are going to cover three other important elements in HTML. We're going to cover tables, lists, and blocks. I'll see you in the next one.
8. Tables, Lists and Blocks: In this video, we're going to cover tables, lists, and blocks. Again, a great place to start is on w3schools.com They have good reference for lists, tables, and blocks here. Starting with lists, there are two types of lists. Basically within HTML, an unordered list, which is like dot points, and an ordered list which is points that have an order, so at 1, 2, 3, 4. You start these lists in two different ways. UL, for an unordered list so like this and ol for an ordered list. I think if I scroll down here, there we are, ol. That marks the opening of a list. That marks the closing of a list. Then in between you will put your list items, which uses the tags li. Let's do that right now in our project. Let's go back to our page, navigate over to our code editor. Instead of having a paragraph here, we can have an unordered list. I'm going to open an unordered list and then close it straightaway so I don't forget and then I'm going to inside that, put in some list items. Let's say integrity, let's say honesty. I'm just making up stuff here, empowerment. If I press Save on that, go back into the document, you can see here we've got an unordered list. To change that to an ordered list all I need to do is go to the u and ul and change that to o for ordered list. I can go back and now it'll have an incrementing number for each of them. Now you can take lists further by having types. You can describe them in different ways. You can do a description lists. Honestly, I hardly ever do this advanced stuff with lists. Oftentimes it's just an unordered list or an ordered list and then some dot points. Again, you can nest within these as well. If you wanted to have a set of dot points within a dot point, you can do that as well. I can put in and unordered list here and put in a sub-dot point, integrity for customers, integrity for our stuff. Save that. Go back to here. Now you can see that it's a sub point of that dot point. You can nest ordered lists and unordered lists. I can change that to ordered and now you can see you can interchange the two. If you want to get more detail with lists. Definitely check out this in the reference. But I think that pretty much covers lists in a basic way. I don't have to do much advanced stuff to be honest. That pretty much covers a lot of what you need to do with lists. The next one I said is tables. I'm going to click on HTML tables here and you can define a basic table with the table tag. Then you can define a row of tr. You can make the first row a th, which means it's there header row, and then every cell will be defined with a td. Let's see what makes sense here, may be put in a timeline here using the table. I'll go back to here, and I will create a table. For the first row, it's going to be a header row so instead of regular table cells like here with td, we're going to give the first row th. I'm going to call this th, January 2016. Then I've been another one. Again, I'm just making this all up for demonstration purposes. Let's just save that and see what we have so far. Okay. Right now we have no table border, so you won't actually see the outline of the table, but we'll get to that in just a second. We can add in a new row and put in some table cells now, which because it's not the first row, because it's not a header, will just use td. Then we started our company. Going back, now you can see that it's aligned in columns, but you can't actually see the outline of the table. If you wanted to do that, we can add an attribute to table for border. Let's have a look at how we do that. If I do border. I can see that I can apply some styles, but we're not going to do that yet because we haven't gotten to that part of the course yet. Then an old-school way of giving our table a border is by going in here and typing in border 1. If we save that, go back here. Now we get these old school borders just to see that we actually have a table. Think the modern way to do it these days is to format a table using CSS. But we haven't gotten to CSS yet, so I will save that for a little bit later. But here you can see that we have a table. Now if we wanted to add another row, we could easily do so by adding another tr tag and then putting in table cells. Maybe we can put some commentary on these different timeline points. Save that move over and you can see we've added a new row. Now if you want these rows and columns to expand over multiple columns and rows, let's just show that now I'm going to delete one of the table cells, so we've only got one here and see what that does. You've got this whole table, but we can see we're missing a cell here. What happens if we want this cell to extend across the table? Well, we can do that by giving an attribute to this table cell called colspan. I will say 2 because I want it to span two columns instead of just one and there you go. We can do all alignment and formatting within these tables, but we'll get to that in CSS essentially if you wanted to do the same thing with rows. Maybe we add in another one here, this probably won't it makes sense, but I'll demonstrate it anyway. We can put in front of this row span of three. I'll press Save on that. You can see that we have a column that goes across three rows. That's essentially tables. That doesn't quite make sense so I am going to get rid of those rows spans now. I'm going to get rid of this third row because it doesn't really add anything. There we go. We have a little bit of a history which we could go in, create another row, another column by putting in a new cell in each of these rows. There you go, there's tables. One thing I'll say about tables is don't rely on them for structuring your HTML document. Tables should be used just for tables. If I wanted to present timeline or maybe a schedule or something that would need a table. I would use a table, but for having columns on a page and having a responsive design. Tables aren't the best and for that what's great is blocks. I'm going to go back to w3schools.com and click on HTML blocks. The most common block-level element you'll see in HTML is by far the div tag. You'll see divs absolutely everywhere and a div by default will always start on a new line and take up the full width available. Rather than talk about it, I'm just going to throw it in right now and show you what's a good place to put it. Our project is a bit of a mess at the moment, but what I'm going to do is put in another horizontal line, put in another heading and let's just say Our Services. I'm going to put in our div tag and inside the div tag, I'm going to have a bit of text. Let me go to Lorem Ipsum. This is a website where you can get Lorem Ipsum. It's just basically dummy text. I'm going to put that in there and then I'm going to create another div underneath it and put that Lorem Ipsum in again. I'm going to save that, go over to here and you'll see it breaks into a new line. But unlike paragraphs, there's no spacing between them. Right now, I guess it doesn't really necessarily makes sense why you would have a div. But as we move into styling and structuring our document with CSS, you'll see how flexible a div is. For instance, if I just wanted to modify this on the fly right now, I can see this div here. I can restrict the width of the div. I'm going to restrict it to a 100 pixels, and then now it'll only show up with a width of a 100 pixels. What I can do is change display to display inline. Again, we're going to get into this later on. But if I said that for the two divs, width, 100px and display inline-block. You'll now see that they show up next to each other. That's just one of the examples of how we can modify in whichever way we want the content within a div. But again, I'm getting ahead of myself or we need to know for now, is that divs are good building blocks of HTML and you'll see them a lot when you're developing HTML and CSS. I have a block level elements in HTML include these ones. Then of course you've got inline elements. These do not start a new line and they only take up as much width as necessary. One of the common ones you'll see is a span. A span helps you to modify just what's inside. It doesn't create any new padding or spacing. Again, it's best just to show you what I mean when I say this. If we were to go back into our document and I was to put a span before dummy and close the span afterwards. That gives me control over this one word dummy. I can go style and I can add some styles to it. I could make the font size much bigger than everything else in that paragraph. I can make it font size 50 percent bigger and now you can see that word is 50 percent bigger than everything else in this div. I can use this for other formatting. I can bold different parts. I can target different parts, put a class on them. Anytime you want to target or a change, just a word or a sentence, span is a good option. Again, if you refer to the document and w3schools.com, there's a lot of good information in there. As it says here, the div element is often used as a container for other HTML elements. It has no required attributes, but you'll often see that there'll be a style, a class, or an ID. These methods to be able to target and style content. You can almost view div as a group of content, but you can also do whatever you want with it. It's basically a block of HTML that you can target individually and turn it into columns, turn it into a square, turn it into whatever you want. Very expandable. A lot you can do with div and I think rather than talk more about it, I think you'll start to understand more about why div is powerful as we go through. Especially once we get into the CSS section, we will be styling a lot of divs. For now, that's all you need to know about divs. We will get deeper into it as we go. In the next video, we're going to cover how HTML layout elements. I look forward to seeing you on the next one.
9. Layout Elements: All right, so in this short video, I wanted to briefly go over HTML5 semantic elements. If we go to HTML layouts page on w3schools.com, we can scroll down here and see that HTML5 offers new semantic elements that define different parts of the webpage. Just to demonstrate this, there's an example right here. Instead of labeling the different sections as divs or other block-level elements, they are labeling it with these new tags, header, nav, section, article, aside, footer, details, summary. Basically, the only thing that's really happening that's different here is the name, so these operate pretty much the same as a div, it's just more easier to understand when you create a HTML document that you'll be able to understand the structure and see that this tag is a header, this tag is a section, this tag is a footer. Just to bring this time, what I want to do is create a new file, so I'm going to go back to my Code Editor, where I have got the index.html open. I am going to create a new file, and I'm going to save it straightaway so that we know we're working with an HTML document. I am going to go to our project directory and I'm going to call this one layout.html. Remember the first part of that layout, is not too important. You can label it whatever you want, but you need the dot HTML extension so that your program knows it's HTML. What I'm going to do is put these windows side-by-side. Actually before I do that, I'm going to "Right-click" on this example and I'm just going to copy their example. I'm using the inspector here in Google Chrome. It's a similar function, I'm sure in Safari and Firefox, but basically, you don't necessarily need to follow along here. I'm just going to copy what's here and put it into our own document. What I'm going to do is find that element that captures all of this, and I can see that from what it's highlighting. We're going to "Right-click", click "Edit as HTML". Press "Command A" on a map to copy all of that HTML, tab across to my layout.html, and now we have all of that code. Few things I'm going to get rid of are the classes, any classes because that's going to be pulling in a style sheet that we don't have. That's only on the W3School's website. We've got these classes as well, but we can leave them for a sec. What I want to show you in this example is that if we are to open a new tab here, and we pull over layout.html, it doesn't look anything like this. This is the point I want to get across here is that just by using these semantic elements, we're not giving the page styling. We still need to use CSS to get this layout. But what we are doing is when we read the code, we can see, "Oh, that's a header, that's a section, that's an article, that's a footer." Then we can also rather than target based on class, which is what we have here, we can target just on the element name. But again, I'm going a bit into CSS, which we haven't dived deep into yet. You'll start to see that once we get into the CSS section. But in this video, I just wanted to share with you these semantic elements because you may see them often in HTML, and just to let you know that they are pretty much the same thing as a block level element like div, they are just a bit more descriptive. In the next video we're going to move on to HTML forms. Forms are something, you'll probably come across a lot developing websites as well. So I'll see you in the next video.
10. HTML Forms: All right. In this video on HTML forms, we're going to once again a reference w3schools.com. If you scroll down on this menu here you will find HTML forms. A form for those of you who don't know, I think you should come across them a lot online. It should be pretty obvious, but basically it's just this where you have input and then you have a button to send that data somewhere and then you get a certain result. Very vague I know but once you send that data somewhere, you can interpret it however you like. But as we're talking just about HTML and CSS in this particular course. I'm just going to show you how to actually set up a form on the front end. This resource on W3schools is pretty good at explaining it. First of all, you're going to need a form element and then inside that you're going to put in various inputs. Then the type of input is determined by this attribute called type. You had some examples down here. You can do radio buttons. You can do a submit button which will actually submit your form and so what submitting your form actually does is it takes the data and sends it to a particular page or particular address. That is determined by the action on the form. We can also set other attributes which we'll get into in just a sec. It gets a little bit technical here with GET and post. These are two ways of sending data. This is getting a little bit more into the back-end stuff but you shouldn't worry too much about that. This is more about how to set up a form in HTML. What I'm going to do is actually build a form into our little example website. This is About Us page and it's quite messy at the moment. I'm going to get rid of this layout.html and I'm going to do is create a Contact Us page. I'm going to press "New File" and then I'm going to save it right away so I know it's an HTML file and then I going to into the projects, we going to call it contact.html. Now what I can do is just set up, actually I'm going to copy some of this stuff from here, I going to copy this first part. I'm going to copy this last part. So I just did that to save some time, I knew I was going to need a title and a top-level heading. I'll just copy that across. What I'm going to do is drag it right into, open a new tab first, and then drag it right into our browser so we can start working with it. It's not About Us page anymore, so I'm going to change that to Contact Us, and then what I'm going to do is put in a div and then put in a form. Here's me starting a form and it's very simple, it's just form. If I put that in, I'm pretty sure we'll see nothing from the form. There's no actual inputs in it yet. What we can do is let's just put in some text inputs. We've covered this playing in a form tag and now we can put in input type text. Then what I'm going to do is duplicate that three times, press "Save" and go back to the page and I'll show you what we have. I've got these three text boxes. There's no labels. There's no indication of what this is. It's pretty non-descriptive but at least we can see some stuff inside our form. What we need to do is to give it some formatting, give some labels, then also name these inputs so that they're not just for the same thing. The name is very important because when we send the data to the next page or to the address, is going to pair the value with the name of that field. You can actually tell which value is coming from where. What I'm going to do now is give all of these a name. The first one, I'll do first name. Second one, last name. Third one, email, and actually I'll do one more for message. Of course, if we just save that it's just an attribute. It's not actually going to show up on the actual page. What we're going to do is just put in some raw text. I'm doing to do first name, last name, email, address, and your message. Now the other thing you'll notice is that it's all on the same line. So if we just put in these labels is going to be everything on the same line. I'm going to put in some break tags. In future we'll format this with CSS and it'll be a lot nicer. But for now we can just use break tags to break them up. We'll press "Save" and now you've got a very basic, pretty ugly looking form. But at least we've got a form on our page. Now this form won't do anything, of course, we don't have a button to submit anything yet. That is the next important step and what I'm going to do for that is just copy this. Make sure that's inside the form tags, everything for your form needs to be inside those to opening and closing form tags. The value here represents what's going to be on the button. If we save that, go back, it will say, "submit on the button". We can say instead of that whatever we want, maybe you send message. Save, move over and you'll see that it's now changed. Important thing is that you put type submit rather than type text obviously. But apart from that, you almost have a form and what I mean by that is you need one other attribute and that is to put an action on the form. Right now we have no back-end. But if we had a back-end, we would send this form data to a page, a PHP page or whatever our back-end is. That back-end will take that data, validated and then put it into a database or get the process started. After the form is submitted, it require some programming which we're not going to go into in this course. But in terms of HTML, this is basically what a form looks like. I'm just going to give you an example here. If we give an action to this form and this is copy exactly what they have here because we don't have to page anywhere. We will just copy that, save that. We'll go into back into Contact Us, going to go expand fully, and I'm just going to put in some stuff here. Your message, hello, and then I will press "Send Message" and see what happens. You'll see here and so will be a bit confusing for people that are new to web development. You'll see here that the first part is action_page.php. Which if you remember, we put in as an action, and what it's done is a question mark and then sent the key value pairs. Basically remember when I said, it's important when you name your fields. You can see here that is our first name field because we named it that, and then we've got equals and the input that we put in. This is the name and then the value. Then we have an end, and then it goes again. We have last name equals Dodd, email equals, and so on, so forth. Those are called get parameters and by default we are sending a get request. Again, it's getting quite technical but down here we can also send a post request. Sometimes you don't want to use a get request because it sends this inflammation in the URL. Which is a bit of a security risk maybe. If you're sending sensitive or personal information you probably want to use the post method and using post, you're able to send that data and it doesn't actually make its way into the URL. You can also use field set here to group related data in a form that is useful when you want to style. You can also use a tag called legend which will define a caption for that field set. But we'll go into styling forms later in this class. For now, we have our Contact Us page, it's very basic and ugly, I admit but at least we have a form on there. Hopefully, that brings home forms a bit for you. In the next video, we're going to go over [inaudible] assets, symbols, and entities. I'll see you then.
11. Charsets, Entities & Symbols: In this video, we're going to cover entities, symbols, and charset. This will probably be another brief one because these don't often come up when developing in HTML, at least for me, but it's important to know what these are and how to use them for when you do need them. Using W3Schools, I'm going to click on HTML Entities. You will see here that there are some reserved characters in HTML. Now, what does that all mean? Well, let's just look at our code here. Some of these characters that we're using, we're using a less than sign and a greater than sign, quite often, we're using quotes, we're using equals sign. These are used to make up HTML. The problem that you might find when you're developing HTML is sometimes you just want the less than, greater than sign displayed on your screen. But then of course, when you are putting it into here, your software and the browser, might interpret it as HTML, or that you're trying to create HTML. The less than, greater than example is probably the most common one. As you can see here, the browser might mix them up with tags. If you wanted to write a less than sign, we need to use a HTML entity. Here they tell you which ones you can use. If we go back to the About Us page and maybe we want to put in our link, two back arrows. We can put in, I believe we need to put a semicolon after this, and then we press Save. Now we can see that we've got two arrows or two less than signs. On this end, on the HTML side, you've got these weird looking HTML entities, but when it gets to the browser, you can see it's perfectly what we need, two less than signs. That's a common HTML entity there. If we go down to a non-breaking space. In HTML, if you write 10 spaces in your text, your browser will remove all of them except one. To get separation between words, it'll allow one, but then if you were to put in more spaces, it'll just cut it down. Let's show you an example of this. Actually we have the example right here. Hello, goodbye. If we get rid of that br tag, so it's on the same line. You can see that it's cut it down to only one space. It doesn't matter how many times we space across here and create white space, it cuts it down to one character of white space. How do we get around that? We can use a non-breaking space. I can copy this little HTML entity and instead of having all this space, you're going to have some non-breaking spaces. Obviously, if you want a ton of white space, this is going to get pretty ugly, but maybe you just wanted a little bit of space in between. Putting it in a few times is probably not that big of a deal. There you go. We've got some HTML entities to override that behavior and tell our browser, hey, we want a white space here don't cut it down to just one space. If I go back to the page, it will tell us some other useful HTML character entities. Basically, anytime you are wanting to put one of these characters into your project and you're finding that it's just not working, you probably need to put in a HTML character entity. I definitely referenced this page or other pages on the Internet to find out what the appropriate entity is. But essentially, the main ones are the non-breaking space and the symbols that are already in HTML, most commonly less than and greater than. Just briefly now we're going to go into symbols, and symbols that are similar in the sense that we use these weird codes to put in a symbol, but is not in conflict with the characters we use to create HTML. Simply put, if we wanted to display a euro sign, we could use a HTML entity. It looks like you can use a name, you can use an entity number, a decimal or a hexadecimal reference here. There's no need to remember all of these. It's just if you want to put in a euro sign or a pound sign or some weird symbol, you would just have to look up what the the number, entity or name is and just how the display that. Usually these entities and symbols start with an & sign. If you see an & and then a name, or some code like that, you're probably looking at a symbol or an entity. Yeah, if you need to put in a copyright sign or anything, any symbol, look up these references for symbols. Finally, charset. Charset is something you put in your meta tag. As you can see when you scroll down, there is some differences between different character sets. Sometimes you might want to set the character set specifically, and then figure out what the difference in entity would be doing that character set. If you look here, a lot of them are pretty much the same. Let's say down here, less than sign is the same thing. Greater than sign is the same thing across all of them. It's a little bit hard to spot the differences actually, but there are a few differences. Basically, sometimes you might need to choose your character set. It's not something that you have to do often, but it ties in well with entities and symbols. Charset will be the set of characters, then entities and symbols is what you would use to create those symbols and characters throughout your project. I hope that gave you some clarity for when you see something like this in HTML, you will know that this is probably a symbol or a entity, and you can look up what that is or try it yourself and incorporate it in your projects. That covers charset, entities, and symbols. In the next video we're going to wrap up talking about the HTML body, and we're going to cover a few other elements that you may want to use in your project. I will see you in the next one.
12. Other HTML Body Elements: This is the final video that I'll do on covering the body elements of HTML. We've covered quite a lot of body elements that you would use in HTML. At least the really common ones like headings, paragraphs, buttons, images, links, tables. All of these are quite common and probably make up more than half of when you're going to be developing HTML, of course Dibs as well, down here and block-level elements. But in this video, I just wanted to cover some other ones that you may come across. Again, if there's anything that we haven't covered, HTML is quite expansive, so feel free to come back to this website or another website and reference. I'm not going to go and explain every single HTML element that is available because it would make the course very big and so I'm just focusing on the most important ones here. In this video, I just wanted to show you a few other ones. One is HTML Iframe. So as you can see here, we've got like pretty much a window within our web-page. If you see this tag, "iframe", you can basically just take whatever website you want, put the URL into that SRC fields, and then certainly you have a website within your website. It's not that common because there's not much reason to put a website within a website, but you may still see it. It's kind of an old school thing, I think. Another thing that's new in HTML5 is media. So you've seen embedding images, but now you can embed video. Before HTML5 came out, a lot of browsers were relying on flash, but now if you embed a YouTube video and dig deep enough into it, you will see that it's using HTML5 video. You might see a tag that says video and you can set the width and height and the controls, putting these attributes to get the source. Pretty cool stuff. It's the new version of the web, is supporting all kinds of media and you can also embed audio as well. Down here you might see an audio tag, works pretty similar to the video tag and then if you want to go down to this reference on YouTube, you can see that you can play a YouTube video with an IFrame. Some advanced stuff you've got in HTML, you can draw graphics on your screen using HTML, you can geo-locate, so you can determine the location of the person using your website based on their browser. You can drag and drop elements, web storage, web workers and this goes a bit into the more complicated side of HTML, and then you've got all this reference here. I just wanted to leave it off there with HTML body. Again, there's a lot of depth with you go into that and if you see a tag that you don't understand, if you see something like this and you don't know what an Iframe is, just look it up, just go into Google and be like Iframe, for example, HTML element, and then you will start to get all this information. In the next video, I wanted to cover the other section of HTML, which is the head section. I'll see you in that one.
13. HTML Head: In this video, we're going to cover the head section of our HTML document. Again, we're going to reference W3Schools.com because they have a pretty good article on the different elements we can include in a head section. It's just accessible via this menu here, you can click on HTML head and then you can check out the different elements that we can put in our head section. Of course there's tittle which we've already included in our project here. If we were to remove the title completely and click ''Save'' on that, go back to that page, look at what happens to the title here. What happens is it changes to the file name which is not going to be the most appropriate name most often. It's going to have the extension on it, index HTML is not a very user-friendly heading or title for the page. I'm going to press ''Save'' to take it back to About Us. The next section is the style tag and as we move into CSS, we'll be using the style tag to embed styling on a particular web page but for now I'll just show you how we could use it straight away. I'm going to copy this example here, go over to our page but then go into our code editor. I'm going to open up a bit of space here in our head section and I'm going to put in our style. Indented, press ''Save,'' refresh and we can see that our top-level heading is red and, what else is it defining? Top-level heading is red, our background color is powder blue and our paragraph color is blue. This is useful when you just have one page that you want to apply styles to, but say for instance you have a website with multiple pages you're going to want to put your styles in a separate file that gets referenced by the pages that need it. In fact, if we look at the next example in this document, we can see the link element which is exactly what I just described. It's pulling in a external document with your styles into your project. We're going to do this in the section on CSS so I want to create a whole file now and show you that as an example. But basically just to see what it looks like instead of having all these styles, you would just have a link to an external style sheet and it would import basically all those styles. I'm going to get rid of both for those, the next one is meta. The meta description is mainly used by search engines, it's used by browsers as well on how to display content and other web services but the biggest reason to use meta keywords, descriptions and titles is for the search engines. Because the search engines, if you type in something random in Google like let's say HTML course, what comes up here in these results is determined by your meta information so SEO is very important and you want to have that optimized. As you can see here, we can put in a meta description, you can put in some keywords which I've heard is not too relevant in today's day and age with SEO because Google is a lot more sophisticated than just giving it keywords, but you can define the author and you can set random things like refreshing the page every 30 seconds I'm not sure why you would want to do that but that's an option as well. A good example here is giving a page some description, keywords and author. Another thing you can do is set the viewport. HTML 5 introduced a new method to let web designers take control over the viewport through the meta tag. Basically what that means is if you start to create this mobile responsive design on any of these pages, it may not work without putting in this little tag. This is just a little bit of a pre-requisite for responsive web design but we'll get into that when we talk about responsive design in the CSS section. The other thing you can include in the head is a script tag. Just like we showed in the example before, we can embed some styles but we can also embed scripts. Instead of doing that, I can grab this and this is not actually going to work because we don't have an element by the ID of demo which is what it's trying to target, but we can put in HTML all the same and I think we'll get probably a JavaScript's error here, we're sending a function. Actually all that's doing is sending a function, but again we're not covering JavaScript in this particular course, just know that you can include JavaScript in the same way that you would include a style sheets so like this, you can link up a external JavaScript document but then you can also embed it just like we've done here so that their scripts runs just on that page. This one is something that I don't really use that often but you can specify a base element and it gives a base target for all relative URLs on the page. You can also see here that you can actually omit HTML head and body, but I really wouldn't recommend it and W3Schools does not recommend it either so make sure to include those elements. There you go, here's a little bit of a summary. You can put in a title, base link to a document or external resource, put in meta data about that document, include some JavaScript and include some style information in the head. That pretty much covers the head, we will start to see as we develop with CSS, we will be linking and putting some styles in here so that'll come forever long but for now, title is enough to put in our head. In the next video, I'm going to finish up talking about HTML by talking about how we can format HTML without CSS. That will provide a good segue into styling our document with the next topic and really important one, CSS. I'll see you in the next video.
14. HTML Formatting: To finish up our section on HTML, I'm going to cover HTML formatting. The reason why I left this to the end is because I thought it would provide a nice segue into CSS and you can start to see what are the formatting options available in HTML, how limited they are, and how much more you can achieve using CSS. Let's go back to our good friend w3schools.com and go to HTML formatting. The main things you can do is bold text, italicized, emphasize, make it smaller and do subscript and superscript. Probably the main ones are bold and italic. You can go down here and see that if we want to bold any text, we can just use a B, but B is an old school tag to use. Oftentimes these days, if you want to bold something or emphasize something, you would use strong. Let's just go in and show strong in action right now. In our "About us" page, let's just make this "hello" bold. All we got to do is wrap some tags around it and then certainly we've got strong. Very basic stuff. Once we go to HTML italic and EM, it's a similar thing. We can use I for italics or we can use EM for emphasized, and again, it has added semantic importance and it's more common in modern HTML to use EM other than I. I pretty much never see I anymore these days. I would definitely recommend if you're doing italics, choose EM. We can wrap goodbye in EM and then certainly we've got bold and italicized text. You can also use small for when you want smaller text within a header element. If we've got about us, and maybe we wanted to put in smaller text, our history and values. Just to preface what's about to come. If I save that, you'll see that what we've wrapped in the small tags comes up smaller, slightly smaller. Again, if you don't like any of how this is styled, we are able to target everything in these tags. We're able to say, I want strong elements to act like this or look like this. I want EM emphasized elements to look like this. I want small elements to look like this. That's all stuff we can do with CSS. If it's not small enough for your lacking, still use it because it'll give you some good targeting and then follow along in the CSS section, because we will show you how to style things how ever you want. It's another one for Mac, which I don't think I've actually used before. But you can highlight parts of text. I will go into here and just put in a mark there. Very basic stuff. We're just putting in text and we're putting in tags surrounding it to give it some styling. There's a whole bunch of other ones here. I'm not going to go and put all of them into a project. They're pretty self-explanatory. But yeah, you can reference it down here and see what you can do in HTML with HTML formatting. What I will say on HTML formatting is it's quite limited and that's why for sure we need CSS to make those beautiful web pages. This currently looks terrible and we can't really make this look nice without CSS. But these elements you will still see throughout your time looking at HTML, because they define semantic importance. If I was to put in some text and then define it as strong, that gives me a target to go through and in my style sheet, say that all the strong text should have a particular styling or behavior. You see that in the CSS section, but for structuring and being able to target various parts of your page. If you want something bold, you should still use HTML formatting like strong and then if you want to change that particular style, we can do that with CSS. That's all I wanted to cover on HTML. Once you understand tags, once you understand the difference between head and body and you understand attributes, you are pretty set with HTML that covers the bulk of what you need to know of HTML. In the next video, we're going to jump into CSS and get started with learning some CSS. That'll be the second topic of our course here. I'll see you in the next video.
15. Getting started with CSS: In this video, we're going to get started with CSS and for this section of the class, we are going to reference W3 Schools again. Moving over to the CSS menu now and clicking on "Introduction", we are taken back to the place we started when we first introduced CSS. Now to introduce CSS into our project, I'm going to switch over to our code editor. If you see here, we already have an example of CSS in our project already. Right here, we have a P tag and we have an attribute on it, code style. Style is an attribute that allows us to apply CSS to any particular element. You can see on this particular P tag, we have an attribute of style, and inside that attribute, we have a CSS rule which defines the color green. So if I go back to the document, we have opened, you can see that the first paragraph is green, right where we put it here. That's called an in-line style. But maybe we wanted to have a style that applied to all p's. So what I could do here, if I was to do it inline styles is to just copy and paste that and then my second paragraph would also be the color green. Let's just see that. Now once we have a lot more paragraphs and maybe we wanted to put styles on a headings as well. On our divs. It can start to get quite messy and we can start to repeat ourselves a bunch of times. If we had like 10 different P's and we had all of them with style, color green. It's better just to define a rule that all p's have the color green. That's when we can start using CSS selectors. Now we'll go into syntax in the next video. But for now, I'm showing you the second way we can include styles in our project and we actually saw it in the lesson before on HTML head. I'm going to go up to my head section here, create a line after title and open up some style tags. So once we have these opening and closing style tags, we can start to put in some pure CSS and we'll do the syntax in the next video. So don't get too caught up on what's going on here. But instead of having a color green applied to every P using a style attribute, I'm going to get rid of that and put that rule up here. How I would do that is press "P" to target all p's. Open up some curly brackets to define a rule that would go just to that selector and then I'm going to put in the same style as before, color green. When we save this, we should hopefully see all the paragraphs or the P tags be the color green. There you see, there's actually a second paragraph here for "Hello, goodbye." That one is affected as well. So we have given it a selector and given that a rule. We'll go into syntax in the next video. What happens if we want to apply the color green to every P? It's not just in this particular webpage, but across all our webpages in our website. Well, the best way to do that would be to create an external style sheet, put the rules in the external style sheet, and they just link them to our HTML documents. So again, we covered this in the HTML head section, but I'm just going to go back and show you. So let's go back into W3 schools. I'm going to open HTML into a new section and go down to "HTML Head". We scroll down, you can see, yes, we can insert styles for a single HTML page or we can link to an external style sheet and then copy those styles across to all our pages. I'm going to copy that example, put it in where we had our style tags and let's talk about what's going on here. So this link tag is a self-closing tag, we don't need to put a closing tag at the end. We have two attributes on it. The first one is REL, and it defines what kind of file it is. It's a style sheet. All you have to do is just call it a style sheet in the REL attribute, then the second attribute defines where the actual style sheet is located. I want to call mine style.css, not my style.css, and I'm going to save that. Let's go back to our page. You wouldn't notice anything different apart from obviously the styles we just removed. It's not going to blow up your webpage or anything but if I go into my console, you can see that it's saying that there's era file not found and that's because we haven't actually created the file yet. So what I'm going to do, is go into "Atom", create a new file, and save this straight away as style.css. So let's go in style.css. Same rule applies here with HTML. We definitely need the dot HTML pot, but for the first part we can essentially call it whatever you like. I'm going to click "Save" on that and now if we go back and reload the page, and then I check my console again, there are no errors. But of course there's nothing coming through because we haven't set any rules yet. So I'm going to set that same rule we had before, P color green. Let's go back. [inaudible] , all the paragraphs are now green, because we've linked that external style sheet into this project. We can reference this style sheet, that's one style sheet throughout all our webpages of our project. If we wanted to go into contact here, we could put in the exact same link and we don't have to rewrite our styles every single time. So there you go. That covers the three ways to put in CSS in a document. We can do it inline through a style tag like we showed before. Like that, if we just wanted to target one style that doesn't make sense to create a rule, we can create a style tag in a head here, and just define all P's with the color of green. Or we can just get rid of that and put all of those styles into a style sheet, which is the cleanest way to do it most often, especially when your project becomes bigger, you're going to be reusing styles a lot. Definitely a good idea to have a style sheet and from now on we're going to be focusing on putting our styles in its own style sheets. In the next video we're going to go into syntax. How do we actually write all these rules and how does it work? Yeah. I'll see you on the next video.
16. Basic Syntax and Selectors: So in the last video, we included CSS in our project and we started with our individual style rule applied here in line on the p tag, but then we defined a rule up on the head section as well and then now we have a external style sheet to work with. So to get started with Syntax, again, I'm going to go back to close this tab and then go back to the Syntax page on w3schools. Here you can see a nice visual representation of a CSS. So the first part we have is a selector, and then we have the declaration block. So it's simple in the sense that there's only two parts. We have this selector and the declaration block. Within the declaration block we have these different options defined. So the first part is the property and the second part is the value. So when we set color to green, we were setting the property of color to the value of green. We can separate rules with a semicolon here. In fact, we should, and each rule of a semicolon just for completeness sake. That will save us from when we put it a new one, we won't forget to put in the semicolon and it won't break. So here in the example you can see this will set all p elements to center-aligned with a red text color. So this is another attribute you can use to center-align text. You can also left or right-align depending on what you change this value to. But you can see here with this selector, it's just p, which means that all elements with that name will be changed to color red with text aligned to the center. So the first part is the selector, of course, and there's different selectors we can use to find or select HTML elements based on the element name, id, class, attribute, and pretty much anything. So as long as you can differentiate attributes by any of these parts, you'll be able to target specific elements or groups of elements. So the first one is the element selector. So it selects all elements based on the element name. We've got the same example again. We're selecting all the p tags. The next one is the id selector. So this is if we wanted to select a particular element. So I think the best way to show this is to dive right into the code. But how we do this is with a hash. So what I'm going to do, there's two parts to this. I'm going into my editor, go to my HTML. Let's just say that this particular heading we wanted to effect. So what I do is give it the attribute of id. So I'm going to give it id of second heading, let's say. So now what I've done is I've just given this a unique identifier that we can use to target it. So if I go back into style.css, I can use the hash. Remember hash with id's and I can do second heading and then I'll open up a curly brackets and what style should be applied here? Let's see. We've already done colors, so maybe let's do text-decoration underline. So now it's saying anything with the id of second heading, we should only be one because id should apply to only one element on the page. We will give it an underline. So let's go back into our page and have a look and there you go. Our heading that we defined with the id of second heading has the text decoration now of underline. Moving on through the selectors. The next one is the class selector, and the class selector works very similar to the id selector, except this is used for selecting multiple elements. So for instance, if we go into our document here and maybe this div, and we're going to have a few of these div-s. We wanted to give it a certain class, which we're going to change the styles on. So I'm just gonna jump right in and do it just like we did with id. I'm going to do class instead of id, and I'm going to call this special div. So I'm going to save that, go into style.css and how we can target a class is instead of using a hash or a pound sign, we will use a dot. So I'll go in with a dot and say special-div. Now what should we do with a special-div? Let's use that text-align example and we will text-align it to the right. So press "Save" on that. Now we've got the rule based on this selector. We've also defined the class on the actual HTML element. So now when we press this, we should see that the first paragraph or this but first div here, all the texts within it is aligned to the right. Now if we wanted to do this again, all we would do is have another div with the class of special div. Remember classes are intended to be put on multiple elements, whereas id's are only for one element on the page. So now if we go back here, we will see that every div with the class of special div is going to have the rule of text-align right on it. Whereas this one is just a div and it has no class or special div. So it has the default behavior. Going back to the document here, we can also use a combination of elements and class selection. So as you can see here, we got the p and we've got a dot center. So this basically says that if you have a p with the class of center, apply this rule. So you need to have two things: you need to have the class on this element that you want to target, and it also has to be of that particular element. So I'm going to copy and paste that right now actually, and demonstrate that. So I've copied that in there, and now I will find a paragraph. Let's do my first paragraph and give it the class of what was the class again? Center. So we give it that class. Go back into here, and now we can see it's red and centered. We can also combine with id as well. So maybe we only wanted to target heading two with an id of second heading. Maybe we put second heading on another element that wasn't a h2. We can make it really specific and say that only h2's with an id of second heading, the style will apply. So I'm just going back here and put h2 in front there and we will see the same result. So if I save and go across, you will see the same result if I put second heading on something that wasn't a h2. So maybe I'll put second heading up here. Which by the way is not a good idea because we're already breaking the rule of having only one id for each element. But just as an example, if I go back to here, you will see that the text decoration of underline is not applying to this particular heading because it doesn't share the same elements and id rule. So if we took away that element part and we go back, you'll see that it underlines. So hopefully that makes sense. I'm going to remove this id from heading one because we're only supposed to use a particular id once in a document. So yeah, try and keep it. If you've got a particular id that's supposed to define one element, if you want to affect multiple elements that you define, you can use class. So going back to Syntax and selectors again, you can also group selectors so that you don't have to repeat yourself over and over again. So in this example, you see h1, h2, and p all have the same CSS rules. So what we can do is minimize that by just putting in commas. So instead of this, we can do this. Another thing is a comment, and this is used to explain code and we can do this by opening with a slash and then the asterisk, and then closing with an asterisk and slash. So comments just give you the ability to annotate your code to make it easier to understand for somebody to reading it, let's just put in arbitrary comment here, and I'll say underline all second headings. You can see my code editing software knows that this is a comment and has it faded. So those are the basic syntax selectors. There's some more advanced ones that we're going to go into in a later video. But essentially what you've got is your element selector, you've got id selectors, you've got class, and you can also combine them. Actually, you can combine all three of these in one. Say for instance, you had a p with the id of second heading and the class of special div, you could write something like this. So you could do special-div, second-heading. But now you're just going a bit too crazy with the selectors. There's not often a reason why you would need to do something like that. All right, so that covers the basic syntax. In the next video, we're going to cover CSS hierarchy, and this is what gives CSS the name of Cascading Style Sheets because as you'll see in the following video, there is a hierarchy of specificity which determines which rules override other rules. This is the tricky part of CSS and we're going to dive right into it in the next video.
17. CSS Hierarchy: In this video, we're going to cover the hierarchy of CSS rules. For this, I've got two documents open. I'm just going to switch over to a new window. There's these two documents on W3 schools that talk about this. One is the general how-to and one is about specificity. In this how-to, we've already seen the three ways to insert CSS. We've done inline style and internal style sheet, and an external style sheet. So you've seen an external style sheet here. You've seen an internal style sheet, just putting a style tag in your head and you've seen an inline style. But then there's also the issue of multiple style sheets. Say for instance, some properties have been defined for the same selector in different style sheets, which one actually takes precedence? Let's have a look at this example. Let's say we have one style sheet that has a rule for h1 of color navy, but then there's another style sheet that has a rule for h1 of color orange. Well, what happens here? Which color actually is this h1 going to be? Over here you can see that the answer is the value of the last read style sheet will be used. If we go down here and we have a link tag referencing external style sheet, and then we have an internal style sheet. The internal style sheet is defined after, so it comes after this link. Therefore, this style will override any h1 styles in this particular style sheet. But unfortunately, it's not just multiple style sheets that you have to worry about, there are multiple ways you can overlap yourself with CSS, and that's where the cascading order comes in. It asks here, what style will be used when there is more than one style specified for HTML element? What it says here is that we can say that all styles will cascade into a new virtual style sheet by the following rules, where number one has the highest priority. If we have an inline style, that will override an external and internal style sheet. I will just demonstrate that now. We've got this rule for all paragraphs are green, but what happens if there's just one paragraph that you don't want green? Well, we can go in and we can go to this paragraph and we can give it an inline style, call it color black. Now, if I save that and open up that page, we can see that this paragraph now is black. That's because if we put an inline style in, it's going to override the general rule. This ties into specificity. For specificity, let's go into this article now on W3 schools. What is specificity? Well, if there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is the most specific and therefore wins out. You can think of specificity as a score that determines which style declarations are ultimately applied to an element. In our particular instance, this is a pretty general rule. We're saying all p tags are green. That's pretty general. They're saying, this particular p tag on this particular page we want black is highly specific. So it's assumed by your browser that you want this to be specifically black and you don't want a general rule like this one to override it. Pretty safe assumption I'd say. But the issue is not just with inline styles, but also with rules like this. So if we go back to the document and read more about specificity, we can look at the hierarchy here. Inline styles are always going to override what's in your rules, in the general rules whether its class or ID. There is one exception to that, which we'll get into a little bit later in this video. But inline styles is the most specific. Then we have ID. ID is of course, a unique identifier for one page element on a particular page. Then we go into classes, attributes and pseudo-classes. We haven't gone into targeting via attributes or pseudo-classes. But these are all kind of more general than just targeting a specific element. Then most general is targeting by a certain type of HTML element or pseudo elements. In the example of p, we're targeting all of a particular element. That is the most general rule that you can have. If you want to quantify specificity, you can do that as well. Here's a little bit of a guide on that. Another rule of specificity and its similar to the one we had here with the multiple style sheets, the last rule counts. Maybe we wouldn't have these rules side-by-side because it's pretty obvious to see that they're targeting the same thing, but maybe further down in a big style sheet, you have another selector targeting h1. The one that's written last will be applied and override this one. Another thing to note is ID selectors have a higher specificity than attribute selectors. This here is an attribute selector and we haven't gone over attribute selectors yet, so don't expect you to understand that. But ID selectors, as you would expect, being the second level of specificity, have more of a weight than attributes. Scrolling down to see more specificity rules, it says here contextual selectors are more specific than a single element selector. Say for instance, if you had an external style sheet and an internal style sheet, the internal style sheet is closer to the document than the external one, so this would take precedence over this style in that instance. The final example that gives here is that a class selector beats out any number of elements selectors. As it says up here, classes are more specific than targeting just all elements of a particular type. Say for instance, you had a h1 with the class of intro that would take on the color yellow and override this because this is just an element selector. I hope that helps a bit with specificity. Again, there's a lot to take in here. This is one of the trickiest areas of CSS, so I don't expect you to have mastered it after this particular lesson. But you'll see as we go deeper into CSS, more about why it's called cascading style sheets, and we will see this hierarchy working in front of our eyes. There's actually more selectors we can use, but we're going to cover the advanced selectors in a later video. One thing I will mention before we wrap up here is we can override this behavior of specificity. We do that by using a little bit of a cheat code important. Let's say for instance, with this second heading, I really want to change it to have an underlined, but maybe there's a specific style on here where it says text decoration. What are the options available to us? Let's just say none. If I go and click, "Save" and then I go back to this page, it's going to override our ID rule up here of underline because it's an inline style. Remember, inline is more specific than making an ID rule here. What happens if we're in a particular situation where we're not actually able to change this particular document, maybe it's locked HTML. There are some situations in which we don't actually have access to change the HTML or it's generated by a backend, and it has this fixed style. Well, there's a cheat we can use and it's not exactly the best solution, the best solution would be to get rid of this style tag. But assuming we just literally cannot do that, one hack we can do is give this style something called importance. We will start with an exclamation mark and then put important. You can see my code editor knows that this is an important keyword, it is highlighting that in purple. Now, when I go back here, you will see that this is now underlined, even though there's a style on here. This is more specific than an ID rule. But I'm able to still get this to show up by putting in important. Now, the thing with important is you don't want to use it all the time. So let's just type into Google. Risk of using important. You will see, even if you just research it on Google, you'll find out why important is bad practice in some situations. So it's likely to cause undesired effects further down the line. If you really need to use it, you can, but it's overriding the usual behavior of CSS. The challenge really comes when, say for instance, I wanted to overwrite this. Well, there's no opportunity to overwrite that now because I've put important on it. So say for instance, we have the opposite situation of before where we didn't have access to this HTML file. Maybe we had access to this HTML file and we didn't have access to this file. If somebody is put important here, then there's no way of us to override that. We can put in a style and it's super specific, but it's still not going to beat out important. That's, I guess one of the risks of using important. You will see it multiple times if you get deep into CSS, that important causes problems, so it only should be used as a last case scenario. It might not make perfect sense right now why that is, but just trust me when I say that you want to use this specificity hierarchy first. So if you want to get specific on a particular element, give it an inline style, target its ID, and don't necessarily give it important unless you really have to and you feel like that's the only option. But as we get deeper into CSS, you will learn when it's important to use important, and that's where I'll leave importance for now. Now, we've covered specificity and we've covered syntax. There is one concept, general concept that I want to cover called the box model in the next video. Then we will go into all the different options available to us. Probably not all of them, but the bulk of them, and show you what you can do in CSS. I will see you in the next video to talk about Box model.
18. The Box Model: Before we dive into the various different styling options, I wanted to cover one more thing, which is called the box model. So if you want to go into W3Schools, and select CSS the box model, we can start to learn a bit about it. I'm going to close the tab from the previous lesson, and let's look at the box model. In the beginning how HTML elements might sound like something a little bit abstract. But one way we can think of them is as boxes. In CSS, that term box model is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. You can see in this image below an illustration of the box model. What we have in the different parts is content, padding, border, and margin. Again, I think the best way to show you this is in actual practice. We've got an example here, but they don't actually show you a HTML example. Let's go into our document again. I will close some tabs here to clean it up, and here's a clear looking page still. I'm going to go here, switch over the index.html, and what I want to do is just create a random box. What I'm going to do is put in a horizontal rule, again to create a division, and I am going to put in a div. Then within that div, put in another div, and this div is going to be our box. In order to style this particular div, I'm going to give it a class of box. When we go into our HTML document again, you can see that the horizontal line has showed up, but you can't really see anything under it. Right now, that's because we have a div that's pretty much just an empty piece of nothing basically. If I go into the inspector here and actually look at what's going on. You can see here that there's the div there defined in the HTML, but it has no height. The parent div and div with the class box on it is basically just nothing right now. Now the way we can actually see the div and actually created into something is to go into our style.css and create a style for box. I'm going to target all elements with the class of box by doing.box, and I'm going to copy the styles from the example here. I'm going to give it a width of 300, a border of 25, solid green, padding of 25, and margin of 25, so I'm going to save that. Then if we go into our document, we can start to see this green box. Now what's great with Google Chrome and I think in other browsers is you can right click on this element and you can actually see the box model. Here I've got an actual representation of the box model here. Now you'll see the actual content part has no height. You'll see 300, which is the width we defined, but no height there. But you can actually see that a has some height and that's because we've got a lot of padding, a lot of border and some margin. I'm just going to actually give it some height as well. I'm going to give it a height of 200 pixels. Save that, go back. Now we've got a box with a height as well, and you can see in our visual representation of the box model over here that we've got 300 by 200. We can actually see a certain part of the box being highlighted when we do that. Remember before, I'm just going to comment that out. What I've done there is turned that into a comment, so that it doesn't actually apply, if anyone wonder. If I go back here and I go and try and hover over the content, the middle section, nothing is highlighting over here. You see how I've hovered over this. Nothing is over there because it has no height. If gives the height back, and now you can see that it has a content area. Now there's a layer outside of that called padding. Now the padding is I guess just the area between the content and the border. This, if you can see the light green, I can't hover over both at the same time. But if you can see that light green showing up now, that is the padding area. Then of course the border, we've set the border to a solid green, and given at 25 pixels so you can clearly see the border, and that gives it an extra 25. Then outside the border is margin. If I was to put two of these boxes together, let's just do that right now. I got to do is copy and paste. Now I have two of these boxes, now you can see margin, because if I didn't have margin, I can actually turn it off here. The boxes would just connect to each other because there's no margin between them. Again, the margin is what's on the outside of the border. Now, another thing I can do that bring this home is to put some content inside one of these boxes. I'm going to put Box 1 and Box 2. We're going to save that, go back. Here you can see we have content in there, and it's not right up against the borders because we have 25 pixels of padding, which we can clearly see by hovering over there. We could also do more styling to text align the text in the center. But if we were not to have that padding, the content would press right up against the border. I hope the box model is starting to make a bit of sense to you. If we go back to the content here, you'll see just a warning on how to calculate the full width and height of a box. You got to acknowledge that it's not just the content, is also the padding, the border, and the margin, which makes up the full area of how much this piece of content takes up or this particular element. If we were to get rid of all of this, remember, It's basically an empty div that only is as big as the content inside it. Remember there was no content in it before so we didn't actually see anything. Now we actually see the contents, but there is no box model around it. Right now if we were to just give it a one pixel border just so that we can see the edges of it. It's going to extend the full width. There's no margin between them, and there's only as much height as it needs to have the text. With all these other attributes that we apply, we can have a styled div. You'll see in a later video, we can get these to display next to each other. That is where we can start to see columns and much nicer, more responsive design. That's just a little bit on the box model. Just a little bit of extra theory I thought I would share with you guys before we get into more of the styling options. I hope that helps to visualize what's really going on when you create a div or an element. In the next video, we're going to jump right into some styling options. We're going to start with colors, backgrounds, and opacity.
19. Colors, Background and Opacity: In this video, we're going to start running through different options you have for styling in CSS. We're going to start with colors, backgrounds, and opacity. If I go to CSS colors, we've already defined colors in our document already. We've got color here, we've got color there, we're using color in pretty random places. As you can see from our documents, we've got just a mismatch of colors here. In all these examples, what we've done is just used a word to define the color. If we're using solid colors like black, and red, and green, we can just throw those in and CSS will know what to do. But there's actually other ways to define colors as well. If I go down here to color values, if I just type in red, I will get a very particular color. But what I can do is define any particular color based on RGB values, hex values, HSL, RGBA values and HSLA values. Don't get too overwhelmed by that. Most of the time I use HEX values. Right here is an RGB value, and right here is a HEX value. You might have seen this before, actually, they've got a hash, and then there's a few hexadecimal characters. It can be them English Roman alphabet characters here, and some digits as well. We can actually see this on any web-page. Actually, we can check this out on this particular web-page. We can right-click and use our Inspector here if you're on Google Chrome, and we can see here that we have a color code right here. We can actually, in Chrome, see the hexadecimal value of that color and where it fits on the color spectrum. We can click this and change it to an RGBA value. We can change this and change it to a HSLA value, and then back to HEX. As we change this, we can start to see both the change over there, but then also the hexadecimal value down here is changing. I'm just going to escape to reverse that. We could easily just put in instead of a hexadecimal value, so I'm just going to go back to that particular element again. Instead of having a hexadecimal value, we could have just the word green, but then we get a generic green. That's basically the same thing as this hexadecimal value. If you want a particular blend, you can get any blend by using hexadecimal values or HSL or all the other ones. I've just Control Z and I've brought it back to that particular color that is represented with that hexadecimal value. Another thing you can do with RGBA and HSLA, is give some transparency as well as a particular color. Again, if I went back to changing the color of this button and I wanted to make it a little bit more transparent, I can click on this, convert this to RGBA, and you'll see that on the final property, we have one, which is basically a 100 percent opacity. If I went here and I changed it to 50 percent, you can see that it's a little bit faded into its background, which is a gray color. I can change that to 0.1 to show you 10 percent opacity or 0.9 to show 90 percent opacity. But yeah, you can change the opacity and the color so you can have it fade into its background. That's pretty cool. We've talked about RGB, we've talked about HEX values, we've talked about HSL. One thing I didn't mention is if you want it to be completely transparent, you can put in a zero value. Essentially you can put whatever you want in these first three values because it's going to be completely transparent anyway. But then of course, you can work your way up to 20 percent opacity, 40 percent just like I showed in the example. Scrolling up to the top of the page, there's a few places we can put a color in and it's not particularly obvious when we look at a HTML element and we see the word color, what color is actually affecting, and color, actually, if we just use the word color without saying background color, for instance, it's going to affect the text. You can think of color as text color, and you can see here hash ffffff, that's basically white, so we could easily just put in white here and we'd get the same result. When you define color, remember that that's text color. But then also on that particular link, we can define a background color, and so that is the background of that particular link will be this shade of green. Going back to the page, we can see it now, we can set the background color for any HTML element by using this particular property, and that's background, dash color. Like I said, text color is just color. We don't have to say font color, text color, just the word color itself is the property for text color. The third color that I haven't shown yet is the border color. There's a few ways you can do this. You can use the property of border in which you can define a width of the border, whether it's solid or dotted or dashed, and then the color of that border. The second way you could do that is by using an attribute called border dash color. For instance, if I wanted to ironically make the title border color, give it actually a border with a color. I could go here on the element style and do border color blue. But of course there is no border yet, so I have to define one, and I'll just do one px solid. You can separate the color off into a different attribute by using border dash color. But I could also, if I just disable this and I want to put that on the same line, I could do blue right after the word solid, and there we go. We'll cover border in the next video. When it comes to solid size and dashed or dotted, we will talk about that in the next video. I've spent a long time on color already. But just finally, we can affect multiple things about the background, not just the color. We can give it an image and also control the position of that image. Here we can see an example of background color, but we can also link using this property, and the value for that has to follow this convention of URL, open brackets, open, double-quotes, paper dot gif or whatever the name of the file is that you're referencing. Just like when we were doing SRC, we've started with images. Like here, if you wanted that to be a background image, we could. Let's just do it right now. Go to our box here. Give it a style and give it a background image URL, and let's put in the photo.jpg. Let's try that on for size and see how it looks. There is the box and what we can do is change the positioning as well, so position x, we can center it. We can left align it, right align it because the image is actually bigger than the box. We are getting some crop here that we can position as well. We can set the background to repeat, using this, we can repeat on the y-axis or the x-axis. You're not going to see anything because it's already much bigger than the actual box itself. But maybe if we made this box really big. Let's not do width, let's do heights of 1000 px. You'll start to see that it repeats on a y-axis. If we were to do the opposite and do it with width, we could get this to be 1000 pixels, and if I close this, you'll see that on the horizontal axis, it's starting to repeat. That's a way we can put a background image in our document. Again, if you'd like to know more about putting in backgrounds in CSS, there is a lot of information here in this document. This video is getting a bit long, so I'm going to leave it there. That's basically colors and backgrounds and in terms of opacity, we covered it here with the final value of HSLA, and RGBA. We can set opacity just like this. So that's colors and backgrounds. In the next video, we're going to go a little bit deeper into some of the options we covered in box model. I'm talking about borders, margins, paddings, height and width. I'll see you in the next video.
21. Text formatting, Fonts and Icons: In this video, we're going to talk about text formatting fonts and icons. For this, we just need to go one step down in the menu and click on CSS text. First property that we've already worked with is color. I'm just going to breeze over this. We learned how to set the color by using the color property. The next thing is text alignment. The text align property is used to set the horizontal alignment of text. I used that in one of the previous videos, if you remember. We actually used it in two separate occasions. I used it to center align this box when it is on inline-block. I also used it here on special div to center align right. We can also text align justify and what that does is make each line stretched so that every line has equal width and that the left and right margins are straight. You might have seen this in magazines or newspapers or books. I'll just demo it right now for you. If we were to change special div to justify, press Save and now you'll see that the text always ends up right on the edge. Cool. Going back to here, another thing is text-decoration. Remember, I use text decoration to give an underline on second heading. We've already seen that right here, but it has been overridden. I'm just going to get rid of this style that overrides it. Press Save, there we go. There's an example of text decoration, but underline is not the only thing we can do. We can put a line through it, we can also do an over line. We can also transform the text. With the text dash transform property, we can specify uppercase and lowercase letters in text. It turns everything into either uppercase or lowercase, or it will capitalize the first letter of each word. Down here, we see text indent, so we can indent the first line of text in a paragraph. Let's demo that really quickly. In my rules for the p tag, I'm going to give it a text indent of 10 pixels. Press Save on that, and you'll see that these are actually paragraphs down here. But you'll see that there's an indent here. If we were to put some proper paragraphs into these paragraphs, instead of just random text. You will see that. First of all, the first one is center line, so I'm just going to get rid of that. But you'll see here the first line is indented by about 10 pixels. That's that one. We can also change the letter spacing. Let's have a look at that. I'll go into page 1 here. Rather than change up the rules, I will just put in an inline style and set letter spacing. Spacing to 10 pixels and see what that does. There you go. You've got some really wild letter spacing there. What are some other options? Line height. Line height is used to specify the space between lines. Texts direction, we can change the direction of text to reverse. Never done that one to be honest. Since we've a lot of options here that you can go down the list and depending on what you want with your text formatting, these are all the different things you can do to change it. There pretty much you can do almost anything in CSS. You can also change the spacing in between words. If you want to see everything you can do, definitely come to this page and check out some of the attributes. Moving on, let's look at fonts. One of the most common things you'll see is the font family property. In this particular property, we can set the font family Times New Roman, Arial, Courier New, that thing. What we can do is add a comma and then put AVA fallback fonts here. What you should do is start with the font that you really want. But if the browser that the user is using, doesn't have that font, it'll fall back to this and then it will fall back to that. Oftentimes, you'll have a very specific font at the front and then at the back, you will just define whether it's Serif or Sans-serif. You can read about the difference between Sans-serif and Serif up here. Here are some examples of Serif and Sans-serif and Monospace fonts. Font style allows you to italicize your text and also make it oblique which is like italics. Never really used oblique before, so I don't think that it's worth spending a lot of time on. Font size is a common one. Again, you can use pixels as your unit, but you can also use something called EM. One EM is equal to the current font size. If you want to use EM, here's the rough calculations down here. It's based on a standard font size of 16 pixels. If say for instance, you wanted a text to be 50 percent bigger than the text that surrounds it, you could change the font size by using a relative unit here i.e a percentage sign. Let's just go back to here and say, for instance, I wanted the dummy text to be 50 percent bigger than the rest of the text surrounding it. Well, I've already done it here. You can see here a relative font size. I can go in and do the opposite and make it smaller than the other text surrounding it. You can see there that it is three-quarters of the size of the surrounding text. I'm going to put it back to 150. You can also change the font weight. Font weight is basically how bold the font is. Another thing you can do is set the unit to VW. I actually haven't done this before, but you can see here, where has it gone? The font size actually changes based on the size of the screen. That's pretty cool. The VW unit represents one percent of your view-port width. If the view-port is 50 centimeters wide, which is the view-port is basically the screen you're viewing it on, one VW will be about 0.5 centimeters. Next, one font variant specifies whether or not text should be displayed in small caps font. Again, I don't really use this one often, but again, it's another option available in fonts. I'm going to bring this back to full width. Here's all the CSS font properties you can use. Definitely, come back to this for reference. But for now, we're going to move quickly onto icons. If I bring up the page for icons, what we can do is use an icon font to be able to put in some icons and treat those icons as if they were a font or text in themselves. Now perhaps, you need to see that in action. A common icon font library is font Awesome. You can look up font Awesome here. It is one of the most famous ones you can use. It has a bunch of fonts that they are constantly expanding on, and right here you can see a whole bunch of different logos and symbols and they've even got ones that represent different apps and services. If we go back to here, we can see that we can include font Awesome in our project by linking to it using rel stylesheet. What I'm going to do is copy that, put it into our project so we can see how we can use icon fonts. We've got the link and that means we can start using it. What you can do here is create an I tag. I'm going to swap over here. Maybe before we put in, we started our company. We will put in an I tag and the class on the I tag will tell our document which icon to actually use. I'm just going to save that, put that in and you'll see we have a cloud in front of each of these lines. The reason why we have a cloud is because we're using the code FA cloud. To use any number of these icons, we have the class name here. Let's just scroll down, and let's say we wanted to use an apple symbol. We could go into our code and instead of FA cloud, we can put FA apple. Make sure to put the FA class first and then the specific FA class for the actual icon you want to use. Going back to here, we now see that the icon is apple. In this instance, the icon for apple doesn't make any sense. So I'm going to load one more example. Let's say we want arrow, circle right. Once again, I'm going to open up my code editor and change apple to arrow circle right. Remember with the FA dash there. There we go. Now we've included the icon font and we're referencing that icon font using an I elements, and we're able to tell our document which icon we want to use by using classes. Very cool. If we go back to our page here by W-3 schools, we can see that we can also use Bootstrap icons. Bootstrap is a front-end framework which we'll be learning towards the end of this skill share class. They have their own icon fonts as well, so you can get some of these icons as well. Google has their own icon font, you can find a range of icon fonts online. But essentially, how icons work is you need to load them in almost like a font. Whether you're using a font that gives you English characters or a font that gives you icons is essentially treated a lot the same in HTML. Let me demonstrate this quickly before we wrap up this lesson and move on to the next one. I'm going to set a particular paragraph. Let's choose this one to the font-family. Actually, let's set our whole document. One way we can do that is by adding an element level styling rule and using the whole body as the element to target and then we can choose the font style or font-family of the whole body of the document. I don't have any preference with font, so I'm going to go back to the lesson on fonts here, and just copy this example. Going to go over, copy that in, and then you'll see here that the font has slightly changed to Times New Roman. Let's change this to Arial. I want it to be a little bit more different. Now, we have font family Arial. What I'm going to do now is open up my inspector, and you can see here it defaults to body and I can see my font family of Arial there. If I remove that, it goes back to the default font. If I go down to here where the icon is, you'll see that it's pulling in a font itself. By using this class FA, it gives it a font from font Awesome, which is the icon font. If I was to remove that, you'll see it just comes up as a square box. But now, when I turn it on, you will see that we are essentially doing the same thing as we're doing up here. We're using a font to give the look of the text and we're also using a font here to take this icon tag and turn it into a specific element using our class names. If you scroll down here, you can see here a pseudo element, this content and this little code here that tells font Awesome which one to load up. But for you, you just need to use the class name, using this descriptive name to target that particular piece of content. This is all stuff that works on the back-end of font Awesome. But essentially, weather you're loading, Times New Roman or font Awesome. You're loading a font. That just about covers text formatting, fonts and icons. In the next video, we are going to go over how to style three of the most common HTML elements that we talked about in the HTML section, which are images, links, lists, and tables. I'll see you in the next one.
22. Styling Images, Links, Lists and Tables: In this video, we're going to cover how to style some common HTML elements, like images, lists, links, and tables. We've already done a little bit of images, but if we scroll down here to this particular link in w3schools.com, we can start to see that we have some styling options available to us in CSS to style images. We can also make the image responsive and scale up and down with CSS. Let's try that right now with the image we already have in our document. I'm going to switch over, this is our image there. Then what I'm going to do is go over to our code editor and I'm going to put in a rule for all images. I'm using an element level selector and I'm going to follow the example here. I'm going to give it a width of 100 and a height of auto. Going back to my code editor, I'll save that. Now you'll see that it extends the full width of the screen. So if was to close this, it extends the absolute full width of the screen and the aspect ratio is the same regardless of the screen size. That's the heights auto working for us there. The width 100 percent means that we want the image to be 100 percent of the parent element. In this case, if we look at the document, the parent element is body. So it's just going to be 100 percent of the body of the document, the window in this case. There's a little bit of code which we can easily get our proportions in order and have it responsive. Going back to the web page now, we can also set a max width, like I demonstrated before, but on a different element. The other way to include images is to use it as a background. Sometimes, you'll want to include an image as a background rather than an actual image file like this. An example would be if you wanted to have an image stretched like this to the full width of a content area or crop the image in a more responsive way based on the size of that content that it is the background for. What you can also do is change the background image based on different screen sizes. Right here we see a media query, and we haven't gone into media queries yet, but media queries allow us to define styles on screens of particular widths. We'll get into that in a later video. But for now, just know that we can change the image based on the screen size. There's also a new element in HTML5 called the picture element. I've never had to use the picture element, but allows you to define more than one image. I feel like we could spend a lot of time here on images, but there are a few other things that we need to cover. If you need to learn more about images, definitely come back to this page right now, let's move on to links, lists, and tables. Links and lists should be pretty simple, but as you'll see in tables, there are a few different styling options based on the different parts of the table. In the CSS links section on w3schools, we can see that we can change the color of a link, we can also change the text-decoration property and that's mostly used to remove the underlines from links. The standard behavior with the link is to have this underline and these different colors and that's been the way since the very beginning of HTML. It's not the most beautiful and it's out of date now. You'll see this often where the underline is removed using text-decoration none. You can of course also set the background color. What you should notice looking through this document is you can start to see something a little different, and that's these colon with another word. These are pseudo-classes, and it allows us to style the link based on the state that it is in. For instance, we have this selector a:link which will allow us to target a normal unvisited link, but if the link has been visited, we can change the style of that. A common one that we will use really often is hover. If your mouse moves over a link, then we can change the style and active is the moment that a link is clicked. If we click on here for "Try it Yourself", we can see here that our link will be red, but once it's visited, it will be green and if I hover over it, it'll be hot pink, and when it's active it will be blue. Let's test it out. You can see now as my cursor goes over the link, it turns to hot pink. That's based off this pseudo-class here which says that if the state is hover on this link, then color it hot pink. Let's see what happens when I click it. You can see briefly that it turned blue and that's because it was active, but then of course, we loaded the new page so that disappeared. Now that it's been visited, it's green. You can start to see here the full extent of different states and this link going through different styles. Again, I don't really use active, visited and link very often, but a very common one is hover, because oftentimes you want the link to stand out and by having it change color or change style whenever you hover over a link, that is something that is quite common. Going back to our w3schools reference here, I'm going to move on to lists. If you remember from our section on HTML5 lists, we've got two types unordered and ordered. An order just means a numbered list. If we scroll down we can see the first property list-style-type and that specifies the type of a list item marker. We can change it from up here from whatever this is to a circle, a square, and other different list types. If you click "Try it Yourself" here, we can start to see that. Here we can see this first unordered list. We've gone in a class of a and here the unordered list with a class of a is going to have the list-style-type of circle. Here in this list, we've given it b, and for that we've got square, these upper-roman and lower-alpha. You can change the thing that comes in front of the different list items. Coming back to the reference, you can also set the list item marker to an image that you choose yourself. In this case we have this square-purple gif image, and we can set that to be the list marker. You can set anything you want to be that list marker if you have it as an image. Scrolling down, you can also change the list-style-position. So you can make the bullet point outside the content or inside. Again, I'm just breezing through this because there's a lot of different options. A lot of these ones I don't necessarily use on a regular basis, so if this is something you want to do, definitely come back and review this. For time's sake, I'm going to breeze through the rest of this. Scrolling down, you've got the summary of the different properties you can access with list. Let's move on to tables. Tables is something that can be greatly improved with CSS quite obviously. Let's just scroll down and look at our table here, it's very old school. Tables can definitely do with a better look with CSS, and as you can see here, this is a bit of a old-school example that's similar to ours. We set the border using HTML, so if you go back to our document and find our table here, we were able to put an attribute on this element by the name of border and give it a value of one. If we were to change that value to two, go back, then it becomes slightly bigger, but we don't have to give the border on the actual element using that attribute, we can do it in CSS. What I'm going to do is press Save on that, now there's no borders, but I'm going to add them in using CSS. What you need to do is go back here, and we need to specify borders on the table, the table headers, and the table cells. I'm just going to grab this whole bit a code. Actually for the sake of consistency, I'm going to put all my element selectors up the top. I'm going to press "Save" on that, come back to here and we've got the same thing. The difference being that we have a lot more flexibility within CSS and we can copy that style across multiple tables. Going back to the reference here, one thing that's old school in this design is that it has two lines for the border. Often we just want a single border, so we can set this to border-collapse by putting that style on the whole table itself. I'm just going to put that above what we've got there, and now we have perhaps a more expected behavior from our table. You can also set the border around the table by itself, so this is the difference between setting the border on the table versus the cells, setting it on the table is going to put it around the whole table, and then setting a border on the cells is around the cells. Moving down, we can set the table to have a full width, and we can set the headings to have a fixed height of 50 pixels. What I'm going to do is go through this document and then we can actually apply some of these to our table because it is in need of a better styling for sure. Going down to horizontal alignment, we can text-align the contents within the cells to left, right, or middle. We can also change the vertical alignment. In this case, we've set the content of the cells to be down the bottom. We can also set it up the top. We can create padding, between the content and the edges of the cell. We can also create borders based on bottom, top, left, and right. This is a pretty nice design, we're just having borders on the bottom for this nice little list. We can also change the styling of a row using that pseudo-class we saw before when we were working with links, calling hover. When the mouse goes hovering over these different rows, we will change the background color to this particular color. Can do striped tables using another pseudo-class called, nth-child. This is a bit more advanced, but basically what it's doing is every even-numbered row we're giving it a background color of this. Of course, a common one would be to change the color of particular rows and particular cells, and then you can get a nice design like this. The trickiest part with tables I guess is getting it responsive. If we take a look at this example, and we change our window size, we can see that the table is responding, but even still it gets to a certain point where you still have to scroll left and right to see all the contents. That's the problem a lot of the time with tables and why you shouldn't use them to structure your web page, like we mentioned earlier, it's because these tables have a fixed layout element, but of course, there's ways to get them responsive, and we will talk more about that perhaps in the videos on responsive design. Here's some of our options here for a CSS table. What I'm going to do now, to bring this all home is to style our table here. Using some of the things that we've learned in this particular document, what I'm going to do is I want to horizontal-align and vertical-align the contents of my table. I'm going to open up my code editor and my document, and what I'm going to do is create a style targeting my header cells and my regular cells, and I'm going to give a vertical-align of middle and a horizontal-align of center. Now currently it's sitting right against the border, so we might not see this. What I'm going to do as well as give it some padding. I'm going to do 20 pixels of padding. Let's just see what that looks like now. There you can see with some padding and some alignment, you can see that we have a bit nicer of a table. I'd like to make the header row a different style, so I'm going to target the header styles separately, and I'm going to give it a background color of, let me see, light green. Press "Save" on that and now you can see that the top row is a light green. What else can we do here? We've done padding. We've done striped. Maybe we want to use this one here and we can make, I guess we don't have as many rows here, but if we were to start a new row, we could put this style in every even child would have a background color of that particular color. If we are to duplicate this row just as an example, copy and paste that, you'll see that the first one is gray using that background color that we specified for even children, and this one is not because it's not an even child, so if we put in a third one, you will see it alternates between the two. Let's just duplicate that again, and then you see there. There's a lot of styling options available in tables, definitely, I encourage you to go and experiment with them. We're going to be using CSS frameworks that do a lot of this for us in a future video, so you don't need to know absolutely everything about styling tables, but it's also a good thing to know. That basically covers styling links, tables, lists, and images. I admit we rushed through it a little bit because there's just that much content to cover, but of course, you can always go back to these pages to reference and the best way you're going to learn is by doing, so definitely put a table in your document and then start googling if you don't know how to do something. This reference is pretty good and this covers a lot of the options that you'd want to do, but maybe you'd want to do something extra with your table. There's so many options available in CSS and we could spend forever on it, but there is much more content to cover. In the next video, we're going to cover display properties. I showed you a little bit of display in an earlier video, but we're going to go deeper into these layout properties, very fundamental in CSS, but a little bit tricky so I'm looking forward to seeing you on the next video.
23. CSS Layout - Display Property: In this video, we're going to cover a CSS layout and we're going to focus on the display property within CSS. I mean, it's only one property, but it's so important and fundamental in CSS and maybe a little bit hard to understand. Let's dig in right away. It's the next link in our menu here. As you see, the display property is the most important CSS property for controlling layout. The display property specifies if and how an element is displayed. Every HTML element has a default display value depending on what type of element is. The default display value for most elements is block or inline. Remember when we had these block-level elements, so this div here, they are block-level elements and by default they have a display value of block. But here with a class box, we were able to change this particular div to a display of inline block. That was a little preview of what we're going to cover in this video. If we scroll down to read more about block-level elements, a block-level element always starts on a new line and takes up the full width available. Remember when we had this block here, if we remove the inline-block, I'm just going to do that by making that a comment so it no longer applies. I'm refreshing this. It's now a block-level element, so it's just going to take up the full width of the page. Here you can see some examples of block-level elements. These are basically display block by default, so div, you've got the heading tags, p form, header, footer, and section. There's also inline elements that display inline by default. An inline element does not start on a new line and it takes up only as much width as necessary. A common example of this is the span element, which we used, not sure if we still have it in our project. If I go search for span. Yes, we still do. Remember here we changed one particular word in our paragraph and made it 50 percent bigger than the other words. If we go in here, that change is done inline. This piece of content, this word is not split up into a new line or taking up the full width of the page like a block element would. It's done inline. Those are the two different major types. The other one that we can use is display: none. If we wanted this to not display at all, we could go in and do "display: none." If I save on that it won't display. But if we inspect on our web page and go down, we can actually see that the div is still there. It's just not displayed and we can actually toggle this display property on and off. There you go. I'm checking that box and it displays. Now, why would you want to have an element on the page but not displaying? Well, we can actually toggle the display property like we're doing right here but using JavaScript. That's a more advanced concept and that's moving into JavaScript, which we're not covering in this course. But just know that if you see an element that is on display: none, chances are, there's going to be something in the code that will allow that element to show up in certain situations. Having display: none on a element when the page loads allows it to start off hidden and then we can display it later. That is display: none. I'm going to refresh to remove those changes and get rid of our display: none here, save that and we're back to where we were before. Going back to the reference, we can override the default display value by using this property called display, which is exactly what we did back here by making the box display in line rather than display block. Back to the reference again. We can actually change the default behavior of a inline element to block, which we can do this both ways; we can change a block-level element to display inline, but we can also change a inline element to display in a block. Here we can make this span and become a block-level element. What that does is create a line break. If I was to remove this style and then run it, it becomes a in-line element and then if I'm to put that back in, it's going to split them up because remember at block level element takes up the full width of the page. If we scroll down, we will see a little point of confusion with display: none. There is another property called visibility. What is the difference between display: none and visibility: hidden? Well, the big difference is that the element will still take up the same space as before. It will be hidden, but it will still affect the layout. Let's try that right now. Let's make this image invisible, so not display: none but invisible. Visibility; we can set to invisible. I think hidden is the term not invisible. I'm going to put that there, visibility: hidden. You'll see that it still takes up the space on the page that it was going to if it was visible, but now it's just hidden. Contrasting that with display: none, if I did display: none, suddenly the element doesn't show up and it doesn't take up any space on the page either. Neither of those are two practical, so I'm going to get rid of that, press ''Save'' and go back to the way it was before. Cool. One thing that wasn't really covered in this particular reference is display inline-block. As you see, we've got it down here, but on W3Schools is actually a separate lesson. I'm going to click on display inline-block here. Let's learn a little bit more about it. Here we can read more about display inline-block. There's a few differences that you can read about here, but the main difference is if we wanted to display a list of items horizontally instead of vertically, we would need to use inline-block. For instance, in the case of creating navigation links like up here, we would require inline-block because the default behavior of HTML elements is to just stack on top of each other like we demonstrated before when we hadn't even gotten this CSS. I'm going to click "Try it Yourself" here. You can see that these are displaying inline-block. If was to remove this style and run, you will see that they stack on top of each other. That is the default behavior, but if we have display inline-block here, they will display in a line. Inline-block is a really common one you'll see especially with navigation links like in this example. If you want to know more about what the specific differences are, you can read about it here, but you will see inline-block coming up a lot. I'm a little bit wary of this video dragging out, so I'm going to end it there. This is a very important concept to understand, the display property and it's essentially a way we can have elements display block-level, so stacked one after another inline or a combination which takes advantage of both. That is the display property. In the next video, we're going to go over positioning. I'll see you in the next one.
24. CSS Position Property: In this video, we're going to go over the position property in CSS. This is a novel, quite involves property in CSS, so it deserves its own lesson. I'm going to go to CSS position on W3Schools. Here we can see the five different position values; static, relative, fixed, absolute, and sticky. So by using some of these, you are able to position elements absolutely anywhere on the page in a specific place. You can position them top, bottom left, and right of particular elements relative to them but this will not work unless you use the position property and set that right first. So covering the first one is position static. HTML elements are actually static by default. So if you put in a property of top, bottom, left, and right, it will not actually work, it will not be affected at all by those properties. As it says here, an element with position static is not positioned in any special way, it is always positioned according to the normal flow of the page. So it's just the default behavior. Scrolling down the next one is position relative. An element with position relative is positioned relative to its normal position. Now you're able with position relative to set properties of top, right, bottom, and left to relatively position an element adjusted away from its normal position. Now I know that probably makes no sense, just talking about it, so let's actually have a look at a actual example. I'm going to click "Try it Yourself". You can see here, if we were to remove position relative, which allows us to position it to begin with and we moved the left property and click run. Right now, that is the default behavior of this particular div and you can see the border of the div because we've given it a border here. If I put in position relative, I'm now able to make that element appear 30 pixels to the left of where it was originally going to be positioned. So we can add in another one here and we can make it top 50. Now it is 30 pixels to the left and 50 pixels from the top in a different position to where it would be otherwise. We can do the opposite here. We can use right instead, and we can position it 100 pixels to the right of where it was supposed to be. Now you can see it's now going outside the left boundary of the window. So not very practical, but sometimes you might need to do that. I'm going to close this example and the previous one and also these icons because we don't need them anymore. Another option on position is fixed. An element with a position fixed is positioned relative to the viewport, which means that it will always stay in the same place even if the page is scrolled. So whenever you see those menus or those things like this that stick on a particular part of the window and never move, that is styled with position fixed. Let's just have a look at our example. We can't actually scroll here because there's not enough content but right here you can see an element that is fixed to the bottom right. It's probably better to look on this page because we can actually see as we scroll, that appears to sit on top of the content because it is fixed no matter where you move around in the document. So you can set the position to fixed. As you see here, it's 0 pixels from the bottom and 0 pixels from the right, which means it's in the bottom right corner. We've set a width on it and a border to give it that style and this is going to stay there unless we were to change this positioned property. Going down, we can look at position absolute and position absolute is positioned relative to the nearest positioned ancestor instead of relative to the viewport like fixed. So that probably made no sense, but let's have a look at an example here. I'm going to click "Try it Yourself" and you can see here that we have a combination here. One is a div that is relative, M1 is a div that is positioned absolutely. So looking at the absolute div here, if we were to remove this attribute or this property and run it, it goes back to the default behavior of HTML which is elements stacking on top of each other. But if we are to give it a position of absolute, we are able to choose its position within this box. So now it's going to sit 80 pixels to the top of this box and 0 pixels to the right of this box. So you can see it's right up against the edge here. That is because we are on 0 here and it's 80 pixels from the top. We can always change this, we can make it come in a bit from the right, so I can give it 10 pixels there. Suddenly, it's come off the edge a little bit. I can also instead of right, affect the left and have it come out from the edge as much as it was before, but on the left side. There you go. That's position absolute. The next one is position sticky and it's based on the users scroll position. So it actually toggles between relative and fixed based on the scroll position and is positioned relative until a given offset position is met in the viewport. Again, probably sounds like technical gibberish, but to give you an example, this particular div is actually moving when I scroll, but once I hit it, it suddenly goes sticky. So again, I'm going to go to Try it Yourself here and you can see as we scroll, it stays up there. Whereas the default behavior, if we were to remove position sticky, would be to stay with the page but if I put sticky in there, once it hits that position, it'll go position top 0. So it will stick to the very top. I can change that for when it does go fixed and maybe position at 10 pixels from the top. Let's have a look at that. Now you can see that there is a 10 pixel gap between the top of the window or the frame here and the actual div. So going back, we can also have overlapping elements using absolute. So let's just have a look at that. We have an image and a heading overlapping each other and we are able to achieve that by having the image absolute. Again, if we remove the position absolute, this is what it would look like. The image would sit under the heading, like the default behavior in HTML. Moving on, we can see how we can position text over an image and there are plenty more examples here. You can test yourself with exercises. That's probably another good thing to mention. But then you can see the summary of positioning properties here. I know that's a lot to cover and may not make perfect sense right now, but again, as you start to develop using the position property, you will start to understand the differences better. But I guess the really common examples that you'll see with using the position property is; number 1, this position fixed, how this element just stays with you regardless of where you scroll. That's actually something we can see right here with this menu. The menu gets to a certain scroll level. It sticks up there and let's go in and verify that right now. Let's inspect, try and find the elements and actually is switching itself from relative to fixed. So it's not actually using sticky. But you can see here the position while we're scrolling is fixed and up here is relative. So sticky and position fixed are good for creating fixed menus that follow you while you scroll. This could also be fixed as well, or just in a different frame. Absolute, we are able to position things anywhere on the page, and relative, we are able to nudge different elements around based on the position that they were supposed to be originally. I hope that's given you a good overview of the position property. Again, as we develop more, you'll start to see the position property and action and start to internalize it more. In the next video, we're going to cover overflow and float.
25. CSS Overflow and Float: In this video, we're going to cover overflow and float. This is going to wrap up talking about the different properties in CSS, and then we're going to cover some more advanced stuff. Let's just dive right in and checkout overflow. The CSS overflow property controls what happens to the content that's too big to fit into an area. As you can see here, this content block probably only has a fixed height, but it's got more texts than could actually fit into that block. We can control how the content inside will behave by using CSS overflow property. The overflow property basically specifies whether to clip content or add scroll-bars when the content of an element is too big to fit into a specified area. The first one that you'll see is overflow visible. It means that the overflow content is not clipped and it renders outside the element's box. As you can see here, we've got a div of a fixed width and height, but we simply have too much text to actually fit in that box. One way we could fix this is by having the font size smaller, but maybe we needed that particular font size or we don't have control of it so one thing we can do is allow the overflow to be visible. This is actually the default behavior, and if we click on, try it out, we can actually remove overflow visible click "Run", and we'll see the exact same thing. You probably not going to be using overflow visible given that it is the default behavior. One thing you might use is overflow hidden. With overflow hidden, it's obvious what it does, it'll just hide all the overflow. It'll actually clip the rest of the content and make sure that the content sticks to the dimensions that we specified. If we click "Try it Yourself", we'll see that we have specified that we want the div here to be 200 pixels wide and 50 pixels tall, and if there's any texts that will take it past that, we're just going to clip it. If we were to remove this and run it, it would go back to overflow visible. Then there's also overflow scroll, which is what we saw above here, it allows us to keep the size of the box, but just have a scroll bar appear so that we can scroll through the contents of that particular div. Next one is overflow auto, and it's similar to scroll, but it adds scroll bars only when necessary. In this case it is necessary, but if we go into Try it Yourself and we made this a little bit bigger, then we don't actually need the scroll bars. Back to the document, we can affect the overflow on particular axes as well wherever we want it on horizontal or vertically. Overflow x will specify what to do if the left and right edges of the content and overflow y will specify what to do with the top, bottom edges of the content. That's overflow, basically not too complicated. If you have content it's overflowing outside a particular div, you'll just have to decide what you want to do if it. This is probably not ideal, maybe you want to hide it or maybe you want to have it scroll. Otherwise you might have a situation in which you change the font size so that actually fits at different screen sizes, but these are the different options available in overflow. The next one that I wanted to cover in this video is float. Float is very common. You'll see in CSS, there's two properties here. One is floats, and one is clear. The flow property is used for positioning and layout on a web-page, and the flow property can have one of the following values. Left, if floats to the left, right, it floats to the right, none, it just does not float and inherit means that it will inherit the float value of its parent. In its simplest use, the float property can be used to wrap text around images. If we look at this and we make the image float right, it will float to the right of the text. This is the benefit of float, it will wrap around your existing content. Let's try it ourselves. You can see here that we've got the image float right. If I were to delete that, we run that, we'll see that the image shows up right where it is positioned inside the HTML. You can see this paragraph, that will end, this image will start, and it will form the start of this paragraph. If we go back in and make it float to the right, and it'll go and wrap around the text. We can also float it to the left, like such, and it will float to the left. We can also add margin to make it a bit nicer, so it's not going right up against the text, so it allows us to create a more flowing layout, which is really important. We've seen float left, no float will just make it occur like it was before, with the image just showing up in line with the text, and what we have is the clear property. The clear property specifies what elements can float beside the cleared element and on which side. The cleared property can have pretty much the same values, except it also has one code, buff. The most common way to use the clear property is after you've used float property on an element and you want to clear the float. Here's an example here that will hopefully share with us how it works. As you can see, having float can cause some issues. You can see here that the two divis are competing for space, whereas here they are cleared, that is due to the clear property. I think the best way for you to understand clear is if we dive back into our project and actually demonstrate this. Let's just take our image here, and let's make it 25 percent so it doesn't take up so much space, and then I'm going to put the image right in the paragraph. I'm going to grab this and put it in this first paragraph here. Right now it's just going to display inline with the text, but if I give it a property of floats left and save, then it's going to float with the content on the page. We're going to give it some margin to the right and bottom so that it doesn't come right up against this text, and then you've got this image. Now, in terms of the clear property, it's used mainly to clear the floating functionality when you have multiple things floating around. I'm going to copy image and put it side-by-side here. We've got two floating images and maybe we want the second image to clear, so I'm going to put it in line here. I'm just targeting the one element, and I'm going to put in clear both. Now, you can see that these stacking on top of each other because it is clearing all the floating elements to its left and its right. If we wanted to clear left, it would probably have the same behavior, if we created right, you'll see it's back to where we were before because there are no floating elements to its right. Just to clear that up again, no pun intended, I'm going to get rid of this style, and let's have a look at the default behavior. What we've got is two images that are floating left, but perhaps we want this to come up on a new line. We need to clear it to the left of its floating element so we would put in clear left or clear both would work in this instance as well. There you have it. If we were to give this a float of right, we can both clear to the left and float to the right. Then you've got some variation with the floating of the images. That's how you can get floating elements to appear on top of each other or on new lines rather than have them next to each other even if they have the same floating property of left or right. Going back to the document, there's one other thing to cover here, and that is the Clear-fix Hack. What happens if an element is taller than the element containing it and it is floated? What will happen is it'll overflow outside the container like this. One thing we can do is use overflow order to fix that problem and that ties nicely into what we covered just before with overflow. To demonstrate this, I'm going to jump back into our project. I'm going to bring up the page, go into our code editor. I'm going to make this full screen because we've got a lot more content on the page now. The first thing I'm going to need to do is move this image tag into the paragraph that is next to. As you can see here, it looks like this image is probably more in this paragraph than this paragraph, but actually it is sitting right up here. I'm going to move it to the paragraph, press "Save", and right now you can see that the text wraps a bit more around it but what I'm going to do is get rid of these fixed heights and widths that I've set as HTML attributes and put in a height of 200 pixels so that it's bigger than the content in the paragraph tag. Then you go, you can see it's stretching. To see the actual constraints of this paragraph tag, I'm going to give it a border so that we can actually see the edges of this element. I'm going to give that a solid black border, save that. Now you can see the example that we had on W-3 schools. The image is sitting outside of the constraints of the parent element. I'm going to go back here, and what I can do is like in the example, set this paragraph to overflow order. Save that. And now suddenly the contents of this paragraph tag and now conforming to this image tag. So again, the difference is between this and this. That's an opportunity there when using clear and float to fix up this little issue that you might be experiencing. In our case, the image is not actually 200 pixels tall, so it doesn't need to be that tall, but just in case it was you have that option available and you can see here even at a smaller height, it still overflows. So we can go overflow auto again and see that now we can have it so that it always is a part of this particular elements which in this case is a paragraph tag. That covers overflow and float, there some other things in here that you can learn more about and more about how float is used in the real world. I'm going to just breeze over that and take you down to all CSS flight properties for reference, and in the next video, we are going to cover more CSS selectors before we wrap up this CSS section and get you started with implementing Bootstrap and getting you started on your class project. We're getting towards the end now, very exciting times, I hope to see you on the next video.
26. Advanced Syntax and Selectors: In this video, we're going to cover advanced selectors. If you remember back in the episode on Syntax and Selectors, we covered some basic ones including the Element ID and Class selector. Now I've got a few tabs open from w3schools so that we can go into some of the more advanced selection options. The first one is CSS Combinators and you can find that in the menu here. A CSS combinator is something that explains the relationship between the selectors. There are four different ones we can use. One is a Descendant Selector, a Child selector, and Adjacent Sibling selector, and a General Sibling selector. Now that probably doesn't make sense until we go in and see these in action. The most common one is a Descendant selector. The Descendant selector matches all elements that are descendants of a specific element. The following example that we see here will select all, p, elements inside, div, elements. Now that's quite broad, but let's try and put in an example in our current project. I've got the project over here in our browser, and I've got the code to my right here. Let's just say for instance, we've got these paragraphs, and inside the paragraph we've got images. What we can do is select all images within paragraphs by putting in a rule like this. Start with p, then we put a space and we put image. Now, every rule that we put inside here will be applied to images that are within p. It covers all descendants, even if we had a p and then inside that we had a div, and then inside that we had an image it would still select. Any image with a parents, whether that's immediate or otherwise, any image with a parent of p. Let's just do that now. Let's do float right. Going to save that. I'm going to move the code over to the right. Open this up and you'll see that our images are floating to the right. Now you might be thinking, we've got float to the left already affecting all images but remember specificity and hierarchy. We're being more specific here to say that any image within a paragraph, will float right. That's specificity working for us there. If you're not clear on what I mean by that, maybe go back and review the lesson on hierarchy. But here is one way we can use the Descendant selector using two element selectors. We can also combine elements selectors and ID selectors and div selectors. If I scroll down to try and find an example, let's say for instance, that we wanted to select all spends within any element that had special div as the class. We could do that by going into our style sheet here and under special div, I'm going to create a Descendant selector. I'm going to have special div as the first part of the selector, and then I'm going to put span. Now this selects every span within a parent element that has that class. What can we do with these spans? Let's maybe just change the color. We'll change the color to green. Now every span within a parent element that has special div, in this case, it'll be these divs right here and we should start to see the span changing to green. There you go. If we were to put this in this particular div without the class on it, press Save and look at that. We will see that this text dummy isn't green because it doesn't have a parent element that has this class on it. If you see here we have a span, if you go to its parent, it has a class of special div. If you go to here and look at its parent, it doesn't have a class of special div. That's some ways that we can create a class and then target elements within the element that has that class. Moving on, we have the Child Selector. The child selector is quite similar to the Descendant selector, except that it selects all the immediate children of a specified element. Remember I said here that this will select any image that has a parent of p and it doesn't have to be the immediate parent, it can be further up the chain. Going back to our style sheet, we don't actually have a clear example, but what I'll show you here is I'm going to set up another section. Let's have a div here, and then inside that div, we'll have another div and then inside that div we will have an image of src, photo dot jpg. Now we've got an image that has a parent and immediate parent of div and then another parent further up the chain. What we could do to target that one using a Descendant selector and this will allow us to see the difference between descendant and child is by putting in a rule here, div image. Every image that has a div, as its parent we should give it a border of two pixels, solid green. Now if we refresh the page, these images don't have a parent of div, but if we scroll down, we can see that this image, which has a parent of div, is now showing up with a two pixels solid green border. Right here, we have our image inside a box, but that is, if you remember, just a div with a background image. For example, if I was to remove this border here for that particular div, we wouldn't have a green border because this is actually a div element with a background image, not an actual image element. I'm going to reverse that and go back to here. What I'm going to do is be a bit more specific here because this image has a parent of div here, but also a parent of div further down the line. I want to be more specific here and make that parent div instead of the element selector for div. If we refresh the page, you will see the same result. Now let's have a look at what would happen if we used a Child selector. Remember, the Child selector selects all the elements that are immediate children of the specified element. I'm going to go back to my code editor and bring up my document in the browser. I'm going to put a greater than sign in between those two. That denotes that we only want to target immediate children. I'm going to press Save, and then refresh the page. Suddenly the border is gone off our image, and the reason why is because if we look at the immediate children of this parent div, the only immediate children that it has, it only has one child and that is another div. We're not targeting this image tag anymore because it is not an immediate child of this parent div. If we were, for instance, going to stack these, which we can do in CSS, now this should work because we are targeting an image that is contained by a div tag, that is contained by an element with a class parent div. We can combine these different combinators as well. I'm going to put that back to what it was before. Let's move on to the next selector. The next one is Adjacent Sibling Selector. As the name suggests, the Adjacent sibling selector selects all elements that are the Adjacent siblings of a specified element. What adjacent means is immediately following. For instance, the following example will select all p elements that are placed immediately after div elements. Rather than put that into our code, I'm just going to run the example right here. Right now we are targeting all p elements that come after a div and we're giving them a background color of yellow. As you can see here, we have a div with two children, one is a p and the second one is also a p. But these don't actually come after a div, they're actually children of this div so they are not targeted in this CSS rule. Once we go down here, this p comes after this div, so that actually is triggered by this rule. If we were to change this to a Child selector, for example, suddenly these children show up with a background color of yellow. This is just targeting the immediate children of div. For instance, if I wanted to put in another type of element here, maybe a section, and I started this section and inside I had a paragraph. Now I'm going to run that and see what happens. Only the first paragraph will have the background color of yellow. That's because this p is no longer an immediate child of div, it's an immediate child of section, and section is an immediate child of div. But this p is not an immediate child of the div. If I change this and got rid of the immediate child selector and just changed it to a descendant selector and click "Run". Now it's back to highlighting both of these because p has a parent of div even if it's immediate parent. I'm combining three examples there. Hopefully that makes sense to you guys now or is starting to make sense. Again, as you gain more experience with this, it will start to solidify a little bit more. The last one in the CSS combinators section is the general sibling selector. The general sibling selector selects all elements that are siblings of a specified element. Parents and children are probably new concept for you in this class. But essentially, if you understand parents and children, you should understand what a sibling is. It's the other children of a particular parent. Rather than create a new section in our document, I'm just going to click "Try it yourself". As you can see here, we've got a general sibling selector right here. What this is telling us is that, every p following div on the same level, we want to apply this particular style too, which is background-color-yellow. One of the confusing things about this particular rule is, yes, it target siblings, but only siblings that come after that first part of the selector, so in this case the div. This paragraph 1 for example, isn't selected because it doesn't come after this div. If I was to cut that and put that right here, it would be highlighted. That's one of the little tricks of this particular selector. But as you can see this second paragraph, that is actually a child of this div does not get the style of background-color-yellow. That's because it's not a sibling, it's actually a child. That covers these combinators selectors. Of course, I mentioned that these are some of the more advanced selectors. So I don't expect you to master them in this one video, but definitely try them out, experiment and you'll start to understand them a lot better. Another advanced selector is a pseudo-class. Remember we used an example of a pseudo-class. We used the hover state on a link. You can see here that is the first example. That is probably the most common example of a pseudo-class. But you can have a look down here of the syntax. We basically have whatever selector we are going to have anyway, but then to target the state on that particular selector, we can have a colon and then put the pseudo-class. We saw the ones for link tags earlier in this class. As you can see here, these roles, pseudo-classes. Pseudo-classes come most commonly on links because there are different states to links and links are of course a common element in HTML. But you can see some examples here of how we could do a hover state over a div or other element. That's probably the most common use of pseudo-classes to target state. But we can also use it to find the first child or any number of children from a specified elements. Here we can take the first child of a p, so it will match any p element that is the first child of any element and right here we can also combine a descendant selector or any number of selectors with this pseudo-class of first child. As you can see, it's getting a bit complicated now. We're using some of the combination selectors that we learned about just before, and now we're combining it with a pseudo-class, so you can string together some pretty long selector in CSS. You can also use them in a different order, so you can target all icon tags that have a parent that is the first child of another element. You can do any number of combinations. You can also use the lang pseudo-class, which I have no experience with, so I'm just going to breeze over it. There's plenty of examples of pseudo-classes here, so if you want to use this as a reference. The main ones are the ones that you used to determine the state of a link or determine whether you are hovered over something or not, and the other common ones are to select a child or a position of a child. For instance, this one nth-child, this will select all ps that are the second child of their parents. You can target a specific child within a parent element. Moving on, we will go into pseudo-elements. Pseudo-elements are like pseudo-classes accept, we use another colon. To be honest, I'm don't find myself using pseudo-elements that much. But a few things we can do with pseudo-elements is target the first line of a paragraph, and we can target the first letter of a word or paragraph. We can combine that with classes just like we saw in the pseudo-class lesson, and we can target first letter and first line of ps in the same CSS document. Probably the most common pseudo-element is before or after. Using before we are able to insert some content before the actual content of the element. In this example, we can insert an image just before any particular element. Then here is the opposite, we can insert some content after the content of h1s. There's also the selection pseudo-element which matches the portion of the element that is selected by the user. I haven't used this one before, but we can have a look at the example right here. If we select any content on the page, we can see that our selection is now styled using this pseudo-element. That's a pretty cool trick. I didn't even know you could do that before I started preparing this course. Here's a full list of pseudo-elements and also a full list of pseudo-classes for you to use. Finally, and this is becoming a pretty big lesson, so maybe you might want to refresh after this by going back and checking. But the final selector that I wanted to talk about is an attribute selector. The attribute selector allows us to select elements with a specific attribute. Right here, if we had an attribute and value of target equals underscore blank, we would apply a style to that specific element that has that specific attribute and value. Let's just click on the first "Try it yourself" and have a look at this. Basically, this is going to apply to any link tag that has an attribute of target regardless of the value of that attribute. You can see here, these two have a target attribute and doesn't care what the value of that target attribute is, it just cares whether that attribute exists. But we can be more specific and say that we only want to target link tags that have that attribute and have a specified value. We can go in and say that we only want to target link tags that have a attribute of target with the value of blank. If I run that, then you'll see that only this one is selected. Going back here to this one which uses a title, this particular selector is used to select elements with an attribute value containing a specified word. We can search within the attribute value for this particular word, and if it matches any part of the value, this particular style will be triggered. I'm going to close this one and just start afresh with this example. You can see here that the title has flower in these two benign, this one. You can see that these two have the specified style, which is border, 5px solid yellow. Another way to use this selectors with pipe equals, and that will be used to select elements with a specified attribute, starting with a specified values. Let's just dive right into the example. You'll see here that everything that starts with the word that we specified here and then is broken by a dash will be selected, but not this one in particular. That's just a rule here that you can see a note, it will only target a whole word, either alone like that or with a hyphen. This is a bit of a strange selector. I don't think I've ever used this one before, but this is an advanced stuff. There's all these different special operators that you can use. I'm not going to spend too long on it. If you want to get that creative with your selectors, definitely come back and view this. But essentially the main things I wanted to get across in this video are the advanced selectors like combinators and pseudo-classes, and many of the most common examples I've already put into our project. We've got the immediate child selector, and I think we used up here, the descendant selector. Those are the most common ones. Don't worry if you didn't fully grasp the more advanced level attribute selectors here. Definitely you want to understand this one so you can target elements with a specific attribute and value that I find very handy. But these ones I've honestly never had to use before, so don't get too caught up on them. The main ones that I really want you to know are these ones here, the combinators, because you're definitely going to need to use these at some point. You'll definitely see this one, the child selector as well. Pseudo-classes also for state, especially on a link, and especially for hover, but then of course you've got all these crazy pseudo-elements to targeting first line, first letter, lots of options available in CSS, but it's not necessary to know absolutely everything. You always have this website for reference. I hope that video wasn't too long and you're not totally overwhelmed. In the next video, we're going to wrap up the advanced options in CSS. Then we are going to get started sharing with you a framework that is going to make all of this so much easier and save you so much time. I'll see you in the next video.
27. Advanced CSS - Media Queries: In the last video I said we would cover some of the more advanced topics in CSS but if we look at this menu here, there are a ton of different options available to us. We can look at the advanced options available for rounded corners. We can use images as borders. We can create gradient backgrounds. We can give different parts of our document shadow. We can apply shadows to add DIVs or to our text elements. There is so much that we can do in CSS and it's too much to cover in this course, that's already probably quite long. If you do want me to create a more advanced CSS course, I'm definitely open to it, but for now, I want to talk about something that's very important in CSS and that is Media Queries. In CSS2, Media Queries were introduced and what they did was made it possible to define different style rules for different media types. But now in CSS3, they most commonly used to look at the capability of the device. Wherever there's looking at the width and height of the viewport or the device, the orientation, whether it's landscape or portrait, and the resolution. Media Queries, as it says here, are popular technique for delivering a tailored style sheet for desktops, laptops, tablets, and mobile phones. Media Queries super important for Responsive Web Design and Development. If we scroll down, we can see the Media Query Syntax and this might not make much sense here in this kind of overview but if we go down here, we can start to see some examples. The way you start a media query is with @media then the first little value here is screen. Screen, as you can see here, is used for computer screens, tablets, smartphones, etc. When we're doing responsive web design, screen is the one we want to use. Then we put an end in to say that we are defining a new condition and then we put in min-width or max-width or both. We can constrain these particular styles that we define within the curly brackets of this Media Query to just screen size of more than 480 pixels. The examples here are a bit lacking, so I'm going to go into the next lesson here and look at some more examples. A good example here, if I scroll down, is this example here I think is simple enough to understand. Here we have our standard styles for every screen size, and then we have our media queries. This one is saying, apply all these styles when the width of the screen is a minimum of 600 pixels. It's saying that any DIV with the class of example, we want to set the font size to 80 pixels. Now this one is talking about the opposite. When the screen size is less than 600 pixels, we want every DIV with the class of example to have a font size of 30. Now we can see the effect of this if we start to resize the browser window. Right here it'll tell us how wide this particular window is. If we drag our own window down until it gets to less than 600, we will start to see a change. Here we go, we're just above 600 and then as soon as we cross 600, the font size of this goes down. That's because we have specified it like that. But we can go in here and specify whatever you want. We could change the color to green. We could change the font family. I'm going to click Run on that and then show you that now. See when it gets to less than 600 pixels, we got font size 30 pixels and color green. One other thing I want to show you here that it doesn't show you is you can combine max-width, max-height. Say for instance, I wanted to create another level within this, I will keep that max-width actually. What I'll do is another and, and right here, I will put in a min-width. Between the widths of 400 pixels and 600 pixels, let's make the font size 10. It's not going to look great, but I'm pressing Save just out of a force of habit. It's not going to look great but at least it'll demonstrate in this example. I'm going to put for here, a max width of 400 and make this even smaller. What's going to happen now is by default, our screen size is 825, which is bigger than 600 so we're going to have a font size of 80. But then once we reduce it between 600 pixels and 400 pixels, we're going to get a font size of 10 pixels and a color of red. Then any less than 400, we're going to get a font size of five and a color of green. Let's see if this works. Now we're going down, now we're below 600 but above 400. We've got a 10-pixel red tidal here. Now if we go further down and go below 400, let's see what happens. Suddenly we've got an even smaller piece of text and the color is green. Again, not the most practical example, but you can see that we can define different, I guess, style sheets or it's really the same style sheet but different sections of the style sheet and define styles for particular screen widths. That is very important in CSS and you can check here for extra examples. We can also target orientation. We can target whether it's in landscape or portrait and then the example here is using max-width and min-width so we can target between particular screen widths to do particular styles. The Media Query and Responsive Web Design is something we'll see a little bit later now that we're going to get into implementing Bootstrap in our project. We're going to turn this giant mess into something a little bit nicer and build out a few more pages. Then after that, we'll get you started on your class project. Thanks for bearing with me through this quite involved class on HTML and CSS. In the next few videos, we are going to get started actually building something that will hopefully look pretty nice. I'll see you in the next video.
29. Rebuilding our web page with Bootstrap: Right now if you're a bit of a self-starter, you can use the knowledge that you've learned in this class with HTML and CSS and the documentation here on bootstrap and start creating your web page or website. But for those of you who need a little bit more guidance, stick around because in this video, I'm going to rebuild our page using Bootstrap. There's a lot of work that needs to go on with our current web page is pretty horrendous I'm not going to lie. That is because we've been trying to include all of these different examples and elements. What I'm going to do first is completely strip it back and rebuild it with Bootstrap. The things I'm going to get rid of to get this ready is I don't need some of these styles, so I'm going to remove them. I'm going to get rid of these random links and buttons. I'm going to leave that first paragraph him with the photo. I'm going to have our history is the second heading, but I don't need the ID anymore. I'm going to get rid of this second paragraph. I'm going to keep the table as a time line. I'm going to keep our values as a dark point and our services, I'm going to leave as one div without any particular class on it. I'm going to make sure I haven't deleted too many div. No, it looks like we're good. Let's see where we're at now. I say. Cool. I'm also going to delete the styles in my styles.css. You don't have to do this yourself if you spent a lot of time on it and you actually like these styles, this is just a complete mess as well. I'm going to delete all my styles and start completely from scratch. Here you go. You've got a web page with a bunch of elements and pretty much no styling whatsoever apart from this here which I'll get rid of, we don't really need and the styles that are being automatically applied by bootstrap. The first thing we want to do is put all of this in a container. If we want to learn about containers, I think that it is here in layout. I'm just going to search for container. You can see in layout, we can use containers to create the grid system. What it also does is it creates a max width at different breakpoints. Which breakpoints, for those of you who aren't familiar with the idea of a break point, it's what we had before when we were doing the media queries we were setting and maximum whips. Then when it reached that break point, that's when we started to change the content of the page. But you'll see it right now if I go back to here and I create a div, give it a class of container close that I'm going to put all of this in a little bit and then put the closing div tag. Now we should start to see this clean up quite nicely. I'm going to refresh the page. Now at a bigger screen width, we can see that it only takes up enough that makes it more readable. But if we're to reduce the size of it, the max width of the container changes. If we get really tight, it'll just go full width. You can see breakpoints here. You see how it's changing the width of the container based on different screen sizes. This is really a powerful feature of Bootstrap and we get responsive web design straight out the gate. Implementing the container is one of the easiest wins we can have in Bootstrap. Let's look at what else we can fix up in Bootstrap. One opportunity I can see here apart from I need to get rid of that title. Let me just fix that. One thing we can fix up here is this table. If I want to go back to the Bootstrap documentation, type in tables, and let's look at how we can style tables in a nice way using Bootstrap. The first thing we need to do is give the table a class of table. Again, leveraging the classes in bootstrap, we can just put in a class and get some styles straightaway. Let's just give the table a class of table. Then suddenly we have a styled table. How great is that. We have a few more options here. We can make the head a different color. Maybe we use a tea head section on our table so we can go on top of thead. We have a thead class, feed doc. Then we would put this in and then put the closing tag in. Let's save that and have a look at what that looks like. Yep, so now we have a dock heading row, and now the font has been changed to the color of white. Maybe for our services we want some cards. Let's go and type in cards. I remember I put in a code as an example before. I'm just going to select this. I'm going to create a section here where I put in some cards. That is the first card. I can put in a second card. I will press "Save" on that and see what happens. These are displaying on top of each other. Display block, if you remember. What we can do is go into our style.css and have it so that our cards display inline. We can modify the style that already exists in Bootstrap. We can display inline block, press save, and then suddenly they display inline. Now I want to give it some margin, so I'm going to give it some margin like this. I'm going to make it 10 pixels. Then suddenly we have some card with some margin. I'm going to duplicate this out. What you can see here is we're taking advantage of Bootstrap, but then we're also able to add up urn and styles and modify on top of it. Bootstrap takes a lot of the groundwork out of it. Then we're able to come in and use our own styles and just reference the classes that they create, but then also modify the classes that they create to get something that we want. For our services, maybe we put business, maybe we put design. I'm just making this up here. Printing and consulting, design, printing a misspell consulting there. Then we will find an image for each of these cards. I don't think it's worth going and sourcing and new image just for this example. I'm just going to use for the SRC of each image tag, I'm just going to put in photo. Press "Save." Now you can see that we have three cards and say for instance, this was our about page. You went down to services. You could click on these buttons and suddenly be taken to that page. Right now we've just got to hash for a placeholder, but you could just update this right here. All this is just a link tag, but it's styled using Bootstrap to look like a button. We can also change the text on these, so we could say consulting services. Then update that for design up here. Checkout our design services. We've got these template set up already and we can just go in and modify it. That's the power of Bootstrap. I hope you have enough there to continue one. In the next video, I'm going to share with you your class project.
30. Bonus: Styling Contact and Layout Page: The last video was supposed to be the final screen share video in this class, but I just remembered that I promised you guys that we would style a form, so I'm including this video as a bonus video, and we do have the opportunity here to style the other two HTML pages that we have in our project. I'm talking about contact.html and layout.html, and inside contact.html, we do have a form, so that's a good opportunity to show you how we can style a form using bootstrap. I'm going to open a new tab so we can keep the bootstrap documentation open, and just like before, I'm going to drag in contact.html so that's open in our browser. Here's our poorly styled form. But what I'm going to do is modify this using Bootstrap and it'll hopefully look a lot nicer. Going back to the documentation, I'm going to click on "Forms" and as we can see here, this is what our form will start to look like. Have nice labels and padding, and nice buttons as well, and right here we can see the code that will generate this form here. But first of all in our new document, we need to actually include Bootstrap, so what I'm going to do is open up my code editor, and you can see here in index.html, the tag which we use to include Bootstrap in index.html. We're going to need to copy that across to contact.html in order to include Bootstrap in that document as well. All I'm going to do is copy that, move over to contact.html, and below the title tag just paste that in. I'm going to press "Save" on that and then go over here, and now we should start to see our form change a little bit just by including bootstrap. There you go. The button's changed, the margin has changed, the font has changed, but it still doesn't look that great. What I'm going to do, is go back over to here, and reference what is here in Bootstrap. I'm going to move that to one side of the screen, and so we can work exclusively with this. Now the first thing you'll notice is that there is a form element obviously, which we have, and then there are different divs with the class of form-group, and inside these divs, you've got all the different things that make up that part of the form. You've got the label, the input, and some text in case there's a validation error. Down here you've got the same thing, label and input, down here, label input. In fact, you've got the label below the input in this case. Then finally, you've got button of type submit instead of an input of type submit, very similar thing, but just a different element. The first thing we need to do is wrap each part of the form in form group, and this will give us the styling that'll break it up over multiple lines, so what we can do is get rid of these br tags, we don't need them anymore, and now once that's done, I'm going to open up a div, give it the class of form group, and then I'm going to indent this, close the div tag, and I'm going to do this for the rest of the fields, so I'll quickly run through that. We've got each of them wrapped in a form group, but the other thing you'll notice is that our label is just sitting there without any html tags wrapping around it. What we can use is this HTML element called label to make this show up a bit nicer, so what I'm going to do is wrap all about labels with the element of label. Let's do that right now. Now, you'll notice that there is an attribute that we don't have yet, it's called the for attribute, and what that does is after you set an ID on the input, you can put that ID in the fore attribute, and that will indicate that that label is fore that particular input. Not a 100 percent necessary, but let's follow along just like an example, and put in a fore attribute. Now the second part of that is actually giving the same ID to input. But before that there's one other thing that we need to put on our input, and that is the class of form control. Just like here, I'm going to move that input onto another line, and I'm going to before the name. Actually, it doesn't matter where it is in the position of the input. I'll just put it the end class form control. Now I can put in the ID of the first name field, and that should complete one of the form groups. I'm going to go through now and do those changes for the rest of the form groups. That's almost everything we need to get this form the sharp nicely, the final thing is to change this input of type submit to button of type submit, and the major differences between an input of type submit is the value, which is what will show up on the button goes into the value field on an input, but on a button, it goes between these two button tags. First of all, I'm going to change this to button, and instead of the value here, I'm going to create the start of the tag, and then put in the closing tag. The final step for that is to put in the class, so it'll pick up all the styles of a button in Bootstrap, so btn and then btn primary. Save that, and now when we go over to our contact form, it should show up a little bit differently. Let's hope it looks a lot better. There we go, we can see that it's all broken on two different lines now, and the button looks a little bit different. But the biggest problem with this is of course the padding and margin, so we're just going to for some margin on right now. Save that, and now you have a nicer formatted form. I'm going to leave it there for forms. There's a lot more you can do to make your form look differently. You can add in different inputs, so definitely check out the reference here for styling forms. I'm going to go over now into layout.html and show you how we can get a similar layout to what we saw in that example that we copied. What I'm going to do is grab our layout.html, drop it in here and then I'm going to go back to W3 schools, and remember we found that in the HTML layout page. What I'm going to do is, as you can see this first section header is extending the full width and then you've got sections and asides, I believe. But let's just actually go in and open that file, so I'm going to go into html and open layout.html. As you can see here, we've got a header element with a class of header, a section element with a class of section, and article element with a class of article, and finally a footer element with a class of footer. We've got all the elements there to target and all the styles there to create a certain style, so what I'm going to do is instead of creating a whole new style sheet, I'm just going to include a style tag so we can embed some styles. Style opening tag, style closing tag, and one thing that wasn't really mentioned in the course is that we can include style tags anywhere in our document, it doesn't have to be in head, but it's recommended to put in head if you have a head section, this particular document, we don't actually have a head section, and for this particular example, we really don't need to set up one. But usually of course you would have a head section. First up, I'm going to reference this, give the header a background color of gray and a text color of white. I'm then going to text align center, and let's see what we get now. Cool. Right here we have a lot of padding, so I'm going to add some padding now, I have padding of 30 pixels. There we go. All right, so that's our header. The next section is this nav section down here. I shouldn't use the word section because you might be getting confused with this actual section element. But the next block-level element that we can style is this nav element here. What I'm going to do is go into here nav, give it a background color of light Grey. I'm going to give it some padding and let's see what happens. There it is, but of course, it's taking up the full width because it's a block level element. What I'm going to do is for nav and the adjacent element, which is article, set these to inline-block. I'm going to display inline block. You can see here that it actually is breaking to a new line. But if we expand the screen, you will see that it shows up together. What we need to fix that, is just to restrict the width of the article section. I am going to restrict it to width of 500 pixels, go back to here, and now you can see the next to each other. As you can see here, this section is not vertical aligning to the top, so I am going to fix that next vertical line, top. Save that. Now it's up here. I'm going to give some margin left to the article, so that it's not so far up against that border. H_1 was a bit bigger in this example. I'm going to give article using a descendant selector here, Article H_1. This will select any H_1's inside articles, and I'm going to make the font size twice as big. There we go. The final section is the footer and it has a similar style to header, so I'm just going to copy header word for word. I'm going to put it down here and change this to footer. As you can see here, we're using element level selectors the whole way through, but we have classes here as well. We could target via classes as well. Instead of header, we could use dot header because we've got a class of header. We could use a class of nav instead of the nav element selector. That would allow us to create another nav that didn't necessarily have that class and not have these rules affected. I'll save that, see what that looks like and now we have this footer. The next thing you'll notice is that this element is not extending down to the footer. What we need to do for that is to give the section a certain height and then have both of these elements conform to a 100 percent height of its parent element. What I'm going do is just here, I'm going to put in a rule for targeting the section. I'm going to give the section a height of 500 pixels. What I'm going to do is set these to have a height of 100 percent. That's going to be a 100 percent of the apparent element, which is section. Save and reload the page. Unfortunately we've got some overlap here, and that is because we have padding. So to fix that, I'm going to remove the padding from the nav itself. Now you can see that it's lining up, but there's no padding on this. What I can do is give the ul padding, not the nav. I'm going to nav ul padding ten pixels. You can see that starting to show up a bit nicer. The dot points are going off to the side, but we're not going to be using them anyway because we're creating the example here. Actually, if we give it more padding, it comes back up. We can easily achieve that by putting in a list style, type of none to get rid of those dot points. Alright, so now it looks a lot similar to what we have here. If we expand the window, we can see these sections will be responsive to a certain point. Then when it reaches here, it stops up. We will need some more responsive styles. So to fix this style on a smaller screen size, you guessed it, I'm going to use a media tag, so I'm going to put it at the top. The reason why I am putting it a top is it's a small thing. But essentially if I was to load this page on a slow network on mobile, the styles load from top to bottom. These would all load first. Then if I had media down the bottom, it would load the mobile styles last. There can be this kind of delay where it displays the desktop styles and then as it loads the mobile styles, it's a very small thing that I wouldn't worry about, but that's why I'm putting it at the top and I'm going to define the break-point here. If we open this full width and open the inspector, the inspector actually gives us the width of the window. I'm going to drag this down until it breaks. There's a bit of a delay, but the breakpoint seems to be around 640. What I'm going do, close that, go back here and say max width, 640 pixels. Let's see what's going on here. If I reduce the width of the window, as you can see here, it's this article section that is knocking to the bottom. Now what I really like to do when I'm debugging code is to use the inspector. I definitely recommend if you are comfortable with using it, definitely use it. I'm going to press Alt command I on Mac using chrome. What I can do is right-click on this text that has gone down the page and inspect the element. I'm inspecting the article here and I can see that a width of 500 pixels is applying. We have a screen size right now of under 500 pixels. It's going to cause some issues at that screen size. What I'm going to do is instead of 500 pixels, change this to 250 pixels. See if that works even you add a smaller screen size go down. It's still breaking at a smaller screen size. Maybe I will make it a 150 pixels. This all happens just in our browser. So if I refresh the page, those changes aren't permanent. But if I go in here and create a rule for article, so below the width of 640 pixels, the width of articles now going to be 150 pixels. Now, you probably want to use more relative terms here. But in this basic example, I'm just going to put in a fixed value. One more thing we need to make sure that this overrides what is down here in this rule decoration is the important tag. In this case, it is okay to use important. Remember, you got to be careful with important, but we really want the width to go down. The alternative would be to change this and make this more of a relative term. But for this example, I'm just going to throw in important. I'm going to refresh the page and you'll see there's no difference yet. But if I reduce the width of the window and it gets to that break point of 640 pixels, the text gets smaller. There you can see even at a tiny screen size, it is still showing up okay. Now it is bothering me a little bit that once it gets to here, it is just too small. So I'm going to try and create that with a relative width. I'm going put that back, and I'm going to change that to a relative width of 55 percent. Save that and once again, you will see no changes until we actually reach that breakpoint of 640 pixels. But if I go further down, you'll see it reaches that breakpoint and then has a relative width. If we go all the way down, it'll still work. Alright, so that's pretty much as far as I wanted to go in this bonus video, you can now see me working through a styling challenge using CSS. I hope that goes to show that there are challenges along the way with CSS, you throw some styles in, you realize it affects other elements on the page. Then you modify different attributes, change the structure of HTML sometimes as well, to create the look that you're going for and make sure that it works on every screen size. I hope this video has been a good supplement to your learning in this class. In the next video, we're going to wrap it all up and get you started on your class project. So I'll see you in next one.
31. Conclusion & Class Project: All right, so I now hope you're ready to finish building out the rest of your static content-based website with HTML and CSS. Remember guys, if you need any tips or guidance, be sure to leave your comment in the discussion box below, and I'll do my best to point you in the right direction. As for deploying your website, which is putting it live onto the internet, I've covered that previously in my class, understanding web development. So just head to the first video on deployment in that class and you'll have your website up and running in no time if that's what you want. So that concludes this class on HTML and CSS. Obviously, despite going deep into these two languages, there's a lot more to the web than just structure and styling. So stay tuned. I plan on releasing more courses for you to build your knowledge of web development in the coming months. So thanks for watching and I hope to see you in some my other classes.