Module: CCO5103-20 - The Responsive Web

Level: 5

Credit Value: 20

Module Tutor: Gary Renes

Module Tutor Contact Details: g.renes@bathspa.ac.uk

Please note that this module is a pre-requisite of the Level 6 module CCO6005-20 Web Apps.

1. Brief description and aims of module:

The Responsive Web builds on the HTML5, CSS and JavaScript programming skills covered in Web Development. Following a HTML5 refresher, you be introduced to frameworks and layout modules (e.g. CSS Flexbox and Bootstrap) that help implement responsive web design. You then encounter more sophisticated implementations of JavaScript, including libraries to better manage user events and HTML5 animation.

Beyond the technical aspects of the module you are taught strategies to test and troubleshoot your web development projects. These include in part, the utilisation of Chrome Development Tools and various web services that help improve accessibility, search engine optimisation (SEO) and markup validation.

2. Outline syllabus:

Topics covered in The Responsive Web include:

• HTML5, CSS and JavaScript refresher

• Introduction to responsive web design (RWD)

• CSS Flexbox and the Bootstrap framework

• The HTML Document Object Model (DOM)

• Libraries for event handing

• Libraries for HTML5 Animation

• Testing and troubleshooting strategies

• Markup validation

• Accessibility and search engine optimisation (SEO)

3. Teaching and learning activities:

Class Hours

Learning is predominately lab-based, and evolves through a series of short programming tasks that reinforce understanding of the topics listed above. Lab sessions include the introduction of theoretical concepts and student-led presentations of development work. You are advised strongly to compile a ‘code repository’ locally or on a web-based service such as GitHub. The repository is a useful tool for keeping track of specific coding techniques and streamlining your workflow.

Independent Learning

Independent study helps consolidate and extend your lab-based learning. Short research and development tasks are set regularly to aid your review of in-class material and support your understanding of HTML5, CSS3 and JavaScript techniques. Often these exercises encourage collaboration with one or more learning partners. You are provided with a bank of learning resources via Minerva that comprise tutor presentations (with notes), code snippets and links to LinkedIn Learning video tutorials. It is good practice to get into a routine of exploring these materials, giving yourself enough time to follow up on topics that particularly interest you or require further clarification.

Assessment Item 1:

• Assessment Type: Course Work

• Description: Clone Tasks. A set of emulation exercises that engage key responsive web design techniques.

• % Weighting: 50%

Assessment Item 2:

• Assessment Type: Course Work

• Description: Multi-Device Application

• % Weighting: 50%