Articles, Blog

Centering elements with flexbox – Web design tutorial (using the Old UI)

Until recently, vertically centering a child element inside a parent element required absolute positioning, transforming along the y-axis, and a graduate degree in materials engineering. With Flexbox, centering is straightforward and highly effective. We’ll do this with a single element, then we’ll do it again with multiple elements, then we’ll
Continue Reading
Articles, Blog

Equal-height layouts with flexbox – Web design tutorial (using the Old UI)

Here are three div blocks, each containing content. Each div block has the same class applied: Pricing Block. Let’s say we want to sit them side-by-side. We can actually use our container element here. Let’s drag that in. And we’ll create a class — let’s call it Flex Container (you
Continue Reading
Articles, Blog

Text links – Web design tutorial

Text Links are standalone links. And they’re used when the only thing you need that text element for is a link. For example, let’s say we want to add a new line under this paragraph. If we do a paragraph element — if we drop in a paragraph, now we
Continue Reading
Articles, Blog

Text blocks – Web design tutorial

Text Blocks can be styled just like a paragraph, but they’re meant to be used any time you need text on the page that isn’t supposed to be treated like a heading, or a paragraph, or a link. And a good example of this would be a copyright notice. In
Continue Reading
Articles, Blog

Display settings (block, inline-block, inline, and flex) – Web design tutorial (using the Old UI)

Every element comes with a default Display Setting. It helps to have a good understanding of how each Display Setting affects an element, as well as how it affects the content around that element. In this video lesson, we’ll touch on Block, Inline Block, Inline, Flex, and None. Each Block
Continue Reading
Articles, Blog

Styling a web form – Web design tutorial

We’re going to cover styling for three different aspects of forms: typography, field focus, and columns. If we’re using Field Labels, we can add a class to each label which will let us go in and make styling changes. Of course, those styling changes will apply to each field label
Continue Reading
Articles, Blog

Rich text – Web design tutorial

Rich Text is a one-stop shop for a ton of content: headings, paragraphs, links, lists, blockquotes, images, or videos. Often, we want super precise control over each and every element and class. But Rich Text Elements (or RTEs as they’re affectionately abbreviated) can chunk a lot of this into just
Continue Reading
Articles, Blog

Hamburger menu in the responsive navigation bar – Web design tutorial

The menu button is an excellent alternative to horizontally cramming multiple menu links. And it goes by many names. As a visual abstraction, the common menu button can remind us of a hamburger. Or gluten-free pancakes. The menu button is built right into the default Navbar element. And it can
Continue Reading