Instructor									Course code							Prerequisites
Self-directed									LTW0012							Web Dev 2

Classes								Labs								Homework
None								None								~90 h

Assessment	Value	Week №	CLRs
Exercise: Update your computer!	3.0%	Week 01	1, 2
Activity: Semantics Soothsayer	0.7%	Week 02	1, 2
Exercise: Me-oh-my HTML	3.0%	Week 02	1, 2
Exercise: Modularity mindfulness	3.0%	Week 02	1, 2
Activity: Naming Conventioneer	0.7%	Week 03	1, 2, 3, 4
Lesson: Exporting from Photoshop	0.7%	Week 03	1, 2, 3, 4
Lesson: Exporting from Illustrator	0.7%	Week 03	1, 2, 3, 4
Exercise: Production prepping & compression	3.0%	Week 03	1, 2, 3, 4
Lesson: Background images	0.7%	Week 04	1, 2, 3, 4
Lesson: Retina images	0.7%	Week 04	1, 2, 3, 4
Exercise: Leafy decorations	3.0%	Week 04	1, 2, 3, 4
Exercise: Retina gallery	3.0%	Week 04	1, 2, 3, 4
Activity: Path Paladin	0.7%	Week 05	1, 2, 5, 6
Activity: Alt Attributer	0.7%	Week 05	1, 2, 5, 6
Lesson: Fancy hover boxes	0.7%	Week 05	1, 2, 5, 6
Exercise: Interactive polaroids	3.0%	Week 05	1, 2, 5, 6
Exercise: But ’em buttons	3.0%	Week 05	1, 2, 5, 6
Activity: Effect Effector	0.7%	Week 06	1, 2, 5, 6
Lesson: Animated clock	0.7%	Week 06	1, 2, 5, 6
Exercise: Frozen—not in time	3.0%	Week 06	1, 2, 5, 6
Lesson: SVG smiley face	0.7%	Week 07	1, 2, 3, 4, 5, 6
Exercise: Interactive SVG	3.0%	Week 07	1, 2, 3, 4, 5, 6
Exercise: SVG line drawing	3.0%	Week 07	1, 2, 3, 4, 5, 6
Activity: SVG Synthesizer	0.7%	Week 09	1, 2, 3, 4, 5, 6
Lesson: Using SVG icons	0.7%	Week 09	1, 2, 3, 4, 5, 6
Exercise: SVG icons sets	3.0%	Week 09	1, 2, 3, 4, 5, 6
Lesson: Micro interface branding	0.7%	Week 10	1, 2, 3, 4, 5, 6
Lesson: Different crops, same image	0.7%	Week 10	1, 2, 3, 4, 5, 6
Exercise: Action hero card with actions	3.0%	Week 10	1, 2, 3, 4, 5, 6
Exercise: Jurassic dashboard	3.0%	Week 10	1, 2, 3, 4, 5, 6
Activity: Accessibility Adapter	0.7%	Week 11	1, 2, 4, 7
Lesson: Using a11y testing tools	0.7%	Week 11	1, 2, 4, 7
Exercise: Only keyboards allowed	3.0%	Week 11	1, 2, 4, 7
Exercise: Kraken good accessibility	3.0%	Week 11	1, 2, 4, 7
Activity: VoiceOver Voyageur	0.7%	Week 12	1, 2, 4, 8
Lesson: Checking performance	0.7%	Week 12	1, 2, 4, 8
Exercise: Fastness fixer	3.0%	Week 12	1, 2, 4, 8
Exercise: This site ain’t no sloth	3.0%	Week 12	1, 2, 4, 8
Activity: Performance Prognosticator	0.7%	Week 13	1, 2, 3, 4, 5, 6, 7, 8, 9
Exercise: Animal rescue website UX	3.0%	Week 13	1, 2, 3, 4, 5, 6, 7, 8, 9
Project: Animal rescue website	15.0%	Week 13	1, 2, 3, 4, 5, 6, 7, 8, 9
Activity: License Liberator	0.7%	Week 14	1, 2, 3, 4, 5, 6, 7, 8, 9
Exercise: Animal rescue website check-in	3.0%	Week 14	1, 2, 3, 4, 5, 6, 7, 8, 9
Exercise: Performance testing	3.0%	Week 15	1, 2, 3, 4, 5, 6, 7, 8, 9
Exercise: Accessibility testing	3.0%	Week 15	1, 2, 3, 4, 5, 6, 7, 8, 9
Exercise: Browser testing	3.0%	Week 15	1, 2, 3, 4, 5, 6, 7, 8, 9
46 total assessments	100%	15 weeks
10 activities, 12 lessons, 23 exercises, 1 project

