HTML Structure

[00:00:00]
>> Maximiliano Firtman: And now we will work with the public folder, so with the HTML. So our index HTML has that hello from Go, that doesn't make any sense. So, the first thing I'm gonna do is I'm going to delete that, and I'm going to replace the HTML. So you have an HTML to copy and paste if you want, but I wanna do this manually, at least for the first minutes, so we understand how we are building the app.

[00:00:24]
How easy is actually? Think about building an app with Vanilla JavaScript. So first, let's set the title for this, so this is the name of the project is ReadingIt, so we can start reading movies, something like that. We're have a style.CSS that we can point to. So after this, we have a CSS.

[00:00:45]
So we have to link the HTML to a CSS. So I'm going to say link rel "stylesheet". The CSS is already ready, href "styles.css". Okay, we also have a web manifest file. Does anyone know what that is? A web manifest file. We can actually look at it but you know what that is?

[00:01:16]
It's a web standard file, so it's not Go. It's not something for any library framework, it's actually a standard. It's called the web app manifest, defines metadata for your website, and most of the time it's being used for progressive web apps. But it's not just for progressive web apps.

[00:01:36]
Actually, every browser is reading that file to get more metadata about your website, for example, what's your color? What's your icon? So in case, someone is adding your app to the home screen or adding your website as an app. So for example, Safari on a Mac. Let me show you Safari on the Mac.

[00:01:59]
When you go to a website like 8080, you can go to File, Add to Doc. So when you go and Add to Doc, you can see it's taking this and you can Add this to your doc. But for that, you need to connect your HTML with that file, and you do that with another link.

[00:02:27]
It's link rel "manifest".
>> Maximiliano Firtman: So now there is a connection, a link between the HTML document and that manifest file.
>> Maximiliano Firtman: Again, if I reload my page, first, I'm not sure if you realize that there is something new now. There is a color in the toolbar, so this color, that color.

[00:03:00]
That color is coming from the manifest, it's a theme color. In fact, let me change that with green or can be any color, okay? Let's try with green. If I refresh, now Safari is green. So you can see that the HTML, the browser is using this external document to enhance the user interface.

[00:03:28]
And also if you add this to the doc, it's gonna use now the icon and also a name that I can set separated from my HTML title, okay? So that's the idea of the manifest, okay? So we have connector.CSS and also the manifest. That part is done, you wanna save it?

[00:03:50]
Yes, because I don't want to keep that green. That was not actually their idea. And also, maybe, we wanna set, just because something that we need to do on every project. So now, if we see local host, we can close this now, 8080, we see nothing, which is okay, but we have this very old icon there that we don't want.

[00:04:16]
So something that the next step for every project. If you also link,
>> Maximiliano Firtman: The shortcut icon. There are many ways to define this, one is through icon or shortcut icon is another link. So on the href, we have an icon inside images, icon.pn. So "images/ icon.png" will make the trick.

[00:04:45]
So if I refresh now, make sure if you realize that we have a nice icon there as a favcicon. Baby steps that we're doing in our user interface, so now let's start working on the UI. I know that at this point your thinking, writing the HTML manually, it's gonna be a lot of work.

[00:05:08]
Well, you see, it's not gonna be a lot of work. If we keep the HTML semantic and simple to understand, it's not gonna be a big deal. So the body will have a header. And remember, in this case, we are trying to design something that we have already seen,
>> Maximiliano Firtman: Here.

[00:05:33]
We are trying to design that website. So actually, what we will have is the header. This is the header, everything we have here, that's the header. The header will we have a logo. It will have a navigation bar or a navigation section and a search input. And then we will have the section for the main content that will depend on the section that we're currently navigating.

[00:05:59]
Okay, does it make sense? Cool, so that means that's the header. The header will have the title that is gonna be an image pointing to images/logo.png, I really have the size that I want, they have 35. Remember every image should have an alternative text. In this case, it's the logo read in it.

[00:06:32]
We close the h1. Inside the header, we will also have a nav. This is pure symantic html, navis for the navigation section of your app and we will have a list of links. A UL an unorder list with links. Pointing for example to the homepage, we call it movies.

[00:07:02]
For now, we'll say Movies, we'll say Favorites, then we'll go to Watchlist and My Account. Need to solve these issues they have here like that. And then the URLs, we can change this later because they're not gonna work at this point. I mean, the target of those links.

[00:07:29]
Watchlist, maybe something like this, account. Okay, like that. And after the nav, I'm also going to have div with a form, and the form will have an input type="search", I'm not sure if you know that we do have an input type search for search. So don't use text.

[00:07:55]
Use search that has more semantic and even more attributes for when you have a search. And the placeholder for it will be search movies.
>> Maximiliano Firtman: And that's actually our header. Then we have the main content that we will leave it empty for now, and then a fooder with some basic metadata such as copyright or whatever.

[00:08:22]
ReelingIt FrontendMasters.com. Something like that will work as an initial HTML. So if you look at it, it even fits in one screen. So it's not really so complicated. And we can actually understand What's going on. Okay, I will enhance this with some properties. For example, for these four links, I will say, I will add a class, I will classify them.

[00:08:53]
And for that, I'm not sure if you know how to use a multi cursor without or option. So I can just say, for all of them, I'm going to define a class. I will call the class nav link. So it's not just any link, nav links, it's just a classification that I'm creating right now.

[00:09:15]
And for the form, I will say that when you submit this, I will talk to an app that we don't know what that app is, actually it's undefined at this point. We're going to create the global app object later, and so we can call search, and we're going to pass the event of the form.

[00:09:37]
Again, you have also the HTML, in case you wanna have copy and paste or follow along in the readme HTML. So if I save this and reload, now I'm seeing something. Okay, yeah, of course the CSS is already there. But anyway, it's just CSS, okay? But just with a very plain semantic HTML, you can just use CSS without adding dips everywhere.

[00:10:08]
Okay, it's just a very basic CSS. Of course, you can read the CSS, it's not really a big deal. For example, let's take this part, the nav. So let's go to CSS and understand how that works. So when we go to the style css and we search here, we have a header with some info, and there is a nav.

[00:10:27]
So the nav URL, it says, display flex. So that's how they are organized, one besides the other. Then there is a gap of 1.5 rem, that's the gap we have here, okay? Then inside every nav we have a link. The link is using a color. By the way, do you all know what these bars are from?

[00:10:53]
Or what do they mean? I mean, you can guess for the keyword bar, but it's a variable.
>> Speaker 2: A variable, too.
>> Maximiliano Firtman: And it's a color. So at the top, I have a list of colors. So my color palette is actually defined as CSS variables. So then we can use these variables without copy and pasting the color.

[00:11:16]
So it's actually pretty cool. So we have variables now in CSS and on hover, if I'm changing, for example, the highlight color, so when you hover, you see that other color and you can get the pretty easily with something. Now, of course, if I click there, it's 404, okay, yeah, I know.

[00:11:38]
We'll get there.