Advanced Responsive and Mobile Web Development
  I: Administrative Information   II: Course Details   III: Topical Outline(s)  Printable Version
Section I: Administrative Information
  Total hours: 42.0
Credit Value: 3.0
Credit Value Notes: N/A
Effective: Fall 2018
Prerequisites: N/A
Corequisites: N/A
Equivalents: N/A
Pre/Co/Equiv Notes: APPL70078, APPL70079, PROG70007

Program(s): Front-End Web Development
Program Coordinator(s): N/A
Course Leader or Contact: N/A
Version: 20180904_00
Status: Approved (APPR)

Section I Notes: This course is offered on-campus. The sessions may include a variety of interactive and engaging activities including discussions, workshops, group activities, role plays, case studies and presentations. Readings, video, and podcasts may be provided online, on Sheridan's Learning and Teaching Environment (SLATE), to support class activities and reinforce material covered during class sessions. Assignment details will be provided in class and on SLATE. Students will need reliable access to the internet.

Section II: Course Details

Detailed Description
Students learn core principles and techniques essential to building responsive, accessible and mobile-ready websites that will take the website from fixed to fluid and responsive. Through assignments, in-class lessons and a project, students explore frameworks such as Skeleton, Foundation, Bootstrap and jQuery Mobile to adapt webpages to multi-screen devices.

Program Context

Front-End Web Development Program Coordinator(s): N/A
This is a mandatory course in the Front-End Web Development Certificate.

Course Critical Performance and Learning Outcomes

  Critical Performance:
By the end of this course, students will have demonstrated the ability to build mobile-ready, fluid, responsive, and accessible websites
Learning Outcomes:

To achieve the critical performance, students will have demonstrated the ability to:

  1. Describe core principles and techniques required for building responsive accessible and mobile ready websites
  2. Build a fully functioning responsive, accessible and mobile ready website using the Skeleton framework
  3. Build a fully functioning responsive, accessible and mobile ready website using the Foundation framework
  4. Build a fully functioning responsive, accessible and mobile ready website using the Bootstrap framework
  5. Apply jQuery Mobile components to enhance Skeleton, Foundation, and Bootstrap accessibility
  6. Select the optimal responsive design framework and jQuery components to use when building different websites and/or applications

Evaluation Plan
Students demonstrate their learning in the following ways:

 Evaluation Plan: IN-CLASS
 Quizzes (2 x 5%)10.0%
 Assignment 1: Skeleton5.0%
 Assignment 2: Foundation5.0%
 Assignment 3: Bootstrap5.0%
 Assignment 4: Skeleton Framework12.5%
 Assignment 5: Foundation Framework12.5%
 Assignment 6: Bootstrap and jQuery Mobile Frameworks15.0%
 Final Project35.0%

Evaluation Notes and Academic Missed Work Procedure:
All graded evaluations (i.e., projects, assignments, tests, exams, etc.) must be completed according to the schedule of dates specified by the instructor. Requests to submit work after the due date must be made no later than 24 hours before the due date, and must be accompanied by a valid reason that is acceptable to the instructor. Late assignments that have not received prior approval by the instructor will receive a grade deduction of 10% per business day. Students will be allowed to write a missed quiz/exam/test if they are able to provide the instructor with a valid and acceptable reason for their absence.

Provincial Context
The course meets the following Ministry of Colleges and Universities requirements:


Prior Learning Assessment and Recognition
PLAR Contact (if course is PLAR-eligible) - Office of the Registrar

  • Not Eligible for PLAR

Section III: Topical Outline
Some details of this outline may change as a result of circumstances such as weather cancellations, College and student activities, and class timetabling.
Instruction Mode: In-Class
Professor: N/A
Resource(s): N/A
Applicable student group(s): Continuing and Professional Studies Students
Course Details:
Module 1: Responsive Design Introduction 
  • Key principles of HTML and CSS
  • Responsive design elements
  • Foundation of grid systems
  • Column/Fixed/Fluid Grid Systems
  • CSS framework features for responsive design
  • CSS vs. LESS vs. SASS vs. SCSS
  • Responsive vs. Non-Responsive Websites
  • ‘Mobile-First’ Approach
Module 2: Skeleton
  • Components of the Skeleton framework 
  • Optimal use of the Skeleton framework  
  • Benefits of Skeleton
  • Optimal Skeleton Syntax and File Structure
  • Skeleton Grid System
  • Skeleton Components to enhance website responsiveness (e.g., typography, buttons, forms, lists, tables)
