HTML/CSS Bootstrap Workshop March 2017

Gather Your Tools

Welcome to the HTML/CSS Bootstrap Workshop! You'll need a few things to get started:

  1. Your DANA Web Space!
    Open File Explorer, and go to \\dana.ucc.nau.edu\webhome\. On a lab machine, you can just open your W:\ drive.
  2. A text editor, like Notepad++

Part 1: Basic HTML Page Setup

  1. Open Notepad++
  2. Add the following "starter" HTML code:
    <!DOCTYPE html>
    <html lang="en">
       <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
          <title>STC HTML5/CSS3 Bootstrap Workshop</title>
          <!-- Bootstrap -->
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
          <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
          <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
          <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
       </head>
       <body>
       
       <!--YOUR CONTENT GOES HERE!-->
       
       <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <!-- Include all compiled plugins (below), or include individual files as needed -->
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
       </body>
    </html>
         
  3. Save your file to your W: drive as index.html.
  4. Ensure your site is accessible at https://dana.ucc.nau.edu/[YOURUID]/
  5. Add a container. This is a div that will hold the main part of your page. Add this under the line in your page
    <!--YOUR CONTENT GOES HERE!-->
    You can choose between <div class="container"> (uses a part of the screen in the center, except for on small screens) or <div class="container-fluid"> (uses the entire usable screen on all screen sizes).
    Don't forget to close your <div> tag!
  6. Copy an image over into your W: drive to use as a "logo" for your page/site. Ensure it is named something simple, like logo.png

Bonus Topics!

None for this section

Next Section


Creative Commons License
Tutorial by Bryan Sherwood, NAU ITS STC