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

Weeks

  1. 1

    Introduction

    CLRs: 1, 2

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

  2. 2

    Review

    CLRs: 1, 2

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

  3. 3

    Preparing images

    CLRs: 1, 2, 3, 4

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

  4. 4

    Using images

    CLRs: 1, 2, 3, 4

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

  5. 5

    Transforms & transitions

    CLRs: 1, 2, 5, 6

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

  6. 6

    Animations

    CLRs: 1, 2, 5, 6

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

  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.

  8. 8

    Reading week—no classes

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

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

  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.

  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.

  11. 11

    Accessibility testing

    CLRs: 1, 2, 4, 7

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

  12. 12

    Performance

    CLRs: 1, 2, 4, 8

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

  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.

  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.

  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.

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.