Learn Basic HTML5, CSS and JavaScript Programming from Scratch | Richard Sneyd | Skillshare

Learn Basic HTML5, CSS and JavaScript Programming from Scratch

Richard Sneyd, Lecturer, Founder & CEO of CyberMyth Games

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
29 Lessons (4h 1m)
    • 1. What Will I Learn?

      3:14
    • 2. Download and Install Required Software

      1:33
    • 3. Basic HTML Concepts

      12:51
    • 4. Commonly Used Tags and Elements

      14:54
    • 5. Common Tags Part 2

      13:08
    • 6. Getting Started with Aptana

      5:33
    • 7. Working with CSS Selectors and Rules

      12:21
    • 8. Classes and Table Styling

      13:06
    • 9. External Style Sheets

      6:42
    • 10. Inline Styles

      4:28
    • 11. Intro to JavaScript

      9:24
    • 12. User Defined Functions

      8:05
    • 13. Variables

      5:07
    • 14. Arithmetic Operators

      6:02
    • 15. Dynamic Data Type

      13:11
    • 16. Data Type: Strings

      4:30
    • 17. 16 Objects in JavaScript

      8:44
    • 18. 17 Object Methods

      4:16
    • 19. 18 Scope

      5:55
    • 20. Conditional Logic

      7:23
    • 21. Alert Boxes

      2:10
    • 22. Form Validation

      13:12
    • 23. 22 External Scripts

      3:25
    • 24. 23 Canvas

      12:49
    • 25. 24 Building a Website

      8:37
    • 26. 25 Website Project Pt 2

      13:52
    • 27. 26 Website Project Pt 3

      9:27
    • 28. 27 Website Project Pt 4

      6:57
    • 29. 28 Website Project Pt 5

      10:14
17 students are watching this class

About This Class

HTML5 is the latest evolution of web technology, encompassing decades of research and development. It has matured to the point that it can be used to create stunning, responsive and truly interactive websites, apps and games. Plus, anything written in HTML5 is inherently cross-platform, so becoming proficient in the use of HTML5 is immeasurably valuable to you as a web, app, or game developer.

This HTML5 introductory course teaches you all the fundamentals of working with the three cardinal technologies of the modern web: HTML, CSS and JavaScript. By the end of the course, you will understand the basic use of HTML5.

Transcripts

