Courses

Student resources

Student Resources

Useful sources for typography, icons, galleries, motion, and visual effects. Everything here is optional.

liquid-glassNewLiquid Orb EditorNewThree.js

Free to use does not always mean free to redistribute. Follow the exact resource’s licence. Linked tools, component code, and preview artwork can have different terms.

23 resources · documentation checked 2026-09-21 to 2026-09-24 · none of these has been integrated or device tested for this course.

Kits and Patterns

01

Design essentials

4Start here
  • LucideA consistent family of SVG interface icons.Plain HTMLISC

    Before you use Lucide

    Works with
    SVG and framework packages
    Plain HTML
    Yes, individual SVGs
    Cost
    Free
    Licence
    ISC; some inherited icons also carry MIT notices

    Use it for A consistent arrow, menu, or contact icon where it adds clarity.

    Keep the relevant notices. Give meaningful controls accessible names rather than using an unexplained icon alone.

    Documentation checked 2026-09-21. Not tested in the course project. No tested version.

    Open resourceRead licence

  • Google FontsBrowse typefaces for a coherent heading and body-text pairing.Plain HTMLCheck licence

    Before you use Google Fonts

    Works with
    Web fonts usable across frameworks
    Plain HTML
    Yes
    Cost
    Free fonts under their individual licenses
    Licence
    Per font; commonly SIL OFL, with other licenses present

    Use it for Choose a restrained type pairing and load only needed weights.

    Check the exact family license and keep required notices. Do not describe all families as having one identical license.

    Documentation checked 2026-09-21. Not tested in the course project. No tested version.

    Open resourceRead licence

  • SquooshResize and compress website images in a browser.Plain HTMLCheck licence

    Before you use Squoosh

    Works with
    Browser tool; no site installation
    Plain HTML
    Yes, exported image files
    Cost
    Free tool
    Licence
    Apache-2.0 for tool code

    Use it for Prepare the existing room photographs before adding them to the site.

    The tool license does not grant rights to imported images. Inspect quality before replacing originals. Its repository discloses analytics despite local image processing.

    Documentation checked 2026-09-21. Not tested in the course project. No tested version.

    Sources: squoosh.app · github.com

    Open resourceRead licence

  • SVGOMGOptimize SVG files with a visual interface.Plain HTMLCheck licence

    Before you use SVGOMG

    Works with
    Browser tool; no site installation
    Plain HTML
    Yes, exported SVG files
    Cost
    Free tool
    Licence
    MIT for tool code

    Use it for Clean up an approved architectural pattern or original logo SVG.

    Optimization can change IDs or remove information. Keep the original and check patterns, animation hooks, and accessibility before replacing it.

    Documentation checked 2026-09-21. Not tested in the course project. No tested version.

    Sources: jakearchibald.github.io · github.com

    Open resourceRead licence

19 more resources to unlock

02

Images and galleries

2
03

Motion and scrolling

5

Further in

These need more from you: a project already set up for a framework, a licence to read item by item, or real hardware to test on. Worth knowing about. Not worth starting with.

Some of these are React component libraries. They cannot be pasted into a plain HTML page. That is not a reason to rebuild your website: it is a reason to pick a different resource.

04

Components and inspiration

7
05

Materials and graphics

5
Student Resources | Arian Rousta