Introduction

CLRs: 1, 2

An overview of the course this term, assignments, projects and weekly tasks.
1. Web Dev 3 intro slide deck
1. Update your computer!
Review

CLRs: 1, 2

Review exercises to get everybody warmed up and to flex the code muscles.
1. All ’bout them semantics
2. Gotta sketch ’em all
1. Semantics Soothsayer
2. Me-oh-my HTML
1. Modularity mindfulness
Preparing images

CLRs: 1, 2, 3, 4

Discover how to prepare images in Illustrator & Photoshop and export them properly for the web.
1. Preparing images slide deck
2. Image formats
1. Images for the web videos
1. Production prepping & compression
Using images

CLRs: 1, 2, 3, 4

Explore all the different methods to use images on websites and their ramifications.
1. Background & retina images slide deck
1. Using images videos
2. Responsive & retina images videos
1. Background images
2. Retina images
1. Leafy decorations
2. Retina gallery
Transforms & transitions

CLRs: 1, 2, 5, 6

Look at the effects that can be created with CSS using transforms and transitions.
1. Transforms & transitions slide deck
1. CSS animations & effects videos
1. Interactive polaroids
2. But ’em buttons
Animations

CLRs: 1, 2, 5, 6

Look at the second major CSS effect type: animations—auto-playing, keyframes & complex effects.
1. CSS animations slide deck
2. Stories on board
1. CSS animations & effects videos
1. Effect Effector
2. Animated clock
1. Frozen—not in time
Advanced SVG

CLRs: 1, 2, 3, 4, 5, 6

An in-depth look at the code behind SVG files, writing them by hand, and adding effects to them.
1. Advanced SVG slide deck
2. Index card Q&A
1. Advanced SVG videos
1. SVG smiley face
2. Interactive SVG
1. SVG line drawing
Reading week—no classes

CLRs: 1, 2, 3, 4, 5, 6

No classes, labs or new homework this week—get caught up!
1. Mid-course feedback
1. Continue assignments
SVG icons

CLRs: 1, 2, 3, 4, 5, 6

Look at how to use SVG symbols to create SVG sprite sheets for better performance and reusable systems.
1. SVG icons slide deck
1. Advanced SVG videos
1. SVG Synthesizer
2. Using SVG icons
1. SVG icons sets
Icons, images & interfaces

CLRs: 1, 2, 3, 4, 5, 6

Explore more complex SVG icons tricks & alternative ways to make images responsive while working on create few different application interfaces.
1. Many images, you choose slide deck
1. Micro interface branding
2. Different crops, same image
1. Action hero card with actions
2. Jurassic dashboard
Accessibility testing

CLRs: 1, 2, 4, 7

Explore the myriad of helpful accessibility tools to help make our websites truly humanist.
1. Solving accessibility problems
2. Using VoiceOver
1. Accessibility videos
2. Print media queries videos
1. Kraken good accessibility
Performance

CLRs: 1, 2, 4, 8

Slow websites are the worst—identify what makes websites slow and how to fix the problems.
1. Performance slide deck
1. Performance videos
1. This site ain’t no sloth
Animal rescue website planning

CLRs: 1, 2, 3, 4, 5, 6, 7, 8, 9

Start your animal rescue website by sketching, writing some text & starting to code.
1. Index card Q&A
1. Performance Prognosticator
2. Animal rescue website UX
1. Animal rescue website
Animal rescue website coding

CLRs: 1, 2, 3, 4, 5, 6, 7, 8, 9

Progress makes perfect: continue working on your fancy website and show the teacher some progress.
1. Course feedback
1. License Liberator
2. Animal rescue website check-in
1. Animal rescue website
Animal rescue website completion

CLRs: 1, 2, 3, 4, 5, 6, 7, 8, 9

Finish the fancy website by the end of the term.
1. Request for grade
2. Animal rescue website

