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!
.jpg)
