Unit 14: Website Design

Lesson 8: Adding JavaScript Features from Google, Bootstrap & jQuery

This lesson includes step by step guidance on modifying an ASP.NET Website by adding appropriate functionality using JavaScript from Google Maps, Bootstrap and jQuery-UI

Assessment

16/Jun/2015 Assessment 1: Developing an Interactive Website

Assessment Criteria

3.1 implement a fully-functional interactive website using a design specification.

Lesson Activities

30 Minutes Tutor & Students: Add a google map to the contact page
30 Minutes Tutor & Students: Add Bootstrap JavaScript fetures to your website
15 Minutes Tutor: Presentation on Progressive Enhancement Using CSS3
30 Minutes Tutor & Students: Modify and add css code to change the style and appearance of the website to match the original design.
30 Minutes Tutor & Students: Add jQuery-UI affects and use customised themes in terms of styling.

Useful Resources

Video 1: Adding a Google Map to the contact page
Video 2: Adding Bootstrap JS features to the website
Video 3: Overidding Bootstrap Styles using CSS3
Video 4: Adding jQuery-ui effects and themes
Website: Bootstrap CSS & Components This site is worth reading through to understand the various CSS features available in particular the grid system.
Web Page: Website Check List
Web Page: Website Improvements
Web Page: Website Test Plan
Website: Gradient Fill Generator This site provides an easy way of creating the code for gradient fills
Website: Color Schemes This site provides an easy way of selecting a set of colours that will blend together for a website