Skip to content

Christopher Stein

image being resized in Photoshop with sizing handles shown.

Resizing Images

In order to have a symmetrical grid of images or image cards, you need every image to be the same aspect ratio (relationship between width and height).

Resize Images in Photoshop

The video below shows how to use photoshop to …

overhead view of people seated at table with project documents and computers in front of them on the table. AI Generated

Final Project First Steps

Here are the first steps to take as you get started on your final projects.

Step 1: Start Final Project Information Document

  1. Get the link to your group’s document (Miro Board) from Prof Stein
  2. Enter in as much information as
…
screenshot of a style tile

Style Tiles

Style tiles were created by Samantha Warren.

Style Tiles

The purpose of these is to start to show the visual design elements are not in a wireframe without having to create a full-blown mockup of the site. This allows you …

example final project brief document with dummy text.

Final Project Brief

OVERVIEW

The Final Project Brief is a document to describe the site that you will be creating for yourFinal Project. The overall goals are to describe what it is your doing both in text and with visual examples so that …

Collections in Eleventy

There are a few ways that you can generate lists of pages in 11ty. Eleventy has a concept called Collections that are a group of content. This post looks at how to show pages in a collection. That collection can …

Miro Boards

Throughout the course we use Miro to provide visual explanations of the topics we’re covering. Below are links to the boards, grouped by topic

Web Design Process and Principles

Site Visualizations

Examples of site visualizations for

…

Eleventy Portfolio Project

OVERVIEW

The Eleventy Site Project is taking the HTML/CSS/JS from your Responsive Site project and creating a site that is created with the Eleventy Static Site Generator and is hosted on Netlify.

Due Date

Tuesday, April 16

The class on …

screenshot of una's youtube video that explains 10 one line layouts.

One-Line Layouts

10 MODERN LAYOUTS IN 1 LINE OF CSS

by Una Kravets

In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox.

  • Article
…

Deploy to Netlify

This post covers how to get your site in the web using Netlify’s servers.

TERMINOLOGY

Some words you might not know

  • Netlify: Netlify is a hosting platform specializing in hosting projects build with workflows like ours (static site generator
…

Eleventy Portfolio Ready for Deployment

Follow this to make sure your Eleventy Portfolio Site Project is set up correctly so you are using the right repository and can deploy to Netlify.

Remember that this project is taking what you did in the first Responsive Portfolio …

Typographic Hierarchy

Most of the web is text so much of what you have to design is text. A typographic hierarchy helps the user to quickly scan a page and find information. Also, done right, it will make the page more visually attractive.

Typographic Hierarchy tells …

Navigation

HTML

Classic Version

The classic version uses an unordered list for the navigation:

<nav id="navbar">
    <ul>
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#" >Projects</a></li>
      <li><a href="#">About</a></li>
    </ul>
</nav>

Newer Version

This version has appeared more recently and it just has links in …

Gestalt Principles and Web Design

A big part of graphic design in general and the web design we do in this class is communicating a message to a particular group of people (audience). The Gestalt Principles were created to help explain how people make sense …