Discover the best nocode websites created by professional designers. Get inspired and start planning your perfect nocode web design today!

Update to my personal site. Took heavy inspiration from classic macOS. There are some fun experiences for visitors to find. 

Everything is done natively in Webflow using interactions including the color palette changes. I'm using CMS collections to drive the projects, tutorials, videos, and Webflow Weekly contents.

The whole site is a single static page and then the collection pages.

The UI is the same no matter where you are thanks to symbols which makes edits much easier.

Class naming and combo classes were huge for making the interface and interaction work smoothly.

EDIT 2020-11-10: this can now be cloned

mattOS

SMALL STEP FOR CIVILIZATION, GIANT STEP FOR NOCODE

Nocode tools are often viewed as primitive website builders. So I rebuilt Civilization VI and published the largest Webflow project ever featuring 12,400 elements, 1,800 styles, 1,200 assets, and 400 interactions.

This prototype is a loving tribute to Sid Meier and one of my favorite games of all time. I've integrated all 46 leaders along with their soundtracks and nearly every feature in the game.

The project stands at a whooping 124GB! The next time someone tries to dismiss nocode or asks you what's possible, just ping them this link :)

Civilization.webflow.io

Masterclass - https://youtu.be/Ma7Cl5_eSJc


********************************************************************


I develop advanced software prototypes and MVPs for companies. If you would like to bring your ideas to life within hours, hit me up :)

I'm on a mission to unlock and share the full potential of nocode tools.

Follow my journey 👉 twitter.com/sarkisbuniatyan

Civilization VI

Rebuild → Civilization VI

Congratulations to Joshua Jacobs for winning the first annual CloneComp challenge. 

Joshua - https://webflow.com/joshwork

Explore the site to learn more about the competition. 

Hosted by: Sarasota Webflow Meetup
Produced by: nocode.video
Site built by: Finsweet

Event sponsored by:

Webflow
Makerpad
Memberstack
nocode.video
Flowbase
Finsweet
Jetboost
CodeCrumbs
Flowmingo

Media partners:

VisualDev.FM 
Nocode.Report

Clone Comp 2020

CloneComp

A cloneable Free Webflow no-code client dashboard that automatically pulls data directly from 3 different Google Sheets.  

- Control data content directly from Google Sheets
- Includes pre-built Google Sheet that automatically updates data every 5 minutes to pull into Webflow. 
- Used Google Sheets, High Charts, SheetsU API

Please let me know if you need any help.

https://orangecattle.com/contact

Cloneable -- Google Sheets to Webflow -- Fully Automated

Webflow + Google Sheets | Auto Updates Website Analytics directly from Google Sheets! No Code!

I built a modified YouTube clone and use it to sort and organize top no-code videos from around the web. I update it regularly with new videos and am working on automations to optimize my process.

Memberstack is fully integrated but signups are closed as we are working on some secret stuff to enhance back end functionality. Stay tuned for updates on how you can get involved. 

Clone it, watch it all, delete it all, share it all with a friend, or find a cool way to make it your own. All I ask is that you pay it forward as you learn more about the platform and tools around it.  

Enjoy!

Last update = 01/20/2021

Nocode.Video

NoCode.Video (YouTube Clone)

Learnflow is a free template to learn how to no-code in Webflow.

You'll learn how to..
1. Add a comment section with Remarkbox
2. Integrate a chat box with Crisp (our sponsor)
3. Translate your site instantly with Weglot (our sponsor)
4. Integrate a video chat with Daily.co
5. Sell digital assets easily with Gumroad
6. Track events and conversion rate with Splitbee
7. Add 3D scenes and elements with Spline 
8. Add a radio with RadioKing
9. Create a community space with Memberstack
and +10 other exercises to integrate powerful features to your website. 

For more informations, visit https://www.supercreative.design/download/learnflow

Clone the project to get started.

If you have any questions, you can either leave a comment below or join the Discord server! https://discord.gg/jN9wvyZT

For more informations, visit https://www.supercreative.design/download/learnflow

Clone the project to get started.

Learnflow

Creating a custom content slider with tabs which changes background images as well as content. It uses CMS.

Tabs-slider

tabs-slider

