LIZ Workshop

Introduction to Code

January 25, 2017

• @AmSagarwala
• Instructor of digital skills and media
• MDM graduate
• Teaching for 6-years at Ryerson
• Creating websites since 1998
• Automate everything!

Workshop Goals

• Outline the requirements to make a website
• Rapid prototyping
• Look under the hood
• HTML + CSS + JavaScript
• File management & publishing
• SEO / SEM
• Web 2.0 Opportunities

Creative exercise

Prototyping

5,127

Fail fast, succeed faster

• Sharing is oxygen for ideas
• Lots of methods out there
• LEAN?

Design sprint

Groups of 4-5 people

Prototyping on paper works!

Part 1

Site ideas

Part 2

Site Components

Part 3

Site mockups

Web Design

Introduction

Credit:  GenshiHebi

HTML Tags

• Typically come in pairs
• Encapsulate content
• Provide context to machines
• Structures content
• Contains attributes & values

<h1> This is a heading </h1>

<p> This is a paragraph </p>

<ul>

   <li> List item </li>

   <li> List item </li>

</ul>

opening tag

closing tag

nested tags

NEsting

• A tag can encapsulate other tags
• Provides structural depth
• A box containing boxes

attributes

• Provides tag customization
• Can include styles
• Attributes can be tag specific 

<a href='http://ryerson.ca/' title="Ryerson University">
Go to School</a>

Block vs. Inline

• Inline tags behave like characters (links, images)
• Block tags behave like paragraphs (h1, h2, p)
• Layout is constructed with block elements
• Content is enhanced with inline elements

<p>Go to school and <em>learn to code</em>!</p>

Working with media

Images

• Can be placed using styles or <img> element
• Behaviour is inline
• Will need to be optimized / exported for the web
• <img src="image.jpg" alt="Description">

Embedding Media

• Lots of services make it dead easy
• Look for the share option and then embed

LEt's embed

Back to our document...

File Management

LEt's make
A website!

WordPress

In a nutshell

Features

• Posts vs. Pages
• Categories vs. Tags
• Media management
• Themes
• Plugins

The API

Review!

Visit kahoot.it