Uploaded July 2021 | Updated September 2026, 2 weeks ago

---

Bring your ideas to life with vanilla JavaScript using these 10 creative coding techniques. Each one is a powerful tool, and I made many tutorials talking about every single one. This is your year to master front end web development and make portfolio website that will really stand out from competition! Sorry if I speak fast, it's a lot to cover in 60 seconds :D I'm just testing YouTube shorts :D

⭐️ Related tutorials (for more check out my playlists):⭐️
1) Control images with drawImage() method
youtu.be/seEF7tj0Rmc image particles
youtu.be/CY0HE277IBM sprite animation for games
2) Constellations (Particles js) effect with vanilla JavaScript
youtu.be/Yvz_axxWG4Y constellations particle trail
youtu.be/XGioNBHrFU4 constellations particle text
youtu.be/d620nV6bp0A constellations effect without libraries explained
3) Pixel manipulation with getImageData() method
youtu.be/afdHgwn1XCY image into interactive particles
youtu.be/RCVxXgJ8xSk pixel rain effect
4) Fractals
youtu.be/wBAtHDdaZ2Y fractal trees
youtu.be/HXTC5LSep3M fractal snowflakes
5) GlobalCompositeOperation property
youtu.be/BmEAJbAihFU global composite operation explained
6) Collision detection
youtu.be/rtBCVe3j_24 collision detection between circles
youtu.be/r0sy-Cr6WHY collision detection between rectangles
7) Rainbow effects with HSL colour declaration and HTML canvas gradients
youtu.be/zbVRgbvuEZ0
8) Trigonometry
youtu.be/pyhb8Y9qKUI wavy and circular movement of animated characters
youtu.be/ymmtEgp0Tuc growing fibonacci flowers
youtu.be/jl29qI62XPg fish game
9) ES6 Classes to create many similar objects
youtu.be/GVuU25pGaYo game character NPCs walking in random directions
youtu.be/nrJh8-Ixnu8 particles and physics
youtu.be/QxYg8-mhhhs tower defense game
10) SVG and CSS3 filters
youtu.be/lPVZYS4fvco fire buttons
youtu.be/w2-0bNVpZUs fire images
youtu.be/EMJ9T7zStYY liquid trails

🔥 Creative coding is much easier if you really understand FRONT END WEB DEVELOPMENT basics, check out these courses on Udemy 🔥
☕ JavaScript Basics for Beginners (Mosh Hamedani) bit.ly/32Tn5wq
☕ Modern JavaScript From The Beginning bit.ly/3fWJgWk
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid bit.ly/3tu9ghD
☕ Demystifying Parallax: Learn to Create Interactive Web Pages bit.ly/3uueECP

🔥 One Month FREE Trial of Skillshare Premium! 🔥 (access to all courses, cancel anytime) skillshare.eqcm.net/c/2793559/1085653/4650
🔥 My favourite computer screen for coding amzn.to/3xccARd
🎨 Get Adobe creative suite apps (Photoshop, Illustrator etc.) bit.ly/3e60cI0

🎮 HTML5 canvas and JavaScript game tutorials:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu

If you are a BEGINNER you can still create beautiful animations, here is a selection of my beginner friendly projects, where I go slower and take time to explain things:
youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-

If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh

Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory

Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory