Web Dev 3

The modern web is not just functional but also beautiful. Students apply visual design best practices to include more user-friendly graphics, iconography, animations, and rich interactions to make their websites functional, delightful, and performant.

Instructor Course code Prerequisites
Self-directed LTW0012 Web Dev 2
Classes Labs Homework
None None ~90 h
  1. 1

    Introduction

    CLRs: 1, 2

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

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

    Review

    CLRs: 1, 2

    Review exercises to get everybody warmed up and to flex the code muscles.

    1. All ’bout them semantics
    2. Gotta sketch ’em all
    1. Semantics Soothsayer
    2. Me-oh-my HTML
    1. Modularity mindfulness
  3. 3

    Preparing images

    CLRs: 1, 2, 3, 4

    Discover how to prepare images in Illustrator & Photoshop and export them properly for the web.

    1. Preparing images slide deck
    2. Image formats
    1. Images for the web videos
    1. Naming Conventioneer
    2. Exporting from Photoshop
    3. Exporting from Illustrator
    1. Production prepping & compression
  4. 4

    Using images

    CLRs: 1, 2, 3, 4

    Explore all the different methods to use images on websites and their ramifications.

    1. Background & retina images slide deck
    1. Using images videos
    2. Responsive & retina images videos
    1. Background images
    2. Retina images
    1. Leafy decorations
    2. Retina gallery
  5. 5

    Transforms & transitions

    CLRs: 1, 2, 5, 6

    Look at the effects that can be created with CSS using transforms and transitions.

    1. Transforms & transitions slide deck
    1. CSS animations & effects videos
    1. Path Paladin
    2. Alt Attributer
    3. Fancy hover boxes
    1. Interactive polaroids
    2. But ’em buttons
  6. 6

    Animations

    CLRs: 1, 2, 5, 6

    Look at the second major CSS effect type: animations—auto-playing, keyframes & complex effects.

    1. CSS animations slide deck
    2. Stories on board
    1. CSS animations & effects videos
    1. Effect Effector
    2. Animated clock
    1. Frozen—not in time
  7. 7

    Advanced SVG

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

    An in-depth look at the code behind SVG files, writing them by hand, and adding effects to them.

    1. Advanced SVG slide deck
    2. Index card Q&A
    1. Advanced SVG videos
    1. SVG smiley face
    2. Interactive SVG
    1. SVG line drawing
  8. 8

    Reading week—no classes

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

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

    1. Mid-course feedback
    1. Continue assignments
  9. 9

    SVG icons

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

    Look at how to use SVG symbols to create SVG sprite sheets for better performance and reusable systems.

    1. SVG icons slide deck
    1. Advanced SVG videos
    1. SVG Synthesizer
    2. Using SVG icons
    1. SVG icons sets
  10. 10

    Icons, images & interfaces

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

    Explore more complex SVG icons tricks & alternative ways to make images responsive while working on create few different application interfaces.

    1. Many images, you choose slide deck
    1. Micro interface branding
    2. Different crops, same image
    1. Action hero card with actions
    2. Jurassic dashboard
  11. 11

    Accessibility testing

    CLRs: 1, 2, 4, 7

    Explore the myriad of helpful accessibility tools to help make our websites truly humanist.

    1. Solving accessibility problems
    2. Using VoiceOver
    1. Accessibility videos
    2. Print media queries videos
    1. Accessibility Adapter
    2. Using a11y testing tools
    3. Only keyboards allowed
    1. Kraken good accessibility
  12. 12

    Performance

    CLRs: 1, 2, 4, 8

    Slow websites are the worst—identify what makes websites slow and how to fix the problems.

    1. Performance slide deck
    1. Performance videos
    1. VoiceOver Voyageur
    2. Checking performance
    3. Fastness fixer
    1. This site ain’t no sloth
  13. 13

    Animal rescue website planning

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

    Start your animal rescue website by sketching, writing some text & starting to code.

    1. Index card Q&A
    1. Performance Prognosticator
    2. Animal rescue website UX
    1. Animal rescue website
  14. 14

    Animal rescue website coding

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

    Progress makes perfect: continue working on your fancy website and show the teacher some progress.

    1. Course feedback
    1. License Liberator
    2. Animal rescue website check-in
    1. Animal rescue website
  15. 15

    Animal rescue website completion

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

    Finish the fancy website by the end of the term.

    1. Performance testing
    2. Accessibility testing
    3. Browser testing
    1. Request for grade
    2. Animal rescue website

Marking scheme

Activities & lessons

15% — 22 @ 0.7% each

  • Complete/incomplete
  • Formative assessment

Exercises

70% — 23 @ 3.0% each

  • Complete/incomplete
  • Formative assessment

Big projects

15% — 1 @ 15.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
Use proper file, folder, and code organization

  • Create links between pages, maximizing utility of URLs
  • Organize HTML, CSS, and images into standardized locations and folders
  • Group and collect CSS into separate organized files
  • Embed external resources, like images, into websites with the correct path

4
Execute proper exporting and compression of web graphics

  • Choose properly between common web image formats: JPG, PNG, SVG
  • Export images from graphical design tools into the correct format
  • Optimize and compress images for the best performance

5
Apply mathematical skills to align and time elements

  • Use positioning and coordinate systems to align items on the screen
  • Apply transformations, like rotation, to elements on screen
  • Execute code multiple times, in loops, to perform some actions
  • Apply knowledge of timing to create interactions and animations

6
Apply interactive and motion effects to websites

  • Develop transitional animations for interface elements
  • Apply keyframe-based animations to on screen elements for extra interactivity
  • Apply animations on user interaction or automatically
  • Demonstrate application of math skills while creating animations
  • Manipulate illustrated graphics to add animations and interactions

7
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

8
Optimize web performance

  • Compress & format images correctly for best performance
  • Get feedback from automated tools and apply suggested changes

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