Skip to content

slides.md

Latest commit

 

History

History
559 lines (289 loc) · 9.58 KB

slides.md

File metadata and controls

559 lines (289 loc) · 9.58 KB

Coding Workshop for Designers

Presented by Shift Design Group & Lexington Codes

Introductions

  • Who am I
  • Who are you

Overview

  • The Internet
  • HTML: The content and structure of a webpage
  • CSS: How that page looks
  • JavaScript: Making it fancy

Tools

  • Editor with syntax highlighting
    • Sublime Text: Great and free
    • TextMate: Not free but has big fan base
    • Dreamweaver etc.
  • Test in as many combinations of browser versions and OSes as you can

Browser Developer Tools

  • Chrome Dev Tools (Tools > Developer Tools)
  • Firefox (Tools > Web Developer > Toggle Tools)
  • Safari (Enable Develop menu from Advanced Preferences)

Client/Server

Client server diagram from Wikipedia

source: Wikimedia

Web Standards

The File Structure of a Website

  • index.html
  • Good organization to have separate folders for CSS, images, JS, etc.

HTML

  • Describes the elements in a document
  • As well as containing the content

HTML5

  • More descriptive tags: article, section, header, etc.
  • New media tags: audio, video
  • Canvas
  • Mozilla Developer Network is a great resource

HTML Tags

  • You need an opening and closing tag


This is a paragraph......
  • Except when you don't (self-closing tags):

(HTML5 eliminates the need for the / at the end of the img tag)

Anatomy of an HTML File


<!DOCTYPE html>
    <head>
        
        <title>My webpage</title>
        
        
    </head>
    <body>
        
This is a webpage

        
And here is a paragraph

    </body>
</html>

IDs & Classes

  • An ID uniquely identifies an element
  • You can add a particular class to many elements
  • You can assign multiple classes to an element

ID & Class Example



My Site!


Here's my life story: blah, blah, lorem ipsum etc. forever


Here's how I feel about HTML5: SOOO many feelings.  Let me tell you about them forever.

HTML5 Boilerplate

  • HTML5 Boilerplate
  • Includes basic index.html
  • Also the standard folder structure
  • Some helpful CSS

Cascading Style Sheets

  • Position elements
  • Styling
  • Designers have a huge advantage

"Cascading" Style Sheets

  • Author style sheets, user stylesheets, and user agent style sheets (from most to least weight)
  • Conflicts are resolved in favor of most specific, and the later it appears in the stylesheet
  • Example

How it works

  • Apply some style to a tag or selectors

p {
    color: blue;
}
.warning {
    color: red;
    font-size: 1.2em;
}

Including Your CSS

  • Internal: in a style section (part of the head section)
  • Inline CSS: as style attribute of HTML tag
  • External: include link to CSS file in head section of HTML file

Internal CSS


<head>
<style>
#title-banner {
color: #444;
}
</style>
</head>

Inline CSS


<h1 style="color: #444;">My Website</h1>

External CSS


<head>
<link rel="stylesheet" type="text/css" href="yourfile.css">
</head>

IDs as Selectors

#title-banner {
    color: blue;
    font-size: 3em;
}

Run it

Classes as selectors


.warning {
    color: red;
}

Example

Class and ID Example

Descendants


h1 a {
    color: green;
}

Example

More Selectors

Styling Links

  • :link
  • :visited
  • :hover

a:hover {
color: pink;  
}

Web Typography

Responsive Design

  • Having a good experience on different devices
  • Progressive Enhancement
  • Origin of the Term

What's an em?

  • CSS allows you to size text using em, pixels, points, or percent
  • em is the most accessible and scalable
  • "When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px." -- Mozilla Developer Network

Media Queries

  • Selectively apply styles (e.g. one for small screens, another for large)
  • Example from MDN's comprehensive article on media queries:


<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />


<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

The Box Model

Box model from W3C

source: W3.org

Bootstrap & Co.

Further Reading

The Future (is here)

  • Making CSS dynamic and easier to develop
  • LESS
  • SASS

JavaScript

  • Has nothing to do with Java
  • Include in your HTML file

Including Your JS

  • Inline or external
  • Either way, do it before the </body> tag

Inline JS


<script>
alert("JavaScript!");
</script>

Linking to External File


<script type="text/javascript" src="yourfile.js"></script>

Variables

  • Holds a value
  • Can be a string, number, function, another variable, object

var myName = "Hannah";

Comments

  • Single line: everything on that line after // is ignored

// This is a comment
  • Multiline: everything between /* and this */ is ignored

/*
This comment
is two lines long
*/

Arrays

  • Think of them as list of variables

var myArray = ["cat","dog","wookie"];

Objects

  • A "thing" with named properties
  • Example

Functions

  • Allows you to reuse chunks of code
  • Example

Functions as Object Properties

  • Object properties can be functions
  • Example

Loops

  • Sometimes you need to repeat yourself
  • E.g., say you want to print all the items in an array
  • Example

Manipulating the DOM

  • Dynamically change the webpage
  • Manipulate elements in your HTML

jQuery

  • Overwhelmingly popular JavaScript library
  • Uses CSS selectors as a base

jQuery Selectors


$("selector_goes_here").whatever

Events & Callbacks

  • Button clicks, window resize, etc.
  • Example

Learn JavaScript for Real

Eloquent JavaScriptis a fantastic (and free) online, interactive book

JavaScript Everywhere

  • Tons of awesome open source libraries!
  • Even runs server-side now

More Advanced Topics

  • Git & GitHub
  • The Command Line
  • Yeoman, Grunt, and Bower
  • Ruby on Rails, Django, etc.

Advice

Questions etc.

Feel free to contact me with any questions:

Twitter: @hlatkin

Email: hannah.atkinson@gmail.com