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

Convert Adobe XD Web Design to WordPress page using X-Theme Pro

hey now I’m welcome to another tutorial my name is Raddy and you’re watching my channel RaddyTheBrand in this tutorial I want to show you how to take an existing design which I actually did in the previous tutorial so have a look in the description below if you wanna
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

17 Responsive Web Design Trends You NEED to know in 2017

Hey everybody. Daniel here and we’ve got 17 Responsive Design Trends that’s going to shape your 2017 and well beyond. Designers working on web projects face a ton of challenges this year. They have to make products that work across a variety of devices, are engaging, and appeal to a
Continue Reading
Articles, Blog

Flexbox layouts for beginners – Web design tutorial (using the Old UI)

Flexbox — which we’ll often refer to as “flex”, “flexible box layout”, or “magic” — is an extremely powerful layout tool which gives us precise control over elements in a box. This lesson is an intro to Flexbox, which is why we’ve named it Intro to Flexbox. Instead of going
Continue Reading
Articles, Blog

Responsive Portfolio Grid CSS Website Layout (PART 2)

Hey, Pixels! Welcome back to part 2 of this responsive portfolio website tutorial. In this video, I’ll show you how to code this responsive clean modern one-page portfolio website using the latest techniques in web development. Flexbox and CSS Grid have changed the game for web developers around the world.
Continue Reading
Articles

Overlap on the Web, Graphic Design Made Easy with CSS Grid

Continue Reading
Articles, Blog

Responsive Web Design in Sketch App: Auto Layout & Flexbox Plugin

Hey, I’m Hunter from Skillthrive and in this tutorial you’ll learn the basics of the Auto-Layout plugin in Sketch to create a responsive card layout like this one. Before we get started, make sure you download and install Anima into Sketch. There’s a link in the description that’ll take you
Continue Reading