How nth-child and nth-of-type work

The nth-child() and nth-of-type() selectors are “structural” pseudo-classes, which are classes that allow us to select elements based on information within the document tree that cannot typically be represented by other simple selectors. In the case of nth-child() and nth-of-type(), the extra information is the element’s position in the document tree in relation to its… continue reading

Reduce Content Shifting On Page Load

In this article, we will share techniques to minimize this content shifting. Every time the browser has to recalculate the positions and geometries of elements in the document, a reflow happens. This happens when new DOM elements are added to the page, images load or dimensions of elements change.

A few HTML tips for beginners

In this article I’ll share some tips and advice about HTML code. Some of this guidance will be best suited for beginners – how to properly build paragraphs, use headings, or improve forms, but we will also discuss SVG sprites for icons, a somewhat more advanced topic. Text Paragraphs Most of our writing is structured… continue reading

Guide to Color on the Web

There are a lot of ways to work with color on the web. I think it’s helpful to understand the mechanics behind what you’re using, and color is no exception. Let’s delve into some of the technical details of color on the web.

Drop Caps by CSS3 and cross-browser ways

Drop Caps Cross-browser way (extra markup) Just wrap the first character of the paragraph in a span, then target the span with CSS and style away. <p> <span class=”firstcharacter”>L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat… continue reading