And we are back with one more lesson, creating web application from scratch application like apps like Twitter and the like, you write something posted and appears on the screen. Let's keep it going. So we got HTML here. Very nice. We've got nothing particularly interesting. Let's add a like a draft. Let's make a draft of what we need to build. That's typically a good way to start getting building an application. Right now we don't have any data, right? Have no users. They haven't written anything for us. So we got to make some kind of fake data. You have to draft it all up. And then when you got it drafted, and we make some interactions, make it behave correctly as you type text. It adds a new entry to the list of things you have written. And then once you got that working on the front end, that's when we finally hook it up to the back end where we actually have the data be what we called persisted, right? Meaning the data doesn't disappear after we reload the browser. Because the data has to be somewhere. Whatever wrote, it has to be stored somewhere. Otherwise, it does just magically appear like that. That's not be a place. There must be a place where the data is. That's where it'll be in the database. And through the server side API, we can access that data. Whoever is going to ask the database, hey, user wants to access this data, give me the data, then server side obtains the data. If there's isn't any problem, and sends it back to what's called the client, which is on the front end. Anyway, let's get going. So let's make a draft of this very picture here. So content goes here is not very interesting. I'll just write something. I'm going to put this inside what's called a div tag. I'm going to close this text in the div tag. Div tag is like a tag with nothing particular. The most is like kind of has no meaning by itself. That the div and the span are the meaningless tags. And they're used, usually you can get started with, you can pretty much do anything with them. The difference between a div and span is the way the content is shown. The div will have whatever you put inside it takes space of the whole line. And the span will only take space for, if you type like a word, it will only take space for that word. It will not fill the whole line and push everything to the next line. Something like that in simple terms. We're going to see. So anyway. So we have that. I'm going to break the line. And I don't need to have spaces around the tags. I can add spaces you want, like to organize things up to you. I notice I always indent every time I open a new tag. So I can see the structure and the nested nesting levels for the HTML. After that, after I open HTML, I add one level in the station with two spaces after open head add one more level. Now it's like two extra spaces with a total of four from the beginning. That means that's one, two levels, like two times two, four. Same thing here in the body. So let's get started. I'm going to write this someday. I'm going to write the draft for these things that are written by the user. So have have some junk tasks. Fake text inside. So to do that, I'm going to use what's called Laura Epson Generator. It's a very nice thing like to generate random text, you can fill in your applications. You don't particularly understand what it means because you want to focus on the building of the application and not on what's written there. So I'm going to go to my browser. There's this website called lipsum.com. Like generate Laura Epson right here. It's going to be a bunch of random tags. I can just copy it paste into my application. Let me copy this card back to my text editor. And I'm going to paste it inside between the opening and closing div tag. Now my editors doesn't have soft wrap. So maybe I'll add that to make it easy for you to read. So it will appear that things are in a new line, except they are not. It's just squeezing everything in this view here so you can see. Anyway, I pasted this text here. Now let's make two more. Open and close the div in between. I'm going to copy another piece of text. And I'm going to make one more here of divs. Opening closing divs in between. I'm going to place the text. Great. Now I have that. Let's save the file and go to the browser. Back to the tab where I have the application open, the site, reload. Now I can see write something. And the first paragraph, second, and third, it's there. But it looks really argue, right? Because there's no styling. It's just the structure in the text. You can see it comes in sequence. OK. I want to show you something to analyze. You already know that you can see the source code right clicking the browser and view page source. That's fine. But there's also another very, very useful thing called the developer tools. Every browser, modern browser should have it. The way you can open it is press F12. And it should appear either on the side or on the bottom. It depends on how you choose here, the dock side. For example, I can put it on the bottom. Or I can put it on the left side. So on. Anyway, maybe I'll put it on the right hand side. So this is called the developer tools. I don't care about this. Close it. So we are in the elements tag tab. The elements tab shows the document object model, so called DOM. And that's all the tags in our site. So if you hover with the mouse, you can see it highlights the section of the site that corresponds to that. So you can see the divs is each text and have the right something div. You can see the div occupies the whole line from left to right. You can see this right something. You can see the whole line. You can see it's highlighted from the left all the way to the right hand side of the page. And that's the div. In contrast with the span, if you have this span, it will highlight only up until the word something at the end of something there. It would not go all the way to the end of the line at the right hand side of the screen area there. You see the body HTML is the whole thing. Obviously, the head is metadata, so it should not be part of the content that you see. And you can see the head. There's the title. Write something. So this will be very useful as we develop the application. All right, so I think we're good for now, and see you in the next lesson.