Web Dev 6

No web projects are created by just one person—collaboration with other people is fundamental to successful websites. Teams of students organize and create large-scale websites using project management tools, version control systems, online messaging, and issue trackers.

Instructor Course code Prerequisites
Self-directed LTW0015 Web Dev 5
Classes Labs Homework
None None ~21 h
  1. 1

    Introduction & teams

    CLRs: 2, 6

    Term overview, grading, forming teams and a quick discussion on the term’s agile process.

    1. Web Dev 6 intro slide deck
    2. Web app overview slide deck
    1. Team allocation
    2. GitHub project setup
    1. Web app UX
  2. 2

    Project management & GitHub

    CLRs: 1, 2, 6

    Look at online project management tools, like GitHub, and how to code together on the same project.

    1. Planning software slide deck
    2. Naming Planning things is hard
    1. Agile project planning
    2. Web app set up & hosting
    1. Success criteria definitions
    2. Web app UX
  3. 3

    Interactive prototype user testing

    CLRs: 2

    Trade off interactive prototypes and get dedicated feedback for your app design.

    1. UX rubric completion
    1. Security Sniper
    2. UX discussion
    3. Usability testing
    1. Web app prototype
  4. 4

    Diving into code

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

    Start delegating and planning the code’s organization and begin writing code for the different screens of the project.

    1. Many people, one codebase slide deck
    2. Branching woes & branching goes
    1. Git Graduator
    2. Branch & pull request
    3. Team check-in
    1. Web app prototype
  5. 5

    All the patterns, all the time

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

    Break the application into the smallest possible patterns & make a magical pattern library with every possible component.

    1. Index card Q&A
    1. Team check-in
    1. Web app prototype
  6. 6

    Coding out the details

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

    Finalize all the little details of the application screens preparing them for final testing.

    1. Team check-in
    1. Web app prototype
  7. 7

    Final project testing

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

    Perform user, accessibility & browser testing on all the screens of another team’s application design.

    1. Web app rubric completion
    1. Usability testing
    2. Accessibility testing
    3. Browser testing
    1. Final team check-in
    2. Team reflection

Marking scheme

Activities & lessons

4% — 5 @ 0.8% each

  • Complete/incomplete
  • Formative assessment

Exercises

12% — 6 @ 2.0% each

  • Complete/incomplete
  • Formative assessment

Big projects

84% — 4 @ 21.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
  • Use popular code generators and preprocessors

2
Work efficiently in teams

  • Delegate tasks to different team members
  • Follow popular project management approaches
  • Use popular project management organization tools
  • Create planned deliverables after development sprints
  • Use popular online chat systems for team communication
  • Communicate design ideas effectively to groups of people

3
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
  • Apply techniques for making websites load quickly

4
Systemize website content

  • Organize content with plain language and diagrams
  • Prioritize content to target both humans and computers
  • Structure content into reproducible systems
  • Use templates and modules to significantly reduce website duplication

5
Make websites accessible to all human beings

  • Apply coding best practices to enhance accessibility of web pages
  • Test websites with accessibility tools and fix problems

6
Develop a functional web application prototype

  • Apply all web development knowledge & skills
  • Develop solutions to enhance user interaction
  • Use properly licensed and pre-build tools and code to enhance a website
  • Template & design important application screens

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.