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)


Outline

Before we begin...

        Sublime

        GitHub: www.github.com/inyounghong/webdev2

Refresher HTML/CSS (10 min)

CSS: Intermediate (30 min)

Sizing

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

        DOM

        Selectors

        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)

div{

        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 (http://api.jquery.com/)
  2. Link JQuery library in the <head>
  3. Link JS file at the bottom
  1. DOM
  1. Document ready

$(document).ready(function(){

                //code

});

  1. Selectors, event handlers, and actions

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

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

});

  1. Handlers
  1. Click

        $(“#hide-doge”).click(function(){

                        $(“#bagel-doge”).hide();

});

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

        $(“#grow-doge”).click(function(){

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

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

});

  1. Toggle
  2. Fade

GitHub Pages & NameCheap


Resources

        CodePen

        Codecademy

        W3Schools