Have you ever tried to learn the Box Model but things never really seemed to stick?

Join James Stone, YouTube sensation for this 11 lesson course...

Or skip straight to the purchase button

In this course you will learn...

1.
MOVING PARTS OF THE BOX MODEL

You'll learn what the moving parts are of the box model (and only the important bits, not every detail)

2.
HOW TO USE THE CHROME INSPECTOR

You'll learn how to use the Chrome Inspector to see how the box model works out in the wild (and your own creations)

3.
HOW TO REVERSE ENGINEER THE BOX MODEL USING ZURB FOUNDATION

You'll learn how to reverse engineer ZURB Foundation – the most powerful front-end framework on the planet – and understand the important patterns

4.
BOX MODEL SPECIAL EFFECTS

You'll understand how to use borders and border radius to create specific effects

5.
CREATE A BUTTON IN CSS FROM SCRATCH

You'll understand how to create a button from and anchor <a href="#">button coming soon...</a> tag and style it via CSS

6.
CREATE PROPER ROUNDED PROFILE IMAGES VIA CSS

You'll learn the proper way to create rounded profile images using CSS and slim jpeg files, fast lean and ready for production. Don't ever use transparent PNG's for this. Not ever.

Build visually accurate front-end code by learning the Box Model inside and out

11 Video Lessons give you just the right amount of background to approach your own projects
The Box Model Aha Moment

Understanding the box model is critical to having visually accurate front-end code.

Introduction & How it works

  • My Box Model Aha Moment
  • What are the moving parts
  • Using the Chrome Inspector to better understand the Box Model
  • Reverse Engineering ZURB Foundation
  • Borders
  • Border Radius

Examples

  • ​Build a Simple Button
  • Typography and the Box Model
  • Rounded Profile Images
  • Colored Page Sections

Bonus

  • Creating Triangles*
  • Why I don't set height properties
  • Spacing errors and how to fix them*
Your Instructor

My passion is Design Systems Engineering where I work at the intersection of fast-paced design and development teams. Unlike other online course experts, I am an award-winning web designer, a top contributor to the ZURB Foundation framework, and an Adjunct Professor at the School of Visual Arts at Penn State.

For the past 4 years I have worked as a Design Systems Engineer helping agencies, enterprises and startups to build out beautiful, performant front-end code and systems. This course is part of my mission to bring Design Systems Engineering to enterprises of all sizes.

"My goal is to assist web professionals wanting to work in the intersection between Design and Engineering a way to bootstrap their education and career."

James Stone, MFA – ZURB Certified Preferred

What people are saying...

He's a guy with a lot of experience, a natural teacher, and it shows

Throughout James' ZURB Foundation workshop, you'll also have the opportunity to soak up tips and tricks on efficient coding workflows, the latest apps and software, and other tech wizardry that James can't help but share. He's a guy with a lot of experience, a natural teacher, and it shows. Anyone who sits in a classroom with him will leave inspired at the end of the day.

profile-pic
Michael Stevenson

James Stone's workshop was an example of how prototyping in ZURB Foundation could be fast and methodical

Fast and methodical are two words rarely used in unison, but James Stone's workshop was an example of how prototyping in ZURB Foundation could be just that. The workshop covered a wide range of key features in Foundation and allowed me to make the switch from Bootstrap without skipping a beat.

profile-pic
Darien Lombardi

James Stone is one hell of a ZURB Foundation salesman and instructor

@JAMESSTONEco is one hell of a @ZURBfoundation salesman and instructor. I. Am. Sold. #greattech #flexible #biwinning

profile-pic
Charles Watson

What sets this course apart from others?

1.
PROFESSIONALLY RECORDED AUDIO

The BMAM Course has pro quality audio which means volume levels are consistent from video to video. The trainer has a clear articulated voice and speaks in the most easy manner to be understood. Transcripts are available for every lesson, just in case there is confusion, or you prefer to read rather than watch.

2.
USES THE ZURB FOUNDATION FRAMEWORK

The Box Model Aha Moment Course goes above and beyond the existing (and fairly comprehensive) official ZURB Foundation documentation. The course is the missing link to being able to style the framework to match any visual brand with ease. This is not just a simple copy of the official documentation.

3.
ERROR FREE + ALWAYS KEPT UP TO DATE

The source code shown in this course has been tested to be error free and working properly. There is a support system if you run into any issues. Unlike other courses which are still giving out out of date information, this course is constantly updated.

4.
FOCUSED ON YOU

Unlike other courses which focus purely on theory, this course also provides you a detailed practical approach and guidelines for building real world components in CSS. The Box Model Aha Moment course starts with simple ideas and then connects and builds upon the concepts learned earlier.

5.
REAL WORLD EXAMPLES

Unlike other courses and books that confuse more than they help, this course provides clear examples to explain concepts. The course provides assignments so you can practice what you learned and get better at your craft. This is not just passively watching theory and not doing anything with it. We will build stuff 🙂

Is this Course Right for You?

Your course is not for everybody, you can use this section to pre-select the customers that will get the best results.

WHO THIS IS FOR

  • Product and Project Managers that want to better understand the process to take their ideas from their design to their engineering team smoothly.
  • Artists and Designers that want to have a better understanding of how the web is built, to better inform their design decisions. Without having to learn a programming language or get buried in too much information.
  • Developers that want to have a better control over the visual design of their web pages.
  • If you already have an idea of how to create web pages by scratch or using a framework, then this course will give you the proper background, process, and examples to get to mimic visual designs accurately.
  • The Box Model Aha Moment Course starts from a basic level for beginners for better understanding of the concepts.

WHO THIS IS NOT FOR

  • Absolute beginners who do not know basic HTML or CSS
  • Developers that don't want to spend the proper amount of time to translate professional quality designs.
  • Developers that are completely against using a front-end framework and using a modern tool set.
  • Designers and Developers that simply want to play around with settings and not really get to that pro level.

Pricing + Packages

$29

 

Course Only 

  • Instant access to 11 Lessons
  • Lifetime access

Team packages are available. Contact us for details.

Own the Box Model in 30 days or less

I know that often other courses don't give you exactly what you signed up for, that is why we have a 30-day money back guarantee. If you sign up for the course and are not satisfied with it for any reason during the first 30-days you can request a full refund via email.

FAQ

Here are answers to some frequently asked questions:

Can't I just figure this out on my own?

What if I don't use ZURB Foundation?

What if I don't know how to code?

I'm a (UX/UI/Visual) Designer, is this the right course for me?

Will this work for Bootstrap or UI Kit?

Will this work with Material Design?

Will this work for iOS or Android?

I am a back-end developer, is this for me?

I am a full-stack developer, is this for me?

I don't have time for another course.

Can I get a refund if I don't like the course?

Why are you doing a pilot aka beta run?

Why is 42 the answer to the meaning of life?