Our application will be mobile-first, as we have already discussed. To ensure that our HTML is fully optimized, let's add a bit more markup.
First, let's add a DOCTYPE declaration to the top of index.html. This tells the browser what kind of document to expect. In HTML 5 (the newest version of HTML), it always looks like this:
<!DOCTYPE html>
Next, we need to add a meta tag for viewport width. It looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
What does this do? Essentially, it tells the browser to display the web page at the same width as its screen. So, if the web page seems to be 960px and our device is 320px wide, rather than zooming out and showing the whole page, it'll instead squish all the content down until it's 320px.
As you might expect, this is only a good idea if your website is responsive and able to adapt to a smaller size. However, since responsiveness is one of our main goals, let's do this from the start. Add this tag within the <head> of our document.
A couple more tags to go! The character set we use on our web page can be encoded in a couple of different ways: Unicode and ISO-8859-1. You can look up these encodings for more information, but long story short, we're using Unicode. Let's add it like so, right below the previous <meta> tag:
<meta charset="utf-8">
While we're at it, let's add the language the HTML is in. On our existing <html> tag, add lang="en":
<html lang="en">
Okay, that about does it for HTML housekeeping. The last thing we need is a favicon, the little icon displayed next to the title in the browser tab. This is included in our assets bundle, so all we have to do is link it up (right underneath our <meta> tags):
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
Your browser tab should now look like this:
With that, we're done!
Next, we'll look at how we will include React in our project, and all the other dependencies we will need.
