Over time, I will begin to update and populate this page with useful tools and websites
JavaScript:
- An excellent article on JavaScript classes and constructor functions on CSS Tricks. This article covers all these topics and provides links to other articles that cover related topics. Not for beginners, but for those looking to take a deeper dive into JavaScript’s bottomless pit. This is a good place to begin.
- Glide Slider Installation: https://glidejs.com/docs/setup
- Custom Forms for HTML and JavaScript Forms, Formspree
- JavaScript animation library, GreenSock that lets you craft high-performance animations that work in every major browser: https://greensock.com
- Another JavaScript animation library, https://blotter.js.org
- Good Modern JavaScript Coding Best Practices: https://youtu.be/Mus_vwhTCq0
Artwork:
- The fastest online image resizer: Bulk Resize Photos
- The preloader is an animation that keeps visitors entertained while server operations are being completed. Captivating Preloaders.
- Mockups to Screens: Free 20+ Responsive Mockups
- Multi Device Website Mockup Generator. Free online tool to test your responsive website on apple devices including Apple iMac, Macbook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. https://techsini.com/multi-mockup/index.php
CSS Tricks:
- Sliding up animation: https://css-tricks.com/slide-in-as-you-scroll-down-boxes
- This website from the podcasts gives you an overview of some of the new CSS things that are being worked on or are currently shipping in most browsers…https://2021-hover-conf-new-in-css.netlify.app
- Dark mode: The prefer color scheme
React:
- Easily add cool reveal-on-scroll animations to your React app with React Reveal: https://www.react-reveal.com
- Typing animations with React: For React Typist: https://www.npmjs.com/package/react-typist
- React portfolios. Take it a step further and use it with WordPress, have a look at https://frontity.org/
- React Helmet – https://github.com/nfl/react-helmet
- Is React SEO Friendly – https://rubygarage.org/blog/seo-for-react-websites
- Gatsby is a popular Static Site Generator which works with React, https://www.gatsbyjs.com
- React Particles (ie it reminds me of a constellation): https://www.npmjs.com/package/react-tsparticles
- Type Effects: https://www.npmjs.com/package/react-typed
Alternative Resources for Design Tools: Vector (ie Illustrator):
- Affinity Designer: https://affinity.serif.com/en-gb/designer ($47.49-on sale)
- Vectr: https://vectr.com (free!)
- GIMP: https://www.gimp.org (free!)
- Sketch **Only for Mac: https://www.sketch.com ($99, but if you use your school email address, you can get the education version for $50!) *One of the industry software recommended
- Inkscape: https://inkscape.org (free!)
- Adobe Express: https://www.adobe.com (free!)
- Photoline: https://www.pl32.com (it’s in euros, 50 euros = $89)
- Adobe Illustrator Draw (ipad): Click for the app store (free!)
Raster (ie Photoshop):
- Affinity Photo: https://affinity.serif.com/en-gb/photo ($47.49-on sale)
- GIMP: https://www.gimp.org (free!)
- Pixelmator **Only for Mac: https://www.pixelmator.com/mac ($29)
- Photoline: https://www.pl32.com (it’s in euros, 50 euros = $89)
- Paint 3D *Only for the PC: already on your Windows 10 OS
- Photos *Only for the PC: already on your Windows 10 OS
- Preview: already on your Mac OS
- Sketch **Only for Mac: https://www.sketch.com ($99, but if you use your school email address, you can get the education version for $50!) *One of the industry software recommended
- Pixlr: https://pixlr.com (free!)
- Photopea: https://www.photopea.com (free!)
- Adobe Photoshop (iPad): Click for app store (free!)
Wireframes/Mockups/Prototyping:
- Figma: https://www.figma.com (free!) *One of the industry software recommended
- InVision: https://www.invisionapp.com (free!) *One of the industry software recommended
- InVision Studio: https://www.invisionapp.com/studio (free!) *More bells and whistles than the basic InVision.
- Adobe XD: https://www.adobe.com/products/xd.html (free!…unlimited designs, you can only share one single design at a time)
- Moqups: https://moqups.com (free!)
- Sketch **Only for Mac: https://www.sketch.com ($99, but if you use your school email address, you can get the education version for $50!) *One of the industry software recommended
Other:
- Isotope Filter & sort magical layouts: https://isotope.metafizzy.co
- Build more “magical” websites. Learn how to use Isotope.js to create advanced web layouts with dynamic filtering and sorting. https://www.linkedin.com/learning/isotope-js-advanced-filtering
- The modern way to build Websites and Apps that delivers better performance, Jamstack
- Do not use images to display code. Among the many ways to include code are linking to the GitHub repository file, embedding code and styling it with Prism.js or similar, using GitHub Gist to show code snippets, or embedding CodePen: https://highlightjs.org
- Another plugin for sharing code is Prism JS: https://prismjs.com
- Animations on Scroll: https://michalsnik.github.io/aos
- Go beyond Framer’s UI to create custom design solutions with code: https://www.framer.com/developers
- Cody Frame Front End CSS Framework: https://codyhouse.co/ds/docs/framework/utilities
- SVGator is an online vector animation software that helps businesses create self-drawing, morph, skew, stroke-path, and color animated vector graphics. https://www.svgator.com