Webflow Weekly

Issue 1-4

Welcome to the inaugural issue of Webflow Weekly. It is simply the best Webflow centric content that I find each week, however this very first issue is covering the first four weeks of 2019. My desire is to share things in the community that I find interesting. Hopefully you'll find something that interests you and maybe hadn't seen yet. Content is divided into the following sections: Webflow Content, Showcases, Tips Tricks and Tutorials, Resources, and Misc.

Webflow

Here's some content from Webflow's official channels.

Set tax classes per product

Taxes can get complex. Some products are exempt from sales tax, while others have lower sales tax — it all depends on the type of product you’re selling.

Breaking the illusion of completeness

Animated transitions add interest, break up the monotony of a page, and give a sense of energy. They also promote scrolling by hitting that reward center of our brains. Animated transitions distinguish one block of content from the next, pushing us to move forward in a design.

Display sale prices by setting a compare-at price

Running sales, promotions, and discounts is a huge part of running an online store. Today we’re releasing our first feature in this realm: the “compare-at price” field.

How to start a Webflow Meetup

Now that you’ve created your Meetup community, you’re ready to create and plan an event! Coworking spaces are a great choice — you get a venue sponsorship and they get promoted through exposure and social-media love.

From Figma to Webflow: turning your static designs into interactive websites

When you’re ready to go beyond prototyping in Figma, Webflow’s ready to help you bring your designs to life — without coding them. Figma has gone from new player to design industry all star in no time. But like most design tools, it stops short at the prototyping phase.

Why we’re using a 4-point grid in Webflow

Over the last few quarters, the design and engineering teams at Webflow have been gradually adopting a more rigid layout grid based on a simple increment of 4. This has made our cross-team collaboration faster, simpler, and less error-prone.

We’re making some changes to the style panel

If you opened the Designer today, you might have noticed a little toggle at the top of the all-important style panel, along with a message that reads:‍ The style panel has a new look and some new features. Give it a try before it goes live for everyone.

Meet the new style panel

If you opened the Designer today, you might have noticed a little toggle at the top of the all-important style panel, along with a message that reads: The style panel has a new look and some new features. Give it a try before it goes live for everyone.

Position: sticky

Position: sticky is not a new CSS property, but it’s new to Webflow — and a part of the new style panel we rolled out this morning. This property allows you to pin elements at a specific position as you scroll down the page.

Intro to web layout — Webflow layout tutorial

Duration - 0:3:51

Style panel overview — Webflow UI tutorial

Duration - 0:3:15

Creating a sticky navbar — Webflow tutorial

Duration - 0:1:6

Creating a sticky sidebar — Webflow tutorial

Duration - 0:1:30

Cleaned up, more legible navigator

Because one UI redesign in a week wasn’t enough, we’ve also made some small updates to the navigator. Why make the change? Well, the navigator is a great way to understand the structure of your page and see all elements in a single, organized place.

Updating your credit card — Webflow tutorial

Duration - 0:1:24

Transferring a project out of your individual dashboard — Webflow tutorial

Duration - 0:1:34

Transferring a project with hosting — Webflow tutorial

Duration - 0:0:56

Minifying HTML, CSS, and Javascript — Webflow tutorial

Duration - 0:1:26

Setting a default domain — Webflow tutorial

Duration - 0:1:41

The real cost of WordPress

In general, we don’t love directly calling out what you might call a “competitor.” But all too often, Webflow users are forced to answer the question: why this newfangled platform “Webflow” over the so-called “industry standard”?

Transferring a project out of your team dashboard — Webflow tutorial

Duration - 0:1:5

How to validate startup concepts with Webflow

New products are useless if they don’t fill a need. With Webflow, you can quickly prototype and test your idea without a massive investment. 42% of startups fail because they don’t solve a big enough market problem.

Showcases

Here's a sample of great sites built in Webflow. #MadeInWebflow

Okalpha - Webflow

by okalpha

Draftbit - Webflow

by Brian

the-punctuation-guide - Webflow

by LILIT

Octaive Homepage (in-progress) - Webflow

by Dongwei

xakli - Webflow

by myles

Luda Galchenko Portfolio - Webflow

by Vladimir

correctingpeople - Webflow

by iclejarreta

the-attic-lb - Webflow

by Alexander

Turbolaser - Webflow

by Trevor

Cmd P by 9 Lives Design - Webflow

by dAvE

Kevin Barrett - Personal Site - Webflow

by Kevin

sushiandrobots - Webflow

by

Sofia Game Jam 2019 - Webflow

by alex

Tips, Tricks, & Tutorials

Take some time to learn something new.

Top Webflow Shortcuts To Speed Up Your Design

Duration - 0:5:34

Creating a megamenu using CSS Grid in Webflow - Tutorial

Duration - 1:25:4

What In Webflow 018 - 💯 Micron JS Micro-interactions in Webflow

Duration - 0:1:22

Webflow Tutorial: Ten Tips for Creating a Responsive Website

Duration - 0:29:10

Creating a Nintendo Switch using Webflow - Illustration to Web - Part 1

Duration - 1:57:52

Building responsive footers with CSS grid

Duration - 1:5:36

Designing & building my blog! | Episode 4 of Designing a Website

Duration - 0:17:49

Here's how to change your footer date automatically

by magicmark

Seamless pagination with "pjax"

by forresto

CMS Slider : A solution using pagination

by zbrah

Special Section - Webflow

by Piter

