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.

    1. Web Dev 4 intro slide deck
    1. Acronym Annihilator
    2. Install more developer tools
    3. Responsive banner
    1. eCommerce UX
  2. 2

    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. Browser Buster
    2. eCommerce UX inspiration
    3. eCommerce UX check-in
    1. eCommerce UX
  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.

    1. Pattern libraries slide deck
    2. Piecing Jekyll together
    1. CSS variables videos
    2. Pattern libraries videos
    1. Using CSS variables
    2. Pattern library set-up
    3. Pattern library hosting
    1. Typography & colours
  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.

    1. Markdown & YAML slide deck
    2. Fried data
    1. Markdown videos
    2. YAML videos
    1. Pattern library customization
    2. Making patterns
    3. Buttons!
    1. So many icons!
    2. Images & cards
  5. 5

    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. Designing form errors
    2. Integrating JavaScript into your pattern library
    3. Documenting patterns
    1. Forms & fields
  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.

    1. Advanced CSS interactions videos
    1. URL Explorer
    2. JavaScript-less carousel
    3. Informal accessibility testing
    1. Navigations & sections
  7. 7

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

    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
  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.

    1. Building pages with Jekyll slide deck
    1. Specificity Spy
    2. Sharing code with layouts
    3. Building pages with patterns
    1. The leftovers
  10. 10

    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. Selector Surgeon
    2. Preparing product data
    3. Jekyll generators
    1. Homepage 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.

    1. Documentation for all slide deck
    2. Documentation usability testing
    1. Markdown Manipulator
    2. Finalizing pattern docs
    1. 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.

    1. Git with many slide deck
    2. Index card Q&A
    1. YAML Yodeller
    2. Repo setup & branching
    3. Updating from master
    1. Project hand-off & documentation
    2. Product details page template
  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.

    1. Merges & approvals slide deck
    1. Merging teammate work
    2. Project hand-off & documentation
    1. Checkout form page template
  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.

    1. Course feedback
    1. Teammate feedback
    2. Surprise ecommerce page 1
    1. Surprise ecommerce page 2
    2. Finalized pattern library
  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.

    1. Performance testing
    2. Accessibility testing
    3. Browser testing
    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.