Marking scheme

Activities & lessons

15% — 22 @ 0.7% each

Complete/incomplete
Formative assessment

Exercises

70% — 23 @ 3.0% each

Complete/incomplete
Formative assessment

Big projects

15% — 1 @ 15.0% each

Proof you learned everything
Summative assessment

Course learning requirements +

1
Use modern tools to make websites

Host websites on cloud platforms
Use version control software to track code changes
Use online collaboration tools for getting assistance
Get feedback from automated tools and apply the suggested changes

2
Prepare websites for multiple devices and use cases

Make adaptive layouts that change and respond to different devices, screen sizes & type sizes
Use design techniques to structure layouts for increased usability of a website to meet any user’s need

3
Use proper file, folder, and code organization

Create links between pages, maximizing utility of URLs
Organize HTML, CSS, and images into standardized locations and folders
Group and collect CSS into separate organized files
Embed external resources, like images, into websites with the correct path

4
Execute proper exporting and compression of web graphics

Choose properly between common web image formats: JPG, PNG, SVG
Export images from graphical design tools into the correct format
Optimize and compress images for the best performance

5
Apply mathematical skills to align and time elements

Use positioning and coordinate systems to align items on the screen
Apply transformations, like rotation, to elements on screen
Execute code multiple times, in loops, to perform some actions
Apply knowledge of timing to create interactions and animations

6
Apply interactive and motion effects to websites

Develop transitional animations for interface elements
Apply keyframe-based animations to on screen elements for extra interactivity
Apply animations on user interaction or automatically
Demonstrate application of math skills while creating animations
Manipulate illustrated graphics to add animations and interactions

7
Make websites accessible to all human beings

Apply understanding of different impairments affecting human beings
Execute coding best practices to enhance accessibility of web pages
Test websites with accessibility tools and fix problems

8
Optimize web performance

Compress & format images correctly for best performance
Get feedback from automated tools and apply suggested changes

9
Plan, prototype and develop websites

Sketch components & how they adapt to different screen sizes
Wireframe pages to describe the content and basic layout
Build responsive prototypes for websites for all devices
Test websites on multiple devices for the best compatibility

Vocational learning outcomes +

Description															Taught			Assessed			Culminating performance
1 — Conceptualize and develop design solutions using principles of design to create visual communications that meet the needs of the projects.
2 — Employ the design process to create design solutions that meet the project objectives and the needs of the client and/or user.
3 — Plan, create and use photography, illustration and typography in design layouts to meet the requirements of the creative brief.
4 — Design, develop and create a variety of media products using relevant, current and/or emerging technologies.
5 — Communicate ideas, design concepts and opinions clearly and persuasively to others.
6 — Use recognized industry practices throughout the design process and related business tasks.
7 — Plan, implement, and evaluate graphic design projects using project management skills to deliver quality work to clients according to schedule and within budget.
8 — Complete all work in a professional and ethical manner, and in accordance with all applicable legislation and regulations.
9 — Keep current with visual media design trends, technologies and industry practices using strategies that enhance work performance and guide professional development.
10 — Identify and apply discipline-specific practices that contribute to the local and global community through social responsibility, economic commitment and environmental stewardship.

Essential employability skills +

Description															Taught			Assessed			Culminating performance
1 — Communicate clearly, concisely and correctly in the written, spoken and visual form that fulfills the purpose and meets the needs of the audience.
2 — Respond to written, spoken or visual messages in a manner that ensures effective communication.
3 — Execute mathematical operations accurately.
4 — Apply a systematic approach to solve problems.
5 — Use a variety of thinking skills to anticipate and solve problems.
6 — Locate, select, organize and document information using appropriate technology and information systems.
7 — Analyze, evaluate and apply relevant information from a variety of sources.
8 — Show respect for diverse opinions, values, belief systems and contributions of others.
9 — Interact with others in groups or teams in ways that contribute to effective working relationships and the achievement of goals.
10 — Manage the use of time and other resources to complete projects.
11 — Take responsibility for one's own actions, decisions and consequences.

Web Dev 3

Weeks

Marking scheme

Activities & lessons

Exercises

Big projects

Course learning requirements +

Vocational learning outcomes +

Essential employability skills +

Markbot