Understanding Web Development: A Beginners Guide to the Web | Christopher Dodd | Skillshare

Understanding Web Development: A Beginners Guide to the Web

Christopher Dodd, Web Developer / Educator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
20 Lessons (2h 50m)
    • 1. Introduction to 'Understanding Web Development'

      1:21
    • 2. What to expect from the course

      1:07
    • 3. How you can edit any page on the web

      5:18
    • 4. Front-end vs Back-end

      5:16
    • 5. HTML

      9:37
    • 6. CSS

      11:01
    • 7. Javascript

      13:52
    • 8. Frameworks

      6:19
    • 9. Bootstrap

      8:54
    • 10. Jquery

      17:56
    • 11. Setting up a basic server

      6:29
    • 12. PHP

      7:44
    • 13. MySQL

      8:48
    • 14. Connecting to a database

      12:38
    • 15. Deploy P1. 1: Domain

      9:19
    • 16. Deploy Pt 2: Files

      5:23
    • 17. Deploy Pt 3: Database

      9:53
    • 18. Using FTP

      8:08
    • 19. Bonus: Wordpress

      19:09
    • 20. Conclusion & Class Project

      1:45
242 students are watching this class

About This Class

So you want to become a web developer? Or least, want to know how the web works?

I don’t blame you. Web development is an in-demand skill that allows you work from anywhere and earn a great living.

Web development is what I learned back in 2015 that has allowed me to travel the world and work remotely for the last two years.

In this class, I’ll teach you all the basics that I think you need to know before choosing your long-term learning path in web development.

After taking this course, you will understand how the web works and how you can take part in building it.

In this class, we’ll discuss some major concepts behind developing for the web including:

  • Getting you up to speed about how the web works
  • Learning the difference between front-end vs back-end web development, and
  • Showing you how to deploy your own website

We’ll also go over some of the tools and languages necessary for web development including:

  • HTML, CSS and Javascript
  • PHP
  • SQL, and
  • Frameworks such as bootstrap and jQuery

My goal for this class is that, by the end, you will have a broad understanding of web development and become clear of how you want to use this important skill of web development in your professional career or for personal use.

So, if you’re ready to get started, click on the next video and I’ll see you on the inside.

Transcripts

