Basic HTML Template

Between custom CSS, custom JavaScript, including jQuery and including Bootstrap there's now a lot we need to write to get a basic web page going. Here's a reference for you that you can copy and paste into your index.html file whenever you start a new project.

Features:

  • a reference to main.js for custom JavaScript!
  • a reference to style.css for custom CSS styles!
  • jQuery already all hooked up!
  • Bootstrap already all hooked up!
  • A simple HTML page already styled up with Bootstrap classes!

Copy and paste! Merry Christmas!!

The Template

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Web Page</title>

    <!-- Links to your custom JavaScript and CSS -->
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>

    <!-- jQuery -->
    <script   src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script>

    <!-- Bootstrap libraries -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  </head>
  <body>
    <div class="container">
      <h1>My Web Page</h1>
      <div class="row">
        <div class="col-xs-12">
          <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
          mollit anim id est laborum.
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6">
          <p>Always 1/2 half page column.</p>
        </div>
        <div class="col-xs-6">
          <p>Always 2/2 half page column.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-3 col-md-6 col-xs-12">
          <p>Column 1 resizes according to page size.</p>
        </div>
        <div class="col-lg-3 col-md-6 col-xs-12">
          <p>Column 2 also resizes.</p>
        </div>
        <div class="col-lg-3 col-md-6 col-xs-12">
          <p>Column 3 resizes too.</p>
        </div>
        <div class="col-lg-3 col-md-6 col-xs-12">
          <p>Column 4 also too does indeed resize.</p>
        </div>
      </div>
    </div>

  </body>
</html>

results matching ""

    No results matching ""