The first is the favicon.ico, and you can see it's this little V,

and if you are not familiar with what a favicon is, if you switch over to the browser, and also make sure you have your server running. If you notice up here at the top you see this little V, that is the favicon.

So we'll be swapping that out later on in the course. But for right now I just wanted you to know exactly what that was.

Now the index.html file, this an incredibly important but still very small file located inside of your view project. Now as you can see it's only 17 lines long, but this index.html file is surprisingly important. If you do not have this file or if you make an incorrect change to this file, your entire application will not work.

And it's because that is how a single page application works, this is gonna be the same for a vue application as well as a react, or an angular app. This file is actually the only entry point, it's the only file that users are going to actually be accessing.

So if you are used to building out regular html type sites, you'd have your index.html, which is your main page. Then you might have an about.html and then a contact html, and you'd have all of these different files. Well that is not the way a view application works, or a single page application. When we say single page what we mean is that there's literally only one html page.

Now we may have hundreds or even thousands of component files, but those are really just JavaScript files. And what's gonna happen is they're going to be dynamically slid in and rendered inside of this single document. So let's walk through exactly what is inside of here so hopefully that also help you understand exactly how it all works.

So in the head tag right here, we have our meta tags. So this could be everything from the encoding, to making sure it's compatible with versions of internet explorer. The view port, this is very important in order to implement responsive designs, and then we also have a call to that favicon. That same one that we just saw and this grabs the base URL and the favicon, so if you wanted to change it, or change the name then you could do that right here.

Now this also where will be importing custom fonts. So if you want to import a font from say Google fonts like we're gonna be doing this, this is where you would place that link. Now we also have this title tag, so the title tag here says devcamp-devworkflow.

Now if we switch back to the browser you can see up here at the top that is what it's referencing.

So here if I want to change this, so if I just want to call this the Dev Workflow project, hit save. And also if you're ever curious on why sometimes the html or any of the code changes when I am building out the application, it's because I'm using visual studio codes prettier extension. And so if you want to look right here if you scroll down, you'll see this is what I have installed, it's the prettier extension for visual studio code.

What it does, it's a very helpful tool that will automatically format the code to combine and use best practices. So feel free to install that if you do not already have it installed. It's not actually making any true changes to the code, it simply is providing a little bit of extra formatting.

So moving back, if you go down, and you can see I've changed that title, I hit save. And now if you go back to the website you can see that the name has been changed.

And so you could do anything you want, you could say, Dev Workflow,and then give a pipe| and say, your source for managing code projects, whatever you want to call it. Hit save and now you can see that is included, not just right here. You may think that this is just informational, and this is helpful for users whenever they're looking at the tabs.

But if you right click on the browser and click inspect, this is also going to be shown inside of the html itself. So if you scroll all the way up into the head tag, and then come down here you can see that the title that we just provided is now the updated one.

And this is what Google would be looking at when Google, or Bing, or any of the search engines whenever they're coming and looking at your site, this is what they're going to be referencing, so it definitely is important to be descriptive with your title tags.

So I'm gonna close that out, and let's go back in the file. That's all of our head tags, our meta tags, and those kinds of things.

Now if we come down here in the body tag, this is gonna be very short. You're not gonna be making any changes here, so let's talk about the two tags that we have. The first one is called a no script tag, and the purpose for this tag is that if someone comes to the site and they do not have JavaScript enabled in their browser that means that our application will not work at all.

So we need to make sure that we give them some information because they'd be coming to the site, and the page would be completely blank. And so, what we're saying is, we're sorry but this site is not gonna work unless you have JavaScript enabled, that's just giving them a heads up.

Now coming down here, we have our single div tag. Now this is where all of the magic of our application is going to occur, it is a div with an ID. Now I'm going to show you in a future guide that we're going to select this ID. And it already is happening, that's the reason why we're able to see our content on the site.

And so, what happens is, view selects this tag and then it slides and injects all of the code that we're gonna build into this single tag. So this is a wrapper div for the entire application. And you can test this out by getting rid of this div, hit save, and our entire site is gone.

Now, as you can see we kept all of the rest of the html but what we don't have anymore is we do not have that wrapper div. So as you can, if you put it back, hit save, now everything is back. So this div is incredibly important, it is gonna be the div that is going to dictate how the applications formed and where it gets placed inside of the html.

So in review, in this guide we walked through the public directory for view project. We saw the favicon and then the incredibly important index.html page that allows you to have a entry point for your entire view application. And in the next guide we're going to start going through the source directory.