links to good things

Scroll

Want to build animated pages like the ones here?

If you can write HTML, CSS, and JavaScript, then all you need is to learn Inkscape and Greensock. I bet you'll find both are easy to learn.

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.

I should learn a lot more about JavaScript, jQuery, and Greensock. I should learn to use SASS, and probably Pixi, maybe Ruby. But online classes generally concentrate on the skills needed by folks seeking jobs at corporations. I find it really tough to wade through them. Especially since building these pages within the little I do know, is so much fun.

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.
Atom
Notepad++
Coda2
and
Brackets
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.



JavaScript (JS) and jQuery

I wish GreenSock would produce a course on JavaScript and jQuery aimed at newbies. Their current tutorials barely show you enough JS for you to copy and paste to get started. That's what I did. I don't recommend it. The 'I Hate Tomatoes' tutorials mentioned below also helped a lot to get me started with Greensock, but the classes at 'I Hate Tomatoes' aren't intended to teach programming in JavaScript.

A lot of people will tell you the JavaScript classes at Codecademy, and SitePoint are good places to start. They are probably worth your time. I'm tempted to suggest Watch and Code as a next step. But you would probably be better off paying for a more comprehensive set of classes from a reputable source, like a local college.

The Mozilla Foundation page is a resource you should learn to use, and you can find lots more courses under the Core JavaScript link at iLoveCoding.org.



GreenSock - freeish

The free version of GreenSock is a great JavaScript animation library. The free version does most of what I want, but you have to join Club GreenSock at the 'Shockingly Green' level or higher in order to get the best effects, like making text fly in one word or letter at a time. Go ahead and play with the free version for a while before you decide whether to pay the $100 it costs for 1 year of 'ShockinglyGreen' membership. See if you can solve the problems that you run into. If you do buy into 'ShockinglyGreen', after 1 year is up, you have to decide whether to renew your membership. If you don't renew, everything you bought keeps working, you just won't get any of the new plugins/features they add after your membership expires. They have a strong record of adding cool features, so you will probably want to re-up.
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.


Other recommendations:

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.
or
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.