Disable Animations :x: :movie_camera:

JavaScript, CSS, & HTML (oh my)

earth bar

HTML. It’s what’s for dinner.

Or, at least, it’s what things that go in your web browser are made of. (Along with CSS to make it look pretty and JavaScript to make it change dynamically.)

In this tutorial, we’ll speed run through the front-end of the world wide web. Surf’s up!

🔗 A Language for Marking Up Hypertext

spider

HTML is an XML-flavored language. This means that it’s built using pairs of less-than (<) and greater-than (>) enclosed tags.

These tags designate the role of tagged content in the HTML file. (We’ll dive into this a little more in a second.)

For a tag tag, the general formula to tag some content “tagged content” looks like this

<tag> tagged content </tag>.

Tags can be nested. For example,

<outer>
  outer tagged content
  <inner>
    inner & outer tagged content
  </inner>
  outer tagged content
</outer>

Here’s some common HTML tags. (See here for a full listing.)

  • head
    • designates stuff that shows up in the browser tab (i.e., the page title and logo)
    • also sometimes used for loading external resources like CSS or JavaScript files
  • body
    • designates stuff that shows up in the browser window
  • div
    • arbitrarily designates a big section of content
    • useful for layout
  • span
    • arbitrarily designates a small section of content
    • like a few words in a sentence
    • useful for styling
  • p
    • designates a paragraph
  • i
    • makes text italic
  • b
    • makes text bold
  • h1 through h6
    • makes big (h1) through medium through smaller (h6) heading text
  • ul and ol
    • unordered and ordered lists
  • <a>
    • clickable hyperlink

There are some weirdo HTML elements that exist as one-off tag bits, not as tag pairs.

  • <img>
    • insert an image
  • <br/>
    • line break
    • kind of like hitting enter
  • &nbsp;
    • non-breaking space
    • useful to do something like         this

Comments work like this <! –– my comment ––>.

A very basic HTML document might look like this.

<head>
  <title> Salutations </title>
</head>
<body>
  Hello, world!
</body>

:school_satchel: Can you figure out how to make an HTML file with this structure?

Hello, world!

Bye!

:key: You’ll need to Google around a bit to figure out more about how unordered lists work.

You should be able to view the rendered output of a HTML file by using the “open file” function of your web browser!

🔗 Styin’ Sheets

style

Web styling is generally useful for controlling things like color, size, and position of elements of your site. Here is a good example of a lot of styling.

There are two main ways to control style that’s applied to a tag. This first inline way is useful for small one-off tweaks and adjustments.

<tag style="attribute1: setting1; attribute2: setting2;">
  styled stuff
</tag>

The better way to control style in a scalable, maintainable fashion is in a separate “cascading style sheet” file, looking like so.

.classname {
  attribute: x;
}

Then, in the HTML file, designate all the tag elements you’d like to style as members of the classname class like so.

<tag class="classname">
  styled stuff
</tag>

:school_satchel: Can you extend your practice web page with some inline styling to make something like this?

Hello, world!

Bye!

:key: You’ll want to use a <span> and the CSS attributres background-color and color.

🔗 YavaScript

coffee

I guess it’s spelled JavaScript, but I saw a talk where it was pronounced YavaScript the whole time and I am very on board for that.

Here’s the basic facts of JavaScript:

  • everything’s horrible
  • there’s supposed to be semicolons but they’re optional I guess?
  • you actually meant console.log not print
    • (did I mention everything’s horrible?)
    • :bangbang: you’ll have to open up your browser’s developer tools to see the console
  • everything’s event-driven
    • this means that you package your code to be triggered in bursts in response to events
    • like key presses, the page loading, mouse clicks, intermittent timers, etc.
    • instead of running it all at once (imperatively)
  • you can futz with HTML and CSS
    • in fancy talk, you can interact with the “document object model”
    • a.k.a., the DOM
    • playing around with HTML allows you to dynamically adjust content
    • playing around with CSS allows you to dynamically adjust styling
  • to alter lots of elements at once, you can select elements by class
    • document.getElementsByClassName("classname")
  • to alter a specific element, you can select elements by ID
    • ID is specified in the HTML a la <tag id="unique_identifer">
    • document.getElementById("unique_identifier");

Here’s a HTML snippet with embedded JavaScript that’ll say hello world three different ways once the page loads!

<script>
  window.onload = function(){
    console.log("hello world");
    window.alert("hello world");
    document.write("hello world");
  };
</script>

:school_satchel: Can you write a HTML file with embedded JavaScript that’ll count the number of times a user has clicked after the page loads?

live click counter: 0

:key: You’ll want to use window.onclick, a var counter = 0 outside your function, and the .textContent member of the element object.

🔗 All Together Now

holding hands

Cramming large amounts of JavaScript and CSS inline into your HTML is known to cause cancer in the State of California. Don’t do it!

Here’s a better way.

index.html

