Basic HTML structure

In the last session, we’ve built everything from scratch with CSS. However, because it’s so common to create grids, buttons, dropdowns, and other components in CSS and JavaScript, folks from various companies have outsourced their code and created so called HTML/CSS/JS frameworks.

Perhaps the most known and used one is the Twitter’s Bootstrap framework and that’s what we gonna use in this session.

So, let’s create a basic HTML structure with Bootstrap and their provided CSS/JS:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Spotify</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>
    <h1>Hello Bootstrap</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Notice how we’ve added the new <meta> property named viewport. This is required for building responsive websites. It instructs browser to adjust the page width to the screen (desktop, phone, etc.) and to start with an initial zoom of 1.

Prev Project introduction
Next Adding the navigation bar and using the Bootstrap framework
Bitnami