Skip to content

Resources

This page has resources to help you with creating your projects. They are organized by category (some posts may appear in more than one category).

Final Project

Information and resources related to the final project.

  • screenshot of 11ty index page and web site in another window.

    Converting HTML site to 11ty site

    The link below is to a video recording walkthrough of moving an HTML site to an Eleventy site. Walkthrough of HTML to 11ty Related Resources HTML to 11ty Miro (I […]

  • 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 […]

  • git diagram showing main branch and four additional branches.

    Basic Branching Workflow in Git

    When you are working on a team project, you need a way to make sure that people’s changes don’t get all mixed up and overwrite each other. Two practices in […]

  • 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 If you haven’t yet, you will want to […]

  • screenshot of final project management miro board

    Final Project Management

    This post explains the miro your group will use to manage your final project. Entering information in this is required of each group.

  • 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 […]

  • Final Group Project Ideas

    We will go over this post in class to help you think about what to do for your final project and to also get started with getting you into groups. […]

Eleventy

Posts related to what Eleventy is, and how to work with it.

  • screenshot of 11ty index page and web site in another window.

    Converting HTML site to 11ty site

    The link below is to a video recording walkthrough of moving an HTML site to an Eleventy site. Walkthrough of HTML to 11ty Related Resources HTML to 11ty Miro (I […]

  • screenshot of a codespace with p5js file being edited, next to a page showing a rendered page containing p5js.

    Showing p5js in Eleventy

    Tutorial on how to show p5js project in an 11ty site.

  • 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 […]

CSS and Design

All posts related to design in general and also web design and CSS specifically.

  • 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 […]

  • 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 […]

  • 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 […]

  • Navigation

    HTML Classic Version The classic version uses an unordered list for the navigation: Newer Version This version has appeared more recently and it just has links in the nav with […]

  • Typography Basics

    This post presents the basics of typography through a set of rules to follow. Like all rules they are made to be broken, but you should learn them first before […]

  • 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 […]

  • 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 […]

  • Media Queries

    Overview In order to have a fully responsive web page you need three things: We have already covered Fluid Layout. When you use FR units (grid-template-columns: 1fr 1fr; ) you […]

  • Responsive Images and Video

    Images are by default inline elements that are a certain size and will take up that space on your web site. For responsive web design we need our images to […]

  • screenshot of css grid garden game

    CSS Games

    These are games that help you to learn CSS. CSS DINER: SELECTORS GAME Play Game: https://flukeout.github.io/ This is a web game that requires you to write CSS Selectors. It’s a fun […]

  • CSS Grid

    CSS Grid is relatively simple to get started but it is also deep with a lot to learn. This page has resources about CSS Grid for those just getting started […]

  • Grid Layout Basics

    A grid is a layout that you define in CSS that allows you to organize content on your page in Rows and Columns. In order to have a grid layout […]