Famo.us Javascript Framework

Create Stunning, Powerful, User Interfaces That Work on Any Size Screen
2.8 (6 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.
213 students enrolled
40% off
Take This Course
  • Lectures 51
  • Length 5 hours
  • Skill Level Intermediate Level
  • 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 12/2014 English

Course Description

In a world of multiple screen sizes and platforms, creating elegant, usable and noticeable user interfaces is becoming increasingly difficult. Developers have to support not just traditional web users but tablet, mobile and even television based users. Creating interfaces that support all types of users can be pleasurable and efficient— if you know the Famo.us Javascript Framework.

In this fast-paced and fun course LearnToProgram's Reece Siksay will take you through the features of the Famo.us Javascript framework and show you how to create elegant User Interfaces. Including over four and a half hours of demonstration, you'll learn what Famo.us has to offer, and how you can take advantage of it. In this course you won't sit idly by and watch Reece demo the framework's features... Nine lab exercises included will have you reinforce your skills and challenge you as you master the Famo.us Framework.

You'll begin with the basics of the Famo.us Javascript framework, installing the necessary libraries. You'll then progress through the fundamentals, including surfaces, animations and events. More advanced content on event handling is also included.

If you're a developer who wants an elegant and powerful solution for design across the device spectrum, Famo.us is what you're looking for. You’ll become productive with the Famo.us Javascript framework very quickly, allowing you to create beautiful interfaces in just a few hours.

What are the requirements?

  • Working Knowledge of HTML and Javascript
  • Mac, PC or Linux
  • Text Editor and Web Browser

What am I going to get from this course?

  • Installing Famo.us
  • Produce Hello World with Famo.us
  • Work with Famo.us Surfaces
  • Adjust Surface Properties
  • Surface Placements with Align and Origin
  • Modifying Opacity
  • Understanding State Modifiers
  • Utilize Shape Translation
  • Understand How to Scale and Rotate Surfaces
  • Stacking Elements
  • Understanding and Creating Transformations
  • Combining Transformations
  • Understanding setTransform parameters
  • Employ Physics and Dampening to Create Realistic Transformations
  • Creating User Interaction with Events
  • Working with Click and Hover Events
  • Understand and Employ Event Layering
  • Dealing with Key-Press Events
  • Emit and Receive Events
  • Understand How to Create Custom Transformations
  • Employ Modifiers with Transformations
  • Utilized Mapped States to Create Toggles and Switches
  • Map Projects and Transitions Using Flowcharts
  • Understand how Famo.us Design Relates to Web Standards

Who is the target audience?

  • Web Developers
  • Web Designers
  • Front End Developers
  • Javascripters
  • Students and Teachers
  • Anyone who wants to Learn Famo.us

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

In this video, your instructor Reece gives you a basic introduction to Famo.us.


In this video, Reece discusses a couple of updates in the latest version of Famo.us that relate to this course.


Reece gives a brief overview of what will be learned in course.


Reece, your instructor, shows you how to download the famo.us package and explains how the content delivery network replaces the need for storage of source.


Follow along with Reece as he navigates the download and creates a template to work from.

Lab Exercise 1
2 pages
Section 2: Surfacing

Reece discusses what surfaces can be.


In this video Reece creates and edits css properties of a surface.


Reece shows you placement of surfaces by using align and origin.


Your instructor Reece shows you how to modify opacity and change the background image.

Lab Exercise 2
2 pages
Section 3: State Modifiers and Transformations

Similar to align and origin, many changes applied to surfaces require a state modifier. These can do a multitude of actions.


In this video, Reece creates a basic image of a city skyline while learning translation of shapes.


Reece shows you how to scale and rotate surfaces and goes over the importance of order of modifiers.


Reece, your instructor, goes over placing elements over or under one another and discusses the natural height of elements.

Lab Exercise 3
2 pages
Section 4: Active and Moving Transformations

Reece shows what setTransform is and how it will bring to life your motionless page.


In this video Reece teaches you how to create a tree of transformations by setting a variable at an upper level.


Reece demonstrates how to use set transform and some examples of parameters.


In this video Reece explores more examples and parameters.


Reece uses physics and dampening to explain spring transforms.

Lab Exercise 4
2 pages
Section 5: Events

Reece shows how interactions can be useful and gives you a brief overview of what they can do.


Reece teaches you how to bind actions to click and hover and goes over touchscreen event capturing.


In this video, Reece goes over the various layers which events can be bound to and their priorities.


Your instructor Reece demonstrates the actions and abilities of key presses.


Reece shows you how to listen and transmit event data. This simplifies modularity and can have several events act without interference.

Lab Exercise 5
2 pages
Section 6: Custom Transforms with Modifiers

By using modifiers and states, Reece shows you that you can alleviate the need for extra code.


Reece shows how to use modifiers to create actions that don't just activate once.


Reece demonstrates how to add map states to your objects to create toggles or switches.


In this video Reece shows how to retrieve data for a modifier from another object, creating dependency.

Lab Exercise 6
2 pages
Section 7: Flowchart Project

Learning and Application go hand in hand. Without application, learned material is often forgotten.


Code along with Reece as he creates surfaces to traverse with your flowchart.


Your instructor, Reece, creates modifiers for each transition of your flowchart.


Reece creates events for each click on your flowchart.

Lab Exercise 7
2 pages
Section 8: Web Standards

Most webpages follow some basic outlines for construction. Famo.us recognizes and supports this with simple integration.


Reece shows you how to create and adjust the header, footer, and content of a page.


Reece goes over how to make a grid display and how to change the surfaces and dimensions.


Reece creates a flexible layout.


In this video Reece demonstrates how to nest these web standards by creating a grid within a header-footer page.

Lab Exercise 8
2 pages
Section 9: Advanced Event Handling

Reece discusses some of the other capabilities of Famo.us and the limits of our code.


In this video Reece shows you how to properly modulate views to simplify code.


Reece goes over dragging surfaces with the mouse and piping.


Reece finishes up with creating actions on scroll.


Reece shows you how to create the slideshow used in chapter one.

Lab Exercise 9
1 page
Section 10: Bonus Lecture

Here's some bonus material to help you continue learning.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

LearnToProgram, Inc., Learn Web, Mobile and Game Development

LearnToProgram Media is a leading publisher of web, mobile, and game development courses that are used by over 500,000 people in 65 countries. LearnToProgram's valuable network of technical resources includes content on YouTube, iTunes, and Roku, as well as books, free tutorials, and online courses.

With a mission of “teaching the world to code" LearnToProgram instructors are teachers first and technical experts second. Their primary skill is relating complex technical information to nontechnical people learning web, mobile and game development. The entirely online, self-paced sales model allows students to learn at their own pace.

With over 40 courses on the market, LearnToProgram offers students flexible programs in web development, mobile application development and game development. Currently the company's most popular online courses include Become a Certified Web Developer and 10 Apps in 10 Weeks.

The company is based outside of Hartford, Connecticut.

Instructor Biography

Reece Siksay, Instructor: LearnToProgram, Inc.

Reece Siksay joined the LearnToProgram in 2014 as a host of the web series QuickBytes. A graduate of the University of Connecticut with a degree in economics, Reece enjoys mathematics and problem-solving. A largely self-taught programmer, Reece is proud to share his knowledge in order to help others learn new languages. In his spare time, Reece likes to go thrifting, all while drinking Arizona iced tea, eating a bagel, listening to Eminem, and wearing only the classiest of suspenders.

Ready to start learning?
Take This Course