How to Learn CSS by Rachel Andrew

The lack of flexibility for typography in CSS can often be a limitation to the visual design of a website. Variable Fonts was introduced recently to tackle this problem and allow more variety with texts in web design. Variable Fonts is essentially a single font file that contains a range of styles, weights and sizes of a typeface. Taking font size as an example, by having a range instead of a set of specific values, Variable Fonts enables smoother transition when texts on a page take part in a keyframe animation. Variable Fonts can also be a solution to layout shifting caused by mismatched fallback and custom fonts by matching fonts as closely as possible.

CSS Grid layout is a two-dimensional systems that organizes items in both rows and columns. Unlike Flexbox, Grid enables more flexible and accurate layout. Grid areas can be defined, so that items can span more or less than one grid track, while maintaining the basic grid structure. Grids can also be nested, making a grid item a container itself. The sizes of grids and gaps can be controlled individually using percentages values. Taking it to a more complex level, Grid can be incorporated with padding and margin elements to create an interesting layout with negative spaces.

A selector is an alternative to class, or could be known as a pseudo-class. Instead of giving an element a class (e.g. p class=“first-child”) in HTML, it can be directly applied in CSS (p:first-child). One of the advantages of selector is its ability to respond to alternation of the browser, or when a site is viewed on a smaller or bigger device. For instance, the ::first-line pseudo-element selector allows you to control styles of the first line of the text, and adjusts with the length of the line. If the same thing was done using the span tag, the styles would not reapply according to the length of the first line as shown on the browser.


The Web’s Grain by Frank Chimero

Before I started learning coding last semester, I have always pictured web design as making websites that look sleek, colorful and sophisticated. It was not until I did my first project (that solely used HTML) that I realized websites can be designed the way we think about artist books or even sculptures. I compare web design a lot to laying out magazines, where a margin is present, but the content does not have to necessarily follow a grid or system to look appealing.

As I learned more about web design and moved to CSS and Javascript, I found myself constantly blocked creatively. I focused on the idea of “having interaction” on my page and making it look “legit” instead of thinking about the possibility the web as an art-making medium has.

Although websites only exist on screen, they can be considered as physical pieces of art. Like a book, users have to (most of the time) scroll through a page and sometimes click on things on the page. The level of intimacy with the audience the web provides is not any less than a physical book. In fact, it is a pop-up book that can be customized by everyone.