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 \\\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">
          <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="" 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=""></script>
          <script src=""></script>
       <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
          <script src=""></script>
          <!-- Include all compiled plugins (below), or include individual files as needed -->
          <script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  3. Save your file to your W: drive as index.html.
  4. Ensure your site is accessible at[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
    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