• Programs
  • About
  • Contact
Become a Web Developer
Become a Designer
Header image

Learn Webflow

Build a website without code

A free tutorial that teaches you how to build a music web app using Webflow.

A free tutorial. Get access here.

Blocjams 1

Who Is This For?

If you're a beginner getting started with frontend web development, or an experienced designer who wants to quickly prototype something new, Webflow can help. Webflow offers a visual editor which lets you drag-and-drop, customize responsive layouts, and publish with ease.

Chapters

Getting Started
with Webflow


This tutorial will introduce you to the basics of Webflow and how to use its drag-and-drop site builder application to design and develop a music web app called BlocJams. Learn to customize responsive layouts for web, iPhone, iPad, and Android, and tailor CSS styles for each device. The differentiating factor with Webflow is not just the visual editor part, but that once you are done, you can publish your site directly instead of having to export the code.

1
Superfly Search
Create a cool interactive search & deploy Bloc Jams to share!
2
Just Push Play
With music, you need a way to turn it on and up. Build a play bar complete with controls.
3
Album Covers and Interactions
What's a music app without great album cover art? Add images and interactions that will wow your friends.
4
Browse Controls
Add a way to navigate to different views with simple icons and effects.
5
Browsing Music
Set up a way to find music in a Spotify-like interface.
1
Promoting Bloc Jams
It's time to showcase what Bloc Jams has to offer by giving people a taste of what you're building.
2
Heroic Home Page & Call-to-Action
Build an eye-catching home page to showcase Bloc Jams.
3
Designing the Home Page and Top Navigation Bar
Get going with Webflow by creating a simple home page layout.
4
Getting to Know the Interface
Learn the lay of the land and how you can go from zero to deploy quickly with Webflow.
5
Designing an App with Webflow
Why code when you don't have to! Webflow offers a site builder tool that's easy — and fun — to use.
Blocjams animated

Here's What You'll Build

BlocJams is a beautifully designed Spotify-like web music player. You'll design a heroic home page followed by a browse music page complete with awesome album cover art, some interactions, and a fly-out search panel that's bound to wow your friends.

Get access to BlocJams with Webflow.
It's free!

About the author

Mentors joey

Joey Kirk

Joey is the UX/UI Design Program Director at Bloc. Joey has led and helped develop UX teams for several companies. He has also led design for a number of startups as well as helping form the UX team for one of the largest domestic media companies. He has 10 years of experience designing over 250 products and is deeply passionate about sharing his craft.