Build Responsive Web Designs With No Code Using Macaw

Name: Build Responsive Web Designs With No Code Using Macaw
Rating: 4.4 (26 reviews)

Learn how to easily turn your design ideas into real useable HTML and CSS code without writing a single line

Created byBob Creigh

Last updated 3/2016

English

What you'll 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

Course content

4 sections • 40 lectures • 3h 52m total length

Course Introduction2:32
Introduction to the course
What is Macaw?2:09
A quick synopsis of what the Macaw tool is and what it can do for you.
Get Macaw1:53
In this lecture, I show you how to get the Macaw free 30 day trial and how to install it on your machine.

Macaw Interface7:17
In this lecture, we explore the user interface of Macaw so you fully understand all of the tools.
Inspector13:11
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.
Grid and Page Settings6:12
This lecture shows you how to use and manipulate the responsive grid and page settings.
Basic Layout Resources0:50
This lecture provides the necessary resources to build the basic layout along with the instructor.
Basic Layout10:42
This lecture shows you how to create a simple Web layout using the Macaw tools.
Global Styles4:14
This lecture shows you how to create and apply global styles to your design.
Basic Responsive5:13
This lecture demonstrates how to take a design and make it responsive to the mobile environment.

JavaJive - Intro1:43
This lecture describes the Java Jive Website we are going to build
JavaJive Resources0:41
This lecture provides the necessary resources to build the JavaJive site along with the instructor.
JavaJive - Setup2:05
In this lecture we setup our environment and import graphics to complete the Java Jive Website.
JavaJive - Header Part 15:21
In this lecture I take you step-by-step on how to create the header used throughout the Java Jive Website.
JavaJive - Header Part 23:02
This lecture provides some fine-tuning and finishing off the site header.
JavaJive - Menu Bar8:05
This lecture we create the site menu bar.
JavaJive - Tagline and Description4:49
In this lecture we layout the tagline and descriptive blocks of our home page.
JavaJive - Breakpoints and Preview5:53
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 - Callout Boxes Part 114:02
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 23:19
In this lecture we finish off and fine tune our callout blocks.
JavaJive - Hours and Address6:52
In this lecture I show you how to create hours of operation and address blocks of our design.
JavaJive - Footer6:38
In this lecture we finish off our basic home page design by adding the footer.
JavaJive - Responsive Header10:18
This lecture we get into the nuts and bolts of making our site responsive by working through the header section.
JavaJive - Responsive Part 27:47
In this lecture we finish off making our home page responsive.
JavaJive - Links8:17
In this lecture we dive into hyperlinks for our site linking our social icons and the menu links.
JavaJive - Adding Pages8:19
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 - Menu Page Part 110:01
In this lecture we layout our coffee shop menu page.
JavaJive - Menu Page Part 24:18
In this lecture we finish off our coffee shop menu page.
JavaJive - Events Page Part 19:45
In this lecture we layout our coffee shop events page.
JavaJive - Events Page Part 28:38
In this lecture we finish off our coffee shop events page.
JavaJive - Contact Page Part 111:06
In this lecture we layout our coffee shop contact us page.
JavaJive - Contact Page Part 25:07
In this lecture we finish off our coffee shop contact us page.
JavaJive - Final QA4:53
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.

Quick Tips Introduction1:04
Discover quick tips in short videos that teach specific Macaw tasks. These tips are updated frequently and shaped by your questions in the forums.
Quick Tips - Keyboard Shortcuts6:16
Demonstration of some of the more useful keyboard shortcuts in Macaw.
Quick Tips - Down and Dirty Positioning3:34
This quick tip demonstrates the differences between the three positioning types in Macaw.
Quick Tips - Using Visual Properties1:47
Quick tip on how to use visual properties.
Quick Tips - Embed a YouTube Video3:21
A quick demonstration on how to embed a YouTube video in your Macaw design.
Quick Tips - Add JavaScript Dropdown Menu2:42
A simple tutorial on how to add a JavaScript dropdown menu.
Quick Tips - Make Responsive Menu8:30
Make a responsive menu with dropdown like what Bootstrap offers.

*** Important ***

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

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 this course is for:

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

Build Responsive Web Designs With No Code Using Macaw

What you'll learn

Explore related topics

Course content

Getting Started3 lectures • 7min

Macaw Basics7 lectures • 48min

JavaJive Website Design23 lectures • 2hr 31min

Macaw Quick Tips7 lectures • 27min

Requirements

Description

Who this course is for: