projects

Bootstrap yo ish

bootstrap

We are going to be learning Bootstrap,

"Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions."


1.Create a New Folder

You can call it whatever you want (e.g xxx) xxx

2. Open up Sublime Text

Create a new file, name it index.html and save it inside your newly created folder. Now copy and paste the html below and save it

<!DOCTYPE html>
<html>
  <head>
    <title>Learning HTML w/ ngandrew</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </body>
</html>

We are using a hosted bootstrap file so there is no need to download it, if you'd like to host it yourself you can, just place the assets inside the folder and link to them instead of using the CDN.

3. Open the file in Chrome

helloworld It should look something like this, if it does Congrats! You just created your first website, it might not seem like much, but hey its a start!

Lets break down what we just did

<!DOCTYPE html>
<html>
  <head>
    <title>Learning HTML w/ ngandrew</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

On Line 1, we declare the doctype -

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

<!DOCTYPE html>

The <!DOCTYPE> that we use is specifically for HTML5, This is the new standard.

Next we start the website with a html tag, The html tag is the container for all other HTML elements

<html>

Inside that we have a title tag, It corrolates with the title you'll see on top of your browser

<title>Learning HTML w/ ngandrew</title>

As we can see, each html tag is opened with a < sign, and closed with a > sign,

(I just call them carrets ha, e.g. open and close carrets)

To end a tag, we use </'tag name'> (minus quotes)

  <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">