Bloc: Design & Build a Website without Code
4.8 (41 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,256 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.8 (41 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,256 students enrolled
Created by Joey Kirk
Last updated 8/2014
English
Price: Free
Includes:
  • 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
Requirements
  • Web Browser
  • Computer
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
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
Expand All 33 Lectures Collapse All 33 Lectures 01:30:20
+
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
01:37

Getting to Know the Interface
05:10
+
Home Page Design
9 Lectures 19:28
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
+
Browse Music Page Design
17 Lectures 46:23
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
+
Search Panel
5 Lectures 17:12
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
About the Instructor
Joey Kirk
4.8 Average rating
41 Reviews
7,256 Students
1 Course
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."