Assignment 1: Skeleton (5%), Assignment 4: Skeleton Framework (12.5%)
Module 3: Foundation
  • Components of the Foundation framework
  • Optimal use for the Foundation framework
  • Benefits of Foundation
  • Foundation Grid System
  • Foundation Ready-To-Go Components
  • Key JS Plugins/Features with Foundation
Quiz 1 (5%) Assignment 2: Foundation (5%), Assignment 5:  Foundation Framework (12.5%)
Module 4: Bootstrap
  • Components of the Bootstrap framework 
  • Optimal use of the Bootstrap framework
  • Benefits of Bootstrap
  • Syntax & Packaged CSS Styling
  • The Bootstrap Grid System
  • Bootstrap Ready-To-Go Components
  • Bootstrap In-Depth Components (e.g., Text/Typography, Buttons & Glyphicons, Modals & Forms, Images & Tables, Navs & Dropdowns, Other JS Plugins/Features)
Assignment 3: Bootstrap (5%)
Module 5: jQuery Mobile
  • Key principles of HTML/CSS/jQuery
  • Components of the jQuery Mobile Framework
  • Optimal use of jQuery Mobile
  • Key jQuery Components (e.g., pages, transitions, buttons & icons, toolbars & navbars, panels &popups, collapsibles, tables & grids)
 Assignment 6: Bootstrap & jQuery Mobile Frameworks (12.5%)
Module 6: Optimal Webpage Layout
  • Comparison of the 4 frameworks
  • Best uses for each framework
  • Available themes for each framework
  • Choosing the optimal framework and/or components
  • Building responsive, accessible and mobile-ready websites/applications 
  • The impact of future updates
  • Community Support for each framework
Quiz 2 (5%), Final Project (35%) 

Sheridan Policies

All Sheridan policies can be viewed on the Sheridan policy website.

Academic Integrity: The principle of academic integrity requires that all work submitted for evaluation and course credit be the original, unassisted work of the student. Cheating or plagiarism including borrowing, copying, purchasing or collaborating on work, except for group projects arranged and approved by the professor, or otherwise submitting work that is not the student's own, violates this principle and will not be tolerated. Students who have any questions regarding whether or not specific circumstances involve a breach of academic integrity are advised to review the Academic Integrity Policy and procedure and/or discuss them with the professor.

Copyright: A majority of the course lectures and materials provided in class and posted in SLATE are protected by copyright. Use of these materials must comply with the Acceptable Use Policy, Use of Copyright Protected Work Policy and Student Code of Conduct. Students may use, copy and share these materials for learning and/or research purposes provided that the use complies with fair dealing or an exception in the Copyright Act. Permission from the rights holder would be necessary otherwise. Please note that it is prohibited to reproduce and/or post a work that is not your own on third-party commercial websites including but not limited to Course Hero or OneNote. It is also prohibited to reproduce and/or post a work that is not your own or your own work with the intent to assist others in cheating on third-party commercial websites including but not limited to Course Hero or OneNote.

Intellectual Property: Sheridan's Intellectual Property Policy generally applies such that students own their own work. Please be advised that students working with external research and/or industry collaborators may be asked to sign agreements that waive or modify their IP rights. Please refer to Sheridan's IP Policy and Procedure.

Respectful Behaviour: Sheridan is committed to provide a learning environment that supports academic achievement by respecting the dignity, self-esteem and fair treatment of every person engaged in the learning process. Behaviour which is inconsistent with this principle will not be tolerated. Details of Sheridan's policy on Harassment and Discrimination, Academic Integrity and other academic policies are available on the Sheridan policy website.

Accessible Learning: Accessible Learning coordinates academic accommodations for students with disabilities. For more information or to register, please see the Accessible Learning website (Statement added September 2016)

Course Outline Changes: The information contained in this Course Outline including but not limited to faculty and program information and course description is subject to change without notice. Any changes to course curriculum and/or assessment shall adhere to approved Sheridan protocol. Nothing in this Course Outline should be viewed as a representation, offer and/or warranty. Students are responsible for reading the Important Notice and Disclaimer which applies to Programs and Courses.

[ Printable Version ]

Copyright © Sheridan College. All rights reserved.