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

    Introduction

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

    1. Web Dev 5 intro slide deck
    1. Update your computer!
  2. 2

    Portfolio overview

    CLRs: 7

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

    1. Portfolio overview slide deck
    1. Portfolio inspiration
    2. Choosing a domain
    1. 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.

    1. Domains & DNS slide deck
    2. Email account types slide deck
    1. Domains & DNS videos
    1. Buying a domain & hosting setup
    2. Buying an email address
    1. Portfolio content
  4. 4

    Writing for the web

    CLRs: 2, 3, 7

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

    1. The web of text
    2. Writing with personality
    1. Writing for the Web videos
    1. Domain Destroyer
    2. Writing a Readme
    3. Paper wireframes
    1. Pattern library
  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.

    1. Pattern library check-in
    1. Pattern library
  6. 6

    Portfolio pattern library critiques

    CLRs: 2, 7

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

    1. Index card Q&A
    1. Pattern library critiques
    1. Pattern library
  7. 7

    SEO, enhanced metadata & analytics

    CLRs: 4, 7

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

    1. SEO & metadata slide deck
    2. SEO-ify for search-ification
    1. Search engine optimization videos
    2. Metadata & enhanced semantics videos
    1. Jekyll Judger
    2. Robot Parts Co.
    3. Portfolio metadata
    1. SEO & metadata
    2. Portfolio design & content
  8. 8

    Reading week—no classes

    CLRs: 4, 7

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

    1. Mid-course feedback
    1. Portfolio design & content
  9. 9

    Video

    CLRs: 5, 7

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

    1. Video slide deck
    1. Video & audio videos
    1. Search Seer
    2. Video background
    1. Portfolio design & content
  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.

    1. Video Venturer
    2. Portfolio check-in
    1. Portfolio design & content
  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.

    1. Alignment Actuator
    2. Browser testing
    3. Portfolio peer evaluations
    1. Portfolio fixes
  12. 12

    Performance

    CLRs: 2, 3, 5, 6, 7

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

    1. Advanced performance slide deck
    1. Advanced performance videos
    1. Liquid Locomotor
    2. Performance, CloudFlare & web fonts
    3. Portfolio peer evaluations
    1. Portfolio performance
  13. 13

    Progressive enhancement & accessibility

    CLRs: 2, 3, 5, 6, 7

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

    1. Index card Q&A
    1. Performance Perfector
    2. Accessibility testing
    1. Final portfolio website
  14. 14

    404 pages

    CLRs: 2, 3, 5, 6, 7

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

    1. Great 404 pages slide deck
    2. Course feedback
    1. HTTP Hoodwinker
    2. 404 page
    1. Final 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.

    1. Launch your Portfolio!
    1. Performance testing
    2. Accessibility testing
    3. Browser testing
    1. Final portfolio website

Marking scheme

Activities & lessons

10% — 14 @ 0.7% each

  • Complete/incomplete
  • Formative assessment

Exercises

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

1
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

2
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

3
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

4
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

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