|

Quick Reference


right clicking

view page source/inspect element

div tags

classes and IDs

linking to css/bootstrap

right clicking

right clicking on something
allows you to bring up a menu
showing additional things you can
see about and do on it.

the most reliable way to
right click (for both Mac and Windows) is
to hold the CTRL button (found
on the bottom left side of your keyboard,
left of the spacebar) and click
whatever it is you want to right click.

some laptops have an additional button
near the trackpad for right clicking. alternately,
some trackpads will right click if you press down on
the bottom right side of the track pad.

viewing the page source/inspecting elements

you can view the html of any web page anywhere on the web.
to do so, simply right click anywhere on the web page, and click the view page source option.
this will bring up the page’s raw HTML code.

it is in your best interest to view the page source of this webpage,
in order to see how it is structured and gain a better understanding of
web development in action.

note: very often, this code will be incomprehensibly dense, especially on more
complex websites (facebook, amazon, google, etc). enterprise level sites have more complicated
HTML structures and systems than we will be tackling in this course.

div tags

div tags ( <div> </div> ) are block elements
primarily used for segmenting parts of your html from each other. for example, when you type
plain text into an html file, by default, it displays in one long unbroken line that stretches
the length of the div it is inside (e.g. on this webpage, the text doesn’t extend outside this nifty white
content box). using a div allows you to separate text into distinct pargraphs, like so:

this text is not in a div. it stretches in one long, boring line within this white box.

this text is in a div.

here’s a paragraph break.

divs are literally the fundamental building blocks of web design. 90% of the time,
any content you put on your webpage will be contained within a div.

classes and ids

classes and IDs are html attributes that can be applied to
any element on your HTML page in order to give them specific identities.
for our purposes, we will generally be using classes and IDs on <div&gt tags for css styling.

classes/ids are applied to tags (such as <div>s) as follows:

<div class=”testClass”></div>

<div id=”testClass”></div>

linking to css/bootstrap

css doesn’t work in an HTML page unless you explicitly add and link to it.
the best way to apply CSS to your web page is by linking to an external style sheet.

in order to do this, you’ll need to use the <link> tag in your
<head> tag. 

<head>
    <link rel="stylesheet" href="yourCSSFileName.css">
</head>

the above code will only work if the css file is in the same folder
as your index.html. if this is not the case (e.g. you have a css folder that
your css file is inside of), you’ll need to make sure to use the forward slash(/)
to navigate your file structure.

  <head>
      <link rel="stylesheet" href="folderName/yourCSSFileName.css">
  </head>

in order to link to bootstrap, the simplest way is to use the
CDN hosted link found on the bootstrap home page.

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>