Responsive Web Design with Open Source Frameworks

Formerly: 30449 Web Design Using Open Source Design Patterns, Libraries and Frameworks



The open source community has provided high productivity, fast-track alternatives to using commercial tools in Web design. This course introduces design patterns as a technique for rapid website production and provides an overview of open source libraries and frameworks to add to the designer’s toolbox. Today's professional designers have embraced grid standardization and responsive design layouts with frameworks like Twitter Bootstrap, Foundation, SemanticUI, Material Design and more. By working with a set of proven design patterns rolled into a well-tested framework, the designer can create a website for all contemporary viewports with the least amount of trial and error.


This intermediate web design course focuses on Twitter Bootstrap for responsive designs that work on all modern devices. The course covers techniques for building engaging websites efficiently that work on a full range of desktop and mobile devices, and includes basic interactivity such as image sliders, date pickers and animation. You will learn the naming conventions within Bootstrap and Foundation frameworks and explore their capability for building semantically correct and cross-browser compatible websites with JavaScript enhancements for better engagement and usability. You will also learn to evaluate several usability examples and JavaScript implementations, how to select the right library based on the design requirements, and how to use some of the available special application JavaScript libraries.


This is an applied course for the students who have successfully completed the HTML, CSS and introduction to JavaScript courses (or who have equivalent experience). It does not cover any content management system implementations or PHP.


Topics include:



  • Definition and value of design patterns

  • HTML/CSS design patterns

  • Examples of how companies standardize with internal design patterns

  • The Twitter Bootstrap design pattern

  • Components in the Twitter Bootstrap framework, including the jQuery slider

  • The Foundation design pattern

  • How to implement interactivity in a Foundation design

  • Alternative JavaScript libraries for page load optimization

  • Other special application JavaScript libraries




Skills Needed: Students must have a working knowledge of HTML, CSS and a basic understanding of JavaScript function calls and variables.