Bloc: Design & Build a Website without Code

No Coding Required! Learn how to create a responsive prototype for a music application using Webflow.
4.5 (31 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.
6,823 students enrolled
Instructed by Joey Kirk Design / Web Design
Start Learning Now
  • Lectures 33
  • Length 1.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2014 English

Course Description

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

What are the requirements?

  • Web Browser
  • Computer

What am I going to get from this course?

  • Build a website without code
  • Learn the basics of Webflow
  • Create an interactive prototype

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction to Webflow

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.

Getting to Know the Interface
Section 2: Home Page Design
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
Section 3: Browse Music Page Design
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
Section 4: Search Panel
What You'll Be Building
Adding in the Search Field
Creating Artist and Tracks
Making Your Search Panel Interactive
Linking Your Pages

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Joey Kirk, 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."

Ready to start learning?
Start Learning Now