Facebook Blueprint Banner

Ads Formats Course Component Examples

Facebook Blueprint Course Final Coded Product Desktop Example

Project Details

Company
Facebook Blueprint
Project Responsibilities
Responsive, Front-end, E-learning Course Web Design, Custom Component Development and QA Testing for Desktop and Mobile Browsers.
Tools Used
Atom, Terminal and Bitbucket.
Coding Languages
HTML5, CSS3, Javascript and JSON.

Introduction

The Facebook Blueprint program teaches business employees how to run advertising campaigns using the Facebook advertising tools and offers a certification program. Our development team was responsible for coding responsive eLearning courses using storyboards that the instructional design team put together. I was responsible for creating responsive web pages using the Adapt e-learning framework. The language used was HTML5, CSS3, Javascript and JSON. I was also tasked with course quality control and tested for desktop and mobile browser responsiveness. We worked with the translation team to make the templates work with right to left languages. I also project-managed component development using 3rd party vendors.

Design Challenge

The assumptions that I had made when first redesigning the old components was that I would be able to simply add in some modern CSS to make the old components responsive and browser compliant, but the problem was that they had been built using an old gaming javascript framework. This forced our team to rebuild all the components from scratch using HTML5, CSS and Javascript so that the rebuilt components would comply with modern browser standards.

Conclusion

Our development team was responsible for rebuilding over 90 Adapt custom course components. I built, rebuilt or debugged over 89 Facebook Blueprint courses touching almost all existing courses and helped make our e-learning course templates translatable for right to left languages. I was tasked with making courses mobile responsive, accessible for disabled users and building a better user experience.

Click Here to View the Facebook Blueprint Program

BACK