1. Introduction to 'Understanding Web Development': Hello and welcome to my first skill share class understanding Web development. I'm Chris. I'm a self taught Web developer and content creator who is wait for startups and small businesses as a freelancer. Since 2015 working remotely, I've been able to use this skill to work from locations all around the world and for a variety of clients. I'm a big believer in the power of learning to code, and I'm excited to share with you. What I believe are the major things you need to know. To understand how the Web works and how you can develop for it in this class will discuss some of the major concepts behind developing for the Web, including one getting you up to speed with how the Web works to learning the difference between front end and back end development and three showing you how to deploy your own website to the Internet. We'll also go over some of the tools and languages necessary for Web development, including hey html, CSS and JavaScript, PHP and my SQL and frameworks such as Bootstrap and Jake Weary. My goal for this class is that by the end you will have a broad understanding of Web development and become clear of how you want to use this important skill off Web development in your professional Korea or for personal use. So if you're ready to get started, click on the next video and I'll see you on the inside. 2. What to expect from the course: So in this class I'm gonna provide an overview of Web development and give you a taste of developing. Hey, html, CSS, JavaScript, PHP and my ski Well, as well as helping you deploy your website to the Internet at the end of the class, you should be able to understand the difference between front end and back end the purpose of HTML, CSS and JavaScript. What a framework is and why should use one the purpose of PHP and MySQL Well, the difference between a domain name and hosting and finally had a published your website to the Internet. It is my belief that Web development is best learn by doing, and so this class is going to be very practical rather than purely theoretical. You will learn what hasty malice CSS JavaScript and PHP Ah, by actually using them. The goal at the end of this class is for you to have a good understanding off the Web and the Web development process, after which you'll be in a better position to choose which area of Web development you would like to learn more about. So, without further ado, let's begin the first lesson off understanding Web development 3. How you can edit any page on the web: All right, So to begin this course, I want to show you something cool that you may not have realized. And this will help to demonstrate the difference between front and back end in sort of a real life setting before we get into the theory. So for this demo, I'm using a browser called Google Chrome. Ah, it's the one I use as a consumer and regularly as a Web developer as well. But you might use Firefox, which I've got open here as well. And safari. You can do similar things. Ah, pretty much the same thing, just with slightly different tools in either of these browsers. And I'll show you how to do that in just a sec. But let's go back to Chrome and let's go to google dot com. Now you can do this in. You can do this sort of little experiment in any website at all, but I just thought we go if a website that we all know ah, and that's google dot com Now, a little known secret that you may not already know is that you can edit virtually any Web page right within your browser. Um, all you gotta do in Chrome is right. Click on any element I'm going to right Click on this. Ah, but in here and click Inspect. So I did that little fast, right? Click, click, Inspect. Okay. And what this opens up on the side here is the Google chrome developer tools. If we go into fire Fox and go do the same thing Google chrome. So I just google dot com go to Google on safari A swell, um, on Firefox weaken do the exact same thing. We can inspect element. And it brings up a similar consul down here. Um, on safari, you have to go to preferences and enable developer tools. So you go down to click on Advanced, go down to show, develop menu in menu bar, and then from here, um, I'm not sure what you click. I think show Web inspector, and you can see similar things. Eso It's a similar thing in all Web browsers or the major web browsers. But as I like, as I said before, I like to use crime. Um, and what you can do here is this is all the hay html and this is all the CSS. If we're going to console. We can interact directly with the page using JavaScript. But let's not overwhelm you right now if you're just getting started. Uh, when I want to show you is that this is completely creditable. So you can see here this value, right, I'll click off it and I'll click in again. Just if I double click that value. I can now edit that value. And so you see here it says, Google search here says Google Search there. I can change that, whatever I want. So maybe I say my search and wallah, you can change the text on that. Um, if you wanted to change this styling, which is done with CSS, I can go down to hear what elements style, and I can type in color, and I can scroll through all these different colors. I can literally color it whatever I want. Let's use chocolate just cause that sounds fun. Um, I can even delete elements, so I'm gonna click on this. Impress the delete key. Boom. It's gone. Um, but before you get really excited and think, Wow, I'm changing the home page of Google. How is this gonna affect everyone else who uses Google. Um, click the reload button and you'll see that Google comes out exactly as it was before hand . And ah, that's because we're just editing the front end. Um, and when you press reload or go back to Google, it's sending another request to the server and hits the back end on Google Kind of uses whatever complex logic they have on the back end to determine what shows up here. And so anything you change in here is just in your browser and not actually on Google. But this, as you'll see at the end of the course, is super powerful toe work on your own Web sites. You can go in and check anything on the front end, modify it, um, live basically, and then you can figure out how to do that. Um, in your code added that whatever. So the reason why I wanted to show you that straight up is because I think this is a practical way of, like physically demonstrating the way the Web work so rather how the front M works because you can interact with. I just pressed option command I on Mac of your running Mac and using crime um, to open up developer tools, you can interact with any web page on the Internet, Any sort of the front and assets that html the CSS, the javascript, which will get into later. Um, it doesn't show you the the back end, unfortunately, because that is old private, but we'll get into why the back end is private and how we work with the back end in this course as well. Um, And so what I'm gonna do in the next video is dive time right into the theory, Um, which is a bit heavy, which is why I wanted to do this video first. And then we're going to get into some actual code. So I thought I hope that was a cool little Demmer. And let's now talk theory in the next lesson. 4. Front-end vs Back-end: probably the most important concept to understand in Web development is the idea between front and in back end. To explain this, I want to use a diagram from Felix today. I'm gonna go to Felix ST dot com slash front end versus back end. At the bottom of this article, you confined the diagram. So what we saw in the first video was me interacting with what's called the front end. And as you can see, the front end code is always written inhe html CSS and JavaScript. The front end code is basically what comes to give in your browser to create what you see and interact with in your browser. The reason why the code on the front end is always hate. Html, CSS and JavaScript is because we all use similar Web browsers like chrome Safari and Firefox, and international standards had to be developed so that developers all agreed on which technologies would make up the websites we see and interact with. The front end, however, is just the tip of the iceberg. As the back end can be infinitely more complex. The role of the back end is simply to generate the front end but in a much more intelligent way. So let's return to our example in the first video. What happens when we click Real erred. After editing the page, the changes disappear, right? Well, of course, this makes sense. Google's not gonna let us change their website, but what is actually happening when we click that reload button? The answer is that we're creating a new request to the server. When we make that request, the backend performs any number of simple or complex calculations and then sends to the browser hate email CSS and JavaScript, these three scripts and then interpreted by your browser to generate the website that you see and interact with. In the Google example, the back end might calculate Number one which country you are accessing the website from, and number two, whether you're loved in or long down. Whatever calculations Google may perform on the back end is completely private, and the back end code never makes it to your browser, and therefore there's no way of viewing it. Unlike the front end, Ah, websites back end can be generated or created using any programming, languages or technologies. Your browser ways requires HTML CSS and JavaScript, but it doesn't really care how it gets there. It just cares that the code on the front end is readable. That being said, there are a few popular choices that power most of the Web. These are PHP, Ruby Python, Java C and C plus. Plus. Let's return to the diagram. We've talked about the front end and the back end, but there is one of a point of interaction here, and that is the database. The Donna base is surprise. Surprise data is stored eso using this example. In the diagram, a user might click on a button to access a photo gallery. The request is then sent to the back end, which then queries the database. And then the database will return the photo information to the back end. And then the back end will determine what to send to the Browns. Are if everything makes sense right now, great. But if not, keep in mind that you will start to understand better once you start to work directly with the back end and front end, and once we get into some code but to finish off this section, I just wanted to share one last example that is quite common and Web development, and it's a process called authentication. Now, authentication is something that you probably come across all the time. It's just a fancy word for logging in somebody and logging out someone from Ah, website or an app. If the user is authenticated, it just means that they have been able to identify themselves and log into the site. Authentication always involves always should involve the back end as user information should be always served privately, and it should interact with a database. Remember, everything on the back end, including the database, is not visible to the user. Only what is delivered to the front end can be viewed and interacted with. So in the case of authentication, the user number one types in their user name and password, then hit center number two. The information is then sent to the back end, which queries the database to see if one the user name exists in the database and to whether the past word matches what is stored for that user number. Three. If both conditions match, the back end decides that users should be granted access and in collaboration with the front end, declares the user as logged in. So do you see now how the front end and the back end interact? Let's face it, I could throw so much more theory at you. But Web development is best learned by doing so. Let's jump into some curd in the next video again. Remember that you do not need to have everything super clear to jump into the next section . Ah, this is old theory that will make so much more sense when we actually get into some curd. So just re watch this video if you need to. But I know that once we get through this course, the concepts that we talked about in this lesson will become clearer. So let's jump into some hey html in the next video. 5. HTML: All right, let's dive right into some. Hey, html, um And this we're gonna need one. A Kurd editor. If you're using windows, you can just open no pad, and you can realistically use note pad. Um, in. Ah, Mac, I wouldn't necessarily recommend using text at it, so I would recommend downloading a freak. Oh, it curd editor. The one I'm using is, um, called Adam. You confined it just by going to adam dot io and download it. It's really as you can see, pretty lean and nice to work with. Um, and I've got my browser open. Of course, we're gonna need a Web browser to see our actual project. And, ah, what you're gonna need as well is a project folder which have set up right here. So what you're gonna do first is go to this page to get us a little bit of a template, a beginning point for ah ah, you know, basic project. And so you can type this into Google. I'm sure it will come up. Or, um, I can insert the LINX somewhere and ah, you just scroll down here and you can copy paste this. So I'm gonna copy that head over to this file and paste it. Now the reason why we don't have the nice coloring like it has over here for the different parts is because our code editor here, Adam doesn't know what type of file this is. So it's always a good idea to save our project straight away anyway, so let's go to file click Save as I m Inside Out Project Directory. We're gonna name it. You can name it whatever you want, just as long as it has dot Hey, html On the end, you could name it with a different extension, like txt. But then your browser and your coded that won't know that it's HTML. So for a home page of a website, it's usually index dot PHP, and that's for a few reasons which we might go into later. But for now, this is call it index dot html, and suddenly I'm just gonna close that suddenly you have coloring because Adam knows that it's html, and suddenly you've got your project here as well. So once we add more files, this becomes important because we can go into the other files, click on them and edit them um, and just yet, general navigation. So what we're gonna do now that we have a HTML file is view it, sir, there's a few ways to do it. The simplest way is just to right. Click on it in Click Open With Chrome is the default application on my computer for opening Hey, HTML So I can just click on it and ban it comes up Now you might be thinking, Well, we've just got a white screen. How do you know it's coming up successfully, Chris, and how I know it actually is up here appeared says the hay html five Herald. Which is what we've got in this title tag appear the hasty, more five Harold. And so if we change this, let's just change this to my hedge T ml Project and hit Save. I'm just using Command s on a Mac, but you can go saved like this or whatever short cut it is. Then we click over to our browser, we click reload or Commander, and we can see that the title of the page has now changed. Um, now there is We could do a two hour Siris on on hate. Html in this course, but I just want to give you guys an overview. There's a lot of information here, but the main things you need to know is head and body. So in the head section, you can't necessarily see on the page what happens in head. But it has a few important tags that go in here. You can link to external files here. This one doesn't exist yet. It's just in the template. There's meta information here, which is important for CEO. There's the title, which we already interacted with, Um, and there's other things you can put in here as well. But the body tag is where your puts stuff that will show up in the actual body of your HTML document of your Web page. Okay, sir, a few basic elements we can put in our body to start with is a div, which is basically just a block, and it's just gives us, um, a way of organizing al code so you can put two dibs in, and by the way, the conventional way stays the same with HTML. You do a less than sign and then the name of the element with no space than a greater than sign and then to you put the content within it. And then at the end, you do the exact same thing. Except you put a slash in front of the element name. So as you can see, we got to dibs here. But if I click save, we're not going to see anything because these dudes are just for structuring. Basically, we won't see anything unless we define styles on these dibs or we put some content in them . So what I'm gonna do is put in, um, what should I do? A heading tag. Most Web pages start with a heading tag, and there's a few heading tags. Weaken Do it ranges from h one. Hate to hate sri hatred for all the way down toe page six, maybe even longer. I think Page six might be the longest one, but yeah, hates one is a heading that is supposed to be the top level heading. So usually you only have one hate one in a Web page. And let's just call this page title and then to close that tag like we mentioned same thing as what we did to open it. We just to put a slash In front of that, I'm gonna click, save, do the same process. Come over here, reload the page and boom. You got page title, all right? And what we're gonna do here, and this div is put a p tag and P tag just means paragraph. It's when you put a bit of text in. So I'm gonna put this is pretty bad, but blah, blah, la press save. And we got blah, blah, blah. Now there's not much. There's nothing really special about P tags until you put them together, and then it gives you division of paragraphs. So, um, this is a basic thing you can do to have a heading paragraphs, maybe another heading in there for a subsection where you do hate to hate to and say sub section. Well, uh um, Now, just to drive home these the difference, because right now these dibs don't really do anything is I'm going to apply a style. Now we're getting a little bit into CSS now, but don't be warned. Don't be afraid, Zai, Um, to what we're gonna do here is give, um out element and attributes. And so how we do this is we find the last character off the element name, press space and the attributes were going to give it is style. So we're gonna type in style, equals open double quotes and closed double quotes. My ed code editor gives me the closing double. Quotes is already because it knows what I'm trying to do. And let's give this a border. So I'm gonna type in border one p x solid black, um, put in a semi colon to say that's the end of the rule. Click save and you'll see that the box now has a border, which makes it actually visible. So we can do here is copy this style tag. Put it here, press save, and then you can see the second def now. Dibs. Air important for nesting. We can make these did smaller. We can put them side by side, and that allows us to affect the structure of our page. Now, as I said, we could spend hours on hey, html and there's so many more so many more elements that you could learn. Um, but this is an overview course, So I've just giving you a little bit of Haiti za um you can dive deep into hate email through another course. Or maybe I can create one for you if you like. Um, but this is basically should give you some indication about what haste email does for you. It's basically the content of your Web page and how it's structured. So in the next video we're going to go over CSS, which we've done a little bit of styling here. But we're already it's already time for some CSS, so we're gonna build on top of what we've done here with some styling. 6. CSS: All right, so in this lesson on CSS, I'm going to start us off right where we left off in the last video. And what we've got here is, uh hey, html file and we've got the results of our HTML file in our browser. Now, one thing I want to draw your attention to over here is this link to an external style shape. And so this is a link tag is actually ah, tag that doesn't have a closing tag because doesn't have any content. It just has attributes. So what I mean by that is you don't need to go like this to close it, because there's nothing in between. It just has. It just is just a link to an external style sheet. And, sir, the first attributes here is rehl equals style shoot. And that just tells that where linking to a style sheet basically and hate ref is just the location of the style sheet. So first, it's everything before the styles dot CSS is a folder path. Eso We're gonna need to create a folder called CSS in this directory, and then we're gonna need to gonna We're gonna need to create a file called styles dot CSS . This is just an extra queary parameter that talks about the version. I actually have never needed to use that before. So, um, let's just get rid of it for simplicity, All right? So, like I said, we need to go into a project directory. We need to create a new folder called CSS. And as you can see, everything's coming up here so it can easily be navigated from our co data. I'm gonna go into that fota. Actually, I don't create the new file here. I go back into the Kurd editor and what I can do is create a new farm in the code eight of them. And before we write any CSS, I'm going to save it and save it with the proper extension so that our code editor and how browsing knows exactly what kind of file this is. And as we defined in our link tag there, I think it was styles Nazi SS. So you have to call it a dot CSS. We can always change this to whatever we want. We don't have to be styles. We just have to update the link in ah html document but it always has to end in dot CSS. So now we've got our dot CSS file. And yes, as we can see, this should now be linked to this HTML far because we've got this link tag. Ah, and that address is CSS. So it goes into the CSS photo. Actually, I've named it with capitals and perhaps shooting of So now it's goes to CSS. Then it goes to styles dot CSS, which we've got there now I can already see an opportunity for CSS creating a CSS class in a document. And where that opportunity comes is right here. I've got to dibs and I'm copying and pasting code. And this is a good lesson to learn for anyone doing Web development. Any time you're copying and pasting code a lot, there is probably a much better way to do it. And in this case, instead of defining particular styles on each of these dibs dibs, we can define a class name for both of these dibs and then define the styles that attributed to those class names in CSS. Now, just like in hedge TML, there is so much we can do a CSS and it could be a two hour course on its own. So I'm gonna give you guys just a little taste of CSS in this video. Um, but what I see here is the big opportunity for us to use CSS is to create a class now to create a class. Um, we have to do is start with a dot So you just go into your CSS file and press dot and then we can name a class, so I'm just going to call it box. Very simple name, but we don't need anything else now that defines our class basically, but we need to give it styles, Otherwise, it's not going to do anything. So we open up a curly bracket Adam has already generated closed a closing curly bracket for me, and then I'm gonna press enter. And what we can do is we can go back to here where we have this style defined grab that put it in here and now any div or any element for that matter where it can have a border. Any time we put this class on it, it'll have a borda that's one pixel wide, solid and black. So let's do that. Now, um, we're gonna remove this whole thing. And instead of style, we're gonna have class. So I remember when we put in the class, same convention is before with an equal sign and to double quotes, but and we don't actually put the dot in we've defined class here, and CSS we would define the dot to make sure that, uh, that everyone knows that it is a class, but here we just type in box. And so what we can do is hopes Copy that and replace that with books. Now, you might think, Ah, well, we didn't save that many characters. But once you start to generate heaps of styles like maybe we want to put a min height in here, Um, and all this stuff and we don't want to have to copy and paste any of these changes is just a very much better organized system to have classes and eso These all inherit the same styles that we define over here. So if I call this if I give this a really obvious one like two months, 500 will be super obvious. Now you see all the all the boxes with the class name all that sorry Dibs with the class name box which we could call boxes is gonna be a minimum height of 500. So I'm gonna reload and bam! Now everything with a class box is going to be 500. Um, and there's a few other ways you can target elements in this as well. We could say that every p So if you want to target every element, you just type in the name of the Element P. And so this is gonna create a style on every P element. So I'm just gonna go a color and these these styling rules, you won't know them or straight away. You just learned them over time. So don't like, Oh, how do you change the text color? How do you change this literally? Just Google it. It's very It's very, you know, it's just it's just a memory game for a lot of these things. Put in a space there and, um, let's to color blue. And now you can see every paragraph tag is now going to have this color blue. So what we could have done here is just going Div and every Div would have had that. So that's going to target every Div. But if we want to have some dibs that doesn't have thes styles and some tips that don't it's better to be specific and put a class name in now. The other one we have is a I D. And that's defined with a hash, sir. An I D should only be given to one element, sir. We'll have a really specific name like Box one. And what should we do here? Let's give it a background background color of black. Let's just try. It's not gonna be the most beautiful website, but you get the get the message. Now. What we have to do here is give one of these boxes. Ah, the Thea i d. And that's just a simple matter of I d equals. And what do we call it again? Books one That's right, Bucks one without the hash because we've already given it its attributes. Name going hand as black. Now, obviously, we've got another problem now, which is the text color is black also, so you can't see it. So if we're gonna have a black background goes without saying that we're gonna need some contrast in the text so we can change color to what, now the risk of going into something that's a little bit more complicated. Mo Mobile responsiveness is very important in today's day and age of Web development, and the way you can define styles based on the screen size is by using media tags. Now I'm jumping a few steps ahead here because we have hardly even just scratched the surface with CSS. But I just wanted to give you, um for when you reach that section of Well, how do I make my website responsive? It's free media tax so you can have at media screen and then you define again. I'm not going to spend a lot of time on this. I'm just showing you an example. Max width 500 pixels, and then we will open up the curly brackets, and then we need to put a, um, another thing in here. And the other thing with CSS is the more specific the rule is, the more it'll overrule another rule. So say, for instance, we got up here. We're not very specific here, which is saying all Pisa blue. So if I'm being more specific in saying that, Max, with 500 of the screen, I can put in another rule. And when the screen is below 5 500 pixels and whip, um, it'll this rule overrule this rule up here, so I'm gonna make it red instead. And, sir, I'm gonna reload the page and you can't see anything different. But if I go and resize the window, look at that. Suddenly, at 500 the text changes to read. Now, that's not that practical oven application. But you can understand the concept at least, that media queries allow you to change the styling of your Web page based on how big the screen is. All right. So hopefully that explains CSS a little bit again. A lot of deaf you can go into and CSS we don't have much to cut time to cover all the different things you can do a CSS. So hopefully that was a good overview. In the next video, we're going to talk about the final different script or piece of curd that you wanna have on your front end. And that is javascript. So I'm looking forward to seeing you in the next video 7. Javascript: All right. So in this video, we're gonna talk about JavaScript, and we're gonna jump right where we left off, just like we did in the last video. Um, And what our hey html document has here that it had before for CSS right here. It had a link tag to CSS, which defined where to put our CSS file. Um, right here we can see a script tag in our body section. Ah, that gives us a path to put our JavaScript. So I'm gonna follow what the template says here, and I'm going to go to, um, my project directory, which is here. We're gonna do a new photo. Call it Js which, by the way, this is a standard convention, too, You know, put your head html files in the route. This is called the root of the directory. And then put your CSS files in a CSS photo and put your JavaScript files and JavaScript photo. Okay, So I'm gonna go back to here to generate a new file click New farm going a bit faster this time because we've already we've already gone over this. So hopefully that's that's fine with you guys. Um and what I'm gonna do here is save as, and I'm gonna go into javascript and Whoops. I forgot actually what they called it they called it scripts. Judge Js I'm gonna go back here save as going to Js copy across. That doesn't like copy and paste, so have to type it in. It was just scripts that jazz cool. So now everyone knows the browser knows Thekla did the nurse that that is a javascript file . JavaScript files and in dot Js. Um, And just to be clear, we don't have to follow these paths like I could change any of this, but it just has to match up to where the file is stored. So it's just a link to the file, wherever it is. I'm just following the convention here because it is pretty stock standard convention. Now, before we actually write some javascript, it's important to know what javascript actually is. And, um, javascript is a programming language. And javascript, um, is the interactive front end programming language. And what I mean by that is is delivered with the front end. So any time that you interact with the Plage, you click on something and something opens up, that is JavaScript working for you. Unless, of course, it reloads the page. In which case that's probably sending a, ah, a request to the server, which is spitting out the html CSS and JavaScript all over again. So I'm just trying to think of what's Ah, javascript heavy thing. We could look at Google sheets, for example, ing and Gmail and all of that. They're really time lapse. And all of the interaction done here is JavaScript because, as you can see, it's all real time. So if I click on this and this and ah, click on that and that hides and that shows, um, I click on that this opens. Ah, you know, it defines how you interact with a Web page. And as you can see as I'm doing all of this, the Web page isn't reloading. It's all JavaScript. All right, sir. What does that mean for our project? Well, it means that we can manipulate some of these things here or set off other functions, and one of the basic, most basic ones we can do is a console log, and a console log is great for spitting out variables or anything else that you need to check when you're doing javascript development. So I'm just gonna put out a console dot log and say hello, world. You probably won't understand the purpose behind a console log right now, but when it comes to day bug debugging later, it's really important. So I'm gonna put my browser over there, open up developer tools, and what I'm gonna do is because we've got it. Um, I'm gonna just put it to the bottom so that we can see everything. And what you can do is you can go over the console here and reload and Walla it shows up with hello world. But I know that's not really practical. But say, for instance, you wanted to check whether a function was firing or something to put Hello, Console log in there and then you can start to do programming things like to find a variable so you would save our X Cool X, Um hello, world. And then instead of explicitly uh, logging Hello world. You could look x and you get the exact same thing. So when I'm debugging, I like to say, for instance, if I was trying to find the value of X. I would type in something like X with us as a string. So if I put these quote marks, But but on the other side of it, that means that I'm just putting out whatever I've written there. And then a comma allows you to put another variable piece of string in there. A string is just text as you'll find out, Um and then so I can see X is Hello, world. Now, another thing you can do which we can actually see happening in our browser is an alert. This is one of the most basic things you can do in in WordPress s are no press JavaScript as well. And I'll reload the page and we'll let you get in the look saying Hello, world. Every time you realized the page, it will show up again. Um, now let's actually use it to interact with this page because, honestly, what we're doing over here just defining a variable and then putting it out. It's not really interacting with our web page. So what we could do is, um and I encourage you to do this as well. It's just head to Google and us Google how to do things. This is actually a really important skill as a developer is You know, developers don't remember how to do everything, and they often forget sometimes how to do something. Um, you know, there's plenty of documentation online and stuff you're not supposed to remember absolutely everything. So if you ever forget how to do something or you just want to learn how to do something straight away, If you type in a good question into Google, you will get a good answer, and you will know how to do it. So let's just say, um, how to hide an element with job script and you can type in J s for short. I'm gonna load the page. You have a script show hide element. Let's have a look at this one. So this website is a stack overflow website. So if you ever, um, you ever have an issue, you can go see what other people's issues have been and see how they've solved it. And if you have a similar issue, it gives you ideas about how to solve your particular per problem, sir. Let's see. Okay, cool. So we can do here. Is I'm gonna copy this part here, and actually, I'm gonna copy this. All right? So I'm gonna go back to out projecting I'm going to go into a script and let's explain what we've got here. But first of all, actually, before we explain, I'm going to modify this, but gonna go back here. Yes, I did was box one. I'm going to save that and I'm gonna and I'm gonna press Reload now, what has happened here? So JavaScript is what's called an object oriented language. And what that means is we can target nested elements by putting in dots between them and again. Don't get overwhelmed by this. I'm just trying to explain what's going on here. It's basically we start with the document, which is l'm Web page right here. We've got a dot and this method is get element by i d, which just finds out element based on I d. Now remember, we set up an i d here for this div. So I d box one. So we need to do is put in a string which remembers the string is just text in here and we target books one. Now we're in this element. And then within this element, we can target style. Sorry, We ah, in style. Now we need another another thing, And that is within style. We can target and attributes in style called display. And then we can set it to none, using an equal sign and another important thing to know in programming. I know I'm throwing a lot of stuff here, but I'm just as I'm thinking of it. Um, that is what a single equals is assignment. If you were doing a comparison, for example, if, um let's say X I know we don't have these variable set up yet, but if X equals one, you would do to equal. So this is more like what you would think of with equals equals in programming languages like JavaScript is assignment. So we're just saying a sign this pot to this pot. And as you can see, it's set the style property off. Whatever has the idea of box one to none. And so what we can do is put this to block, which is another possible value, and it shows up again. All right, so that gives us the opportunity to edit ah, things based on Senate logic. So right now it's just displaying hiding it, which it really doesn't need to. But what we could do is put in a conditional, which would be, say, for instance, if something was the case, hide the box and without getting into a lot of detail here, let's just put in a statement that is definitely not true. So if one is greater than right, sorry less if one is greater than two, display none. So obviously one is not greater than two. So it won't do that is one less than two. Yes, it is. Don't display it now. I know this is a primitive example, but we can't get into Ah, full rundown of JavaScript in this in this video. But the important thing to know here is that we've got our JavaScript Saariaho html document. Here it is linked to a style sheet, which is where our CSS is, which defines our styles. And it is also linked to how javascript, where we can define programmatic sort of front end behavior. So we could have, for example, if somebody clicks this. This happens if somebody if if a box is a certain size, this other box shouldn't show up stuff like that you can Anything you can really think off in terms of what appears on the front end, Uh, or what the user is interacting with for what you've seen on other websites. Just do what we've done on Google. I know I used some of my like experience to figure out, like, what? Pot of the Web page to copy. But let's see, we could if you do a little bit more digging and this is a this is something that you'll learn over time is to how to use Google as a developer. Um, you can see here they're doing it as well. Document get element by a d assigning that too variable and then switching that over. But yet basically, um, you can, too, like an infinite amount of things with JavaScript. And, um, to be honest, using a framework like Jake weary, which we're going to get into in the next video is really powerful and helps you to really simplify what you do in JavaScript. Um, in terms of manipulating hey, html And Sir, in the next video, I want to show you Jake Riri, which is a popular JavaScript framework. And I also want to show you bootstrap, which is a popular CSS framework. So once we put in these frameworks, which we're going to do a lot of the heavy lifting for us and make things a lot easier, um, you'll start to see that we can develop faster and easier, and a lot of developers actually develop this way. So it's important for you to know that these frameworks exist and how to get started with them. So I am looking forward to seeing you in the next video on frameless. 8. Frameworks: All right. Welcome back in this video, we're gonna talk about frameworks. What a frameworks and how they help us develop for the Web. So up work, have a good article on frameworks. I'm sure if you search for this on Google, you'll probably find it. Otherwise, here's the direct u R l and what I like about this article is it shares the cool features of a Web application framework and also shares some common examples off frameworks that you know, real Web developers actually using. So the core features of a Web application framework libraries, AP eyes, scaffolding, Ajax casing security and compilers. And depending on where you are in your learned to co journey, some of these might not make any sense. Maybe all of them might not make any sense, and that's fine. The best way to think of the framework is it really is a framework. It's a bunch of code that's already set up for you to develop on, and so it takes care of the heavy lifting in certain areas so that you can focus on the fully customizable parts of your code. Technically, everything is customizable, but the framework is set up so that you don't have to do, you know, common sort of functionality things over and over again. We talked about authentication, for example, in an earlier video. That's something that's quite common in a lot of different Web applications and websites. So it makes sense that that becomes part of the framework and then other things which will help you develop faster. There is an extra learning curve with learning a framework, because you have to learn to develop in that framework. But it usually saves you a lot of time and a lot of headaches, and especially on the front end, using a CSS framework and a JavaScript framework, I think is a very good idea. And I'm about to show you to frameworks that I use and that a very popular. But before we dive into these front end frameworks, I wanted to talk about these back and frameworks. And so if you done any study into a python, you probably heard of Django, which is, I think, the most popular framework for Python. It's definitely a very popular one. If you've ever looked at Ruby for Web development, you've probably heard of Ruby on rails, but there's other frameworks you can use, like Sinatra and for PHP. There's a bunch of frameworks as well code igniter I've used before. And I know that Lauraville is very popular. So what I want to do is show you to frameworks that I use most often we're gonna download them into our project, and we're gonna start using them right away. Because, as usual, the best way to learn a concept is to go in and do it. So the 1st 1 I want to show you is called bootstraps. Every type in bootstrap, CSS into Google, we will come up with bootstrap, which is a CSS framework. And Bootstrap is really powerful for creating responsive websites. But also it provides a bunch of styles already in there to create components. So, first of all, the responsive stuff, as you can see here, we've got dibs and we we worked with dibs in the lesson onhe html and CSS. But instead of building our own classes, we can just attach a class straight away off column, medium one. And so how bootstrap works is, there's a ah, 12 column system. So if I was to put six there, that would mean it's half the width of the page. And if I was to put three there, that's gonna be 1/4 of the wit for the page. Um, and so you can start to Ah, here's some other examples. So this is gonna take up eight columns. This this division, and this one is going to take up four columns. So that helps you to build these kind of fluid, responsive containers. And by doing that in a column way. But also what bootstrap does is it gives you components so you can come down here and see any number of different components that it has. So if you wanted to make a progress bar that looked exactly like this, you can do it with bootstrap. You just need to download bootstrap, link it to your project, and then you can build a structure like this with a few classes toe tell html what class to go after and bootstrap and then, boom, you've got a progress bar that looks like this. As I always say, you will start to understand more about how this works as we actually use it. But there's one of a framework I wanna introduce before we get stuck into a project, and that's Jake Weary. J Query is a JavaScript framework, and, ah, I don't know. It just makes doing JavaScript a lot more easier and intuitive. At least for me. It does, and what we can do, A J query is we can manipulate the dumb using Jake weary. And for those of you don't know what the dumb is. It's stands for DOD document object model. It just means your structure of your page that you've defined here with HTML so we can use the classes that we used in CSS. So you saw before how we defined and I d with a hash, and we define a class by a dot. You can use those selectors in Jake weary to find an element, target it and then changing attributes on it like it's HTML, and that is very powerful, and you'll see in just a sec how we're going to use it. So in the next video, because this one's gotten a little long, I'm gonna show you these frameworks. So in the next video, I'm going to show you a live demo of using these frameworks, and I think you'll start to understand how they really save us time and ah, a lot more intuitive to use. So this video is getting a little bit long, so I'm gonna break it up. And in the next video, we're going to get on with the Demmer. 9. Bootstrap: All right. So in the last video, we talked about frameworks and I introduced to frameworks that I commonly used which were bootstrap and Jake weary in this video, I want to talk about bootstraps specifically, we're gonna download bootstrap, and we're actually going to stop playing with it. So if you go to the home page of bootstrap, which I believe is, get bootstrap dot com, you can click the button, download bootstrap, and we can just download bootstrapped by clicking on this button here. So I'm gonna find the my project directory, and I'm gonna click save, So we're going back to my find a window. I'm gonna open up this because this is a zip file going double click on it. It's gonna extract. I can throw away, does it file? And if we look inside the photo, we can see a similar structure to what we already have. We don't necessarily have funds, but they've organized their CSS and JavaScript in the exact same way that we have. And the thing that I didn't necessarily mention was that bootstrap also has javascript as well. But for now, we just want to use their CSS file. So go into CSS and right here, bootstrap dot CSS is the file we're looking for. So I'm just gonna click drag that to move it over to the CSS folder. I don't know why showing up like that, but if we go backwards, we can now delete the rest of the bootstrap files. If we go into our code editor, we now have bootstrap in there, and we can actually click on it and look at it. It's It's a long file, and it's filled with a bunch of different styles, a bunch of different rules. And this is what makes bootstrap work. But the good news is, you don't have to know all of this stuff. You just need to know how to use it. So I'm gonna close that. And there's another step we need to do before we can start using it in our project. And that's toe link to that style sheet. Remember how we linked up here to our styles? Not CSS. Well, we need to do that again. So what I'm gonna do is I'm gonna copy that by pressing command. See New Line Command V or the equivalent on a windows computer and all the details are gonna be the same. A set the file name is different. So I'll put in here boot strip, don't CSS. And I want you to look closely as we refresh the page because there's gonna be some changes straight away. So if I reload, you can see that the style of our page has already changed. And in this case, we know that bootstrap is now working. Sir, how do we use bootstrap? Well, right here is the documentation and documentation is just the technical term, for you can think of it like a manual or just allow the information you need to know to be able to use ah, framework or a piece of software. So in here, we can define the columns like we mentioned earlier. But what we can do here, which I think will be a little bit more fun, is copy across some components, so you can see how quickly we can get a stylized website appearing on our screen. Sir, I'm gonna expand the windows so I can see the menu by here. And I'm going to go down to page head up. I'm gonna collapse this again. What? Where is it? Here it is. And I'm gonna delete all of our dibs. We have so far. So selecting all of that and deleting it. So we've got a basically blank document, and when I want to do is start building our document again. But using bootstrap elements, sir, we can to get this head up. We can copy this and put it straight in now. Copy and pasting sometimes doesn't work, so you should tab your content across to make it look. Justus. Nice is on here. And if I reload the page, we've got ah, head up and ah, we can add any number of components. He I can go to this thing, which they call the Jumbotron. Sounds pretty cool. I'll copy that code, and then I will put it after our page headed headed, Div and I will click, save, and then it comes up. Now the padding is a bit off, and that's because we haven't used another feature off bootstrap, which is a container. So what I need to do is wrap all of this, which we just created into a container. And this is all, of course, of personal choice. It's up to you how you style your website. But all we need to do is go to get a div and give it a class of container, and I'm gonna, in Dent that So it's obvious that it's within this parent div. And then I'm going to close the diff closing tag. Now, I want you to watch closely. I'm gonna open up the page and watch as we refresh the page Walla. We've now put it in a container which looking at it on a big screen, it just gives it more padding on the sides. And then when we look at it on a smaller screen, the padding shrinks. And then if we were to move it like this, it's responsive, which, um, depending on how you write your code is a huge time saver. So now we've got this lovely container. We've got this lovely page head of which we can edit any of this By the way, we can go back in here and in this hate one tag, we can, um se how awesome website and what would be the subtext for hours and website the best website ever, and then say instead of saying, hello, world hello and welcome. And then in the p tag, this is the greatest website you will ever see. Bold claim. I know. And Walla, you've got all of this change. Now you can change the text on the button as well. By going into here, I'm gonna expand at and, ah, between the A tags, which is just a way of defining a link. You can put whatever text you one here. So instead of learn more, we can say get started. Instead, save that, move that over to the side refresh. And suddenly you can see how bootstraps working for us. Now if we were to code that ourselves, it would be a lot longer because we would have to define all these styles ourselves and just to demonstrate what bootstraps doing for us. If we were to take these classes off, what would our website look like? So I'm gonna get rid of that class and ah, and refresh the page and yeah, it still looks good, but there's there's no border there. There's no padding for a more dramatic effect. I might get rid of this class here on Jumbotron. So going back, there's no big padding There's no background color. Bootstrap is adding all of that, sir, I hope you can start to see how bootstrap is making this process of developing responsive websites that look pretty cool. I think this is pretty good design. Um, and they make it so much more easier. So I encourage you to download bootstrap and just stop playing with it. Import some of these. Sorry. Copy and paste. Some of these different bits occurred in. And if you ever, like, say, for instance, wanted to build a form and have it look nice, you could search for form, and then you can come down to forms, and you can, you know, put in nice buttons, have these different, uh, tabs, all kinds of stuff. And you get all of these components styled right out of the box with bootstrap and ah, I think I have made my point clear now of just how much a framework like bootstrap, um gives you so much and save you so much time if you want to creating that and style it. So in the next video, we're going to talk about the other framework that I really love. And that is Jake weary 10. Jquery: So in the last video, we use a popular CSS framework called Bootstrap to sort of streamline how we create our Web pages. And we were able to create components like this with a small amount of code. And it's all about how we structure out document and also putting different classes on our elements to inherit some of these styles directly from bootstrap. In this video, we're going to go over Jake weary very briefly. By the way, there's a lot you can do. A J query. Um, but Jake Riri, if we go to their website, which is jake Riri dot com, is a JavaScript library is technically not a framework. It's a library where you can write less code and do a lot with it. Sir, if we scroll down on the home page, we could take a brief look at the three main features of J query one being Dom traverse, allow and manipulation. And that sounds fancy. But basically what Dom stands for is document object model, And essentially, what a dub document object motto is Is this what we got here? You know, we've got different elements and instructed, structured in a certain way, This did, for example, is nested within this Div. And, um, we've got this heading tag within a div. Basically, you can think of our HTML structure as our doctor document object model. And what Jake Riri allows us to do is manipulate our elements so we can target a particular element using a J. Curry selector, and then we can call a method to change something. So in this case, we would look at this button with a class, continue and then we would change the HTML to next step dot, dot, dot The second feature that J Crew is really good for his event. Handling an event handling basically an event is anything west. Something happens on the page, so I could click on this button. That is an event I even me moving my mouse around could be an event. Me, right clicking me Ah, sort of scrolling to a Senate position on the page, these Airil me interacting with the web page, and that is considered an event. So anytime an event happens, what we can do is program with Jake Riri for something else to happen. So in this example, which we're going to create a similar example in our project is if something gets clicked on, so in this case, a button within button container. If it gets clicked, then this hidden box will show the third thing we can do A J query is Ajax and Ajax is a bit of more of an advanced concept, but it's a way that we can call a local script on the server so we can basically access the back end and grab data without having to reload the page and, you know, use back in card. Um, don't worry too much about Ajax yet, but it is very powerful once you start to get further into J. Crew. So Andrzej Queries Website I want you to click the download button, and on the download page we'll find a link to the compressed production. Jake Weary. I wanna supposed to Well, let's just click on it. And it looks like gibberish, because it has been what's called men ified to make it a smaller file. But if you wanted to look at how it really kind of looks, we can click on the next file, and then we can see a whole bunch of JavaScript with comments in there describing what's going on? You're not expected to understand any of this, by the way, um oops. Need to go back to that. Um, we need to We can go back here. And we could just download this one and don't want about the version number. Eva, this will constantly go up over time. Just right. Click on it and click Save Link, as this will be a JavaScript file. And you just need to go to your project directory and go to your JavaScript directory, which is where you store all your javascript for your project. Then click save and you can see it here already showing up. You can look at it in your code editor, but it will not make any sense because it is modified, which, by the way, is demonstrated by this dot men dot Js. So if we downloaded this one, for example, if I open up this one in the new tab, it doesn't have that Don't mean on it. So you can see the whole UN compressed file. But for our purposes, we don't really need to look at the card so we can just have it modified now. just like we did with CSS. There's one more thing we need to do to include it in our project, and that's to reference it with this script tag. So just like we've done beforehand, I'm going to copy that. I'm gonna put it above because I want my Jake weary Dillard before I use it using my own scripts. And I'm just going to right click on here and renamed Just so I can copy and paste the name , Save me a bit of time. Close this. Go back here and we just need to It's in the same photo. We just need to change the file name. Now, this is gonna be included. And if we reload the page, we're not going to notice anything yet because we haven't actually used any Jake Riri, sir, What I'm gonna do is go into scripts. Delete this because that element box one we don't even have enough project anymore. So this pretty much does nothing. I'm gonna backspace that And what I'm gonna do is start with something that's really common in Jake weary and don't. Why? I'm gonna explain what this is in just a moment, but I'm gonna type in Dulles. Sign document dot Ready open brackets function open. Close brackets space curly brackets go to the end, Put in a semi colon and inside here I'm gonna put console, don't lug J. Queary alerted and then end that with a semi colon. And we're going to refresh the page on this side after clicking save. And how do we know if it's working? Because, essentially, we just done a console log. It's not actually changing anything on the page, But if you remember the developer tools that we worked rift right at the beginning of our video, we can open them. I'm on a Mac, so I press option command I on crime. And we can now see the consul weapon. Probably. I had my console I've been before. It'll probably come up with this and then you click Consul, and you can start to see ah, your Java scripts console. And right now, we've got it in an era, and the era is dollar sign is not defined. So from what have we done wrong Here, let me go back. Ah ha. And I mentioned that we should have put this first, but we didn't so I'm gonna cut and paste that and put it where it's supposed to go above. This is a popular. This is important, rather concept to understand is the order off your files. So if I start using Dulles Sign, which this whole thing is a Jake Riri selector and a J query method, if I start to use that before, I've even loaded Jake weary. So like it was before what was underneath Whoops where it was. Underneath. This is loading before even the Jake we're is learning. So it's, of course, is gonna era, So make sure that's above reload the page and what it says, Jake Weary, loaded. So now we know that Jake Weary is working. But what is this? So basically, the first part of this is the selector, and the second part is the method. So in in the document object model were able to target the whole document by using a variable cord document. And so the convention with J. Crew selectors always goes dollar sign open brackets and then whatever it is you want to select and then you would close your brackets. Put a dot to define your method. In this case, we've got a ready method which basically, it makes this function trigger when whatever this is is ready. So we've selected document and then when it's ready, we're gonna launch this function again. I'm probably throwing you under the bus here, but, um, we'll see in just a second how this is powerful, so we don't just want to do a console log out. That just helps us to determine whether Jake Weary is working or not. What we can do is instead of doing that console log, actually start to handle an event on the page and actually do something that makes off a bit more sense. So what I'm gonna do is select one of our objects on our page using E. J query selector. And what's great about Jake weary selectors is we can target elements the same way we would target with stars dot CSS with CSS Sorry in general, and so we can use weaken target elements with a certain I d by using hash and weaken target elements with a certain class by using the dot. So what I'm gonna do, we actually don't have these anymore, So it's pretty pointless. I might as Well, just delete them so we don't have those anymore. But what we do have is these different elements. So what I can do here is, um, Target this particular div by its class, sir. Like I showed you before, we can do dot to say it is a class and then we can say page header. I think that's what it waas Paige dash head alien is correct. And now we've selected all off the elements with the class page heaven head up. And in this case is only one. So we can go into here and we can manipulate the hate email just like the example we saw in Jake Queries website. And we need to whenever we're typing in, just brought text. We need tohave, single quotes or double quotes. And so what I'm gonna do here is just put in, uh oh, and put a semi colon on the end to end that function. And suddenly the entirety of my page header has been replaced with Hello, which isn't that great, I think. Probably better idea toe leave it. But that just goes to show you how number one put this up again. How Number one we can select an element, and then we can manipulate it. Right. And this is very powerful. We can put all kinds of logic in here like we would using JavaScript. But where Jake really really helps is by having the selectors and these methods to easily manipulate. Now, I might be talking over your head on right now, but I just want to show you exactly what Jake weary is great for. And And what I want to do is a common handle. A common event, which is a click. So what I'm gonna do to make this a little bit easier is I'm going to come down to this button, which is the A tag here, and what I'm gonna do is given an i d. So we can target it very specifically. I'm gonna call it get started, butter. All right, so this is gonna class now. Now, what I'm gonna do is I'm gonna set up an event handler, and how you do that is you first target the element, So I'm going to Actually, there's a few ways of doing it. But I'll show you this way. I'm gonna grab, get started, button. I put a hashing because it's an I. D. I'm going to select the get started button, Gonna do the on method, and then the first thing I'm going to say is click because that's the method That's the event sorry that we want to handle. And then the second part will be the function. So what's gonna happen when the click actually gets triggered? And at the end, I'm gonna put a semi colon because, uh, we are using JavaScript. So right here I can do any number of things I want, but let's just do something silly just for the sake of it and, uh, hide the page header so we can grab that class and then we can use another Jake weary selector to put dot page header dot hide. So Hyde is a method that you can use. It's a just Jake weary method, and it's just very easy. I just select it and then I can put dot hide and then I'll hide it. So let's see if it works. I'm gonna refresh Project click on the get started button M Walla. We've hidden the page header. Now I know that's not really very practical. So what I'm gonna do is provide a better example. And that is I'm gonna put some hidden text, um, below here. So start with a P tag pointing the p and we'll put in hidden. Well, let's say this is the answer to your problem right now. If we just save that and refresh the page, it will show up. It won't want show up. It'll show up by default, which is what? You'd probably expect it. But if we want it to be hidden at first, what we would do is we can add an attribute to this p tag. Style equals double quotes and inside weaken, do a display none. All right, save that. Refresh the page and there is no paragraph there. And so one of the thing I want to do is give this an I d. So I can target it specifically. And I'm going to call this hidden text. All right, so now we've got it's got an I D. And it's got a style that's telling it to not display when the page first loads. So what I can do is I can target it here, Um, by using its i d, which is hidden dash text. So it's an i d sub to use hash. And now I've selected the hidden text. And what I'll do is I'll use a method very simple one. And Jake Weary, which is Dodge Show. So save that page refresh. You won't see anything yet, But what happens when we click on the button? Uh huh. The hidden text that we set to display as none in our HTML has now been manipulated by using Jake weary. So this is a very basic example of what we can do. A. J query. There are so many things we can do it, Jake Riri and I just want you to think of all the different ways you could manipulate ah, Web page or handle events So I could we could do something that if I click this heading, something happens. Or if I scroll, something happens. Or we could figure it. We could do math problems and all kinds of things in here, and we can basically do an infinite number of things using J Query to target elements and then manipulate them. And then we can all sir combine that with event handlers like we've done here and we can Ah , yeah, basically, manipulate the dom, manipulate our document based on how the person interacts with web page. Now, of course, you can do this with just javascript. You don't need Jake weary. But these selectors and these methods make it so much easier to the point where I can confidently go in here and target another element. If we just give this and i d of Jumbo Tron and we can just hash jumbo tron dot html blah, it's just double check. That's all. Correct. Jumbotron block. Suddenly it just turns into blah. And, you know, if I had to do this in javascript, maybe I'd be looking it up. But with with Jake weary, it just makes it so easy and intuitive and Ah, yeah, it saves me a lot of headaches. And, um, I really enjoy working with it. And given its popularity, I'd say a lot of people enjoy working with it as well. So in the next video, we're gonna move on from the front end and start looking at the back end. Um, hopefully, when not overwhelming you so far, feel free to ask questions and help you out as best as I can and hopefully we, uh, learning some good things so far. So I will see you on the next video. 11. Setting up a basic server: all right. So we now have our basic website that we built with hey, html, CSS and JavaScript. But front and Web development can be just the tip of the iceberg when it comes to the overall Web development process. And the back end, as we discussed earlier, can be builds in any number of programming languages. With any number of server configurations, it can get infinitely more complex. But in today's video and in the next videos coming up, I want to talk about the back end in the simplest way and also with the back end. It could be a hard thing to understand without actually seeing it actually interacting with it and actually implementing in your project. So that's what we're gonna do straight away. We're going to first of all, get a server, Um, and then we're going to start to write some PHP code. PHP is very common. Ah, back end programming language for the Web. It's what a lot of websites use, and it's going to make it easy for us to deploy a website later as well. Um, having PHP as our code base. So what you need for back end Web development if you look at our website that we've just built on the front end here, Um, we just we just had toe have a folder, and we can literally just open the file like we did before hand and just read it directly off the file system into our browser. See, here we can see that it's just reading the file, all right? And, um, the difference between this and back and development is that we can't just read it off the finals file system. When we're doing back in programming, we need what's called a server now for PHP. A common stack, as they call it, is the lamp stack which we type in lip stack is Lennox, I believe Lennox. Oh, when is actually not? Here we go, Lennox, which is the operating system Apache, which is the high http server, my SQL and other alternatives and PHP and ever alternatives for us. We're just going to use my SQL and PHP, and it doesn't really matter that we're using Apache. You don't really need to know why that is. Um, but we aren't necessarily using Lennox. Sir, I have a computer. Ah, my computer is Mac os X you might be developing on windows. And so, depending on whether you're developing on Windows or you're developing on Mac or even Lennox, you need a different server. So for Mac, just gonna expand this. There is a server called map that you can install, and man is just lamp with, ah, the l replaced with em for Mac. If you are Windows user, you can type in lamp, which is, um, I actually have never used went because I've always used Max, but it's basically the equivalent of map. Um, but for Windows, So I'm going over to man, I am going to download map in here off. Just find the latest version down lined. I will just put that in my download directory. All right, so after our long waits member is now downloaded and we just need to install it, sir, I'm just gonna click through the prompts. Agree? Agree. It's gonna take one gig of space. I didn't realize that it's so big type in your password to install software. All right, installation was successful, so there's no special fields there. Anything we have, Teoh Ah, know how toe, um do when we're instilling that we just click Continue. Price sickly on everything. It closed down these websites now. So once ma'am is installed, we can open it up and it shows up like this before we can start the server. Though we have got to change some settings go into the Web server here. And when I want you to do is click this icon to go into our project and click that. So now I've said it to my project directory and I'm gonna click. OK, now what I'm gonna do is click stopped service. You can see now that the what? Sorry it moved. But you can see now that the my SQL server is now green, which means it's on and the Apache server is green, which means it's now on. And so to open up the map start page and what you can do to access your website is click my website and boom, we've got ah website again. We can access it through the file system like this, or we can access it through our new server which is local host Colon 888 eight. Um and why this is important. Why we need to have a server is because we're soon gonna be transforming our code into back end code. Another thing we can do with in our map start page is going to tools and click PHP my admin . And now that we're in PHP, my Amon, we can see what databases we have installed. So, PHP Miami is just basically a control panel to work with databases. Sir, there's one here. Just called my ask you. Well, but we will be creating a new database very soon. And, um, I think I'm going to leave it there for this video because the next one, we're gonna be doing some PHP. Um, but now that you've got your server, you are ready to start doing some back end programming, so I will see you in the next video. 12. PHP: All right. So in the last video we set up, ma'am, because I'm on a Mac computer. If you're on a windows, you would have set up Wamp. Hopefully, um, and if you're on Lennox, you can set up of the next equivalent. Um, and now we have a server. So the reason why this comes up when we go to local host ate, ate, ate, ate is because we directed if you remember in our preferences in a document root, we set our project to document root. We can set a new project up, and we can direct the server to there, and it'll sharp there. But I thought it'd be easier just to start with what we've already created. And now the first thing we can do to start using PHP and turning out purely front and project into Ah, something that uses the back end is weaken go into here. And instead of this being dot html, we can call it dot PHP and how we do that, I'll close that, and I'll go here and all right, click rename index dot PHP. And this will tell Ah, the server that it's a PHP file, so reload the page and nothing changes. So you're like him, Chris, Why did we do that? Um, well, something did change. And if we open this up or attempt to open this up just from the file system, it'll just display the contents of the page. It weren't display HTML because you can only just pull inhe html files here. What you need is a server, and why we need to do dot PHP is because we're going to start putting some PHP curd right in here. So instead of hey, h one, what I want to do is, instead rights and PHP code. Now, the good thing about PHP is you can just insert it anywhere on a PHP document that otherwise looks like HTML. So right now we've got pure hate HTML even though it's got dot PHP there. So what we can do to inserts and PHP is opening bracket question mark PHP and then I'm gonna close it straight away so we don't forget. You got a question mark again and a closing tag. And now what I can do here, which is not gonna be that amazing, is used the function print to say hello, world clips needed closing. All right, So if I move that back over here, you'll see the ah, this first part off the hate one tag is now, Hello, world. Because I've put in some PHP programming. There's no way that your browser can figure this out unless it was to run us of a server. Because if I just type in this, it will come up directly as we've typed it. It just sees it as text. So that's why we need a server that can interpret PHP and ah, yeah, process that back end. So this is not really relevant. We could have just typed in hello world here and gotten the same result. So what can we do with PHP? Well, we can use it as a programming language. So what I could do up here is Aiken, define some variables. I'll just get some PHP opening and closing tags. And I will say in PHP, by the way, you define variables with a dollar sign and then, um, the name of the variable Say we will call this heading and I will call this what do that. What do they call the website before? Let me just go back a step out. Awesome website. Okay, so just put all of that back and then the heading will now be semi colon to end my awesome website. And then so down here, instead of putting out a string which is just the explicit text weaken do print heading my awesome website. So you see here we've said a variable and now we're putting it in here. Sir, why is this important? Well, we're now doing back in programming so we can type in stuff like an if statement. If no, we haven't really set up many variables here, but if one is less than two, let's change the heading to my not so awesome website. So one is less than two. So the heading changes if it was set to If one is greater than two, the heading wouldn't change. So hopefully that demonstrates how we can put some logic in and start to do some actual programming. And one thing I want to make clear is, Well, I'm just gonna put that back in. Is this back incurred? Is all service side. And what that means is, it happens before it gets to your browser. So if we actually look at the page source here, We won't see any of the logic. We will literally see the output. So in mind Not so awesome website. We wouldn't see this code here because what happens on the back inside is this old gets figured out. This whole thing gets figured out, and then it sends through just a straight up HTML file to the front end. So we only see the results in our browser off. What happened on the back end? We don't see the actual back and card. Whereas if we were riding in javascript, we could go down to our developer tools. Look in sources, we can see all the scripts here, and I can look at that. I can look in here. I could see the scripts. I can see all the programming happening here. Um, and if I was to change something with javascript, so say, for instance, we've got we can remember. We can inspect different elements of the page. If we were able to find this there ago, we confined this element, right? That's display none. If we click on get started suddenly that changes live in front of us, right? and we can see that curd of a hell in a scripts. Fiona, It's old Front end is the point I'm making. But anything programming wise that we do in PHP, it's a backend language, so it's not going to come through to the front end. Everything's gets calculated service side. So on this server, and then the only thing that makes it to your browser is the hate email CSS and JavaScript . So hopefully me, actually putting some code into your into our project has made it a bit clearer to you. And in the next video, we're going to see how developing and PHP is actually useful beyond just creating a heading variable and then putting it in a heading tag, I will see you in the next one. 13. MySQL: All right. So in the last video, we got started with PHP. But we didn't do anything that amazing or anything we really couldn't have done using what we can do on the front end. What we can use the back end for and what's really important to use the back end for is interaction with a database. So before we write some more PHP card, I want to talk a little bit about databases and actually create a database with a few tables. So I'm gonna make this full width and what I'm gonna do is open up. PHP admin. We can do that by going to your map, start page or Web start page, go to tools and then go to PHP Miami in. If you're using a different server other than map, you might have to look up how to access PHP my amon. But it should be there. All right, so now, in PHP my Amon, what we can do is do any number of database functions as an administrator so we can click new here and create a new database. I'm just gonna call this database test on the score db create, and suddenly we got a database now. Adana base is a place where you store your data. Really? And, Ah, it can be complex. How you structure it. Um, and the hardest thing I guess with databases is how to design it and how to get it, or ah, designed perfectly so that the tables relate to each other in the most efficient way possible. But we're just covering the basics here. And so what you can think of databases, as is just selections or groups of tables. And so a common sort of object type in APS and websites is a user, So I'm going to start there and create a table for uses. So I'm gonna call this uses gonna go with the default number of columns, and the first field should be a unique identifies. I'm just gonna call it I d. I'm just gonna keep it on int, which means into job. I'm going to click on this to make it unsigned, which means it won't be negative. Um, I'm gonna make it the primary index. I can click r k on this, and I'm gonna click here to order increments. So instead of defining the i d every time every new one. Every new record of this that we create there'll be a new I d automatically. So I'm just gonna put in some basic fields, use the name, and then we choose the type text. Um, let's say password text and email text and you can also put in ah, sort of some rules around. How long you you you want to accept these fields? We don't really need that right now. Sir. We can just click save Oh, uh, we can click preview SQL. And why I wanted to mention preview SQL is this right? Here is the SQL card that the PHP my amon has generated for us. So if we wanted to write this ourselves, we could just copy that, go to the SQL tab and right that ourselves and hit execute, we would get the same result, but this obviously streamlines it for us. Makes it a bit easier with being interactive and stuff. Um and you don't need any knowledge of SQL sir, to look at this query just quickly so that you can recognize SQL when you see it. We've got a few key words here. Create table. Then we define the database that we're targeting dot the table that were targeting the i D . Which is it? Interject unsigned. It's not now, which means it's not empty and gonna order increments. Then the user name, which is not now. Text and the password text. Not now. Email text. Not now. The primary key being I D and the engine being inner DB. I'll click close on that and I'll click Save and you can see. Now we've got a table that shows up in our database, and we can see the different fields here. And what we can do with this table is we can inset. So I'm going to put in a user name. Let's to say, Chris, possible typing Chris password And down here I'll type in Chris and Christa freelancer dot com Click Guard. And while that we've got a new row and right here is the Kurd that we could have done ourselves to insert a row in a table. So if we go back to browse, we can see this is our table. We've got idea of one. Use the name of Chris. Possible it of Chris Password. An email off Chris at Crystal Freelancer dot com. Now, like I said, we can execute, execute SQL ourselves. So I'm gonna copy back in Ah, the SQL that we generated before And so I could just change these details. So maybe it's Denise and we got Denise password, and I want to share her password with everyone. So just type in Denise at gmail dot com. And then if I click go, that should work. It says tick, one row inserted. If we go back, Walla we've got to use is in our database now. And I misspelled Denise, which means I could just go in here. Click Edit. Her name's not Dennis, it's Denise. That email does will probably lead somewhere, but it doesn't really lead to any Denise signer. Um and what we can do now is add another table and this is kind of ah lead into relational databases. What I'm gonna do is create the i d again and I'm going to doing unsigned primary index that order increments just like before. And what I'm gonna do here is put an earner, i d. And what we can do with owner I d. Is have that as related to an I. D in users so we can associate this pet in our table pets to a particular user. So I'm gonna put in the name here, make that a text field, and then I'm going to create a, uh, type would say type so and we're just gonna you know, that could be dog cat, whatever. And we'll click save. So now we've got this pets table and let's go and then set a pet name owner I d Let's assign it to me. I was one. So make me assign it to me, and I will call it Boris and it's a dog. And then we've got that they're now these aren't actually linked yet. And the Senate ways we can do that within PHP my amon. But we are not going to go too deep into databases in this course. Um, but what we want to do now is to actually use this database, interact with his database using a PHP card. So I've already got a project. Now it's already got PHP in it. The next step for us is to connect to this database and then start out putting stuff from the database. And when we do that you will be able to see the whole thing coming together, the database, working with the back end to produce the front end and then the other way around where we can use the front end to send a server request to the back end to manipulate the database. And that, in essence, is the whole Web development cycle. So I'm excited to show you the next video, which is where we're gonna be connecting to the database and creating out very basic, but hopefully very telling Web app. All right, I'll see you on the next video. 14. Connecting to a database: In the last video, we created a database. We inserted some tables into that database, and then we inserted some records into these database tables. Now, in this video, we have finally gonna bring these records into our projects using PHP. And the way to do this is to establish a connection to the database and then access these different records through SQL and then implement with PHP. And one of the ways we can start off the connection is I've just got some documentation here from ma'am. Um, and they've given us some code to work with here. I'm just gonna copy everything except the tags because we already have them in our project . I'm gonna go of, ah, to my code editor. I can get rid of this cause it's just silly anyway, And then I can paste in this example code. Now, what we're gonna have to do is change this for our specific circumstance. So we're not looking at a database called performance schema. Where now, looking at a database called test D B. Now, if we've done everything correctly, this should connect successfully, and we should see a success message. Uh, it says connected successfully And the reason why is because we put in here Echo and echo is another way you can print out text onto a screen using PHP. So if there was an era, the page would have died and then was we would have spit spit out the era, but because it connected successfully, we got this feedback. So now that we know we have a connection now it's about kind of bringing the daughter that we have in putting it out into our application. And for that, I've got another article here from W three schools. They've got this little example here, and what we've already done is we've created our connection, so we don't need to do that again. But what we do need to do is create an SQL query and then take the results and do a loop here over all the results and then out put it on the page so that you can actually see it. So I'm going to copy that. I'm gonna go to my code editor here. I'm gonna maximize the screen and where I want it out. Put it is down here, so I'll create another div and I'll just give it. The class, ro, remember? Were working with bootstrap here. So Row is a bootstrap class that we can use, and then I'm going to insert out PHP. So I'll need the opening and closing tags. So less than sign. Question Mark PHP. A question mark closing tag. And then between here, Well, that the curtain goes in. Sir, we actually got the closing tags. I need to get rid of that. And, um, push this in. Move that hoops. Move that back. All right, sir, what we've got here is where building an SQL query and assigning it to this variable. Sir, this is an example. What we're gonna need to do is adjust it for us, and we don't really need the i d per se, but if we go into our table here, we've got user name and password. This example? Let's not show how uses password on the screen. Um, and we can type in, use the name and email. So what we're saying here, we want to select the column, use the name and in the column email. So this has to match up to these columns here from and then this is the table name. So it's not my guests. It's uses. So another thing we're gonna have to change here is the object that defines our connection . So in this example, here they have used corn as the connection. So you can see here Con Eco's the new mask you Well, so it's assigned the connection to this variable. But in our example, if we scroll up, we have assigned the connection to this variable. So I'm gonna go click that and then replace the mention of Khan here. So what we're assigning to result here is we're actually taking the connection where, using a method called query, we're putting in the SQL that we've just built up here into this into this method of query . It's going to return to us a certain result, and then we're going to store it in this variable and then down here, What we're gonna ask is if the number of rows that come out of the results is greater than zero, we're gonna output something, Otherwise we're gonna output just zero results, the text zero results, and then at the end of this, we're gonna close out connection to the database. So what, we're gonna need to do down here is change these fields again. So we're not showing Ah, I d So you can do is get rid of that. Um, we are showing the user name. So instead of name, I'm gonna put user name. And then instead of first name here, gonna put in user name and I'm going to What else is that email read? So I got email here, which we've pulled off of here, so we can dio email with a colon and then we can change the what we're targeting here to email and then a b ah tag at the ends beyond Just means it's a break tag in html, and it just means go to the next line. So if we're lucky, we have written our code correctly and this will actually work. So I'm going to refresh the page and something's happened Gonna inspect that, cause it looks like it's kind of cut off here, So why isn't it's working Well, we have one more typo in our card, and that is we haven't changed the name of our connection down here. And also we have already closed our connection up here. So what? I'm gonna do here is replaced con with my SQL I and get rid of this close because we're going to close it down. Here I'll click, save. I'll refresh the page. M wanna. We're now getting fields from the database. Granted, they look pretty terrible right now, but we can always jazz them up without knowledge of front end code. So instead of this, what I'll do is I will create a div so we can insert whatever HTML we want here. Div here closing Div and I'll call this. Give this a class off D B right click save refreshed the plate page. Not much has changed because we haven't applied any styles. Um, one thing I want to do first off is this row is not inside the container. So that's the first thing I would fix. I would go inside and put that nested within the container native. All right, so it's now in the container and what we can do is apply a few more styles to make it look a bit a little bit nicer. And this is up to you how you want to do it, But let's do a dot because we got a class D b ro open curly brackets to define our styles. And let's just give that mawr margin to the bottom 10 p x reload. The page is a bit more margin there. Um, maybe we want the first part of it bold. So we can do that without CSS weaken. Just use HTML to create a strong tag, and anything within a strong tag will be the front weight will be bolder, usually where you can use it for other purposes. So I can put in a strong and then now you can see the label is bold and the result is not bald. All right, so we've established a connection to our database. We have retrieved items from and database so you can start to see now the back end working for us. And the good thing about the diner base is its permanent. If we make a change here, we let the database sit there. And whenever we hit the website, if we made a change, it will show up. So to demonstrate this, I'm gonna make a change in the database right now, and I'm going to insert another user going to call this user Marco his past, So it's gonna be marker polar, and it's gonna be Marco at she now. So however, we change the database, we're reading directly from the database onto this web page so it should show up, no matter how we change this database, and it does. And this is essentially the back end working for us. And again, if we were to inspect this, we wouldn't see any back end code. We would literally just see a bunch of DB Rose with the output HTML code. And so this is is good for security. We don't know what's going on in the back end, and while that is really important is for a number of reasons. But ah, one that I can show you right now. And that is that we have all this information here with a user name and password. We definitely don't want anybody accessing our website on the other end to be able to see that. And if it was like, say, for instance, javascript code, if we just put that in a javascript file again, we can open up our developer tools, go to network Sorry, sources, not network, and we can go in and see what the scripts are. But on the back end, there is no way of seeing this configuration data. Okay, so that is one reason why if you're making a connection to the database, if you're using, we're working with user information. If you're segregating information based on whether somebody's logged in and you only want to show information that that user is authorized to see, then that will needs to be secure. And that's why it is very important that we have the back end to connect to the database and also be very private. All right. So hopefully you can understand the role of the back end now and how we are able to connect to the database again. Very simple explanation or demonstration here, off how the back end works. Using a database, we could do a full course on PHP with my SQL and go through how we could create, update and delete these records. But this is an overview of Web development, and ah, yet we don't have time to go into a huge 12 hours. It could be 12 hour course, to be honest on this, Sir, if you want to stick to the end and you may actually want to do a PHP my SQL project. I'll have some recommendations at the end. Um, but in the next video, we're going to get into Hannah. Actually, what's called Deploy this website, which means putting it on a server that can be accessed from anywhere and basically creating you a live functioning website. So I'm excited to show you how to deploy your new little basic app. Eso I'll see you in the next video. 15. Deploy P1. 1: Domain: So in the next few videos we're going to deploy our website and deploy is just a developer term meaning where putting our website on another server and we're going to deploy our website to the Web, which means we're just going to put it on another server so we can access our website from anywhere in the world. Essentially, we are putting our website on the Internet right now. It's just stored on our local computer and we're running a server locally. But we need to put our website on a server that's connected to the Internet and running 24 7 So yet people can access our website around the clock from anywhere. So the two concepts we have to understand to do this domains and hosting and a lot of people think that domains and hosting of the same thing. But they are definitely not. So what I'm gonna do, just do a Google search for the difference between domain and hosting and just start your research there to figure out what the difference is if you need to do extra reading. But I'm just gonna click on the first article and take a look at this house analogy. So essentially your domain is an address. So when you buy like, let's just say skill share course dot com or something like that, it'll just You're just getting the address. You're just getting the domain name. You don't actually get a place to actually start building your website so you can think of the domain name as Justin Address, and that address will point to the location of your website, which is hosted somewhere. So those files have to sit somewhere on a hosting platform on another Web server. And that's what will serve your website. So you can think of in this house analogy. The domain name is just your address, and the house itself is hosting in this analogy. So the first step will be to get your domain. And essentially, what happens when you register a domain is it goes into a centralized system called DNS. So I'm just gonna type in where ah website domains stored. So on how stuff works dot com. You can read all about where your domain is stored. So basically what you're doing when you register a domain on Go daddy or name cheap or any of those domain buying websites is you're basically getting a listing in this whole DNS system. So how do we get a domain? Well, you might have seen this before. We can go to any number off domain providers. Go. Daddy is a popular one. Um, and there are also a host, so I'm pretty sure if you go to hosting, you can buy a hosting account that comes with a domain. But if we just click on domains and ah, find a domain, we will just get the domain and the website. So go. Daddy actually isn't necessarily the cheapest. There's another one called name cheap and seeming. I'm just registering a domain that we're not that I'm not really gonna use, but just shows an example. I'm going to use name sheep and I'm gonna type in skill share course. And now it's gonna load all the ideas or the available domains. We could have skill share course, don't come his pretty certain that that's not available. But we can get all these obscure ones like skill share core start X y Z and skill share course dot space. I'm just gonna choose the one of the cheaper ones because we are. This is just an example. So I'm gonna go to the cart. It's gonna cost me in a $1. We don't need any of the extras. I'm gonna confirm Look into my account because I already have an account with name sheep and ah, check my details pay now and will stop processing your oda. And while I just bought skill share course dot space. And so what I can do now is I can click, manage, And this should be similar on all kind of domain providers. So here's a list of other domains I have. I can go down to skill share course dot space click Manage. And why we click Manage straightaway is to go down to our name servers. So right here we've got domain service that we need to set up. This is basically right here is where we're gonna point out domain to where our website is stored. So, essentially, where are hosting is now? Because name sheep. Well, they do do hosting. But if we were, for instance gonna host our ah website on name cheap, we already bought a domain so we could just leave this as name cheap, basic DNS. So just to reiterate that if you were to host your website in the same place you bought your domain, you probably don't need to change your DNS settings. They are already set to direct to the website that you border none. But if you're hosting your website on another host, that's different to where you bought your domain. You will have to set up here using custom DNs. Where you want that domain to director. Now, the choice of where you host your website is up to you. I, uh, host using my reseller account on a host cord net origin in Australia. Um, I wouldn't necessarily recommend that for you if you're in the United States or the UK or wherever you are else in the world. But for me in Australia, that's the host I use. But regardless of whether you use that host or nine or any host that you use, the thing that you need to do in order to link your domain to your hosting is to find the name servers off that particular host. So for me, it is net origin, and this is how I go about it. I would just type in net origin, DNS service. And if you're going with go, Daddy, you could type in GoDaddy DNs service. And right here there is a knowledge base article from that origin Mrs Company I use. And right here is some domain name service. So I can take the 1st 1 put it in there. The 2nd 1 put it in there, and you probably don't need all four, But I think these air just like for backup, put it in the and then I'm gonna click tick, whatever it is on your particular domain. Ah, thing that you used to register, Um, so as it says up here and may take 48 hours to take effect, But it's often very much shorter than that. But soon enough we will have our domain provider linked to our hosting provider. And what will happen is when you hit this domain, it'll look up websites on this domain name server and your host, whether it's net origin or go daddy or whoever it is, we'll find your website and serve it up to you. So what if you don't already have a host like me? Well, like I said, you can go to somewhere like Go, Daddy. I keep misspelling Go, Daddy. I didn't know there was actually a website called Go day. Okay, so you can go to go Daddy click for hosting and buy Some Web hosting could buy economy. It's only five bucks a month. And then what you do when you register for hosting is when they ask for your domain name. You can put that in with go, Daddy. However, they offer you a free domain. So it's probably more cost effective for you to just get your domain along with your hosting and you don't even have to link these together. But for me, I have my hosting on that origin, and I just wanted to buy a cheap domain on name cheap. So this linking is necessary. And also it just goes to show you the difference between domains and hosting. If I did go to go Daddy and get the web hosting with the free domain, I may not fully understand the difference between domains and web hosting because they make it so easy to put the two together. So I think that even if you do decide to go with a host that will give you a free domain and link it for you automatically. It's good to know the difference between domains and hosting and be able to link it in future if you need Teoh. 16. Deploy Pt 2: Files: all right. So by now you should have your domain, which you registered through a domain registry like name cheap. And you should have your hosting, which you may have registered at the same place or somewhere different. And if there somewhere different, you should have linked them together, putting in your custom domain name service. So the next step will be to access your control panel. And if you remember before in the last video, it said it was gonna take 40 up to 48 hours to link our domain to our website toe are hosting. But it often takes a lot less time, and I've left it about 5 to 10 minutes and it's already linked. So what I'm gonna do is first of all to verify that we can access control panel and also to then change some things on our control panel and begin to deploy our website. I'm going to type in the address of our ah website, which was skill share course dot space and then do slash C panel. A press enter and see panel is just a standardized control panel that you can use to do a lot of functions in your website. It's a lot better to see and interact with it, then to describe it at a distance. So what I'm gonna do is log in and show you what? Straight away. So I'll use the name that we set up on the hosting platform. So I did that privately. But for you, you might have done that on Go Daddy or any other number of host. And then we put in that password and we look in. So this is C panel and, ah, it gives you a final manager. You can go in and change your files. There's PHP, my amon. So weaken due out database stuff. There we can install applications like WordPress, Dumler, PRESTA shop with one click. Basically, we just click into there and then click. And still that's very handy. Um, we can create sub domains. We can create email accounts. We can Ah, yeah, there is a lot of different things we can do, a lot of which I haven't even done before. So what I want you to do now is I want you to go to your file manager, and I want you to just look in here, all right? So looking at this structure, we can see, um that we have Ah, home directory. And we have these different folders E t c logs, male, public ftp, html ssl, TMP. You don't need to know what all these don't do. But if you have a folder called Public HTML, definitely click into that because that's where you're gonna put your website. Because when you hit your domain, it's going to serve up the website from this location. Okay, so right now we just got this random photo with C g. I been that's completely empty. So there's no risk in ah, whatever you do with this right now, because completely empty. Okay. So the next step would be to upload ah website into this file, manager. So what I'm gonna do for that is I'm gonna go to my skill share course, my project folder. I'm gonna go back. I'm gonna find it here, and then I'm gonna zip it so that we can upload it as one file. So on, Mac, I press compress and I get a zip file, so I'm gonna go here. I'm gonna click upload. I'm gonna grab that zip file just right here. it's gonna upload. I'm gonna go back. And then from within a file manager, I can click on it and click Expert extract, I think is the word on on Ah, one C panel. Okay, so now we've got this because I compressed another Mac, we've got this Mac OS X file photo robber. We can delete that, and then in here is our website, so we're gonna need to grab a lot of these and move it back one. So rather than this photo, we're just gonna get rid of that and move it to public html go back into public hedge TML This folder is now empty so we can to lead it. And one, we've got our website up there. Just one second. I think we'll delete this zip file as well, But yet we've got out front and assets there. And let's just see what happens when we type in our domain. Now, skill share course dot space, and we're going to get a database connection era. And that doesn't surprise me at all because we've for gotten an important step right now. And that is we haven't set up a database, so it's putting in all the files is all well and good. But we did have defined in here. If you click into the file and then click edit, you can edit the file directly from your file manager. We have all this information, right? We have all this, ah, servers and database to connect to. And the database really is a separate entity. So just putting our files in here is not enough. We also need to set up out database and copy that across is well, so that's what we're going to do in the next video. 17. Deploy Pt 3: Database: All right. So in the last video, we uploaded our website files to our new host. But there's one thing missing and that is how database hence why, when we go to ah website, it says connection era. And that's a good sign in the sense that we know that our website is now loading that code that we created. But we haven't actually set up the Dina Bass on this remote server, so of course we're going to get a connection era now, just to be clear, if we didn't have a connection to the database, perhaps we were uploading an app that didn't even have a back end. Ah, we would not have an issue. And I just want to demonstrate that quickly. You don't have to follow along. But if we dig, revert back to what it was before, which was hate TML and I click edited, and I just got rid of all the PHP which won't make sense in a HTML document. Anyway, remember, we've got this file save locally, so you don't have to worry about losing your progress. We can just grab it as long as we've got it saved to our computer So I click save. And if we go back to my just double check, there's no PHP yet. There's no PHP. I'll go back to my website, refresh the page and you can see we've now got the best website ever. I just realized that we do have some PHP here. We had the heading so I can put in best website of all time. I think that wasn't what the name was, but oh well, but we can go back and boom. You can see that we have ah website live on the Internet. But of course, um, we want to deploy a website that is connected with the back end with a database. So I'm just gonna delete that file and then up blurred our PHP file again. So I'm gonna go back to my skill share course, put this back in. It's uploaded so I can go back here and we'll get that connection error again because we need to set up the database and what we can do is use PHP. My admin. So the same program we used on our local map Serbia we can use on our host a swell. So what? I'm gonna do is find out PHP my Amon. You can access it via here. But if you don't have this page, you can also take your host name and then puts slash PHP my amon and what we're gonna do. Here's click on test DB and we're gonna export everything here so we can quickly import it into our new host and start to create a connection to it. So I'm gonna do a quick export. This is the SQL code, which will create everything. So we just need to copy all of that. Then we're going to go back to our C panel and from here we're gonna use PHP Miami, which is right here in just a sec. But first of all, we need to create that database that we made on our local website the Testy be because it doesn't yet exist on our host. So I'm gonna go click my SQL databases and I'm going to create a new database. So I'm just gonna call it test so it's created and you can go down here and see it's got skill short on skills share course underscored test. So it forces us to use, um to name space it using this, which is the name of our website. Um, and what we need to do now is create a user toe access that database. So I'm just going to call this user admin, and I'm gonna type for the past word. You can talk whatever you want. I'm just gonna generate a password randomly up here in my one password password manager. So those are very strong passwords. Make sure to copy that. So I'm going to create a new document just so I can store that pass. What? You don't want to lose it? So that's the possible that I selected. Then create user. Now you've successfully created a database user. Now, the last thing you want to do is add the user to the database so the user is gonna be skill share course slash Eman in the database is skill share course on the school. A test click add and give it all the privileges. Pick make changes and the changes have been made. So now we can go to PHP my Amon, which we can do by clicking over here, going to PHP my Amon. And from here you can see that we have our skill share course underscored test. Now, the first thing you should notices is different in its name to our testy B, which is testy. Be. So we're gonna need to, um, make some changes there as well. But we can go into here into a SQL and copy across that query. We've got our password there now, so I'm gonna have to go back to hear copy across this query that were you put there before priced it in here. And instead of test db, I'm gonna change this to skill share course on the score test, which is our new database name. Now look for any other references. Off test on the score. Db That should be it's Yep, there's no more. And if we click go now, it should select that database and then import all out tables. Hopefully, let's see if it works. So it says no database selected. So what we're gonna do is we're going to go into the database and then put the SQL from the context of that database. So I'm gonna go back here, put in the name of the database again, click go table pets already exists, so it looks like the our import already worked. So we can now go in. And, C, we've got our table full of uses and our table full of pets. So now it's a case of using all the information. So the database name the new user we could created. And now changing that in our code so we can get a database connection, and that will be the final stage of getting our website to show up. So let's do that right now. All right, so we got out database now inside on new website. What we need to do is update our index dot PHP file because the name of the database has changed. And also the user which were using to access this database has changed. So if we go over here and go into an index PHP, we can edit it. But if you double click it or download, you just want toe klik it once and then click edit, and you can edit it right in your browser. When you're doing small changes like this, this is okay, but if you're doing big website changes, um, you would probably want to go with FTP, which you can access down here. That's a bit more of where can you access it, Which you can access from here. Um, but that's more of an advanced concepts. So for now, what we're doing, it's totally fine just to use the file manager. And what we're gonna do is update these fields here. That user name, password, host and database. So that easy one we know is the databases no longer testy, be it a skill share course on the score test. So I'm going to put that in there. I intuitively pressed command as to save, but you don't do that when you're using the file manager. So going back to hear if we don't remember, I use the name. We can just go into my SQL databases and check the current users. So I use the name was skill share Course on the score Admin. We can go back here, put that in as the user name and remember, I created a document to save our password. I'm going to go in. Copy that and put in that password now for DB host. We can just leave it as local host click save, Go over to our project. Refresh the page and let's see what happens. Walla Connection successful. And we have a website here and we allow references to the diner based still work. So the only thing that really changed was the name of our database. But everything inside is the same on also the user that connects to the database that that is just to have a ah user toe log into the database. Everything, once we logged into the database is the same. So the table with names were the same, the fields with same. And that's why we suddenly have a website here. So in the next video, I'm gonna show you how you would edit your website live using FTP because if you are to make changes over and over again, you don't really want to do it in the file Manager. Ah, and chances are you probably want to do it locally. First, if you're doing a lot of development, so edit it here and the import of the cross. There are many ways to deploy and more advanced ways to deploy, but I just wanted to quickly show you ftp because it's important to know as a Web developer , So I'll see you in the next video 18. Using FTP: So in the last video, we updated our index dot PHP using the inbuilt editor in our C panel file manager. But in this video, we're gonna talk about F T. P, which stands for file transfer protocol. And what is really beneficial about FTP in a situation is safe. For instance, we don't want to edit these files from within this cloud interface. Maybe we want to edit them using our code out of the Adam because at least for me, it's a lot more nicer to use. And we can have all of our files here quickly. Creditable. Um, sir, it just makes it easier. We can use our local tools to make live changes to our website now a disclaimer, depending on how big your website is or what the changes are you're making, you might not want to make life changes, so you probably should build it all locally. So develop it all on your local host here, verify it works and then start to migrate it over. And there are more sophisticated ways than just copying the files over like we've done. You can also do that through FTP. But say, for instance, there was a small change or, um, anything that you think is not going to cause a big problem. And you wanted to edit this Using your own code editor. We can use what's called FTP. And I thought this would be important to include FTP because of something I use all the time with my projects. So we're going to go back to see panel here, and we're gonna go back to the home page and what we can do to create an FTP account is click on FTP accounts and here I'm not gonna be to creative. I'm just calling. Call it FTP account and I'm going to go to one password to generate a random password to use. And what's important here is the directory. So you want to get rid of all of this because by D phone, it's gonna section off the amount of information that this FTP account can gather. So, um, if you were running a big website and you just wanted to give a particularly user access to a small power a small part of your site, you would maybe create a different directory for them, But we want to edit the whole site so we're gonna get rid of that. And we don't really need a quota because it's wedges using it. So we'll create the FTP a cap, and now we can see it here. Now, the other thing, you're going to need to use FTP on your locally on your own computer is an FTP client, and the FTP client that I use is called Cyber Duck. There's also one called file Zilla, Um, but basically, it is a small program that allows you to connected by FTP. They allow you to connect other service as well. Um, I've already got cyber duck installed. All you need to do is just download it and install it. There's not much configuration that needs to happen in that respect. And what I like about C panel is I can just click on this and you can download the configuration file. So if you want to make your life easier and you're on Windows, use files a lot or court ftp, and if you're on Mac, you can use cyber duck like me, and you are able to download the configuration file, which will have all the information saved for you already. If you want to do it manually. These air the fields that you need to put into your client. Okay, So what I'm gonna do is download the FTP configuration file for cyber duck. Just saving into downloads. And all I need to do now is just click on it. And certainly cyber duck opens any door open a or or start to open a connection to our website. All right, sir, it's got here. The user name pre filled, and we can ah access it. We just need to typing up. Possible it again because it's not saving the password for security reasons. So we can paste in our password there. Click Le Guin. It's going to say unsecured connection. Most often times just click continue, and once you're logged in, you be able to see your whole website, and then you can click into public html and there's your index PHP. So the cool thing about using FTP as I can right click on this and I want to edit with text at it so I can changed my preferences and good editor and say I want to edit with Adam and always use this application. So then I can make sure it's think. Maybe you need to refresh. Now I can click the edit button, and suddenly we have it in our code of that. Now, something that you need to be aware of is the difference between your index PHP on your remote Web server and the index PHP you have locally. So if you have them open at the same time, I'm just expand this Ah, atom will let you know which is which. So the one in the private via photos is the one that you're editing temporarily to then re upload to your website. And this one is in your skill share course project directory or whatever it is called minds just called skill share course. So we can do stuff like go into here and I'm going to go over to here where we can see our website life, put it to the side, and let's change some things. So let's say hello and welcome to this website. Then we press safe, and what's gonna happen is it's gonna upload with cyber duck so it says, upload complete ones that says Upload complete. We should be having to refresh the page, and it says hello and welcome to this website. And so now we're able to edit our live website using a system that's a lot more familiar to us. When we developed what's called locally locally meaning on our own computer, we can use our own code editor. We can navigate two different files. Say, for instance, if I wanted to edit another file as well, say, for instance, I wanted to have the styles open at the same time. I can edit those as well, and so I can bounce back between index dot PHP and styles dot CSS on the remote server and click save and as soon as it uploads, those changes are live on our website. So that's the benefit of using FTP this other benefits. But for me, as a developer, I use FTP in this way, most often being able to edit ah website on a remote server which sometimes is not even a live website, might be on what's called a staging server. So a staging server is, ah, live website, but it's not at the address off the final website. All right, so that's a little bit about FTP. Cyber duck is a cool little lightweight program for use on the Mac. For you guys on windows, you might like file zilla. Um, but now that we've covered FTP, we now know how to build a website, put it on the internet, and now edit it using FTP and, sir, that is essentially the bulk of the off the course. A few more videos coming up to wrap us up, and Ah, yeah, Hopefully you can start to understand now how Web development works and the different parts that all come together to get you a website on the internet. Um, sir, if you have any questions, of course, leave them in the question section and I will see you in the next video. 19. Bonus: Wordpress: all right. In this video, I want to share with you a little bit of a bonus. And that bonus is WordPress. Now, in this course, we've basically built everything from scratch. Yes, we did use some frameworks in the case of Jake weary and bootstrap. Um, and we did use a little bit of a template to get started on our home page, but you'll notice that all the PHP we had to do ourselves, um, And if you were to build a fully customizable web app, you would have to program yourself and use libraries and maybe develop on one of those back end frameworks we covered in the lesson on frameworks. Um, but for a lot of people, we don't need to reinvent the wheel. Um, we just need a simple content website and one of the best platforms to develop That is a system called WordPress. Now, if we go into type in WordPress into Google, what I'm not talking about is wordpress dot com, which is a website that will allow you to create a WORDPRESS website on their own hosting, and they kind of control everything. Um, but what we're talking about is the open source software. Eso wordpress is a bunch of code that you can just download and edit completely or use as it's given to you right out of the box. So just to demonstrate that if we were to download WordPress, it's only about a nine megabyte file, so I can go into downloads that will unzip WordPress. And then this is essentially the back end of a Web press site. So you've got a whole bunch of PHP files in here. You've got plug ins and themes and different things which we'll get to in just a sec. But I just wanted to make the point off. You get a bunch of PHP files when you download WordPress. But together they create basically a website right out the box. So to demonstrate this, what I'm gonna do is I'm gonna go back to our project here, and I was never too attached to this website to begin with. So what I'm gonna do is just delete what we've got here. If you've put a lot of effort into your website, maybe you don't want to delete this, and maybe you should do this on a different website. But I'm not too attached to that. So I'm gonna use the exact same host Teoh to do this in the exact same domain. So I'm gonna go to see panel. And what's great about C panel is you can install a few applications with, basically, they call it a one click install. But there's only a few clicks to do. It's doling WordPress on your own computer. Takes a bit of time. You need to set up databases like we've done, But using C panel, we can just to get a Web press site pretty easily. So we got wordpress here. We can click in, stole application and ask us a few questions. Um, we want to install it right on our domain because I just believed the files. Um, I don't mind that this will become my WordPress website now. Um, you can stay with standard settings. What I'm gonna do is I'm going to change my administrator user name, just two admin, and I'm gonna put in another possibility. Um, I know we created a lot of passwords in this course, but we should really, um, create a separate password for ah wordpress as well. And, sir, what? I'm gonna do is, like, always going to go to my one password and just generate a new password and make sure to save that somewhere. So I've got FTP password here. WordPress password us word. Okay, so this one's empty, You administrated email is the email. It's gonna send information to, um, based on what's going on on WordPress. So I'm gonna change that to Chris and Christa. Freeland said dot com and you can name your website. Whatever. I'm just gonna leave it as my blog's just another WordPress site and you can leave everything else the same and click install and you'll see here how quickly you can get a wordpress installation up. So close. These and hopefully I can show you this in real time so very fast. If that doesn't get stuck on 99 and bam installation is complete. How quick was that? So now when we go to wild domain, we have a WordPress site and I mean, it doesn't look like much now, but there's a few things going on here, and what we can do is we can access the admin. So the important thing to know is a lot of people get confused about. Oh, I already have my log in details for C panel. Why do I need to log into WordPress and go into a different dashboard? Well, see, panel is one layer deeper. It's ah, just a place to manage your website, and you can actually access the code. So if we go back to our file manager, we can see now that in public html that structure that we saw before when we downloaded wordpress is now on here. So, like I said before, wordpress is just a bunch of code files that together make you a website. So in C panel, this is where you would do all the things that we've done already. Like access your files. Um, you would what else? Look at your database manually. Um, dual. These email addresses, sub domains, all of that stuff you would do from your c panel. But in terms of your new WORDPRESS website, this is the back end. This is your dashboard. And so you need a different log in for this. Sir, how WordPress works and the magic of is actually started off is a blogging platform is I can create posts, so I can click into here and instead of hello, world, I'll just leave Hello world that for a second. And I will say glug post number two And then we can just type in glug content and we can give it a category is as well. Um, let's just say it is Ah, travel articles. I love travel. I know this is not related to travel, but just as an example, we can click, publish, and then we can view it. So now we have a blood post with blood content and then anywhere which references all the blood posts we will see. So by default, when we go to our website, it will show us all our blood posts. So now you can see hello world, and you can also see blogged post to now where currently logged in. So we've got this bar, um, as an admin. But if we were to open it in an incognito window so that we can see it as the user would see it, they see it exactly the same. Except without this bar. And they're not late able to and they're not able to edit things on here, Eva. So if you noticed from before, there's a few extra things that pop up like edit. Ah, the user won't have that on their end, so it's completely secure unless you give them a log in and they can actually change the stuff. So the first thing we've having a WordPress site that you want to customize is a theme. And what you're seeing here when you go to the actual Web site is a basic theme by Ah WordPress itself called 2017. Every year they create a new one based on the year. And so that's what 2015 looked like. That's what 2016 looks like. So I'm assuming the new one will come out pretty soon. And then there'll be a number one that year after, um, But I like to use a theme called Divvy. You can find divvy, just typing divvy theme. It's provided by elegant themes. You definitely don't have to use this one, but it does pay to invest in a nice WordPress theme that has a page builder because essentially, if we wanted, I got too many things up at the same time. If we wanted to customize and create a page in ah in this current theme weaken Go to add new page and we basically get the same interface as outposts and we can add images. Um, where have I got image? It's just put an image of my face in there because I love myself. It's just cause it come came up first. And maybe this is an about page for me so I can align this to the left and then put in Hi, I'm Chris and I clicked the link there, so that's trying to link to somewhere. But I can just edit that and you can see it's all we haven't had to dig into card yet. Adul. It's all just, um yeah, using this editor, I still can't get rid of this. So essentially, to get rid of this, we can actually dig into the HTML And that's done by clicking this text app so I can see here now that we have, um, and a link tag so you can get rid of that on eve aside and that allows us to click back into here and see the visual representation. But when you're using a theme that doesn't have a page builder, this is all you get. This is all the customization you get. You can online. You can put in a quote. Um, you can put in links, um, different headings. So I'm going Teoh put in the heading one. Um, And then we can publish that as a page. Maybe not. I should probably give it a title first about and then we can have our about page, and they will show up depending on based on a theme. But the benefit of using something like divvy is you get a page builder and, ah, cause divvy is a premium theme. You can't search for it here. You'll have to upload it once you have downloaded it again. We're not doing a full course on DVD or work breast development. I just wanted to give you a bit of a demonstration about how you can create a website with , you know, minimal code and also have it fully customizable. So this is just uploading now it's a pretty big theme. Um, well, just fast forward this and I'll see you in just a sick divvy has uploaded into our WordPress site. Now they're just going to install it now for us. And as you can see here, it says Theme installed successfully. The last step will be to activate it if we're confident. We definitely want to change to this theme. We don't have anything on our website yet, so that is not an issue and you can see it's already added some stuff to our list. Here. There's another post type in ah DV court projects and that is good for portfolios. Um, if you're using a premium theme Ah, like divvy. Um, it often give you another menu and give you theme options so you can edit features directly in the theme. So if we go back to our website, we can go up here and click visit site and suddenly our website looks completely different . We still have the two blawg posts, but we have a whole new structure, I guess. A new skin, you could say. And this is really the new theme divvy. But the powerful thing about divvy and a few of ah, um, sort of premium themes as well is you can create a new page and you can structure it using their page builder. So now that we have divvy, you can see these extra purple things coming up. So we got the settings over here, and then we got a button here to use the Divvy Bilde. So what I'm gonna do is I'm gonna name this page Divvy Page, and I'm gonna click. Use divvy buildup and you can actually use the visual Bilde. So I'll show you that this is a special visual. What you see is what you get Dota in, Ah, divvy. And then so you can actually interact with the page right in front of you. It's great for designers that want to see the changes happening straight away. And so in here, I could just put text Hello, Hello and you can see that straight away. And then we can change other design aspects like alignment, sizing. There's a lot of options here, and it takes a while to get the milieu. If and it's gonna depend on which theme you're using, I'm just using divvy. If we click save, I'll show you Oh, published rather because it is a new page. Now that that has been saved and published, I'm gonna exit visual builder and show you the other way we can edit with divvy and that's through this divvy Bilde and became build out sections. Um and ah, do not a Where's our row? Here? We've got our very module. We can add another road and we can set it up. However, we like like four, um, same size columns or we can have it like this. With one being to third size and one being 1/3 size, we can split it in two. Let's just do that. And then we have these spaces to click in and put a mug. Joe, you can look out the different ones and divvy if you're interested. But we could put like an image, for example, And then we could put in that image that we had before it saved. And then if you don't wanna actually publish the changes, So if you're using this, um, on a live website, you can just preview to see what it would look like before you save. And I haven't put any restrictions on the actual image, so it comes up as the full whip. But if we wanted to change the whiff of it to 12% we could refresh it, and then in the other part we could move it down to here to leave this rare put in a text field. I'm just playing around. To be honest, I'm just showing you what we can do in divvy. Put test text, save update, view page And you can see we got one column here and one column there now. Obviously, it's not the most beautiful website that still work that needs to be done. But I wanted to demonstrate to you guys WordPress and how we can do a lot of the heavy lifting right at the box With WordPress. It's a very powerful open source software on the reason why it's, uh, cord open source is because we can edit the code directly. In fact, we can go right into appearance ended up and it's saying, Be very careful about editing back incurred. I'm saying yes, and we can edit any of the theme files off any of our themes. So it really from within WordPress we can edit anything within this particular fota. So, um, this is just an example. But on this website we would see another folder for divvy, and we could edit all of those files. And then if we go one step deeper like we did with our file manager. We can go right into our file structure and edit any of these now. You wouldn't want to edit any of these because these are the ones that make WordPress work . But again, just to demonstrate that this is open source. This is just a bunch of files that you can edit. Um, but it is insanely powerful, and you can customize as much as you want with WordPress. So it provides the good balance off doing a lot of the heavy lifting, preparing some of the stuff that you wouldn't want to code from scratch and then also allowing you to still fully edit it and customize the site as much as you need. So I just wanted to leave you with WordPress because for a lot of my client websites who come to me and they just say I want a website, I recommend them. WordPress and divvy is the theme of used recently. But there are other themes that I would recommend as well. One of used on a client project has been fortuna, which comes with its own page builder. But yeah, I would totally do your own research to find a theme with a good page builder. And you can have Web sites up and running like that. For example, my own, uh, my own website. Chris, the developer I built very quickly using WordPress and divvy. So it's quite easy with WordPress. You set your menus, you can set everything dynamic. You can create pages like we did. You can see blogged posts. Um, and yeah, you can upload your photos and logos and different things. So, yeah, I hope that was a good little introduction into a Web press. If you don't want to build everything from scratch and you just need a basic content website or not even a basic content website but a blawg or something that doesn't, you know, like a whole standalone app that has to do something special. WordPress is often a good choice. If you're doing a e commerce website, there's a few different platforms as well. But I mainly do content websites, and WordPress is a very popular what's called content management system, a k C. M s for for doing ah content websites. So I hope that that was a good introduction in to WordPress in the next few videos. We're going to wrap up and get you started on your urn class project. So I'll see you in the next video. 20. Conclusion & Class Project: all right. It's time to wrap up this course and get you started on your class project. By now, you should understand the difference between the front end and the back end. The purpose of HTML, CSS and JavaScript. What a framework is and why should use one the purpose of PHP and MySQL. Well, the difference between a domain name and hosting and how to publish your website to the Internet in our class project. It's time to bring all this new knowledge together to publish your first website to the Internet, or second or third. Maybe you've done this before. Regardless, I'm gonna give you a few options. Number one. You can build your site from scratch like we did in the majority of this class or to like we did at the end. Start with getting signed up to hosting and start building your site on WordPress. It's up to you Evil way. How you want to do it. Just remember that any time you don't know how to do something, just start Googling. I'm being seriously yet and I'm not exaggerating when I say that constant research is something you will need to do throughout your career as a developer. And even if you came just to learn more about the Web, learning how to research like a Web developer is a skill we can all definitely benefit from developers, after all, largest problem solvers and the Internet itself is a vast resource for learning anything, just like we've done within this course. So if you do need any extra help, just leave me a comment in the discussion books. And also let me know if you'd like me to create another class for you guys going into greater detail about anything. We talked to that in today's class. All right, that concludes the course. I thank you guys so much for watching, and I look forward to seeing your class projects. Best of luck, and I'll see you guys in the discussion section.