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

A basic style guide for beginners. If this project gets enough appreciation, I'll make a 2.0 Version with a full-on Design System + Layouts + Elements.

What's something you would want to see in an updated version?

Style Guide

Webflow | Style Guide

Demo: Official Webflow Mega Menu Navbar | Layout & Interactions

In this demo, you will find a clonable mockup of the navbar that Webflow uses for demonstrating the functions of the tool. 

My demonstration identifies:

‣ Good Layout principles using Flexbox & Divs.
‣ Controlled class naming for longterm flexibility.
‣ Uses of hover states & hover interactions.

Case Material: https://webflow.com/designer

Webflow Navbar | Mega Menu

Demo: Webflow Navbar

Watch the full tutorial for this project at https://www.youtube.com/watch?v=KM-FGwy02KU

Webflow for Beginners (Lander)

Webflow for Beginners (2021 Tutorial)

I have seen this effect in many websites these days. Here are two simple ways to create a text that changes color automatically and only take 5 minutes to implement. 

Sign up if you want the lesson: https://www.webflowtips.com/b/how-to-create-a-text-that-changes-color

If you have any questions feel free to comment. 

 P.S 🙂  🙌  - Like or follow if this was useful for you.

7 of 50

Webflowtips - Text that changes color animation

How to create a text that changes color?

Styleguide Template für frische Webflow Projekte

Webflow Styleguide Template

Styleguide Template

Creating gradients in buttons in Webflow takes 1 minute. Here are four ways you could style your buttons. I know, it seems too easy, but I thought there might be some people that could find this useful.

Sign up if you want the lesson: https://www.webflowtips.com/b/how-to-create-button-with-gradient

 P.S 🙂  🙌  - Like or follow if this was useful for you.

 5 of 50

Webflowtips - Buttons with gradient

How to create buttons with a gradient?

A nice custom code yet very simple effect that can be used for many sections from showing off images, slider, cards, team introduction.

In embedded code some comments made explaining this


01 Card Expand

Beautiful Expanding Cards/Images with a little custom JS & CSS

Built for Ander Christensen. Look him up. My first project, but I am so excited to learn and grow with Saucy Nugs!

saucynugs

Website Design Concept For A Global Translation Services Provider, XILT.

Xilt

xilt

5 profile card website templates. Making it easy to get your online presence up and running in minutes. Fully responsive and fully customizable.

Profile Card Website Pack

profile-card-website-pack

My website project and logo design for Hawaii Orchids.  Their goals are to have an online presence to build awareness, increase sales, and improve customer experience / workflow automation with functions for subscribing & ordering online.  The loader is my custom design made using Adobe Fresco on iPad Pro.

Discover beginner websites built by the Webflow community

Discover beginner websites built by the Webflow community