Intermediate Workshop

Intermediate HTML/CSS, JavaScript, jQuery, Hosting

18 November 2015 / 4:00 - 6:00 PM / Olin 155

WICC Instructors

Haewon Hwang (hh474)

Inyoung Hong (ih235)

Jerica Huang (jh2263)

Nikita Gupta (ng354)


Before we begin...



Refresher HTML/CSS (10 min)

CSS: Intermediate (30 min)


Box Model: inspect element

Responsive/Mobile Design (@media)

Positioning, absolute,  z-index

Quick tips: centering, fill background image

Javascript/JQuery: Basics (30 min)

        JS vs. JQuery



        Event handlers: click, hover (CSS), change → show, hide, css, toggle, fade

GitHub Pages! (20 min)

        Name Cheap

Before we begin...

Download Sublime

Pull Git code

Create a GitHub account & make a pages repo

Refresher HTML/CSS

        Skeleton & DOCTYPE

        Tags: nesting & indentation

        Head, html, body

        Text, links, images, lists, divs

        Absolute vs. relative paths

        CSS syntax, selectors, IDs & Classes

        Colors, fonts, display, align

CSS: Intermediate

  1. Sizing

        img {

                height: 500px;

                width: 300px;


  1. Box Model

  1. Responsive/Mobile Design
  1. Percentages instead of px
  1. Takes size of parent (see DOM)


        height: content;

        width: 100%;

        padding: 5%;


  1. Fonts: em instead of px

                h1 {

        font-size: 1em;


  1. Positioning
  1. Default = static
  2. Absolute (The doge logo in the top left corner)

position: absolute;

  1. Relative: Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.

        position: relative;

        left: 30px;

  1. Fixed: anchors that element to the browser window… if you scroll up/down, the fixed element stays put even as other elements scroll past it (the navigation bar)

        position: fixed;

  1. z-index: Specifies the “layering” of elements. Think of it like the z-axis on the 3D coordinate plane. Elements with higher z-indexes are positioned on top of those with lower z-indexes. Default value is 1. Can be both positive and negative.

        z-index: 20;

  1. Quick tips
  1. Centering

        Vertical: Give the element a line-height

        line-height: ___px;

        Horizontal: Set the element’s margin to auto

        margin: auto;

  1. Background cover image: To have a fixed, centered background image

                background-image: url(‘’); /* Set an image! */

        background-size: cover no-repeat;

Javascript & JQuery

  1. Javascript vs. JQuery
  1. Javascript is a language, JQuery is a library (
  2. Link JQuery library in the <head>
  3. Link JS file at the bottom
  1. DOM
  1. Document ready




  1. Selectors, event handlers, and actions

$(“event selector”).handler(function(){

        $(“action selector”).hide();


  1. Handlers
  1. Click




  1. Hover (CSS)
  2. Change
  1. Actions
  1. Show/hide
  2. CSS: manipulate the CSS with JQuery!


                        var width = $(“#bagel-doge”).width();

                        $(“#bagel-doge”).css(“width”, width + 20);


  1. Toggle
  2. Fade

GitHub Pages & NameCheap