Bloc: Design & Build a Website without Code
4.7 (58 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
7,903 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Bloc: Design & Build a Website without Code to your Wishlist.

Add to Wishlist

Bloc: Design & Build a Website without Code

No Coding Required! Learn how to create a responsive prototype for a music application using Webflow.
4.7 (58 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
7,903 students enrolled
Created by Joey Kirk
Last updated 8/2014
Price: Free
  • 1.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build a website without code
  • Learn the basics of Webflow
  • Create an interactive prototype
View Curriculum
  • Web Browser
  • Computer

No Coding Required!

Yes, you read that right. Have you ever wanted to develop a website, but just haven't had the time to learn HTML, CSS and Javascript? Are you a web designer who needs to quickly build prototypes to share with clients and colleagues? Or are you just wanting to learn something really cool to share with your friends?

There are many tools out there that allow you to do this, like Macaw, Adobe Edge Reflow and Webflow. However, only one provides you a way to do this without downloading software.

In this course from Bloc, we'll take you through how to use Webflow to build a simple prototype website — in this case, a music web player called Bloc Jams — that features a home page, a browse page with cool album cover art, and some pretty spectacular interactions like a slide-out search panel. You'll build this site throughout the course, but you'll be learning how to use Webflow for future projects to help you success in your web design and development career!

Things you'll need to remember and do in this course:

  • Forget HTML and CSS
  • No need to understand Javascript
  • Photoshop? Nah.
  • Responsive design is easier than you think.
  • Publish and deploy with the click of a button
  • Prototyping doesn't require tons of time and heartache
  • Build a website from scratch — without code
Who is the target audience?
  • Beginners who don't know code
  • Designers who want to quickly prototype websites
  • Developers who want to design awesome websites
  • Anyone willing to learn
Students Who Viewed This Course Also Viewed
Curriculum For This Course
33 Lectures
Introduction to Webflow
2 Lectures 06:47

To get started, let's review what you will be building. Then you will need to sign up to access Webflow through a web browser. Don't forget to download the assets that you'll be using throughout this course.

Designing an app with Webflow

Getting to Know the Interface
Home Page Design
9 Lectures 19:28
What You'll Be Building

Editing the Background Color

Adding the Top Navigation

Integrating a Hero Image

Customizing the Headers and Call-to-Action

Creating a Hover State

Refining the Hero

Adding a Promo section

Finishing the Footer
Browse Music Page Design
17 Lectures 46:23
What You'll Be Building

Setting up the Browse Page

Adding a Headline

Creating Tabs

Laying out the album section

Adding the Bloc Jams logo

Finishing the Left Navigation

Creating a User Avatar

Making the Navigation Interactive

Uploading Album Cover Art

Creating the Album Details Overlay

Adding Interactive Hover Effects

Making a Playful Play Button

Duplicating Your Album

Setting up the Play Bar

Adding the Controls

Designing the Song Info
Search Panel
5 Lectures 17:12
What You'll Be Building

Adding in the Search Field

Creating Artist and Tracks

Making Your Search Panel Interactive

Linking Your Pages
About the Instructor
Joey Kirk
4.7 Average rating
58 Reviews
7,903 Students
1 Course
Co-founder of Made By Munsters


As a former print designer, Joey Kirk made the leap to digital design nearly a decade ago looking to expand his skills and knowledge. He has gone on to lead and help develop user experience teams for several companies, including the Tribune Company, one of the largest media companies in the United States.

Since then he's worked alongside a number of startups and large corporations in Chicago, Los Angeles, San Francisco, New York and other locations conducting user research, producing user flows and wireframes, creating high-class visual design mockups and seeing projects through to implementation on the programming side. At night, he runs his own design and development shop called Made by Munsters, where he works on a number of personal projects and deals with a few clients.

He's also the Design Director at Bloc, an online bootcamp where we offer one-on-one mentorship for people wanting to learn how to develop for the web, create mobile applications or become a designer. He is in charge of writing and maintaining all of the curriculum for the UX program, hiring amazing mentors and creating awesome tutorials and short-courses like this one.

Joey loves teaching and sharing his passion for his craft. He's worked with many students and you can see what they say about working with him, below.

Joey is the father of two young children, Henry and Emma, and resides just south of Indianapolis, Indiana.


"Not only did Joey bring skill and depth of experience to the relationship, but also tools and advice for getting to the solutions you need alone."

"He made things easy for me."

"When I’m struggling with something I can bounce back ideas with Joey and his suggestions always seem to be the missing piece."