HTML Programming For Beginners (THE Easy and Fun 3Hr Course) | Joshua Blewett | Skillshare

HTML Programming For Beginners (THE Easy and Fun 3Hr Course)

Joshua Blewett, Activated Academy

HTML Programming For Beginners (THE Easy and Fun 3Hr Course)

Joshua Blewett, Activated Academy

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
20 Lessons (2h 24m)
    • 1. HTML promo video html

    • 2. Introduction to the course

    • 3. Sublime Text Editor

    • 4. The HTML skeleton

    • 5. HTML Tags

    • 6. Conclusion & Exercise

    • 7. Paragraphs and breaks

    • 8. Styling and lists

    • 9. Tables - The secret behind HTML layout

    • 10. Adding Images

    • 11. Behind the scenes - Page source

    • 12. Choosing a website and theme

    • 13. Creating a logo

    • 14. Get Free (Legal) Images for you website

    • 15. Background Images

    • 16. Making second page

    • 17. A sneaky spacing trick

    • 18. Embedding a Youtube video

    • 19. Linking webpages

    • 20. Conclusion

  • --
  • 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

Who is this course for?

This course is specifically designed for people who are wanting to learn how to use HTML to create websites and for people who want to kickstart learning to program.

What's the course about?

This course is all about HTML, and how you can easily learn HTML to code in HTML to produce websites.

Why this course?

There are lots of courses that teach you HTML…and of course we suggest you do as many as you can. However, if this is your first time, or if you are wanting to get into HTML and web development, then this is the best course for you. Why?

  • Firstly it will be fun! Learning that is not fun is not fun…OK, I suppose that makes sense ;-) We want you to have fun during your learning and will not only show you what is vital - but we plan to keep it fun and interesting too.

  • Secondly, we know that not only do you want to enjoy your learning, you want it to be easy to follow and meaningful. As such we are careful to go in a step-by-step way through the content, ensuring you understand everything before we move on. And if at any stage you are lost, then we are here to help. Just drop us a message and we will get back to you.

  • Thirdly you are about to be taught - not just by one person - but by I unique father-son team. We have been working together for years on online courses (check out our programming courses and others). I (Craig) have a PhD in educational technology and have been involved in technology and teaching it for over 30 years. I will share with you the benefit of my knowledge of teaching ensuring that the teaching is engaging, professional and effective. Joshua, has worked years and has developed numerous courses on programming and video editing. Together we are going to guide you on your learning journey with Final Cut Pro.

  • Fourthly, and maybe most importantly, is the approach we use. Unlike other courses, this course is based on a special teaching approach, designed for digital-age learning, called the Activated Classroom Teaching approach. This proven approach results in more effective learning because you are more engaged. You'll find out more about it in the start of the course.

What kind of materials are included?

The course includes everything you need. The lectures are professionally created, as people have come to expect from ACT Academy courses. We will explain everything to you and give you access to additional files/content where they are needed. 

How long will the course take to complete?

There are 4 sections to this course, with each section providing short powerful videos on individual concepts. Learning to become proficient in HTML takes time. But, by following the course and working through each section, you will move from easily through the essential basics and emerge a confident HTML coder.

How is this course structured?

This is an action course. So the course starts with getting to the doing straight away. The course is structured in the following way:

  1. Section 1 – Introduction to HTML 5 and an HTML editor - By the end of this section you will understand the basics of HTML and be able to use Sublime HTML editor to code in HTML.

  2. Section 2 – Building a webpage with HTML - By the end of this section you will be able to create a basic webpage in HTML including images.

  3. Section 3 – Making your webpage look good - By the end of this section you will know how to improve the look of your website using background images, as well as how to create and display a website logo

  4. Section 4 – Creating additional pages - By the end of this section you will know how to create additional webpages and then link the pages together with text and images

Why take this course?

It is quite simply the best course, covering the key content, in the most engaging way, by a most unique teaching team, using a proven approach for teaching with technology!

Meet Your Teacher

Teacher Profile Image

Joshua Blewett

Activated Academy


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. HTML promo video html: imagine being able to learn and laugh. But if you join us on this amazing course, an introduction dates Gmail, that's exactly what you're gonna get. You're going to get the most innovative, exciting course learning HTML at the same time having loads of fun. This introduction course HTML is not only going to teach you the basics of using HTML, it's also going to kick start you as next immoral programmer with you wanted a career, or you won't just get into developing exciting fun and interactive hnl websites, you will learn how to use. I still know everything from text for Manning to bidding images and video to using table behind the scenes. You're gonna learn the power of HTML to blink multiple pages together to create your very own website. You know how boring some lectures are that could be so boring. Who wants to have a boring experience when you're learning? My background is how to teach effectively using digital technology, and we're gonna use these incredibly engaging, activating approaches in this course. In addition to using what it called the activated classroom teaching approach to make the exciting ineffective, we use a scaffold approach will be teaching the basics and we slowly build on top of that so you can easily keep up with the learning. We want to make sure by the end of it you understand how to code in HTML. By the end of this do you will be confidently building your very own HTML website. If you like boring and difficult. This course is not for you. If you like exciting and easy to learn ways of learning. HTML, This course is for you. So what you waiting for? We want to meet you on the other side because that's where the action is. Ethnics kept one joint. I'm gonna see you on the other side. See you there. 2. Introduction to the course: Hi, it's Craig yacht out and it's just you, Erin. We're gonna be bring you throughout. Html five, Introduction course. Very exciting course. The objective of this course is to teach you the basics off html five. What it's about and how you can get to actually be a coder of HTML and set up your first website. So let's have a quick overview what we're gonna cover we going to in the suffer section. Starting our first section is an introduction to HTML. How it works, how to put together Brown editor that you can use Alvar basics, let you get comfortable. Very important. When you think down to a meal, you want to be comfy. Then we'll start looking at formatting images. And how we can change the size is how it can add images and then equipped with that, you're just about ready to put together your first couple of Web pages into a website. So our 3rd 6 is going to look at essentially putting this all together and creating your first website. Then we'll be looking at tables, backgrounds and more. So this is gonna be basically how to make your whips that look. NASA need not have everything just lying around, putting a background a little bit like Josh's room. Sometimes you don't want it or lying around. I mean, if you could organize your life in your room much like a HTML website, I mean, it could look a really neat So that's that section And then, well, buttons, links, sizing and so much more we'll get a little bit more involved. Were looking, heightening pages together, create batons, change the size of images, etcetera. Now, just to get straight. This is an introductory course. You're not going to be at the end of this Like and a master. I am the jet I off all programming developers for Web pages. The idea is it's to introduce you to the basics. But the end of this won't you be comfortable working with HTML and once you comfortable working with it? There are so many options to go further as we will explore in this lesson and others afterwards. So you must have a Christian. And the obvious question that is in your mind is yes, that's exactly it. What is HTML five? Was it five? Not 4321? What has he got a number. What's it all about? That is already good question. And of course, if you were an active learning and we encourage it in this course, if you're inactive, Mona, you would actually go on Google it idea you came on de pulls down, Go Google it. Right. So what did you find out? Will you discover, didn't you that HTM or five is actually essentially made up of three parts? It's the html part, the CSS, which stands for cascading Did you look it up Style sheets and Js which dance for JavaScript, Right? So these are the three parts of makeup HTML 5 18 or five is in fact in environment. So HTML essentially is what allows your websites to to talk to each other to understand what's actually going on. And we'll look at that in a moment. Then, next to that, there is a CSS, which is his cascading style sheets. Or is this just what's What's that all about? Soc esus is basically lack well with HTML like you can make a wigs that look really good just with html and then with CSS. Basically, this is how you put lots of like little affects and styles and animations and all of that kind of stuff that just makes you whips that look even more beautiful. So if HTML is like this skeleton will then see assesses the skin is the skin that goes over it. And then, of course, if you want it to have motion to have heart to have the beating heart is pumping inside there, that's giving it life. Ultimately, you need J s, which is JavaScript, and this is really where you're starting to code things that are going to do the processing that sits behind and inside the skeleton and the skin. So that's a cheap, more far reaching more fires made up of HTML, CFCs and JavaScript. But on this course, we're not gonna be looking at CSS and JavaScript. We're going to look at hte email because that's where it'll starts. That is the foundation so very quickly to explain to you how this works. HTML is essentially code. It's code that sits on a page much like you see here, and it's really is computer code. It's code that allows one computer to understand what another one is saying, and this code is passed around on that code is then sent through to a browser and inside the browser. It interprets this code, which is what we gonna be learning, and it displays it in a certain way. So essentially all that HTML is is a series of codes programming language that a browser can interpret and then know how to display things. So, for example, if it'll say I want a picture and I want the picture to be over here, I want some text and I want the text to be over here. That's all resinous code, which is html hypertext markup language and whichever browser you're using with Ruby, Chrome or Explorer, safari or whatever will then interpret that code and display. So we're gonna be learning about HTML and how we can create basic websites. So first, look at that. That's pretty exhausting. What do you say, Josh? Yeah, it looks very confusing, and you've probably come across. Is that different stages? You know, if you any stage look at the source code behind a web page, you This is what's behind the Web pages. It looks exhausting, like Wow, what is going on there that we're gonna see in a moment, it's actually not their hard. Once you understand the basics off how HTML works, it's actually quite easy, and you're about to be come empowered to become an HTML code. So he has an example of ah, segment off HTML code again looks like, Wow, what is going on here? It really is is quite simple. Essentially, always HTML code is made. A part is a Siri's off tags, so you'll see there is a tag. A tag is something that occurs between those little brackets, those little diagnosed type of brackets. So here we have a tag called head. But now, for every terror for most of them, for every opening tag, there will be a closing tack. Closing tag is preceded with a Ford Slash, so you can see here we've got a Ford Slash head and hit is the opening tech. So you look around, you should go to see some others opening and closing tax there. We've got one that's doesn't look as obvious, and there we can see the closing 10. But again, that is our A tag there. It's opened, even though this other little components to it. Don't worry about the bone. But there's the clothes. See any others? Yes, there's an H one tag, the clothes, the open and on on on a verse. So it's essentially, that is what HTML is all about is about code code that is made up of tax, and these things are interpreted by our browser. So what you're gonna be learning is to write this code. So that's it. That's what we will be covering this course html introduction to HTML. We hope you're excited. We're excited seeing right. See you there. So get your brain radiate your fingers warmed up on Let's get learning about HTML. 3. Sublime Text Editor: right. So what we're gonna be doing right up front, there's we're gonna have to be downloading what is called sublime text editor. Now, I'm gonna show you how to do that. And we're gonna be working with sublime text editor, but I want to show you why we are going to be using this is our text at a foot for HTML now I'm a paste in html. Immediately when I pasted in your noticed there are colors and these in dense and etcetera . When you work in a text editor like sublime, it makes the working and the arrangement of your html very easy to see. If I click on the word table there, you immediately see highlighted with the other end of their taggers. Don't worry about the details of the moment. I just want to show you that's what a specialist text editor that's been designed for. HTML looks like as compared to if you worked in some sort of normal text editor like texted it, you know, those are now paste that in there there is no color coding as compared to what we had in a supply. If I click on an opening tag like here do. You wouldn't know that That's the closing tag over the etcetera. So there are a lot of benefits off working in a text editor that's been specifically designed for HTML. So that is what we want to do. We need to get this stuff up front. You need to go and download it. So this is how you do it. Okay, So if you wondering how to download this text editor there are lots of ticks. It is plainly this online ones. There's lots of brackets oblon. So many supplants, and that's when lots of people use it. So basically, you've got Sablan ticks three on Sablan ticks two and one, but three has been in beta for ages. So we just gonna use to Yeah, okay. So going to google and sits download Sablan ticks too. You know, if you just put sublime ticks to whatever you like was a bomb ticks too. That should do it for you. Okay, so on day, you see it aplomb, texter. And we've got all of these Operating Czar. If you are Mac people like us, you're gonna go is every six. But if your windows person that's cool when that we lack windows we love. We love everyone. If you're Blahniks person, whatever you just pick your version and you were downloaded is pretty simple. You will just basically kick on the link of the version that you want and then you will download that file as its for acid would be notice. It's a DMG far we were Download that DMG to your downloads. Okay, so we have already downloaded this. So when you open it, you just see an empty, untitled new tab we've got over there. So this is basically the This is what you get when you're not much. You're working on a blank slate. Now, remember, what we doing this course we were looking at how to build a website from scratch. And while they are special tools that can trying to it for you by learning the HTML, What you're doing is you're learning the nuts and bolts of language that is behind the whip . So it looks a little intimidating because you're faced with this big, dark, scary screen that's got nothing on it. But you're gonna learn that soon. Even if there is lots of text on it, you will understand what that means. OK, so the first thing we do just to get started without HTML is you have to save, like your project under because you're obviously issue amounts. One thing you got CFCs. So when we save it, just hit command ISS, and we can go to a district. We can even make a new Frau new photo for a web. Yes, obviously all of your files that you're gonna be creating or separate little HTML files. And so each of these is going to be needed is gonna require name and be suggesting that you save them all in one folder. We're just call it our webs. That and then make sure you have a daughter aged Amar in. That's how it knows what you're editing and what, like how it's gonna be formatted when we're hurting and all of that kind of stuff. And when we save it, obviously, and we open it, Google knows this is an HD Mossack. Also, it's a good idea when disease is going to be final names ultimately is if you're going to use the name like this is a good idea to rather new spaces, which will be replaced by fentanyl characters. Is the other writers one word or put little hyphen? So they we got our website dot html telling it that this is an HTML file. Okay, so now we save it and can see instantly at the top. They it has got a I would say this is really a pretty straightforward environment. So at any stage file new file, you can create another one, you can rename it, and you could even have multiple tabs open should you want. And we'll look at that later. But basically, this is the environment where you're going to be creating your website and writing your HTML code. Okay, so, nothing. You know what to do. Get up there. Going download sublime ticks two or maybe three. If it's type of out of the beta version. What if you like that much the same? And you're gonna need that to carry on, So don't do dear. What? Anything else until you've done that. Go, go do it. See you in the next 4. The HTML skeleton: Welcome back to have anyone question be one question for you. Did you download this sublime text? Because if you didn't, then stop right now. Go tactics. That's what the previous listen was all about. If you want to participate this course, remember this course about being active about being involved? What do you say? Yeah, all about being active use. That's how you learn stuff you haven't downloaded that kicks in it. Hit, pause. Now there was my paws and you go back of Donald. But I'm assuming you've done that. So we now have our sublime text editor. And as we said, it's so much better than having just a normal text editor business kind of former things. Now we could do cool things. And what we want to show you is the process that we want to show them the process. What the basic process that's involved. How are we gonna start getting some text on a page right now? Basically, there's just two parts to this. Remember what you doing? Your creating HTML code, which is the source code that sits behind Web pages. There has to be saved into a file. And then that file will be opened inside a browser where it can display the browses is the interpreter for the file. It understands what the source code means. So this source code is interpreted by chrome or safari or whatever browser you're using. So it's giving a couple hollow. How are you? Is what we've not talked to die file. Fantastic. Okay, So if we, you know, as we have saved this particular project on, uh, Webb HTM out. So now if we go to this was far less value, we can say open and then open with as we lack chrome because some stuff back safari or Internet Explorer won't display. Like when we get more advanced, you'll see lots of things. Crime will do that. The others, like you, have put on a particular piece of code and then safari and Internet Explorer won't show that kind of stuff. So yeah, well, that Mrs what you must always remember to do if you haven't like, if you've made all these changes and you keep on having the same areas like our it's not doing this. It's not putting the new sentence every to say. Come on. And we it s yours. noticed that over here it's about the safe. Come on, ISS. And now when we read fresh tab Ah, and just as a little hint he tip for you, you'll notice when you type something high, it's not saved. You can see it's got a little dotting it there that indicates that you are not yet safe. So obviously, if I go across she up and refreshed to see the file, it hasn't got that new part that I just added so very important. When you type something, yes, save something to hit command s notice, it's no longer it'll dot indicating that it's now say, If I go back here again, it's now being reflected. Got it? So it's very simple process. You type your co chia it save and then open it in the browser. But each time when you in the browser, we need to reload it. So it has a look at the file again. Okay, so one thing we'll also notice is with spacing like let's say that this part of space suspected look nice. OK, so we're going to say hello and then the next person says, Hi, you're a little couple of lines spaces there. If we do this, it's not very necessary. Hello. Yeah, well, spread it out. How about we like to sort of make it so it's not see spread out of your head? Uh huh. You're high and then said that pulls our page and then a couple exclamation marks. That looks cool. So save that commode s now, you know, just win. Re refresh up. Yes. What? It hasn't looked rubbish. Yes, it's rubbish. I mean, we talked. Look how we talked. It was beautiful. It was like That's on the first line. Is pretty obvious that the line for some it's not working. Things missed up. Russia. Okay, so with, um, semantics, it's not looking at black. If you've got a whole bunch of spaces and how much you spacing it out and all of that, Obviously, if you got one space and it's gonna put that one space for your sentences, but it's not gonna try organize it like that. So for that you have to put your own lack with about these non bracket spaces. So that little bit of code that he put in you to tell it what's going on? You tell the Web page. How much space is you want to get to the bottom line. This is not what's called a busy wig. Areata. You know what that means, is you It just what's with you? Come on, Tell. There it's what you see is what I guess that's what. Um, so remember you are actually a coder when you work it, actually, your building code. So you don't just put it in like that and think when I go to the other side is just going to take it all like it appears on one line. So what we need to do is we need to actually put the codes in that are gonna explain to the browser in our case, crude how it's going to display. This is a page, and that's where the basics of HTML coming and the use over something called tags get so a very fundamental tagged a citizen to get the spaces. And but this is like, we'll cover all those things like every basically every 80 mile pages you have has this. So it Once you've say, if your project as HD doctor, whatever star HD mile, if you just open this short cut won't work. So if we go h t m I'll and then the head the tab. But your notice it posed out everything for you. So you've got your head. You don't need to worry about what all of this is. Where we're gonna go and explain all of these to you your body So we can basically call this the skills you've got ahead in the body. Yeah. So this is your if before, up until now, you didn't have a hit in the body. You just do this and you put it in the body. Yeah. So this is your skeleton for H tomorrow, and we're gonna fill the folder Sin with with the cut. Absolutely. So so basically, again. This is why we using Sublime. Because what is supplying doing for you? Sublime is giving you the structure. So it was very simple. We're just going to show you one small, so it isn't html and we doing html code. So you top html and then you hit the white. What do we say? Were you listening? Tap And soon as you have tab, we're gonna use over never again. So you're gonna not forget us it immediately gives you the basic structure for an HTML page so very quickly just want to show you the structure. It always starts with an opening HTML tag. These are all called tags, so the things that occur between the two little braces are called tax. It starts with an opening one, and then right at the end is an ending one. As we said in our previous Ishan, when I click on the one, you will see both on their highlighted. The opening tag is just between the braces, the closing tag, always hairs, a Ford Slash and then the card. So it's given you html open html close. We're gonna look at the details of these other ones later. Head open at the top. They head close just below it. Title open title closed body open, body close. So it's basically giving you, as Josh said to their scaly skin. So basically what h Damar, all we're gonna be doing is boarding the skeleton on this course, which is our beginner's course. We're gonna be boarding a skeleton, which is basically most of what you're seeing in all the websites, and then you get into like CSS was makes it look, but NASA. That's what you call the skin. And then you got Java script. What's like? It's like a pumping heart, but in that's where it gets really complicated. So yeah, but a step at a time because he wanted. Once you've mastered this, this skeleton another course, you could look at how we will do the skin. And then, if you really want to give this thing heart and make this thing ran, which is all the processing of the logics or things get that's real coding stuff. That's the Java script. So that's what HTML five is about. HTML five is made up of HTML CSS and JavaScript. So you're gonna be learning in this course all about the HTML far off the HTML part, which is lots of fun. You get to create a little basic website and you're gonna be as proud as a Russian him in a Chinese market. I don't think that that hand would be very proud, but so I've on the next listen, we'll cover about what we're gonna do in this head and the body and all of that. So go and Balderson do you little HD Amal Cabot. And I just want to show you one little thing while we are here is if we now start to play with these things and remember when we showed you before Nothing interesting happens are on that side Once we start to use codes to do interesting things and again, don't worry about it. But this is a hollow How are you? And now I put this in a hitter code and I'm now saving it. So I'm using codes to display or to tell the browser how to display that. So I go across. Yeah, we refresh. And but it's gone nice and big. So immediately it's applying some level of four Matic to Okay, so that's what HTML is doing. HTML is telling it how to display the code that Yes, sir. Your turn. Get out there. You download a jaw, Your sublime text editor Just play for a little bit because in our next essence, we're going to have a look and start looking at these different tags. What they mean how you use them as we start to build up your very first website. 5. HTML Tags: Welcome back. We're in our sublime text, Editor end. If you follow the instructions in the previous lesson, you would have not only downloaded the Texas, so you would have seen some of the basics as we typed code in here. This is our source code html source code. And then we move across to our browser on the other side, where you can see that source code interpreted and displayed in the browser page. So what we want to look at now is just some of the basics around the tags and how the tagging work. Now, if you'll recall, this is HTML. So the most important tag or the first tank you've gotta have is what? That's right. HTML. So you just top h t m l and then you press tab the tab bottom, and immediately it produces what we referred to as the skeleton. Recall enough previous lesson. We said, This is our skeleton. It's made up of these HTML tags html opening tag and HTML closing tag and various others. So we're gonna have a little look around some of these tanks and briefly explained the tanks that we've got here and they're even looking some tanks that allow you to do to some basic formatting. Just so you get a little feel for how this works. Forget to start with, you know, we've got a head and we've got our body. So the head, generally all you put in there really is like your title for your website. Whatever. If it's your something, yeah, I mean, if you look at the moment our website is, all it's got is the title that's sitting here inside the tab is what we called it our dash . We have dashed site punishment. It's not very exciting. So Africa inside the actual title, you see, we can name that Pacific tab. So, like, as you know, if you go on YouTube or Google, you instantly know where it is because it says whatever YouTube or Google. So now, when we saved this and we go back to refresh it, we see a cool website. I made so notice that's different. You know, that's there is the actual HTM l name our website dot xml. But this here is the title, which is obviously for more useful, but it's also helpful this title for your search engines. So when they start to search for things around what your website is called. This helps when it comes to the search engine being easier able to identify you. The other things that can go under head is too big. The meta data about your side meter data means data about the data. It's it's other things that can explain your site. We're not gonna look at at the moment. At the moment, all your alien student is titled. That's the only thing that you gotta put inside this first part, which is head. And so that brings us to the next part, which is now our body. Okay, so this is like we can name Asato whatever and lack war or the stuff we have in the side. We know pages that have lots of content and all of that kind of stuff. IM said, um, we'll go 1st 3 like if we just said, uh, we're noticed when we say this, Of course. It's kind of a beautiful skin and look very small, very un interesting. We can go over these different ones so we can go about H one tab. OK, so now what? These are These are H one h, two nights street exit. You're gonna have a look at these are hit a top. So it's basically saying, Okay, I would like to put a piece of text, and I wanted to be hit a type one. Okay. So you can tuck. Yes, it's called it here. The one so you can see an example of what looks Just one more. So now Tab attack. And it's cool. This one now here, too. So now we're gonna see these are special tags that have been formatted and html recognize them so immediately. You see what's happened here? The one is a large tag. So you're getting a large heading and hit it too. Is a slightly smaller one. Okay, so what? H Amal goes all the way down to h sex, which is? Oh, let's give that one a trust H six hit tab and let us stop in age. Hit a six and save it. Go across to our browser. Refresh reloaded. Anyway, a little Minsky tiny little fella in there. Okay, so more things that we've got beyond Heda is if we, uh good here, and we just happened be that sounds for brilliant. I bet. Okay, so it's for road hold If you want to make some text votes. If we just say this Top bowls, both the people be bold, but here we go. Ok, so well, top something next to it again. Bold. And we won't put this in any tags. You would just see the difference that we say that. Refresh it, We can see. Okay, so, no, just two things that are important. If you've got very noticeable little eyes, the first is you'll notice this one is in bold and that one is not involved. That is exactly how we said here. This one sits inside of the tags B and close. Be this one does not. But you might have expected this to be on the next line. Notice? Yeah, it's not on the next line. Yeah, I understand. Remember. And we mentioned this in an earlier decision. We'll show you how to put things on separate lines later, but this is not a lay out. The fact that I could even stick another line and there I could stick some spaces in front of that. Save it. Go across year. What do you think it's gonna look like when I had to refresh. Can one take against what you think is gonna look at? I just changed it. I'm new to down another lineup. I've moved it across actually the right the way across that. Now, it should actually come directly after that. But a few rows later. Okay. Save what's it gonna look like? Exactly the same. Nothing changed to notice. Nothing changed, even are saved it and refreshed it Because this is not a formatting space. It's not what I mentioned. It is not a Wiz e week environment, so that makes absolutely no difference. So all the formatting is done by the tax. The tags are very important. And in fact, if you want to just get an idea of how many meaning many tags they are. If you press the opening bracket, it will immediately bring up along the tags. On the air are loads and loads and loads and loads of text. And so you can obviously choose. And we were looking at the bold tag and you could see the different head attacks. I could choose that just like that. So that's another way of doing it. And it would choose attack for you so that we've got, like, a ahead of foreign. Save that. Go back, have a look, and we've got hit 1/4. Okay, so hopefully you've learned a lot about tags in the body and where you put all of this kind of stuff and go explore. Track yourself. Try. Go through. It's a lot of attacks. Your notice. Many of them won't do anything unless you do something very Pacific. So you can try these tax H one B visa or directly changed text. They they make your website different. So good. Play around, have some fun. Yeah, and also miss up. This is how you're gonna learn. We encourage we encourage making mistakes when you're doing stuff because, you know, we all make mistakes and it's OK. So, I mean, maybe you're you're looking todo a bald tag or something, and you and you do that and you say Okay, this is gonna be bold and you save and it's so exciting because that lost things gonna be in bold and you happen to go across and have a look and it is involved. But not for the reason that you thought because if you look carefully. You haven't closed the bold tag here. And what's gonna happen is that everything that comes thereafter, this store gonna be involved, even though you think it's finished now. That's why it's very important to see that your tags open and close, and that tag there has not been closed. So that should have closing Ford slash b and clothes. And that is correct. So have fun. Miss around, do your thing. Ultimately, it's all about having fun. Making Mitt takes whatever right? Good yet. 6. Conclusion & Exercise: right. So in this first section, we've bean learning about the basics off this environment we've been learning about sublime text editor. We've learned to that the basics of HTML our radios like a skeleton that helps you build up your website. Were you source code that is made up off one of these things? God, that's it. They're court tags, and every tag has a opening and a closing. You can see the difference because it's got little forward slash To show you the closing, we've looked at how you have a hmm opener in closer. Then you have your hit a section, which is this part which you don't really need to do much about. Besides maybe putting in a title. If you want, indicate your title, then you have your body section that is between body and clothes body. But now it's your turn to have a bit of a try. So you remember. You always say When you go across and have a look, it's your turn to try. So this is what we would like you to do. What I would like you to do is it's but this is aged two is what what What do you think? If you consider actually think the what should be. Cheers. Oh, Ella is a great who The igniter is what? That taggers. What do you think the l A tag does, right? So what? I would like you did it. And just You know, I think this is a great little thing, because you when you see the Allied tag and you try it, you will figure it out. It's quite cool. We're not gonna tell you. It's time for you to learn by trying for yourself. So what I want you to do is very simple. Very simple. It's the ally tag. You want to find out what it does. So you've heard of Google. Excellent. What we'd like you to do, I'm going to do it is what is the L A high tag HTML cat Want you to go and google it, read about it. So you get a bit of an understanding, because is some fun things that you can do with their that you might not understand if you just do it straight away. And then once you've done that, give it a try. We'd like you to add an ally tag to your website, so I got it. What do you think The L? A tag does go to Google, do a little Google search of it, see what it comes up with. Read that so that you are being active in your learning on. Then when you've done that Ah ha! Go back and put it in Tron l attack. But read it first so you can see what it does. So you can see how you can change it from a straightforward ally tech by doing a little something to make it into something slightly different. But you have to go and find it out for yourself. So that your task for this first thing to let you play a little bit, get used to the environment and put in some h one some h twos and bold if you like, and play a little bit of the L attack as well. So you find Golan make mistakes. But that's how you gonna learn. And we have you got any questions? If you don't understand anything, feel free to pop a comment in the comment section. And we will do our best to help you, sir God and have some fun. Do the learning journey 7. Paragraphs and breaks: Welcome to part two off National course, zero with Craig. Josh. So, Josh. Well, what's the plan for this part of the course, What we're gonna be looking at. Okay, So in this one, we're gonna be looking at how to make a sentence of paragraph and basically how, like we can make it nice and neat, then lack whatever. We'll take some quote now and we're just going to see how it's gonna look with black. We're gonna use some more explosive more tags and see it. So we saw earlier that you can't just lump staff in and hope that it's a lot going to work out. You have to really use the HTML tags if you want things to happen. So we're gonna be working in our little scratch pad. What if you called it recorded our website, and I think that deer is We've got some cool quotes about education. We'd like to create little web page that has quotes about taco educationist. So how do we start to remember? We're in sublime ticks. What do we do to start hit the H? This is an html page and you don't hit. You don't get age Okay, So you got a top in the full way? Yeah, well, I was just enthusiastic. Html. Okay. And then tab there we have it. I can't. So you can't be taking a lazy just hit eight html and you've got the basics. And you ready to rock, sir? What happens under title s. So what are we doing? What a website's gonna be. This is gonna be education. Quite. It seems like a reasonably Okay, so now we're gonna wonder, are way down into the body. Right? So I want to put some cards and Yeah, we've got some. Can you believe it? We've got them just waiting for us. Here, there. We got three really cool quotes. Hey, has a nice one by Alfred l. But we going to use that one now if we just pop it in like that, that is not going to be good. You know, that's not gonna work out. Well, in fact, we can save it at the moment. It will look like it's OK, but there is no formatting. When we try and stick another one in, it's going to turn out to be bad. No trust. Stick another one and your CIA. That's not gonna work out. Okay, let's grab our second cool quote this one by our friend Nelson way. Want one in each line? I mean, it is important to try and keep things vaguely, Nita, because it just shows you what's going on your notes of actually tabbed in so I can see what's between my opening body tag and the closing. Well, that's gonna be cool. Save it, Run across, hit it. And no bad. Ugly. So in one line, Why? Because Crume bras is interpreting the HTML Farsi. HTML says this is ALS. Just one long sentence. So we go to use our tax and what are we doing here? These are the paragraph paragraph. Okay, so we've got this special tag record the p tag, which is so you pee and then we got a Yeah. So now what? The paragraph. Basically everything that inside this, like all of the words and stuff, they will stay together in a sentence. So nothing finger in between, like random words that are could randomly appear in between. So everything that's in the paragraph stays together very neatly. Eso way gonna move that closing paragraph tag to be on the other side. All that Albert Einstein quote, and that's all going to be as one. So we've been want to do that again because we've got a sick and quite there's a P and we hit Tab and we take the closing tag, which is four slash p four paragraph pasted on the end. So now we've got two of them. If we now refresh, there we go. That looks much nicer. I think we have 1/3 1 We also stick of food one and saying we're about it because there's another really cool quote here is one from Benny Benny Frank. He has got a really nice quote, which I particularly enjoyed because it's all about Tell me and I forget Teach me, remember involvement. I learn that's what we trying to do in this course we want involve you. So what I'm gonna do is I'm hit P tab and I'm in a paste and there it is in between. So we've now got three cool quotes and if we do refresh there we go there. Education is what remains after one has forgotten what one has learned at school, said the famous other Einstein and I'll hand over to Joshua, who is not going to say the second quote in the voice off Nelson Mandela. You know, cash is the most powerful weapon, which you can yours to change the world. I don't think that was a very good what did you better tell me on I forget? Teach me. And I remember involve me. And I learned I think it would be a bit more German education Are is what remains after what one has for courting and what one has downed in U. S. Crude. Huh? Ok, ok, so we're not doing any voice as to think that I just want to see with the crisis. So they worked that well, Looks very neat over there. And or if you have explodes, more attacks. You know, there is this BR because what would be cool, Josh, I think because at the moment, if you just go back here like Benji's one here, tell me and I forget Teach me and I remember they would be cool of those little on separate lines. May be thinking pr is gonna be the one So So what wanted Indian See this? Quite a few So couldn't we just tell you what about just making what did we just do that? And we just hit Enter between them like that and that's quite cool. And then we just stick their on. Then it looks just like that. How about that? All right. Yeah, that's cool. I can't. Okay, so be I've saved it. We go across and nothing 70 watch. Okay? Said, with if we want to put them on different lines, you've got this special tag. Could be Ossa, which stands for break. It's it's a line break. So now we've got a little br tag there. We'll put another one there. So at the end of these lines, we wanted to be a break every time you put a br s. So what? So what I do suggest is showed how you'd like it to look, so I made it look that each one was on its own line. But you've got to use the BR there we have it. Now you've got a line break. Tell me I forget br break Teach men. I remember BR and involved in a letter b r. And so it is now being formatted like we want it. So it's a simple It is about using the tanks. We've looked at two tags here. Yeah, so we've got the B r p, and obviously we've got our skin. So here we've got it all sitting in the skeleton. You now have managed to create a nice industrial thing off quotes. So even without the spaces, we can obviously put these be ours on these other ones. Just because if you had a CIA quote, you don't only see it on one man, you'd see it like this, especially if you want to make you a little quite slick NASA. You can, you know, break it. And also what noticed we've actually used. Although this is a paragraph is Justice said earlier, it is the opening part of the paragraph and the closing part. You can have be ours. Break tags in between. So that will apply to that paragraph. So here we've got it. One paragraph. You want to really make it clear you can do that, But again, this will do nothing to the formatting. It just might help your readability of your code. It's important trying. Keep your code readable using dense. If you're gonna have a paragraph put it So it's easy to see. Make it so it's readable to you. That won't impact is you know what impact the final pop. At least you can see what's going us exactly. Like if we had to go lucky a most powerful weapon and we had to put a b are randomly be on weak. Do that. See, we don't really know how this is going to not put another be all here. Now, when we saved this week, we don't really know is gonna turn out. We'd have to refresh this. So now we can only see then. So it rather than doing that as you do, you know, Spaces, you go here, you know, we can see rock AEA. How are sentence is gonna look So it's gonna be something like that. Yes. Obviously they were gonna be hooked. Eight. Yeah. Just makes now when I'm looking for my car, it'll be like, Okay, this is where I put my beer. That's where I put my baby are so there's a good idea. So we'll be saying is the tag that you're using here is going to impact? Our finally appears, but try and laid out how you wanted to appear. And then you can see you've got where your tags are so we could see paragraph taken, see how to break. Takes is you'll see it doesn't really matter where you put the brake tag at the end of the beginning. It's just a tag. When he hits, it is going to do a break there, so it's not too important you'll see in that 1st 1 We've got the break tags looking like that. The start of the line makes no difference. Just means before they got the word which and Nelson is going to be a break and that's gonna be on the next life. So there's some just basics around, sitting up a little sought. So we've now set up a fund little website with some quotes in it. Too easy. Do you think they would be out of figure out how to put a heating in there? Yeah, I think so. You think so? Are reckoned you could our recon You guys, What about hating? We just want to hitting at the top pr their tears. Amazing education. Crites How are we going to do that? Come on. Give it some thought. You give us a but we're not going to tell you you if you can't remember, go back to their previous section. We want to put a hitting in here. How would you do it? Right? Go for it. Have some fun. 8. Styling and lists: e education is water. Indians after one has forgotten what one has dead in scored. Uh, okay, Good. Right. So what we've done so far we've been putting together that fast. A little interesting site with some education quotes, but I reckon we could make us better. What do you think? Needing here? Some formatting. Yeah, I think we need a change it up a bit just to make them milk quotes. Not just like, Yeah, it's a bit boring there. So maybe that's considered what it would be like, Sort of on this part. Here. Are you know, the actual quote. If we put that in italics, could we do that? Let's get the courts in our telex. Okay. So to make Tallix or we're gonna do is make sure you put a space, and then we put our I and then tab, You'll see. I therefore Ari telex? Yeah, that's pretty easy if italics Okay, so let's put the whole thing. This has put the quote in italics, and I think we should, uh, see how that looks. Yeah, like that. They are very good. El Spot Auto about me. I'm the assumed in Mandela also want tohave zik, Telex for my cut. I want to see how your chance. Yeah, but what about me? I'm Benjamin Franklin are also what I tell it for my court. Yes. If he could put Kim on, man, get on with it. Way all wanna have italics? Rat quotes? No get Come on, X R, Benjamin. Don't know. Not now. We can all sit with us when we haven't got any break so we can look what remains off. The doctor Put a brake. Yeah, that is good. I like to have a break sometimes. Yes. Put another report. Another director. You are a good save this, right. Okay, I said look better or bedroom. Franklin. His name is in italics. Okay, So you can see how important it is Also trying to see where your tags are going on. But obviously, it's not that difficult to quickly cr right. So now we've got just the quotes. Let's put Albert Einstein's name on the next line. You see, at the moment his name's on the same line. So what do we need? Their We need a another hit enters it goes on to the next time so you can see that it's gonna go and then put the br So now we should be looking pretty hot and cool. Here we go. OK, that's doing cook, But I've got another idea. Do you want now? It is you. Do you Are you saying that like, absolutely fascinated about my other idea? What I'm gonna my dear, these are not too good ideas. My 1st 1 is Let's put some things in bold as well. Maybe the names and bowls. Let's go the name because it's a complete, upstanding officers store We're getting a little lost Their OK, so we're going to use italics and bold and breaks And you see, all these will start to stack up So we've got this low sixties Just be so it's the be tag. So some of the tags are really obvious. You know, I for italics be for Bolt again Opening bold where you wanted to go ending bowl tag that all this time noticed that the p the paragraph tag is what encapsulating the entire paragraph. So we said it at the start that the paragraph is Theo entire piece. So within it you can have breaks. You can have bolds, italics and many others. So we're not gonna bold each old out gentlemen's names. Be prepared to be bold. Okay? Yeah, Save it. Refresh. And I notice their way. Tweet. It can hold whenever we want, but but but But I reckon where you could over and go one better land this hails at I'll tell you what I've got some cool quartz on quotes. I've got some cool. We've got quite a written upgrades have movies. I mean, if I had to ask, you just share, you know, if I'd ask you what would you say is your best movie? That's about education, learning and that sort of thing. This movies? Yeah, Just give me 11 Okay. So many meetings. So many Ready. They are quite a few phony. Haven't seen freedom. Rat is on. That's accords. Let's say what we want to now do is we want toe put a list off education movie. So we're going to say I would maybe I talked, you know, have you spell it education movies right now we could do the whole bold thing in everything , but that's not gonna So what do you that way looked at? Here is earlier H two is I hit a top eso here. We're going to use a second level here, so it's not too dramatically big. Uh, Zago A look at how what that's looking like there. Okay, that's not too bad. What we could do is just to show that we actually remember the fact that Line 19 has got nothing on it. Doesn't mean that line nineties were nothing on it. We could put a break there if we wanted, which would just give us a little bit of a space between, you know, every day I see that's moved down one. Which was that? What was that one you were saying? Freedom. Freedom? Rata. So now if I just put it like that, what's gonna happen? It's probably not gonna turn out so well, is it? No. OK, it's there. But that that's not good. We we sort of water like, let's think of some other movies and it's put its get maybe a top three. How about, uh, top three. You guys out there you're watching, uh, anywhere your top three education movies. What's that, sir? Sorry, sir. What life? Uh, sorry. I know he was like to, sir, with love you That that's a great one. Okay, so, uh too, sir, with love? Yes. To say with love writes, a beautiful friendship is not at your French movie. Mom, are Marta pregnant? You wanted on This is the movie that rocked the world. This is the movie besides education. Because this one is typical God. Half a day am you recognize it? The famous line car payday. And from the movie did Poets Society. Oh, yes, That was a famous Robin Williams movie. Dead Poets Society. Right, Fantastic. Okay, so those are hard. That's where he's, like, this famous scene. And he's looking at this photograph on the wall in the from, like, 200 years ago. Hundreds along the kids are dead, obviously, and they lean closer. Lean closer is the orleon closely, guys, they turn around and look at the teacher. Think he's mad? But what is carpet day means? Seize the moment, gentlemen. Those people are pushing up the daisies. You stored life ahead of you can make a difference being sidetracked. Yeah, but here we go. OK, they're ugly. Joshua, what's going on? What's going on? Obviously, I haven't got put any tags and so we could you We could use breaks and stuff that we actually want them is like, little little bullet points Don't way. Yeah. Okay, so So we don't really talk. You are still to look on what? This list all list. How? What I'll ask you. Did it Did you do that? You know, he said going Look at what L I is It's a list. Did you got? Did you do it? Hype? You did? Because here, we're gonna use the l attack. Yeah. What is this about? Just one of the three hoping is gonna happen. How about self will? Just It's just basically a list element. So if you have something in our are, it's gonna be back, OK? That's an element off a certain type of list E three in this lesser, we go across and have a little look. Okay. I think I like a little bulleted point list. Yeah, so we know that there or part of some sort of less it's not specific list. That's why you see now we've only got just the us. What you mean to really do is put our which means ordered live when I know what list Yeah. Yeah. So what we meant to really do is put you house, which means a non ordered less, which is our bullet points. And this is going Teoh. This means that all of these words rock, Yeah, I mean to be together. These are all part of a non ordered lists. So it's like without paragraph opening and closing for a paragraph, that is, that's the started. That's the end. The same thing applies here with an unwanted less than UL. There's the starting his in. It means that all of these belong to that one. A Nord less so there. Two parts to this ally is each item in the list. You else isn't an ordered list. So go and have a little squares you will Now see, it knows that these all hang together. They get just a digital property because its nose this is a list. But you know what? To me, Some of those there's our top three education movies, but they're not just points I actually wanted say, Actually, Marv, you on. This is my I don't know which is your favorite, but doesn't really matter, because I am gonna be the one topping now, and I think that is the best. But I don't want it just to appear at the top. I wanted to be 123 So what's the deal with that? You are annoyed list. If we just making oh, ordered less, You know, simple is that it's gonna be an ordered list now, So So changed u l t l I know what it list to quit list. And dang that port society Double one rock here and there. We have it out talk. Three education movies paid. Yeah. So we've got in us a nice listening, but they have pretty much a list. That was after a pretty cool. Yeah, so we can You can see it is very small compared to that phone. So obviously, if you want, we could change all of the sizes. I'll let you do that. You could look through all of the headers that eight threes, Trauma Godbold just to get it in ass and exactly how you want it. Right? So they have done some really cool things in looking at. Our coding were getting quite involved in developed. Now you can see we're using multiple types of tags and it's over to you to have a little trial. Why don't you try and see if you can see that by a fun little site, a little page like that with something that's important to you? Maybe education quotes or recipe quotes or movie quotes or life quotes, whatever you like over the year. 9. Tables - The secret behind HTML layout: right. So you are rocking as a HTML code At what do you think they're like ninjas yet? They like they like micro ninjas like Neil near ninjas. But now I'm looking at this. It's looking girls that can go. But what do you think, Josh? Who needs needs? Styling needs more. Yeah. So you know what would be called? It's We got this, like, big, huge Looks back there is a like a polar bear lost in a snowstorm. Here, there's a whole polar bear lost in the snow Storm. Thing ever going on here is will be cooler. Maybe of these, we're like that one. Then one next to the one next. It? Yeah, so their little quiets in a block like that. But now we go back. Yeah, Mike stands. I guess you've got paragraphs. We've got the p and the P, but I mean, how we gonna get it so that it goes signed by side. We need something else. Something that will allow us to put the three knicks to each other. Well looking far tables, baby. Another road code on the table table. She would details It's two. In the tables were deuce tables How do you detect table is very simple, just like we did with the lists. As you know we've got, we have our we have put all our lists and then we do not know what they was. Do the same. So it's like a composite thing ordered list had ordered lists, and our allies got multiple parts to it. This is going to tell what everything that's in the tables about the opening tag in the presence of tables End E. I guess we're gonna put it there. So again, what I find, as I said before is it's quite handy if you just use a bit of tabbing just so you can see exactly what's going on. It will help you keep track, because otherwise what can happen is your HTML gets bigger and bigger. You can start to get a little bit confused as to what's going on. And so I just use a bit of tabbing and you can see right now I can quite clearly see Okay, that's all inside my table. So what if the next table element that's not finished, is it okay, we've got a T OSS, which is a try toe torrential got T Oz in New York TDs. So tr is your table row So you've got a whole bunch of rose and then you've got your team arose. So we only need since we have one row table, I'm assuming because there would be in one sort of collar sit in the second column. So it's a one row table, but with multiple columns in that time. Yeah, so we put a t are in the beginning, and then we take disrupt? Yeah, and we'll put this at the end. So this is because we've only got one raw earth. That's why we're putting at the very end. So back here, we, But that right there. So now And I wonder Oh, we're gonna so again now what we're gonna do a quick d. I just gonna love living in denting here so we can keep track. So essentially, what we've got is a table, and this table has got one row. Now you could put in more eyes, didn't we'll look at a later stage? But it would be just a simple that is putting another tr, and you would have another but we don't need it at the moment We're just gonna dio one row table. Yeah. So now, todo tonight we need each of those is a column in the table. So we've got a t t data inside. Our TD's basically stands for your table data, so each element that's going to be in the road is a TD. So we've got three quotes. So each of these the 1st 1 from Albert is a TD, and you'll see it's got an opening tee tee tee tee on. This was nursing Mandela educational used. I mean, I'm betting you want todo shot is, uh, Benjamin Franklin. And he wants his own Tedy years where you've got a tr it and that's not right. All that snow right for me. I'm Benji. Why don't I get old TD? Okay. I need to get TD on a bench. He's gonna get his own Tedy their egos. And right there we got it. Everyone's got a TV rocking, baby rockin. It's looking like we're covering much more screen and we're not wasting so much. Not so tables are are a secret element that are used not like you would expect. You know, you normally expect article, have tables are going to see lines and and you can do that. You can create tables that have got a little, you know, outlines, etcetera. But tables are actually more often used as a layout element because they let you put things side by side as well. Look at now. Next, listen, maybe, for example, it would be cool to have something just above a hitting or an image above those or whatever . So tables all the secret. I'm telling you this because this is just between you guys in us tables, day bows, tables, they all the secret styling thing that not many people know about. So that's how you can arrange stuff. So what do you think, Josh? It's looking good that we know. Seven space Christine. We've got more options with tables. You can do this research we can put in columns, which met basically space out your tables. But for now, this is looking fun. Black. I see that's getting more nitty gritty with that tables, so I think our tables are looking cool, looking pretty good. That's table is a really important thing when you're making with eso next season because you're gonna want to take this next? Listen, we're gonna take the table extendable but mawr, we're gonna add another row, and then we're gonna put in something really special. But you only qualified to do that if you got to try it for yourself. So come on, get out there and create for yourself a little table, mess around with it, see how it works. So very simple. Must have an opening table tag, closing table tag. And how many rows do you want? Well, starting with one roping tag closing and then for each element in it, you have a opening TD on a closing for table data symbols that go out and have some fan. 10. Adding Images: Welcome back. Our website is coming on looking super cool, but we could make it a better. We can't. Yes, you reckon You convinced. Just add that that the swatter V Is that what you're gonna say? Ok, well, whatever. But I want to start a little thing. Um, we got these cool things and columns as they look at how those would maybe be a little nicer center that's entering. It is quite anything just to do. For whatever reason, if you want a centerpiece of text or whatever, we're gonna send our stuff that in the columns to remember, we've got our road. And in that row, we've got data items which essentially, I call him. So he has our 1st 1 and that is a paragraph that is made up between the opening and closing P. Now what we can do is use the Santa tag. It's really quite simple. I guess what it is you just talked with center and it's the center tag, and you can in just copy that and put it between out opening and closing piece. So obviously what we got to do is we've got to do that again for each of them were gonna stick car that the center Tagen. So again you could just do center and do it service. We want each of them to be centered. So there's a little cool shortcut that we can look at later That can help you make this a little bit easier the moment we just keep one thing at a time. So center tag opening and closing. Right. So let's have a look and nipping across. Here we go. What should happen? 321 dying. Okay, You still a good idea? They have now been centered in each of those columns, right? So that's it's not bad. Not bad, Not bad. But you don't want to give them eyes is a beautiful, But you know what would make it more beautiful? Yeah, like Z is like this. You tube. You know, this is cool. What you think? Yeah. You've got your text in above it. We've got So you got, like, a thief. The text below an image. So if we go ahead like a design like that's ah, we had our text means maybe universism with boring of the money needs it. The sweater v he is this water V from the sweat of e. Is that it that way? I don't know. Whatever. You know, it just need to look like that. That what you were looking for A way needed, like image. If that Mrs Boring, it's just tick. So what would be cool? Josh is if we had, like, a picture off her bare arms. Don Nelson Mandela effective in Yeah. Gentleman Franklin above each of these sort are reckoned we could make that rock. So what I'm going to go way could have to find those images. Okay, so that's the first thing we're gonna do it. So let's go and hit across Teoh, Uh, Joffre in Google. We got specifically go to Google images search because that's just like the easiest place to go and look for images. Um, And who was our first family that we had over there? Albert World. So we want to get any major, all the elephant. What would you can do? It is a little tippy up rather than getting a huge, gigantic image that you is gonna take a long time to load on your side and cause all sort of issues you can control multiple items. Yes, when you've clicked tools, you'll see it do as it'll drop down and give you some options, and you can choose any size large medium. You can even choose in icon size, which is obviously going to be a nice and small. So let's go for that rat. Let's see, has an interesting picture off our air. Bruce Gerald, your liking with these little tongue sticking out hair, right. So when you found images you like, What you need to do is you need to get the image address where this images Stoerner because he right, click and you choose copy. Imagine your dress you dress get so we're gonna need that address because that is where the images hosted your It has to be store toasted somewhere. It's very important, so either you need to upload your image to a place where you can host it. So, for example, you could host it in Google. Drive dropbox wherever you like, if you're paying for some hosting, but ultimately it needs to be out of put pointed now. You could hosted locally on your own website, but then it would only work on your computer. But once you've published to the Web. People can access your where your your local hard drive so it needs to be hosted online. So anyway, we just using these words, we just pointing to this image that distort on someone's website. And we're going to nip across yet? No, what we need to do, Josh, is what way to put another road. So we put a robe of it. How many rows with at the moment 11 row. You can see it starting there. So we're gonna put in another Yeah, TR. Okay, so be ready to put in another Roy. They have my communal spaces. So what we now need to what comes next? We're gonna put on a T. D's. Okay, So we're gonna put in our TD's, which is going to be outdated so we can essentially end up with three of these. So we're gonna have one of these four that is gonna occur above each off the rose below. So they will be one for each one. So care we set that up. So now we've got blank. If we look at it at this stage and save that is going to look amazing, it's gonna like like nothing you might notice. Just jumped down a little bit because he is actually Blake grow sitting there, but nothing in it. Right? So what's next? How do we insert an image? That's what I want. So now with the image this is we would get Teoh what most websites have. Obliterate emerges and it's actually fairly easy. So if we just happen MGI Andi had Tad, this is gonna order full. You always have to hit the tap A Z. You can see if we do this, you can see the suggestions. I'm Jeanne. Hit it. Yeah, it's gonna have that so easier to do. Just go. I'm g the tab and you see it or riffles. SRC equals and it's got this little bracket because that's waiting for something. Now SRC is the source that is, once you know, where is the image store? That's what I was saying a moment ago. You have to inform it as to where the image stored it has to be stored somewhere now obviously is going to be an online web page. The image has to be stored online. So the moment the ones we are grabbing are stored online on someone science. So it's basically gonna put that in there? Yes. And now off with paste. See, it's This is the link to the image because that's linked to someone's website. Where that images. And there we go. There. Is Albert our tongue out. Just a point. Be very careful is the source has to point to an image, not to another HTML page or something. Notice that the India this needs to be an image J p a a PNG, some sort of image file. Because if you don't do it right, you're not gonna get the image. So, in fact, if we go across who we got next, Nelson, let's go and find Nelson. Now. Some are you, right? So we still searching on icon silence. Which one to be right now That's on this one. You can use that one now get now. What's closely foster the I am doing a right click. No, what we're doing here is I'm not copping a link address. That is different. I'm copying the image address because a link address. Let me just show you. If I copy that and this copy and pasted so you can see What it looks like is a long thing that looks like that there is no dot PNG not know dot j pig. Okay, we're not doing that. We are copping and image address, so I actually want the exact address with the images noticed. There it issue. See, it finishes with a J. Peck. So that's what we want. The image address. So, Josh, what are we gonna do in their G tab? Onda paste? Right. So that's a 2nd 1 And then we got it. One more. How you gonna find old, old Benji and German There are you food. See, it's one looks, or as you'll see Osama side did. Because we have chosen a Pacific icon size. All of them will be to 56 to 56. So you're noticed now, just save this. Save a copy of the Juris. Um, we say that we put it in here. Stick humanistic Benji, Benji, go there And Benji's in. Now you notice when we refresh a tab, you see, they're all the same size as if if we didn't have them, that they wouldn't be the same. Yeah, so I mean, that could make it look a little bit ugly. So it's just a series. You know, we specifically chose icon sizes, which made it nice. Yeah, let me just show you. If I had to just go say large, this is going to find some other size for good old Benji on. There's been G over there. Now you see, that's way bigger. That's 2744 by 189 Now I actually wouldn't want an image that big. It's gonna really make things that's a slightly smaller one. But now that the sides of size what's gonna happen is if I had to take that image address and put that in and it's replace what we've got your for for Benji with the new one. We're gonna replace that little, but take that out and paste the new one in. Take a look at what happens. How beautiful is this gonna be? Our beautiful There's going to be or not. Casey, what's happened? That one is really big. Taking a long time even to load. It doesn't look nice. It's not the same size. So let's come on, Sit that before way. Have another option. Other option. You want this image, but like that's to back. It's nice and black because you might not always get the images executive same size. Yeah, so we just go so you can actually specify the width of your image. So it's going to scale your image to a certain which they say, what equals then in inverted commas. Yeah, and will say to 66. I think those that's what the other ones were. So let's check out. Go back to work with us Ben J. Working Benji working very still, very large to load, but so he is that he's the right with style. But obviously the hot would be different because it's every square. If we had to sit the heart as well, you'd be very squished. You have a long Benji, but you can see it's got the same dimensions. So that is looking pretty cool so you can alter and play with the with items off things so you can end it to the end and alter the width of any of these manually and obviously need to fiddle with the height etcetera. So ideally, if you try to make it all look the same, you're going to have to try and find images the same. Or obviously you could download the images and crop them yourself. So there we've got three of them we've got It's not looking to add. We got our over to Nelson Onda. Benjamin. So what we've done, Unbeknownst to people, we've got three to rose to to get with the three columns controlling this. And we've got every just nothing is looking pretty good. Yeah, I mean, the story begin to look like a website. Yeah, I think that's actually looking like we have got a quote. What about people? I know what we need. Just one last thing that we see A hater at the top. What say you say? So what will be used? We use the H one h one hitter. Uh, we could say something about quote it. You guys shouldn't Crites the integration quotes that rock my weld. Okay, you say that. So we say that and he every guy education, crystal, rock my world. Now again, they have been just a little bit slower in coming up. The reason Benji slow in coming up is what it was just really large. Yeah, That's also the problem with having choosing a very large. Yeah. I'm not happy with Benji. I'm going back and changing Benji to a different type. I'm going say, Benji, I lie like those. Well, you can't actually even say exactly. That's the other option. You could choose a image that is a specific size. Uh, you know, But, uh, I was happy without Benji, who was specifically he was a nice size being Didn't get too carried away. So I mean, it looks pretty miserable there, but anyway, let's keep him here. Isn't asked to 56 wide copy image address. You can keep the size. And if you like, it is to 66. Probably gonna stretch him slightly, but it's sticking one over there. Put that one nothing. That's gonna be better. And we can see how we're looking and rocking our will. Yeah, look better there. We got Benji. Benji. Fantastic. So there we have it. We can alter the size of this week and also the size of all of them. If he wanted them all slightly smaller, it would be as easy as possible is an easy way. If we were saying we decided we wanted all of these slap Despont, adjust we said we want him that will, like 2 20 And we wanted post pace that to 20 like in all of them, you know, because we want to repeat it. So I want, you know, whatever with 2 20 Copy paste. Easy way to repeat It is. Well, let's just say again. We haven't got any of that with starting like that again. So we hold on, come on, United's there. Okay, so we have you just hold on command, then you see to curse. So if you just keep clicking with while you hold him on while you click, you must be holding down. Come on. Wait. Another three. Fashion curses. Yeah. So now if we tap in, we say What? That's right. Close. And then we can say 200. 200. Whatever. We save that. And no wonder. Refresh. You see? God want. That's fantastic. So there was a very cool little technique. So if you want to have something done in multiple places, you can have three things. You just hold on. Come on and click in all the places that you want it to happen. Right? So there we go. This story You should look pretty impressive. We gotta cool website coming on now. We've got hit a tags. We've got tables and then the before images You've got formatting. You've got lists. You've got fantastic things happening so well done at the stage. You know what? I think these people deserve a break. Go out and get have a cup of coffee. Go for a run. I think we need to have her right like that. I was going for a run. You gotta have a couple couple. I'll see you back on the other side. 11. Behind the scenes - Page source: right. We rocking it here as the thing says, education quotes that rocked my world. So by now you're at the end of our section on. Hopefully you figured out some of the basics. What want to do in this concluding thing is show you something really cool and give you a challenge. Just you. Are they up to it? Yeah. Okay. He's got confidence in your I'm not too sure. So let's see what you can do. So first, you we just want to show you something really cool. As you already know, your site is this HTM or code basically is interpreted by chrome or your browser and it shows you the page. Now what you can do is you can go and view the source code to any page. Doesn't matter what time it will use this formula simply by right clicking and down the bottom here and chrome you will see few page source never using another browser. Invariably, it it's going to be in one of the options where you can view, for example, you get to the same things under view developer here. So depending what browser using, there'll be somewhere where you can view the page source. So I'm right clicking and I can click view the paid source. And here we go. We're going to see what exists inside that code. There we go. So that's our code. That's exactly what we wrote. It looks exactly the same as we had before. That's the actual code we were developing and in sublime. And here it is. So it's basically taking this code and interpreting it as that web page. So all of our Kurds are links everything here now that used to look like craziness. Tea before it now makes it makes sense, baby. So what else we got to just Okay, so another option. Chrome, You have this inspect So that basically brings you to this way. So you see, if we go here, that's the My body has a body margin. All of that kind of stuff rather than that you can select like a Pacific things. So let's say if we selected this, you can inspect that and say What? What? What? That was made up off? Yeah. So now you see it? Yeah. Okay. This is made in b tech. And an interesting thing is you can actually change this. So we go, Let's make it a you tack you if we change like that. Now you see, I changed it from bulge on the line. Okay, so it's obviously just changing it in terms of a display, but it's showing you so you can immediately jump to a piece or something. And so where is the HTML code for this particular piece? What's it look like? And even change it? Yeah, So you can see. Obviously, this is not gonna fix the with that to any at one house. It's just fear merely a way in which you can actually look at what's going on. Yeah, you refresh. This is gonna be gone. So you couldn't make that change to your original source card again. So that's it's a very interesting thing that you can above a little cool thing you can do with right, So there we have it. That's very cool. That's our site. And if you want to close that, you're going to go back to how itwas originally nothing has changed. So you've learned some cool and rocking things. You guys Rick in your apt it Rick in Europe, Teoh putting some code like this together. Okay, Right. So here is the thing. If you haven't already, Jansa, your assignment is to create a rocking site like you've got you with a couple of images below that, using a table, some text making use of a combination off H one h two. And what if he does you like? And some of the formatting and something that looks formatted like this is very important that you do this because we're going to be bringing this all too. Given our next section, we're began to try and build something which is a multi page, citing. We want you to be sure that you know how to do this. Put it together. And as an added little challenge, see if you can figure out how you can adjust the wits off these columns. Remember this a table? This is a road. And we got our table data sitting in each of the rose, as we have here My various table data. You see a way you could use with anyone at any clues that we can spread out thes. You gotta find a tag or it's on a tag. It's and actually an addition to the TD tag that can Well, it works with the TV tag and RTR tags that can adjust the wits. It's not gonna be too hard to figure out what the with the and the column with and the whole of those that you can figure it out, see if you can figure it out, set up something similar to this and see if you can even fiddle with the with a little bit , right so that your challenge, I reckon, erupted. And that's what I would leave you with on from here on out. We're gonna pick up the pace and do something super exciting in the next section as we pull it all together. 12. Choosing a website and theme: welcome to our next section. By now, you should be well versed. Your brain should be in gear and hopefully your fingers are loose and dextrous because you've been trying along the HTML coding that we've been learning. So we now want to take your skills and see if you can put them all together into something cool and fun. So we've really built our website, which is our fun little thing about education quotes that rocked my well. But it's time to now take this all together and try something different. So you know what I was thinking? You. How do you know what I was thinking? Google. Nars. Google just gives you that feeling sometimes. You know, I have cake. So I came across something. What? Did you come across this? Uh, what saving came across it, this sort of thing, What we got you. What's going to say? This is basically a Web sought of a whole bunch of recipes and you can go on and be like Ohana made this truck Cakes lack out chocolate cake. If we go here, we have seen they got, um, image. Yeah, that looks good with this cake. And until these people that cake too much on, then it's got some information on the side instructions. Okay, so it's basically a really be simple site. It's got a lot of images. Onda. Obviously, the layout. You can decide anyone, but basically, I'm looking at this part. He has got a whole lot of little images in each. One of them is a cake that you can click on, and it's going to show you something. Okay, so we'll just focus on trying to make one of these little tab things here. Yeah, but once you've done one, I mean, it's basically the same thing. I the same thing. So then obviously, like, you know, with we did without quotes. We've got, like, all those little images so you can see with this instead of having a quote, they got word of a chocolate cake and they've got all in the table. You know how he said Table table, Table Rover. Yeah. So it's basically is a table just like we've done. So let's see if we can set up something like there's something delicious. Something super sweet on make our own cake website. Yeah, sounds good. Okay, so that's what I plan. Our plan is for the section. I'm sorry about this. If you feeling hungry, this is your time. I go out and get yourself a cake and stuff it down your throat Because this is gonna be hard, really hard because we're gonna be making your delicious cake website. So get ready. Prepare yourself mentally, physically, emotionally on everything else as we get ready for a tasty cake experience online. 13. Creating a logo: It's looking Barron, but no fear. It's looking barren. Looks like there's nothing there, because actually, there is nothing here. Everyone end up something like Lance. I guess he's got involved Website in the sense that it does have other aspects, like emails in his name. But the basics of it are actually quite simple, And that's what we're going to focus on in this introductory course in HTML. So the basics are up here. We've got sort of some sort of hitter, and then if you look here, we do have some sort of table with images in it. So just what I'm gonna do to begin with, because this is this doesn't reckon h one e c. If we go over it with C, you are. You can haul out there. So that's actually text. But that this year is not checks and this image on if you enter, inspect your quickly discovered not text. So they've obviously credit. They got a little Loga, so that's what we want to do. We want to go and create a logo that we're gonna put at the top and then put a table for some images. So it's just get going with the basics Get First of all, we want to save. I think there's an HTML we live in a new tab going Come on in. Come on. Yeah. So we now come on. It s so we're gonna call the best cake sot. Remember, we need to put the dot humo during forget. Don't forget the daughter aged email. L m l m l got it. Now the knows it knows that this is gonna be a CCS or something else. Crazy, Right? So what do we do next? Do you remember H t m l tab and Bay that we got like magic? It'll appears. So it's really saying what? To talk to the site of thing. We should put it in here the best. So that's going to appear at the top, remember? Based cakes art. Right? So that's that's pretty simple. So at the moment, that's nothing too big a deal. But what we're gonna want to do when you come to the Logan, maybe we'll come back to that this just quickly. Sit up the structure for a table that's gonna put in the have the pictures. So that's gonna go If we look at this. Obviously don't have to copy it. Particularly west corner step. They've got three by three, and we'll just do, like 123 dances. Non. All together. We can make as many as you want to do that. We start with a table tag. Yeah, and then inside we've got You got three sets of tea, OSCE. We gotta make Rose. Okay, so we've got our rose, and so there's gonna be one, and you can keep you. Will this make out three. Rose quickly. Not your table on another army. Right. So three rows. And then within each road, we've got three TDs, which is table, which is basically a column. So there's gonna be three columns with any dry are kind to easy. So there's another column, and there's another column. So basically, we could just copy that. We're going to stick it inside each of our rose. Too easy. Okay, so we'll pop that in there, and we need one mawr just over here. And life is going to be just perfect. Perfect. We'll sit up. What we've got is our table going to see starting over the ending there and regard Row one road Teoh and Rose three within you, troll, You're gonna have three columns. That's easy. Three by three. So that's savers. Should we can have a look at it. There's not gonna be too much to see, But let's just get the open into our browser. Best cake sight. There is absolutely nothing. There s obviously you can see the table. You All you can see is we've given in the name. If you remember, we could go and view the pain source and then you will see there is everything. But there's nothing in the columns and in the Rose said nothing at the moment. But that's cool. We've got the basics of what we want, right? So let's, um we quit. Use h one you remember that way. Could just put as part of the body just to give you a little taste of what they would taste . Ah, that's amazing. Uh, we could have done Durst into the best cake side, which is, you know, it's not bad. I wouldn't call it the bass kicks. Yeah, that's not gonna be the best cakes up, but they ever got the best case. You know that? That's I mean, that's okay. But I mean, like, these is cooler over here, you know, they've got, like, a It looks like it. What would you say that they like? Should be You know what? How did you put that? It's got that. Just Yeah. Yeah, that's experiment. I love it. So what we gotta do is we got it. You you won't have your own loan. You can and wears a quickly show you. This is extract no extra cost for There's nothing. You can make your own lager. I mean, you really don't have to go and get some expensive person. There's lots of ways of doing this. We're gonna quickly show you how old and having the best cakes that you can create your own Loga. So he has just one website. You literally could do this in plate. You could use power point to make your life. You want your life, the bottom lines, you've got enough with an image. And so we're just gonna quickly show you freeloader designed or how you could do it quickly . Hear things. So, yeah, I've been a great logo way out for our kick site, so we just go on and kick clicked, Create logo on free logo design dot or and just thinks for a while, as all the clever elves who were inside the system are getting together. Okay, so what? I'm gonna pick just one, see its cakey? I don't know what they looked like. Pizza. Irish. I like millions of themes. My, these even food and drink this drink 100 and 69. Food and drink once burger. Like taking shots. That's pretty close already. Okay, so you just click on it and there it brings it through, and we can say easy cakes what we called the best case. Okay, So usually just call ourselves best cakes best. Thanks. Very original. Eso is all it's done. I mean, you can move things around. You can drop it. Slot B. Uh, you can change the pictures. Move around. We're not gonna fiddle too much. This is It's not editing course. The sisters. Charlie, how you Okay, Lovely. Like it? It's beautiful. Eso you can add more shapes. You can figure this out. This is like you don't have to be a rocket scientist to do this. Yeah, it seems pretty straightforward. You have other colors. You have everything's going to be Do picky on this. You can see there's lots of elements in this. Okay? So we just don't leave it like that as you see, save option, because it is the essence of this whole thing at the end of the day. What every using whatever, designer. Even if you're using power point, you need to save it to a J pig or to a PNG file. Money, money, money. But no, nobody needed. If you're gonna take the lower is 200 by 200 years for me, Okay? Just for a little longer for us. Okay? So once you run the gauntlet and put in your email, they are hopefully going to see and your link to way you can get your free lie ago. So we're gonna go and have a look and see if we can find it on the other side. Grab our local right, so you could see there it is a It sent us an email without little logo. There is lexical. And so we can now finally download it and get the image that we all so desperately required for our website. Right? So now we've got to say this in a suitable spot where everything else is stored. So we're just gonna drop it in here with all the other file. So it's good to keep everything in one spot. And so it's now saved that in that folder. So we go in that folder, we're going to see that we've got our various side to me voice that little PNG file, and there it is. So we've got our, like, incidental road Low res longer, but it's there, and now we can use it in our website. So the point is you can create a logo however you like. In this example, we've used free like a design there. Lots of these things. Just Google it. Find one That's you. Chua's received just going create one in on somebody taking even cracked one in PowerPoint Keynote, etcetera. So these are longer. What's next is we want to get that Loga inserted So rather, then there's boring sort of H one thing here That's not so interesting. Josh, Take it away. Let's get that sorted as an image like Okay, so we can actually put this in the head because it is a logo. So that is one thing you can also do. So we go. I'm G cabin in now. It's got space. What image? So now if we just grab Loga? Yeah. See? Okay, so we're not actually using an online Logan. Now, remember, if you have to publish this website online while this web site's gonna work locally if you to publish online, that image would have to be stored online somewhere. First. That little. So there's I like the looks much better. Sel that Josh is diners grabbed the image, which is stored locally in that same folder is best cakes iteration. Also another way, also. Teoh, get this image CF. That way. If we had renamed this, we wouldn't. Yeah, but that image. So we just go here, we can say open with now if we said I've been with crime. You see, this is a Sosa's Dropbox users Craig fluid. So if we say that again, that's giving you the full off to it. Yeah. So this is also another way you could go. Come on, See? Replace this with that's And now we say this. So the first time we put it in without the path, what it's gonna do is it's just going to look in the current folders. It's gonna look in the folder were best cake side Aged, a melody If we rename this way If we had to say, OK, you off that was in another folder It's not going to find it cake. If we had it like that, come on, safe. Refresh that. There's gonna be bad. It's going to be bad. There's nothing. Just update the name, sir. If we go back, Teoh, find that we open this again. You get the full path again. It's actually better to roll and have a random name like we had there before. What is that? 967 Now that's ridiculous. To give it a name that's vaguely understandable. So when you do reject courage, you know? Okay, that's my cake Image cake. A logo was something. So give it a name that sensible and obviously now you should be able to see it appear once again inside our website. Right? So that's pretty simple. So we've covered the basics. We've got our best cakes I interior up in running. We've got a title. We've got an Arsenal logo in there and we've set up the table. So really, we're ready to take it on. Okay, So you know what you gotta do? Go need a piece of cake and sit up your basic skeleton for your best cake website. 14. Get Free (Legal) Images for you website: so the skeleton is in place. The logo is in place, but we need more. So we've got our little table structure. But what we need, Joshua, is what we need. Images. We need the cakes. I mean, that's not It's got a very cooling of the best cakes. But we need the cakes. Any of the images now, Obviously it is a real side new selling cakes or doing something like that. I'm gonna suggest you take photos of urine cakes, but in the interest off not having time to bake nine different cakes, we are going to show you a very sneaky trick. Now, you don't want to just go onto you can't go into images dot google dot com and search for cakes. But now you be careful this copyrighted stuff out there and yeah, yeah, yeah. So do you find some really cool images and you can use us for all sorts of images. You could go toe pics obey dot com And here you can get really free images. It's just beautiful. You can drop them in. They are shared by our generous community. 1.1 million images. That's super fantastic. And there's so many cool images here. So let's go. We'll go in search for cakes, cakes, cakes, cakes, cakes is good salmon searching Google images. What you can do is a specification. Here. You can choose that. You just want photos, etcetera. Ah, you could even choose that. You want transparent backgrounds and you can even start to say, Well, you want to sit in sort of size. There it is. And here we've got a lot of cake. So what we're gonna need to do is pick some delicious looking cake. So just tell me when you see your beautiful again. All you gotta do is so we're gonna open a couple of cakes in different tabs so that we can just quickly we're gonna ultimate Finegan nine cakes. But we'll just show us doing one of two just so you get the idea and you can figure out the rest on Delicious. Yes, he has one row of cake, so we're gonna have that one. That one. And, man, this is looking good. Okay. What we would now need to do is we're gonna go way are gonna have to download thes again. They are two ways we could do this, we could link directly to this image copy, image address or as we showed you Really you could download. And the problem of just linking directly to the image that is stored online someone else's site. If they delete it, you're gonna have a problem in your website. Um, downloading It means that you've got control over. But it also means that if you want to publish your website, you're gonna have to put that image on line somewhere. So it us download these images. So we're just going toe. Save them. You can. Either to savers or even better, is if you choose free download, you connects to choose the size. What do we got? Just go with small images. Yeah, well, I mean, well, bottom line is we not going. Teoh need really big images, but we just going to stick them. I mean, you can It's up to you. Whatever you want to do with the images are cut and hit download on. It's going to download that image, so we're gonna I'm gonna give them some sort of sensible names. Cake One obviously would give them more intelligent name that they were gonna do the same for all out cakes. So Okay, so we're gonna download cake, too. On call that cake too. And you getting the idea about the stage. And it's down the cake. Number three resolution. And so you would need to do this for all of your cakes. Would you? Would you have to have your own images, but pixel by a really cool place to get yourself some images. So there we have it. We have now got three images downloaded, and we're going to need to put them into our table. So, Josh, what do you reckon? We can go to be? Pretty simple. Yeah. So we've got now and again. Be careful with the size of images. This is, Ah, decent size. It's a sort of midway size for the web. You don't want it to be to Hari's, because then it's gonna be slower to load. But obviously you also want to look Fregley decent on a on US written display. Talked image. Laptops are or computer. Okay, so now we can copy this. Let's make sure you get the Doctor J pigs. And I would copy this. Come on. See? Okay. Now we put Imagine our table. So I'm jean Knots. We put out a length is and I said, Kate three d j. Peg saved this to see how we touch looking for It's very big. So it's a big mother cake. He really get it. You're really good to see the detail on that. We can fiddle with the sausages now, but let's put in our case first. Put on, I think then we can change the world. Okay. So we could Fonda. Um so actually, we know the name to get discussed this Hold down command. You see, there's gonna be two curses flashing like that. So now when we go, I'm Gene. That would do everything at the same time. She was good. Okay, We don't have We just come on, V. It is going to change that to four cake. What? We got one too? Yeah. Teoh on one way going. Take us backwards. Yeah, whatever You know. Now we say that this is gonna look very stuff, but we can can now, right? So there were edge again. See, we do have are three cakes. They are sitting in one road, one table, but they are huge among us casing out using our little took command. Come on, Come on, hold down. Come on. While you cooking now we can go. We can change the wood equals. What should we make it? You know, it sort of make it tracked. 200. 200 to 6, not 200 Elective 100 toe general say that it's good. Just experiment. 307 three never listens to me. That's the problem. What? Listen, Teoh Not bad, right? So they were going around. We've got a row. Three little cakes. Not looking too bad on Yes, what we're gonna have to down do with them Not gonna make you separate. We would probably want to put in a few more rows of cake so we can have it look a little bit better. But there we have it so far over to you to get that set up on your side to receiving it. Your page with a little Logan arose cakes Annette or two or three on. I think we're getting close to having something happen. He has to remember that the whole plan, the whole plan, is to end up with something like that and we will fiddle with its, um, or in the next day isn't and so that people can look at those, pick on something and see a recipe. 15. Background Images: So the cakes are coming on if you have a look. Yeah, you'll notice. We've now got a nine cakes out. Three by three. We trying to imitate thing site here again, you can choose the size. We've just made a little bigger because we're not going to do this whole sign thing here. Which, obviously, could we just trying to make it more visually appealing. So we've got a hitter and we've got our nine kicks. So this is how it looks at the moments. Essentially, we've got our head a image Which of the top here. And we've got a table with three rows. Row one row to row three. Any throw. We've got three columns without different cakes, and they got different names. But what we need is just Teoh make us a little bit more interesting when you think we need Josh. I think we need the names of our cakes. Come up with some ideas of what we're going to call the individual cakes. And also we need a background. Yeah, that would be OK. So you want to put a little bit of text? I mean, you see here, each of these have got something written beneath the cake and what it's called eso we need put a bit of text beneath these cakes and yeah, maybe a little background just to add a little bit of something to this. So let's ah, get some tics beneath these cakes. Okay, so we've got we've got acting was all set up for us. So all we need to dio, as you can see, we've got a TV. Yeah. So this is basically where we've got a cake. Imaginary things inside of the t. D. We're going to put something. So this is our 1st 1 What does that look like? Carrot cake, Carrot cake, moisture. Qatar to kick. It s a strawberry. And say that before we do, Let's just make it a paragraphs. It just pee. So that's gonna make sure it just stays nicely together. Said on which to cut off kick no fresh. Ah, most to cut it kick. Yes, but it needs looks at everything. Like I think it's gotta be put on this on the side there. What did we just into that Yeah, center. Mr. Fintor on. We just put that like So let's take a squeeze ear. That All right, so let's see. That should be centered in the cell. Yeah. Hey. Yeah. We also need some styling for this. I definitely think that we should have something because alone just say we need h three or something for this in h three. On that we can look, can always change. We shot with each three. Oh, uh, go here and just take that and put it over. Now say that and let's see, Slow with business. Yeah, it's looking a little bit better. So you see, you really can't fiddle around heavy like you can. You can dio Oh, yes. Assuming that's what we want. We're gonna have to pick up her funeral names for other ones. This is gonna have to be repeated. So this do a nice, easy way to repeat it. So let's just take this out for now. Um, just take this out, okay? So now we can grab this whole section year, saving us a lot of time. Copy it. Come on. See ya. And now you without showed you with this holding down. Kamande Podunk Amman. Hold it down. Keep holding. Give our team is we're gonna put this all these places said no. And it everything you hit, it happens in all those spaces. Yeah, So now we go on up the tab so we could be temped in so we can pays taste. And now we can top in. Obviously, we'll be top. Now it's gonna be the same would be the same for each one so we don't have moist carrot cake for all of them. So now we have let go of the Yes and keep it. And soon as we are not holding down command and we took down, it's gonna it's gonna be one de selected every back to one. So this was our moisture carrot cake. Um, I am not sure what the the name way have to come up with. Ah, whole range off creative names for our cakes. Is Flicka trust there? Right. So here you can see spots. A speeding man. Rats. We have got all our cakes and everything from a niller in chocolate to the whatever cake to the surprise cake to the moist cake to the Christmas cake or whatever. So bad. Um, so what we've managed to do is we've put in all of the cake details put the Morning Insight Street at the moment, but need background background. This is out of them in the Watts, a bit boring. So how about putting? So it's anti war. The background is it's like an image. It's going to sit behind all of this, but as you should strolled sort of sits back there. So how do you do that? The gate. So what we basically want is of background be. I'd have a background that's very large, and I'll cover your whole area, but or you can have a background that is smaller and extra mile will automatically repeat, Repeat, Repeat that. That needs to be a repeatable image. Okay, so if you go to fonder, you can see we've got this one. But that is not going to repeat very well. That will be one that will just overlay on the whole thing. Yeah, so we'll use it later. But at the moment, that's not a great one to know. One achieve. He got this. Now this is actually repeatable. So it's like wallpaper. You won't really notice if it Yeah, Have you noticed the time? But I see it's a picks cutting, but you're barely notice when it's being in large and there's the cakes covering it so you can actually search for images there specifically made for this kind of stuff. This image, I like the style of it. So, um, we can add it in. So in the body tag, we've got ya, which is Bonnie? We're gonna put an background. So this is basically telling us that the main body overreached. Email is going to be a background. What's going to be set? Simply, background equals and then we've got I think so. If we go back to our file, we can see what its name is. Make sure you get that P and G won't see the full name. Now when you paste it in, save it. Now we've got a background. So hit it fresh it. Okay, so you'll see. Yeah, you'll see, even if you had multiple roseate background images, is going to keep repeating a little bit noisy with many images, so just be careful of that. But you get the idea. So obviously you want to look for one that's clean the paint on your website kind of look. So what? This one we're pretty look for this. We just want the people to be overwhelmed by cakes. Yeah, so much option. How many officers? Yeah, so that's basically how we're gonna put a background. And, um, it's really starting to come on with. All of these things were adding in. Right, so there we have it. We've got our website, it's coming on, and we know what we need to do is because people could now browse our website looking things. And this one when you got to a site and you could click, you see as you move over something, they're coming a little hand and its like are there is something I want to know. How do you make out? The black out will make this blackout chocolate cake and up. It's gonna now pop with your condition information. So that's what we missing at the moment. You know, there's nothing happening here. What we've done so far is showed you how to create a one page website. But how do you create an actual website that consists of more than one page that's coming up next? So before you do it, do you know what you gotta do? Get your website, get some cakes get images, stack in there at some descriptions, thrown a background if you're keen on the background and follow the story so that you are participating and we'll see you on the other side. 16. Making second page: So there we have the websites looking pretty pretty cool. Not bad. But as we said, what we'd like is would like to better click on one of these images. Doesn't really matter which one ultimately be click on all of them. And when I click on it, we would like to bring up maybe a bigger version of that image and in the recipe, because that's what this best cake side is about. So hitting back here, we've got our main page. A Web site is typically multiple connected Web pages, so that's what we're going to need to do. So the first thing you need to do is we're gonna need to create another page. So just to make this little simple, we gonna command a and come on, see, just coffee or this because some of the things we want to actually keep, for example, the title Our logo will dump a whole lot. But let's do that So it gets So we've got that. Now, if we could Kamande you for a new tab canopy, are we gonna have Teoh come on safe? Yeah, and this is our way through. This is our 1st 1 Let's make that the first thing that we can go. Let's create this carrot cake. Yeah, Yeah, This will be linked. Character Castle. This is a character again. As you claim, or on mawr pages, you need to remember to call them things that you're going to remember otherwise. Going to get very confusing while we don't need to be done, actually, paste and everything, but it also just paste it all in on now. We're not gonna have that whole table thing at the moment. We will use a tailor. Well, maybe take up the inside. Just keep up to the right s. So we started from cakes. Good affect. And we're just gonna keep this. So this is say that and let's open it. So we go right back to find out the character. Here it is. Carrot cake. Now we got two pages open. Right? So there we have it. But I think you can keep the same background. Sometimes. It's good, but make it something different. Yeah, I think it's good to change background if you switching, But like sometimes if it's very simple, you might want to keep it the same. Depends We do have part of Knox Wanya. This background? Yeah, that looks like a recipe background. Yeah, OK, so we'll use that. Just right click. Come on, A Come on. See. And Lee change background. Right There is the file name. Drop it in. OK, refresh. Yeah. Okay. On looking a bit, I quite actually like our little Logan appears on that. Paged it. Okay, so that's looking pretty cool. Got nice little load up on the top left there. I think this year got need to be repositioned. Started to appear nice on the right there. And I think the idea is so this is the picture and the recipe down the right here. Yeah, so I think that's for now. That's looking good. We're gonna look at how to add just a little bit more just to make it look better. How to link up apart images. Say we don't have to top in a whole new image just to find this page like we on and not to find it. But for now, I think we're looking OK. OK, so we just keep that like that's a good out there. Crater second page, like it just don was pretty simple. Create another page based on that on, Just put in the basics. Get ready and we'll take it from here. We'll start improve the formatting and we will then show you next time to actually, when you click that to make sure to pops out of the here. So one step closer to your website looking fantastic over to you. 17. A sneaky spacing trick: sore looking moist is looking delicious. We have got our two pages, but yeah, that's Ah, not so good. So this one a little needing this up a little bit before we show you how to pages together . So we need to move this one across a little bit to his position it here and then we need to add in something which I bid is going to be a watch a recipe, and that's going to go here in any little table that's going to help us do that. So first thing is how in the world we're gonna move it across there. OK, so there are not many ways to do that in HTML. Yes, if we're using CSS. Yeah. Then you've got a lot more options. This'll is not a CSX Corp. This very complicated waste in a mountain. They should do RCs discourse and then the Java script yet, But that's next. This is what you got to get right? Is a female so basic. So we gotta we gotta hacking of liberty. A. Okay, so what we're gonna want to add, which is very simple, but it seems that the kind of ineffective take a break. Take it. You're going to do this. It will be HD a mile, and we don't want to go into some hard stuff. We've got to move this cake across, you know, and we consent to it. But that's only gonna center it in the cell, so we need todo. So if I need some spices, you know, asked me if we do that doesn't anything that's not gonna do squat. I've got this little thing called the Empress End in B p, which is a non bracket space No one bracket space. OK, so now let's see what happens. So you put a number explain that had moved across about a millimeter? Yeah. So much going on. This is where you're gonna be like what? What? Hey, I want to copy that. Yeah, I placed it in a way to paste a lot under lots and a lot. I see you creating lots of little spaces on there. Yeah, because it is gonna be very complicated other way, even though it looks un effective, but we're gonna get across the screen. It's a bit of a sort of hacky way of doing it using HTML, but yeah, it works since she always done is we've now just stuck a whole lot of little spaces in here . It's basically just trying to make it. And so again, if you wanted to put more in just however human, you need to get it just so it's perfect. Keep hitting your fresh and you say, Yeah, that is just spot on. Okay, so that's not bad. That's sitting there looking pretty pretty cool, Daddy. So now we want to put a recipe that's going on that side. So we're gonna need I another todo need another TD, second column, and there go t the t hit the tab. Okay, so we don't really know recipes home tonight practice to be, but I say we go right, And this isn't a carrot cake, but we could make us into carrot cake, right? Yeah, we just got that. I mean, if you guys know good carrot cake recipe, you can help us later. But I mean, we gonna we html guys. Yeah, way eat carrot cake. We're not gonna make it so way need. We're gonna put that in, But before we do that we've seen goes down this thing, this is hold this thing in a I ordered less car year. We want in order, lest fantastic space. Oh, yeah. Tab it. Okay. Inside. I ordered less. We want we're gonna have to put a few allies in here. It's just gonna be one, because it's one list and then stick in. Just put that in. The items are going. That's it. Let's just go there. We just This is a pretty may. See, That's just just sees a local Montag. Come on. Come on, come on. Okay. This is getting ready, monsieur. Right now. Way got you got You got it. You got it. And I had great to fall. I can't get you can do this. Always got tablet a tablet and they were looking a little bit better there. We got a break this out So each one has to be a list autumn So let's just take that. Come on, X. So it's going in. That one ends right there. It's a first less. We create another list, I would say ends after the dots. A nine inch. Yeah, because that's also in, But just stick them at the end of each line or something. There. Uh, there in a second list over there. I just do yourselves a favor here and just news. Alok Monde. Do it all together. Oh, uh, stop there. And at the end of each one, close off the lists, you know? So we're gonna close it. Oh, uh, right. So there, now. Well, being made part of our wanted list. It's take a look at that. Ah, that's looking much better. Okay, so we are going to need to spaces out of it. Because, as you can see, also, what they have done is when it's got too long. You just you prepping? You br so you break the line so we can see where does it go too long, This fluffy one. So, sugar, I said, that's where we break it on top. Okay, so we go to here until put in beyond Say that. You know, just now it's not gonna be ready long since I was gonna put in two lines again off towards , uh, where's a war towards? Yeah, beyond that. So you see everything or cries of this is you, Koerting, You're actually having to specify ALS. The little details now, a lot of this they are some shortcuts around it to in your stone. You CSS. But its really useful for you to learn how to do. It'll basically like in HTML, because later on, when you do get more advanced, do you need to understand the basics? Yes. So that's looking good. Except we've gotta move that across, so we're gonna have to space that up. But if we put in like we've got with these spaces, right? Yeah, we put it in the It's gonna get very confused, because now it's which one must have put a whole bunch of spaces to rather than that we're gonna add in another table. TD's another column. Another. Basically, all we're doing is we're gonna add in a column between the two that's going to go here, and we're just going to then put in all a bunch of spaces, See? Very guy. Okay, so we've actually the blame column in the middle. The you can adjust the size of that middle column, have many spaces you wanted, but take a few stop the such a perfectionist. Okay, so there we go. That's looking pretty good. I think so. We were getting pretty close to having this unbelievably monstrous, Awesome website. Show you one more thing that you're gonna do. Well do then the next video. But you're gonna have to be patient for that show. You How you can actually add a video to your page would be really cool. If you have someone making the cake, how cool would that be? And then all that's left is to link it all up so really close. Do you see if you can make your second page look a little bit nicer? Um, ad in the images, moving across, trying to line them and see how it all works for you. So stop watching and start doing Remember our famous crutch. You know this question we liked about education? Yeah. How much you don't from doing well. Get up here in do 18. Embedding a Youtube video: Oh, yes. So I am smelling fresh cake. Yeah, we got a problem. The problem is, that recipe there is besides being incomplete, I think it's a truck to cake recipe. But I've got a solution. You know what it is? No, you don't. You know what? My solution. You've got a Not yet. I'm going to show you the Mad Jack. The Magic added, I guess. Okay, there we go. YouTube, You know, cool. It would be t kept a video inside your page that's gonna make it. Supports him taking out that heart. Now that you understand that the basics of HTML I'm gonna show you how you can actually add a video. So I have done little Google or other search here for making a carrot cake on. I've come up with one very popular one million views, so this one's got to be awesome. So even if my chocolate cake recipe doesn't work for carrot cake, that's fine. It's going get Jim. It's carrot cake. So Well, what we're not gonna do we want embed her video. You come here, you had to choose share and don't undoing beach it down. Don't stress yourself. God yet to where it is in bed. And here you are going Teoh C Code. Actually, a couple of things you can dio show player controls and all sorts of things that regularly included in your bid option show suggested videos. The matter I want afterwards. I just want this video. You can even start at a certain point if you like, But all that I need to do is grab that. You recognize that? What is that? That's HTML code. It's not that complex. We haven't done the specific code exactly, But you will get the idea because or HTML codes in there. So we're going to come on, see it? Had we going to start, we're gonna come back yet and just to the bottom. Here, let's see what happens to be going toe Command V. And we are going to just paste in that bit of code that we have just found exactly a year, and I framed piece of code, which means that something that is going to be contained within a frame. But don't you to worry too much about that? You just got a copy it and you'll see it's got the width and the height, and then it's got the source of the video. And what the frame border and with a chiller full screen or not. So those are just some options, but it's take a look. So a simple is that we run across to our best. Cakes aren't and hit refresh. And there's the video. It has appeared on our pace. Not obviously. That's not exactly how you would like it. We would maybe like it to be a little bit smaller and to fit here. So the solution to that, Yeah, just with this one we did we can, you know, hoping to Spaces and has given this option to end with the heart. Okay, so now we just want to make it a little bit smaller than that. So if we had, it just changed this. 123 say 3 60 60 What this is gonna do is it's gonna it's gonna make it emerged, stuck a square, and we kind of want to keep it the same proportions. So we have here proportional scaler. You could grab a calculator and work it out yourself. There's original within hot. So if you just had that and you say resize it gives us it's gonna be to your 2.5 if we just put a hot you don't get the proportion, right? It's gonna other give. Make it very long or very squishy or very weird. So so yeah, yeah, yes. Now you can see it's it's actually the right size. It's Yeah, so that looks the right size, but it still needs to be moved across S So we're gonna just like we did with this one. We're gonna have to add in a lot of space is before just grab this draftsman spaces. We don't need just put that in that safe. We have put three freshness and nearly there. It's just a few more. Ah, you two shakes of a a small dogs tail gob smacker. Okay, said this. Say that X. Let's say that's enough. That struck. That's all of the fine tuning. Okay, So I think you gonna need I think it's team because it's a whole bunch. Yeah, etc. You know what I told you? I told you. That's one. Yeah, that's that's It's perfect. It's perfect. You hit, you hit it and that's looking really good. I mean, we could sit your infidel, but you get the idea. So here we've got our starts actually looking pretty cool We've got out recipe Have got a little image. We've got our video and now you'll see if you hit play This fear is gonna not be playing Orbis never Carrot cake. That's death, Carrick A how to make it. It's all happening here on your side and you've actually made this whole thing. I mean, that's pretty impressive. It's all embedded in your site. So there we go. Go along in bed A video on your site. We showed you how to do it. You just simply grab the embed code and you come across inserted on your side to remember You may need to just change the the wits in the high proportion d at a funeral spices in and you're ready to rock and roll. So only one thing left, and that is to link of this page with that page and you've been got a complete website. So what do you were nearly there and you're doing fantastic 19. Linking webpages: Well, we have, I believe, the best cakes, the best site, and it's all looking super amazing. So we've got our two pages. But there's one thing that's remaining because of website is not just Web page or Web pages separated. They need to be connected. So we want about a collect on that fellow there and we want to get through to this page. So how do we do it? Hitting back to the HTML. Remember, we've got out two pages that that's our carrot cake page. This is our main page, which would be called a home page, and we want to connect the two. Okay, so we got this option that gives us and often to link to link pages. Yes. Yes. OK, so over here, this is where we've got our moist carrot cake. So I'm first going to show you this is link options. So if you go the sexually do it right at the bottom just to give an example. So if we say a tag just talking a so called zinc attack, it's allowing you to anchor and link something. Something else. So what? This is gonna be our webs. That name so we don't want to link it to this. Said that So now we see inside these little and said the Commons being thin. This is this is what you wanna see So if it takes, it's gonna be back Another character, Uh, whatever doesn't matter right now. See, this is just ticks. So enough, refresh that you see with ticks so beyond believe. Now you know, you're very familiar with eyes. You see those little underlines things and yes, there we go. When you ticked on hey, or did it do it brought us through to that page. So that's your old familiar hyperlink text underlined. It brings us through to the new page. So that's how simple it is a law that it Woz is using this attack putting the link and then whatever the text was so But that's not really what we want to do, Josh. We want to actually link to the image, not to some random bit of text with the endless. Actually, this is actually really easy or we're going to do. You can take that, actually, um and then we'll go here, which is where we have our image. And then inside this we're gonna put image off the TV. Just put that in. There is a tag swapping. Hey. Yeah, And then image ends image right there. Take that and put it inside the attack. So instead of having the text inside the attack, we were putting in our image attack inside the attack. So we're gonna have a little bit of extra thing that Okay, so you say that now on our fresh nothing looks different. Except as you see, when we got here, Got nothing. When we go there, we've got the finger. Ron, give it the finger. Click it. Yeah, baby A A rocket. It almost looks back. Like you can see the same image brings it there. It's the What's the word for? It should be. Yeah, You know what? Actually, why not also add the link to that moist carrot cake, Because at the moment, if they kick their, nothing's gonna are probably in the wrong page. Nothing happening anyway. But if you click here and nothing is gonna happen, be cool. If that was also may be happening. So if you wanted to do both So what we can do is we just have to take this. We could put the eight egg here as well. So you could just another a tag for voice character. Could be it. That stuff in it. You got your gun and put it inside the eighth Street in case it put in a space. A tag. Now we get all of this. Get this Littlewoods. Yeah, Rob him inside. Uh, done wrong on video. Very guy. Fantastic A You got it. Got it. The you and your rocking refresh. Here we go. So now we've got a happening on both of them. So you click Are the one you're going, Teoh, come from your your, um That is not intelligent. Yeah, I haven't put any link since. Yes, that's very clever. Allow you've done is you've put in moist carrot carpets. Brilliant. All in the mistake. Here. There we go on, not brings you three. So there we go. So that's looking fantastic. So at this stage, we basically have got a complete website. You have got all your images. You can see them. You can embed them. We have got backgrounds. We've got logo's. We've got clickable links. We've got sick and pages. We've got tables use for formatting. We've got a bit of videos. This is fantastic. I just think there's one more thing. No way line. One thing that you're starting to sound like. What's his name from Apple? And there's just one more thing, Steve. It's not a big thing. That's the new I find what is What is it again? It's just gonna be What is it When we click on this image, we don't really want to have to click the back button, so Oh, yeah, like a button that That's arrow I've got OK, handy and my fonder A little era right here. You might not be the best one, but, you know, error is an arrow, so we'll just again you can go to picks, obey. You can find errors and whatever you like that whatever. Let's just put this and it's gonna be another top somewhere. Yeah, just put it right at the top on the on. The Bonnie under the body, It could even did a hit because it is kind of, uh, let's just in. The body is going. The body begins fiddle. See how that looks. Okay, so it's an image Presidents to stick the name and They gave it a case and it's a big baby. Let's can we just like yeah, three more in that town this small on that I like to that a small in that with equals. What should we owe? She's gonna be wrong. Ontology is wrong. Thank you. Thank you, Thank you, Thank you. Take out 45 e. What? She doesn't listen 80 to 100 always wants to get way. Have to link. I don't sort of strong cup of my life, but anyway, it's good that, like, it's just a little thing. Um So you can see how long you guys been put fiddling with these things? Pretty good idea. So right, so we stuck in our little errors. Aback error. But it's not just a image we want. We want you to use the ankle tag because we want to make it a hyperlink at a happening and it's gonna hyperlink back. Teoh, just page here. Say that and we put it in there. So now finally, the website is actually looking really good. Click there. They got last easy access. And when you hit it back one more thing, Steve, your tribute. Hey, I was protesting. We can go. Look, just made a trip to Cape Human. Go look for someone. The best part is with you guys can see that we've actually got a real chocolate cake reading for us. A mixture of carrots and everything. I think we're gonna go meet that right now. This is one time you can have your cake and eat it. So there we thought it a best chocolate cake website you could ever want. And you've got the idea. And you never got the skills. You've got the ability to create your own websites. Hopefully you have learned lots of amazing and incredible things. That's really simple. This is the start of an incredible journey. Learning to to code you learning to use HTML is really, really exciting. So we hope that you've had lots of fun. Get out there. The best way to learn is to play, have fun, make mistakes. That's okay. Create things. Let's see how they work. Try it. And most of all, cheered with us. Tell us what you want. What doesn't work? What does work? What else you would like to try? We'd love to learn as well from year So it's a learning journey. We want to be in it with you together. And we hope you had lots of fun to get out. They give it a try. 20. Conclusion: Wow! Well done. You have reached the end of the course. You must be feeling super amped. Super excited. Because if you got to this far, you've done super well. I think you've done really well. You've learned to make your own website from knowing nothing to boarding This amazing amazing leaves us with two pages links, images. And now you can carry on by yourself learning as you go. Absolutely. This is just the start. So what you've done so far is you've learned the basics. You've learned how to take HTML code. Put it together your program and external program and now build your first website. You can have two pages, three pages, 20 pages, whatever you like. It's a starting point. This is where it begins. But there's so much more. There's more. You can learn about HTM and we hope you giving you the confidence to learn there and look out for other courses on HTML. Then near the other aspects. Remember what we said? HTML five is made up off. What html and what's the last one? Come on, tell them. Drop the script. Of course you knew that those three things that what html five back and we will have courses coming out shortly on those they probably there already. So chicken out. So it's been exciting. We really loved having you. Please reach out. Trust me. We want to hear your comments. Talked us in the discretions, got questions. Ask us and please give us that five star review. We want that. It is not five star. There's something you don't like. Let us know what it is because part of our learning joining is improving. We want to make a better in bed. And we could only do that with your input. We value your comments. We value being on the course. Tell your friends if you enjoy it. We love to see your one of other courses as well. So don't forget to connect with us. We've had a great fund. We've enjoyed teaching you and all the best in your HTML journeys. Going forward? Yeah. Goodbye. Have lots of fun. Keep on learning. See you