Help please!
I met a textile artist this week who wants to learn creative code for the web. She’s interested in storytelling, rich media, easter eggs, pop ups, hidden content, and using 3d objects to give a sense of the physicality of her work.
What easy, clear tutorials would you point an ambitious beginner at, these days?
Which is the best basic creative Html/Css/js online course?
What simple tools / libraries might help her with next steps?
More particular questions about this scenario…
- what’s the current best practice for what, back in the day, would have been imagemaps? Is it some kind of canvas / Svg combo?
- is getting going with an ssg like #11ty a good fit?
- node.js, p5js, three.js… where is the interesting action at the mo?
Are there any niche sitebuilding tools that might help?
And who is doing good work with the weird web at the moment?
(Five years away = lifetime.)
Many use cases of imagemaps were to make fancy buttons which can be made with HTML+CSS nowadays (you can use any shape, animations, some 3D effects, even video).
If that's not enough, SVG is the best bet, as you can do anything you can export graphics from Inkscape or Illustrator and use that from JS/CSS as if it were HTML (caveat: it must be pasted inside the HTML; if you insert as a image file, it won't work). Or generate them on the fly. If she already has a strong foundation on SVG and vector graphics, she may prefer to use it directly, since she already knows half what she needs.
Canvas, for 2D, would be a last resort for me, is too low level. You can do anything with it, but will have to put more effort than with the alternatives. A pro is since it has very basic features, it is very easy to learn.
Canvas for 3D: never use it directly; use always a library. For interactive 3D elements, I would recommend Aframe. Less verbose and more intuitive.
@jgg this is *tremendously* helpful, thank you. I think I’m being quite literal about the image maps comparison - imagining a full-width photo with hotspots on given areas triggering mouse events - no idea how you’d build that with CSS/JS these days, I’m still bamboozled by not working in <table> layouts 🤣
SVG sounds like a go-er, she’s happy in Illustrator. Think I may even have a book on SVG somewhere, now I think about it…
Since you can get *anything* inside a <button> tag, the sky is the limit about content. The external shape of the button can be altered in many ways, but the definitive one is clip-path, which allows you to clip anything with any arbitrary shape (you can use even a SVG image to define it).
Nowadays anything is possible; usually, the main issue is choosing the right tool.
@jgg yeah - tool overwhelm is a thing - hence asking here. Thank you so much for your help with this!