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
We'll be using Visual Code Studio, Glitch and Slack to manage our work.
- Sign into the Slack workspace to connect with each other and provide peer support
- Create a Glitch account (or sign in via another service)
project in browser.
- Rename default name
- Rename index.html as index_class.html
- Add a folder called 'flags'
- Download Visual Code Studio and the Glitch add-on
- Open Visual Code Studio
- Command Shift P, then type "Glitch: Show Commands." "Sign in." Open your remixed project
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.
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 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.
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.
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.
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 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.
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.
There are many ways to target HTML elements with CSS. Become comfortable with parent and child relationships.
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
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.
The box model refers to the way css handles width, height, margin, border, and padding.
There's more controls over typography than you might think, but it's also easy to get lost in the basics.
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: inline-block gives elements the qualities of both block elements and inline elements, making it ideal for navigation or simple horizontal layouts.
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.
CSS Layout extras
Once layout begins, some additional CSS properties become useful. See the below.
Overflow is a property that tells the browser what to do when content goes outside an element.
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."
The parent container holds most of the directions.
Flex can wrap itself when the browser window gets too small; falling naturally into a 'mobile' column mode.
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.
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.
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.
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.
You can repeat grid tracks with the repeat() value. Also note the gap property.
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 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.
Standard Vector Graphics is just html code that can be manipulated with CSS as any part of the DOM.
Week 1 2 3 Four
APIs are structured data made publicly available. Look at these two APIs to see how they work with jQuery.
These libraries are worth playing with as a designer/developer.
- Refer: Bindery
Making it real
HTML5 doctype, analytics, meta data, hosting, serving, testing, CMSes.
Let's look at a start page
Where should your site go?
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.