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
Category: CSS
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
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 are in is smaller than the image. For example: The following needs to be in… Continue reading Responsive Images and Video
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 My Examples: https://profstein.github.io/css-grid-basic-examples/ Reference Guides and Cheatsheets These help show all of the grid properties,… Continue reading CSS Grid
Media Queries
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 are creating a fluid layout. This post outlines the third item, Media Queries. Media Queries are CSS rules that allow you to apply CSS styles only… Continue reading Media Queries
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): https://web.dev/one-line-layouts/ Editable Demo Examples on Glitch: https://1linelayouts.glitch.me/ GitHub Repository: https://github.com/una/1linelayouts YouTube Video… Continue reading One-Line Layouts
CSS Games
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 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
CSS Resources and References
Here are some places where you can find out more about CSS Syntax, Selectors, Properties and Values. Nobody can remember everything about CSS Syntax, how to apply it etc. Your goal should be to know some of the main terms and ideas so that you can more quickly find the information you need in a… Continue reading CSS Resources and References
