Build Responsive Web Designs With No Code Using Macaw

Learn how to easily turn your design ideas into real useable HTML and CSS code without writing a single line
4.3 (17 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.
2,066 students enrolled
Instructed by Bob Creigh Design / Web Design
Take This Course
  • Lectures 40
  • Length 4 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 1/2016 English

Course Description

Have you always wanted to build dazzling and responsive Websites from the ideas you have imagined but didn't have or want to devote the time to dig into HTML and CSS code? Or maybe you are a designer that is tired of paying a coder to mock up your designs to present to your customers. Or perhaps you are a seasoned coder who wants to be able to mock up a design quickly and then manipulate the code later on.

If any of this sounds familiar to you, then Macaw may be the answer. In this course, I will lead you through the tools and user interface of Macaw and show you how to build a real world Web design that could actually be put into production with very little extra effort.

Did you know that mobile devices have outpaced the desktop market. This means that you have to make your Web presence responsive to these smaller screens. This course will teach you how to take your design and make it "Responsive" to all sizes including the mobile market which as of July of 2015 represents over 51% of all Internet users.

Build a strong foundation in Web Design using Macaw

  • Learn about the Macaw tool
  • Learn the basics of the interface
  • Create some real-world examples

Content and Overview

The good folks that built Macaw have delivered a wonderful tool that allows you to draw your Web ideas instead of coding them but as with all new tools, there is a learning curve. I help you navigate the uncharted waters and get you up to speed quickly so you can enjoy bringing your design ideas to life.

This course will give you the necessary skills to start designing Web content today and realize the dream of turning ideas into reality.

What are the requirements?

  • Mac OS X or Windows computer
  • Macaw Application - Free 30 Day trial available
  • A desire to build beautiful and responsive Web content

What am I going to get from this course?

  • Build real Web sites with no code
  • Fully understand the Macaw tools and interface
  • Necessary skills to build real-world websites: professional, beautiful and truly responsive websites
  • Downloadable lectures, code and design assets for the entire project
  • Access to an active community where I will personally answer any of your questions

Who is the target audience?

  • Anyone wanting to build captivating and responsive Web sites
  • Designers that want to take there ideas and build them out without coding
  • Students who have struggled with turning design ideas into useable HTML and CSS code

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: Getting Started

Introduction to the course


A quick synopsis of what the Macaw tool is and what it can do for you.


In this lecture, I show you how to get the Macaw free 30 day trial and how to install it on your machine.

Section 2: Macaw Basics

In this lecture, we explore the user interface of Macaw so you fully understand all of the tools.


The inspector is a critical piece of the Macaw toolset and this lecture guides you through the nuances of using it to speed your workflow.


This lecture shows you how to use and manipulate the responsive grid and page settings.

This lecture provides the necessary resources to build the basic layout along with the instructor.

This lecture shows you how to create a simple Web layout using the Macaw tools.


This lecture shows you how to create and apply global styles to your design.


This lecture demonstrates how to take a design and make it responsive to the mobile environment.

Section 3: JavaJive Website Design

This lecture describes the Java Jive Website we are going to build


This lecture provides the necessary resources to build the JavaJive site along with the instructor.


In this lecture we setup our environment and import graphics to complete the Java Jive Website.


In this lecture I take you step-by-step on how to create the header used throughout the Java Jive Website.


This lecture provides some fine-tuning and finishing off the site header.


This lecture we create the site menu bar.


In this lecture we layout the tagline and descriptive blocks of our home page.


In this lecture we learn about breakpoints that allow for different layout properties for differeint screen sizes as well as demonstrate how to preview our design in a browser.


this lecture we will create a section of callout blocks and add graphics and text to each one describing various features of our company.


In this lecture we finish off and fine tune our callout blocks.


In this lecture I show you how to create hours of operation and address blocks of our design.


In this lecture we finish off our basic home page design by adding the footer.


This lecture we get into the nuts and bolts of making our site responsive by working through the header section.


In this lecture we finish off making our home page responsive.


In this lecture we dive into hyperlinks for our site linking our social icons and the menu links.


In this lecture we add the remaining pages of our site. We learn how to do this without having to re-create the basic header and footer for each page.


In this lecture we layout our coffee shop menu page.

In this lecture we finish off our coffee shop menu page.
In this lecture we layout our coffee shop events page.
In this lecture we finish off our coffee shop events page.
In this lecture we layout our coffee shop contact us page.
In this lecture we finish off our coffee shop contact us page.

In this lecture we give our site a good once over and preview the entire project in the browser ensuring it is what we envisioned.

Section 4: Macaw Quick Tips
Quick Tips Introduction

Demonstration of some of the more useful keyboard shortcuts in Macaw.

This quick tip demonstrates the differences between the three positioning types in Macaw.

Quick tip on how to use visual properties.


A quick demonstration on how to embed a YouTube video in your Macaw design.


A simple tutorial on how to add a JavaScript dropdown menu.


Make a responsive menu with dropdown like what Bootstrap offers.

*** Important ***

Make sure you watch previous Quick Tip "Add JavaScript Dropdown Menu" First

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Bob Creigh, Web Developer, Designer, Photographer and IT Professional

I have been a full time IT professional for the last 30 years, a Web Developer for 20 years and part time Photography professional for the last 10 years. I currently manage a 10,000 sqft data center and continue to develop Web applications and sites. I currently shoot portraits and studio work but I have also shot wildlife and landscapes as well as real estate photos. I have also done software development on both the desktop and on mobile platforms.

I have taught IT courses at the college level and have been a training leader throughout my career. I have a passion for learning as well as passing on my knowledge to others.

Ready to start learning?
Take This Course