𝗦𝗮𝘆 𝗴𝗼𝗼𝗱𝗯𝘆𝗲 𝘁𝗼 𝘄𝗮𝘁𝗰𝗵𝗶𝗻𝗴 𝘁𝘂𝘁𝗼𝗿𝗶𝗮𝗹𝘀 𝗮𝗻𝗱 𝗳𝗼𝗹𝗹𝗼𝘄𝗶𝗻𝗴 𝘁𝗲𝗱𝗶𝗼𝘂𝘀 𝘄𝗮𝗹𝗸𝘁𝗵𝗿𝗼𝘂𝗴𝗵𝘀...

Restep repeats the clicks and key strokes of talented makers on your device. Learn from the best click-by-click and take your no-code game to the next level through our chrome extension.

Take a sneak peek at our upcoming release. Follow us on twitter.com/restepio for the latest and visit restep.io to join our beta.

Restep

Restep v2.0 - Prototype

Webflow

Webflow’s annual No-Code Conf is back! Join us November 17–18, 2021 to reunite with the makers, creators, and visionaries who are shaping the future of the web.

No-Code Conf 2021

My brand new portfolio went live! Take a look on rickbossenbroek.nl and let me know what you think.

Rick Bossenbroek

designer & no-code developer

No matter how isolated we feel because of the pandemic, we'll never know how it feels to be 300 million miles from anyone else.

I created this landing page in Webflow, to celebrate the astonishing feat of landing a rover on the Mars surface, and setting the foundation for future expeditions.

I had lots of fun creating this, so feel free to like, comment and clone this project. 🤘

Perseverance Rover

Perseverance Mars Rover

Refokus

How to add social share buttons in Webflow?

Use Refokus Social Share to add social share buttons for Twitter, Linkedin, and Facebook in Webflow.

Documentation: https://www.webflow-tools.refokus.io/tools/social-share-button

Refokus Social share

Social Share (by Refokus)

1. Create a SECTION called foreground, change display to FLEX, center align it, and set its position to ABSOLUTE with a height of 100VH. Give it a COVER → FIXED background. Upload a blurred version of your photo.

2. Drop a DIV called MASK into the SECTION and customize it however you like. Set its position to ABSOLUTE with a Z INDEX of 1. For the zoom effect, simply add a CLICK interaction on the MASK.

3. Drop another DIV within MASK called PHOTO, set its width 100VW and height 100VH. Change its position to ABSOLUTE, give it a COVER → FIXED background, and upload the original image.

4. Add a PAGE TRIGGER interaction, select MOUSE MOVE IN VIEWPORT, and create an animation. Add MOVE interactions in the MOUSE X and Y panels.

MASK - Set X’s position to -50VW at 0% and 50VW at 100%. Set Y’s position to -50VH at 0% and 50VH at 100%.

PHOTO - Set X’s position to 50VW at 0% and -50VW at 100%. Set Y’s position to 50VH at 0% and -50VH at 100%.

That's all folks :)

Photo Masking

Component → Native Photomasking

This is Kate Zeitler personal portfolio as a graphic designer. I design and develop the website.

Zeitler Design

kate-portfolio-5096e5-16e-cf6950fab10cb

Before Webflow, we had to manually create these animations. Now, you can just select an easing animation option. Isn't that crazy?

Bouncing Switches

Element → Bouncing Switches

Original template: https://webflow.com/website/Robotos-Landing-Page

gm from Buildship 🌞

This free website template for an NFT minting website features a no-code mint button widget and a "Connect Metamask" button from https://buildship.xyz.

To use this widget you need an NFT smart contract. You can use your own or create one without code for free at https://app.buildship.xyz.

Instructions on setting up the minting widget:
https://learn.buildship.xyz/how-to-guides/using-webflow-widget

Supported networks:
- Ethereum
- Polygon
- Binance Smart Chain
- all other EVM-based networks

Supported wallets:
- Metamask
- Rainbow
- Coinbase (via in-app browser)
- GnosisSafe
- all wallets supporting WalletConnect

Robots NFT minting website

Robotos NFT minting website

No code/low code MemberStack ready dashboard with login, signup, profile and dashboard pages with chart.js.

https://orangecattle.com| Custom Dashboards
Clone it: http://bit.ly/2wGGFxU

MemberStack Ready Dashboard

No Code/Low Code MemberStack Ready Dashboard

Free Webflow Landing Page. 

A new product we're launching: https://orangecattle.com/orangelabel

We use Webflow and Memberstack!

Discover .css-10iahqc{text-transform:capitalize;}nocode websites built by the Webflow community

Discover nocode websites built by the Webflow community