Instructor									Course code							Prerequisites
Self-directed									LTW0013							Web Dev 3

Classes								Labs								Homework
None								None								~90 h

Assessment	Value	Week №	CLRs
Activity: Acronym Annihilator	0.6%	Week 01	1, 2, 7, 8
Lesson: Install more developer tools	0.6%	Week 01	1, 2, 7, 8
Exercise: Responsive banner	2.7%	Week 01	1, 2, 7, 8
Project: eCommerce UX	10.0%	Week 01	1, 2, 7, 8
Activity: Browser Buster	0.6%	Week 02	1, 2, 7, 8
Exercise: eCommerce UX inspiration	2.7%	Week 02	1, 2, 7, 8
Exercise: eCommerce UX check-in	2.7%	Week 02	1, 2, 7, 8
Lesson: Using CSS variables	0.6%	Week 03	1, 2, 3, 4
Lesson: Pattern library set-up	0.6%	Week 03	1, 2, 3, 4
Lesson: Pattern library hosting	0.6%	Week 03	1, 2, 3, 4
Exercise: Typography & colours	2.7%	Week 03	1, 2, 3, 4
Lesson: Pattern library customization	0.6%	Week 04	1, 2, 3, 4, 7
Lesson: Making patterns	0.6%	Week 04	1, 2, 3, 4, 7
Exercise: Buttons!	2.7%	Week 04	1, 2, 3, 4, 7
Exercise: So many icons!	2.7%	Week 04	1, 2, 3, 4, 7
Exercise: Images & cards	2.7%	Week 04	1, 2, 3, 4, 7
Lesson: Designing form errors	0.6%	Week 05	1, 2, 3, 4
Lesson: Integrating JavaScript into your pattern library	0.6%	Week 05	1, 2, 3, 4
Lesson: Documenting patterns	0.6%	Week 05	1, 2, 3, 4
Exercise: Forms & fields	2.7%	Week 05	1, 2, 3, 4
Activity: URL Explorer	0.6%	Week 06	1, 2, 3, 4, 5
Lesson: JavaScript-less carousel	0.6%	Week 06	1, 2, 3, 4, 5
Exercise: Informal accessibility testing	2.7%	Week 06	1, 2, 3, 4, 5
Exercise: Navigations & sections	2.7%	Week 06	1, 2, 3, 4, 5
Activity: Variable Validator	0.6%	Week 07	1, 2, 3, 4, 5
Exercise: Informal browser testing	2.7%	Week 07	1, 2, 3, 4, 5
Exercise: Headers & footers	2.7%	Week 07	1, 2, 3, 4, 5
Activity: Specificity Spy	0.6%	Week 09	1, 2, 3, 4, 5
Lesson: Sharing code with layouts	0.6%	Week 09	1, 2, 3, 4, 5
Lesson: Building pages with patterns	0.6%	Week 09	1, 2, 3, 4, 5
Exercise: The leftovers	2.7%	Week 09	1, 2, 3, 4, 5
Activity: Selector Surgeon	0.6%	Week 10	1, 2, 3, 4, 5
Lesson: Preparing product data	0.6%	Week 10	1, 2, 3, 4, 5
Lesson: Jekyll generators	0.6%	Week 10	1, 2, 3, 4, 5
Exercise: Homepage template	2.7%	Week 10	1, 2, 3, 4, 5
Activity: Markdown Manipulator	0.6%	Week 11	1, 2, 3, 4, 5, 7, 8
Exercise: Finalizing pattern docs	2.7%	Week 11	1, 2, 3, 4, 5, 7, 8
Exercise: Product list page template	2.7%	Week 11	1, 2, 3, 4, 5, 7, 8
Activity: YAML Yodeller	0.6%	Week 12	1, 2, 3, 4, 5, 7
Lesson: Repo setup & branching	0.6%	Week 12	1, 2, 3, 4, 5, 7
Lesson: Updating from master	0.6%	Week 12	1, 2, 3, 4, 5, 7
Exercise: Product details page template	2.7%	Week 12	1, 2, 3, 4, 5, 7
Lesson: Merging teammate work	0.6%	Week 13	1, 2, 3, 4, 5, 7, 8
Exercise: Checkout form page template	2.7%	Week 13	1, 2, 3, 4, 5, 7, 8
Exercise: Teammate feedback	2.7%	Week 14	1, 2, 3, 4, 5, 7
Exercise: Surprise ecommerce page 1	2.7%	Week 14	1, 2, 3, 4, 5, 7
Exercise: Surprise ecommerce page 2	2.7%	Week 14	1, 2, 3, 4, 5, 7
Project: Finalized pattern library	10.0%	Week 14	1, 2, 3, 4, 5, 7
Exercise: Performance testing	2.7%	Week 15	1, 2, 3, 4, 5, 6, 7
Exercise: Accessibility testing	2.7%	Week 15	1, 2, 3, 4, 5, 6, 7
Exercise: Browser testing	2.7%	Week 15	1, 2, 3, 4, 5, 6, 7
51 total assessments	100%	15 weeks
8 activities, 17 lessons, 24 exercises, 2 projects