1. What Will I Learn?: Hello and welcome once again to learn. Hey, html five CSS and JavaScript Basics from scratch. So what will be learned on this course? Well, firstly, do it. Well, my name's Richard Sneed on I'll Be Your Instructor. I'm founder and CEO off Cybermen Games, which is a company which specializes in game development for both mobile and desktop targets, as well as course creation instruction along similar lines. So what will you learn? Well, you learn hates Jim or five. So what is a team of five? Well is the latest evolution off The hate team are standard, and that means at the technology of hate CML in the modern age. So the later standards for working attacks Andi even some of these new features that have come along as well, the point being here that from a complete beginner, you will be brought to the point where you'll be able to use hate email to create websites and not just static websites. We'll be able to use CSS to style your websites and create a certain amount of graphical or stylistic interactivity like and hover buttons and things like that on your label to use JavaScript to create true interactivity and dynamic elements within your websites, including creating your own functions, user defined functions, creating objects with properties on their own methods. Working with the different data types. Understanding dynamic data type in JavaScript and how that works. You'll be able to work with events. Changed things on the page, depending on user interaction, etcetera. So what? Already learning outcomes? Well, by the end of the course, you will be able to work on a basic level with tree card on technologies off the Web. Page five CSS tree on JavaScript. So the latest standards Nah, little's. You'll understand how they inter relate. So how hate TML is affected both by CSS and JavaScript and how JavaScript can be used even to change styles in real time in reaction to user events or even browser events. So you'd be capable of building simple, dynamic or static websites. Say economic, because you'll understand JavaScript to the point that you introduce dynamic elements with into your within your your website, using that language and you will notice fundamentals which is necessary off. Hey html, CSS and JavaScript on BP capable down of pushing forward on learning some more advanced topics like HTML five up on Gained about. So you need to know this stuff before we move on to that. And there'll be a course for that for you to progress onto very shortly from here. Okay, So having established those basic points, let's jump in. 2. Download and Install Required Software: So before we get started with our quick and dirty introduction to hate steam l on its tags , there's a few, uh, well, really just a couple of pieces of software that you're going to want to install. Yeah, no pad plus plus is ah, handy little plain text editor. That improves on the basic abilities of the no patent application with ships by default, but windows. So if you have a Windows user, I would suggest that you don't know no pad close plus and install it so you can use that instead, it still playing text book. Um, it just gives certain handed little features like color code. It's in tax and things like that. So you might want to install it on Mac and are order plain text editors that you can use if you're a Mac user on after Donna is an application that I would like to use as well. So if you want to go on, download that on, install it and it comes in two forms, you can either get the stand alone version or you can get it as a plug in for eclipse. If you ever work with Eclipse, plan on workmen equipment clips. I'll be just using the simplest on the loan version. Andi. Feel free to use that as well. Once you've downloaded and installed those applications way we can get started with our next lesson. 3. Basic HTML Concepts: Okay, so let's take a look at the basic concepts of hate email. So, firstly, hate steam. L stands for hyper text markup language. In case you were wondering now, HTML five is a word that's been bandied about by marketers galore in the past couple of years and then the games industry. It's becoming quite a popular topic. So what is it? Well, traditionally hates? CML had little or nothing to do with games. Hypertext markup language was basically the convention that governs how we wrote pages for the Internet and still is so what he would begin and end with tags. Every element wouldn't hate him on page with beginning in the tags. This was to standard that was used, and we'll learn all due to rules that go along with that. But in recent times to power that has been invested into the most recent version of H Smell , which is hated him out. Five, including its sister Technologies, which is CSS CSS dancer, cascading style sheets. That's ah, spelt like this skating style sheets. CSS CSS is a sister technology to hate steam. Elder sister, I am yeah, framework or whatever you want to call that sister language coupled which hates TML and JavaScript. These tree technologies are what we are able to use to create the interactive, dynamic Web applications and even interactive and dynamic Web games. True to hate. HTML five standards using html CSS JavaScript Okay, now I have a plain text editor open on my computer. It's no pad plus Plus, you can use any plain text editor you wish. But if you can possibly use no patent plus plus, as I am and then that might be a good idea. Now, the first and most fundamental elements in any HTML document is D you guessed it hate CML element. This is not an element. This is just a tag, so we have to finish the element off. First you create an opening tag. So this is on opening tag for two. Hey, html element. It begins with one of these little brackets on ends with one of these little brackets, which can be found just right of your M key on to keep a keyboard. So to use them old shift on, then hit either one of those keys on you can create those. Don't confuse them with curly brackets or square brackets, which are beside the peaky. These are different. Different characters entirely. Don't mix up your characters. I'll make the tax slightly bigger so that you can see exactly what I'm what I'm doing. Control mouse wheel. Okay, I'm going to assume in a little sort of Texas big, nice and easy to see what's happening. So once I provided, the two of these brackets have to find a tag. Should've tells the computer. And the HTML tag is now starting. It's bad practice to use, um on inconsistent casing. So keep everything lower case, Don't go up a case, ih, lower case t you know of a case M? You know, the browser, my process that But then there might be some browsers or some applications that wouldn't process it. The point being that it's not the standard of convention convention is to keep everything lower case especially what html five. That would be the convention that would be followed. So we finish off html elements. We close it using a closing tag. Now, what is the difference between an open an opening tag on closing tag? Well, closing taek is identical almost in everybody to an opening tag, except that it has this forward slash and that differentiate Theis closing hates them. Attack from this opening HTM attack this little forwards last year. It's important that you include that, and it has to be at the start. It can't be in between the page in the D that wouldn't work. Can't be after the HTML that wouldn't work. It needs to be immediately after just little triangular looking bracket here, which is just right of the M key on your keyboard. Hold shift to use it. So now we have the two most basic opening on closing tags for HTML document. Now there are order fundamental tags, which are always present in every hey HTML document. I'm gonna hit the tab key because it's it's good practice to indented your cold or your your America as we might call it. The next tag that we're going to include is the head tag, and I'm going to just come down to lines and close that out head. There is a reason why I'm formatting my America for my code the way that I am. So do learn to follow this practice basically and nested cold. This head goes inside of the Hasty Mount tag. Whenever it's nested, it should go in a one level. So I've tabbed in once for these lines. If I put something inside of the head element, what's gonna happen? World logically enough that happen again and say Title? So the title is another from the mental tag. It's It's always there. The title is what appears on the top tub. In most browsers, it's a form of metadata. Messa is belt M e t a meta data matter means higher. So I'm gonna call this one our tests page of awesome of amazing this much of you before, like it seems so amazing. This I'm pretty sure it's a reward. So we have our title, our head on our hate. C'mon, now the reason it's called the head is because it appears that the talk logically above the body. So if there's a head to the body right used, that doesn't demonic to remember body closing tiger body. You can see you doctor is a distinct pattern. The head element on the body elements are indented at the same level because they're bold inside of the hate TML elements. The title is indented one further because it's not only inside of the hateem element. It's also inside of the head element, so in dense every time, and it is nested within another. Another element, it's the best way to organize your code. Another convention that I tend to use on a lot of water Web developers use is that if Thea if it's a very simple elements, such as in this case, it's a one line element I am. I have my opening tag, I have a little bit of text, and then I have my closing tag in that kind of situation, a simple, um like that you can put it the opening tag and a closing tag all on the same line. There's there's nothing wrong with doing that. But for big elements like the head element, which is going to take a lot is going to contain a lot of sober elements or the body, which is also going to contain a lot of sub elements to hate shame. Element, of course, will contain all order elements, so that and it's going to be separated in the form that it will have a distinct line for the opening tag for the closing type because it improves dramatically to readability of our cold over America so we can come back on no later on what we've been doing with this cold very easily, just by scanning it with her eyes or if we're working on a team for a company and the other developers who look at our cold or going to very easily be able to understand what they're reading because it's been written well on formatted well, So keep it all. Lower case. Separate the opening and closing tack on two separate lines if it's an element that has some elements in it, because that's more readable. And But if it's an element that like this a simple element that doesn't really have some elements like the title, then you can space it like that on one line down to the body. We can just write in Texas now, and that will appear on the page like this is my body text. What does America that and we can use to um, further designate the form of information is being presented here? So, for instance, if a launch was going and say that this is its own paragraph, this is a paragraph closing type e no sub elements so we can leave the opening and closing pack on the same line. In that case, that's saved this on will set up some kind of a project for ourselves to work off of. So if you go to libraries and gonna goto websites on, I'm going to create a new folder which I will call and hey, html five basics, of course, on inside it there were going to save our file. Now this is our only page on our, you know, incipient website. So it's logical that it will be then the first page since your honor waters so want to be called the first default page in a website. We call it the index page. Invariably, we always call the first page the default page on the server index, so index will automatically be opened by thes server, one of the open road websites. It's the default opening page in ducks dot hate email so dot html that is the file extension. Now we're not ready to click save yet This is an important point to save as type should not be text. Okay, make sure it isn't text, so in no pad plus plus, you can just set it to all types. And that means that we're designating to file type ourselves with the dot html there. Once you've done that, you can click Save we can go and open that up. I just hit the Windows E hockey there on my keyboard to bring up the file browser book The Road. A ways of doing that. I'm sure you are aware we'll go to libraries on websites. Open up our hating off basics course, which is the website Ah, directory or folder. So all of our other website pages and files will come in here writer in this master folder or into still directories like GM, an Images folder or a Styles folder or Scripts folder, that kind of thing. And if we right click on this index page, we're going to open it with Firefox. Let's just take a second to analyze what we're seeing, so there's not much here, but it is a valid HTML document at the top. We have our title, which we provided. You remember that that was inside of the head element test page of amazing nous Andi in the body. We had a paragraph on the text of that was Just is about Let's go back to our document. So that's the most basic hate email documents you could ever really create. Those are the most important tags, your hates TML elements, the head elements within that the title element and then the body armed, which would contain all of the content that appears here. The actual page, that's all within the body. Okay, so those are the basics off a sort of a hello world style welcome page, for we're learning HTML so we look. 4. Commonly Used Tags and Elements: Let's build on the previous lesson by taking a look at some of the more common tags we've already built. D Most fundamental skeleton for a hate steam out five page for HTML page a document so water non necessary but useful tags on common types coming explore. Well, we just use one four mounting tag. In the last lesson, we created a paragraph, and clearly the paragraph element is to find an opening and closing tag and the symbolism p that's used for that. Okay, so that's how we create paragraphs. However, there are quite a few would or formatting tags that can be used, such as headings on our headings Gonna have multiple sizes. So we have a hate one and again opened and closed in the same way that we've become used toe. So Collison heading one. I'm going to copy this. Just select the line patrol C to copy or command and control me to paste, and you can have hate to and hates tree. Just make sure it after consistent in the opening tigers a hate to don't make closing. Tiger hates tree because that doesn't make sense. Keep it each to Andi H. Tree h four even at school for that's okay. So we have our h one. Hates to Haight Street on teach for we have a paragraph. That's this is a paragraph on, uh, T this is don't forget your forward Stashes. And we might even put another copy of her hate four in between the two paragraphs called out heading to to tree waiting for heading five. So here we have a multiple. The selection of, uh, different heading elements combined. But a couple of paragraphs that's savored control us on. If we go back into our browser, we'll need to open that file again. The index while that we saved in the previous lesson. So we go to libraries we had in websites, at least on my end. Just remember, wherever it is, you saved yours just about basics Index opening fire, folks. And there you go. So starting from one and counting up, you go from largest to smallest. So each one is the biggest teach to a second biggest etcetera. Going down Trudeau numbers. We have a paragraph that they're heading and another paragraph so that those air some of the most fundamental formatting tags that we can use some other common tags. If you want, emphasize something within one of your paragraphs, come in here and say, This is paragraph full stuff. This line is special and so is in Bolt. I'm just saying that obviously, is going to change anything, but we have a special tag that we can use to make that truth and still bold tag. So one in. Okay, something happened to our closing piece. So let's just Reince surfed up if we save it and go back to my browser on Hit Refresh to see that we have an emboldened line within our paragraph. You'll also see that each one of these elements to heading elements on the power of elements automatically brake onto a new alliance order. That type of type of elements amounts Do it at. That's a moments don't and there's a logic to it. So logic the for instance, a paragraph would not sit in line with another paragraph so it automatically breaks it in the same way. Heading would not sit in line with another heading or another paragraph, so they are by default set. Wouldn't HTM Alan understood by the browser to sit yeah, on their own line, so they automatically break. Okay. Now, this is default browser formatting, our brother styling. So CSS is what we used to create styling information and will be you and got soon. Let's just look at some more of our basic tags. So, uh, Dave tag is used to divide our document into yeah, distinguishable little sections so you can give them I d. S. So you could say give I d equals and called it, you know, voting menu or something like that Hyphenate done like this, floating many. And then you could use that I d that we've provided here to refer to distinctive in CSS and style. It make it look a certain way. You can also use it to refer to it in JavaScript to make it behave in a certain way. So style controls to look the aesthetic and JavaScript controls functionality. And these ideas that can be put into dips can be used to isolate certain elements of our page and manipulate them to create something that behaves and looks the way that we want to do so that I d element is an important element. Elements. The reason I brought that up is to introduce the concept, developments, elements or attributes, I should say and reason. How did it just introduced a concept of attributes and attributes basically, are little things that you can add on to tags. They always go in the opening tag, and only some types can have not All tax can have attributes. I am so just are not. All types can have all attributes. Rather, I should say. And so it's defined by hate shima standards. Which tags can have? What attributes? Yeah, if you want to know exactly which ones can have. What attributes agreed a great resource to get familiar. It is W tree schools that comments to you. R l www dot w three schools dot com Come down here on you can follow some basic tutorials to reiterate the point that I've been teaching, which you know there's no harm. Repetition is the motor of pretension, and you can also look at the M the standards for these different technologies. Html CSS JavaScript, which is basically what encompasses HTML five as a new technology. Those tree technologies coupled together, that's that's a steamer five. That's how we build yeah, interactive and engaging websites APS and games, which are cross platform so you can check out the reference documentation appear so that I d is important. Try to remember that you could give an i D to a diff taik, so just be cognizant of that. It's very rare that you would ever create a dip tag without giving it an I. D or a Class A Class is no type of attributes that you can give to a div, so you're usually going to give it either and i. D or a class and most of the time and I d. So just try to remember that it always goes in the opening tag on the bit in between quotation marks there, that is the actual idee itself. So that's the idea attributes T equals the signs of value, and then the value is put between the quotation marks on that floating menu. Hyphenated I D. Is what we will then use and CSS and JavaScript to identify this detect, which can contain all kinds of things so I can come in here and just say, I know we could create a table. We'll do a bit more on that later. But a basic table here table. Create a table role, T or what was it to your top women Just to be consistence but our indentation on inside of a table role. You can have a TV table data, which is a cell just like an excel. Er, that kind of application. So this is where we can create tabular data using tables. So the table elements is the motor on then table rows. Are your Children on TDs? Our Children off the table rules. So that's how you nest them. You can have the money TDs inside of your table role as you like, so you can say like, menu and you item one and you item to Anyway, we know this is just to demonstrate the concept, and if you say that you'll see that there's a table inside of our Dave you won't see did it because it Davis Conceptual were using the development. Teoh created a section off our content, which can then be access to this. I, D and Manipulated moved around, etcetera. But what you actually see is the contents of the table, which is many one and won. Many might do many my country. That's what's rendered to the page to prove it. Let's go over to our browser on refreshed page, which is F five. You have menu item one. Anyone too many white tree. Okay, so that's a little menu that we've created. Has it been styled in any way? We haven't turned them into links. So what are links and how did they work? Well, a link is what we click on to visit another page or Teoh download a file or to interact basically in any way but clicking on something. So to create a link, we use anchors, which again has an opening on the closing take. So the most fundamental attributes for the ankle tag again, actually is always go in. The opening tag is hatred, ref. So hey, Draft is the attributes will use an equals simple as an a signer and valuable assign and goes and wouldn't Biekert GM quotation marks again. And inside of there were going to sign some kind of you are out. And it's just this, in this case is going to be a relative euro because they're going to keep all off our hates email pages inside of this very same folder So this is relative it saying inside, if you don't put anything, order down just to file itself, which is about that HTML will create that soon. Then it's going to automatically look in the same folder is just file a saved in, which is the root folder of our Web project. If you have that in the same folder say you had in em so protocols, extra pages, then you put the so folders name in on a Ford Slash and then the name of the file. So you have to give the exact pat relative to the root folder. So about dot html, which is fine for now. We could do it out. What do you do to? But we're only using this as a basic demonstration of those tax, and now you can see that becomes thinkable cause we added the anchor attack. If you click it, it's not going to go anywhere because we haven't actually created you. Remember about that html tag already about that html page? So what we can do just to show it working is ah, click file and save as I save a copy of this, we're going to call it about still hate team out file. So save it on what changed the title to about and you should see the title den change. I'll open up our index file again because we just change it to about. You'll see we have index and about now. And if we go back and click hit F, I first refresh the page, you see it says test page of Amazing us a. Click The link. It goes to the about page. You haven't changed any of the content yet, but this is a separate page. Look at your UL. You'll see that you are Alice pointing again to our root folder. Hated him. A fight Basics course on the page is the about page, not steamer. So that does it for this lesson. We've learned some of the basic tags and some more concepts, and we'll continue on from here in the next lesson. 5. Common Tags Part 2: This is part two of commonly used tags in HTML, by no means an exhaustive list. But just to get you in running very quickly, we're using these structures to take a look at the most commonly used tags. Then we've already considered the vast majority of them the heading tags, paragraph, div and table for defining on displaying tabular content. So what else, sister? Well, in addition to tables, I'm going to put in a list below is on on ordered list and close off that paragraph and how to be defined. A list well on order list begins with a u L So just the acronym off one ordered list ul. And of course, it ends in exactly the same way. Except that we put in a forward slash, as is the case. But all HTML elements. So you l on How do we define items on the list? Well, we use l i for this item, so I don't order list. I'm water. The items in the list say it's a shopping list. Toot based mild wash. Very idea, Nick. Individual plus. Okay, now, if we save that and open up the gain in our browser in the usual way. Or if you already have it, just refresh the page. You can do that by clicking this bottom I hit hates him on five as the shortcut. And what's happened here is that I have not saved the changes now have we're in the about html page. Click the back about a year ago. We want that to be index html. And if we were fresh, you can see that we have a non ordered lists here, which means bullet points not numbered, and all that the items are appearing as a separate bullet so that was are commonly used tags for creating lists on order lists. Okay, so dibs on lists are used very often in modern hate email, so just be aware of that and be familiar with them. Gives and ordered lists on ordered lists. OK, so we've created that. Of course we need to commit Bring images in. So how would you bring in an image? I m G is the image tag, So remember that it's not image like, um, like that it's abbreviated to Angie Now. The image tag is a self closing tag. It doesn't have a closing tag that accompanies it. You don't do it like this, which is a break from the norm, I know, but just be aware of that. There's a a limited number of tags which are self contained tax. So they the are in themselves. An element on how you close them is by putting a forward slash at the very end like that. And then everything that is contained within that tag is true attributes. So the image is one such tag. So S or C and then assigned the value Trudy quotation marks. It's the source SRC that's going to tell us where the images. So we have an images folder. I'll say images forward slash on waken Call it in. What kind of image we're going to bring in here. It is just a test. Cute cut you get OK, duck say yeah, Jay Peak. Now, when it comes to working with images, you're going to probably need ITER photo shop you can get photo shop, See is to free online. Just Google that or else you can use something free, like or painted up just to kind of change the sizes of your order format. And for my four year various graphics. Now that's took over ourselves. Just find some free images. There are some sources of genuinely free images. You always want to be aware of cooperate issues. I'm just doing this as a quick demonstration of the technique, which is what we are using our own sort of prefabricated images. Okay, so let's see what they have here. The diet will do. That's right. Click on that on Save Image as we'll just put it into D Project folder. Let's remember, though, to create a sub folder or subdirectory. I call it the Images director and inside of there, because just dice has already a J pic. So we're going to add in an extension back to your HTML documents on. We'll just change that name two days and now she save it and go to Firefox. Open up our index page on refresh. We do have a reference boat is not opening up on. The reason for that is that we have capitalized the images folder I believe we have. Let's change up F 12. I'm just bring them back down to lower face. Okay on, then, if you refresh, that's all. Yeah. Make sure we have saved her. Doctor. We have images or slashed ice. J peg. Did we removed the dot We did accidentally. Somehow save back to browser five under. We're bringing in the image so fairly easy to bring in an image. What if you want to hyperlinked the image so you know, this is a store and you can buy a dice break on this little dice. It'll take you to the dye store. Well, that's practiced. Some of what we learned table close the table. We learned how to create tables. What roles? To yours for table roles. Your okay, This is our top role. Is going to have a table heading th andi table heading is going to be the dice store. Great. Only one heading. So we'll create a new row underneath dots you're to your without step forward slash And then would it to York on both dare. We're gonna have table data TD, and it's going to be dice one on the second cell or a table Data TD is going to be the actual rich, which will just coach and paste over here so you can put images down you see inside of and I should be here inside of water elements such as this. So now that puts it in the table. But of course, we need to add an anchor to make it clickable. So hatred equals on, uh, I put the source. Where do you where l in there in a second, listening to put in our closing so you can see it at this image tag is wrapped inside of the anchor elements. It's nested in there that are going to say hitched. You know, http, literally w dot no dice dot com. I don't know. That's a real website will find out. So So control s to save that on. That's tested in the browser. So five on here we have our table, which isn't rendering all that nicely bought. It does exist. We haven't styled it, and you load is dead. Of course, your changes when we hover over the image because it's clickable. I'll click on that if you want to take us to dice dot com, which apparently is a job search website. So that's news to me. Okay. No, we've learned quite a lot of the basic tags very quickly, which is excellent, and you'll see that appear again. In one of her first paragraphs, we put in a bold yeah elements. Well, you can also use italics, so I for italics. Another organ emphasizes another girl. My goodness, another I my italics and you for underlying. So this is an ordered list visible to order, so underline. Save that. Go back over to your browser. Click back. We'll have to reopen the page from Mr President. Closed it. So index. Okay, so here we have are bold, All right, Alec and I are wonder Line. So those are pretty much all the most commonly used tags. Nothing's office of this by any means. But that's quite a lot of the tags, which will be used. So the real power in the room where the real power comes in is when we start adding our CSS and I drive a script to disk old in addition to a few order useful tags. So the only order tag which might be worth looking into is the horizontal rule, so I wouldn't necessarily uses all that often, but it is a commonly used tags, so it's like the image tug it is. M itself contains tax. There's no closing tag, it's it isn't itself, and elements just put the floor slash it end Onda, and we'll put this between all of our headings. Copy. Okay, so if we save that and go into the browser on refresh again, you see that it draws D's horizontal rules. That's enough for at the basic or most common tags. 6. Getting Started with Aptana: having installed uptown a studio earlier. Let's launch it now. I have a short cut on my desktop. You probably do, if not, just go to wherever it is that you installed Thomas. Now, if you haven't used up Tana before, then you may just want to be equals attention to a few of these initial guidelines. So this is not a course on out on a boat. I'll give you enough just to be able to use it to complete the projects that we're working on. Okay, so the first thing you want to do is provide a workspace on what we're going to do is set to be our Web sites directory, whatever it is that you keep all of your websites. Now I have an actual Web sites directory, and inside of that I keep the rest of my website projects as still directories. So, for instance, here's to hate him. Hey, html five basics Course that we've been working with this fire. It's learning about HTML, and I'm going to set it to be the parent directory websites. That's my workspace. Okay, you have to wait just a couple of moments for a time to open up. Okay. Now went uptown of lunches. You get this little start page and your tops will all appear appear. Was your work on a project? And you can see that straightaway you have. Ah, Talyn. Documentation has a link. So if you want to really get into the adept, the meat off working with Tana, which is a fantastic piece of software than you certainly want to click on that and you can go to farms or so let's get started straight away. We're going to create a new Web project. You say that the rotor project types like hate B Ruby rails. We're going what Web project? Which means html, CSS JavaScript. Because that's what we're learning. And we're going to say defiled projects. We're not going to use a template. Okay, Project location. We'll set to be the very same folder that we created earlier. Hates him out. Five basics course for now. Anyway, I call it the same page Team of five. A six course. Let's just try that one more time, Okay? Not so you get the default location here, I believe. Okay. Course the issue that we're having here, I hate email basic sticks this one. The issue that we're having here is that I am because we started out with no pad. Usually, if you're working, adopt ANA, you would create your project structure. True app. Tana. So as a work around Well, Detective created as two separate folder hates him off like basics and click finish. Who was? It just wasn't working, Minister. And now we have just folder with nothing in it but all we have to do. Quite simply, let's go to that Web Sites directory. I will take the contents of Haiti Month for a gym off basics course. That's a way for now, Andi, we'll just copy all of that over. So no problem. And now we have our project file before halftime. Anjali deal one. To avoid confusion in our project. Folders hates him off basics that's integrated. Adopt Ana. You'll see that all of her files are now available. You could double if you're gonna file just about. Open it up there proceeded up. Tana has d syntax highlighting. So things are color coded, basically what that means now, now that we're often on running with uptown A. In the next lesson, we can start looking at some CSS 7. Working with CSS Selectors and Rules: So here we are in Tana. Having migrated our project, we're ready to start working with some basic CSS. Now, the first thing that we want to do the first thing writer that I want to do anyway is, um make sure that you can see very clearly what it is that's happening here. So we're going tohave. Teoh just increased slightly the size of our text. Andi Inapt Ana, You can do it out of control held and then pressing D minus in the plus keys, which is just to the right of the zero k there or on the NEPAD. Actually known Pat doesn't work. It's just the ones that are am just above the letter keys. Yeah, plus and minus will take. So now we can see clearly your text. So C S s, as we mentioned before, is for adding styling information. So we have a yeah tree ways of using it. Basically, we can have external style sheets. We can create a style sheet within the document using the style elements, which is what we're going to do now and then we can use in line styling. So first we'll start by using D styling sheet that's actually within the element itself. And that has to go inside of the head on usually glowed title because Plato, in general terms you would put title towards the top of the head. And but that's reading more about formatting. So here's our style. How do we use this to effect all of this inside of the body while we create rules? Now there are a number of identify IRS that we can use methods of them, referring to our elements. Does most simple way and straightforward Way is to actually just type the name of the elements and then create are too curly braces. So how does that work? Well, those two credit braces, you'll find them to the right of the peaky. Those two keys was like too peaky. We have square braces as well. There are square brackets. We don't want to square brackets. We want to for the braces. So hold shift when you use those keys to get them. If you haven't used those before there used very commonly in all kinds of programming, like JavaScript, C share people suppose etcetera, and CSS so R p identify her here is telling us that we're going to style every instance, both to pee element. We're going to say cooler, I will set to color too. Brown. Say we have a number of key words for cooler bacon. Also use hex values and RGB values. But we'll just use a keyword for now. I will go over to a browser and actually, we goto our project folder there on what is previewed at, um yeah, like an easier way Hoping terminal. You can fix show preview, which is handy would in them good enough, Tana Close to start page. It just creates a new type where you can click into on them. You can see how your code is shaking up. So when he was done for now so that Putin again waas a show preview which is here on brings up that tab, and you can also changed the layout if you wish for it. So now with a preview is appear on the Texas there, anything that you're not going to use very much you can minimize. So your space is being used more effectively if you wish. So here is my preferred way of working to code. For now, I'll just buy some more space by pulling that in on the left. So just dragging around to lay out to suit me. Okay. Now, because of the resolution I'm using for recording, that's probably not gonna work too well, but it's usually what I would do. What I will do instead is just have it as a second time. Okay? No, back to her index page here. So we just said a colder value for all peace. And if you look over here, you'll see that all of paragraphs are being yeah, modified stylistically by that rule because that's an element selector. We used an element selectors So water types of selectors coming here as well. We can use compound selectors. We can use multiple of selectors and one rule that we can say say we want to style all hate . One hate to Andi peach tree as well as hate for elements of basically every heading month. We want to do this to we're going to say, Jackson's decoration. Andi, we're going to underlying all of them just for the sake of experimentation said to save that for toe affected. And now you'll see that we have under alliance qualities, headings change your front se em fun to family area aerial Leviticus. Answer. If that's fine. So those little tool tip they're really handy in the Town of Control as to save stuff I just updates are fun, too. This will give us down a list of the ones that are available. It is contact sensitive. It's only going to show us relevant tool tips with issues times on to say that over here. Okay, if we want to use a spacing information, then weaken put in and I'm a moment of padding se 20 pixels PX that that's going to pad out all of our headings. If you wanted to do that, we can also use them, identify ears. And they mentioned that in the previous lesson and even provided 90 i ds. So we have this Dave down here, its ideas floating menu. So what we're gonna do here? Well, let's just grab it using the ideas. A selector. So if you're using an ID selector, you put a hash character in on. It's actually given us a list of all of the ideas that we've created. So we have floating menu below, and it's recognised at forest Science providing us with that I d, which is cool, but we can just type it in ourselves as well. So floating menu where you could click on it in this, then me provide all of these statements for how we want to a style, this piece of information, whatever element it is that we're targeting true, the I D. You can only use 90 once in your document. That's the whole idea of an idea. It's unique. Somewhat I've got to tell to do. We'll give it a background color. Fred, you can see that our menu has just red background. Now you can also get fancier. We could come in here and say, Hush floating menu that's going to vying straightaway, the active that has de floating Man Utd. And then we can dig by just putting in a space and then adding in something more specific, like on ordered list space L. A. And that's going to talker target all of list items. In fact, we're looking for two TDs table data. So will change that. And in this case, what's a table? Yeah, table table role on TV for table data, and that's going to find our table. We don't need to have to Heidi there anymore. Or do we? Actually, perhaps we do. Floating menu table table role table data will find the div. With this, I d find table, any tables within it and the roles within those tables and then any data's TDs. Any cells within those rules, which in practicality is going to mean the street because they're doing and said it would in that structure on. Then we can provide any kind of styling information we prefer. We can say border one pixel. There's a shorthand here by tree values. One pixel, solid black. Save it. Check. You see that each one of these cells now, how does this border that's one pixel in thickness. It's a solid A supposed to dotted or dashed on its back. You can also give it a background colder, foolish use hex values like 44 Hate for to see how that goes to treat. There you go. Okay, around them hacks value. So we need to provide six digits for hex values. Okay, so that's how we use basic styling. Within the documents, we've looked at using different types of selectors, such as the direct element selector. You can select multiple elements in the rule of well, you can use I DS and new classes, which we haven't looked up yet, and you can dig deeper by adding onto the end. So we have identified our I D and then but in that room for the table within the table, looking for table roles within that we're looking for, did it ourselves. And that gets a specifically to these tree elements. That's the basics, really, of working with styling. We can have external on in line styling, too, and we'll take a look at that time, so that's start for this lesson. 8. Classes and Table Styling: already worked with I DS in our HTML elements. So we're going to learn a little bit about classes now on classes, as is the case with ideas, they're very useful when it comes to styling. So applying styling information to specific elements now that fit into a certain class. Now the difference between an idea and the classes that an I D can only reapply to one element in your hates email document. It singles it out. Uniquely class can be applied to as many elements as you wish, So let's strip this back a little bit. We'll get rid of this styling and focus that was just practice. Okay on was stripped down the body, so that's just create a table. As we have done already. Act on a does a few things for us, which are quite handy. It automatically adds into closing tag, which saves this time. So just get used to that when you add de closing little triangular looking sideways, triangular looking bracket and then the closing bracket appears automatically. So our first table role is going to be our header, which means that each cell is going to be ahead heading cell, which is th were table heading instead of table roll, which is a regular won t instead of Tedy, which is table data, I should say So we're going to make this database. Oh, say employees or something like that. So starts with name. Next column is maybe age on, say, occupation. That's enough for now. If you save that and open up your preview, you see that that's literally all we have. It's not even clear that we're working with a table because there are no borders. Let's go fix some. Okay? So we'll add in a second rule. And this time, each row that we add blow the heading role is going to be an employee. So it's going tohave tree t d elements one for the names say, Richard, Second for the age 28 and Occupation teacher. Okay. And we can go in. And that another one just copying and pasting Jennifer 31. No need to go in and add much more than that. So there we have a bare bones table, which a header room inserted. How do we isolate this role so as we can style it separately? Well, this is where classes come in. So how do we add a class? Well, let's take that role class. It gives you a tool tip. It's CSS class assigned to the element, so class equals quotation marks. It inserts the second quotation mark automatically. And in between those two, we're going to give it to class. Name off a top role. Lower case. No spaces. So now we've added the attribute to the open tag and remember that attributes are always added to the open tag. All actually gets followed the same basic flow. I'm just going to zoom in a bit here to make it easier for you to see what's happening. Now. All attributes follow the same basic format. You have the name of the attribute itself. So what is the attribute in this case is classed. It's gonna be I D or and any number of things. Then you have to assign her, which is the equal symbol. The two quotation marks on then the value top role in this case? Always the same. So that's our class on now. Weaken access that class by typing a dot You remember that ideas are access with a hash, so it's a hash. My I d. Whatever it's called and then create a rule that well, in this case, we're accessing a class dot top row. So how are we going to style? It will have, say, background cooler. That's hyphenated. Andrea List used a keyword red and you'll see that it's actually shaded in the background there with this red color. Big change to cooler to whites. The hex value for that. If you're wondering if if if Okay, Notre thing, that's annoying me here is dot m. Our borders are looking kind of ugly. So what we can do? Ism created Norval table on. We will set our borders excessively will say border one pixel solid A lot you saved at that gets us a step closer and will also collapse the border border collapse. When you're typing out the name off one of these Andi, you maybe forget exactly how it's finished. There's a really useful hockey inapt. ANA control space will bring up this little menu so you can browse to all the options on here we are Border collapse even gives a description, specifies whether the borders for a noun inter collapsed or separated. You can also do it for the options available. So he controlled space again. And easy to treat. Possible options collapse, inherit or separate collapses. The one you want Semi colon to terminate statement. Always remember to distinguish between a colon which is Theus Signer on a semi colon, which is determinate. Er okay. So you can see it at our borders are much cleaner. Now let's open that up again. Now we also want Teoh collapsed the rose. So let's am or the data. So TD for table data on we're going to she will do you vote two TDs and the th is at the same time because they want just apply to boats were going to use the same rule Order on pixel solid black I'm animal Say order collapse again instead of two cups. So you got him? Check it out. Okay, just a little bit shy of what? We're looking for a moment. So Borger fix will solid back table role. Okay, so we might just need to be a little more explicit here, which means specific And what? Our selectors. So if we just say I am, first of all for the, uh, table their table to your TV And where did that collapse? For a second. We're going to add a little bit of padding. Crystal having putting left, we'll set us to five pixels. Hodding rights. 56 months. Okay, so you gotta troubleshoot why this rule is not being applied to our TDs. Here are table data. Let's just make sure we're being as specific as possible. So we'll say Table, table role, TD. So we're digging right down into our TD's. See how that goes. That's just re opened for some reason. And it just wasn't refreshing. The changes country of the explain why that is. Yeah, but it seems to be resolved now. Order collapse. Okay, that's giving us our little division. Now you notice it's not happening to th what am shouldn't be too hard to fix that. Well, just do a ST Ng Th that's what we're doing here is look for tables that finds this table. If there are any others, it would find it as well. And then it says fine roles within them on defines all the roles and then look for the TD. So it finds all of the table data items. But in that table on applies these rules to it. It also does not for the table heading themselves. Th is. So if we say that now we can see that it's all being nicely formatted. And we're isolating this role for specialist civilization using this top parole class, which is in turn being affected here now to emphasize the benefit of using classes in addition to I. D. S on the difference between them. That's make a duplicate of that table so you can see that now we have two rows, one in each table with declasse attribution off top role. And if we go up to our styles, we're only addressing it once. We created one rule for top row, and that's being applied in both cases. So that's Dia. That's the point is that classes will apply to multiple fact as many elements as have that class associated with them on the page, whereas an I D can only be applied ones. So that's working classes on a little bit on using selectors on styling 9. External Style Sheets: in this lesson will take a little time to learn about external style sheets, which are very powerful, as in addition to CSS into our arsenal of skills and knowledge in our use of CSS. So here we have our index that hate CML Page, which we've been working on in the previous lectures. ANDI. You'll see that all over D rules that we've created in CSS so far, including all of their individual declarations with their properties on their values. All of this CSS code which have learnt and apply it, has been created on the hay html document itself. When you do that, that's called an internal style sheet. So in practical terms, out what that means is, if you're putting your style information inside of the style elements, then that means you're putting it onto a hates email page. So it is an internal sheet. Now, if you're creating one page, then that's that's fine, because it on it needs to effect one page. But if you're creating a whole website, then you probably want to be able to duplicate all of that styling information across multiple pages Now, rather than copying and pasting it over which you could do. You could copy this style elements and paste it over into each individual. I am order page, for instance. If you went into dot control, see too cocky, and I came over here and just put it in under the title inside of my head element as before . That would work for both the index and hate. She male pages because they both have their internal style sheets. But that's not really very efficient. There's a more efficient way of doing that. And this is how it works. You create an external sheet, so we're going to go over to our project folder here in Tana on right Click to create a new folder. So this is just a sub folder of To Hate Team Out Basics Master folder. I'm going to call it styles. All lower case on did enter. See, I have this new styles folder just below my Images folder, but not in sight of their boat inside of him. Directory hates him off basics. All right, click on styles and create a new file that's going to be main dot CSS and had entered created so there. I have a main dot CSS while, which is blank. But this is the CSS thistles, dusty, external style sheet, which we're going to use now to affect all pages on our website. So all we have to do is put those rules and paste him in here because the way we write CSS and in external style sheets and in Internet style sheets, as well as in line, which will look at it in another lesson is the same irrespective. And the rules have the same structure, so you can copy and paste between one and the other. Now you'll notice that the formatting has been damaged a little bit in act on. It is a really handy hockey to fix this, just hold control shift and then press F on the keyboard and uptown and magically fixes the formatting. So that's really cool. Control us to save. Come over to index. Now, if you test this in your browser, let's go over to our Project folder. I'm inside of my project folder. You obviously would have it somewhere. And incidentally, you know, even if you don't have uptown on your system, you can follow these lessons. But as long as you have the same structure. So a master folder, Hastings five basics indexes and it all your order hates him of five pages will be in that you have to sub folders, images and styles. Your style sheets like main dot CSS we just created will be in there on your images will be inside of images logically enough, so that's double click on index to open it up in our browser. Now you'll see that he styling information is being applied. And if we double clicked on about, you would also see that no starling information is being applied. So why why is that? Well, it's because it's because we go back toe up. Tana, we haven't created Rated a link between the style on the page. If you look at that there, there's nothing saying, Use that style sheet. Is there not an index or in about, Thankfully, that's very easy to fix. Just under title. Now we're going to go in, has to be incited ahead. Element. That's the rule. We're going to create a link just called Link, and it's going to have tree attributes. The 1st 1 is Ralph for relationship on. We're going to set that to style sheet or just saying the relationship of this think is a style sheet. Okay, next one is going to be type text, ford slash reassess and you have these pop up options, which are helpful as well. I'm finally hate ref, you know, number using hate treff to provide a u R l in our lesson where we learned about using links are using hyper hyperlinks, which was the anchor tag. Well, we used to hate draft with the link tag as well. Hate ref equals. Just be careful where you put your equals. Make sure your cold matches mine perfectly and then close it off. First of all, because link is a self terminating tag, you put the forward slash inside of it. There's no closing tyke have used a couple of those already on, of course, record just say main, but that wouldn't wouldn't spine specifically to gm the external style sheet that we're trying to use because it's diet inside it to Styles folder. So just remember to get the exact path. The first thing you need to talk type is styles forward slash on because there's only one style sheet in that folder. It kind of just figured out that's what we wanted and it took it. But we can change it. Everyone to. We don't need to, So that's correct. Styles forward slash Maine That's the SS. So now there is a link on. If I copy that over also to about dot html and then we go to our browsers on just refresh, you see that the link has been reestablished and now the styling information is being applied. And this will also happen which our about page. Although tourism much content, you'll notice that the styling off these tabular cells has been altered something. Okay, so that is external style sheets goes. 10. Inline Styles: So far, we've looked at external style sheets. Internet star. She's the final form is in line styles. So how do we use in line styles? In line styles are applied directly to an element. Trudie Styler attribute. We've worked with attributes before, but not the style. Attribute. So style equals quotation marks on the values go within the quotation marks. Usual team. So how are we going to affect its H one tag? Well, what we might do is to supply a specific style to it in the sense of maybe modifying somehow. Um, the font size. Perhaps, I might say, 20 AM I want to see how did updates in our about that html page. Okay, so it's after making that particular I hate. One element huge, if he hasn't done, is all of them to prove it. That's create another hate one immediately below H one. Call it second H one, and if we refresh the page, see you have a second teach one that is just adopting the usual styling and folded her. So the in line style has sort of overridden the font size information for dot element and made a huge because we said it's a huge 20 m m is a reference to the size of a character, basically so 20 m as opposed pixels. You're just using a different system of measurement, so you can use P extra pixels or use MPM. Okay, so that's how we use in line styles. If you want to use multiple ones, you can just against separated by semicolons, always end and with a semi colon. For each declaration inside of start, you know some styling information that you're providing letter it be true and external and internal style sheet or whether it be in line and every declaration has the same form. You have the property of the value. You have the colon separating the property in the value and you have a semi colon terminating it. I always want to stop same format so we can go in here and change the cooler as well and say am to make it orange. Why not go back and five and now we have an orange heading. So it's the combination of these tree methods of using our CSS that will make our work, um, more affluent because we can create the external starter sheets to generally style all our pages Democrat internal style sheets to make adjustments to the general structure of that specific page of the general style or aesthetic of that specific page. If we need to make certain set changes that it wouldn't apply to order pages, and then we can really get in, dig down specifically to each individual element and make changes if we need to. But the best approach is to do everything that you can external. And then, if you can't do it external, try to do it on an internal sheet on. Then, if you really have to get really specific, extremely specific, then you can go in and use in line. So I just used that preference that order. Incidentally, that order holds up for em. Ah, for the preference that the browser will give toothy styles so in line is considered most important. To have the most weight internal comes after that, and then external. It was like you're stacking them on top of each other. It starts at the bottom, that corpus everything generally. But if you have something more specific internal than that's and that's going to override external and however if you have in line that that's going to override internal. That's the general flow. Anyone toe how it works, Okay, so now we know how to use internal styling as well as using our how to use in line styling as well as internal and external style sheets. 11. Intro to JavaScript: So we've learned some of the real fundamentals of working with HTML and CSS. So the third technology and our Web triad is JavaScript that started learning some basic techniques with JavaScript. So baby steps first. What is JavaScript? I can't assume that you've ever worked with a programming language before. Well, the programming languages used in very simple terms to provide instructions to your computer to tell the computer what to do. Statement by statement, line by line instructions written in a language death a computer can understand. Now we have many different languages. Structured languages. There are very popular ones, like Job all C plus plus C sharp JavaScript happens to be the language off the Web, just the defaults, scripting language or programming language of the Web. Everybody uses it all, but developers used JavaScript, and it's part of the hates team are five standard. So it's an important language to learn thankfully, and it's not all that hard killer. So JavaScript is integrated into a HTML page. It can be integrated in multiple ways, as was the case with CSS. You can have it in the head. You can think it externally, and you can even put snippets of Java code into attributes, which is pretty cool. What's the most basic thing that we can do? Let's bring up our preview window again and see what we have created so far, and that's really justice. Tap this table, isn't it? Tabular information. So we learned how to style diet, etcetera. Now that's creative booking. We'll go at the top of our body here on a credible. Okay, quick me, the quick enable There it is. Now we're going to create an on click event. You see that there are quite a lot of these on events available within the JavaScript language, which can be used with their are our bulletin. So we have all of these different events. It's work just browsing Trudy's menus and clicking on the different items and reading the little descriptions that it gives fires. That means triggers or starts when the element is right. Clicked on to context. Menu opens on Context menu We have events for every eventuality here in the context of our document under our browser, but we're looking for is on Click, which is probably the most commonly used event equals quotation marks, probably seeing a similar for Miller here, Formula here to what we were doing with them. What are attributes? Same format. You have the attributes identifier, which is on click and event for JavaScript and equals. And we have thes quotation marks to contain the gold. Now inside of there, we can write some JavaScript document dot documents is just basically em a reference to the hate email document that were working in now So we can access anything within that, and we can use functions to access certain certain parents of the documents. So we might say, for instance, documents dot gets elements by my d it actually pops up there. So if you want to avoid spelling errors because it has to be case for case perfect get element by I d quotation marks and needed to when contained value, make sure uptown it doesn't messed up when you accidentally and you know we'll just use d the single, which you'll find on the ampersand key there or sorry at the attic E just right to the semicolon. Okay. On click. Um, repairing my cold, I accidentally deleted one of d quotation marks at the end here, which matches doing at the start. So for every one that you open, you need to have something that close. Is it the same with the singles to be opened and closed? So get element by I d on what I d will be. Give it. I will say m date older doesn't exist yet. That's created. I put paragraph elements a didn't have to necessarily be a paragraph, but that's what we're gonna use paragraph elements. Well, say M date appears here when de above Putin is quick. Okay, Nothing connecting this cold, however, to this element yet because that date holder ideas not been applied to anything. So that supply it will say, hey D as an attribute equals dates bolder. So now we're connecting this code to this element. True that I d at this dark cold system is, ah, typical off object oriented languages. So you accessing properties or functions of an object. So you something that's something that's something like bicycle dots, wheel dot tire. You know, you're breaking it down, digging further into things. So document looks at the whole document Get on and my D's a function we provide that with an i d value. So it searches through all the elements finds jammed with that I d. And then we conform further functions. So we're gonna say dot inner ht and help Now interview HTML is a property that we can access over the elements that we've just identified. True, it's identify. So he singled out that owned and I would enter Hate CML We're saying, Let's look inside off the date holder element, which is his pitak and what's inside of it. Well, we have this date appears here on the boat book. It's clicked will be called Retrieve that HTML even if that had order tags and stuff inside of it, it would receive all of it, not just the text, and but we're not looking to retrieve it. We're looking to change it. So we're going to say equals not How do we get the date where we have to get a new data object so used the new key word and uppercase de to access access that object 80 e on. Do you need to pray? Provide those two and parentheses? Okay, we don't need to put on the values inside of those parentheses because we're just creating a standard date object. Javascript knows what to do, so we'll come over here. And if everything has been written, correctly, clicked a button it feels in the dates. Entire dates, including day, month and the actual date, the time everything is in there. We can subdivide that an access certain parts of the information on do all sorts of things . But that is the most basic supposed thing that you can do it with JavaScript. And yet it's pretty powerful. So right there just but one liner cold. Look how much that we have learned. We've learned to work with events, so events are used as attributes inside of elements specifically, for instance, you can use it on on click event, but in a book, which is what we just did and then you would in your quotation marks. But you can put in statements for JavaScript for your job script code. We should really terminate with a semi colon at the end there, so we will, and so document accesses the whole document. Gettleman get element by ideas, one of a number of functions, but this one allows us to access an element specifically by D i D. So we look for that i d Search is true. It finds that i e. That i d is associated with this paragraph tag. And then we have the inner dot inner HTML property, which is looking for the HTML. That's what inside within that element, which is this, and it just changes it. This is equal to sources. Forget about that. Basically changes to this creates a new date objects and that feeds to date into here. Which is why the contents of the P tag that or that PM the paragraph is changed when he flicked a button on click triggers. You'll notice that each time we do that is generating and new dates so he can see the second this changing. Okay, so that is really quick. JavaScript basics in the next estimate loca creating user defined functions which again builds on the power. The raw power of Javascript as a programming language for our websites are APS on our games , which, all of which can be created with HTML five 12. User Defined Functions: in this lesson, we're going to expand on what we learned in the previous by creating our own functions and then triggering them within our HTML document. So before we do that, and I'm going to ask you just to use, ah, hockey that we've touched on before, hold controlled shift and then hit F on the keyboard, and that's going to all auto format, the documents just make it a little bit easier to read, because while we as developers do strive to keep our code nice and clean and well indented , it can, from time to time, begin to get slightly messy around building. And when does not flood accord on the page or a lot of tags except for a lot of content. Eso control shift f inapt ana is just this wonderful miracle tool that basically fixes that for you. No, How do we use functions? Well, we've actually already used functions. Believe it or not, pre defined ones get element by ideas, pre defined function and what is a function in its most basic form. Well, in its most basic form, you can think of a function as a block of cold that we can call anytime we want in our coat in the execution of our page. So it's a block of code that we group together. Let me say this specific block of cold is reusable on useful. So we're gonna give it a name on when we call. That name is gonna fire. It's gonna do things now. More complex functions can also accept information in return information so you can feed information into them like an algorithm, and it can spit out and new values. We're not going to do it out yet. We're just going to create basic, um, hte email or basic functions. So we're gonna do basically something very similar. In fact, the same is what we did in the previous lesson. But we're going to do it using functions, which is I am step forward because it means it's reusable in many different places. We can call it anytime we want to. So to provide functions to write functions, we need to add a script element just like the style element. We can put CSS rules inside of that. We can put JavaScript functions inside of the script down. It's not going to say function is to keyword to create in your function. So function on we'll call it show date show current states maybe thorough case s at the start and then chemical from then on. So that's the name convention. That job script generally follows that stick witted. So the first word, basically in the name you leave the beginning letter of that word lower case with Andy beginning a beginning header of every subsequent word in the word group will the Oprah case and we don't leave any spaces between them. So it's basically one big amalgamated word is what you get. So show date. Now we've chosen this name. Of course it's arbitrary, and it could just as easily be as long as we write the connecting cold correctly, it would work. But m it wouldn't be very readable. So we want to make our arbitrary names readable, and we stick to chemical convention because that helps with the readability factor. Okay, you'll notice that I put in these two parentheses, which are on denying and zero keys at the top of your keyboard. Just hold shift to use them, and we have our curly brackets or curly braces, which are to the right of the peaky on our keyboard, and we open and close those as well. Now we said that a function is a collection basically off cold, like a code block and multiple lines that are executed when we call that function. But all of those lines, every statements that's called a statement. Each line is a statement, and those statements all go inside of dysfunction here in between these two curly braces. If we were providing the function, which am any arguments than those arguments and would be retrieved using variables inside of the parentheses now we're not going to get into anything that heavy yet because we need to get comfortable with the more familiar, the more basic. So that's just I am triggered that statement again. So we said Document is used to retrieve the actual document were working in now so we can access anything from here in our page, Get elements by I D. Is just a handy function is provided to help us find I am elements in the page using a 90 and the idea is still there date holder from the last lesson. So we'll use that again. Hyphenated dots. Inner html remember, that's a special property. It accesses the contents of that element, which is dis here, really equals. So we're changing it to a new instance of the date objects, which is an object that refers to the current dicked. So every time we click our button, we're going to trigger dysfunction with a trigger. Yet do you think on the codes there of these for the definition of the function we've created are Or we provided our keyword function, which tells the computer this is a new function that we are creating ourselves. That's what that function key word means. It will put that in as an upper case f it wouldn't accept it. You can see because, as we've mentioned before, on to reiterate, because it's an important point. JavaScript is case sensitive. So upper case f is not the same as lower case F. So, Laura case F, it's turning blue, which means that it's recognizing it now as a keyboard. So function then we provided are arbitrary name, which is now the identifier for dysfunction Show date. We used chemical lower case s over case D, and if there were more and words Dan m, they would follow the same pattern. Now we can come in and say show current data for making really specific and again the same chemical convention. So we leave it like that. Show current date. Why not just remember to keep the name descriptive? It should be almost like a verb. So show current dates is verb inform, isn't it? It's an action and something. It describes what the function does while your name should do that because it's more descriptive is more readable. If you come back to a project two months later, you'll still be able to understand what the functions air for. And then we have our code down here, which is providing the new date, too. I am just get on my I d function on the Internet and hate in HTML. So it's what switching it out with date object. The contents of that what that returns. But the on click of hint is blank. It's that hasn't been provided with value. So what do we do? Well, we provide the identifier for dysfunction, which is what What is this arbitrary collection of characters we provided to identify dysfunction, which is show current state so type that out character for character. Perfect show current date with the fantasies. So when this witness quick is gonna trigger show current date, which is appear on, it should execute this line of code. So that's tested on it works. So we've just created our very first user defined function. Congratulations. 13. Variables: So we've learned already quite a bit very quickly about working with JavaScript, accessing the document on through that and using functions toe access and manipulate HTML within that document in within certain elements which we can identify true ideas, for example, and even worked with the concept of objects object oriented, you know, accessing properties within objects or objects within objects and properties within them. You know the concept of bike duct peddle dot rubber on pedal, etcetera. Dr. Cooler. So that's what this doc logic is. Your digging down from one big object into smaller objects would ended and even properties of those objects and you can change them, retrieved them. So that's our show. Current date function will keep them. I will create a new function function. So we're going to fight a function on to print. Okay. And this is going to help us to understand why we have to provide these two parentheses at the start. Do you have this opening one on disclosing one on their found on the nine on the zero keys at the top of your keyboard? Just hold shift to use them. Well, this function needs to values to compute which means they need to be provided so it needs to have something that can represent those values inside of the function, because those values would be different every time it's used, the user will decide what those values are going to be. So we need to have some kind of a symbol, while the variable, basically is that it's a symbol, it represents some form of data, so it stores it in a way and on duh, it's abstract like algebra. Similar. So we'll say value one on value to So we have value one on value to and we're going to add them to each other. So we'll say fire value tree is equal to value one plus value to so there we're creating a new variable called Value Tree, so that now exists because we created it with this keyword vier. We don't have to use the keyword Vairo Pierre, that's an exception. Just kind of knows that we're creating variables because of the context. Down here, you have to explicitly say, but you can do keyword. Vira Vira value tree is equal to value one of us value to know what will that be? Well, it will be the sum total of both of those values. We don't know what the exact value, what it will be because this is abstracted depends on the values that are provided, doesn't it? So that's use that same basic cold that we used before. Comments by I D. And it's to date Holder, isn't it? That's the i D. I will access to Inter Head, she male equal to this time, we're going to set a deeper to value tree. So whatever those two values equate to, it's going to echo that. And now, with our on click event, instead of triggering the show current date function was, will them trigger t add handprint function we just created and we need to provide to Value was first about a value for value one number, so we're going to say four and then for value to Maybe we'll say eight. So if this is working, we should see 12 appear, so that's saved that on the Refresh F five. Or refresh your preview and then click on 12 appears So we've successfully created tree variables. We've added them to get her to create a new value for our third variable and then we have echoed that to to screen. So that is the basic use of variables with Florida further, of course, in subsequent videos. 14. Arithmetic Operators: in the previous lesson. Learning about based the basic function and usage of variables we were exposed to something called an arithmetic operator, which most displaced symbol on it was used to add to values together. Let's learn about the odor, our medic operators, so we can use the plus, of course, yes, but I'm not to make copies of dysfunction and will say, Subtract this time. Subtract in front on to subtract values We used T minus key, which is predictable enough, of course. And if we went down here now and called the subtract function instead of the ad function and then go over here, refresh Page five Quick is going to subtract, and it gives us minus four. Just makes sense. What's four minus eight would be minus four, So let's go on and make another copy on Learn About. Another arithmetic operator on this one is de multiply, and that is less predictable or obvious. It's D Asterix symbol, so add in an astral there so far, value tree, so value tree is equal to value, one multiplied by value to well, multiplication operations are performed with this and gastric character to prove it. Let's change the names because we can't have two functions with the same name. We call this one multiply print, and if you come over here, well, we have to call it first and multiply prints. Stubble click and we go multiply in French refers to it. Now save the index page, refresh and click 32. You can confirm the mass there yourself now, so those air tree So far we've looked at a tree. Arithmetic operators. That's the term again. Repetition is the motor of attention I am. We're duplicating the wrong function. Okay, so if you can multiply it in, it's logical that you must be able to divide. So we'll say Divide and prince body one in value to again all of the same things. Acceptable change D Operator, Dis operator is going to be a forward slash forward slash character, believe it or not, represents division in almost all programming languages, as does the gastric represent multiplication and almost all programming languages. So just these are fairly constant er consistent symbols across most if not all, programming languages. Okay, so we have ads attract, multiply on divide. So this should now be divided to test our final arithmetic operator Divide and Prince. Everyone gives us that the result of the division operation, their order, ones that we can use that are common as well. Like him, we can say increment in front increment in print, on for disabled. Just take one value value one and then we'll say, uh, value one possibles. I'm just assign value one to the inner HTML on post close will just take that value on incremental by one, so we'll call it here. I provide it with an initial value like increment on print on. We'll give it the value of two. So what? We should see its tree if it's working on B. So that plus plus the combination of those two characters that is a nutter, our medic operator, and it's an incremental just adds one on top of the value on you could probably predict what the deck REM Int athletic operator will be just switched to pluses for you guessed it two minuses. So if we just trigger dot now instead to sacraments and print, we still provided with two than what you could go get well to minus one. Here's one. So there we looked at all of the important or most important arithmetic operators we have plus, which adds to values. Together we have minus which subtracts the second body. From the first, we have multiply, which applies to values and gives the results divide, which divides, devalues and gives the results and plus plus which increments by one on minus minus, which Decker mints. So there are the six most common, most important arithmetic operators in javascript that great. 15. Dynamic Data Type: in this lesson, we're going to start taking a closer look after data types in JavaScript. So to do that will create a new page right click on the HTML five basics project or equivalent on your system. A new file. I'm going to call it simply data types. Album word, lower case dot html close out index for now. So that's rebuild our shell. And one time we probably haven't used it yet. It's doc type tag and specifies the HTML standards should be used for this document. You can just input hates, you know? Okay, for a team of five, that's generally fine. Hey, html head title. That's a learning data types. And of course, no page would be complete without a body now inside of the body. I'm going to create a paragraph. I'm going to give that paragraph on attributes. It's going to be an idea attributes I d. A sign quotation marks to contain the value, and it's going to be called Show because it's a shell. There's nothing in it yet. I'm gonna put a script into the body itself. Now it's good practice, generally, to keep our functions in the script element. Multiple skipped elements can be used on a page. It's good to practice to have a script on inside of the head, as we've done before. Keeper functions in there because we can call the functions at any point in on the page. But if you're putting script and in that you want to execute directly on the page without action being required on the part of the user, then the best way to do Dad is to actually put a script elements on the page. However, it is that you want to execute that code. So first, once our body is being created, the crater p elements, but it's empty. It has this I d. You can put something in as a placeholders like this. This is a shell because that will go away once we replaced. You know, hate she melas we've done before. On down here is where we're going to start working which our, uh, data types So have we used data types yet? Indeed we have, although perhaps you weren't aware of that. So what are the data types that we will use most commonly? Well, we work with numbers, comment this out so it's not writing errors. Commenting is just where we provide instructions that are readable by programmers like ourselves. Up we share our cold. Somebody else they can read the comments. It's not red by the computer to put in a comments. Just start with two Fords lashes and it'll turn green. That's a comment. It's It's ah, human readable, not computer readable. So I'm going to say data types, common data types. So we have numbers. Number could be more specific. That could be a integers, and it could be floats. An integer is a whole number like one or 52 or 76 R minus two or minus 78. It could be a positive remind or negative, and it's a whole number. Floats have point values. So afloat would be something like 1.4492 or 17.64 tree or minus 42.759 That's the difference between integers and floats. Images are whole. Numbers could be positive or negative floats our numbers. We're decimal points, so they're more exact, More precise. We used him for precise calculations. As you've seen, numbers can be assigned very easily using our variables. I simply display creating a variable. Whatever you wanna call it is equal to se four on. JavaScript knows true context that we're using just not as a character, but as a numerical value. So if we wanted to provide that as a character value, so not the number four, but just a character for like in a sentence I am. Then we would have to put quotation marks around it. At which point, yeah, JavaScript, would you view it as a string as a string? So what's a string? It's a string of text, basically a string of characters. So it doesn't matter if we have numbers in our text. If it's a string, so I can say number now is equal to four. That first value is numerical on, so we could perform mathematical operations on it and conjunction with other numerical values, etcetera. This is a strength. It's not a long it's no longer in America. We could contaminate it with other strings. I had to make sentences and paragraphs and things like that. So even though we're seeing for in both cases, the quotation marks tell I am the tail JavaScript, basically that were using this as a particular data type on. It understands it that way. The fact that we're using the same variable we've created a variable here and gave a dis numerical value. Denver Assigning a string value that's actually OK in JavaScript and a lot of languages, you have to specify a data type for a variable. You would say something like this. Say fire number. This won't be bothered in JavaScript, but this is what you were doing. A lot of languages. Number int for integer is equal to five. And then that variable would have to be an integer. If you said floats 10 I would have to be four playing 567 or something like that. If you said strength is equal to whatever than that, I would have to say A strength doesn't matter that we call it a number. This identifier is just an arbitrary collection of characters. We make it meaningful for ourselves so we can read it to understand what it means. Putting a computer. It doesn't matter what collection of characters you use here, and it doesn't refer to the data type for the computer. It's just it needs to be meaningful for us to remember what we're writing. So a lot of languages will require us to be specific and explicit in our typing, the way we apply data types or variables and stick to that. JavaScript is not that stringent, so it has something called dynamic type. It can dynamically changed the type of a variable at will, so we can change repurpose variable at any time, which is handy. You can use the same variable for all kinds of different things and practice. You might not do it at so much, but just know that you can. It's possible. I'm a working with strings, which is a collection of characters. We in sconce we wrap the characters. Four deaths ring in quotation marks, so everything between de Quotation Max is a strict or is included in the string. That's how it works, Okay, to prove it, it's always good to have a proof will come down here and at the end of our script will have some kind of aligned echoed out to our shelves. Documents was a document or a shell element was a document not get element i d element by i d, which we've used before. It's a very common function and just watched that town. It isn't accidentally mess up your cold. I want to say, Ah show that's tea bitey that we provided for dispute And that's inner HTML legal too number, which is the variable that we created earlier and assigned to string to. So you created doesn't as a number because we signed a number value. But once we assigned a string value straight a JavaScript repurposed up dynamically to be now a string variable so the type can be changed dynamically. Let's just see that worked. And it did, because you can see that it's filling that paragraph, which has this initial body. Look, This is a show to everything between the quotation. Max is included. Industry Okay, so dynamic type is probably the most important concept you want to take away from this video also with numbers, and we have different types, like integers and floats. And even though we're not specifying that in the cold, just understand that underneath the hood, JavaScript is converting from one type to another type. For us, it's using this done. I'm dynamic typing system soldiers, always a type data type associated with the content over variable variable. We'll always have a type at one point or another, but it changes the type depending on the type of data that we provided with. So, for instance, if I were to say now number is equal to document dot date or just two dates even you date, I should say, uh, it's changed its type to date object, which is a different data type again on you'll see that it actually echoes that out now to date. So date in itself is a data type because it's its own object. I have changed the type of number to a date. For instance, we could say number dot and you can access. So ah, corn moment. Is that the one working for? But we'll leave that for later lesson because we're probably getting a little too advanced for this. Um, this tutorial. I don't want to flood you with too much information, but just understand that basically, we have these different types. So another type of data is boolean, which can either be true or false, which is a handy P data type to be able to use for a lot of different situations. Those are some of the most common object as well. Now we can create our own objects, which is really neat, and give them properties and methods, which is basically, you know, variables and functions within the object. So age equals 24 age would be property of type on number or int for integer onda Uh, yeah, so the object type would be safe. Person and property would be age and you could design it in America value and you could have a function such as, you know, walk person dot walk on. Uh, you could provide that mattered 10 with a value for how far to walk. That's the concept of object oriented objects with properties and functions or sub objects . And that's why we used his dot syntax all the time. The document object. We're accessing a Notre object from within that get element play i d dot inter hate smell, which is a property dental that equal to So that's enough on the basic concepts of data types in the next lesson will pick up from there and look at some slightly more advanced stuff 16. Data Type: Strings: Okay. So, carrying on from a previous lesson on data types here, we're going to take a look at one very important data type, which is strengths. So make sure you have data types of X. Hey, html open on. We're going to delete the contents of our script here. Except for that last one document. Get out. But I did that in their haste email equals, we'll leave that there. So 0.1, put in the comments. Strings can be come, Captain ated. What does that mean to contaminate strings means to combine them. Okay, so how do we do it? Fire String one equals my name. That's one strength fire String two equals is no spaces anywhere by name equals George or something. Always remember to terminate each declaration or each statement with a semi colon and always have this assignment operator, which is the equal symbol basically telling that it is variable created. With this I d or yeah, his handler is going to have this value semi colon terminates that statement so it finishes it. Now we have these tree variables on. We can go and print one of them off if you want. Like string one. I go over to our preview of data types, and my name is being printed, which is the contents of the 1st 1 What if we go and add in a few pluses? String one plus string to. Thus I put it in the space just to make it readable, and you don't have to put the spaces in between them. If you don't want to, you could leave it like that's but that I just don't think that's is readable. Personal preference controls Shift F will out of format your coat anyway, so that's what I just did. Andi Aktuna agrees that May had inserted to space. Check on you'll see My name is George now does no speed spaces in there because space, a blank space in text, is in itself considered a character. If you don't provide that character in the string data, then it's not going to insert it for you. So we don't have those spaces here and here because they're not in the strange. You'll see we don't have any spaces after my name you don't have a space after is I'm not going to put them in what we're going to do It's a string one plus quotation marks space. So we're adding them into the string that we're creating for inner Hatch team up ourselves to those space. And if you saved up on checked preview again, Casita has actually inserted two spaces. My name is George, and we can even be really tidy and go in on just out in a full stop to the show is George. We have to put in our close it, of course, Captain it. So this plus symbol is and it could be used to add numbers together. So is that an aromatic operator in that context? But in the context of working with strings and it changes to being a concoction. Ater coordinates strings of text to get her into one. And there we have it. Okay, now, that's pretty much the basics of working with strings. So thank you for watching 17. 16 Objects in JavaScript: Okay, so we've looked at various data type so far, including how we can work with strings in various ways, on working with numerical data and other data. Type in stencil that could be quite useful is on. Very powerful, I should say, is the object. So how do we work with objects? Okay, we're going to use our data types that HTML file that we were using previously on in here we'll create a new object, will see fire user equals. So if I had the same basic process and creating it and but then this is where it changes. What we use is now we create the M curly braces that we use when we're creating function declarations. And then we provide properties which is name value parents. So we created name for something and give it a value that's a property. So we're going to say the user has these properties, so user dot it's a name and he used colon like and CSS to assign a value. Now name is going to be a collection of characters, characters or text paragraphs. Sentences is exactly etcetera are stored in strings and strings and the value for strings we indicate that without your double are single quotation marks. JavaScript doesn't discriminate between those two so we can have Aitor. I just prefer to use doubled. And we don't terminate with a semi colon. In this case, on a call it Jack, say our user is called Jack. In fact, will say first name capital and first name is Jack. Last name Jones age. This is an American value. So if we put in strings that's 27 that would not be in America Value feeding into it and it would it would view it as a string. And so, just to understand the difference which we have examined before will say 35. So that's in America value. Without the quotation marks gender we'll provide. That is a string male occupation. And we'll set the occupation to be, Yeah, the string as well. Which means we will use quotations and we'll say, Yeah, Captain. Okay. And at the end of that, we're gonna put in a semi colon just after that curly brace. That's not necessary with function declarations. But when you're declaring or when you're setting up a object and it is, it is necessary So saying that now, when the red and yellow markers I'll go away in uptown it and you know that it is technically nothing wrong with your syntax, which is good control shift F will just make sure that you have good formatting. Okay, now, how is that useful to us? But basically what we've done is located in objects Onda. We know that an object is a type of data. It's a day to type on its variable, but it contains multiple variables. Are multiple properties would in that one object? So it's almost like you container for properties and methods because we cannot provide function properties, which are matted. Still, they do things. For instance, if you coming to her and say am something along the lines off full name and full name would then trigger am omitted, which gives both the first name on the last name together. But we won't do that right now just to get the idea across that you can provide matters as well in true, object oriented programming fashion. So let's retrieve something from this. Let's say, Well, come down to our document that get element by I D line on. Just get rid of all of that string data that we had in the last lesson. Okay? And hedged. Email equals on will, say the user. Some kind of a welcome for users. Say say the user has filled this information into a form and we've retrieved that they welcome. Plus, you can, Captain eight. I must say I am first name. In fact, it's user dot First the name plus a space plus user does bust name on. Uh, I see where that gets us. Welcome, Jacque Jones. So what we've done is we've actually retrieved two properties from the user object the first name property, which is here on the last name object, which is here, and we've inserted appropriate spaces and extensive that. Now let's go a little bit further. With that sentence on, you'll see the value of using objects as a logical way of storing our data. So put that in close a user dot occupation. Now you use about age plus year old. Thus user that occupation thus next. Okay, save that. Go back to your preview and it says, welcome Jacque Jones, a 25 year old car governor. Now, the wonderful thing about this is that and that will be relative to whatever information has been provided by the user. So that's the power of variables on specifically, in this case, it's the power of objects. You can have an object that represents something in the real world. Even in this case, the represents data about the user and that can be retrieved. So am the power of object oriented programming is that you can group all of this information logically in a way that emulates how we sort of perceive the world around us outside of the digital round. So it's it's a great way to program on JavaScript makes it possible to do that, as has been demonstrated here, I just put a space, and after the not that I want to be anal or anything. Five. Five year old There should be a space between that, not your old man, 35 year old capital. So that demonstrates the power of object oriented programming, and we'll destroy Go a step further about this in the next lesson on work with with a method 18. 17 Object Methods: Now let's take a work with objects a step further and introduce a metric. Now, a matter it is actually a function associated with an object. So so far, we've worked with the sort of simple properties where you assign ITER, a string valuer in America. Value could be a Boolean value, like I am. Plus, he was a 1,000,000,000 quickly just to demonstrate that say, marry Married on deck tonight to be true or false was married is false. So he's single and, of course, separate all of them with a comma. So he's a single car on, uh, those air basic properties, you know, But a basic value can be free to can be reset, etcetera. But methods are properties that actually trigger functions and then return results. So we're actually putting a function. We worked with functions before putting a function definition into the object, which is pretty cool. So we're gonna call this one. Ah, full name function. Putting your friend to see is, as always, with function definition. And of course, we're going to put in our curly braces. Now this type of function has to contain a return. Keyword motor functions can contain a return. He were depending on the nature of the function. But when you're creating a method, I am especially a method like this. Anyway, it is going to have to have a return, keyword, cause we need a return value. We wanted to give us the full name. So we're going to return. They concoct nation off two properties off this same function. This which refers to the object of workmen at the moment, which is the user did stop first name applause sticking cat and they put a space in between them and then just stop bust that is the entire Eddie off a meta declaration. So now we have a method called full name that we can call and to retrieve the entire name And what those basically just adds de first name and their last name together and put the space between them. Now it's a route of the simple matter, the basic method. But it is a matter. So we'll come in here. Ana will remove some of this cold all the way back to designer the assignment operator There on, we're going to say I am full. Full name. Now, when you're calling any kind of a function. In fact, it has to be user doctor full. Now, if you're calling any kind of a function, even a method over an object, you have to pride prevent Prentice's, whether you are feeding information or not. And if you, if it dysfunction accepted barometers, for instance, it just had a prominent called on Who's asking, then you could provide some information to feed into who is asking Variable. We've worked with them arguments in previous lessons. What we don't need to do that here. This is just a method that has been designed purely to return, a value that you see that it is doing that. It's amalgamating these two properties to first name property in the last name property, and it's returning that as a strength and that's being printed. So that is how we work with methods, so now you can create properties and methods of objects 19. 18 Scope: so having mean, having spent some time exploring data types and variables, objects, properties and methods, we certainly learned a lot. And one really important concept that we haven't looked at yet is the concept of school scope. And programming basically means Where does it exist, where it is a variable exist on in JavaScript. There are two possible answers to that question. It either has local scope or it has global scope. Now there's a very clear logic to dot, in essence, looking at our data types html here. If the variable is declared outside of a function Dan, it has global school, and that means no matter where you refer to it and it's going to be viewable was going to be available. But if variable has local scope, that means if it's created inside off a function, um, you're not going to be able to see it outside of that function. So that means that different functions can have variables with same name. So to prove that that's great to functions, function F function. One shouldn't one sure function. One will have a variable declared, and we'll do seem to give it its parentheses, first oversights and we call it in by my hair is equal to use the same value. Okay, so function one has a variable called my bar. And it has this the value of one function to it's going to have a variable, my Vira as well it should be called to now if I friends from here same way we have always done it dinner, you know, equal to my father. And just copy that same line of cold over 21 We can call either one of those functions over here and just say, Get rid of that line completely or I won't get rid of it completely. I'll just commented out with rent about comments in a previous doesn't Andi. What I'll do is I could just make function costs. So I'll say one when I called one that friends want to the screen because it recognizes that this variable is local to that function. So it knows to use the assists my fire because local to that function. In other words, the my vire in function to it doesn't exist as far as when someone is concerned and it's the same do you to be around a call function to. It hasn't my viral with the value of two, and if we go over here, we'll see that that's set to do so when we call that function, it knows its own local variables, and it ignores all of the other local variables, so other local variables would be ones that are declared with in order functions. So the points that is being demonstrated here is that local variables, anything with a local scope that the key word here is scope. It only exists within the function that it's been created inside of, whereas global scope means that something is, it is available everywhere. So if I wanted to refer to string one from what in these functions, I could because String one is global and to prove it, that's put in string one on a string, one for both of them, String one. So String one is a global variables being set outside of any function declarations. You can see that there so it's global and it's accessible from bowties functions. So no matter whether I call em better, I fire off function wonder fire to ah fire function to down here and you see that my name which is the value of string. One is being printed. So anything with global scope or, in other words, if declared outside of a function, it's accessible everywhere. Anything. That local scope declared inside of a function is only accessible inside of that function and that scope. 20. Conditional Logic: having learned much of the basics of JavaScript At this point, we're going to get into a little bit of practical application on what we're building towards. Here is a bit of form validation, using certain special string methods that comic JavaScript. So let's create a new page in our Hates Him on five basics. Project a new file and we'll call it form validation. I'm not going to do the actual validation in this lesson, but in a subsequent one, we need to build up to it. First. Let's quickly create our structure. The station will call it. It's good practices. Pause not to forget dark type declaration. So just double quick and tasty and out it's fine. Tana can get a little bit fidgety. Please be aware of that. But overall, I think the problem is that way to calm the cons with Tana particularly. I really appreciate this de tool times. Our suggestions now that's creative body. Okay, we need a form. Actually, we'd only to form yet We're gonna put in a p tag con tentacles here. I will give it an I. D. Of Shell has beat it before. Okay, Now that's create a script and function condition. Conditional logic will call it. So we're gonna look about learning. But if statements conditional logic with if statements click equals conditional logic. Okay, If statements allow us to evaluate properties or values on then depending on the state reacted in different ways. So we can say if we need something to evaluate first sold. So you fire no is equal to tree on. Uh, we can say if no is equal to one created conditions for that crowded artistic condition create and arguments or, uh, statements that will dictate what happens in the consequence of that condition. Improving truth. So you'll notice that we use to equals rather than one. Well, that's because if you look above here, you see vayrynen, um equal street. We're using a single equals for something different. It's an assignment operator. It assigns a value with designing the value of tree to the variable number. So we can't use an assignment operator for evaluation because it's a different purpose. So in javascript on, then, all programming languages, practically the differentiation is that you used to equals for, um, conditional. So if you're using a conditional operator and then it's two equals so comparison. You making comparison between numb on one. You're saying if gnome is the same as one, if they're equal, then this will prove true on whatever's in here will execute. Otherwise we'll move on to our next if statement which will be else, I say. If numb is equal to two and provide conditions again, I'm finally no, if no is equal to tree Ana, then have different conditions. There are different statements for each one, so it might just put something in their document that get elements by D. It's going to be shell dots. Inner HTML is equal to it was one Copy that. Okay, copy. Least control shift. Death taught a format on what has changed These two to entry. If we saved that now, on we test no. One mistake you just made here is in. You can't have a non click really on on that kind of elements. So we need to create a button just fine. But it's put a button on meat. Could me I will give it a non click conditional logic and a semi colon to terminate that statement. That function call. Okay, so we'll bring up our preview again It was tree. If I go here on changed at 22 on, uh, try again. It was too. And just for the sake of being thorough, try about one. It was one. So that's conditional logic. Evaluating a, uh, A value for multiple possible states or outcomes. Multiple conditions. Key points to take away from this single equals isn't a signer. Double equals is comparison. We use that with if statements okay to evaluate conditions, to see if two values are equal or not, and then react accordingly. In the next lesson, we'll look at alert boxes and such like 21. Alert Boxes: Mr Sin going to introduce the alert box. So the alert box is a handy little matter that we can call. I'm just going to really remove all tree of these statements and replace them, which calls to the alert function. Andi. It pops up a little alert box to tell to use or something. So, for instance, if it's evaluating to warm, done will say it's one even just value this one. No copied up line control shift after auto format on We can just fix the lights under movies. Unnecessary empty spaces. Now when I say if that file on, then refresh the page on quick. I got this little message saying the value is one. It's an alert box. Those can be very useful and form validation to warn the user if the content that has been submitted true reform is not ballad, it's not usable. So remember that one just lower case a alert parentheses, quotation marks and then the message. Terminate with a semi colon. Most useful one work from a conditional logic in the context of, for example, for invalidation 22. Form Validation: So it's time to do something useful. Well, what we've learned so far on the application that we're going to use is that a foreign validation, as you mentioned in the previous lessons. So we've learned about conditional logic comparison operators, assignment operators, variables, etcetera. There's a type of variable that we haven't worked with so far, and it's Do you rate on an array basically is variable that contains multiple values, usually multiple related values. So just one array that we can access called forms on its stare in the documents. And it's an array of all the forms that are available in the document, and we can access it true JavaScript on. We can use it to access, then form elements within that form. So we're going to change a few things here, and we're going to delete that function. We're going to lead everything inside of body were going to start again by creating a form . Okay, Now this form is going to have name. It has to have a name. We're going to call it form s so called details form. We'll hyphenate it. Maybe details form. Okay, on inside of that, we're going to have a couple of input elements. Input type equals to text, so this is very type in their email, So we'll go. Name and email, Andi believe, defined the size 22 characters on them. It's good practice to always terminate a single tag elements. One of these four slash is at the end. As we have established previous lessons, we're going to have a second input element, and it's going to be of types of Mitt. It's just submit book Onda Value movie equal to submit. So that's what's gonna actually say you've changed up to something else. If you like. Two seconds. Submit details just to demonstrate the point that it is separate details. The type on the value are not the same type is dissecting has to be a waiter, submit or text or a number of other options. But this is anything we wanted to be submitted, but it shouldn't mean force a value equal. Submit. If you open the preview you see we have to submit details button coming back to our code. Now we've created our form, so that's cool. That's pretty much ready to go next. We need to write some cold. We're going to create a function. It will be called validates, you know, And we're going to call it from the form. So going to the open tag, I will say on submit. So when this form submitted that events triggers when we click this input booking here. So the aunts admit, goes inside of the form and not the input on itself on submit equals and will say validate , you know, and terminate with a semicolon. As always, whenever you're calling a function, making any statement and cold, that's what you have to do. So we have dysfunction, validate email on The first thing it's gonna do is create of our called contents S A is equal to on This is where we were talking about that. Remember we said about it A race. Well, we have an array cold documents doctor forms on to access its contents. We used the square brackets and we're looking for the name of the form that that we want. So if you had several forms with several names, we could enter any one of them because they're all available. True, this array of forms, but the one we want to access is called details form. So details form. And then within that we can access a second if you like array off input elements within the four. So that's handy, isn't it? So now we've selected to form we want with the first square brackets. Don't put a dock between them. Second square brackets is going to go a level deeper. So our looking for one of these on the one we want his email dots value so that value will give us whatever d m. The value with a content of emails. Of these email input Element is of the type text, so whatever to use their types in here money and then click submit whatever is in here that's going to be the value it will be stored in contents. So it approved up. And let's just use on alert, which we learned about in the previous lesson. This troll contents. So that's test up and you know, you no, yo yo. So we know that so far the logic is working and everything else it's all connected up. We're getting the value of this input elements true deforms array. And then this civil ray, which looks into the input elements, would in that form itself. And then we're using this value property toe access. The value of that actual element alert is trying it to the screen, which we just did as a test. We don't want to do that right now. We're gonna create a second variable on. It's going to be that care. Now. Every email address has to contain one of these, doesn't it? Sets the at character Hot car is just the name that I'm giving this variable because I know that I want to be checking for that character now equals on we're going to say contents. That index of index off is a string method. So we're when you're working with characters Tali working with strings, aren't you? String data. So index off and we're going to look inside the string, which is whatever the person entered into the field. And we're going to say, Is there on at character to technically what we're actually checking for here is the position of the act character in the mail address. But the great thing about Index Off is that if there's no out character at all industry, then it will return a minus one. We know that. That's just how it works, so we can use that to our advantage. We know it will return a minus one value numerically, if there's no at symbol at all in the text that it's examining, which is contents, which is basically whatever has been put in here. So it's gotta have an at symbol for it to be about email address. So this is validation. Were going to say if and we learned about comparison operators didn't mean the difference between the assignment, which is a single, equals in comparison, which is double. We're going to say if that's a car, which is whatever index of has returned is equal to minus one. So if it returns minus one, we know then that there's no at symbol at all. We're going to ascend and alert to the user not a valid email, that this else we can say so else because we looked at else it before didn't way. If in Dallas, if have their own conditions else is the one that you comported optionally at the very end of all your conditions. In this case, money have one order condition that basically says if none of those were true, then do this. So we're saying the 1st 1 is saying if it's legal to equal to minus one and that means there is no at symbol. Otherwise, if it's not equal to minus one, then we don't really care where it is in the string. Because Index overturns basically the position of the character in the string but already care about that, and as long as it's not minus one, then we know that it's there. So we're saying else alert. That's a very nice evil AGIs. So let's test it and see if we written are cold correctly. So, Jack, not about it in a dress. One thing we forgot to put in there is an return False on this side. Have a semicolon after turn. OK, and this test that again. Jack Sonata Balloting on the dress Jack at Hotmail. That's a very nice addressed you see, So it works. We're checking whether or not the value is valid or not. No, Obviously it would be more to be doing down there. For instance, you could check if there's a calm adopt in the email address because every email address has to have a dot And in fact, let's do that now just to kind of bring it forward. That extra step so far dot car is equal to content. Start index off exact same thing. Just a doctor. It has to have a dot There's no such thing as an email address without at least one dot. So say if, if a car is able to minus one honesty and or even just or so, how do we look for or we used these straight up middle bars. I don't know if you've ever used it before. It's usually a little left off dizzy key on your keyboard and just to the right off the left shift key, you'll see it there. You have to hold shift to use it. It's the same kid at the back slashes on. So hold shift impressed Jackie, and you'll get one of those upwards buyers. Well, you need to provide to adores, and that's a comparison operator as well. And it basically checks if writer of these air true, so if a car is equal to minus one, or if Dakar is equal to minus one, and basically what that means is if either of these characters is not present than this is not a valid email address dot car equal to minus one. So now if we say Jack at, whereas previously, that would have been treated as valid, not a valid email address. So it has to have boat Jack at hook mail dot com so it hasn't at, and it has adopted that will be treated as violent. That's a very nice email address. So now we can see the rial, raw force and power of JavaScript coming into effect were actually able to do things with it. So you've come a long way. You should be proud of yourself, but we're not finished yet. 23. 22 External Scripts: so, up to this point, all of the scripts that we've worked with have been internal scripts. That is, the job script code has actually been contained within the HTML element itself. Now, as we learned in our lessons on CSS, you can have internal and external CSS our style sheets. That's also true of JavaScript. We can link it in from a separate page now. One of the advantages of that, as was the case with external style sheets, would external scripts. You could connect them to multiple pages, but just a single a script element. So you can write the same cold just one time, and we use it in all of these different pages. You can call these functions from anywhere, so that's a very useful thing to be able to do. Another advantage relative to our I d Hear Tana, is that am thanas. Cold completion will be much more accurate and much more effective if you're working in a dedicated doctor. Yes, file. Let's just the case with Tana so that having been said, Let's Do It will copy our function here out of or quoted writer out of our foreign validation that html page I just use control X. To put that on, we'll go into hates email basics here. We're gonna create a new folder and we'll call it scripts. Lower case is to convention. We follow for folder names, trips and right click on the new scripts folder and create a new file will call it main dot Js. So here we have remained that she asked file. We can just paste to control of the our function and control control shift effort to auto format that don't think that space where he needs to be there, that doesn't really need to be a writer. Air Force Staff did it right the second time. So we have our validate email function stored in two separate JavaScript. It's not connected in any way yet, but what we can do is just use that old element now and inside off the first tag. We're going to use a source attributes which reviews before I am on order at elements on. We're going to point Teoh scripts on a town even helps us here forward slash main that Js save it on when you test, we should still work on a I called from the previous less and still functional, even though it's not on the hitch. C'mon, Page. Because we're importing it from this main that Js file that we've created, which could talk which will now contain our our functions, which is very useful, isn't it? Okay, so that's external JavaScript files. Very useful team to be able to use. 24. 23 Canvas: great. So we have enough basic or from the mental introductory knowledge about hates team, male, CSS and JavaScript to start working, beginning to work with some of the more powerful features. On the most important, one of those is really the canvas, that element, which could be coded with JavaScript to introduce graphics and animations. And it's opened up a plethora of possibilities with Haiti and now five and in line of APS and games and all of these things being developed. So it's an important one to have ah, fundamental grasp of before we move on to more advanced courses. So let's look at that. Make sure we have a basic knowledge of it. We'll close out for invalidation that HTML We have a function here validate email in our main that Js So we'll continue to put our functions in there. Well, just link all of our subsequent pages to that same JavaScript file. So back in our HTML five basics page, we're gonna create a new file are full project. It should have said we're gonna create a new file on them. We'll call it canvas. Got HTML. So this is our canvas test page and real quick. We'll just set up. The skeleton has established before, but hates to five doc type declarations could be very simple. Just put a hasty mail. That's all just html there at the end. So Paige team elements. You know the rest. We'll just put together very quickly. Canvas sandbox for college then, buddy. Yeah, now, before it. But in our campus were just link in our scripts that we were using, which is main dot Js in the scripts folder. So under title will put in a script elements and the attribute is source SRC equals I'm gonna say yeah, scripts in the chess it down here on the body We'll put in our canvas elements So this is the new element for creating a canvas and believe it empty there for now on. One thing we need to do is give it an I. D. So we can access it directly. True are JavaScript code, so we're going to call it canvas. Quite simply, we could say or main canvas because it is possible, of course, to have multiple campuses on the same hate email document se height is equal to 400 or say for 80 just kind of standard dimension for games on the Web, traditionally for 80 and with vehicle to it's exploiting 6 44 80 Put that in front of height even because that's additionally how we think in terms of those measurements, isn't it? With my height 6 40 before 80 I would put in a little bit of cold here that will just chilled Render if I am. The canvas element is not supported due to an antiquated browser on old browser version pumping the user to update so browser is out of date. He's upgrade now. We've already created our external javascript file, haven't we? Mainly Js So what we're gonna do is create on, uh, the function that we call from here. McAuliffe d and shin draw canvas function so familiar with from function declarations by now function definitions. So we're gonna have to variables. The first was going to be a fire on. It's going to be a canvas equal to document. Got to get element. Get Alan. So you see that in the external file the M, the tool tips or too cold completion works a lot better yet element by i d. When you're using an external JavaScript in that time on the apt on the I. D was main and main campus. So main campus is the I D. And were returning that to campus as variable. That's going to hold it, and we're going to take one from that tense. I'm going to say context, which is our drawing context. It's an object that we're using in JavaScript toe access GM. The two D context for drawing so via context is equal to canvass dot get context and just put in two D with a lower case d posh off with a semi colon. So what I've actually done here is we've created this drawing compass function ourselves. We've given a two variables. One is canvas on, be a sign the element off the canvas to it. So I am. If you look back here, close that out, you can see that we have this canvas elements with the i. D main campus. So by accessing a true that i d. We're feeding this element into that variable. So accessing a true campus now and then the context were taking from from that variable, which refers to the canvas elements that we're getting to contact to T context, which is an object that we can use to draw, so it has all kinds of drawing methods. So now that we have our context and before I do any more, what I'm going to do is actually called that script So we can say in the body Say we'll put in a script and what is put in the function. Call on it Waas draw canvas That's just going to call the function from the main dot Js script. So any function definitions, as we learned in the previous lesson anyway, in any function definitions that are in and attached Js file on we're attaching it appear and we were linking it are accessible. Wouldn't your hate senile documents? So we're calling draw campus. I'm reconnecting at true. Just get element by i d line finding the main compass. Trudeau. So next thing we need to do is use our context and the methods that come with that. So context stopped on. What we want to do is change the filled style, which is a property equals, takes a string on them. What we'll do is give it a cooler value, okay, in context dot Phil rectangle. And this isn't method, so it takes four arguments, which is basically X. Why Dan, With on tight now we're going to fill the entire and the entire canvas, which is 6 40 before 80. So that needs to be 6 40 I for 80 to fill the bolting with this ham style. So they change the style color too black. We're feeling a rectangle now, using that stock color that we've set on. If we preview it, we're having issues. Well, let's see what the issues are. Draw canvas. That's just make sure we've spelled everything correctly. Phil Rectangle, Phil style can I was to get context context. Canvas equals Doctor the kid Armand by a d main converses. It actually called me. And I miss that is called main campus. That's okay. I'm gonna changing names for a second names of our variables just to simplify what we're seeing. Use abbreviations now, just to show where the boundary is off D canvas element. We're gonna put in the style and it's going to style main campus. I'll use a border one pixel solid Having sure. Let's put that in the needs. I'm just check out our congress to make sure everything was OK. So we're inside of the body here. E have our script title are style. The head is okay and body canvas, main canvas, hyphenated control shift just to improve the quality of our formatting. So it has an idea, Has a with has a height. You and scripts draw canvas, which is that it is called trough. Endless spelling is attend to cool. Yeah, under free preview. There we go. Okay, it's working now. I couldn't tell you exactly what and we changed that made it work sometimes a tonic and just be a little bit slow on the uptake. Yeah, Best guess I can give So there we have the basics of setting of canvas used junction functions then which you can draw which which are all based on this context element What is context Object? I should say which we retrieve from the campus. So get album but a t usual ting We've done that before in context Great new variable on the sign it's you just get context object So now we have this object in a context variable and we can access its properties and its methods to start styling And those are the basics of work on my campus 25. 24 Building a Website: in this lesson. We're going to take what we've learned on put into application, but working on a project on it's going to be a Web design project. So what we're going to do is going to create a new project. New Web project. We'll go with defaults down to call it and first website and to enter Casita. An empty folder now appears on the left hand side of your project. You there. So the next time you want to do is create the structure we're going to create some. So folders the 1st 1 will say images. Great. And Notre Holder on Recall that scripts he had another one and we call that one style right click on first website to older styles. Really? What does that the tree main sub folders that we're going to need? Of course, we need to create our index page because every single website has index dots H do you know ? Okay, put in our doctor type declaration. So that's our basic structure. Now, I want you to look at the resources for this lesson on. You'll see that we have this Zip folder called images. Download that and then we're going to extract it. And we're going to take those images and put them into our project so we can use them to build this basic website of ours. So welcome to extract. Here, get rid of that. Okay, so we're gonna take content in that images folder cause we already created a subdirectory called Images on a copy. Copy does and then like to go to our Web site directory, first website. Excuse me. Images on pace to control. Okay, so now we have the images that we need a complete those because we don't need to come back to him. And you can just check and confirm that your image is actually there. So the first thing we want to do is build out the basic content. We start, of course, with HTML. Which is D yeah. The overall container for all of the elements within our HTML page html document head title page, Cybermen games. So I'm going to based systematically on a redesign off EU website precise moment games, which is a company that I had. So just to give you the context, it's always good to know what you're working on. Don't just sort of blindly right quote and you should have a project to concept purpose now inside of the body Were going toe. Have something called a rapper. It's going to be a div on we mentioned if tags in there, the early lessons on hates email in this course, and we're going to give it an I. D. It did was basically just something we used to isolate. A certain region on the page creates like a rectangle that weaken control and move you can . I was money. Imagine wanting that could be inside of each other as well. So this one's going to be rocker and everything basically is going to go inside of that rapper. Okay, inside of Rapper, we're going to have another two tiffs was going to be an active i D. Because content, hyphenated content, main and beneath content Main will have a second of rights. Okay, and both those two just inside of Rapper We want to add something else, and it's called a header, which is a new hate team of five element. Actually, let's put that inside for the moment. Look without inside of him our container or content main we'll come back to in a minute because I was going to be this until later. But it might be better to do it straight away. We're going to create a knave element. So now is new to html five as well. Before 100 would have created a div, and you would have given it an I d off horizontal and have or something like that. But now we have this nav elements, which is used to house and basically lists of links. So anchor hatred if equals index dot html All that you can copy it up a few times. Say, make four of them. And then, uh, home games. Lower case G for the link, actually uppercase G for the link text games courses. Okay, see courses, case courses for the text books and, uh, contact as well. Okay, so there we have our basic navigation menu. Onda. We could, of course, preview that inside of AP, Tana, and you can see that it already aligned it Horizonte Forest. So whereas d by default, that would not be how anchors would be handled and and say, you know, an order list which would be blocker. You know, that kind of an display? It's a model. It's using in line here because now have just assumes that you're working with a horizontal menu. Of course, all of that could be changed in CSS. Okay, so at the basic navigation set up, that'll do us for this first lesson. 26. 25 Website Project Pt 2: So let's continue building out the structure of our hates team. All documents put in ahead of elements and we're going to wrap it around our navigation control shift afters Teoh correct our formatting and evolved and have elements on two and sort. Insert a new div and it's going to have the i d off Lobo logoed. If inside of that we're going to have an image elements and set it to the local image, which is in our images folder, I will give that a 90 of local image are there, Will I am G 90 equals logo. I am G right on our header. Should have an idea as well equals top header. Now we can get rid of this one for the moment, but we may use it a little later on. So if you check your preview you see that you have a local loading up you can't see to dip . But it is Derek's containing that local. When we have our menu, a little gives Let's reopen all of that. So, uh, there's d h ing on page again in content Maine. We're going to use and articles now. So article is a new element that's been introduced into hate to my five. It wasn't in hated him off. And we can use it to structure our page in two D sort of distinct sections off content into articles, in a sense, so we can give them headings and even give them paragraphs and all of that sort of thing. We're going to start off with a heading here, will to say article one, the A man with a paragraph inside of that and say, Main body All right to go. Andi Weaken duplicates that article, of course. Pasted, paced. So you have three of them now in the main body. Just make that Article two in this one article tree. Obviously, this would have actual meaningful content. We're just getting to get her structure at the moment, okay? And then right hand bar. We can also put in some articles so I can take the same sort of data and put in a couple of articles. There might be styled a little differently so we can say side article side after cool one inside article to accept. You might also change from page one to say h trees or something for the sidebar because it's smaller. Okay, but you can check your preview. She saves just refresh five. So obviously we haven't styled anything. They haven't positioned anything. The CSS, which means that it's all just displaying and in line. And if you load any Web page just written properly and on the Internet without etc assess, and this is basically what you see, just all the content dinner in a straight sort of vertical line. But that's boring. So we have to style that information online, and that's where our CSS is going to come in now. We're no strangers to CSS. At this point, we're going to right click on the Styles folder, and we're going to create a new file. It's going to be main that CSS okay, hit enter. You can start creating some rules. So one of the first things I'm going to do is create a rule for the rapper. Remember that the hash means we're picking an I D on. We're using the I D rapper, and that's right here. We're going to give Rapper a size with so am, let's say, with 1024 pixels. Andi border just so we can see it For the moment, this is the only permanent one pixel dotted red. If you go into a preview on refresh what's going on? Of course we have to connect it. Let's not forget about connecting our styles. Onda. We do that with a link. So link a draft. You think, too? Uh, styles. Maybe that's CSS. Very good. Okay on it's always good to him. Tests in the browser and his money browsers. Just possible. Worry when you're developing for the Web, because every browser is just like you from weight off interpreting Hey, html, CSS and JavaScript. So let's go to our Web sites directory on duh our first website here and will open up index . Okay, so we're not seeing this red border around our wrapper at the moment, which is fine because we are finished. So come back over her to act on it. Andi, let's just make sure that everything is sort of mapping up, OK, so just give is in fact wrapping around everything within the body, which is good, because that's what we wanted to do. We're gonna say marriage and left motto on margin rights, but it so the margins are to the areas outside of our our elements. I am pretty areas that side of our Adams and that sort of pat them patting isn't isn't the word that we want to focus on here because we also have padding, which is inside the element. Patting is between. AM the content of an element on this border, and margin is between the border of an element on the borders of do it around. It's around it. So it's just kind of spacing things out. Really Okay, it creating an auto margin here and texts. Nine. Center. Okay, mistress test them. Still not a plan. Styles main. Let's CSS bias. We have to specify the relationship, don't you? With CSS, that's not the case with Started with a JavaScript in Haiti my five anymore, but it still is the case with them. CSS text is It's OK, so our relationship is style sheet Nazi. Is this style cute? There we go. So that's the red dotted border that we added in just to show us where our content is coming in, which is good. Onda, we want to go into the body here on gonna take that text align center rule on put it up there. I'm texting line inside of the wrapper itself is gonna be never I just want put in a text line, rule it all for the rapper itself. Okay, so you can see the usefulness of this dotted line for destroying us where our day was actually appearing with handy in that way. One thing we haven't put in content wise yet is I'm just below Thea the right buyer here, they want to put in a footer which also in CSF in Haiti. My help for would have been handled as a div with a 94 footer. But now we actually have this folder element in 18 05 Which is handy. You can say, you know, copyrights, five games, 2015 or something to that effects. Okay. And if you go back to a browser, you're seated. That little bit of content appears as well. So let's start making things look nice, because, uh, that's important, isn't now we're going to start accessing some of our ideas here. I don't Teoh use the menu, which is handy, and McDonough so put in your hash symbol on. And after a second or so does menu will appear. We want to style first of all, the main content, which is content main on. We're going to say floats left Andi, give it a with on set. The with t believe was that with to 70% off the parents for now. Okay. And we're going to create another rule here for the right buyer. We're gonna tell that to float, right? With 30% of parents, I'll make this 69 just to create a little bit of space between these two elements. So the content should float left. The bar should float to the rights to make sure we can see them. We're gonna put in our borders are temporary borders that we used to both as well. So we can just copy that on saying it just makes it easy to see where d the borders of each element PR appearing on the page and visualize. Is that for us, Which is useful. Okay, copy their online that night. It's very good. I think my mouse is on the brink. Okay. Coffee show shift after auto format go. So you concede at him our borders are appearing on. You can see it is even in the space because be I didn't use up all the percentage we put down turkey for right bar six tonight for left with views. A little space of 1% there the with which is set by container overnight before pixels set by this rapper her. All right, we haven't styled are footer, which is why it's all sort of collapsing in on itself there. So we're gonna create our footer rule effects. Just footer. Because we're using one. I will say m their boats don't left twits 100% background fuller. Okay, so there's a ram Are footer appearing at the bottom there. Great. I don't want to use that permanently. All right, so we have our logo in you ever menu. We have our content area and I ever Cyberia as well as their foot or put in blocked in. So great. We've made good progress on two will continue on with that And in the next lesson 27. 26 Website Project Pt 3: welcome to part tree of our section on building out the website. So an important project for solidifying what we've learned and concrete ing it in our memory. Now we're going to need to establish some kind of a theme that we can use while we style our page. So a color scheme is really important for that. Onda. We're going to base to color scheme around ah, local. So I'm going to open up that logo in photo shop and we can get to hex values directly from that which is important and useful Libraries, Websites on first upsides images. Very good. Great. So I don't know how much experience you have with voters up. I do have a course on board a shop which you can take a turn. It'll before I don't before dyspepsia six from scratch. Search it on you to me. If you're interested, zoom in here on will take a color swatch on the pick colors. Here's a larger sum politic treat points Okay, a single point sample like tree after he after he f is more interested in. So our first text value is going to be tree after tree. If that's one and cooler. I just use no. Had to keep track of these so we can come back and get them very easily. Notes on and money. Plain text editor will be fine for doctors office. So it's tree after you after you value there on this green as well, which is like a different different points. Okay, so 85 20 tree. It's a middle 85 20 tree. Great. And then something to contrast that. But so I'm gonna do Is them control you to bring up your saturation here? I'm going to switch to Hugh Not all the way over there, but just okay. And then I'll take that quarter value E tree 82 f. So it was a tree cutter values we can work with. We have a gray, a green ally in green on a kind of a reddish orange. Yeah. Cool. No. How are we going to style our page information? Firstly, And that's come in and work on our menu. So we used knave Didn't way. So we can say now I don't want to use a night unidentified just to make it very specific. So this particular enough now on the I D off and actually header Was that when we used wasn't in two seconds? So we have our head or there. We have to snap inside of header and Okay, so header, maybe just Tedder. We just want to make sure we get our path really accurate. We have top header. Better hashtag header space on. It's coming up. Okay, That's the first rule that we want to add. The first selector even want to add on the 2nd 1 We're going to copy this, paste it on. We're going to style the anchors inside of that. So here, for now, I will say, And with 100% of parent, the background color, we'll set to disgrace and, of course, needs a hash to start for two. Note. It's a hex value. Okay, Heights, maybe awful. All right down here in our knives. Going to say, patting left when I am and M is basically decides of ah font character padding. Right? Well name having top two pixels. Adding bottom two accents, background color. I'm going to use this limey green or whatever. What? You want to describe it? Take that hex value. Anyway, I'm pasted in All right, and finally Well, let's test what we have before we wanted next. Little bit over here. Five. Okay, so we have this gray background and we have our and our menu items appearing on top under center line, which is what we want. We have our padding appearing in there and everything else. So I'm happy with that. And the text decoration, of course, is is off and we don't want it to be blue. And we don't want to have this underscore. So or Thea underline decoration. So we need to change that. We're going to say text text decoration on will change the quarter. Which automatic applies to text? Is them whites or F? If Great. So that's what we were after. We want GM individual items to respond as we hover over him. Don't worry about this horrible red boulder, but away. We're just using that individualization purposes, that's all. So I am. We want to each one to react as we hover over it. You don't need to use javascript to create that kind of interactivity. And you can do that with CSS and we're going to use a pseudo class to do that. So we're going to say a header hashtag header as we did before, nap inside of that anchors inside of those knaves on. Then, to use our pseudo ah class, we put in a colon, not a semi colon, a cold, and Andi we want to use to hover judo class. If you want to read a bit about it, click on it and read Over here it says the hover pseudo class supplies while the user designates an element that's a pointing device but does not activated. That means, uh, cursors over the elements. For instance, for example, a visual user agent could apply to suit a class when the cursor mouse pointer hovers over a box generated by the elements, etcetera. So now that we've added our pseudo class, we're going to say that the background color changes to disorder hex value that we took cash semi colon to terminate, as always, and we're going to change padding slightly on the top and the bottom padding top. Look calm. Four pixels and padding bottom will also looking for pixels. So back over to the browser and refresh, and you noticed that color changes off the menu item that we hover over, and it also just slightly sort of adds that I am spatial emphasis by adding an extra couple of pixels on the bottom and then the top, which is pretty cool. So that doesn't look bad. Good. And that's that's that for Lesson Tree in her Web development projects will see you in the next. 28. 27 Website Project Pt 4: welcome to part for and are about development project here. We'll continue with the styling over HTML elements. So we're going to style are articles. Now, let's, uh, great rules for that. So let's just create a kind of a generic article rule. So Article H one h two hates tree 84 h five and H six. So general rule for Does it is going to be put in here, honey headings basically inside of our articles what we're seeing inside of any article going to say, background color wits Paris type, which with 100 percent on background color, will be dis h. You'll notice that there are a lot of really hand tools that are given to us in them, Tanna. Which is why I like to work with I am. And this is one of them. Anne Coulter. Values that you've used so far in the project will be presented to you very usefully in the menu. Okay, so we're going to use that great background The color of the texts, of course, needs to you white, which is hash. They're usually six values in a hex code. Will your new short hands like tree efs will do for for White. If you want to be really kind of and pedantic about it, you can put in all six. Isn't wrong with that. So let's check that out and you'll see now that the headings and everyone of articles have this great background and yeah, text, it is white. Now, articles were going to left liner texts. Text the line. I am. In fact, I'm going to put that into a more generic rule for articles, article next, left patrol shift after fixed formatting five. Good. And the footer needs to have some styling as well. So what, you're going to use one foot or so just referred to directly like that, and we're going to say background color on did that same thing? Color use whites fixed line. I believe that center specified. It should be, but gonna get rid of these red borders now cause they're beginning to annoy me. Probably annoying you because you're ugly. So just find anywhere that they put in them. Um I mean, what use a nicer one in certain areas? All right. Good for that, Dr. Red Border is just not pleasant to look at at all. Now What we'll do is go into our article rule and we'll put in a border. It'll be one pixel again. Pixel doctors. There's not gonna be read. It's going to have the great value, which is the tree after tree after course needs to be cold and after border. And they have the articles now patting zero for articles and having zero for headings in articles. Okay. Uh huh. No pics. That actually what we might do a little differently here, rather than messing with padding is article Border one pixel saw daughter day. Just take that rule of the moment. Work on a little later on. So we'll use one of our CIA, says comments. I just commented out For the moment, CSS comment basically begins with a four slash on gastric and ends with an Astrakhan performs national. So just wrap up anything you want to comment out with that. Okay, now, So we've styled a lot of the basics for a website here, and when the next thing is we might want to do is put in some kind of a slider and that's what we're gonna work on in the next lesson 29. 28 Website Project Pt 5: so welcome to Park five project in building our website. So we're going to continue with some of our styling information, finding that this is what we have so far. So we're gonna put a border around our articles without any sort of space at the top. Now we're gonna do that is that we can remove to comment. We put in the last lesson on we're just going to come in here to this rule. For all of the headings. Inside of articles were going to say marriage and top zero pixels that takes it away. But we do want to have some space between articles, and right now they're completely flush, but every other element. So to do that, we'll go into our article rule itself. I'm going to make a marriage and in their marriage talk. But we're gonna make it one end, which is basically the height of one character, like one character of text, and and that creates this little bit of space. So that looks a bit better. And we might use that same margin for our footer. Great. Now that we have some basic structure in place, what about a slighter which is a very common feature on a lot of websites. Well, we can come in here into our content. Main section on just both the first article with that and something else, and it's going to be our slider. So, Dave, I d equals slider active. I'm going to use an ordered list inside of you and ordered lists. We're gonna have this items, and each one of those list items is going to have an image on. It's going to take one of the images inside of our slider images folder, the images, slider images. The 1st 1 will be say, Space Chimp Copy that based Based. So we have tree me and a pretty sure next. Okay, don't want happened. Eight adventurer dot He and you know Jay Peak. Great on the next one will be That's like cowboy PNG. So let's just make sure that we have in sort of type down and get incorrectly. I don't believe we have have images slider images, spaceship ship, space, chimp ape insurer on. It's like how boy, I just have to him reformat so it can read more clearly what's happening here. Missed item. Well, I Okay, so we have our Div. The owner list closed here. This item we started him destroyed him. Okay? It is an issue with that, for some reason. So just copy from somewhere else and paste it in again. Changed us too. Control. Okay. Whatever was wrong. Anyone? He's fixed now. So we have our tree images inside of retreat list items I d equals one. I d equals two. I d equals treat on a cycle. Trudeau's ideas to show one after theater after theater, the only to have some class as well The class is gonna be Yeah, marketable this Copy it around to all of those list items. Okay, so each one has an individual I d want to entry. And they all have the same class height. And finally, one of them needs to have an in line style that sets display on, uh, display to block. But these for now, and we're going to have some cold that basically is going to hide out of theatres. There's going to cycle that so Dad displayed block. It's set him for one of them on the altars are set display to known on display set to known , and Alan doesn't doesn't grander, So they're all in the same position. But only one of them shows at a time. So every few seconds got a cycle between showing one image 10 showing an extermination and show me and the next image after that. So if we check our web page, obviously nothing is happening yet the images that just there. So we need to get rid of this bullet. Of course, on we can do that. Over here in our CSS and indeed list, we can just put in a style quickly here, which my duties, your take style. So you're going to say this style way also want to pull the images over to left, which is going to be easy enough to do. So you say left Imagine is zero picks and see where that gets first. Doesn't get us anywhere. Really? So we're going to put a minus value and minus 40. Okay, It's actually marriage and left. Not left margin. Easy mistake. Imagine Left wants marriage in. Okay, that's actually just about perfect. It's great when things work out that way. So now that's in the position that we want it to be in. All of them are I'm going to set it up. So any one of these shows at any given time, on the also in the same spot here, just cycling one after dinner. Great. So that does it for this lesson. Thank you for following along and I'll see you in the next tutorial where we'll start writing to kowtow. Actually make this work, which is pretty cool.