Build Responsive Web Designs With No Code Using Macaw
4.4 (23 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,080 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build Responsive Web Designs With No Code Using Macaw to your Wishlist.

Add to Wishlist

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.4 (23 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,080 students enrolled
Created by Bob Creigh
Last updated 3/2016
English
Current price: $10 Original price: $95 Discount: 89% off
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
Requirements
  • Mac OS X or Windows computer
  • Macaw Application - Free 30 Day trial available
  • A desire to build beautiful and responsive Web content
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.

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
Curriculum For This Course
40 Lectures
03:52:26
+
Getting Started
3 Lectures 06:34

Introduction to the course

Preview 02:32

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

Preview 02:09

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

Get Macaw
01:53
+
Macaw Basics
7 Lectures 47:39

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

Macaw Interface
07:17

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.

Inspector
13:11

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

Grid and Page Settings
06:12

This lecture provides the necessary resources to build the basic layout along with the instructor.
Basic Layout Resources
00:50

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

Basic Layout
10:42

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

Global Styles
04:14

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

Basic Responsive
05:13
+
JavaJive Website Design
23 Lectures 02:30:59

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

Preview 01:43

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

JavaJive Resources
00:41

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

JavaJive - Setup
02:05

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

JavaJive - Header Part 1
05:21

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

JavaJive - Header Part 2
03:02

This lecture we create the site menu bar.

JavaJive - Menu Bar
08:05

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

JavaJive - Tagline and Description
04:49

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.

JavaJive - Breakpoints and Preview
05:53

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

JavaJive - Callout Boxes Part 1
14:02

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

JavaJive - Callout Boxes Part 2
03:19

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

JavaJive - Hours and Address
06:52

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

JavaJive - Footer
06:38

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

JavaJive - Responsive Header
10:18

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

JavaJive - Responsive Part 2
07:47

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

JavaJive - Links
08:17

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.

JavaJive - Adding Pages
08:19

In this lecture we layout our coffee shop menu page.

JavaJive - Menu Page Part 1
10:01

In this lecture we finish off our coffee shop menu page.
JavaJive - Menu Page Part 2
04:18

In this lecture we layout our coffee shop events page.
JavaJive - Events Page Part 1
09:45

In this lecture we finish off our coffee shop events page.
JavaJive - Events Page Part 2
08:38

In this lecture we layout our coffee shop contact us page.
JavaJive - Contact Page Part 1
11:06

In this lecture we finish off our coffee shop contact us page.
JavaJive - Contact Page Part 2
05:07

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.

Preview 04:53
+
Macaw Quick Tips
7 Lectures 27:14

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

Quick Tips - Keyboard Shortcuts
06:16

This quick tip demonstrates the differences between the three positioning types in Macaw.
Quick Tips - Down and Dirty Positioning
03:34

Quick tip on how to use visual properties.

Quick Tips - Using Visual Properties
01:47

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

Quick Tips - Embed a YouTube Video
03:21

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

Quick Tips - Add JavaScript Dropdown Menu
02:42

Make a responsive menu with dropdown like what Bootstrap offers.

*** Important ***

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

Preview 08:30
About the Instructor
Bob Creigh
3.8 Average rating
53 Reviews
3,651 Students
3 Courses
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.