Want to build animated pages like the ones here?
If you don't know how to write code, I'm not a very good source of info. I write some pretty bad code sometimes.
I acquired my spotty knowledge of coding haphazardly, mostly through free online sources. I aimed to learn just enough to get going on my current project, figuring that when I ran into a problem I would learn just enough more to solve it, then continue on with my project. But often the online help at places like Quora and Stack Overflow is over my head, or requires a lot of rewriting of my code to make this one new little feature work.
While I can make pages that work, my code is poorly organized, and full of poor practices, which makes them hard to understand, and maintain, and hurts their performance. I strongly encourage you to try to find a more coherent learning strategy.
You probably want to know how hard it is to learn this stuff,
and whether you have the patience and aptitude required. Well, first you need a text editor. I use SublimeText 3. It is Free to evaluate as long as you want, but costs $70 to get rid of the nag screens. I think SublimeText 3 is great, but it is the only editor that I know so well.
are all free and very, very good, all have a feature or two that the others don't. Which of these tools you use is less important than knowing how to use it. There are free on-line resources for learning to efficiently use all these editors.
If you google "best code editor you will see many people recommend Emacs and VIM. They are much more powerful than the editors above, but they are really for people who do far more serious programing than I do. They are supposed to be tough to learn, and that appears to be true for Emacs. But VIM doesn't look bad to me. Although I only spent one day working with VIM, and barely scratched the surface, I expect it would be great for more demanding coding. If you plan to get serious about programming in more than a few languages, or program for the back-end, or to get into network admin, you should look very seriously at both Emacs and VIM.
If you need to learn HTML and CSS.
The best beginner's HTML and CSS tutorial I found was Shay Howe's course, Learn to Code HTML & CSS.
And, HTML Beginner's Tutorial is another course that I recommend. While you are learning the basics, repetition and experimentation will drive home the techniques like nothing else. Don't copy and paste. Type everything out.
GreenSock - freeish
There are a lot of third party tutorials covering portions of GreenSock available on-line. Some are quite old and out of date. Some just cover the same stuff that is in the free classes at GreenSock. The best wide ranging tutorial meant for beginners that I have found is the free GreenSock 101 class at I Hate Tomatoes. If you really work at experimenting with the techniques shown, you will learn a ton (Also, I think the 'I Hate Tomatoes' paid classes I have taken were worth every penny).
While GreenSock is weak on training for beginners, and could update its older instructional material, I forgive them because they have a great support forum. You will get quick, and correct answers to your questions there. Just follow the instructions to build a codepen example of your problem, and ask your question politely. I have found building a simple codepen is quick and easy, and I often find my solution while building the pen.
ScrollMagic - free
ScrollMagic takes care of a lot of under the hood programming required to use most scrolling effects. I found it tough to learn at first, but the since taking the free class at I Hate Tomatoes I don't mind the awkward syntax anymore.
Ubuntu Free. A linux operating system (O/S) that is easy to learn, more secure than Windows or Mac OS, and can greatly improve the performance of an old PC.
Mint Free. An offshoot of Ubuntu above, that is even more newby friendly, but it may not support less common hardware like a graphics tablet. Makes file management and editing at the host server I use a piece of cake.
Inkscape Free. SVG drawing software that is not perfect, but gets the job done without the learning curve, and unneeded extras of the alternatives. Unlike png or jpg formats, one SVG drawing will look sharp and clear on every size screen. SVG files are much smaller/quicker to load too. The downside of SVG is that animating them takes more computer power than a png or jpg of similar size. Computers and phones are getting more powerful all the time, and now that Adobe is killing flash, I think SVG is the way to go.
SVGOMG Free. A quick and easy way to reduce the size of SVG files even further. Check the output files before using them. SVGOMG will occaisionally produce errors. But the errors I've run into have been very easy to spot. One time, Fred's eyes moved down below his chin. Playing with the options at this web site quickly solved the very few issues I've had.
Tiny PNG Free. Will reduce the size of your PNG and JPG files when you just have to use a photo. The amount of reduction varies with the picture you use, I think 30% savings is common for me.
Unspash.com The place for great photos that you can use for free, or the place to find a photographer with the sort of eye you want. Unlike some similar sites, the search feature does not tease you by also showing better looking photos that cost money. The photos at Unsplash are first rate.
Cognito Forms Free. An easy to use, and free, form builder and form submission service.
Nearly Free Speach Their web hosting really is nearly free. They give you more control over your site than most hosts. Not really for Newbies unless the Newbies are willing to RTFM and/or research solutions as needed. Uptime for me has been as good or better than the more expensive hosts.
Scrollr Free. Supposed to be easier to learn than ScrollMagic, but less powerful.
Keyboard: If I type for an hour on a normal keyboard I have some wrist and elbow pain. The $39 Microsoft Natural Ergonomic Keyboard 4000 fixed that. Adjusting to the slightly diferent layout was easy for me. You might not adjust as easily, so only buy from someone with a return policy that is as customer friendly as Amazon's.
Graphics tablet: I don't recommend them. I use a Wacom Intuos Pro, 14 inch size, when a pressure sensitive pen is needed. But, I rarely draw anything but SVG graphics in Inkscape, which has no use for pressure sensitivity. I've been drawing with a mouse for so long, it feels more natural to me than the Wacom pens with their tiny little buttons.
Mouse: I almost gave up digital drawing due to wrist pain in my mouse arm. Vertical mice saved me. My current favorite is the $14 Anker Ergonomic USB Wired Vertical Mouse. Anker computer cables and USB hubs have always worked well for me too.
That's all folks.