Practical Web Design

Let's now open our folder in Atom; click on Menu | Open… | and select our Web Project folder.

Select index.html from the left panel. You can see the HTML document and what it contains:

<!doctype html>
<html class="no-js" lang="">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title></title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="manifest" href="site.webmanifest">
      <link rel="apple-touch-icon" href="icon.png">
      <!-- Place favicon.ico in the root directory -->

      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
      <!--[if lte IE 9]>
          <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
      <![endif]-->

      <!-- Add your site or application content here -->
      <p>Hello world! This is HTML5 Boilerplate.</p>
      <script src="js/vendor/modernizr-3.5.0.min.js"></script>
      <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
      <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
      <script src="js/plugins.js"></script>
      <script src="js/main.js"></script>

      <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
      <script>
          window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
          ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
      </script>
      <script src="https://www.google-analytics.com/analytics.js" async defer></script>
  </body>
</html>

We'll now review each part of this HTML file so you understand each part of the code:

<title></title>

Here you will put the title of our website; for this exercise, let's put Racing Club - Events & Tickets.

<meta name="description" content="">

This section is the description of the page, It will be useful for SEO and will appear on a search result after the title.

<meta name="viewport" content="width=device-width, initial-scale=1">

This will tell the browser how to behave for desktop and mobile view. You can leave it as it is.

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

We learned in the previous chapter that there are three different ways to use CSS in our HTML page. We used the second method in our exercise, but the best way to use CSS is to put it into an external file, like so. You can leave it as it is.

<!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

This is basically to advise users with Internet Explorer 9 or lower to update their internet browser. You don't need to change the code.

<!-- Add your site or application content here -->
 <p>Hello world! This is HTML5 Boilerplate.</p>

This is our content. We'll edit this part of the HTML to add element and content in our HTML page. You can remove the <p> element since we don't need it.

The following code contains a list of the JavaScript plugins that are linked to our page:

<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
    window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
    ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>

The plugins are as follows:

modernizr: Detects our user's browser and changes the website's behavior accordingly.
Jquery: We will use this framework to create interaction and animation in our next chapter.
Plugin.js: Contains all the other plugins that we will need.
Main.js: Contains all the JS code we will create.
Google Analytics: An analytics plugin for analyzing users and to help understand how your website is performing. We'll go through this in Chapter 10, Optimizing and Launching Our Website.

Let's start editing our web page!

Table of Contents for
Practical Web Design

Editing index.html

Table of Contents for Practical Web Design

Table of Contents for
Practical Web Design