<head>
    <title>(-:(3</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <div class="titling">
      <h1>
        howdy <span class="emphasis">partner</span>
      </h1>
    </div>
    <p>
      sky sure is <span class="emphasis">pretty blue</span> out here on the range
    </p>
</body>

style.css

.titling {
  background: red;
}
.emphasis {
  color: blue;
}

script.js

console.log("yeehaw");

Now, in order to render all this in your web we’ll need to actually serve up the directory where index.html, style.css, and script.js actuall live. Python provides a handy, no-hassle tool for this.

Try running python3 -m http.server at your command line.

If it starts up, then great! Just leave it running for now.

If you only have Python 2 installed, try running python -m SimpleHTTPServer at your command line.

If you don’t have any Python installed, a step-by-step guide for your operating system is probably only a quick web search away. Alternatively, go ahead and use your web serving tool of choice.

Pop open your favorite browser and point the address bar to http://localhost:8000/. And voila!

:bangbang: Depending on your particular environment, the website might get hosted at a url different from http://localhost:8000/. If nothing pops up when you navigate there, peek inside of your web server command’s terminal output and see if it tells you where it’s serving to.

You can end your web serving process by closing the terminal window you’re working in or entering <ctrl>-c at the command line.

Try to get that all working.

🔗 One-Handed While Skateboarding Around Campus

a cellular phone

I once had a professor tell us how excited he was to make his online linear algebra textbook mobile responsive so we could use it “with one hand while skateboarding around campus.” In fact, he told us this on several occasions.

I think about that sometimes.

Anywho, most web is mobile. So if you want the youth to read your textbook while shredding gnar you need it to do smart things when you grab the side of the browser window and scrunch it up all small here.

The main secret of mobile-friendly design is to have your content lay out

side   by   side   on   desktop

but make it be

top

to

bottom

on

mobile

or

less on

mobile

or

somewhere in between
on tablets etcetera

Twitter’s Bootstrap framework helps you get the smart scrunching you desire.

🔗 Rows, Columns, & Viewports (oh my)

doors

The beating heart of Bootstrap is its grid layout system.

Bootstrap divies the screen up vertically into 12 columns.

If you make an element take up 8 columns and an element take up 4 columns, this sort of thing will happen.

<--- 8 ---> | <- 4 ->

If you make an element take up 8 columns, an element take up 3 columns, and an element take up 2 columns, this sort of thing will happen.

<--- 8 ---> | <- 3 ->
< 2 >

The secret sauce that makes this all tick, though, is that you can make how many columns an element takes up depend on the size of the web browser window (a.k.a viewport) you’re working in.

So you can have your cake on desktop…

<--- 8 ---> | <- 4 ->

… & eat it too on mobile.

<---- 12 ---->

<---- 12 ---->

Bootstrap defines several categorizations for screen size. From smallest to largest,

  • xs < 576px wide,
  • sm >= 576px,
  • md >= 768px,
  • lg >= 992px, and
  • xl >= 1200px.

Here’s how we’d code up the cake-eating situation we just proposed.

<head>
  <!-- boilerplate to get the bootstrap things -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
</head>

<body>
<!--
  for proper bootstrap magic
 rows go in a container
-->
<div class="container">
<!-- columns go in a row -->
  <div class="row">
    <!-- from xs upwards, make columns full-width -->
    <!-- then from lg upwards, make columns partial-width -->
    <div class="col-xs-12 col-md-8" style="background-color:blue;">
      1 of 2
    </div>
    <div class="col-xs-12 col-md-4" style="background-color:pink;">
      2 of 2
    </div>
  </div>
</div>

<!-- boilerplate to get the bootstrap things -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script>
</body>

You can see it in action here.

Marie Antoinette would be proud.

🔗 House of Cards

cards

The other bit of Bootstrap that’s super useful for web apps is cards. They let you organize your widgets and doodads into pretty little packets that are easy to shuffle around.

Here’s the basic construction of a card.

<div class="card">
  <div class="card-header">
    Jack of Spades
  </div>
  <div class="card-body">
    one-eyed dude with a curlicue mustache
  </div>
</div>

You can see it in action here.

Sooner or later, any house built of cards must come tumbling down. And, it turns out, collapsible content is a great mobile-friendly trick.

Here’s how you can make a card that opens and closes when you click a button in its header.

<div class="card m-3"> <!--- m-3 makes a nice margin --->
  <div class="card-header">
    <span data-toggle="collapse" href="#targetidentifier">
      <button
        class="btn btn-block btn-primary text-left p-3"
        type="button"
        data-toggle="button"
        autocomplete="off"
      >
        Click to Expand
      </button>
    </span>
  </div>
  <div id="targetidentifier" class="card-body collapse">
    Now you see me!
    Now you don't!
  </div>
</div>

You can see it in action here.

🔗 Fly Birdie Fly

airport runway

Your challenge, should you choose to accept it, is to use what you’ve learned to create an in-browser game of concentration. That’s the card game where you flip over cards two at a time looking for matches.

You’ll lay out a deck of cards numbered 1 through 8. You’ll want a pair of each number (i.e., two 1’s, two 2’s, two 3’s etc.). Lay them out so they’re 1 abrest on mobile, 3 abrest on medium screens, and 6 abrest on large screens.

You might use Boostrap’s accordion styling to swap between showing the back of a card, its front, and an alternate back for cards that have been matched.

You could write the HTML for all your cards by hand or you could use template literals to generate a bunch of cards. (This isn’t a great way to do things in the wild, but probably suffices for this exercise.)

You don’t have to enforce any rules or game mechanics (that only two cards can be flipped over at a time, automatically setting cards to the matched state when they’re successfully paired up, etc.). But if you really want to, you could with JavaScript.

Bonus points: come up with a catchy misspelt name for your game, register a .io domain, and obtain $2 million dollars of VC funding. Have fun!

🔗 Words of Wisdom

flowers

Bootstrap’s docs are actually pretty good. So are Mozilla’s HTML/JS/CSS/etc. docs. Sometimes even better than trawling stack overflow!

While you’re debugging or fiddling, try popping open your browser’s developer tools (usually <ctrl>-<shift>-i). You should be able to inspect — and even edit in place — the elements of your website. Life changing!

Web-based tools like jsfiddle are also super for trying out and sharing ideas. Here’s a jsfiddle template with pre-loaded bootstrap.