About This Course

Foundation is an open source front end framework used for building responsive web applications. It is built with HTML, CSS and jQuery. Frameworks such as foundation save a lot of time for web developers who don’t want to build their applications from scratch. Foundation provides many useful tools and features that assist developers in building fast, high quality responsive websites.

In the Responsive UI Design with Foundation course you will learn how to design responsive user interface elements with the foundation framework. Topics covered include but are not limited to grids, containers, buttons, menus, forms and sliders.

Request More Info About This Course

Course Category


This is a two-day, hands-on course.

Skill Level

What Happy Developers Say

The instructor did a good job of adjusting content to meet different skill levels.
Developer, Intuit
The instructor was very knowledgeable, making it easy to ask questions and provided good conversation about the topic at hand.
dell  logoWeb Developer, DELL
The instructor demonstrated strong broad knowledge as well as technical in-depth when appropriate
Engineer, Starbucks
I liked that we could determine what to learn, no time was wasted.
Javascript Developer, RetailMeNot
I had trouble understanding a certain concept, and told the instructor that I just didn't get it. While the class was busy with an exercise, he sat down with me, gave me material to read, and made sure I understood it before I moved on. I really appreciated that.
JavaScript Developer, PayPal
The instructor has a great attitude and pacing. Amazing how much he knows about JS!
Junior JavaScript Developer, Macy's


  • What Foundation can do for responsive UI.
  • Make a grid, style headings and more.
  • Build UI elements such as buttons, menus, forms and more.
  • Create UI animations.


This course is designed for developers with intermediate HTML/CSS experience.

Course Outline

Getting started with Foundation

  • Why foundation?
  • Installation
  • Build a custom foundation
  • Kitchen Sink


  • Building a grid
  • Typography
  • SASS variables
  • JavaScript utilities library
  • A bit about containers


  • Size and Color
  • Customize your own button
  • Use SASS mixins
  • Button groups and bars
  • Build drop down buttons

Bars, Tabs and Menus

  • Icon bar
  • Stacked progress bar
  • The tab element
  • Dropdown, drilldown and accordion menu

Forms and Sliders

  • HTML forms
  • Useful form elements and actions
  • Build and style a slider
  • Image slider

More with Foundation

  • Pop ups
  • Motion UI library
  • A bit about Foundation 5 and 6
  • Interesting plugins
Request More Info About This Course

Instructors Who Teach This Course



Craig recently released the book, The JavaScript Framework Guide: AngularJS, Backbone, and Ember. Craig has been a guest on the Hanselminutes and JavaScript Jabber podcasts. He’s an avid blogger, and several of his articles have been published in Peter Cooper’s poplular “JavaScript Weekly” newsletter. He also has his own podcast, “The Front-End Developer’s Cast”.

Craig has been a developer f... read more



Elias Carlston has 20 years’ experience as a software engineer, from lean startups to large enterprises. Having great mentors early on showed Elias the value of sharing knowledge, and he enthusiastically embraces the opportunity to give back to the community through teaching. Beginning his career as a data analyst for a large non-profit clinic, he soon became a full stack developer. First, at ... read more



With backgrounds in technology, business and education, Jason brings a broad array of experience to BDA. He‰'s been programming since he was a kid and currently runs a business, 303 Velocity, that builds iOS and Android apps for its clients. They also do consulting work to help publishers get more downloads and sales for their apps. He has taught mobile classes for Yahoo! and Intel employees an... read more



Kito D. Mann is the Principal Consultant at Virtua, Inc., specializing in enterprise application architecture, training, development, and mentoring with JavaServer Faces, HTML5, Web Components, portlets, Liferay, and Java EE technologies. He is also the editor-in-chief of JSFCentral.com (www.jsfcentral.com), co-host of the Enterprise Java Newscast (https://www.enterprisejavanews.com), and the a... read more

Who Takes This Training?

Learn More About This Course