Front-End Web Development: HTML5 & CSS3 | Chris Worfolk | Skillshare

Front-End Web Development: HTML5 & CSS3

Chris Worfolk

Front-End Web Development: HTML5 & CSS3

Chris Worfolk

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
54 Lessons (2h 42m)
    • 1. Introduction

    • 2. Browser development tools

    • 3. Introduction to HTML

    • 4. What is HTML?

    • 5. Anatomy of a page

    • 6. Semantic tags

    • 7. Common tags

    • 8. Layout tags

    • 9. Working with text

    • 10. Working with images

    • 11. Image formats

    • 12. Working with forms

    • 13. HTML solution

    • 14. HTML features

    • 15. Anchor tags

    • 16. In-page links

    • 17. Tables

    • 18. File uploads

    • 19. Video

    • 20. Audio

    • 21. Preloading media

    • 22. Introduction to CSS

    • 23. What is CSS?

    • 24. Creating a stylesheet

    • 25. Adding styles

    • 26. Selectors

    • 27. Types of selectors

    • 28. Editing CSS live

    • 29. Properties

    • 30. Sizing boxes

    • 31. Display property

    • 32. Designing layouts

    • 33. Flex box in detail

    • 34. Media queries

    • 35. CSS project example

    • 36. CSS features

    • 37. Background images

    • 38. Gradients

    • 39. Overflow

    • 40. Pseudo-elements

    • 41. Transitions

    • 42. Variables

    • 43. Introduction to SEO

    • 44. What is SEO?

    • 45. Modern SEO

    • 46. Page structure

    • 47. Meta tags

    • 48. Robots txt

    • 49. Introduction to tools

    • 50. Can I Use

    • 51. Lighthouse

    • 52. W3C Validator

    • 53. Colour tools

    • 54. Final thoughts

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

Community Generated

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





About This Class

Do you want to learn HTML and CSS from the beginning? Do you want to build modern, responsive websites or start a career in web development? If so, this is the class for you.

We will start with the basics of how HTML works and how you write a web page. We will look at theory and practice while you code along with me to get some hands-on experience.

We will explore topics such as responsive design, search engine optimisation and the tools that professional web developers use to get the job done. By the end of the course, you will have everything you need to build a website in HTML and CSS.

Meet Your Teacher

Chris Worfolk is a psychologist and software consultant. He is the author of How To Exit VIM and Do More, Worry Less.

See full profile

Class Ratings

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

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

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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



1. Introduction: Welcome to this class on front-end web development. How HTML and CSS have changed the world. Do you think of all the answers we get from Google of all the time we spend on Facebook and novel and knowledge contained in Wikipedia. That's all thanks to HTML and the way that we can now build and share information online using websites. And while we learn this frontend tool set and we have that power to change the world. My name is Chris and I've been a software consultant for 15 years now and I can't wait to share all of this knowledge with you so that you can go out and start creating amazing websites. So let's get started. 2. Browser development tools: Let's start by exploring some of the useful tools that you have in your browser that will help you do your job. So I've got the local sample code here that are checked out on Golda pages here. And we don't need to put these on web server. We can just take an HTML file and we can drag it into the browser. And it will display just fine. Now here I'm using Chrome. You can use any browser you want. They all have the tools we need here. But there's a couple of things. So first of all, we can view the source of the page, view the HTML that powers the page of any page. So if we go up here to view and then Developer, and then we can get a view source. Here is the HTML that powers this page. And we can do that on any website we want. I could get to this GitHub page for example, and I can do the same thing. And I can view source here. And obviously Git Hub has lot muscles code than our sample project. But you can do this on any website and just explore like GAAP. Let's get rid of those. And then we also have developer tools. So I'm going to right-click and go inspect here. But you can also access that from developer, developer tools. And this gives us a bunch of options. So right now among elements that will allow me to explore each HTML tag on the page. I've also got this console that will show errors. And over network, I can see all the requests. So in this case, not much going on here. I've loaded a webpage in a stylesheet. But on a big website you can see lots and as a ton of different things to explore here. So this will be really useful as we go through the course. Now, as I say, you don't have to use Chrome, for example, here I've got Firefox, and again, I've dragged the sample pi Jen, and everything is on a little bit of a different places. So here we get the tools and then Web Developer. And here we've got page source. Now give us a sauce again. And we've got loads of developer tools here as well. So here we've got a similar thing where we've got our console. We are network requests LAS refresh and see if we can get some. And here we've got our console again and the Inspector, which allows us to check how each of the elements. Now the same tools or on safari and edge, not going to suggest you use those because those are platform specific and Firefox and Chrome available to everyone. So we're going to stick with those will predominantly use Chrome, but Firefox works just as well there as well. And there's a bunch of other useful tools. So we can see there's loads here. And same thing in Chrome that has all these extra cool tools. And we're going to look at some of those towards the end of the course when we look at more advanced tools. But for right now, getting started, being able to view the source, being able to come in into the developer console and see what's going on. And perhaps with the elements is going to be super useful as we move through the lessons. 3. Introduction to HTML: In this module, we'll look at the fundamentals of hate him owl. So how do you write HTML page structured? How do you put in all the bits that turn this series of code into a webpage. Then in later modules, we'll do a deeper dive into some of the features of HTML. 4. What is HTML?: In this lesson, we'll look at how HTML works. Html stands for hypertext markup language, and it's the code that web pages are written in and human-readable. So if you look at, for example, an application you download like Microsoft Office, pass all compiled into bytecode. You couldn't look at it. Both. Html is different. You can look at source code and you can see what it is and it's all readable and you can understand it. And you can also write it in a text editor because it's all human-readable. It's also executed in the browser. That's why we call it client-side. So languages like Java or in PHP, we would send a request to the server and the server would do a thing and send those the result. But with HTML, when we ask for web page, the whole webpage, including the HTML gets sent down towards and then our browser compiles it. And that has advantages, also has disadvantages won't bang. That browser can do things slightly differently, and we have no control over how the browser renders it. Would you send them the HTML and let the browser get on with it. So let's be clear about the difference between client-side and server-side. So we've client-side, we're talking about frontend, where server-side we talking about backend. And in front-end, the user is sending the code and then the computer executes the code. So we send them the HTML and the browser then turns out HTML into a webpage. Whereas on the back end, the server does all the calculations and then sends the user the end result. We front end. The user can see the code and we'll look at how we can explore the HTML behind any website that we browse. Whereas with server-side, all that code is hidden away. That's important for security, of course, if you writing a backend system. So that's something to be aware of. Some things do need to be done on the backend. For an end, we're talking about HTML, CSS, JavaScript, whereas examples of back-ends would be PHP, Python, and Ruby and Java. So what does HTML look like? Well, it's a series of tags with content. And so here we've got we starting off with the Haight one Taggard's heading one tag and we've got an opening tag and a closing tag. And we've got some content inside a know all tanks close. So for example, our image tag stands alone. And as you can see, it's very easy to understand the fetus read for it what it should look like. Now let's go ahead and break down these tags further. So couple of things going on here. We've got, what we have here is a paragraph tag, that's what P stands for and a stands for anchor, which is a hyperlink. So we've got our paragraph tag and then we've got our, we've got a hyperlink inside. So the hyperlink in this situation is a child tag. And the paragraph is apparent type because that's sitting around the anchor tag. And we can lead these as deep as we want. Every HTML page is just a mass of elements embedded inside of the elements. And then we also have the closing tags that we open it. It's by the brackets, square brackets, and we put a tag name inside. And then when we close it, we did the same thing, but we put flash before the name. And then these elements can also have attributes. So if we look at this anchor tag, it's got its opening and closing and its content inside. But we also have this attribute. In this case, it's hate wrath, telling the browser where this hyperlink should go. And the attribute has a value. In this case, it's linking to my Twitter page. Now some tags, as we discussed, are what's called self-closing. So we don't close them explicitly, says there's no INJ stands for image and there is no slash ING at the end. To close the Institute's one tag, we have a bunch of attributes, in this case source, which is the location of the image, and which is an alternative value for screen readers. And if the image doesn't load. Now sometimes in certain standards such as XHTML, which was the prior standard of HTML, and JS Acts, which is the language that React components are typically when you do explicitly have to self-closing tags by adding a slash just before the end. So you don't need to write a nova IMG, you just need to add that slushy and bring HTML5. We don't need to do that. We can just write it like the example above. So to summarize how HTML pages are a series of tags lead inside each other that aims to provide meaning. In the next lesson, we'll explore how our page is put together in more depth. And how also you can look at source code behind your favorite websites and start exploring that. 5. Anatomy of a page: Let's explore how a webpage is put together. So we've got our sample code here and we're gonna go into the HTML project and open up the anatomy. And we can drag this into the browser as well. So we'll find it in here and drag it in. And you've got it as well. So let's look at the code. Here's the HTML, and we're starting with the doc type. This indicates that it's the HTML5 standard. If you wanted to use any of the standard, HTML six is out by the time you're watching this, then you would want to use a different doctype. Then moving down, we've got our HTML tag, which contains the entire page. And inside that we have our head and our body server head contains the matter information like we've got the title here which says anatomy of webpage. And we can see that's up here as well. And then we've got some tags to coding to UTF-8 to set the viewport. So this is super useful when we're making responsive websites. We don't want mobile phones to scale it down, so it's tiny. We want it to look nice. And then we're bringing in some CSS as well. Don't focus too much about that because we're going to look at that in the CSS module. So all of this stuff in the head, the matter information isn't displayed on the page, it's used elsewhere to, for example, load in CSS. I'll put the title appear and inside the body tag, this is where the actual stuff that we see on the screen is n. So in this case we've got a header tag and the main tag with a heading and a paragraph here. And we can see that on page we've got a header and we've got had a heading and paragraph. There's some CSS I've already created, which is why we've got this nice blue background. But let's go ahead and I'll just add a new paragraph to this. Just say something like this is a second paragraph. And we'll close that tag as well. And then we can hit refresh. And there we go. Our second paragraph has appeared. So if you want to have a play around with this page, modify some stuff, see what happened. You could modify the title, could get rid of the CSS. We can add more elements here and just have a phone, have applying, get familiar with how a web page is organized. 6. Semantic tags: In this lesson, we'll look at semantic tags. Html should be easy to understand, and that's not just for the browser, but we're also thinking about search engines here. So when Google comes to crawl your website and wants to be able to understand what's in there. And also accessibility tools. So things like people using screen readers and navigating through your page of a site. We want them to be able to understand what's going on. Now in the olden days, we used to use loads and loads of dibs. And everything in the layout was a div and it didn't really make any sense. Or whenever example is, instead of using paragraphs, everything would just be done with line breaks. And if you wanted to split two paragraphs, it all be in one paragraph tag be Egypt's used to line breaks where you wanted the blank line. And thus not very semantic is not very easy to understand what's going on there. And so HTML5 onwards, we started using a lot more semantic tags. So things like we've now got its header and footer and main article section. Loads of things to really help browser tools, search engines, accessibility tools, understand what's going on in the page. And we've also, as an industry had a big crack down on making sure that we are writing texts that make sense. So for example, when you have two paragraphs, make sure that genuinely in paragraph tags, rather than just faking with line breaks, things like that. So whenever we're writing HTML, we want to think, can I make this super easy to understand? If I was reading the HTML itself. 7. Common tags: Let's look at some of the common tanks you would find in a web page. So we'll try and common tags into the browser here. Okay, now, and let's go ahead and code this ourselves. So delete everything in main and why they're ourselves. So the first thing we're gonna do is create a heading. In this case, we're gonna use a hate worn because it's the first heading on the page. So you can do H2, H3, H4. And these all wanna cascade nicely. So you can have multiple headings, but you wouldn't, for example, have a h four and have something out of order like if I put h four here, that wouldn't really make sense because this is a hate worn. So whereas 23, that's going to be confusing for anyone using a screen reader. So there we've got our nice H1 tag. And below this, let's create a paragraph. And let's put in some bold tax. We use strong to give it emphasis and a prohibition US emphasis because we are now going to use the am tag, the emphasis tag. Add some metallic text. Nice. And then let's also add a hyperlink. Hyperlinks are the backbone of the internet of the thing that links everything together. So here we're using this a, an anchor tag is what it's called to make a link. And we're giving it an attribute of a hate ref, which is the URL we want to send them to. And let's see where we are now. Great, so we've got our heat one there, go our paragraph with some text styling. And we've got hyperlink here as well. And then let's go ahead and add an image. So we're using the IMG tag. And the attribute is solves SRC and put in the URL. And we'll give em out tag as well. So an alternative, which is the thing that will be displayed if the network request fails, you can't get the image. Or if you're using a screen reader, you obviously can't, or you may not be able to see the picture. Some people will use a screen reader and up partially sighted or fully sighted. But mostly screen we'd see used by people with low visibility and say they want to hear what the image is about rather than see it. And let's use another heading. So this time let's use the H2 because that's the next one down. And we'll create an ordered list using AOL and then list item ally. We can create a few of these and see what that looks like. Yeah, nice. Map Pan-African clearly. But we've got our ordered list. And if you notice, we didn't put these numbers in. They just, we just said an ordered list of list items and the browser's fill those numbers in. And let's just fix this image. Okay, nice. We've got a picture there. And then let's do an unordered lists. So we use H2 again because it is kinda like the same level as S is below our page sag, but it's just as important as this one. Say for an unordered list, we use URL, but then that's still list item. And we'll close that. And then we go. So now we're using bullet points. Now we can tell the browser what to use in CSS. But for now, the default is just fine. And then let's add some interactivity to the page. So let's finish with a form element. And forms can have a bunch of attributes including Action which tell them where to go, and the method, which will depend on how the backend response. For now we'll just choose a method. And we use the input type and we'll put text here. So there's a bunch of things. We could use password, we could use checkbox we could use, or radio. We could use hidden. Lots of options there, but we use text for now. And we'll give it a name. And we'll give it an aria label as well. Because again, it's not going to be obvious what this really does to someone using a screen reader. So we'll give it an aria label to explain. And then we'll add a search button. Submit. And yet we've already got closing form tag. Okay, nice. So we'll refresh that. And then we've got a form as well for malaria, we can type into, we can hit search. Now. So those are some of the common tags that you might find in an HTML page. 8. Layout tags: Some of the key tanks that you'll use in building your page are the core layout tags. And it's not an official name. But we just talking about attacks and really act as building blocks. Let's go ahead and open up this lamp Tags file. And we'll drag it into the browser as well so we can take a look here. So when I had a, we've got a menu here. Then we've got our main body here, nice Fatah and the sidebar over here as well. Now historically, we might have to use the div tag for everything and thought would've been really bad because it would be really difficult to make sense of that. Like it makes sense to us looking at it visually. But for say, a search engine like Google crawling the page, trying to work out what is law, that's very difficult. And also if you're using a screen reader, really difficult to understand as well, which is why we can use semantic tags. And that's what we've used in this example here say for example, the header. Surprisingly enough, send a header tag, makes sense. And then we've got this nav, which is a navigation, and you can put whatever you want. And here in this case, I've got an unordered list with these free, what could potentially be different pages and links to pages. And then below that we've got this main tank, which defines a main bodies and that includes the sidebar and Nisbett. And then we've got footer tag at the bottom. And then inside the main tie we've gone article tank, which is the actual article or blog post or whatever it is on the spade. And then we've got HA, sidebar here, which is called an aside. So the great thing about using these tags, it's really obvious to search engine bots like Google and anyone using accessibility features, how the page is structured on where everything goes. You wouldn't necessarily use the article and aside, but it's nice when you can. But using things like header nav, main, footer, always really good to do. As we've shown in this example, you can use just the div and the spans. And if you wrap something in a div, like haha, it forms its own block. So this is almost like a paragraph here, the center bit. But it's not until in a paragraph tag and it's in a div tag, not recommended because we want to use the paragraph tag to give that semantic meaning. But you can do. And then we've also got the span tag here, which sits in line. It doesn't create any block, but allows us to do things like if we want to style it off, we want to target a specific area of JavaScript. We can put a span tag which is invisible by default when we create it. So those are some of the key layout tanks all want to use going forward as we build our pages. 9. Working with text: Let's look at how we can work with text. So we'll bring in ness text-page here. And let's go ahead and open it here as well. And we'll just get rid of all of this content and more Cody ourselves. Let's start. As we've discussed in previous lessons, we can put in these headings and let's create a heading, one paragraph and we'll just write some text in it. We can say paragraph one. And we can add style with us, strong and emphasis tanks. Okay, nice. And I don't know how the second paragraph here, and I will include a hyperlink. Let us give a refresh and see if that's working. Yeah, cool. So we've got two paragraphs, got a hyperlink style text. And then below that, that's either heading level two. And that's literally calling heading level two to be really clear. And I'm not stick in an unordered list below it. So again, just stick in some sample items. And if we go back here, we've got our list with some nice bullet points. And then let's look at breaking text as well. So by default, paragraphs will just flow. If you need to break text. You can use the line break, which is just b. And what we should find now is that this text is broken over two lines and it will break exactly here. Yeah, there we go. So instead of flowing all the way across the page, because we put a line break in here, then it breaks that. 10. Working with images: In this lesson, we'll look at using images within the webpage. So we'll open up our images file here. And we'll open up in the browser as well. And let's just get rid of all of the code we've got here and we'll code it ourselves so we understand what's going on. So credit paragraph tag and inside it will pull our image tag, which is IMG. And then there's already an image in the Images folder. So we use that. I had a nice long description because if the Google Boys calling our page, if someone who's partially sighted or blind is using a screen reader, we want them to be able to understand what's going on. So I will say something like picture showing clouds in the sky and missed over the trees. And then we'll close that paragraph tag. So we should have all image now. Yep, nice. And then that works fine. But what happens if we want to higher pixel density screen, such as an iPad or an iPhone or, or really any modern smartphone. Well, we can produce a higher version. We don't want to load that high reservation for every user because that would be a waste on users can't see it. But there is a way we can conditionally load it. And so we'll load it the same way we did with the original image. So the moment this looks like the above, but we're also going to add a source set, which is an additional parameter. So if the browser doesn't understand or doesn't want it, you can still use the source. But here we can pass in landscape dash 600, which is a high resolution version of the same image. And we're gonna say that lies at 2x. So if you are at twice the pixel density of a normal screen, then you're gonna get 2x it. Now, we're not on a high density screen here. So if I refresh, it just looks the same. But if you look at it on a smartphone, you would, it would basically still look the same, but it looks a lot better because it'd be a higher-quality image. But we can also do the same thing but adapted to screen size. So let's look at how we would do that. Again. As a fall back, we'll use the old-style Spaces app it better so it's clearer. And here we're going to credit our sauce again. So we're gonna say landscape that JPEG. And we're gonna set this to the free 100 wide one. And then needs some momentum. So we're gonna put 600 wide one in here. In fact, we need a comma to separate those. Let's make sure we include that. And we'll call this 1600 wide. Ok. Nice. And then below this, we're going to add a size is attribute as well, which will tell the browser which one to use. So we'll say max width 603. Okay, now, so now if we go and you've got a really big version here, let's just open up our developer tools and we can see what's going on. And then if we resize the page, we see on a small screen, it loads the noise small image. But on a bigger screen, we get the full size image. So that means that if you're on a small screen, you don't have to download the high resolution, high bandwidth image. But if you're on a big screen, will download it so you get them much higher quality. So we can deliver a relevant file size. The client is requesting the page. 11. Image formats: In this lesson, we will look at the major image formats out there so that you can decide what format your images should be, and you can always provide them in multiple formats. So the first is JPEG, incredibly common. It's great for photos because it really gets the file size down. So compared to a love of formats that produce huge images on a big photograph, JPEG is really good at compression, and you can control that compressional law and still get great results and quite high compression levels. The disadvantage is that it is a lossy format. You do when you compress it, you lose a lot of the detail and say econ and blow the image. Backup again, it creates a lower-quality version. Then we've got GF. Yes, it is pronounced Jeff. If you may have heard it pronounced DF, but it turns out it is Jeff. This is great for simple graphics and animations. So the lots of animated GIFs going around. The problem with Jeff is that the compression is pretty poor. So if you try to do anything like a photo, you would end up with a massive file size. Then you've got PNG. Dce is great for both high quality and it supports transparency. Say genuinely anything that we used to deal with Jeff would probably doing a PNG these days. Again, it does have very large file sizes for photos, so we tend to use JPEG for big photo, but for graphics and even some complex graphics. Great. The transparencies Paul is gray and you can get some really high quality images there. And then we've got web pay. Now this is a new image format specifically developed by Google for the web. And this is good for almost anything like it works great for photos, it works great for graphics. It's just a newer format that works a lot better. The disadvantage is there is limited bounces or not all browsers supported and all operating systems bolted. Windows now has support. Hmac is trailing behind. And so a lot of the time if you're going to provide a webpage, you need to provide a fallback image. Because a lot of users just want to be able to use it. Things like Photoshop doesn't currently have a webpage Export option by default. So there's a lot of adoption problems in an support issues there. But it is probably the former of the feature. 12. Working with forms: In this lesson, we'll look at using forms. So we've got this forms page here and we can open this up in the browser as well. And again, let's delete everything in here. And that's created from scratch so we understand what's going on. So we'll start with our form tag, which is our container. We'll set the method to get and could also be post. In this case is fine. But we probably would pipe subtitles. Let's make it a post that's handled on the backend. We don't need to worry too much about last front end dev. And let's put each input inside its own block. And let's write some code. So let's write this out. And then we'll take a look at what's going on. And so domains text, it would help fund could spend length. Okay, there we go. We've got a box here and we can click on it, click on the label and algebras focus. And we can put anything in here. And if there's nothing in there, it's got this great app placeholder text. So let's look at what's going on there. We've got our input tag and we're setting that to a type text because we just want to use to build 20 text. And we'll give it a name. And a name specifies what the data will look like when it's sent to the backend. So in the backend receives an input, it will be name equals whatever name we've entered. An ID is used on the front end here, and we use that to connect to the label. So we want to give it a label so that users know what it is. And in this case, we're gonna give it the ID of name. So here we can use this for tag to link it together. When we click on it, it goes here. And we can give it a maxlength as well. So how many characters can we use Enter. We set out to say, if we just not my plan to five stops when I get to five. Now, we shouldn't rely on this for validation because the user could go in and change it. So it's pretty easy to do Here we go. Just kinda go into my developer tools and change it to 15. And suddenly I can enter more text. So it's useful for indicating to the user what they should be doing. But if you were building on backend system, you'd need to validate yourself because users can get round it. And that's just an issue with HTML being client-side language that the client has access to it, you can change it. And then we've got this place holder here, which if it's empty, we get this kind of grayed out example of what could be in there that disappears and we start typing. If we didn't have a label here, then that would be really confusing to anyone using a screen reader. So we could use aria label to give some context. It was obvious to sighted users, but not obvious to users using a screen reader, we could do that, but we've got a label here, so everything's good. And then to fall down, let's add a second on. So that's asked for people's email address as well. And this time we'll make it a type email, call or email and give it an ID of email as well. And in this example, we are going to pre-fill it. So we're not going to use a placeholder. You still could be in this case, I'm gonna give em a value which is the default value is now if we reload the form, we find it's already filled out. Now that's different to place holder. In place holder. There's really nothing there. And if you submitted it, the box would be empty. Which is why you've just got grayed out text. But here when we use value, that value is actually there and we can go ahead and edit it. And it doesn't disappear when we start typing. Okay, now let's look at a drop-down menu. I will say it will cause experience. And for a dropdown, we use the select tag. And again we'll give it a name and an ID. And then we'll create some options within the drop down. And we can give this a value. Or we can just use a text but not say, OK, you could be a novice, you could be experienced, or you could be an expert. There we go. And then we'll close that select tag after all of our options, are there. Refresh that. We've got our nice little drop-down. If we want to select one of those, then we could say selected. There we go. And there's a bunch of these little tags we could use. For example, here we could say disabled. And I'll stop the user editing it. But again, need to validate all this stuff on the backend if you also building the back end. And we forgot to close that div. So that's not good. Let's do that. And then, or if we want to enter more text, well, we could use a text area for that. So let's add one of those dots and these comments. And we'll say text area, name equals comments, ID equals comments. And we'll close it. And this is a little different. If we want to put a value in here, we just put it right here. So comments go here because we closed the text area tag. Whereas Egypt's single self-closing tags that will pre-fill some text in there. And then we really want some buttons on the forum as well. Let's close that tag. And let's make it a type checkbox. Call us skills and fishing. And that's how the labour laughter as well. So I'm psych skills fishing. Let's just fix this. There we go. For skills fishing. Yeah, nice. And then let's just go ahead and copy and paste this coupla times. So maybe you have a skills is cooking and hunting. Let's change these as well. So we'll go through everything done here in a minute. Okay, nice. So it fixes cooking label. That's not quite right. And there we go. Yeah, nice. So what we've done here, we've created these checkbox inputs, and we've given three of them the same name, because when we submit to the backend, we want this all to be worn block of data. And that will make more sense when we look at radios, but it makes sense here as well. And then, so we've created a different ID because of course we need the ID to be unique for each label. So the ID is different, but the name is the same. Now we could also changes to radio. And radio buttons are these. So again, you can only select one. And the way that we group these again is by having the same name, said we had a different name here. They'd be in a different group. And we could actually select that one. And these two would be in a group. But if we give them all the same name, they're in the same group and we can choose between three of them. Or with a check box as we originally had a you can select as many of them as you want. Okay, it nice. So let's finish off. Button will make a submit button. And there we go. We've built our first form. 13. HTML solution: Hopefully by now you've had a chance to go at the HTML coding project. I'll open mind up and show you one possible solution. But you've got quite a bit of free reign on here. So if yours doesn't look like mine is totally fine. It's there wasn't one correct answer. And this is what mine looks like and I'll show you how I've coded it. So we've got our header tag at the top, and then we've got navigation. And inside the abuse that an unordered list to create these free links to different pages. That point to the same page here, but they could point to different pages. And then I've got my main tag here. And I'm sad it, I've got my header, I've got some content on, I've got an image and then a bomb. I've got a photo we were forming and standard input with an area label on and a submit button. So maybe it looks something like this. Maybe it doesn't, but hopefully you've had a go at challenge and now feel more confident that you could put together a basic HTML page. 14. HTML features: You've now learned the fundamentals of HTML. And in this module, we're going to look into some of the features in a bit more depth. 15. Anchor tags: In this lesson, we'll deep dive into Anka tanks. So go ahead and find the HTML features folder. And we'll open up this anchor tags. And we'll go ahead and we live in the browser as well. And then we'll delete this and we can call it all from scratch. So anchor tags allow us to add hyperlinks. I'm gonna go ahead and create a link to my twitter. It doesn't need to be inside a paragraph tag space. It nicely followers. So here I've just given it a hate traffic, which is the URL we're linking to. And as we can see now, I've got a link that goes to Twitter. Okay, perfect. And we can also provide some context about link. So let's say I'm linking to my personal blog. I could say, well that's actually me. Look the same. But in terms of semantics, when search engines are looking at it, they'll know that it's mine. And arguably I could add this to my Twitter link as well because it's my Twitter feed. But that's how we can close that paragraph tag, provide a bit of indication as to what's going on there. Now we're not limited just to linking to URLs. We can also, for example, create an email link. So if we do this mail to an NPO and email address, then when we click on that, it will open a brand new email in whatever the default mail client is on the client's computer and it will pre-fill it with the other drafts. And we can do the same for telephone numbers. So we can use towel. And then if we click this on desktop, it would depend what these have installed. Maybe they've got Skype and it would open that. But on mobile devices it will choose auto dial. So that's really a more useful feature. For example, if you're a local business, maybe people are Googling you there in town looking for a restaurant. They want to phone up and make a reservation. You put your phone link and then click the button and it will dial straight to you. Now the moment these links would open in the same window, if I click that, and I'll send this off to Twitter. But what happens if we don't only use leave our website, we want them to come into a new window and keep our window open. Well, we can do that. And we do that by using the target. And we can use underscore blank. And now if we click on this, it opens in a new window or in this case a new tab, because that's how it's setup in my experiences. But we've still got her original page here, so you're not losing it and that works on mobile as well. However, if we're going to use target blank, I'm going to close this paragraph tag straight away. So you don't forget. Then the problem is as a potential that when we go to this website, this website could try and access back to our website using JavaScript because of arguably a bug, or at least a security flaw. So if we're going to do that, we can add some rules to help us. So we aren't as well and we say No refer and no opener. That means that any JavaScript on the window we open can't refer back to the parent window. So whenever you're using target languages for a member to stick these n in future browsers, they might put these in automatically. I think Firefox is now putting in automatically to stop that security exploit. But it's best to include these manually for now. And again, we've got our new window. Okay, perfect. 16. In-page links: Hyperlinks don't have to go to an external page. They can also be within the page. So if we open up this in page links here, we've got something that looks kind of like a Wikipedia page. We've got some contents are pair. And then we've got various subheadings further down the page. And it'd be nice if we could make these links go to the subheadings. Well, we can, and we'll go through that right now. So we'll open up the impact links. And the first thing we need to do is add some IDs. So ID that has intro. And then we'll come down to subheading one, and we'll call that sub dash one. And Subheading two, we'll call them soap dash. Ok nicely, we've got Fridays and then we'll come up here and we'll anchor tags. And then to link to a part of the page, we just need to use the hash and then put the name in kilowatts. So born, and we call this sub2. Now, it doesn't need to be a URL or a hash. For example, if this idea existed on my personal blog, I could do something like this. And that would work fine too. In this case, we want it to stay on this page. And so we're not going to provide a URL widgets gonna do the hash and the ID tag dime if we refresh the page now these are links. And if we click one, it jumps down to that section. 17. Tables: If you have tabular data, then you probably want to put it in a table. So we'll open up this table's page. And here I've got a table of cities and population figures. And we can open this up in our code as well. Now, using the table tank as we've used here, is only for tabular data. It's not for laying out a webpage. If you're brand new to HTML and CSS, you probably thinking, yeah, why would anyone layout the page using a table anyway, but back in the nineties, this is how we laid out all websites. We didn't have all these nice CSS. We didn't have flexbox or grid or anything like that. And we use tables. And it was horrible for screen readers because it made no sense to be using tables just to lay out a web page. But if you have actual tabular data like this, then that's the perfect use case for using a table. So let's go ahead and write our integral here. So we'll start with the table tag and then we're going to have a header row. So and you can have multiple header rows, will put them inside the tea head. And then data is going to go inside the table body, the t body. So once we've declared table and you don't strictly need T hat or t body browsers will display it fine without them, but it is better to include them because again, we're providing more semantic information. Then we're gonna create a roast and we're gonna use TR table row. And then we will increase cell. And in this case we're going to use T for table header. And we'll create a free cells. So we'll say city, country, and population. And there we go. That's what we've got so far. I've done a bit of CSS to style this up already. Doesn't quite look this pretty out of the box. And then we'll come down to our table body here. And again we're going to add some rows, silence at our first row. And let's add in London. It's in the United Kingdom. And the population is, doesn't really matter for this demo wherever was spot-on or not. Okay, nice. And then we can add some more rows as well. So let's add a second row. Unless, say Tokyo in Japan and has a population of okay, looking good so far you'll notice the table adapt to the size of the content. And let's add a couple more rows as well. So let's add Mumbai. She's in India of course. And that's got a pretty big population. 18 million, possibly bigger by the time you're watching this. And let's add Toronto as well. There we go. So there we've got four rows and we've got our table displaying all that data as well. 18. File uploads: Well, if we want to use it to be able to upload files. Well, we've already looked at forms, but we can use a special type of form to allow file uploads. And let's just get rid of what's in here. And we'll drag file uploads into the window. Animal coded ourselves. So we'll create a form tag label inside. And then we're going to use an input and the type is going to be file. We're given an ID and the name as well. And this name will help the back-end process that file upload. And then we'll create a submit button as well and we'll call the upload. And there is one more thing that we need to do for the form, so it looks okay at the moment. But in order for the backend to easily process, we also need to tell the browser that we want to send this as a multi-part dash form data. So it knows that it is a binary file coming as well. And that is all we need to do. And so here now we've got our Choose File and if we click on this, it'll open standard. Pick your file. And then we can click upload and that we'll send it off to the backend. 19. Video: The internet is all about videos these days, and it's fairly easy to add a video, but with some caveats, let's, again, we'll start from scratch here. And we'll drag the video file into the browser so we can see what's going on. Now a lot of the time, what you're doing is you're uploading videos to sites like YouTube and Vimeo. And they provide their own code. So if we just open up the video here, we can go down to share. And we can grab this embed code and we just copy and paste this in. So that's pretty straightforward. But what happens if we've got a video file locally that we want to save using the video tag. Well, we can do that. There is a HTML video tag. And to do that, we just give it a source, in this case as a sample video called forests dot mp4. And then we go. And this isn't super useful at the moment because it's not playing and because we haven't told the browser to give any controls. So let's go ahead and tell the browser to add some controls. And we can do that just by adding controls. We don't need to do anything we don't need to do like control equals true gets put into edX controls and that works fine. And now we can see we've got some controls there and we can hit play. And that will play the video. Now if we want the video to play automatically, then we can use autoplay. But managed browser is not going to allow that any time soon because there's nothing more annoying than when you land on a webpage and the video plays automatically. So for Chrome now, unless you also add muted the video when autoplay. So if we had that muted control by itself, then we know is that the audio is turned off by default. And now Chrome will allow us to autoplay if we want. A nice bit of user protection in there from Chrome, stopping website forcing Loud videos onto us. Now if we want the video to keep going, we can also add the loop property. And now if do not, it's also playing. And when it gets to the end, it will jump back to the start. Nice. So let's get rid of all of that. And then one final important thing to know is by default at the moment, we see the opening frame of the video. But what happens if we want to add a specific image? We can do that and it's called poster. And again, I've got a sample image here in images dash forest JPEG, and we can use this poster attribute to do that. And then we see is now using the image of the forest. But as soon as we hit play, it will start playing the video. 20. Audio: Alongside the video tag, there's also an audio tag. We can go ahead and open up audio here, and I've already got rid of the code that was in there. And we can drag audio in as well. And then we can go ahead and add an audio tag. And it looks a lot like video. The spec is very similar. And I've just got some side length so we don't get interrupted by weird noises. So that's the audio tag dot. So we need, but of course, by default, there's nothing there because we haven't told the browser to add any controls. So why it's not like a video where you can see it. So why would you ever do this? Well, if you were going to add your own custom controls using JavaScript, this is a way you could mount the audio element in and then start and stop at using JavaScript. But in this case will allow the browser to add some controls. And then we've got our controls that we can start and stop here. Now as we're video, you can start it muted if you want. And you can also add the ability to loop. So again, and it gets to the star, it just start playing again. So very similar controls to what we have in the video. You can add your source, you can, and you controls. You can not do loop and you cannot do mute. 21. Preloading media: In this lesson, we'll look at pre loading media. So this relevant to both the audio and video tank. Pre loading is all about the browser going off and fetching and downloading some of the audio or the video before it's played. So when you load the, when you load your page, if you've got an audio or video tag in there, the browser will often go off and pre-fetch that so that if the user presses Play that within a delay when it then goes off to download it, it's already downloaded some or all of it so that it's ready to play. Now we can offer a hint, the browser to say wherever should do this or not, and it's not binding. It's always up to the browser to decide. But we can offer a suggestion. And there were several suggestions we can do. So we could use auto, We could use metadata or we can use non. And again, I've used the video tag here, but it's the same for the audio tag. Now what do each of these options do? Will non suggested the biota that it shouldn't download it. So if you think you've got example, although the video already on the page and it's not clear which one uses. If any of these is going to use, Maybe you should set it to None to save some bandwidth for both you and the user. Then we've got metadata. So this says don't download the actual audio video itself, but get the headers. So for example, it can show on the controls how long the piece the media is. If it doesn't download it all, it won't be able to do that until the user hit play. But if it goes off and download the metadata, the headers, then at least be able to show these are how long the video is without downloading the video or the audio itself. And then finally we've got all term. Now this is the default and that says to the browser that the, the media can be downloaded if the browser would like to. So again, it's always the best choice. But we're saying it might be a good idea to pray download this media. And if you don't specify anything, that's what happens by default. And wherever it will download the will depend on the client. So for example, if you're on a desktop computer, then the browser is quite likely to do that because I'll assume you have plenty of data. But if you're on a mobile device, may be on cellular data. Browsers are likely to be more conservative because they don't want to use all of the cell data. So even with auto, they may not go off and download it. 22. Introduction to CSS: Css is a language that we use to style up our webpages. So hey, HTML tells the browser what to display, whereas css tells about that how to display it. And in this module, we'll look at the fundamentals of CSS. 23. What is CSS?: This lesson will provide a brief overview of CSS. So CSS stands for Cascading Style Sheets, and it defines how the website looks. And this allows us to separate function from presentation so we can have our hey, HTML and that can all be nice and semantic and easy to understand. And then all of the stuff that says how it should look is somewhere else out of the way. Most didn't used to be the case back in the day, we'd have things like we stick bg color on HTML and we define the padding in line on tables. And when we wanted to change the font size or color, we'd had a font tag and specify in there. And I was pretty messy. We didn't really need all of that in when you were reading the HTML, it was complicated because you had all of the style things that were really nothing to do with the meaning of the page. So we now do it this new way where we can specify them separately. We have our CFS file, an HTML file. An HTML file, it's clean, that just contains information. And our CSS file just tells it how it looks. And we don't need to mix the two up, which makes the HTML much more readable. And it's called cascading style sheets because they cascade down. So we can specify the top, but then we can come up with more specific rules as we go down. So we might sell all of our texts for the entire page to blue. But then we say, OK, But texts in the header should be red. But if it's in the header and it's a link, then we want it to be green. And we can come up with all these rules cascade down. And we don't need to set every individual elements so we can set one row for the whole page and I'll cascade down to everything in the page. And then we can threaten more specific rules, override that favor down CSS. The way it looks. If we break down the anatomy of it, we've got three elements. So we've got a select to the property and the value. The selector tells us what we want to apply these rules to say not might be an element, that might be a class. We'll go through all of these, how you use selectors. But you would, that would pick the element that you want to apply the rules two. And then we build up those rules are called properties. So for example, background color, padding, spacing, the way it displays if it's onscreen, if it's not font size, all of that is a property. And then each property has a value. So for example, here we're setting the property background color and we're setting it to the value of blue. Let's get hands-on and it will make so much more sense when we start coding and we understand how it works. 24. Creating a stylesheet: Let's create our first style sheet. So we'll just create a brand new empty document. Won't just save this as First Style Sheet dot CSS inside of our CSS project. And you can just delete the warned if there's one already there. And then we'll go into First Style shim will add a link. So we'll say link Raul equals stylesheet. And we'll add that link to First Style Sheet dot CSS. Now at the moment there is nothing in that. So if we open this up in our browser and let's get a CSS project. Drag that in completely unstyled moment, but we have our style sheet south and LinkedIn. So let's start adding some styles here. 25. Adding styles: Now that we've got our empty style sheet, let's add some styles to it. So we'll start by selecting the body. And this is things we want to apply across the entire body. And well, sat phone. So let's set the font family to Molly. And then was size as well, salon to 16 pixels. And also panting all around 24 as well. Let's just refresh and Chip was working yet. Nice. So it didn't look like we've got our form actually because I haven't got my newly installed on here. So let's go ahead and change that to Helvetica. Okay, yeah, I'll looks OK. And then we've got our font-size and our padding. Nice. And then let's select our big layout, tax emotivism stuff, hair sub box sizing. So what we do in Haha, well, we're saying for all of our big tanks, we doubt one-to-many widen six hundred, seven hundred pixels because anything, why didn't that it's hard to read. If you try and read this, finally, you have to go all the way and back across the screen is super annoying. So we actually wanna condense it in. If you look at what say medium dose really condensed into the middle, wicked, it makes it easy to read. And then here we're saying, well, we don't want any margin top or bottom, but we want to automatically size the margin on the left and right. So the six in the middle. So there we go. It's nice nicely in the middle here. And this image is too big here. But actually, if we open up our developer tools, it looks like it's off to one side, but it's not an I'll show you why. So the main is sitting nicely there, but this image is too big and we'll fix that. Nonetheless. Go down and handsome style to the footer. So we'll give this a background color. We use the hex value, add some more padding in there. And then we'll align the text to centre as well. Okay, yeah, nice. And style the form inside as well. So we'll select a button inside the Footer. Footer. Now it comes I form because it's inside a form. So we could use EVA, but if we look at HTML, we've got a form and then we've got button inside it. So again, no set background color here. And we'll set the border to a nice big border and padding. And this is the stuff I want for the input box. Let's change this to input symbol on the text input, we're going to set all of these things such refresh. And there we go. We've got a nice big border now. Both landless atoms timings to the button. So again, we'll set background color. We'll turn a boulder off no border. Certain sex to white. Font size up to a 100% because it's scaled down by default in the browser. And we're not some padding around it to yes, nice. So now the button matches the input. Perfect. Now let's do something about this header. From jumping around a bit just because I'm laying all of these out mostly alphabetically rather than on the order there might be laid out in the page. You can do it whichever way you find the easiest. And let's make the font size 200%. For the head method, some padding. Again. Let's align the text to centre. Yeah, Nice. Ok. Then let's fix this image. So we'll select the image and you say, well max width it should ever be is a 100%. If it's too big for its container, scale it down and say no, you can't be any bigger than the container. And bam, there we go. So it all fits nicely in now. And let's select the paragraph tag. And let's set the line height 250, so it's a bit close together at the moment, if we set it to 150, spaces are a little nicer and it just makes it easier to read. Okay, great. So we've created our first style sheet. We've added all the styles n and Snyder's header as nice looking text. And this nice footer as well. 26. Selectors: In this lesson, we'll look at selectors. So let's go ahead and find our selectors page. Drag that into the browser. And then we'll go into here and we'll open up selectors dot CSS. You might want to look at the HTML as well, but it's pretty standard. And we'll look at what's going on here. So first off, we've got the universal selector, so apply to everything. So we could also add, say, color is red and overhanging would actually turn red text color. And some of this we've overwritten further down, which is why this hasn't changed, but it's mostly applied to everything. Let's get rid of that because we don't really want everything to be head. And then here we've got the body tag. So this is a great place to set stuff like a font and font size. And this padding sets the amount of spacing here as well. And then again had the tags, hey widget selecting a single tag. So that's pretty straightforward. You put in your tag name. And then here we started adding stuff together. So here we've said we want this to apply to any div inside a header. So could we, again, we could have we got text inside, we could set the color to red. And that would be any div inside the header tag now turns red. So it be any div within the header tag, but just below we using this greater than to indicate that it must be a direct child. So if we change that, some of them are obvious like Marat, boom, this BOC stands for at these boxes down because they're not direct child of header. So if we look at the HTML, we've got a header tag. We've got this container div here. And then we've got some divs inside of that div so that an extra layer down. And so because we're using direct child here, then it's only the parent when that's affected and not ones lower down. Then below that, we all finally selecting those. But we're doing a bunch of stuff, fair? So we're selecting a direct child of a direct child of the header and also saying only the first one. So if we look at here, we've got DIV2 and defray inside of this container div. And we're saying, okay, these we want this first child. So again, if we do clerk of red to make it super obvious and we need this one's affected. Or we could change all of this. And we could say something like Las child, it's totally fine to name of property twice I mean, not really recommended. But the way Cascading Style Sheets work is they cascade and the most specific instruction winds. So for example, we've already set the background color for all of the dibs haha. But then we're overwriting that here we have a more specific command further down. Okay, now, so next that we've got the his class name. So this isn't an EM tank, but it's a paragraph here that we've added a class of M emphasis on. And hey, we're changing the color and the font size we can make even bigger if we wanted. So there we go. We've made that super big. And we've also done that. I think I've used the emphasis class here as well. Yep, so again, if we set that to a 150%, this gets bigger Also, this got bigger because on that line item, we've added emphasis that too. But notice that this is bold and this isn't what's going on there as well. We've got two decoration, so this emphasis applies to any object with the emphasis class on. But here I've stuck them together and I've said paragraph tagged or emphasis, then add it to bold. So any paragraph tag with the emphasis on which is why this has gone bold. This is a line item, not a paragraph tag. So this hasn't gone bold. That said I'm back to something a bit more normal. And then again here we've got our, our links. So here we've got a link here. And here we're changing the color. But only on different circumstance. Let's say something obvious. And we'll do blue. So here we're looking at the anchor tag, but we're saying if it's a link or a visited link, IE, the browser remembers that the users clicked on that page before. Then do this if the user is hovering over it or currently clicking on it, do this. So naff re, now if we refresh, bam, there we go. So R link has gone red. But when we hover over it, it goes blue because we're using the selectors. Let's get rid of that. And then finally, as well as class names, you can also style on id. So here again, this list item has gone ID of bullet. And if we want to style a specific ID, we use a hash and then the name. So again, we could say it's 250 and this text gets a lot bigger. So those are some of the examples of ways you can use selectors. Also combine selectors to style a specific element. 27. Types of selectors: In this lesson, we'll explore the different types of selectors that we have available in CSS. So we've got the universal selector, the star, which juts applies to every element. And then we have type, which is where we pick a specific tag. So we could say header, pay or well, or any tag we wanted. We use these properties to apply to that specific tag. Then we've got class, which is where we use dot and then a name that we make up. And then we go into the HTML and we add an attribute class equals, and we put the name in, and we can put as many names as we want. But each one will define in our CSS as dot, not name. And we can apply anything and that's really useful for you can write one class and then you can apply it to as many elements as you want. Then we've got ID. So if you have a specific element in your HTML page with an ID, the ID has to be unique to the page. And sometimes you just wanna style that one particular thing. And to do that we use a hash symbol. And then we put the ID of the elements and name we've given it, and we style it that way. Then we've also got attributes. So if we want to filter on a specific attribute, really useful with forms, say we want to style the input element, but only four inputs tied text. We don't wanna do say input type checkbox because that's a whole different type of form element. We can use an attribute to select, to say, okay, input by only if type text. Then we've got pseudo-class. So this is special states of elements such as the Hobbit stay or the disabled state, which applies to hyperlinks and buttons. I, almost anything can have a hover. And then we've got pseudo elements, which is where we can sneak in extra bits using two colon and then after or before. 28. Editing CSS live: When useful thing we can do is to edit CSS live in the browser. So that rather than going back to our code editor and changing it, we can do in the browser just to make sure we have everything set up correctly. So let's open up developer tools and we'll just inspect this box here. And if we see lodge, there we go. So we've got a bunch of things, hey, won't have got computed. So this will tell you what style is using because here, for example, we might have a bunch of different styles that it's being affected by. There we got to see this is overriding this and we can say because it's being crossed out. And then all the browser stuff is down here. So if we go to compute it, the I'll tell us everything and what it's being used for. But also we can edit this style here. So if we say wanted to edit that, we can make that ten bigger. Or if we wanted to add something onto this element, say font size 200%. We can do it live. And I could go and I could size is down. This allows us to, especially if we're trying to line things up and maybe get things just perfect, we can often do it quickly here. And then once we've got it working, once we know it works, we can take it back into our code and put it in that for real without having to go into our code and then come back and refresh the page and mess around like that. This developer tools, which is available in all an old browsers, developer tools is super useful. 29. Properties: In this lesson, we'll look at some of the properties we can use NCSS. So we'll open up our properties dot CSS and you can open up properties dot HTML as well if you wish. But it's really basic. And if we open up in the browser and we'll say, it's pretty empty here too. But we'll look at what all of this means. So starting off, we've got, if we look at the code, we've just got a div and then a H1 tag in there. And on the div we set the background color, and we set the border and the border color as well, and some padding. Now we can tackle these in a bunch of different ways. So this way we declaring all of the attributes that wouldn't. But if we wanted to, we could do all of this individually. So we could make the border bigger. We can set the width there. Or if we want, we can just set it all in one line. And we can set up a bunch of different values here. We could say bought a dashed. And then additionally, we can set specific. So maybe the body taught we want it to be red and five px and solid. And then we get a completely different border there. It's a bit hard to see. And we can get even more specific. So maybe we won't bore the top width 20 pixels. So it's really your choice whether you want to set all of these individually or if we just wanted to define them all at once. And we can do the same thing with padding, certain moment as 24 pixels, but we could set them all individually. Let's give values for all four sides. Split, hard to say because it doesn't stretch all the way. But let's open up developer tools and let that help us see what's going on. So there we can see the slight shading. It will disappear if I hover over. But the padding starts at top and it's pretty small, it's just ten pixels. And then as we get to the right its 20, the bottom it's variety, and the left side is 40. So always starts here and goes round top, right, bottom left. Or we could also specify that in terms of T value. So if we do two values, The first is top and bottom. And the next, There we go. So here we've got a big 50 px on the top and the bottom, and a relatively small padding on the left and right. Or again, we could just do individuals, so we could say padding top. And then we've got a big padding at the top. So again up to you whether you want to set 24 pixels for everything, individual values or define them all deaths. Okay, let's move on. So that's, that's the container div. Let's make this a bit more sensible again. Okay, yeah. And then let's have a look at this height one. So again, upset different background color here. And I've set the color which defines a text and the font size. Now set the font-weight to bold here. I could also use a value. So maybe 400, which would be standard, or 700, which is bold font weight that can be set as a number. Or I can just say bold. It's up to you how you want to use that. And then again, we've got the same thing we did with padding, we could do with margin. So I could say 24 pixel margin and a 12 for the side, or I could do individual values. And then again, same thing for the padding like we did above. I can set whatever values or it could set individual ones. We have this width tag here and we could set out to wherever we want, so say a 100%. And if we do that, and it's actually gonna wind up sticking out the end what's happening there? Developer tools will help us explain it. Because we've got all this padding inside. Then the way we're sizing is it makes it a 100% of the container and then answer the padding. Another very useful feature, it is if you need the inside the content area to be a specific width, but also mean spills out a lot. And if we added a border on to here, it would get even worse. So if we did something like border, read 20 PX solid. Now sticking human fervor Atlas and knowing we can fix that using box sizing. So we could say right now on content box. And now it's the same thing because that's the default. But if we change it to border box, it will sizes of a 100% by the border edges. And so it will sit much nicer n Now it's still not quite flush there. And that's because we've got this margin on. Margin is always outside. But if we get rid of that, then perfect now sits right in the middle of the box and it sized to a 100% Based on the outside of the border rather than than this inside content T area. So we can use box-sizing, border-box to do that. 30. Sizing boxes: In this lesson, we'll look at how to correctly cite a box. So it sounds simple. You just put a whip thin, but it's actually more complicated than that because the way it calculates a boxy side is that it uses the width for the content and then adds any padding and border on top of that. So if you look at this example here, it's a 300 by 100 box in red. But the actual size of a is actually 380 pixels because we've got 30 pixel padding around it and then a ten pixel border around that. So that makes it much bigger because it's sizing it to the 300 we asked for. And then it's adding all the other stuff on and it's easy to forget, which is what I, sometimes you get stuff going off screen and you thinking, Hang on, asset is 200% over within the box. It probably because there's padding and margin and padding and border in SRE, margin that you haven't factored into account margin is always outside, but we can fix the border and padding. And the way we do that is with box sizing. So the box sizing property by default is set to content box, which means if you sell a box 300 pixels wide, it will be 300 plus the padding, the border. But you can also do some other options. Now there is padding box, but I would avoid doing this because it's not part of the spec and most browsers haven't implemented it. But what is super-useful is border box, because this size is the box by the edge of the border. So if you put in a one, this box to be 300 pixels wide. It will be 300 pixels wide, border to border. So that means the actual content area will be less than 300 if you've got a border and padding on that. But it means you're guaranteed the box will be 400 pixels wide and it won't get any wider if you're adding padding or borders onto it. 31. Display property: In this lesson, we'll look at the display property in the various options that can have. So this allows us to change the way an element behaves. Normally things like paragraphs and devs would be blocks and over types would be inline tags. We can actually make any target respond how we want by setting the display property on that. And we'll go through each of those. So inline, this means it doesn't affect the layout. So things like strong anchor tags, spans, say inline, and allow us to add additional styling, but without really changing the layout. Then we've got block, which is the type we went into a lot. And it's still the fact the layout because you get a line break before and after. So if you think about paragraph tag, it sits on its own. Same thing with a list or a div. And then we've got inline block which is still used quite a lot, is deprecated and we're not spokesmen using going forward, but you might run into this. So I want you to be aware of it is it's kind of a hybrid that it sits in line, but it can still have it sounds things like margin and padding. And we've got known, which we would use if we want to hide an element. We do this a lot with JavaScript. You're on a mobile view and you've gone Menu button. And when you click in the menu scrolls into view, and then when you click it again, it disappears. Normally. That's one of the ways we hide things is with display none, wouldn't we want them off screen. Then we've got Flex, which we want to use the flexbox model and we'll be exploring this in more detail. Then you would use that. And similarly grid, again, we'll use that in an upcoming lecture. But these are great ways to lay out your page, especially if you're doing the whole layout. Then we've got table, which is make CSS act like an HTML table. So if you need to do that for any reason, then display table is there. And then we've also got display content, which means you ignore that container and look at the child container. So that's very relevant. If you're using things like grid or flex and you want to pull elements around and you want to pretend that the container really isn't that. That's when you would use that is pretty niche cases, not something you would use all the time. But if you ever running into a problem where you wish, I could just get rid of this div and then I could just look at child elements. Then display contents is probably what you need. 32. Designing layouts: In this lesson, we'll look at the different ways you can lay out a web page using CSS. So we'll go ahead and open layouts in the browser. Drag that in. Should see this. And you come over here, I've been lamps, CSS layout.html. Now, I've given you here is a bunch of different layouts that you can look at and we'll go through each of them in turn. So we'll start with floating layout. This one has been around for a long time when we stopped laying out pages using HTML tables, which was the way we used to do it. And it was pretty grim, but it worked. We came over to this floating idea and let's look at the code behind it. So the code is really clean. Like we got all of our elements and there's nothing really going on there. Nothing complicated digits laid out really cleanly. And if we look at float layout, then we've said the main is going to be floated to the left and the sidebar is going to be floated to the right, which is what we've got here. And then we needed to add this clear both on the footer because otherwise the photo would end up or pair sitting underneath the sidebar. And so that's clear both. And then it'll go back down there. And then one of the issues here is that the sidebar doesn't stretch all the way down images. It fills that space. And then there's just nothing here. So that's not only the ideal if you've got like a cola background, but mostly floats work quite well and they're very simple and they're widely supported. Every browser supports them, even old versions of Internet Explorer. Now next up is flex layout. Flex is probably the one that we would use most often now because it very well-supported and it does a lot of cool stuff. So here we know we've now got a sidebar coming all the way down. And if we look at the code here, it's almost as simple. We've had to wrap the mainland side bar in their own div just so we could do the code. But why is it still very clean? And we look at the code is pretty simple too. So we're targeting that div and we're saying laid out flux. And then we can specify our width and the main and the A-side haha and works really nicely. Resize the browser and it works quite well. So flexes a gray option. Next up down we've got grid. So grid is the future of layout. It's amazing. It gives us everything that we use to get when we did were tables and more. It's the ultimate layout tool, but it's still pretty new and it doesn't work very well on old browsers. Depending on the stats, I think about 5% of people don't have good support, which is quite chunk if you're a big website. And, but it works really nicely. If we look at, first of all, the code, again, super clean. There's nothing here, it's just the semantic tags. And coded is fairly complicated, fairly simple as well, like we've got. We've told it to laid out as a grid and we've got this nice grid gap so we could have them pressed altogether. But if we just want to magically add a gap, that space is everything out nicely. We can do that with this good gap. And then when laying out the templates, we can use these fractional units, which is really nice. And we've got the header and footer spanning all the way across grid is supercool. It a bit more complicated than overlayer engines. In fact, I have a whole course on grid, but it's fairly easy to get started with something like this. And that's a nice simple example of how you could layout page is just that the browser support isn't quite there yet to maybe roll it out. Two major size, I use it on some of my smaller websites and people from an old browser, they just have to suffer. But I think if you're building a major website, you want to be accessible to everyone, then grids, maybe not quite there yet, but it is a lovely tool to use. And then finally we've got absolute positioning and how I'm showing you this for completeness. But you probably wouldn't use it except in certain circumstances. So with absolute values, again, it's nice, clean HTML. But it's all a bit of a mass because we have to say what, how we're attaching everything. So for example, the footer, we set that to the bottom. So I will fill up the bottom of that we go. So here nothing really chimes up because the div that I've got in there is set to a certain height, set to 70%. It's not a border. So you can see what's going on here. So that's my page and I've set the footer to be absolutely positioned. So take it out of the layout and make a bomb. Could maybe slightly off the bottom if I wanted. As it was, I wanted to flush to the bottom and then have to do this with everything. So everything is absolute position, position relative to the right edge or the left edge. And it just doesn't really join together in the same way that some of these overlayer engines do. But it can be useful, especially if you want something fixed. So if we find a header, there isn't a timeless Adwan. And to position fixed. And we'll pin it to the page. Now that had a sticker pair and it won't move. So if you're ever wondering how bits get glued to the top like that, it typically using fixed positioning, which is like absolute position, but it will stay there the whole time. So let's get rid of that because we don't need it. So there are times when we need to resort to absolute positioning, but it's not a great way to lay out a page unless you have quite a specific need because it doesn't quite adapt quite as well as some of the overlay ounce. 33. Flex box in detail: In this lesson, we'll take a deeper dive into how the flexbox system works. So let's go ahead and open up flex dot HTML in the browser. And we can open up flex dot HTML and flex dot CSS here. And in the component, I've just got a series of divs with a bunch of number divs inside of those. So first off, we've got flex direction, and here I've just got it set to a row. So a flux across rows. And I could change a column and then we turn it into a column. Nice. Or I could even reverse the column. It's now fives that top and it flows the avoid around. So that's direction. Then we've got flex wrap here. So by default, everything shrinks down. These boxes are actually wider than they displayed here. But because we're flexing, then Everything's condense down a bit far. I actually changed it to flex rap to say Wrap. Then he would go back to the original size and they would wrap down. See you, they're quite wide now. But if I get rid of our food chains, flat, none, it all condenses it down. So if you have a big menu that you need to fit inside of certain space, then flexbox will do that. But if you actually want it to wrap and you can do a flex wrap people's rap to fix that. Say, hey, we've actually got boxes that to twenty-five percent wide, which is obviously it would be a 125% and they fit within the box. So that's the advantage of rap. Ok, justify contents. So this is how we space those elements out. So let's go down here. We could do flux start and they'd all be start. Or we could do Flex end or we could do confusingly Center and her flex. And they're all in the center, but we can also space them out really nicely. So we could do space around. And there we've got the space in between or what I had originated with space between. So it won't give any space on the outside, but it'll still space them out really nicely. So again, this is grateful, automatically laying things out. If you've got a bunch of elements in Egypt wanted the webpage to work out how to space them out. You can use justify content. And on flex align, I've deliberately got a bigger box here. And you can see by default these elements stretch all the way down, so they're not coded to be any higher is the container box here. That Let's find the HTML here on a line items. And you can say about the textiles, that container box, but they've boxes just stretch. But we can choose what happened. So we can see the line items we need. And again, we could do Flex thought, oh, we can do Flex. And so to the end, which museum down there. And we can do center again. Or we can have the default, which is to stretch the element two as wide as the container. And then not only can we do this on a parent levels on the container, but we can also mess with individual boxes. So I've done that here. This is this final one. This child are given the model class so we can modify individual boxes. So for example, here on box three, I've changed the aligned self-test center, but we could do something like Flex, start to move it up or flux and we want it to move it to the bottom. And I've also set this order. Let's change it back to center. So by default everything has an order of 0, but I can move it forward by giving a minus1. If I wanted to move it to the end, could give it a high order and that goes down here. So this is super useful because you want to lay out your page in a semantic way. So maybe you have like a, you want your article at the top of your HTML. So that'll be read first by the screen reader. And then you might have your sidebar that we'd go below it and HTML, but maybe you actually want your sidebar over here on the left and your article here on the right. Well, the best way to do that would be to put the article first and then the sidebar over here, and then swap them around using flexbox so that if you read in HTML, it makes sense. But when you're looking at the end-product that design, you can have your sidebar over here in your article over here. And then we've also got this flex shrink option. So by default we talked about pair every box get shrunk down. But if you set a, it didn't have to be 0. It can be any measurement. So we can have extra shrinkage. Here. We modify number four here. So that's shrunk even more than days, which by default just warn of binormal shrinkage. Or you can set 0 and say, we refuse to shrink this box. So all the other boxes shrink, but this one doesn't. And you can just set that any, on any individual item using this flux shrink. And as the opposite which is flex grow that you can apply as well. 34. Media queries: Media queries are some of the most powerful tools we have in making responsive layouts. So Paige's work on both mobile and desktop. Let's look at an example of this and let's open up media queries. And the webpages. Well much drag it into the browser. So this looks like it's kind of okay on mobile. So if we switch, we can toggle in to fake mobile view here. And this looks kind of OK because you've only got some space. We probably make this dynamic menu that showed itself and hidden using JavaScript. But in terms of laying out for phone, this looks pretty good for a fan, but it doesn't look so good on desktop. If we get back to that mode, menus taking a hollow disk space when we've got all of this space over here. And be nice if the sidebar came up as well. So we can use media queries to improve this for desktop, we always start with mobile because we were in a mobile first world. Now, most of the Internet access is done on a mobile phone. So I'd always recommend designing mobile first and then enhancing it for desktop. We can go ahead and code some Unless let's come down here. And we'll say at media, and we'll say a min-width of 700 pixels. So these styles will only apply if it is at least 700 pixels wide. So let's, let's just show what would happen there. Hey, we've got yellow and as we make it smaller, then not disappears. We make it bigger. Reappears. Obviously, we're not just gonna do that because that's stupid. And they don't want a big yellow background. But we do one is we could use flax to style this navigation perhaps. So inside of this media query, we'll say display equals flax. And then let's try justify content center. There we go. So now already we've got this lovely menu here. Which would, it would look terrible on mobile because we don't have the space there. But if we switch onto mobile, it's okay because only applies to the desktop view, then we could also reposition everything inside the main Sugata article. And we've got our side. So again, in our main we could say display equals flax. And that's not too bad, but let's make some adjustments here. So let's say our Article, 375% Wide, side 25 and wide. Yeah, in fact, let's give this margin as well. So let's box sizing to border box, so the padding doesn't expanded. And then we will do padding, right? 24 pixels. Okay, lovely. So this is looking much better now we using the space more effectively. We don't have that massive the article flowing all the way across the screen everyday hey, which is hard to read, nicely kept down and we're using our sidebar to fill that space. And we've got a nice menu here. But because we've got this all in this media query that says men, we could also, if you want to do mobile specific stuff, you can do max, min is fine for now. And if we go back into mobile view, all of that disappears and we still got sidebar down at the bottom. We've still got all our menu items nicely listed. But the desktop view looks way better now, making way better use of that big space. 35. CSS project example: With this coding challenge, you can do whatever you want. So there's really no right or wrong answer here. But let's look at what you could potentially do. I'm totally just free styling this hair, so I really have a plan in mind, but let's go and see what we can dig. So let's we've got a body tag and NOx font-family. We use Open Sans and also a font size as well. And maybe a margin. And one of we got, okay. And then but gave everything a max width. And we'll do a lot of margin as well. Yes, I need to include NADPH and OK. Nice. And let's care find some colors that we can stick in here. And let's see what's a nice color scheme will have a pastoral, but this one's quite bald, isn't it? Let's, let's go for this green one. Background color, stigma n, and use this before. But let's transform that text to upper and domestic law that just servings alphabetical order. Yep. Okay. And I'm not sort of padding there as well. Yeah, noise. And then bring the image n. Let's give everything a better line height so it looks a bit more spikes down. Okay, nice. And then let's thank It was this one. So let's take that and let's do the NAV. Okay. And while Africa UL yep. Okay. So we'll do better resetting that flanks and components. And Let's make the links to be a block. Will turn off the bullets visited. Text-decoration now underline. And in fact, let's do this for them. Okay. Let's set a box sliding on this. Nazca and nova coalesce, maybe this one. And then we'll go ahead and we'll say, let's try increasing that a bit. And a background color or when the user has is over. Okay? Yep. And then and this isn't the wrong area, but only in a minute. Yeah. Nice. And we've got footer at the bottom as well. So let's go grab the other of a color and compare. And I'll add a flutter 24 on that here. Nice. And let's add some styling to that form as well. So the form input. And try this color bar to play around with these colors and safe, they look good. Phone signs. And I'll set some padding on hair as well. And see, OK, looks kind of goofy. But it'll do. And then let's style button as well. So we'll set background color on the button. We've got yeah, we could just try that. And then let's add some padding. Ok, nice. So that we have quickly styled up an example of what we do could do with this Pe to challenge which really up to you and anything you felt was fun or nice. But that's one option that I've quickly put together. 36. CSS features: You've now learned the fundamentals of CSS. And so in this module, we're going to explore some CSS as features in more detail. 37. Background images: In this lesson, we'll look at background images. So you go ahead and open up your CSS features folder. And we got background images, dot CSS and HTML. And we can also find it in here and drag that by Gandhi images into the browser and set some examples of hair. And then one thing we need to be careful of with background images is they're not super accessible. So for a couple of reasons. First of all, when you add an image tag in your HTML as we did earlier, you can add the altitude review and provide some descriptions where it's typically just ignored by screen readers. And the second problem is that when you do things like put quote and a background image behind the quote, you need to be very careful about this color contrast because it would be very easy for me to have an image that changes color or that changes shape with the size. And suddenly my text is sitting over maybe the moon or the clouds, and it makes it super hard to read. So there's a couple of accessibility gotchas there. Let's look at some of the things that we can do then. So by default, we use this background image. And then we can give it a URL. We can give it over things we'll talk about later in the course. And we can also set the clipping. So right now it goes to the whole border. Let's open up the developer tools and take a look at what's going on there. So we've got this box one, and as you can see from this green shaded, but I've added some padding and the background image goes all the way to the edge of the border. But if I change them and they phi changes to content box, as I've done here. You notice it goes in a bit because now it's sitting inside the padding instead. So we can do that with this background clip property and we can do content box, or we can do bought a box which will send it back. Let's move down to the next example. So here I'm using a smaller image that doesn't fill the box. And there's a bunch of ways I can repeat ness and let's just get rid of this position for now. We'll say back ground repeat. And we'll say repeat, for example. And it's just going to repeat the background over and over to fill the whole space arc due on a specific dimensions. So I could do repeat x, and it would choose for P along the x axis and repeat y, which again would move down the y-axis. Then I could also do space. So that will, if you looked at when it repeated, we kinda had half an image over here. Let's just compare that. So there we've got, it's kind of half over here. Where if I put it to space round, it will space them out so they all fit in nicely. But let's go back to this idea of not repeating. And now we've just got one, but we can also do some positioning on it. So we could say we want to in the center. Well maybe we want to top center. Or we could also pass some percentages in here. Do maybe 2575% percent and ends up over here. So we can choose how it's repeated. And if it doesn't feel how space, how we positioning, then we've got background size. So we could set this to o time, which would make it the size of going. Yeah, because we're using the small background. So let's turn on no-repeat. So thank you. Clearer what's going on. So we're only going to have one of the image here and we using the small version, so it's only taken up that much space. But we could also tell it to fill the space but not crop any of the image that if we change this to contain, then the image is now almost as big as the box, but it's not, it doesn't want to clip anything. So we've still got this little border here because the box is not the same ratio as the image, but it blows it up as big as possible with not confine. And we can also, if we want to cover the entire box automatically, and we don't mind the bottom being cropped off a bit. We can change this to cover. And that will make sure it covers the entire background. We have lost a bit of the bottom here just because the image is too big. But we've got it. The whole background is Colbert now. So there's a range of options we can use in a background ones who set the image, we can set the repeat the clipping, the position, the size, a ton of customization options. 38. Gradients: We've already used solid colors to background, and we've used background images as well, but we can also add gradients. So we can open up this gradient file with just got fall boxes and some CSS in gradients as well. And we can open it up in the browser to separate drag gradients in. Just got some empty boxes here. And first thing is that traditionally we would first set background color. She didn't meet him see green for the first one. And the reason we do this is if for any reason the browser doesn't support gradients, then it will signal the gradient we're about to add here. And it will just fall back to this one. And if we do it this way with this first and then next second it will, the browser support gradients will cascade down to this one. And any old browser, we'll say this is invalid and so fall back to this one. Because most browsers do support gradients these days had been around for a long time. So the need to do this is rapidly decreasing. But let's go ahead and start by creating a linear gradient. So we'll use linear gradient and this should actually be a background image because the gradient is a type of image. So remember for an actual image we do background images URL here we're gonna use the gradient function. And we can just pass in two colors here. So green, yellow, and medium see green. And there we go. We've got a nice gradient descending. So we can also, it doesn't have to go in that direction. We also do and also give it a direction sigma, we say go to the right and we can pass into colors. Let's use medium spring green, forest green. And then we get this time, it's coming over to the right. We've got a forest green hair and a medium see green over here. And we're not limited to any specific amount. It's not just two colors, but we can have as many as we want. So let's go ahead and add a more complicated one. And we'll do this ever multiple lines because it's gonna get long. And we'll say, OK, go to the right. So this is an extra long box down here for and we'll say, Okay, let's start with pile turquoise. And we use percentages this time. So we're saying ATM 0%. It should be piled turquoise. And then pretty soon we're going to midnight blue. So that wants to be at 20%. And then we'll finish off with CornflowerBlue, 90%. So we've said go to the right, and we've given it three colors at different percentage points. And there we go. So we started off with our turquoise, but then by the 20% we've transitioned to this midnight blue. By the 90% we've gone to this cornflower blue, and then it just fills in the rest with cornflower blue. So we can create quite complicated gradients, adding multiple colors. And we can either just let the browser can now or we can specify the percentages as to where it's gonna go. Now, linear gradient isn't the only type of gradient. We can also use a radial gradient. So again, not at that and say radial gradients rather than linear gradient in its time. And we'll just say blue to green. And then we go, so we got blue in the center and it goes out to green at the edge. 39. Overflow: Let's look at the overflow property. So let's go ahead and drag overflow into the browser. And here you can say I've got a box and I'm set fixed height and width from that box, but the text flows over it. Now we can control happens there with overflow. Let's do this live in the console. And we've mostly been using the additive. I said you can do it live in here. And let's do that. So let's make this a bit bigger. Hopefully that's nice and readable now. And we'll go ahead and we'll drill down and we'll select our first box here. So by default, this is justs. I would fly visible. If we change it to that, then nothing's going to happen because that's just the default value. But we could also use overflow hidden. And if we say if we do that, then the cuts it off at the bottom, it went lat, the contents I would flow in. This isn't just for text. I could have a box in here or an image that was our flowing and it would just cut it off like that. Now, we can also though, if we want, we could set it to scroll. And now forget here, it creates a little scroll bar inside. And this can be CPA useful, especially if we're designing more complex layouts where we've got frames and menus and a specific area we want to use to be able to scroll through all. Maybe it's like a terms and conditions box where we've got a lot of text and we want the user. We don't want the box and take up language space, but we want to use it to be able to scroll through it. That's a great use case. But instead of using scroll, you probably want to use auto. Because with scroll, it will always have the scroll bar that now on Mac, the scrollbar is hidden when scrolling anyway, so it doesn't really make a difference. But certainly on mobile browsers and certainly used to a Windows. I haven't looked at it recently. The score, if you set it to overflow scroll, even if there wasn't much text in this box, the scroll bar would still be there. And that was pretty annoying. Whereas if you use auto, if the contents fit in the box, there'll be no scroll law, but if they overflow and you need to scroll, then it will add the scroll bar in. 40. Pseudo-elements: Pseudo elements allow us to access elements that aren't really there and treat them like elements. Let's go ahead and drag pseudo elements dot HTML in here. And of course, it's important to remember here that they're not really there. So think of accessibility. Think about are the foot just display purposes and it doesn't matter that a screen reader can't see them, or are they actually adding some important meaning? Here we've got a page and we've got this little breadcrumb menu, but it's just a list at the moment. And that doesn't look very nice. And we've also got some text here. So let's see what we can do about that. So let's open up our pseudo elements dot CSS here. And maybe in Maine, we find Pe. And we want to alter the first letter and we wanna make it more noticeable. So let's make it blue. Let's give it a fun way, or bold. And then we go, It's highlight that first letter. But where I don't know how often you will use that. But something probably more useful is replacing if you want to replace the bullet points with your own. Let's make this look a bit more breadcrumb a. So let's get these things displaying in line and space them out. A little bit. 12 px margin. Okay. Yeah, nice, but there's no kind of indicated this is we're drilling down into the various pages of our e-commerce store here. So let's go ahead and add a pseudo element. And I'll say colon, colon before. And then we can use this content property to add some content in. And I've got this little tuple by Arrow die just had in my clipboard. You can find it in the pseudo elements dot CSS file that you've got from the sample code. And that will add that before the elements. And now it see we've insight that is not really there. You can't select it, but it is. And let's just add a bit of spacing there as well. So after the Before element, six pixels. And there we go as well. So we could also have added desk after. That's another CDO element. But it doesn't really make much sense in this case, we wanted before and we've created annoy spread combs. We've added this little display thing. It doesn't really need to be that because it's just for decorative purposes. But we've done it with CSS. 41. Transitions: In this lesson, we'll look at CSS transitions. So go ahead and open up the transitions page in your browser. And here I've created this toggle Menu button. And this allows us to have this menu overhead that disappears and reappears. And that's done by JavaScript in the background. But it just looks a bit ugly. The way it is, is that isn't there. And we can make it look a bit prettier using CSS. Let's open up transitions dot CSS file. And we'll come down here and we can see I've positioned the menu at right, and I've given it a width. But we can make that width transition. And way we do that is we had a transition property. And then we say what properties we want to transition, and we give it a time as well. So in this case, that width is going from 300 to 0, which is what the button is toggling. But we want it to transition that width of a 1 second. So if we do that math, we do it. Now it slides in an outbreak to play. Nice. And if we wanted, we could even add a delay on that transition. So we add a 1 second delay. Then it's gonna wait a second before it does it. In this case, it's really annoying because you want your menu to appear straight away. But we have that option as well. Let's just get rid of that for now and then we'll get a nice responsive menu back. And we can transition a lot of properties. So for example, I am changing the background color of this button when we hover over it. And again, I could come up here and I could say transition. And I want it for transition, a background color. And I wanted to do over 0.5 seconds, 500 milliseconds. And now if I refresh the page, just takes 2.5th to change color and it goes for that nice fade as we hover over the button. So there you go. Css transitions making everything look smoother without any risk some JavaScript toggling this. But you wouldn't necessarily need that. All of the cool animations are done using these transition lines. 42. Variables: Css has variables and we'll discuss why that's useful. So we'll open up our variables dot CSS and will find the variables dot HTML here. And here I've created a page and you can see I'm using this purple color a lot, so I'm using it in a header. I'm using it in a title, I'm using it in this border as well. So it's all the same purple. And if I wanted to update that, I'd be quite annoying because I've got it here and I've got here and I've got here. So if I wanted to change everything to read, what had to change it in three places and that would be quite annoying. So one option is instead, we could put it into a variable. And the way we do that is we're going to compare and we're gonna use this route declaration. Now we could put our variable declaration anywhere. But if we put it, say in header, it would only be available to tags inside the header. And if we want to available everywhere, we can use this route. And the way we declare a variable is to use a double hyphen, and then we give it a name. In this case, I'm going to call it primary color. And I'm going to copy and paste the value up to here. Of course nothing's gonna happen yet because all we've done is change the variable. But now we can come down and use it. So in header, we can say primary, sorry, we can use the val function and then pass in the name of alpha psi primary Columbia. And then we get stayed the same. Because all we've done is pass it in and let's stick it into here and two here as well. So we're using the variable in all of these places. And now if I want to change it, It's come up here and change it to red. And everything goes to red. And if I wanna change my color scheme, I only have to change it in one place and it changes right across the page. 43. Introduction to SEO: In this module, we'll explore how to optimize a website for search engines so that search engines like Google can find, discover, and send people to our content. 44. What is SEO?: In this lesson, we'll cover what SEO is. So SEO stands for search engine optimization, and it's making our content attractive to search engine such as Google, so that they senders visitors. If we've got a load of high-quality or relevant content, then we want to make sure that search engines can see that and consider its valuable to the people searching, so they send them our way. Now, here, specifically, we're talking about on-page SEO, off-page SEO, and let's just be clear about the differences between those. So on-page things is stuff that happens on our website. And here we're talking about creating quality content, making sure the content is relevant, and doing things like technical SEO, optimizing our website to make it super attractive and easy for Google to say. So we are going to play around with HTML tags, but also things like making sure it's mobile friendly and making sure that loads well. And then the oversight is the off-page. So that stuff that generally happens on, over people's websites, That's like link building, getting people to link to our website, get enough stuff shared on social media and arguably of pages more important, Google rose to prominence with the idea that it was ranking everything by how many websites linked to your website. And that was a big thing when values to fame, all of those years ago now, so off pages is key, but on-page quality content while later HTML, on-page stuff is really important too. And that's what we're going to look at in the relevance of this course. 45. Modern SEO: Modern SEO is not like traditional SEO. Back in the day, it was all about how many keywords we could stuff into every corner of the page to try and make search engines think that our website had the content that we wanted them to think it had. And we'd put meta tags in there with headings would put titles, and yet slam loads of keywords in there. But these days, search engines are too smart for that. And what they want is quality content, lots of quality content. And if we can provide that, then they will find us and they will send US traffic. If you think about Google, they have some of the world's best artificial intelligence researches. They're coming up with how to analyze content and work out what it's about. So rather than relying on keywords now, Googlebot and over search engines will look at our website and I'll analyze what's on there. And they'll use AI to work out what the content is and wherever they should send this traffic or wherever we're trying to trick them, we've irrelevant keywords or keywords stuffing. So the key to modern SEO as well as having plenty of incoming links in terms of the things that we can have on our page is loads of content, lives of high quality content. And if we put that content on there, the search engines will be able to tell that we're putting out high-quality content and they will start sending those visitors. Everything else. We'll do the optimizations that making sure our HTML is correct is great, but it all comes secondary to having that high-quality content in our web page. 46. Page structure: How should you structure your page for maximum search engine traffic? Well, I've got a few hints in this page structure file, and we can open this up in a browser and we'll just talk through them. I could've done this with slides, but afford be nice if we got to dive into the code a bit. So first thing is we want a single hate one with relevant keywords. So this is a nice introductory article. We just want one hate to one. So the search engine knows what the page is about and this should be a good title that explains what the article is about and why you should be finding it. We also want to use the page title itself so the title appear. Again. It can use slightly different keyword. We don't want to necessarily repeat ourselves in the Haight one, this is a chance to describe what the articles about, but in a slightly different way. So that there's more chance that different search queries will land on the page. Then we want lots of high-quality content. And a good example of this that I know a lot of SEO people talk about is Abraham Lincoln. So if you Google Abraham Lincoln, top result wikipedia, why? Well, because if you go on to it, there is this massive article with loads and loads and loads and loads of information. I already have donated like so much stuff on Abraham Lincoln. This is probably a really high-quality article on Wikipedia, so we know it is high-quality and there's just a huge amount of information. And so search engines rank really well because they like a lot of information they want value for their users. So if you can add, especially if you're writing articles, blog posts, try and make them really long. And stuff like media at these images in and other forms of media. And just make a really high-quality website that people are going to spend a lot of time on. We want it to be mobile friendly. So if we turn on mobile view, Google will now punish you. If your website is not mobile friendly, this looks quite nice. Some websites do not look good in mobile and Google, if you're searching for a specific mobile device, google will now d prioritize any website isn't mobile-friendly and valid semantic HTML. So things like using the headers and the main and the article tag. So the search engine can never what it's about. And we also want our content higher up the page if possible. So we don't want loads the crap. And then like sidebars are pair, if you can have a sidebar sticky down at the bottom, down here after your main content. So this is some guidelines for how you should be laying out your page in order to make the maximum visibility to search engines. 47. Meta tags: In this lesson, we'll look at matter tanks. And to do that, let's open up our SEO folder and we'll find this meta tags. And there's probably two tags. There's lots of different meta tags. But when we're talking about meta tags to do with SEO, there's probably two that you see in that matter, which is a description. And we also one called keywords. And the way we do that is we give it a name and then we get that content. And then we can just pass in a list of keywords here separated by commas. Now the keywords Meta tag is basically useless. It used to be used a lot by search engines, will have cause everyone gets crammed full of all the keywords they wanted. And these days, search engine is just look at the content in your page and they ignore that. So realistically, you probably don't need this keywords tag anymore. But the description tag, which again search engines on paying too much attention to when ranking website is still important. So let's give this a bit more text. We could say something like that and nice sentence or a paragraph. Now why is the Meta Description important if Google and all the other search engines juts looking at content now, well, because it uses this description when it creates our listing. So let's go and look at an example on that scatter my personal website. Now if you look at it here, there's not a ton of information. I've got some recent blog posts, I've got menu, but there's no tax talking about who I am. And yet, if I google myself and the top result, and you can say, Hey, Google's little description for it says I'm a software consultant based in Leeds and need to date. There sits a bit out of date. But where is it getting this text from to describe what's going on here? Where if we look at the source code here. So we've got it down to view. Source will see I've added a meta-description and it says crystallographic is often based in Leeds. That's the same thing that Google's displaying here. So when we add these meta tags, it's not to tell a search engine what the page is about and what it should rank for its more about if Google decides to put his in there, what description is it going to use here? On do I listing now it doesn't necessarily have to use the meta description, but it might do, and in my case, it is doing. And so think of it as a kind of advert to entice people in when they're reading through the search listings, right? Something that's going to be attractive to people and describes to the end-user what the content is about. 48. Robots txt: When a search engine first comes to our web site, it looks for a robots.txt file and the web grew to tell it whether it's allowed to look at that website and not said We gotta say and we just sacrifice I Robots.txt file. There's a bunch of rules here where it's saying what user agents are allowed and not allowed. So if you just want Google to crawl everything, you could just create a totally blank robots.txt file. And that will be fine. That would say to Google and all the of a search bots, you can call everything. But if there's specific stuff you don't want it to crawl, then you can tell it not to do that. So let's say we want all search engines to be blocked. And then we'll give it a list of stuff they're not allowed to look at. So say CGI bin and images, maybe we don't want to calling the high resolution versions of our images because that would take up too much bandwidth on a website. So this allowed that. Now you can also, it's also important to remember that search engine bots don't have to respect that all of the reputable bots will. But the more dodgy bots that people are running out there weren't necessarily pay attention to it. So it's not as height. But if you just want to stop the big search engines crawling sand parts of your website, this will do it. And let's take a deeper dive into what MSN f1. So they've said to all bots that they don't want it to access any of these URLs. And then you've got specific rules for specific user agents. So star is all user agents. But for example, for Googlebot news, they don't want it too. They want it to look at some of the stuff, but they don't want it to look up over stuff like the core videos, for example. And further down here they're looking at things like the Google Images bought or just the Google Video bought what it's allowed. You can use the aloud and you can use the Disallow, and you can use the star has to be a wild card as well. So that will allow you to determine what of the major search engines, which bits of your website they're allowed to call, and which bits then not allowed. Now if you're happy for it to call everything, just create this totally blank robots.txt. Now why would you create that rather than just have one way, you could also just not have woolen. And they would assume they could call you website, but you might get a load of fora for errors in your stats, saying they were trying to access robots.txt and couldn't find it. So if you just create one, you'd use that takes that list stats and you let all the box know that you don't have any specific rules for them. 49. Introduction to tools: There are loads of useful tools out there that can help us do our job better or make our job easier. And in this module, we're going to explore some of those tools. 50. Can I Use: Really useful website for 20 workout where we can use a newer feature or not is can I use so because or Fernandez client side, then really we need the browser to support it. So if you go to can I, it will tell you some examples. So we could go here and put in say CSS3, and will give us all the potential CSS free things we might want to use. I've picked out some popular ones here. Say for example, flexbox. Can I use it? Where we can see here that it's supported by basically every browser, limited support by Internet Explorer. Everything else is fine now. And so overall, huge percentage of users can use flexbox for you on to something like grid. Still pretty good. There's a couple of spaces, haha, still 96% at the moment, so not too bad. One in 20 users will have a problem with grid or webpage. That's not qualify down 8% webpage is an image format, as we discussed earlier in the course. So whenever your trying to work out where we can use something, just go in here, stick it into the search, might not come up with a lot of the time. It will tell you whether the browser community supports it. So again, pretty good used for position sticky, but still a lot of browsers with some support issues. So it's a great go-to tool when you try to work out how widely supported a feature is throughout the browsers that people are using. 51. Lighthouse: Lighthouse is a tool built into Chrome. It's only available in Chrome at this time, but it's super useful if maybe you have to get her website first and I'll bring up the developer tools. And yeah, we got the developer tools and we'll go here to make it a bit bigger so we can see what's going on. And find lighthouse in the menu. And then we can get it to report on all of these factors. And so we just go to our web site, which everyone objects on my personal site here. And I'm going to click Generate Report. And Chrome will start imagining some immobile. It will test what happens when the internet connection drops out. It will look at how the page is structured wherever it responds well, in accessibility and SEO, what happens when a stylesheet files and we get this report here and it gives us a skull. So performance, not doing amazing non-performance, great for accessibility. Apparently, it is a very simple website, so you'd expect me to be able to hit these things quite well. And it tells us things like, how long did it take to download enough stuff so that it could draw the page and how long can pick four came interactive. And then as we keep moving down, it's got some suggestions. For example, could we remove some of this CSS because we don't need it initially? Could we make the CSS even smaller by modifying it? And then all this by default, they're all hidden because they've all passed, but it checks loads of stuff to make sure the pages accessible. And a bunch of best practice and SERT. Now you shouldn't put too much stock in these numbers because I'll give you some examples. If we get a, get a BBC News homepage. In fact, let's stick it into hair so we can just run this report again. Now, I know for a fact that the BBC spend a huge amount of time making our website very responsive and quite accessible. So you would think they would score really high on this, but it's actually really hard to do when you've got big website. Is the score really well? On Lighthouse? My website works pretty well because it's very simple page. But over websites tend not to score to highly, for example, performance of only 25 and no accessible. Now, I think this is a very accessible and Wilbur websites are again, I wouldn't put too much stock in. But what is useful for is you can go down and look at what lighthouse is looking at. And you can say, Okay, maybe I should make some tweaks here. Or this thing is like, for example, the fairing off screen images, maybe a good idea not to load all of the images down here initially because I haven't scrolled. And just again to really emphasize and still in the same window again, how nobody's perfect here is Google's homepage. It's a super-simple pages shoots that search page. It was revolutionary for being so simple and uncluttered. And it will run it through Google Chrome's lighthouse. And we'll see what score they got. And it ends up score, isn't that great? You have going on anything? And this is Google's homepage, is their baby and there until is reporting that they're not doing so great. What does that mean? Well, that means that we shouldn't put too much stock in these numbers, as I've already said, but we can look through the report and see if there are any optimizations we could make, which would help us load faster. 52. W3C Validator: Having valid HTML is really important for debugging things that are not going quite well. It's often maybe that the page isn't quite formed, right? And for making sure our page looks the same across different browsers. And to do that, we can, does a bunch of stuff we can do, but one of the ways is using the W3C markup validation service. So you can punch in a URL here. I haven't tested this in advance, so let's hope my page works well. And we'll just give that a little time to run. Okay, perfect. So my homepage looks good. But we don't need to necessarily put in a URL so that skip back to the homepage. We could also upload a file. So if we wanted to take one of the pages we've been working on. Let's go into here and we could upload it. Yeah, nice. Still working. Or if we wanted, we could do a direct input, so we could come here, we could copy and paste the HTML in. And again, we've got no warnings to show, which is great. So this is a great way of double-checking the HTML is, okay, especially once you website is live, you can just punch in the URL here and it will tell you if there's any errors in your HTML. 53. Colour tools: When designing, we need a great set of colors and there's a couple of tools that can help us do this. So first of all, this website I like called coolers, and this will help you generate pans, but you can also gets hit this explore. And we actually did this in one of the lessons, but it will just give you a bunch of color palettes that look quite nice. And you can go here and you can just copy any of these. You can also save it if you want to remember it, because you might want to come back to it later when you are designing. This is a really nice tool that just gives you everything you need. Let's pick a nice color. We'll work on that going forward as pickup display. And the over two, what I really like is this Adobe color. So it's just color dot And this gives us a bunch of really useful tools. So we can just punch in color here. And it'll give us a bunch of options. So here it gives us if we want aid, some opposite colors are Picard, triad followers, complimentary colors, split complementary shades. Loads of cool stuff going on here. So if you need to, you already have a coloring minded. You want to find out, okay, what colors go with this color. Then you can use this tool to do that. And that's super useful. And novel and I recommend is the WebAIM contrast checker. And this will allow me to tell you if your color scheme matches and what the contrast ratio is because we want that contrast ratio as high as possible. So for example, if we just put that blew in, see right now that's failing everything because it's impossible to see blue text on a blue background. Let's try changing the text to white. Right? There we go. Still not enough contrast because blue isn't dark enough for wine tax. But if we go off and we find, let's try this one. Put that in as a background. Perfect. Now we've got a really strong contrast which passes a AA and AAA. So wi and AAA, WCAG standards for accessibility. So those are some tools that you might want to use when sorting out colors in your design. 54. Final thoughts: Congratulations on making it to the end of this class on front-end web development. You now have a firmer grounding in HTML and CSS. And I can't wait to see what you come up with. So feel free to share your projects with the class if you've been coding along. And hopefully you've gained some real, real-world experience building web sites. If you have enjoyed the class, then please leave a review. And I hope to see you in number class and see you again soon.