RE-LAUNCH: Webflow Codes & Tutorials re-designed

Community resources Webflow Tips
1

Tjena!

For the last 1,5 month I’ve been re-designing my Webflow Code & Tutorials website. The library had grown so much it needed to be sorted and organized in a much better way.

Now the site has more of an app-feel to it with a user interface that is easy to navigate.
In short, this is the new stuff:

  • App-like UI
  • Refined step-by-step instructions to make it easier to understand.
  • Demo’s on all constructed design stuff
  • Alphabetically ordered
  • Sorted into categories: Click, Imagery, Body and Elements and Tips
  • Updated designs like:
    • Accordion with automatic closing (thanks @jorn!)
    • Simpler (less design steps) dropdown show on hover
    • Nav sticks on top on scroll
    • …and more…
  • Optimized for iPad, so you easily get an overview of the instructions for the various design elements while your designing. Get rid of that switching of browser/browser tabs on your desktop computer!

2000×1105 91.9 KB

New App-like UI and iPad optimization gives you the opportunity to have the instructions on your iPad and the demo (to se how it works practically) on your computer.

Finally, I would like to give a big thanks and thumbs up to all of you on the forum that makes this site something really useful. Keep it up! Again…this is not me taking any credit at all for all of the great design solutions that you guys on the forum have come up with! I’m just compiling, collecting and sharing it.

Enjoy.

www: http://webflowcodestutorials.webflow.io/

PS. You tell me if I screwed something up huh…? :smile:

6 Likes
2

Great! Was patiently awaiting for this. :smile:

I spent too much time trying to click on the ‘field’ on your landing page.

Edit:
Pop-up – Page loader // Demo is not working (tried in both Chrome and Safari)

3

Looking great! I don’t think it’s supposed to render like this on an iPhone 6:

750×1334 120 KB

Stoked to share this with many people! Amazing library :smile: Thank you for building this :smile:

4

That is pretty slick @StevenP,

Somethings I noticed.

  1. When you click on Imagery logo it does not go back to the home page.

  2. I didn’t see a search option (correct me if I am wrong). Maybe another great tutorial with Swiftype or google search bar? :smile:

  3. I defo recommend you to have a homepage so navigation is easy!

  4. It is a very nice ideia! I have been on webflow since 2013 and I have a lot of bookmarks, that’s a straightforward ideia to make em as tutorials!

5

Hi guys!

First of all, thank you for pointing things out!

@Waldo_Broodryk

It is! :wink: No, actually I didn’t put any interest into making the site designed for mobile intitally… Now I’ve made it usable, but it’s not pretty. Maybe I polish it up mobilewise in the future…
At the moment I focused on the iPad.

@Daniel_Sun
Thanks for pointing it out. Fixed the link issue!
I really couldn’t get the Swiftype integration to work out, so I dumped it. If I get it to work, I’ll put a tutorial up for sure!

2 Likes
6

I’d just like to mention a few people who have made this site possible: Big thanks to @vincent, @DFink, @vlogic, @jorn, @cyberdave, @thewonglv, @bartekkustra, @PixelGeek

Again, big thanks for great solutions! :smile:

5 Likes
7

Thank for the shoutout Steven that’s very nice of you.

GREAT relaunch! More examples makes it a ton better. I have to take time to break it down into links I can give to users in need of solutions :smile:

2 Likes
8

Kinda hard to justify making it mobile responsive haha. We all know that we’d reference it on our personal computers or iPads. I think it’s awesome @StevenP :slight_smile: thanks again for making it man!!!

Waldo :smile:

10

All CSS must be wrapped in tags. Same reason as above.

This is at the beginning. I think it would be wise to say that all CSS code should go to <head> custom code. Also the field is not working which is bugging me as hell! :D

Thanks for pinning me here :) I’m happy my work is valued.

1 Like