which is different from the background color of orange on the main part of the body. So now we can continue on with adding color to the rest of the parts of our page. So after the container, if we're going left to right at each level, we can look at the, what's next? The header of our page. So the container contains the header, footer and all that main content. So if we start with the header, the background color that we're using for that section is a light gray. So I'll go ahead and identify the header. And since that's just an HTML element, this will select any headers on the page, even if there are more than one, in this case there's only one on our HTML page. And in this case for the background color, since I said specifically light gray, this is what the regular keyword gray looks like. And I don't want that. So I'm going to specify color in a different format this time using the hexadecimal format.  So in this case, I'm using a color that corresponds to the code E-E-E, E-E-E. And you can see that's a really light gray. You can find colors and specify them using hexadecimal. There are a lot of tools online that help you do this. And they have the color picker wheel and then provide you with the hexadecimal code with that hashtag in front that you could just use in CSS. So that's my background color. Then I'll use a regular color keyword. So this is a property that refers to the font color of a section. And I'll give this a color of brown. And then I will use a property called border. So this allows you to add a border around elements. This does add to the size of an element, which we won't focus on too much for the purposes of this video, but I'll add a border. And then I can specify a few parts of the border in one statement. So I can start with the size. I'll do a, let's see, four pixel border. I'll make it brown to match the text color. And then I'll make it a dash border, but that could be solid or dotted as well. So I'll save this and let's look at what these changes look like in the browser. Refresh and we see that these colors have been applied to our header section. And notice that the inheritance is at play here since the header is part of the body and we've specified a background color of orange for the body, but because the header has a more specific or a lower level selection then that color of the background color of gray applies over the background color of orange. The next section we want to style with color is the footer and we'll give this also a background color of that light gray. And then I'll give it a font color of the regular gray, which is a little bit darker, just for that muted look for the text in the footer. And finally, I just want to style the headings in the page. So I'll give each choose a heading color of orange to match the theme of the page since those are the biggest headings other than the title. And then I will give H3s and H4s a brown color. Notice that I'm giving, since I'm giving both H3 and H4 the same exact rules, I will just list them both in the same selector separated by a comma. So whenever you list two selectors separated by a comma, then the same rule is applying to each of those selectors independently. And we'll see other examples of combining selectors as we go along. So this should be color is brown. And that should be it for color. So let's take one final look at the page, refresh. And it looks like we have all of the colors we need for the final version. The next thing we can focus on now that we've gotten color out of the way is giving our sections and components the proper sizes and orienting them in the right position on the page. So let's switch back over to the code and get started with that. Actually, before we do that, let's take a look at what's kind of out of order right now. So we want this share your favorite section to be the sidebar on the left. And then we want the all about sweet potatoes. Actually, everything from here on out from to the bottom to be part of the main article. And then this gray part would be a footer that stretches across both of these, the sidebar and the main article. And we're going to start just by sizing everything correctly and then we'll take a look at how we can push things to one side or another and then put space between things. So let's go ahead and switch back over. So starting from the top again, the first thing we'll start with is giving the container a width and that container as a reminder holds everything from the header down to the footer. And we just want to give a width so that within the body we want that white section that's inside the orange section to have a specific width and we'll give it 1000 pixels. If we take a look at what difference this makes, I'll go ahead and switch over to the browser. We see that it has a width now, but it still doesn't look very nice. And what I want to do is center this whole white section, the whole container element in the middle of the page. The way we center elements in CSS that are block elements like this one, which we won't go into too much detail about, but since this element is on its own level, it's not something that's on the same line as something else, we can center it by giving it margins that automatically align. So the margin property is a spacing property that allows us to define the space between one element and another. And we'll give, there are a few different ways to specify the margin. One of them is a shorthand that allows you to give four values that are assigned in order. So the first value is the top right bottom and then left.  So if you only give two values, you're only giving top and bottom and then right and left. And that's how we're going to do it right now. So we're going to give values of zero and auto. So what this means is take away margins from the top and bottom and this is for our container so that we don't have any extra space above or below the container that we're creating. And then for auto, that's for the left and right margins and we want that to automatically adjust the left and right so that this box is centered on the page horizontally. So if I save that and look in the browser, now this box is aligned to be centered horizontally on the page. Next, we're going to go down to the side. We haven't created a rule for that yet, but let's do it under the header and we're going to give the side a width and this is the sidebar that has the form in it. And we'll give that a width of 250 pixels and let's look at what this looks like first in the browser. So that's what it looks like. And we want to go ahead and just float this to the left just to make sure that our sidebar is always on the left hand side and the article is always on the right. So floating, as we see here from the handy tooltip or help box in Visual Studio Code, allows you to set or position an element to a certain part of the page so we have the option to float something left or to float it right. So in this case, I'm going to float that left. And then for the article, I'm going to go ahead and give that a width of 700 pixels and float it to the right. So if I look at this in the browser, now we have the sidebar to the left and the article to the right, but stuff looks a little off right now and that's because it's hard to know why, but if you notice the footer is coming above before we finish the content of the article. So we want to push that footer down and that will help stretch out the rest of this container so that we fit everything inside of it. So I'm going to go back and within this footer section, I'm going to add a property called clear. And what this means is if anything else is floating, I don't want to push my element down below those floating elements. So we're going to say clear both, which means clear anything that's floating to the left or floating to the right. Now let's go back and look at what that does. Refresh, and we see that that kind of pushed that footer down so that the sidebar can float to the left and the article can float to the right. The last thing I'm going to do is make sure that the elements of the form are each on their own line. Right now the submit button is kind of next to the text box, so I'm just going to make sure all of those are block level elements so that they take up their own line. So I'm going to create a new rule for the input box and the text area, so go in using those commas again and I'm applying the same rule to both of these elements and I'm going to make those block elements. I do that using the display property so that they display as block level elements and that's it for that. So if I go back, now that button is on its own line because each of these boxes is taking up a full line on its own. Within the containing box that it's in, so that's important to note too, it's taking up the full space of its parent box. So in this case, these are inside of a form which are inside of that aside sidebar and we gave that aside a specific width so that this won't go beyond that. Now that's it for sizing things. I think everything has the proper size. So now we can do the final touches in terms of moving things around at a smaller level. The first thing I'm noticing right now is that all of this content in our side is really close to the edge, the left edge of the container so we're going to give it some padding and what padding does, padding is pretty much, you can think of it as the opposite of margins a little bit. Margins are like extending your arms and pushing someone away from you to create that space around your bubble and padding is giving yourself more space inside your own bubble. So if we give any of these elements padding, it'll push the content away from the border and push it away from this edge of the container. So I'm going to go ahead and do that for the aside. So I already have a rule here for the aside, I'm going to add padding left. So padding is just like margin, you can apply it on different sides using those short hands or you can be really specific and only do one side and I'll give it a padding of, let's see what 10 pixels looks like. So that looks pretty good and now we have that more space to the left here. The next thing I want to do is center the heading up here in the header. Let's center it horizontally first and we can do that using the text align property. So here I will go and do text align center and let's take a look, that looks good. And then the next thing I'll do is yeah, that sweet potatoes, that title looks good. And then since we're looking at the header, also looking at the footer, I kind of want to push this a little bit over as well and give it a padding left. So I will give it a padding left of five, I'll do 10 pixels. So I'll say padding left, 10 pixels, there we go. Now I'm just going to move some things around at a lower level. For one, I want to remove some of the space between H2 and H3 headings. So I'm going to give each of the H1 through H3 headings a margin bottom of only five pixels and let's see what that does. So since I want to group all three of these, I'll just do a new set H2, H3, and I'll give it margin bottom five pixels. Oops, what happened? Then I'll just do for the H3s a margin top of five pixels as well. So what that did is reduce the space between those two elements and I think that's a little bit better. Over here I want to give the form a little bit of a margin top to push it down a little bit. So let's do that. I'll do 10 pixels just to give it some space. And I also just want to put some space between each of these form elements. So I'll give five pixels margin top and bottom between them. So that's back to this rule set and I will do margin, I'll do five pixels and then zero for the horizontal left and right margins. So that gave it a little bit more space and I might actually change those to 10 pixels. Let's see what that looks like. Okay, so let's just leave it like that. I also want to space these list items out a little bit. So I'll give each of those a margin top of 20 pixels. Let's see what that looks like. That's fine. Like I mentioned before, we're not really following any strict design principles or really going after a certain kind of design here. We just really want to practice using a lot of these rules and properties. The last thing I want to do is if you notice now we've made some changes, this main title or heading of the page is no longer centered vertically. So one way we can fix that is by giving the heading text a line height that is bigger. And once we give it a specific line height, it will automatically center vertically to fulfill that height. So I'll switch back over and I think I have a section. Yes, I have the header. So I will give that a line height and a way to specify line height and font sizes and things like that. There are a couple of ways you can do percentages. You can do pixels. And what I'll do here is the EM unit and one EM is typically equivalent to 16 point font when I default browser setting. So in this case, I'll set this to five EM and that should center it. And it doesn't look completely centered. So I'm going to make sure I take off the margins just so we don't have anything else interfering and we don't really want specific margins anyway. And actually we need to, in this case, we'll apply the margin zero to the H1 inside of the header. So to do that, we just use a space instead of a comma between these two selectors. And in that case, we are only applying the following rule to any element that is an H1 that is a descendant of a header. So that means an H1 that's essentially nested somewhere inside of a header element. And for us, that is the title of our page that's inside of our header. Give that a margin zero, save. And now we see that that centered our text vertically. So that is pretty much what we're going to cover for this demo. CSS is a lot more involved to learn than HTML is. HTML, there's a very limited set of tags that you can use and it's all about your content and really labeling it. But with CSS, there's so much you can do with different properties and using them in different combinations to create different styles and looks for your page. So it's pretty hard to cover anywhere near everything you can learn with CSS. But the goal here was just to give you an example of how you can combine these properties to create different looks on your page and when and where to use certain types of properties. I hope that demo gave you a good idea of what CSS is used for and how to get started with writing CSS code to work with your HTML web pages. Just as a summary, CSS stands for Cascading Style Sheets and we use it to control the presentation of web content. It is really important to remember that HTML is meant to be used for content only and CSS is meant to be used only for presentation and that separating those two concerns makes it easier to author our code and to maintain and it makes it easy to write CSS code that can control several different web pages at once and be reapplied to new web pages. The basic premise of CSS is that you are creating rules in which you apply properties to specific HTML elements and the goal there is to modify the style of your web page. Those properties fall into high level categories to cover color, font, size and position and with those sets of properties we can effectively style web pages and transform them in so many different ways. So the possibilities are really endless when it comes to using CSS to style web pages and although you've only gotten the basics here in this demo, there is a lot more to learn. There's a lot, you need practice when it comes to getting experience with CSS and with any programming language in general. If you want to learn more, I do have an edX course that covers CSS along with HTML and other topics. It's called Designing a Technical Solution. It's available on edX.org and the link is right here. So regardless of whether or not you take that class I encourage you to practice on your own, build some web pages, style them in different ways and really get your hands dirty with CSS. I'll see you in the next module where we'll talk about JavaScript. Welcome back. So now that we've covered how to build and style web pages and this module will take a look at how to make those web pages interactive. We'll explore a language called JavaScript and learn about its role in web development and then we'll take a brief look at the basics of writing JavaScript code before we jump into how to use JavaScript on web pages to create interactive experiences for users. So let's talk about what JavaScript is and what this language is used for. JavaScript is known as the programming language of the web and it's really popular right now because of this since web development is such a big area of software development right now. Because of this you've also most likely been a user of a website that uses JavaScript. If you look at this table here, this is the technologies and languages that the most popular websites right now are built with and you see that every single one of these uses JavaScript on the front end or the client side and some of them even use JavaScript on the back end which we'll talk more about later. So JavaScript's purpose is to make web pages interactive and dynamic. So we need that because with HTML we can create content with CSS we can style it but once we do that with HTML and CSS our web pages will look the same all of the time no matter what. So one web page will look the same until you go to a different page and reload it. And JavaScript allows us to change how the web page looks or behaves once the user is already on that page. So maybe there's a button and they click it and they need to see something happen on that page without having to reload another page. JavaScript was released in 1995 and it was originally called LiveScript. Just FYI, JavaScript has no relation at all to the language Java. That's something that confuses a lot of people in the beginning but they're unrelated completely. And as we mentioned, JavaScript is also used for server side programming which is why you see JavaScript in some of these rows for backend development here. So as I mentioned, the overall use of JavaScript is to manipulate web content dynamically and to avoid having to reload pages every time we want to change something on that page. So the way that JavaScript does this overall is by reacting to things that are happening on the page, reacting to the user clicking a button, reacting to a certain amount of time passing, reacting to a scroll or a hover on the page. All of these are called events that can happen on the page and JavaScript reacts to those events. You write JavaScript code that listens for these things and then does something as a result. And the things that you can do as a result of these events all revolve around changing the HTML content on your page or even adding and removing content from your page. And we'll talk more about those types of things that you can do with JavaScript but overall this is the premise of how you use JavaScript for client side web development. And we'll also be using JavaScript for the backend server side development and we'll talk more about that in later modules. So let's take a look at how you write JavaScript code and the basic syntax. So JavaScript's different from HTML and CSS. This is a true programming language because we're actually programming behavior and action. So HTML and CSS are on the markup side of languages. So this might be a little different if those are the only two languages you've seen so far. So in general, JavaScript code is made up of lines of statements and each of these statements is really an instruction that you're giving to the computer to do something or execute something. So each instruction is referred to as a statement. So if you see here, this is an example of a few statements in JavaScript and each of these ends with a semicolon as you notice. Think of that as a period that you end a sentence with and these are executed in order. So first I'm gonna JavaScript will execute this line and then the one after it. And the way that we write JavaScript code if you notice here there are certain words that are different colors. So the language, the JavaScript language consists of certain keywords that we can use that JavaScript understands and knows what to do with those words. And then we have certain identifiers that we give to things as we're writing code. So that might not make a lot of sense right now, but in general there are certain words we use and then we create our own labels for things specific to the program that we're creating. So now let's take a look at a demo because a lot of these things will make better sense when you see real code. So we'll jump right in and look at a real demo. So let's get started with this demo of how to use JavaScript for client-side web development. Here I have a basic webpage built with HTML and CSS that simply displays a greeting to users and also asks for the input of a name. So this is simple text box and a submit button. And if I type something into this right now and submit, nothing happens because we haven't written any JavaScript code to handle this. But right now this is what we're starting with and then I'll let you see what this HTML and CSS looks like right now. Here's the HTML file. It's basic headings that we have as well as the input box and the submit button. And I've given the input box and the button ID so that we can use those in the JavaScript. So to get started, first I'm going to show a few different ways or places where you can write your JavaScript code. Just like with CSS, you can write your code right in your HTML file in line or you can write in an external file. And just like with CSS, writing your JavaScript in an external JavaScript file is the recommended way but I'll show a few ways to do it just for demonstration purposes. So first I could use a script tag right in my file here. And write my JavaScript code directly in this. So if I say alert and I put hello world, what I'm writing between these two script tags is pure JavaScript code right in my HTML file. So this is a line of JavaScript. And now if I save this and open this file on my browser, we see and then I'll refresh. Now I see this script is running and it's popping up an alert that says hello world. And that was because of that line of JavaScript code I wrote. Now, as I mentioned, that's not the best way because a lot of times your scripts will be much longer than this and you don't want to clutter your HTML file. And if you remember, you want to separate presentation from content and behavior. So in this case, you want to keep your JavaScript file separate to control the behavior of your webpage. So I'm going to take this out and what we're going to do is write code in a separate file. So I'll create a new JavaScript file here. I'll call it hello.js and that's the extension for JavaScript files. And just to start, I'll use that same alert just to demonstrate that we're doing the same thing just in a different file. Now the difference here is now these two files don't know about each other. Just like with CSS, we need to link them together. So I just need to include a script tag in my HTML file and give it the source attribute to point to the file. So the name of that file is hello.js. And in this case, you do need a start and an end tag for the scripts. And all of the code you write in your external JavaScript file will automatically be inserted into your HTML file within the script tag, but it's still better to write that code separately to maintain it separately. So now if I save this and open this in the browser, we see the same behavior, but now we're using an external JavaScript file. So I'm going to keep working in this file and I'm going to get rid of that alert because I don't want to see that every time. And what I want to do in this case is once the user enters their name into that text box and pushes enter or submit, I want to change the hello world greeting to say their name instead. So to say hello to that person's name. So to start, I'm just going to put some comments in my code. You can write comments in JavaScript using a double forward slash or a forward slash asterisk like this. So this is a comment. This is a way of writing it in addition to the double forward slash. So here I'm just going to write what my goal is for this short program. I want to, when the user presses submit, change the greeting to include their name. Now the first thing I need to do is get access to the button and set up an event handler. So as I mentioned before, JavaScript revolves around responding or reacting to events. And in this case, the event we want to respond to is the user clicking the button. We don't want to change the greeting or anything until they've actually pressed that submit button. So we're going to listen for that event and then create a handler that will do something in response to that event. Now once I get access to that button and set up the handler, actually that pretty much encompasses everything we're doing. So to start, JavaScript revolves around modifying HTML elements. So there's not much you'll be able to do in this context without HTML. And in this case, since we're listening for something to happen to the button, we need to create some sort of reference to that button. So in my HTML file, I have an ID on the button and that's the easiest way to reference HTML elements from your JavaScript code. So this ID I've given is submit. So I'm going to use that ID to reference in my JavaScript. And I'm going to create a variable to hold that reference. Variables are just containers for data in your program. So I'm going to call my variable button just straight and simple. And the way that we reference things by ID in JavaScript is using the document.get element by ID. And you see that there are a few other options for referencing things and we won't cover those in this video. But we're going to use the get element by ID. And then in parentheses, you pass the ID that you wish to reference. So mine was submit. So now I have a variable that references that button element. And next I need to set up a handler to listen for that click event. So now I can just say button dot on click and I create a function that will be run once the button is clicked. In this case, I'm going to separate my function into a separate statement. So I'm just going, let's say I'll call it change greeting. And this isn't created yet, but now I'm going to create this function called change greeting. And here what I want to do first, I need to reference the greeting that I want to change just like I wanted to reference the button to do something with it. Since I want to work with the greeting element, I need to reference that header. So here I didn't give an ID to this. So I will demonstrate another way of referencing by element type. So this is an H1 and it's the first H1 on the page. This isn't the most reliable way, but just to demonstrate I'm going to reference it using the type of element this is. So here I'm going to say bar heading. I'll call it greeting. And in this case, I'll do document dot get elements by tag name and I give it the tag name, which is H1. This will return an array since there can be more than one element with the same type on a page. There can be more than one H1 on the same page. So I'm going to use the array reference to get the first element in that array since I want the first H1 on my page. Next, I want to get the actual name that the person entered into the text box. So I need to reference that text box and I'll do document dot get element by ID again. And let me check what that ID was. I gave that an ID of name. So that here. And in this case, getting the input element with the ID name just gets me that actual text box. But what I want to do is get the value that the user typed. So I'm going to do dot value here. And that method will return the where that property will return the value of that text box. So I have access to the value that the user inputted and I have a reference to the greeting element that I want to change. So now all I need to do is change that greeting to include that name. So I can to modify the contents of an HTML element from your JavaScript. There is a property called inner HTML and that's what we'll use to change the text of that heading. So now I'll just say greeting dot inner HTML and I'll set that equal to a new line of text which will read hello. And then I'll append the name to that. So in this case, input is a variable that's storing that value that we got from the text box and it's just going to be used here and append it to the text hello. And that's it. So just to look over this again, we got access to that button and once it's clicked, we are instructing our program to run the function called change greeting. And in that function, we are getting access to the greeting heading, getting access to the text box and pulling that value from the text box that the user inputted and then changing the text of our greeting to read the user's name. So let's see if this works. Refresh the page. I'll type my name, type greet. And now I see hello greet. So it works. So that's just a simple demonstration of how you can use JavaScript on your web page. Everything pretty much revolves around setting up event handlers and modifying some aspect of your HTML elements on your page. That's what JavaScript is most useful for and that's the premise of it. If you do not have a background in basic programming, some of this might not have made perfect sense. So be sure to first learn the basics of programming in JavaScript and then you can use those skills and concepts to use JavaScript in this context for client side web development. Just to summarize again, JavaScript is used to control the behavior of web pages and we know that HTML is used for content CSS is used for presentation and JavaScript's role for controlling the behavior of web pages is necessary and very useful. As I mentioned just now, it's useful to understand the basics of programming in JavaScript, which will be the same as programming in other languages before you get into working with the HTML elements refers to as the DOM. So if you get a basic foundation and variables, conditionals, loops, functions and arrays that will give you a good starting point to be able to understand the code you will need to write to work with your HTML elements on your web page in the way that I just demonstrated. And once you get to that point, you can learn the events that are common as well as the DOM methods that allow you to modify your HTML. From there, a useful thing to learn is jQuery, which is a library that a JavaScript library that makes writing JavaScript code a little bit simpler and allows you to do some more advanced things in an easier way. One thing that jQuery is particularly useful for is sending Ajax requests from client to server. So what that allows you to do is pull data from a database or a server for your app and display that on your web page using JavaScript. So that's something that was not covered here, but will be useful for full stack development using JavaScript. And as I mentioned before, to learn more, you can take the edX course I have on edX.org, which is called Building Interactive Prototypes Using JavaScript. The link is right here. So far, all of the technical concepts we've covered focused on the experiences of our users in the browser side or client side of web apps, but a web app isn't fully functional without a way to store and retrieve dynamic data so that the app can carry out logic. And this module will explore these backend web development concepts and learn how to set up a basic server to handle the logic for a web app. So earlier modules of this course focused on client side web development. We talked about HTML, which is used to define content, CSS, which is used to style and present that content, and then JavaScript, which is used on the client side to add behavior to web pages by modifying and reacting to events with that content. And these three languages are used to build our client side, which is the interfaces that our users view and interact with on our web pages. So what's left after that? If we're actually going after creating a functional web app, an application that does something and handles data, then we need a server and we need to learn more about server side web development. So let's take a look at how the client and server side of a web app work together. So the client as we know is the HTML, CSS and JavaScript code that is running on your user's machine. Most likely a web browser, whether that's on their laptop, their mobile device, any device with a web browser, that is the client and that's running your HTML, CSS and JavaScript. And at some point your app will need to display some sort of data that is dynamic. That's not the same for every user. That's not the same for every scenario. And in that case, it needs to communicate with a server who can handle that dynamic data using a database and handle the complex logic that your app might need to perform to calculate things or to present that data in the right way or to identify the right set of data that should be used. Your server can handle these requests, communicate with the database and handle any app logic before responding with that data back to the client. So the communication between clients and servers relies on requests from client to server and then responses from server to client. To go into a little bit more detail about how clients and servers communicate, they communicate with each other using a language called Hypertext Transfer Protocol or HTTP. HTTP contains a set of requests that clients can use to communicate with servers to ask for data. These include the get, put, post and delete requests. So those are the types of requests that clients will send to servers. And then servers will respond to clients with that data or a status update or a resource like an HTML page or a CSS file or even an image. So HTTP is the protocol or the language that is used between clients and servers. And we'll see, we'll need to remember these get, put, post and delete options when we're writing the code for our servers because the server will need to handle each of these types of requests. So the role of your web server is to really just listen for these requests and then set up handlers to react in certain ways based on the type of request that's coming in. At some point your app will probably need to carry out some sort of logic in order to handle the request, communicate with a database to get certain data and then respond to the client with the data or resources that were requested. So this is fundamentally what a server is responsible for for a web app and it's really the brains that handles all the functionality of your web app. And that's what we're going to be programming when we talk about server side web development. Since these functionalities are pretty common, most web servers need to do the same thing. There are frameworks that make it easier to do the common task that you can focus on. What is unique about what your app needs to get done? So a framework that we're going to be using in this case is called Node.js. And it's really useful that this is a framework that allows you to write JavaScript code to run on your web server. So JavaScript wasn't always used for server side development. Its primary purpose is for client side development to make web pages interactive. But now we can use it for both client side and server side. So as you'll see Node provides different modules that handle the common server functionality that we need to program into our app, which makes it really easy to quickly build server side components for web app. A framework that we're going to be using on top of Node.js is called Express. And that specifically will use that to handle routing and setting up an API to handle the various types of requests that we expect from our clients. And here is a link to download Node because that's where you should get started when you're with this process. So in the rest of this video, I'll show you a demo of how to get started with Node and set up a basic app that handles requests from a client. So in this demo, we'll get started with adding a back end or server side functionality to a web app, a simple web app. And this is the state of the web app right now. It's a web page with HTML, CSS and JavaScript on the client side. And I actually worked with this example and the HTML and CSS modules of this course. And I've added just a few more things to make this appropriate for this back end functionality demo. So the functionality that I'll be programming in terms of the data I'll be storing relies on comments from users. So I have this form where users can type their name and a comment and submit it. And then what I'll do is have each of those comments and names stored in a database and displayed on the page. So every time someone adds a new comment that will be stored in the database that every other user of this page will also see the comment here. So right now, since I have only built this with HTML, CSS and JavaScript, I just hard coded some sample data and just so I can see the look I'm going for just as a placeholder. So that's why this is repeated text here. But I recommend doing that so that you know what you're going for before you start writing your server side code. So here is the code for the page that we were just looking at. I just have some basic HTML using semantic tags and basic tags. And then here I have a section with the comments that I will take this out once I'm done with the server side code. But for now, I just have placeholder text and actually I'll go ahead and comment that out right now since we already looked at what we want this page to look like. So I'll just use an HTML comment from here all the way to the bottom of this section. So now everything in green is commented out and won't be displayed on my page. So I'm going to start just by setting up a basic server for my note app. So right now this isn't really a app. An app. It's more of a an interactive web page. So the first thing I need to do is add a file for my server code and I'll just call this server.js which is a common name for this file. I'll also organize my files into client and server side. So I'll put all of my client side files into a folder called public. Oh, it looks like I've already done that actually. So I need to take this server file out of my public folder. There we go. So in this file I'll start with setting up my node and express app. So the first thing I'll do is import the modules that I need from node for my app and the only module I'll use right now to get started is the express module. Since that's the framework that I'm using with node. The way we do that is just by creating a variable to hold the object for express. And we use the require function to include that. And then now I create a variable for the app that uses express to initialize an app. And in this case, the first function of a server is to listen for request. So we just need to have our server up and running and listening. So the first thing I'll do is use the app that listen function. First I need to give it a port number and you see that we have this help here from our code editor. So if you ever forget exactly what a function needs, that's useful. So first I need to give a port number. I'll use port 3000 and next I give a function that is just what will happen once we start listening. So in this case, I just want to log a message to my server console, which I can look at just so I can make sure everything's running and always see debug and diagnose things. So I'll just say server is running on port 3000. Just to verify. The semicolon here. So now I have created an app and I have it listening on port 3000. Now I haven't initialized this project or this app as a node app. So for the rest of this, you're going to be working in the command line a lot when you're working with node. So that's something you should brush up on if you're not familiar with command line already. So I'm going to open my command prompt. So I have my command prompt open and now I'm going to navigate to the folder where I'm working, which is on my desktop. And this is called samples. And now I'm in the folder where I have all of my files. If you see my public folder and my server file live in a folder called sample. And now I'm going to. I have node installed. So when I'm using these commands in my command prompt, it's using the node engine. So I'm going to set up my project. The first thing I want to do is use the npm init command. This will create a package file you see here. It'll be here shortly that contains information about the project. You can pretty much accept all the default options here by pressing enter. Oh, actually name cannot contain capital letters. So I'll make that lowercase enter to all of that. And yes, that's okay. So now you see I have a package.json file created. And I could have done that from scratch, but it's pretty easy to just do it using the npm init, which does it automatically and make sure that it's created correctly. Next, I want to install the dependencies that my app will need. So for now, I'm only going to need to install express because if I run this right now, my app will not work. I'll actually demonstrate that. So to run a node app in the command line, I use the node command and then the name of the file that I used here that's called my main file, which is server.js. So I'm just going to use the name of that file. I don't have to put the js extension. So I'm just going to put node server, press enter, and you see it cannot find the module express because I haven't installed that for this project. So to install a module, you can use npm install. And when installing something that you want to save to the package file for your project, when you know your app needs that module, you should use the dash dash save option. So I'm going to do npm install save express. Since that's the name of the module I'm installing. Wait for that to complete. And now you see a node modules folder was just created here. Express will be in there. So that's done. And now if I try to run my server again, I get the message that I logged that says server is running on port 3,000. And now you can see it's still running. It's still waiting for something to happen. So the next thing is to be able to respond to requests from clients. And if you remember, we have the different HTTP request types that clients can send. Those are the get request, put, post, and delete. Get is the most common. Get is when a client is asking for data or a resource from the server. So every time your browser requests a web page, that is a get request being sent to the server asking for that web page, those files for the web page. So the HTML file, the CSS file, the images. Those are requested using a get request. So that's the first one we'll handle since it's the most common. I'll use control C to exit to close my server for now. So in order to respond to requests, we create routes in our app. And that is just routing those requests to be handled appropriately. We do this using express with the following syntax. We use app.get or whatever request we're handling. First, we need to identify which route we expect this request to come into. So we can create an API so that requests are sent to the right path on our server to be handled appropriately, because there are different types of get request that will come into our server for different types of data. If you think about a complex app, like a banking app, for example, the client might be requesting a login page that might be requesting an account page. So we need to identify what exactly is being requested and handle that appropriately. So in this case, I'm just going to put a forward slash, which means get the routes path. And that's usually like the index file of an app, or the home page. After identifying which path I want to handle, I then provide a callback function that is called after this request comes in. And this is where I specify what should happen with this request. It has two parameters, request and response. And here I can use those if I need to. But for now, I will just log a message. Or actually, this time, I will respond to the client with the text hello world, just so that we can follow through and do hello world with each of the new languages we're covering. So response.send. And I'll send the text hello world. So now when I get a get request that comes into the root of my app, I will respond with hello world. So let's see what this looks like from the client side. First, I have to make sure my server is running so that I can listen to these requests. I'll run it again. So it's listening right now. And now I need to send a request for my client. So in this case, the browser can send a request to my server, which is running locally on my computer. Although normally, once you deploy your app, it will be running somewhere on the Internet. That's not on your computer. So here I'm going to open my browser. If you remember, I specified that my server should run on port 3000. And I see the text hello world. So I did with that text to the client. So now let's do a route that's more appropriate to the app I'm working with. So remember, we went to the main data that we want to work with for this app is comments. And each comment has a name associated with it and a comment. So if you imagine our database that we'll get to soon will store a collection of those comments and names. And then our routes will need to listen out for requests for those comments and respond with them. So let's create another get request. And this time we'll put it to the comments path, which I'll create. And in this case, I'll just respond with a list of those comments right now. I don't have that list because I don't have the database set up yet. So for now, it's good to either log a message. I'll say request, get requests received at the comments path. And I'll just do that for now so that we can fill that in later once we get to the database. I can also do the same thing with a post request, which will be a post request is when the client is sending data to the server. So most commonly a post request is sent from a form where once the user submits the form, the data in that form is sent over to the server to be processed. So I'll do a post and this will handle once we have the user submit a comment. Now just get these set up so that we can work with them in the next module. So that's really the core functionality that we'll program for our web servers in this case. We will simply set up routes that will handle the functionality that we expect and the request that we expect from our clients. And then within these methods in the next module, you will write code to pull data from a database and then return that data back to the user. Or in the case of a post, you will write code to accept data from the client and insert that data into the database. So that's the basic functionality of our web server for now. And we'll talk more and extend this code in the next module. So to summarize what we've covered in this module, we'll talk about server side web programming and what functionality our web server provides for our web apps. And overall that functionality revolves around listening for HTTP requests from clients. And we do that by defining routes on our server that handle requests to different paths and using different HTTP request methods. Once we receive a request, we program our server to carry out any application logic needs and we communicate with the database to access or modify data. We haven't covered the database part of that just yet, but that'll be easy to fill in once we get to the next module. The framework that we used in this course for our server side development is Node.js. And that allowed us to write JavaScript code that runs server side when JavaScript code typically is run client side. So that's a plus. And the framework we use on top of Node was Express. Now this course just covered the very basics of server side programming using Node, but I do have a course on edX.org called Building Functional Prototypes Using Node.js. And in this course, you can get more hands-on instruction, practice, and assessments to help solidify a lot of the topics that we only touched on quickly here. So once you finish this course, if you're interested, go ahead to edX.org and search for this course or follow the link that you see here. Welcome back. At this point, you should be able to create a pretty functional web app. You can create a web user interface using HTML, CSS, and JavaScript. And we talked about how to set up a basic server that can store and return information to clients. And this module will fill in the gaps by learning how to store real data in a database and how to access that data from our app. So by the end of this module, you should be able to create a fully functional basic web app. So let's take a look at databases and what exactly they are and how they store data. So a database is something that stores a structured collection of information. And that can mean a lot of different things. You see some images here. You could just store that information in a text file in a structured way using commas to separate different types of values. You could store that information in an object form where you have a key and a value for each property of your data. You could store that information in tables where the columns label the properties. There are a lot of ways to structure this information and each of those could be considered a database. But overall, the things that all databases have in common is that they make it easy to access and manage the data that they store. And in general, the way that we access that data is using the CRUD operations that we've talked about earlier in this course, creating data, reading data, updating and deleting. And we do that using query languages like SQL, which we'll talk about in this course, that allow us to write queries and statements in a structured language that are executed on the database. So I mentioned a few different types of databases on the previous slide, and the one that we'll be focusing on in this course is relational databases. So in relational databases, we store data in tables. Each table represents some entity or object of data. So in this case, you see a table that has a list of contacts. So the name of this table could be contacts, and that's an entity that makes sense as a cohesive set of data. The key about relational databases is that you likely have multiple tables of data, and they have meaningful relationships between them. So in a contacts application, you might have contacts, and you might have a separate table that has phone calls, and those phone calls are linked to contacts because you need to track who's making those calls, for example. So within each of these tables in a relational database, each row is a record of data. So one instance of data, and each record has values that correspond to different properties that we care about for the data. So in this case, some of the properties are attributes that we are tracking for this table, our first name, last name, email address, phone number, and zip code. And as I mentioned, the primary functions that we want to perform on our data include those CRUD functions, creating data. For example, you might create a new table. You might insert a new record into a table. Reading data, you want to pull information, so you might ask or query for the phone number from the contacts table of a certain record or a list of contacts that live in a certain zip code. We might want to update data, so change an attribute on a specific record in our table, or even delete a record or table. The language that allows us to do this where we're going to be using in this course is called SQL. This stands for Structured Query Language, and it's a language that provides a way for us to perform these operations on our databases. So the primary SQL commands that are most used fall into three categories, creating, inserting, or updating, and retrieving data. So to create data and using SQL commands, these are a few of the commands that we use, the create, alter, or drop. Create will be used for sure to create a table. And then in the insert and modify category, we have insert, update, and delete, which are pretty self-explanatory. We use insert to create new records within a table. And then we have retrieving, which is used very frequently to pull data from a database. So that is the select keyword, which we'll see very often. Now, we need a place to write or run this SQL code, and for that, you use a database management system. Some examples of database management systems are SQLite, SQL Server, MySQL, things like that. The one we'll be using in this course is called SQLite, and it's a lightweight database management system for relational SQL databases. So what this is used for, this is a tool that will allow us to easily create and manage our databases and provides a place to execute SQL commands using those commands we just talked about on the previous slide. There are two ways that you can do this. First, once you install SQLite, it comes with a command line interface, so you can use your command prompt to run SQL commands to work with your database, and that's a manual process. So that's good when you want to practice or set up your database, but that won't scale for your app. So once you're writing your code for your actual web app, you'll want to write code in your server-side language that will communicate with your database directly through SQLite. So that's what we're going to be doing for our web app. We're going to learn how to write JavaScript code that works with our SQLite engine to connect to our database. And before you can do the things that I will demonstrate in this module, you will want to install SQLite from their website. So now I'll transfer over to a demo where I'll show how to set up a database and how to hook up your database to your Node web app. So this is the web app that I left off with in the previous module where we set up a basic Node server using the Express framework. So we have just some placeholders within each of these routes that we defined, and in this module, we'll learn how to write the queries that we need to connect these routes to our database. So the first thing I'm going to do is set up a folder that will store our database within our project folder. So I'm going to create a new folder called DB, and that's where I'm going to put my database file just to keep everything organized and get set up with a good structure in case you scale and your project grows. Next, I'm going to create a database there in my command line using SQLite. So I'm going to navigate into that folder, and now I can just use the SQLite 3 command, and this will run SQLite in my command prompt. If I don't put anything else with this command, it will run with a temporary database that's useful if you just want to execute commands in practice, and that won't be saved when you're done. So instead, I want to give a name of the database, and that will save the database once I exit this command prompt. So I'm going to call this, in this case, if you remember, I'm storing comments in this project, so I'll call this database comments. And then I need the dot DB extension. So now I'm in the SQLite command prompt, and you see it's waiting for me to enter commands. The first thing I'm going to do, I've created a database, but I haven't created any tables within that database. So a database, a relational database, can have multiple tables and often does. In this case, we're just going to create one table to store our comments that users input. So I'm going to use the create command. Notice that you typically write these commands in uppercase letters. That's a style convention with SQLite, with SQL, I'm sorry. So I'm going to create table, and I'll call this comments as well. And now I give the schema for the table. So what columns I want this table to have, and what type of data should be stored in each column. So the first column is just going to be titled name, since I'm storing the name of the user who wrote the comment. And next I give the data type of that attribute. So I will, I cannot type. Give this, this is for a character sequence of variable length. So it can be not a fixed length string. And I'll do the same for a comment. So this is two strings that I will store in the database. So I just have those two columns. And then I end every SQL instruction with a semicolon. Now I can use the dot tables SQLite instructions to see what tables I have. There you see the comments table was created. But right now it's empty. So I want to insert something just to test it out. I will insert into comments because I want to insert it into the comments table. And then the values, I will pass those values in. So I'll do my name and I'll say this is a test comment. And now don't forget the semicolon. So I should have inserted a row into this table. So let's see if that's the case. Now I can use the select query to query for data in my table. So I can select certain rows of data, certain columns of data. The select keyword can be used in a lot of different ways. But for now I'm just going to use an asterisk. That means I want to select all columns from this database. And since I'm not using any additional clauses, I'm also selecting every row from the database. So from the comments table. So select star from comments means select everything from this table. And now I see that record that I inserted just now. And notice that this vertical line separates each of the properties of the table. So that's all I do for now. I have the table set up and I have one test row inserted. So I will exit this using control C. And from now I will work in my project file to hook up the app to this database. So the first thing I'm going to do is install the SQLite 3 module for my node project. So I'll go back up one folder into my root, the root of my project. And I will do MPM install SQLite 3 so that I can use this module in my node app. Wait for that to finish. It's taking a while. Okay, so that is done. And next I'm going to import that module in my project file. So I will create a variable to hold that instance and require SQLite 3. And next I will link to the database. And I've created that database. Remember it's in this DB folder called comments.db. So a point to that. Okay, so now I can use this database in my code. So the next thing I want to do is instead of having just logging to the console when I receive a request, I actually want to fulfill the request. And these requests all deal with data. So let's start with the get comments route. So in this case, I just want to run that same select statement that I just ran in my console to select all the comments that I have in my database. So to do that in node, I will use my database object that I created here called db and the all method so db.all. And the first thing I pass in is the actual SQL command I want to run. So I will write select all from comments just like I did in the command line. And then I pass a callback function to execute afterwards. And this accepts an error argument and a rose argument. And if everything goes well, then rose will contain the actual rows of data that we retrieved in the database. So in this case, I want to, if there's an error, I'll log that to my console. Can't type today. And if there's not an error, I will send those rows back to the client. So I'll use response that send just pass those rows back to the client. Okay, so let's talk about how we can test this. I didn't cover jQuery in this course, but I will quickly show some code that I have that sends a jQuery request. To this path and expects that data back. So in this script file, this is a script.js file that's on the client side of my app. So this runs in the browser. And here I'm sending a request to the server to that same comments path that we just defined on the server using a get request. And this is being done with jQuery. So that's what that dollar sign is for. And then I have a callback function that once we receive that data, I display it on the page appropriately. So I won't go into this because this module is focused on databases, but this is the code that is sending the request for my client and then rendering it on the page in the way that I want. And you can see that this is just pure JavaScript down here, creating new elements, putting them on the page and displaying the data that I got from the database. So now that I have that, and I think everything is hooked up on the database for this get route, I will test it out. One thing I should mention, actually, is I need to actually hook up, specify that my client side files are all in this public folder. And that when I access anything in the public folder, it should be served as is as a static file. So that allows us to return files directly without doing any scripts or modifying them. And that's what we want to do for HTML, CSS and JavaScript files. So to do that, I'm going to use Express instead of a static route. So I'm going to use the app that use, and then I'm going to pass in express that static. And I'm going to give it to the path to where my static file should be. And that will be this public folder that I created. So I need to give this a full path. So I can use the deer name, which holds the directory that my files currently live in. And then I will just add the public folder to the end of that. So now when I try to access these files on my server from the client, they should actually be able to access them directly from the server. So I'll go over to the browser. Before I go to the browser, I'll run my server so that I can test this node server. It's running on port 3000. So now when I access demo.html on my local host path on port 3000, I get the same demo.html file that I have in the public folder of my server code. And if you notice, I have the test comment that I just created in my database in the command line. So this is actually sending a get request to my server and pulling that data back and presenting it on the page. So it looks like that's hooked up correctly. The second thing we'll do is work on the post handling the post requests. And right now we're posting from the HTML file when the user submits the comments form right here. And we have it posting to this comments path using a post method. So let's go ahead and handle that on the server. Also one thing to note. We're posting data. We need to pay attention to the names we gave each of these. So the name for the first one is name and the name for the second one is comments. So those are the IDs we're going to use to reference each of these data pieces of data when we receive them on the server. To handle this post data correctly from forms we need to install a module called body body parser. So let me close cancel my server and then I will npm install save body parser. So now that that's installed I will include this module in my file same way I've done every other one. So bar body parser was required body parser. And I will make sure that my app is using body parser to handle URL encoded data. And in this case I need to pass an option that says extended false. And this is to handle the form data from our that we receive from our HTML form. So now I can go ahead and write the sequel for my post route handler. So in this case I want to insert the data that we receive from the form into the database. So when someone types their name and a comment I want to add that name and comment to the database table. For the get request or the select statement we use db.all. In this case for an insert we're going to use db.run. All is used for querying. Run is used for other types of sequel commands. Now I'm going to insert the command and I'm using an insert statement since I'm inserting data. Insert into comments table and I'll pass the values. And in this case since I'm using dynamic data in my command I use placeholders. We use question marks as placeholders for the values. And then we pass another parameter afterwards with that dynamic information for what values we want to insert since that's changing all the time. So the values in this case what body parser allows us to do is get the information that was sent from the form in the HTML the HTTP request body. And reference that from our JavaScript code. So I can use the request object which I have right here. And I will do request.body. And remember the name of that field for the name was actually called name in my HTML code. And then the second one was called comment. Now these two values were replaced the two question marks in my insert statement. So we're essentially inserting the name and the comment into the table. And then we have a callback function to error any to handle any errors. In that case, I will just log the error. Otherwise, I will send a status back to my client. I'll send a 200 status code meaning everything's okay. And then I will redirect back to the demo that HTML page. So everything looks good here. Actually, I forgot semi pull ins here. Luckily, that still worked. Okay, so I'm going to run my server again. And this time I will send a post request and see if the data is inserted into the database. So I will type a test name. And I'll just paste this placeholder comment and submit that. And we see it was automatically updated because our page is sending that get request. Every time we refresh and since the page redirects after our post request, that causes our script to run again and send a new request to get the latest data. So we see that now our page is using dynamic data from our database. And all we did was create two simple SQL statements in our routes in our note app. And now everything is hooked up end to end. So really it's as simple as setting up your routes in your note app using express. And then using the SQLite module to set up those SQL statements that you want to run for each of these routes. And then on the client side use JavaScript and jQuery to where's my script. Use jQuery to send Ajax requests where you need to use a get request. And then you can just render the data however you want using pure JavaScript or using jQuery. And then for sending a post request that happens automatically with your form once you specify the method type as post in your form. To summarize what we've covered in this module we talked about databases and how to store app data. Databases are a collection of data that's stored in a structured manner, which makes it easy to access and manage that data using credit operations. And SQL is a query language that we use to access and modify data. SQL has commands that we use that correspond to the credit operations that we want to do on our data. And SQLite is the database engine or database management system that is a tool that we use to execute the SQL commands that we write to operate on our database. Finally, when it comes to hooking up our note apps to a database, we write our server side code in our note app using JavaScript that uses the SQLite module to execute those SQL commands on our database. And that completes all the functionality of our server side web app. So from there our app is all hooked up and functional. And once you write that client side JavaScript code using JavaScript and jQuery to send those requests to your server, you should have everything hooked up end to end and your app should be using real dynamic data from your database. This was a brief demo of these topics. I know I didn't go into detail about everything. But if you're interested in learning more, go ahead and take my edX course on edX.org called Building Functional Prototypes Using Node.js. And in that course you can learn a lot more about this topic along with more instruction assessments and assignments so that you can practice and work along as you learn. Welcome back. Now that you know how to create a web app from start to finish, let's make sure that you can share your work with the world by hosting your app online. In this module, we'll talk about Azure App Service, which is a platform that allows you to publish your app to the web for other people to access. Let's get started. So let's first talk about what Azure refers to. So Azure is a cloud services platform and that can mean a lot of things. Azure offers a lot to developers and IT professionals. But in general, the categories that all these services fall into is that Azure helps you build things from web apps to IoT solutions. There are a lot of different technologies that Azure works with. Azure helps you deploy those products and then after they're deployed and up and running, Azure is useful for the management and analytics of how those apps are performing. And anything, any other insights that you want to analyze about your application. All of these services are accessed through the Azure portal and you can access that at portal.azure.com. So let's talk a little bit about how to deploy to Azure App Service. So Azure App Service is the service we're going to focus on in this course since we're focusing on deploying our apps. But as I mentioned, there are a lot of other services that you can take advantage of within Azure subscription. Azure App Service in specific will host your application online. You don't really want to have your code running on your own machine and have people having to send requests to your computer. You want a real server to be running your app so that other people can access it online. So Azure provides that. On that server that Azure will host your app on, Azure will maintain the application framework that you're using, which in this case for this course is Node.js. But Azure works with many others including ASP.NET and other technologies. And beyond that, Azure has a lot of other services related to the Azure App Service including maintenance, source control for your source code, app insights, and a lot more. So there are a few ways to deploy your app to Azure App Service. And deploying just refers to transferring your application files and resources to an Azure hosting instance. The most direct way is FTP, which stands for File Transfer Protocol. And with FTP, you can use an FTP client to directly upload your files to your Azure directory. The way that is recommended for this course is using a repository. Earlier in this course, we talked about setting up a Git repository as well as setting up a repo one GitHub. So you can use either of those repos to deploy your app. If you deploy from your local Git repo, then you will have to manually sync your app every time you make updates. Or you can deploy from your GitHub or any other cloud repo like Visual Studio Team Server. And in this case, you can continuously deploy automatically every time you make updates in your repo. And then the third is an option called Web Deploy. But we'll focus on the repository option for this course. So a lot of these things are really straightforward and Azure provides really in-depth documentation that they keep up to date. So the next steps that you'll want to take when you're ready to get your app up and running on Azure, if you choose to do so, is to first create an account and choose a subscription. They do have a free account option and you can read more about that at the link I've listed here. Next, you'll want to deploy your app using one of the options I talked about on the previous slide. And then once you have your app up and running, you can take advantage of the Azure app insights. So that will allow you to analyze different metrics about how your app is performing, how people are using it, and things like that. So that's really fun to do and it really lets you know that people can access your app from anywhere and you can really have impact developing for the web. So I encourage you to take advantage of Azure for hosting your app and share your app with the world so that people can access it. And you can really fall in love with web development and the impact that you can have. Congratulations. You've made it to the end of this course and you should be equipped with the knowledge to build a basic web app from start to finish. Let's recap what we covered. So we started with talking about how to identify what you're building and plan out who you're building something for and what needs you can address. Then we talked about how to build web pages using HTML, styling web pages using CSS, manipulating web content using JavaScript. And then we moved into back end web development concepts. So we talked about how to build web APIs using Node.js, storing data with a basic database, and then finally deploying your app using Azure App Service. Now these are a lot of topics and we didn't cover each one in detail but hopefully you've learned more about each of these and understand how they all work together and what you need to learn. And hopefully you have a fundamental understanding of each of these concepts at a high level. But if you want to continue learning from here we do have some suggestions. We have a few courses on edX that cover similar topics but in a lot more detail. So in this course we didn't really give you any practice, we didn't have assessments, but on edX we do have more thorough courses that will give you a more hands on approach. So one course is designing a technical solution and that covers our design, user center design, HTML and CSS. We have another course called building interactive prototypes using JavaScript where we go deeper into the fundamentals of programming with JavaScript and we talk about client side development. And then we have a course called building functional prototypes using Node.js where we talk about the back end web development concepts and servers and as well as deploying on Azure. So we'll link these courses and the resources for this course and I encourage you to take advantage of that and go deeper into the topics that we covered here. The best way to learn is to practice. I truly hope that you enjoyed this course as a first look into these topics and wish you luck with your continued success with these topics. Thanks.


