Anwar Montasir profile image. Photo of Anwar Montasir by Drew Wiedemann

Anwar Montasir

Instructional Designer &
Educator &
Content Writer &
Designer &
Developer &
Accessibility Advocate

Case Study: Treehouse

Video still of Anwar Montasir from Treehouse's CSS Layout course

Project Overview

In October 2019, I was hired by Treehouse to create content for the UX, Front End Web Development, and Full Stack JavaScript Techdegrees.

In two years at Treehouse, my accomplishments include

Below are highlights from the content I created at Treehouse.

Data Visualization Foundations

In Data Visualization Foundations, I discuss the difference between data and information, list four steps to undergo before creating a visualization, cover a number of common charts, and offer tips on how to create more accessible and ethical visualizations. I also spend a solid portion of the course talking about Dennis Rodman.

Practice Data Visualization screenshot

The course is followed by a practice session in which students identify their audience, decide on a story to tell with their data, create a set of rough sketches, review a variety of data visualization tools and plugins, and create a choropleth map documenting 2019 auto fatality rates in America using Figma.

View course

Accessibility courses

When I arrived at Treehouse, there was no accessibility content in any Techdegree.

While creating the following two courses, I convinced Treehouse to hire three contractors with a range of disabilities to review our content, conduct quality assurance, and make recommendations.

Accessibility For UX Designers

Accessibility For UX Designers screenshot

In Accessibility For UX Designers, students look at WCAG requirements from a designer’s perspective. The second stage of the course covers the principles of designing an accessible form, and students apply those principles to a food delivery checkout form designed in Figma.

View course

Accessibility For Web Developers

Accessibility For Web Developers screenshot

Accessibility For Web Developers is a fairly similar course, but this time students examine WCAG requirements from a developer’s perspective, and use semantic HTML to develop an accessible version of the same food delivery checkout form.

View course

CSS Basics

While Treehouse had an existing course on CSS Basics, at nearly eight hours long its length was proving a pain point for students. Plus, the course featured some outdated CSS techniques.

I divided up the larger course into three smaller courses:

CSS Basics

CSS Basics screenshot

In CSS Basics, students learn to style their pages while keeping HTML content separate from CSS presentation. Topics covered include basic selectors, values and units, and the CSS cascade.

Students will apply their new CSS knowledge to a resume for a fictitious Treehouse grad named Developer Diane. And while the finished result might not be the most legible resume, the goal here isn’t to create a portfolio-ready product. Students will grow comfortable with CSS syntax, explore the impact of various selectors and measurements, and gain confidence in controlling the style of their HTML document.

View course

CSS Layout

CSS Layout screenshot

In CSS Layout, students learn the parts of the CSS Box Model, and gain more advanced control over their layout using CSS properties like display, position, and float. This course also introduces CSS Media Queries, so students can adjust their layouts for display on a variety of screens and devices.

Students continue working with Developer Diane, this time on a blog post that remains legible on both a mobile and desktop display.

View course

Enhancing Design with CSS

Enhancing Design with CSS screenshot

In Enhancing Design with CSS, students improve their page’s typography by importing fonts and learning type-specific properties such as line-height. They’ll learn advanced visual effects like type and box shadows, rounded corners, and gradients, and even learn to insert decorative content using CSS. Students will add background images to their document and manipulate the color of those images using background blend modes.

During this course, students style a promotional website for Lake Tahoe, California. In doing so, they’ll use the knowledge gained throughout all three CSS courses to create an appealing visual design and a legible typographic experience across a variety of screens.

View course

Design Patterns

While Treehouse already had a course on Design Patterns in the UX Techdegree, it was insufficiently thorough and contained outdated information.

UX Design Patterns screenshot

In my new version of the course, students examine the psychology of web users and learn the difference between System 1 thinking, which is automatic, instinctive, and emotional, versus System 2 thinking, which is deliberate and logical. Students learn why taking advantage of existing patterns keeps cognitive load to a minimum, study examples of existing navigation patterns, and learn to format body copy to encourage meaningful scanning.

View course

Introduction to Design Systems

In Introduction to Design Systems, students learn how a scalable, repeatable design system leads to more efficient design. Students learn the components of a design system and how to work with existing documentation.

Introduction to Design Systems screenshot

The course is followed by a practice session in which students use Adobe XD to wireframe a homepage for, an imaginary website for the United States federal government that informs citizens about their right to vote.

Students begin with a problem, a set of research, and some design explorations in the form of rough sketches. They then use the United States Web Design System to ensure the look and behavior of their designs are consistent with other federal government sites.

View course

Getting Started with Human Interface Guidelines

In Getting Started with Human Interface Guidelines, students learn how to work with Apple’s Human Interface Guidelines documentation, and to apply Human Interface Guidelines principles when designing iOS applications.

Getting Started with Human Interface Guidelines screenshot

Students additionally design screens for a running app that adheres to Human Interface Guidelines design standards.

View course

Getting Started with Material Design

In Getting Started with Material Design, students learn how to work with Google’s Material Design documentation, and to apply Material Design principles when designing applications for the Android platform.

Getting Started with Material Design screenshot

Students additionally design screens for a mobile cooking and recipe app that adheres to Material Design guidelines.

View course