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 (28 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,654 students enrolled
Instructed by Joey Kirk Design / Web Design
Free
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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

What 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.

Curriculum

Section 1: Introduction to Webflow
Article

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
05:10
Section 2: Home Page Design
What You'll Be Building
00:19
Editing the Background Color
00:36
Adding the Top Navigation
02:39
Integrating a Hero Image
02:56
Customizing the Headers and Call-to-Action
05:22
Creating a Hover State
01:01
Refining the Hero
01:43
Adding a Promo section
03:22
Finishing the Footer
01:30
Section 3: Browse Music Page Design
What You'll Be Building
00:26
Setting up the Browse Page
02:16
Adding a Headline
02:35
Creating Tabs
04:53
Laying out the album section
02:23
Adding the Bloc Jams logo
01:39
Finishing the Left Navigation
04:23
Creating a User Avatar
02:56
Making the Navigation Interactive
04:56
Uploading Album Cover Art
01:20
Creating the Album Details Overlay
04:21
Adding Interactive Hover Effects
02:52
Making a Playful Play Button
01:14
Duplicating Your Album
00:57
Setting up the Play Bar
01:19
Adding the Controls
02:38
Designing the Song Info
05:15
Section 4: Search Panel
What You'll Be Building
02:08
Adding in the Search Field
03:35
Creating Artist and Tracks
07:11
Making Your Search Panel Interactive
02:50
Linking Your Pages
01:28

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Joey Kirk, Co-founder of Made By Munsters

About

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.

Testimonials

"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