Web Dev 5

Graphic designers are hired for their personality and their work quality. The first interaction potential employers have is through the designer’s online presence—most importantly a portfolio website. Leasing personal domains, configuring servers for email addresses, and peer reviews are some of the topics explored to launch a successful personal portfolio website.

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


  1. 1


    An overview of the course this term, assignments, projects and weekly tasks.

  2. 2

    Portfolio overview

    CLRs: 7

    An overview of your portfolio website process & starting a coming soon page.

  3. 3

    Domains, e-mails, hosting

    CLRs: 1, 7

    Look at how domains and DNS work, purchase portfolio website domain and set everything up.

  4. 4

    Writing for the web

    CLRs: 2, 3, 7

    Techniques, styles and formats, like Markdown & YAML, used when writing text for the web.

  5. 5

    Portfolio pattern library work period

    CLRs: 3, 7

    In class work time to spend on coding the pattern library for your portfolio website.

  6. 6

    Portfolio pattern library critiques

    CLRs: 2, 7

    Use class time to complete the pattern library & get critiques on the progress.

  7. 7

    SEO, enhanced metadata & analytics

    CLRs: 4, 7

    Enhance our websites with some honest search engine optimization, social media metadata & tracking analytics.

  8. 8

    Reading week—no classes

    CLRs: 4, 7

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

  9. 9


    CLRs: 5, 7

    A look at compressing video formats and embedding video into websites—as well as hosting video on global servers.

  10. 10

    Portfolio milestone 2 work period

    CLRs: 2, 3, 5, 7

    In class work time to spend on finalizing the basic—JavaScript free—version of your portfolio website.

  11. 11

    Portfolio testing

    CLRs: 2, 3, 5, 7

    Browser and peer testing for your portfolio website on lots of different devices and in lots of situations.

  12. 12


    CLRs: 2, 3, 5, 6, 7

    Dig into making your portfolio website load quickly on all devices and networks.

  13. 13

    Progressive enhancement & accessibility

    CLRs: 2, 3, 5, 6, 7

    Introduction to making JavaScript optional and not ruining accessibility by adding JavaScript.

  14. 14

    404 pages

    CLRs: 2, 3, 5, 6, 7

    Make a fun & personality-appropriate 404 page for your portfolio website.

  15. 15

    Portfolio final testing

    CLRs: 2, 3, 5, 6, 7

    Browser and peer testing for your final portfolio on lots of different devices and in lots of situations.

Marking scheme

Activities & lessons

10%14 @ 0.7% each

  • Complete/incomplete
  • Formative assessment


60%17 @ 3.5% each

  • Complete/incomplete
  • Formative assessment

Big projects

30%3 @ 10.0% each

  • Proof you learned everything
  • Summative assessment

Course learning requirements

Launch a live website on a custom domain

  • Purchase and domain and point it to a web host
  • Purchase a custom email address and hook it up
  • Set up cloud tools for better performance & security

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

Apply the technical constraints of the Web to design projects

  • Make adaptive layouts that change and respond to different devices, screen sizes & type sizes
  • Write progressively enhanced code for any device
  • Apply techniques for making websites load quickly

Apply techniques to improve search rankings

  • Write code that follows best practices to enhance distribution and effectiveness in search results
  • Apply metadata systems to enhance website presence on social media platforms
  • Apply data formats to enhance search results with more detailed information

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

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 an interactive portfolio website

  • 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
  • Track website usage to find and plan around possible errors

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.