Skip to content

Christopher Stein

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 you start breaking them.

If you follow these rules your …

Media Queries

Overview

In order to have a fully responsive web page you need three things:

  1. Fluid Layout: the width of the layout is set in fluid units like percent or fr units. This allows the layout to expand and contract
…

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 be able to shrink in size if the container they …

Portfolio Brief Assignment

OVERVIEW

The Portfolio Brief is a document to describe the Portfolio web site that you will be creating. It includes a number of areas where you will write about the project and create visualizations to show what it will be …

Submitting the Portfolio Brief

Instructions on how to submit your Portfolio Brief.

FORMAT

Please submit your brief as a single PDF file. I suggest using Microsoft Word or Google docs to create it and then exporting as PDF.

You will most likely use some …

screenshot of css grid garden game

CSS Games

These are games that help you to learn CSS.

CSS DINER: SELECTORS GAME

screenshot of CSS Diner game

Play Game: https://flukeout.github.io/

This is a web game that requires you to write CSS Selectors. It’s a fun way to test your knowledge of writing selectors for …

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 to exploring more complex layouts.

In class we looked at …

Container Elements

These are elements that contain other elements. When creating a web page we use these to set up the structure of the page. These are what we apply grid and flex styling to and the other content elements (text, media …

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.

screenshot of web page with 4 column css grid applied. the first row has 3 boxes, second box is two cols wide. second row has four boxes one in each column
CSS Grid Example

In order to have a grid layout you need to combine HTML and CSS. …

Sample Assignment

This sample assignment is a post that with the category Assignment. You can edit or delete this post. If you edit it, be sure to also change the post author to yourself. You can create your own assignment by creating …