Daily Interaction #21 | Flexbox Category Panel Reveal on Hover | WebDev For You | Made in Webflow

Duration - 0:37:4

Daily Interaction #22 | Menu Trigger Animation on Hover | WebDev For You | Made in Webflow

Duration - 0:27:53

Daily Interaction #23 | Scroll to Top Button | WebDev For You | Made in Webflow

Duration - 0:19:7

Daily Interaction #24 | Line Menu Animation on Hover | WebDev For You | Made in Webflow

Duration - 0:21:45

Daily Interaction #25 | Cursor Follow on Mouse Move | WebDev For You | Made in Webflow

Duration - 0:16:39

Daily Interaction #26 with Music | Menu Item Animation on Hover | WebDev For You | Made in Webflow

Duration - 0:11:43

Daily Interaction #26 | Menu Item Animation on Hover | WebDev For You | Made in Webflow

Duration - 0:24:16

Daily Interaction #27 | Fullscreen Menu with Stagger Reveal | WebDev For You | Made in Webflow

Duration - 0:33:53

Daily Interaction #28 with Music | Button Press Effect on Hover | WebDev For You | Made in Webflow

Duration - 0:5:32

Daily Interaction #28 | Button Press Effect on Hover | WebDev For You | Made in Webflow

Duration - 0:10:3

Daily Interaction #30 with Music | Image Zoom on Hover | WebDev For You

Duration - 0:6:18

Daily Interaction #30 | Image Zoom on Hover | WebDev For You | Made in Webflow

Duration - 0:14:43

Daily Interaction #31 with Music | 180° Flip Effect on Hover | WebDev For You | Made in Webflow

Duration - 0:11:35

Daily Interaction #31 | 180° Flip Effect on Hover | WebDev For You | Made in Webflow

Duration - 0:22:4

Daily Interaction #32 with Music | Menu Item Animation on Hover | WebDev For You | Made in Webflow

Duration - 0:11:24

Daily Interaction #33 with Music | Button Animation on Hover | WebDev For You | Made in Webflow

Duration - 0:12:4

Daily Interaction #34 w/ Music | Menu Trigger Animation on Click | WebDev For You | Made in Webflow

Duration - 0:10:46

Resources

Here are a collection of great resources that you can use on your next project.

The Digital Bake - Webflow

by Aaron

Check out the new components that were recently added.

Flowbase | Webflow Assets & Tutorials - Webflow

by Oakland

New database of Webflow assets and tutorials. An invaluable resource.

nicelydone-ui-kit - Webflow

by new

I like this design system a lot. Definitely one to clone.

Videographer - One Page HTML5 Responsive Website Template

by WebDev For You

Figaro - Salon HTML5 Responsive Website Template

by Udesly

Misc

Random things get put here because I didn't know where else to put them.

Should designers use templates for their portfolios? - The Overflow live podcast episode 2

Duration - 1:16:30

Don't miss Nelson and Riley chatting about life as a designer and a Webflower in episode 2 of the Overflow podcast.

Thanks for making it to the end. I hope these sources give you inspiration or head start on your next Webflow project. Did I miss something? Let me know about it on Twitter and you might see it in the next Webflow Weekly issue.

Until next week, happy designing!

MPM HD
7 items
405K in folder
506K available
Read Me
Webflow
Favorites
My Videos
My Tutorials
My Articles
Favorites
7 items
405K in folder
506K available
Read Me

Matthew P Munger

Life is a journey. Just keep moving.

Originally from Oklahoma City but have lived in the UK, Southern Africa, and am currently in Costa Rica. My family and I enjoy traveling and experiencing other cultures. The world and its people are amazing!

What I do

My background since 2002 is in media design with experience in videography, graphic design, and web design. Then I transitioned to a visual developer building custom designs using Webflow. Now I work at Webflow as a QA Analyst.

When I'm not building websites, I'm talking about it here, on Youtube, on Twitter, and on the Webflow forum.

This Site

Oh and you might have noticed that I'm a Macintosh fan. Been a user since 1993. My career in creative media wouldn't have been possible without Macs.

Feel free to browse around my virtual computer. You never know what you might find.

Note: I do use affiliate links on this site. It allows me, as a freelancer, to earn a small amount if you use and like something I recommend.

Webflow
7 items
2013K in folder
unlimited
My Profile
Signup
Forum
Webflow Weekly
My Videos
My Tutorials
My Articles
Webflow Weekly
Trash
6 items
Empty
Dreamweaver
Shopify
Squarespace
Weebly
Wordpress
Wix
Trash
0 items
Empty
New Project Form

Project Submission

Thanks for you interest in working together on a project built in Webflow. In order to best understand your new website's needs, please fill out the information below to the best of your ability.

Check any of the options below that apply to your needs. If you don't understand what they mean, don't worry we can figure it out later.

If you've gotten this far, thank you. Go ahead and submit your info and I'll get back with you as possible with and informed response.

Thank you! Your project submission has been received!
Oops! Something went wrong while submitting the form. Please check all of the fields and try again.
Contact Form

Contact Form

Thank you! Your submission has been received.
Oops! Something went wrong while submitting the form. Please check all of the fields and try again.
MPM HD
Read Me
Clients
Webflow
Trash
Trash

Maybe it's not a good idea to shut my website down without a hardware reset button. Proceed?

Just kidding. Nothing was actually shutdown. It wouldn't have been a good idea. Do it again?

Permission denied. Please reconsider your actions.