In this tutorial we'll show you how to design an interactive website like the one shown above. The twist is that we'll be using Webflow, which is software for creating beautiful and responsive websites, without writing HTML and CSS code manually.

The website we'll build is named Bloc Jams. Bloc students build a full-featured version of Bloc Jams in the Frontend Development Course, as well as our Full Stack and Design Career Tracks.

Webflow allows you to build websites with drag and drop visual elements. As you move things around in Webflow, it writes production quality HTML and CSS code. Webflow is a SaaS (software-as-a-service) application and is used in your browser. There's nothing to download.

We're going to build the Bloc Jams home, browse and artist pages in Webflow. We'll include some cool interactions on a search panel, and then publish the site for all the world to see. Take a look at what you'll be building. Are you excited yet?

Why Webflow?

Macaw, Adobe Edge Reflow and Webflow are three of the top contenders for interactive web design tools these days. We chose to explore Webflow for one simple reason: there's no software to download. Edge Reflow and Macaw both require you to download software.

Each tool has its strengths and weaknesses. Smashing Magazine has a great article comparing each of them, listing out the key features they offer.

Sign up

You will have to pay to use Webflow, but fortunately you can try it out for two weeks for free. You don't even need to enter your credit card information, so go ahead and sign up already!

Create a site

The first step is to name the site. Bloc Jams is already taken (our apologies), so you might want to add your name to the front of it, e.g. "Joey Jams". Select the Blank Site template, then click Create Website. You will be wisked off to the site builder application so we can begin our journey into Bloc Jams!