Titans were fun to watch mostly because we saw Malik Willis play football for the first time in the NFL Most of us never seen Malik Willis play football before. No, I've seen a couple Liberty highlights for every time you watch You can't help but go it's Liberty dude It's tough to take serious So when he got the edge on some on an NFL game last night for that touchdown took a big time shot I'm like, all right, baby. It does work in the NFL Then just shortly after that how you doing keep it moving hawk a deep ball had to do timing on that one by the way Because the corner bailed last second has balls already in the air.  That was a great ball his side arm throw. Yeah, you look like Patrick Probably any other quarterback that has any other arm talent at all Yeah, but that was hell of a throw to make he was balling he was vibing he was exciting and seemed like the Titans Or maybe looking at their future here


All right guys, we appreciate y'all hanging out and waiting for us that these drafts get laid on the East Coast. But we were very excited about our pick today. We covered that player for a long time. His skill set, the talent is clear and what he's going to bring on the field. And also he's a tremendous young man that every exposure, every opportunity to talk to him and spend time with him and all the research. He's just in a he's got high character. So exactly what we want to build this program on. He brings that on and off the field. With that, we'll take any questions. All right, Kelsey Conway. Hey, this is a question for both of you. Can you guys go through the timeline? Obviously, Terry, you just said he's a very coveted player. But when you went from going through the tape to really identifying that moment that you knew he was going to be the pick if he was there at four. Well, this whole process, the college scouts, even in the boots on the ground, the first evaluation, which was probably Tombo, the very first evaluation. But every you have the area scout, the national scout, and then you get into the directors, then the coaches get involved, but we had very high grades on him, even in the previous years. And so and so it's the entire the entire time, like A to Z, he checked all the boxes. Now we go through the process and we evaluate everyone and we compare and contrast, but this player was identified a long time ago and every exposure, every opportunity he checked all the boxes. And then Arthur Kyle said that he's excited to come to the team for a number of reasons, but he says he knows in your offense, tight ends get fed. How do you plan to feature Kyle and why are you excited to have him in your offense? Well, we're excited about the player skill set. I mean, you need player and obviously we get him in here. We'll get him started and then we'll let his role grow for us. But we think we can play him in multiple spots and we view him as an offensive weapon. And yes, you know, I guess I do have a little bias towards tight ends, but really he was the best player we felt was available and he checked every box. Tori, Michael, Haney. Yeah, my first questions for you, Arthur, kind of going off the same thought process. How does Kyle, it's kind of epitomized the evolution of the tight end that we've seen over the last few years? Well, he's different. I mean, usually when you're taking a tight end, they've been more of a receiver, you know, or they're an inline guy. So, you know, they're going to be deficient. It's hard just the way the offense are playing now. I mean, you're either taking an oversized receiver and you're trying to put him in line or you've got an inline guy that you hope to develop enough skill set that he can do something for you in the passing game. Kyle's unique. You know, that's what he proved at Florida, obviously his growth from 19 to 20. And we feel like we can play him in multiple spots, but like always rookies, I mean, they got room for growth and development. He's got certain areas and he'll work to improve on it, but no means that we think he's a finished product and stepped in and is going to, you know, do everything from day one, but we're excited about his potential, what he can bring to the offense. And Teri, my second questions for you, what, I mean, from our perspective, the narrative of potentially drafting the quarterback at number four, there was obviously a narrative that we all are probably following from the media standpoint, but from your perspective, what is drafting Kyle Pitts instead of a quarterback at number four, say about the confidence that you have in Ryan? Yeah, from the very beginning, we always had a lot of confidence in Matt Ryan and and really going through and evaluating this entire quarterback class has nothing to do, never had anything to do with a lack of confidence in Matt Ryan. And to say the same thing about any position that we draft, we have confidence in tight ends that are in this building as well and we're bringing competition and adding to this team and adding to this roster. So there was never a, we evaluate and continue to evaluate this whole quarterback class and but that that was never a lack of confidence in Matt Ryan. But again, we're couldn't be more excited about Kyle, we took the best player off the board and we feel real good about it right now. Michael Rothstein. Hey, my first question for Terry, Terry, there was also talk about possibly trying to trade back. How serious did those conversations get? Were y'all close at any point or were you so locked in on Kyle that it just didn't really ever get to that level? Yeah, we did have, we had several conversations and none of them got serious enough. Really, we looked at it like it would have had to be a lot, something that would be significant this year and next year's draft. It had to be enough for us to move off of that player and there weren't any offers that would have been enough to move back. And this question, second question for both of you, this is your first ever pick in these positions. I know yesterday, Terry, you said there wasn't going to be any nerves. But when you're sitting there at four, what's going through both of y'all's heads as as you're saying? All right, we're doing this and then you hear that red. It was it was really excitement because we felt that that this was going to be the player that this player would be there. And yet we right when you get in that moment, you just never know what could happen. But once it was real and we knew that was the player and we still answered the phone and made sure there wasn't anything that was going to be a lot to to move off of the player. But it's extremely exciting to have again the first overall pick and to know that kind of young man that the character, what he is, the toughness, the competitiveness off the field, the human being that he is and that rare skill set 20 years old. And like author said, he's going to come here and he's going to go to work and he's going to get better with this coaching staff and all the resources in this building. We're going to get the most out of him and he has the makeup to reach his ceiling, which is extremely high. So so that was really exciting when you have a player that you have so much confidence in. Again, not just the player, but but the man. Yeah, you know, the best thing about it is we felt really prepared going in, Michael. So it says it's a little bit like going into a game. You're calling plays just because of clocks. If you're prepared, you feel confident. You got your contingency plans. If something else happens in front of us that we weren't expecting. And then once it's got there, like Terry said, you know, you answered the phone. Make sure you're not getting a deal that we got to think about to move. And we were confident of the pick that goes in, but that there's a lot of great preparation by the entire football staff from the scouting and the coaching side. So we felt great about it. Thank you, Jeff Schultz. Yeah, to Terry, following up, Tori's question about all the focus on quarterbacks coming into the draft. Do you right now have a succession plan in place for Matt Ryan? A succession plan in place. We're still working through that, Jeff, and there are still quarterbacks in this draft. And again, even outside of the draft, after the draft, even going into going into the year, going into the year, there's times that there can still be trades. So right now, we only have one quarterback on the roster. So the answer to that question is no. But I would say we're still working through that process. So there's not what you just said. So there's still a chance you might draft a quarterback or you might acquire one before. I've obviously used only one quarterback on the roster, but I meant someone who you would perceive as the potential future starter for this team. There's still a chance we could definitely draft a quarterback. We got a long way to go and there's some good quarterbacks I believe in the draft. So there's definitely still a chance we could draft a quarterback. Or again, we can get out of the draft and there could be a trade. There's still a lot of other opportunities to acquire quarterbacks and to fill out the roster the right way. And I'm sorry, can I just ask you a lot of talk about it now? But can you either of you speak about what you thought about Justin Fields as you evaluated him and your thoughts on him? You know, now that he's with the Bears, obviously there's a ton of players that we like that went in the first round. I just don't feel that that's fair to Justin or the Bears. You know, I like to let the Bears or Justin speak about that. But there's a lot of players we liked in this draft. Carolina Ledbetter. Yeah, what made Cal the best player available at four? What made him the best player available? Yes. What do you think, D-Led? What do you think about it? Well, I heard he hits like you did at Tulane. He's taking a dig at me. Coach Selfo said you used to get after it. So that's why I think he was the one.  So it's funny you said that.  He's his size, the athleticism, the body control, the way he separates, the way he adjusts to the ball. And again, he's a tough competitive player. He's a mismatch and he's 20 years old and he's got a high ceiling and he's still getting better. So he does have a rare skill set. But I keep emphasizing it, but the makeup that he has, the makeup that the young man has, we know we're bringing into this building. And that's what gets us so excited about him. And yeah, Coach R, I spent a lot of time with Coach Malarkey and his thoughts on his tight ends over the years. Who would you say Kyle is like doing your time, spending a lot of time with the tight end and so forth for a combination of guys? He's like Kyle Pitts, I do that. I'm not in a comparison. It's not fair to Kyle and the other guys. We want Kyle Pitts to be the best version of Kyle Pitts. I just get kind of like I touched on yesterday. I just don't believe in the comparisons. It's just not fair to the player because you put unnecessary expectations on somebody and you set some narrative that's just not true. I think these guys are unique. He's a unique player and we're really excited to get a chance to work with him. And now let's spin it forward to rounds two and three tomorrow. How are you all feeling about heading into, you know, those pictures got coming up in the second and third rounds starting at 7 p.m. tomorrow? We feel good. We feel really excited. It's cool having a pick so early tomorrow because we can really anticipate what's going to be there and really have those discussions tonight and even into tomorrow because we know what to expect. So it feels good picking that early and we feel good. We're going to get another good player that fits our culture and we'll get two, maybe three players tomorrow. So we're excited. Go to Zach Klein. You remember if you have a question, just type out a question or I have a follow-up in the chat. Tara, one of the best lines I saw tonight on Twitter was another GM said he didn't know if he'd take a tight end that high but without a doubt he's a bad dude talking about pits. Is he like other wide, does he have swagger? I mean, we see him, he's so polished and so nice but do you see kind of like an angry swagger side with him?  He's, when you watch the tape, that's what you like about him. It's not just, obviously, you see the plays that he makes as a receiver but he's also, again, a tough competitive guy. So he has a makeup off the field but it translates to the field as well. I see Zach, you kept the suit on my man Justin when Hoodie post 12. Some of us say in a late working coach, that's all I'm saying. And Arthur, real quick, everybody talks about obviously his strengths and you love his versatility but as a coach, what's maybe one area where you can see where he can make as big as growth improvement? There's a lot of areas.  Obviously, we're high on him. That's why we took him. But there's a lot of areas. And when we get the player in here, obviously, we know what he did in college and we feel confident in some of the skill sets with the route running. And obviously he was very aggressive, willing. But like I said, all these rookies, they're going to have to come in here and we got to do our job and help them improve. Got Kelsey calling away for a follow-up. I just have one follow-up for Terry. What was your, what were your emotions like as you got on the clock there as your first time making your draft pick? It was really, it was exciting. It really was because we can, again, we anticipated it. We expected, it's how we expect it. And look, that's kudos to the college guys, the college staff because I will say really even after the pick, the board really came off kind of how we expected it. And so, so far in the first round at least, like things kind of happened how we expected and things happened how we expected early on. And so we expected him to be there and we answered the calls, all that. But once you're really in the moment and really happen, it was really exciting. It was really exciting because we know we're getting a player that we hold in high regard and it's been for a while, like that. We're very excited about that player. Again, going through the whole process, but we're excited about him, excited about the man. And so in that moment when you realize we're really getting the player that we love, we felt real good about it. For Allison, a stranger though. Hey, you talked about wanting to pick an impact player and you obviously did that. So with the first overall pick at number four, do you expect pits to be a starter for you guys next season? Well, I mean, sure, he's gonna play. I mean, that's the anticipation. He's gonna have to earn those reps. But the way that we'll play in multiple personnel groups, can tell you if you're going by who's out there to very first play the game, well, that's gonna be different every week, depending on what we decide the best way to attack that team is. But we anticipate he'll have a huge role here. But sometimes people get caught up in the starter and obviously there's guys that are really good players that these natural streets have gone on. But if you just kind of look what we did in Tennessee, we had certain players and we even veterans when you got the right on selfish guys. I mean, I just go back to my own experience when we're going to something like Delaney Walker, there are certain plays, we may not call the first play a game. He may not be in there, but he's gonna be in there about 70% of our snaps or more depending on how the game goes. And he never cared. It just depends. If that's what you're going off the starter, but we anticipate he should have a big role for us.  Yeah, I've been, what is the plan to address the offensive line? I mean, I know you took the best player available and the line has given up 133 sacks the last three years. The running games was 27, 30 and 27. I know y'all got a plan to improve the line and the Russian attack. Will you see that over the next two days? It's probably, sure. I mean, you're always looking at this. It's like when Jeff asked about a succession plan and quarterback, you got to have this succession plan everywhere. I mean, you understand that what we got coming down the road for 21. And then obviously there's players that, depending on it goes in free agency, you're always looking at multiple spots. And in D-Level, there's multiple ways to address that.  It's the easiest way, but we don't want to reach for somebody. And there's, as the spring goes on, the rhythm of the NFL offseason, there's players that are available. And there's certainly trades that you can make. And we'll look to do that at every spot to constantly turn this roster and to improve. You have to. And that's our charge and that's our job. Yeah, I would piggyback on that and just really agree with what Arthur said. The roster building goes outside of free agency, outside of the draft. It's a continuous process, whether we're signing veterans after the draft, based off what other teams do, what other teams draft, there could be players available via trade or players that get let go, get cut.  I can think of years where we're going to be high in the claiming order and you can claim players. So there are going to be a lot of opportunities to continue to build this roster. So we want to make sure we have discipline over the next two days and take the best players off the board and we'll continue to build the roster. Yeah, D-Leg, just to give you an example. Imagine Dave won the recent because I was part on the other side of it. But just for example, not to say that we're exactly, it's going to happen this year in training camp, trades happen in training camp. I mean, think about when Andy LaVitre got here. When I was in Tennessee, we traded with Atlanta and Andy did a heck of a job here and had a great career here with the Falcons. Those things pop. I mean, you've got to constantly turn the phones and see what's available and what you're always looking. And obviously the quarterback spot's critical. But you're looking at year to year and then the rest of the roster. So there's multiple ways to acquire players. Going to Michael Rothstein. Hey, Terry, just a quick follow-up. And now the first round's passed. How heavily did y'all really consider a quarterback at four? Was that really something you all were looking at or was that kind of a little bit of smoke? There's no smoke. From us, we basically, like we said, we did the entire time. We're going to evaluate the entire quarterback class. We're going to evaluate all the players and that's what we did. I mean, that's important to do that. So there was never any smoke. I mean, there's stuff that you can read all these other places, but that doesn't come from us. Me and Arthur, we just do our jobs and our coaches do their jobs and people put stuff out there. But we're never involved in any of that. So Michael, we evaluated the players and that's our job to go through that process. And we believe we took the best player off the board and we feel really good about it.  You've got to, you know, your value of everything. You have to continue to play. Like I said, there's a lot of players who like this draft. And I say they're still in this draft. I say the first round of this draft that were picked tonight. But that's not coming from Terry and I. There's a lot of, you know, as you guys know that covers this league, there's a lot of people that think they have access to information and they get a little piece of it and they want to run with it. And these rumors take a life for their own. Kind of modern society with the social media world we live in. So that's not comfort Terry and I. I don't even, I don't read a lot of stuff. He's D-Led been tweeting out rumors. D-Led stirring stuff up. I think facts. I only do facts. Facts? Oh boy, here we go. All right guys, that's all we have in the chat. So I appreciate you guys being here and we'll see you tomorrow. All right. Thank you guys for staying up with us. Yeah, I appreciate it. Jeff and I are drinking that coffee, man.