near/

far

About

Designing for the web, like any medium, necessitates thinking in the tools and materials of that medium. Websites are primarily boxes within boxes within boxes. This workshop gets introductory students into a text editor in order to create and manipulate these boxes. Students will be asked to make flags (places that are far); though now a few blocks seems far in this online only workshop. —John Caserta, Web Programming Workshop, Fall 2020.

Week One 2 3 4

Getting Started

We'll be using Visual Code Studio, Glitch and Slack to manage our work.

HTML Basics

HTML is a markup language. It is comprised of a growing library of tags meant to describe the content of a web page. Although there are visual defaults that accompany each tag, HTML is made visual with CSS. For now, let's look at common tags and ways to break up web content.

Core tags

html files use tags to organize content. Elements is the term used to describe a tag and its contents. Familiarize yourself with the basic tags.

  • Refer: core.html
  • Do: Rename the existing index.html to index_class.html and make your own index.html with an h1 tag with your name. We'll return to this later to add links to flag assignments.
Block elements

Block elements provide the bones to a web page. A big piece of text here, a paragraph there, a list there. Block elements by default take up a whole line and have a line break. The following are commonly used block elements: headers, paragraphs, lists, divs.

  • Refer: block.html
  • Do: Create a flags/thailand.html file with five block elements using content from the Thai Ministry of Culture website. It should be structured like the flag of Thailand 🇹🇭, except you don't see any color or borders.
Inline elements

Inline elements appear within block elements. They do not have as many layout properties, and tend to be text-oriented. Examples: anchor, strong, em, img, span. Not how some tags have attributes that further define the tag.

  • Refer: inline.html
  • Refer: attributes.html
  • Do: Think of inline elements as the little symbols that appear in flags (like 🇵🇾). Duplicate your thailand.html file and create paraguay.html with at least one inline element per block element. No CSS yet!
Structure

When your web page gets dense, you'll want to bring in some HTML5 tags to help give structure to areas of content: main, aside, nav, header, footer, and section among them.

  • Refer: structure.html
  • Do: Now that you know how to link to files, edit your main index.html with links to your flags as you progress. Use structural elements including header, footer and main.
Web Inspector!

As a transition to CSS Basics, get comfortable with the browser's developer tools; Press Command-Option-i to bring up the panel to see the code of websites.

  • Do: Check out the emojipedia flag webpage. Note how the elements nest. See how it's structured. Delete elements, edit text, and note CSS on the right.

CSS Basics

CSS stands for cascading style sheets (the cascade is powerful and underused). CSS came along after about five years of vanilla HTML. CSS provides the look and layout for HTML.

Calling CSS

You can call CSS in three ways: inline, internal and external. Web inspect the reference file below to see. We'll cover: properties, values, units, classes and ids.

  • Refer: syntax.html
  • Do: Make a gabon.html page and call CSS in all three ways. Create the three striped flag of Gabon 🇬🇦using the background-color (green, yellow, blue values), width and height properties in css.
Selectors

There are many ways to target HTML elements with CSS. Become comfortable with parent and child relationships.

  • Refer: selectors.html
  • Do: Make an austria.html page and make the flag of Austria 🇦🇹 with each stripe using one of the following css selectors: nth-child, classes, and id.
Color

In basic CSS, there's the color property for text, and background-color for shapes. Although HEX was the standard format, you'll see more rgba values now. We'll cover: hex, rgba and opacity

Units

One of the first things you might realize is that there are a ton of units. You'll see: px, em, pt, in/cm, rem, %, vw/vh.

  • Refer: units.html
  • Do: Using the width, height, and background-color properties, create a Yemen.html page and make a different flag of Yemen 🇾🇪for each of the units in the reference.
Box model

The box model refers to the way css handles width, height, margin, border, and padding.

Type

There's more controls over typography than you might think, but it's also easy to get lost in the basics.

  • Refer: type.html
  • Do: Using the 'Description' text from the Rwanda 🇷🇼, implement at minimum following text properties in noticeable ways: @font-face, font-family, font-size, letter-spacing, line-height, anti-aliasing, and centering of text.
Images/Background

Images and color can go in the background. You'll see the additional properties that go with background-image in the file.

  • Refer: images.html
  • Do: Create your own lebanon.html file and make the flag of Lebanon 🇱🇧 using a png image of the cedar tree in the middle

Week 1 Two 3 4

CSS Layout: Inline-Block, Floats & Positioning

