Media Queries

In order to have a fully responsive web page you need three things: 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 to fit the width of the browser window. Flexible Media: images, video etc can also adjust their width… Continue reading Media Queries

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. Getting Started Guides These guides are designed to help you learn Grid. They all teach the basic ideas but with… Continue reading CSS Grid

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 the reader two basic things: what text is more or less important, what kinds of… Continue reading Typographic Hierarchy

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 web typography won’t suck. It will most likely be pretty good. The simplicity of the… Continue reading Typography Basics

CSS Games

CSS Diner: Selectors Game Play Game: 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. It also explains the selectors so it can be a good learning tool as well. By the end of this class you should… Continue reading CSS Games

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 (written and video):  Editable Demo Examples on Glitch:  GitHub Repository:  YouTube Video… Continue reading One-Line Layouts