Web Dev 4

Design consistency in large websites is hard to achieve. Using visual design & code best practices, students build a cohesive library of common components, patterns, and styles. Small teams exchange pattern libraries and demonstrate the many components by creating full page template deliverables.

Instructor Course code Prerequisites
Self-directed LTW0013 Web Dev 3
Classes Labs Homework
None None ~90 h


  1. 1

    Intro & reviews

    CLRs: 1, 2, 7, 8

    An introduction to the term, including the term-long project, and a simple, quick review.

  2. 2

    eCommerce UX work period

    CLRs: 1, 2, 7, 8

    Continue work on the eCommerce UX and get feedback from the teacher.

  3. 3

    Pattern libraries

    CLRs: 1, 2, 3, 4

    An introduction to pattern libraries, setting up a basic library, and populating it with typography-related styles.

  4. 4

    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.

  5. 5


    CLRs: 1, 2, 3, 4

    Complex websites are full of forms, and there are lots of elements that need to be designed & patterned.

  6. 6

    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.

  7. 7

    Headers & footers

    CLRs: 1, 2, 3, 4, 5

    Create the header and footer patterns separately so they can be tested and reused.

  8. 8

    Reading week—no classes

    CLRs: 1, 2, 3, 4, 5

    No classes, labs or new homework this week—get caught up!

  9. 9

    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.

  10. 10

    Home page template

    CLRs: 1, 2, 3, 4, 5

    Use all the finished patterns to create the home page template.

  11. 11

    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.

  12. 12

    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.

  13. 13

    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.

  14. 14

    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.

  15. 15

    Finalize all the things

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

    Browser & accessibility test all the page templates and finalize the pattern library.

Marking scheme

Activities & lessons

15%25 @ 0.6% each

  • Complete/incomplete
  • Formative assessment


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

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

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

Systemize website content

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

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

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

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

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

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.