Intro & reviews

CLRs: 1, 2, 7, 8

An introduction to the term, including the term-long project, and a simple, quick review.
1. Web Dev 4 intro slide deck
1. eCommerce UX
eCommerce UX work period

CLRs: 1, 2, 7, 8

Continue work on the eCommerce UX and get feedback from the teacher.
1. Finding eCommerce patterns
1. eCommerce UX
Pattern libraries

CLRs: 1, 2, 3, 4

An introduction to pattern libraries, setting up a basic library, and populating it with typography-related styles.
1. Pattern libraries slide deck
2. Piecing Jekyll together
1. CSS variables videos
2. Pattern libraries videos
1. Typography & colours
Buttons, icons & images!

CLRs: 1, 2, 3, 4, 7

Design all the button styles, make the icons sprite sheet, and create common patterns for images: captions, cards, containers and more.
1. Markdown & YAML slide deck
2. Fried data
1. Markdown videos
2. YAML videos
1. So many icons!
2. Images & cards
Forms

CLRs: 1, 2, 3, 4

Complex websites are full of forms, and there are lots of elements that need to be designed & patterned.
1. Form error messages slide deck
2. Form design best practices
1. Forms & fields
Navigations & sections

CLRs: 1, 2, 3, 4, 5

Big websites usually have multiple navigation styles, each navigation is a unique design. And different sections that act as secondary navigation driving people to specific locations.
1. Advanced CSS interactions videos
1. Navigations & sections
Headers & footers

CLRs: 1, 2, 3, 4, 5

Create the header and footer patterns separately so they can be tested and reused.
1. Index card Q&A
2. Navigation patterns
1. Variable Validator
2. Informal browser testing
1. Headers & footers
Reading week—no classes

CLRs: 1, 2, 3, 4, 5

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

CLRs: 1, 2, 3, 4, 5

Carousels and tab systems are popular on lots of websites. Learn to implement a functional and reusable carousel without JavaScript.
1. Building pages with Jekyll slide deck
1. The leftovers
Home page template

CLRs: 1, 2, 3, 4, 5

Use all the finished patterns to create the home page template.
1. Wet code is bad code slide deck
2. Piecing pages with patterns
1. Homepage template
Product list page template

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

Use all the finalized patterns to generate an example product list page template.
1. Documentation for all slide deck
2. Documentation usability testing
1. Markdown Manipulator
2. Finalizing pattern docs
1. Product list page template
Partnered product details page

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

Hand off your pattern library to another developer so they can create the product details page.
1. Git with many slide deck
2. Index card Q&A
1. Project hand-off & documentation
2. Product details page template
Partnered checkout form page

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

Create the checkout form page using all the form input and common page patterns.
1. Merges & approvals slide deck
1. Merging teammate work
2. Project hand-off & documentation
1. Checkout form page template
Surprise pages!

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

Hand off your pattern library to another developer so they can create the product details page.
1. Course feedback
1. Teammate feedback
2. Surprise ecommerce page 1
1. Surprise ecommerce page 2
2. Finalized pattern library
Finalize all the things

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

Browser & accessibility test all the page templates and finalize the pattern library.
1. Request for grade
2. Finalized pattern library

Marking scheme

Activities & lessons

15% — 25 @ 0.6% each

Complete/incomplete
Formative assessment

Exercises

65% — 24 @ 2.7% each

Complete/incomplete
Formative assessment

Big projects

20% — 2 @ 10.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
Systemize website content

Organize content with plain language and diagrams
Prioritize content to target both humans and computers
Structure content into reproducible systems

4
Analyze common patterns

Find common user interface patterns on websites
Determine best practices for common patterns
Apply patterns to a new website design
Code each pattern individually for maximum reusability

5
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

6
Optimize web performance

Compress & format images correctly for best performance
Get feedback from automated tools and apply suggested changes
Improve rendering performance by delaying secondary resources

7
Develop websites on teams

Use online tools to collaborate with team members
Execute commands using version control software to track code changes between members
Write helpful documentation to support new team members
Learn code written by another person and apply it to a new project

8
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 4

Weeks

Marking scheme

Activities & lessons

Exercises

Big projects

Course learning requirements +

Vocational learning outcomes +

Essential employability skills +

Markbot