Articles

Styling a responsive navigation bar – Web design tutorial

The Navbar element is very flexible when it comes to styling, and we’re going to focus on five of the biggest areas that give us that control: size, positioning, typography, backgrounds, and transitions. Let’s start with size. Our Navbar’s height is being determined by the content inside. That means if
Continue Reading
Articles, Blog

Responsive web design for beginners – Webflow tutorial (using the Old UI)

When you pull out a mobile phone and load up content on the web, chances are, you’ll run into one of three different experiences: (1) you get the desktop version of a website, usually scrunched down so you have to zoom in and pan around, (2) you see a separate
Continue Reading
Articles

Site build: Homepage responsiveness — The Freelancer’s Journey (Part 22 of 43)

This is the fun part. We get to take these main elements this layout we created and we get to tweak. This is where not only CSS grid but breakpoints themselves really shine because we’re going to test and adapt our layout not only on desktop but on tablet mobile
Continue Reading
Articles, Blog

Site build: Homepage testimonials — The Freelancer’s Journey (Part 20 of 43)

We’ll start by saying this part of the site build might be our favorite because it’s the first time we get to use the CMS to drive dynamic content. Now some of those things sounds like more industry. Jargon CMS dynamic content, the, They are but that doesn’t take anything
Continue Reading
Articles

Site build: Homepage grid-based hero section — The Freelancer’s Journey (Part 18 of 43)

Time travel is one of those things that varies from franchise to franchise. Everyone has different rules, Star Trek, Avengers, Back to the Future. This is something to keep in mind as we build out our site for Hayes Valley and it applies here because we’re going to put up
Continue Reading
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