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.

  1. 1


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

    1. Web Dev 3 intro slide deck
  2. 2


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

    1. Semantics schemantics
  3. 3

    Grid systems

    Learn how modular grid systems can simplify layouts making coding more efficient.

    1. Grid systems slide deck
    2. Finding grids
  4. 4

    Modular type

    Explore modular & responsive type systems to simplify and codify typesetting on the web.

    1. Modular type slide deck
  5. 5

    Grids + modular type

    Combining grid systems with modular type to create a website without much hassle.

    1. Sketching websites
  6. 6

    Modular CSS

    Reduce CSS clutter and repetition by using modular CSS ideas and pre-built components.

    1. Modular CSS slide deck
  7. 7

    Grids + modular type + CSS components

    Combine modular grids, type and CSS components together to get a website running quickly.

    1. Finding patterns
  8. 8

    Tables & forms

    Code complexly formatted data charts & discover interactive fillable forms.

    1. Tables & forms slide deck
  9. 9

    Reading week—no classes

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

  10. 10

    Preparing images

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

    1. Preparing images slide deck
    2. Image formats
  11. 11

    Using images

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

    1. Background & retina images slide deck
  12. 12


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

    1. Performance slide deck
  13. 13


    The web is for all humans—explore the small changes needed to make that a reality.

    1. Accessibility slide deck
    2. Using VoiceOver
  14. 14

    Confectionery website planning

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

    1. Course feedback
  15. 15

    Confectionery website completion

    Finish the confectionery website by the end of the term.

Marking scheme

Exercises — 65%

52 exercises @ 1.3% each.

  • Pass/fail — marked in class or automated.
  • Personal feedback given at specific intervals.

Big projects — 25%

1 milestones @ 25.0% each.

  • Letter grade.
  • Proof you learned everything.

Course learning requirements

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

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 an understanding of 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

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

Create functional user-friendly forms

  • Using modern & accessible techniques to design and build forms
  • Make forms functional with online cloud platforms

Demonstrate and apply understanding of web performance

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

Make websites accessible to all human beings

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

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.