ckportfolio.com - Advanced Web Design, CSS and JavaScript Frameworks

Advanced Web Design, CSS and JavaScript Frameworks

Advanced Web Design, CSS and JavaScript Frameworks

Welcome to the official OCAD University Continuing Studies Advanced Web Art and Design, CSS and JavaScript Frameworks course.

This is a hands-on, fast-paced course that builds on skills and concepts learned in the introductory Web Art & Design course. Students gain a basic understanding of JavaScript and learn how to build interactive content using CSS and JavaScript. This is a qualifying course towards the Certificate in Digital Media Skills.

Modules will be released in a rolling fashion over the next six weeks (last updated: February 23, 2021).

Tools and Resources

Code Editor
Tools
References

Week 1

Concept
Additional Resources (new)
Assignment: jQuery-based Personal Microsite

Abstract: Create a simple jQuery-based microsite that introduces your profile (or company) and conveys the visual identity for your brand.

Technical Expectations: Each microsite needs to be hosted on jsFiddle (with its latest revision "set as base"), and should contain at least three "pages" that users can switch back and forth using jQuery, via the following effects:

  • show(), slideDown(), fadeIn(), or any other "show" effects
  • hide(), slideUp(), fadeOut(), or any other "hide effects

Sample project: http://jsfiddle.net/riskun/NAveC/show

Guide

Week 2

Concept
Additional Resources (new)
Assignment: Basic Calculator

Abstract: Create a simple arithmetic calculator that performs addition, subtraction, multiplication, and division with whole numbers.

Technical Expectations: This assignment makes use of various programming concepts explored in the lecture slideshow, including:

  • Variables
  • Functions
  • Operators
  • Conditionals
  • Try and catch

The students are expected to produce a calculator shell (containing various buttons and "screen") via HTML and CSS, whose components are augmented using various jQuery and JavaScript commands.

Sample project: http://jsfiddle.net/riskun/H972G/show

Guide

Week 3

Concept
Additional Resources (new)
Assignment: AJAX-based Microsite

Abstract: Based on knowledge gained from the Week 1 microsite exercise and the provided course materials, create another microsite that loads external pages into its content pane via AJAX techniques.

Technical Expectations: This assignment is to be hosted on the temporary server (ocad.ckprototype.com) and contain at least three modular pages that exist outside the shell HTML (index.html).

Guide

Week 4

Concept
Additional Resources (new)
Assignment: API Proof-Of-Concept Exercises

Abstract: Create one or more jsFiddle exercises that retrieve and display relevant data from external web services, including Google, Wordnik, and Flickr.

Technical Expectations: Each assignment should make a successful AJAX connection to relevant web services and demonstrate the basic concepts of AJAX and JSON parsing.

Reference
Guide

Week 5

Concept
Additional Resources (new)
Assignment: jQuery Plugin Exercises

Abstract: Create a single jsFiddle exercise that demonstrates the basic application of Bootstrap Framework, as well as jQuery plugins: Cycle, Isotope, and Featherlight.

Technical Expectations: The students are expected to make valid connections to external jQuery plugins to perform particular tasks without building from scratch.

Sample project: http://jsfiddle.net/riskun/bLox32wg

Guide

Week 6

Concept
Assignment: PHP-MySQL Introduction

Abstract: Create a single jsFiddle exercise that demonstrates the basic application of Bootstrap Framework, as well as jQuery plugins: Cycle, Isotope, and Featherlight.

Technical Expectations: The students are expected to make valid connections to external jQuery plugins to perform particular tasks without building from scratch.

Sample project: http://ocad.ckprototype.com/public/wk6-ck/

Exercise materials: Download

Guide
Fin