The display property changes how elements flow (or display) on a page. Floats are a way to nest one element within another, or to simply create layouts. Positioning lets you put elements exactly where you want, although this disrupts the natural flow of the page.

Display

Display: inline-block gives elements the qualities of both block elements and inline elements, making it ideal for navigation or simple horizontal layouts.

Floats

Floats are similar to inline-block; created primarily to let inset boxes (images, callout boxes) be wrapped by text, like text-wrap in InDesign. Unfortunately, there is no float: center. You can center block elements with margin: 0 auto.

Positioning

The position property lets you put elements in absolute and fixed positions (the default value is static).

CSS Layout extras

Once layout begins, some additional CSS properties become useful. See the below.

Overflow

Overflow is a property that tells the browser what to do when content goes outside an element.

Transform

Transform alters the default shape of an element with rotation, skewing and scale as its values.

CSS Layout: Flexbox

For a few years now, the display value of flex has been used to handle most layout needs. Flex has a bunch of properties it can make use of to control layout, but at its core is a "something will work out" perspective on layout. It's "flexible."

Start

The parent container holds most of the directions.

  • Refer: flex_start.html
  • Do: Warm up with Flex by making the flag of Japan 🇯🇵. Create a new file and give the background a grey color so we can see the white of the flag. Once you've done this, make the flag of Laos 🇱🇦. Be open to the possibility of it stretching.
Wrap

Flex can wrap itself when the browser window gets too small; falling naturally into a 'mobile' column mode.

Grow/Shrink/Basis

Adjusting the grow, shrink and basis properties in the flex children/items can provide a good deal of control within flexbox's "it all works out" dynamic.

Row/Column

We have been mostly looking at flex in a row; it can also be applied to a column: multiple children stretching out to fill a column. Column is commonly used for mobile; you can see in this example that a simple media query changes the default 'row' to 'column'.

Week 1 2 Three 4

CSS Layout: Grid

CSS Grid is the newest layout display value. It provides control in a way familiar to those who have worked on posters and books.

Start

Just like with flexbox, the parent element holds most of the properties. An implicit grid simply puts the child elements in grid areas in the order with which they are loaded.

  • Refer: grid.html
  • Do: Warm up with Grid by making the flag of Colombia 🇨🇴. It'll be a bit like floats since you're letting the elements fall into grids.
Explicit

Being explicit means telling the browser exactly where an element should go in the grid.

  • Refer: grid_explicit.html
  • Do: With Colombia, you could rely on the implicit grid, but here, make the flag of Artsakh with an explicit grid for the white boxes.
Repeat

You can repeat grid tracks with the repeat() value. Also note the gap property.

With Flex

Often the grid is the structure and within the grid you'll nest more elements within elements. You can apply flex (or grid again)to the children of the grid element.

CSS Advanced / Interactivity

There's a lot of interactivty that is built into HTML and CSS. These few examples open up some of those options.

Media Queries

Media queries allow different declaration blocks to be called in different conditions — most useful in viewport width.

Animations / Transitions

When you want one state to be smooth to another, use the CSS transition property.

SVG

Standard Vector Graphics is just html code that can be manipulated with CSS as any part of the DOM.

  • Refer: svg.html
  • Do: Create the flag of Swaziland (Eswatini) with the middle element as SVG 🇸🇿. Find the SVG online and use Illustrator to organize.
Variables

CSS variables help with aspects of your CSS that repeat, such as colors, key units, etc.

Week 1 2 3 Four

Scripting

Javascript and jQuery bring interactivity and dynamic features to websites. They are languages unto themselves. But here you see what they can do and how to dip your feet into them.

Javascript Syntax

Javascript has gotten more clear and easy to write. See these examples for more.

JQuery Syntax

jQuery is a Javascript library. It's possible to do a lot with the DOM with very little jQuery.

  • Refer: jquery.html
  • Refer: lottie.html
  • Do: Take one of your previous flags and on click, change it to a flag for your new country.
APIs

APIs are structured data made publicly available. Look at these two APIs to see how they work with jQuery.

Libraries

These libraries are worth playing with as a designer/developer.

Making it real

HTML5 doctype, analytics, meta data, hosting, serving, testing, CMSes.

Start page

Let's look at a start page

Hosting

Where should your site go?

CMSes

Why a CMS? These are good 'entry-level' places to organize your content and templates.

Put it all together

Make a single-page website using content of your choosing that applies what you learned in this workshop to those near and far.