Articles, Blog

Designing for larger displays in Webflow — Web design tutorial

Until today, testing your design on a 27-inch iMac required a 27-inch iMac. Finding a large display for testing can mean a journey through the elements to the Apple Store, that is if you don’t have an iMac right in front of you. What’s worse is forgetting to publish before
Continue Reading
Articles

Div blocks – Web design tutorial

To a certain extent, a div block can be whatever you want it to be. But the most common use for a div block is as a way to group other elements together. So if we go to this section, we can see that the content (this heading, this paragraph,
Continue Reading
Articles, Blog

Using and styling Images – Web design tutorial

In this video lesson, we’re going to cover the image element. Unlike setting the background image of another element like a section or a div block, an image element is its own element; an image we’ve dropped into the project. And of course we can move it anywhere we want
Continue Reading
Articles, Blog

Site build: Homepage footer — The Freelancer’s Journey (Part 21 of 43)

We’re moving fairly quickly through the build process and we’ll come back to clean up the home page in just a little bit. And the reason we’re not stopping and making everything pixel perfect right now is that we’re optimizing for speed. Remember? We’re tracking our efficiency and taking note
Continue Reading
Articles, Blog

Site build: Homepage navigation — The Freelancer’s Journey (Part 19 of 43)

Hero section done. We’ll revisit a lot of the smaller elements like the buttons some of the sizing spacing we’ll revisit a lot of this as we keep building for now, we’ll work on getting us from this point hero section only to adding our site navigation bar a nav
Continue Reading
Articles, Blog

Image file types (JPG, PNG, SVG, GIF) – Web design tutorial

Images and other graphics can often make or break a design. And we’ll start here with file types. And we’re going to focus on bitmap, GIF, PNG, JPEG, and SVG. Bitmap: Don’t use this on the web. GIF (or “JIF” depending on what part of the internet you’re from): It’s
Continue Reading
Articles, Blog

Advanced button styling – Web design tutorial

For Advanced Button Styling, we’re going to cover five different aspects: Button Alignment, Transparent Backgrounds, Hover Controls, Button Transitions, and Box Shadows. We’ll start with Alignment. And as we know, when it comes to buttons that are pressed up against each other, adding margin to both sides creates breathing room.
Continue Reading
Articles, Blog

Introduction to web design principles — The Freelancer’s Journey (Part 11 of 43)

Any time you hear someone say great design skills are just something you’re born with, stop listening at once. Fortunately, people who say that don’t comprise a particularly large population, and that’s a good thing because history is plagued with this kind of exclusivity. Some people think there are simply
Continue Reading
Articles

Embed a Google Map – Web design tutorial

The Map element gives gives us control over an embeddable map we can drop anywhere in a project. When you’re first setting up a project, you’ll need to add your Google Maps API key. So we’re going to break this into two sections: (1) we’ll cover integrating the Google Maps
Continue Reading
Articles, Blog

Element hierarchy, nesting, and style cascading – Web design tutorial

Hierarchy is one of those funny words which came from the Germans. Literally translated from 15th-century text, it means: “website levels.” In our Webflow projects, we’ll talk about hierarchy in three ways: 1. How objects nest inside of one another and become parents, children, siblings. 2. How text styling passes
Continue Reading