{"id":18498,"date":"2018-05-01T11:30:08","date_gmt":"2018-05-01T11:30:08","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=18498"},"modified":"2018-05-01T11:30:08","modified_gmt":"2018-05-01T11:30:08","slug":"25-javascript-tutorials-to-take-your-skills-to-the-next-level","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/","title":{"rendered":"25 JavaScript tutorials to take your skills to the next level"},"content":{"rendered":"<p>JavaScript has evolved from being a derided \u201ctoy language\u201d into the language that powers the web. It\u2019s pretty much everywhere these days.<\/p>\n<p>It\u2019s in internet-connected devices, it\u2019s used to ensure we can read websites when we\u2019re offline, and it helps with web animations. JavaScript is also the main component in the many frameworks that are behind our websites and apps.<\/p>\n<p>In this article, we round up the best JavaScript tutorials from around the web. We\u2019ll start with some learning-by-doing walkthroughs. We\u2019ll dive into web performance and how to ensure your site loads fast, and we\u2019ll explore how to write better JavaScript code. We\u2019ll finish with a look at two of the most popular JavaScript frameworks right now: React and Vue.<\/p>\n<p>Happy learning!<\/p>\n<h2>Projects<\/h2>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2018\/01\/drag-drop-file-uploader-vanilla-js\/\" target=\"_blank\">How to Make a Drag-and-Drop File Uploader with Vanilla JavaScript<\/a><br \/>\nThis thorough walkthrough on Smashing Magazine uses the APIs given to us by the browser to implement a drag-and-drop file selector and uploader with \u201cvanilla\u201d ES2015+ JavaScript (no frameworks or libraries).<\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/javascript-uploader.gif\" alt=\"An animated preview of the drag-and-drop file selector and uploader created with JavaScript\" width=\"650\" height=\"240\" class=\"aligncenter size-full wp-image-18656\" \/><\/p>\n<p><a href=\"http:\/\/blog.dynamicdrive.com\/beautiful-examples-of-css-javascript-sticky-menus\/\" target=\"_blank\">How to Add a CSS and JavaScript Sticky Menu<\/a><br \/>\nThis article walks through two ways to go about adding a Sticky Menu to your site: using the new CSS position:sticky property or, alternatively, JavaScript to implement the sticky logic. There are also seven beautiful sticky menu examples to inspire you.<\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/javascript-fixedmenu.gif\" alt=\"An animated preview of a sticky menu on a website\" width=\"650\" height=\"300\" class=\"aligncenter size-full wp-image-18652\" \/><\/p>\n<p><a href=\"https:\/\/css-tricks.com\/animate-a-container-on-mouse-over-using-perspective-and-transform\/\" target=\"_blank\">Animate a Container on Mouse Over Using Perspective and Transform<\/a><br \/>\nA step-by-step tutorial on how to get those depth-y 3D hover effects on a container with CSS and JavaScript, which can be used for images, forms, modals, or just about any other content you drop in the container.<\/p>\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"MrLopq\" data-default-tab=\"result\" data-user=\"MihaiIonescu\" data-embed-version=\"2\" data-pen-title=\"Animate a Container on Mouse Over Using Perspective and Transform\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/MihaiIonescu\/pen\/MrLopq\/\" target=\"_blank\">Animate a Container on Mouse Over Using Perspective and Transform<\/a> by Mihai (<a href=\"https:\/\/codepen.io\/MihaiIonescu\" target=\"_blank\">@MihaiIonescu<\/a>) on <a href=\"https:\/\/codepen.io\" target=\"_blank\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/scotch.io\/tutorials\/animating-elements-along-svg-paths-introducing-pathslider\" target=\"_blank\">Animating Elements Along SVG Paths with JavaScript<\/a><br \/>\nDiscover how to move elements along an SVG path with almost no effort, using a small library called Pathslider, created by the article\u2019s author, Luis Manuel, which is based on anime.js.<\/p>\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"dmbmpQ\" data-default-tab=\"result\" data-user=\"lmgonzalves\" data-embed-version=\"2\" data-pen-title=\"Path Slider Basic Demo\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/lmgonzalves\/pen\/dmbmpQ\/\" target=\"_blank\">Path Slider Basic Demo<\/a> by lmgonzalves (<a href=\"https:\/\/codepen.io\/lmgonzalves\" target=\"_blank\">@lmgonzalves<\/a>) on <a href=\"https:\/\/codepen.io\" target=\"_blank\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><a href=\"https:\/\/zellwk.com\/blog\/calculator-part-1\/\" target=\"_blank\">How to Build a Calculator<\/a><br \/>\nIn this three-part series designer and developer <a href=\"https:\/\/twitter.com\/zellwk\" target=\"_blank\">Zell Liew<\/a>, who runs the excellent <a href=\"https:\/\/learnjavascript.today\/\" target=\"_blank\">Learn JavaScript<\/a> course, explains how to build components with JavaScript from scratch. At the end you\u2019ll have a calculator that functions exactly like the one on the iPhone. Also check out Zell\u2019s article on <a href=\"https:\/\/www.heartinternet.uk\/blog\/should-you-use-css-or-javascript-for-web-animations\/\" target=\"_blank\">whether to use CSS or JavaScript for web animations<\/a> here on the Heart Internet blog.<\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/javascript-calculator.gif\" alt=\"An animated example of Zell Liew&#039;s JavaScript calculator in action\" width=\"500\" height=\"500\" class=\"aligncenter size-full wp-image-18651\" \/><\/p>\n<h2>Performance<\/h2>\n<p><a href=\"https:\/\/www.keycdn.com\/blog\/javascript-performance\/\" target=\"_blank\">20 Best Practices for Improving JavaScript Performance<br \/>\n<\/a><br \/>\nProper JavaScript performance is vital for ensuring that your website loads fast. This guide explores the causes of JavaScript performance issues and provides a list of best practices for optimising JavaScript code.<\/p>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2018\/03\/lazy-loading-with-conditioner-js\/\" target=\"_blank\">Lazy Loading JavaScript Modules with ConditionerJS<\/a><br \/>\nThis article looks at the JavaScript initialisation logic that is often used to link UI components to a webpage and how to improve this logic by replacing it with ConditionerJS, which can help make websites more flexible and user-oriented.<\/p>\n<p><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/loading-third-party-javascript\/\" target=\"_blank\">Loading Third-Party JavaScript<\/a><br \/>\nOften, performance problems slowing pages down are due to third-party scripts: ads, analytics, trackers, social-media buttons, and so on. Addy Osmani and Arthur Evans explain how to optimise the loading of third-party scripts to reduce their impact on performance.<\/p>\n<p><a href=\"https:\/\/blog.sessionstack.com\/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda\" target=\"_blank\">How JavaScript Works: the Rendering Engine and Tips to Optimize Its Performance<\/a><br \/>\nAlexander Zlatkov\u2019s 11th article in a series dedicated to exploring JavaScript and its building components focuses on the rendering engine, which handles the parsing and the visualisation of the HTML and the CSS, something that most JavaScript apps are constantly interacting with.<\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/javascript-viz.jpg\" alt=\"A chart showing how components are rendered in the browser\" width=\"650\" height=\"300\" class=\"aligncenter size-full wp-image-18658\" \/><\/p>\n<h2>Writing better JavaScript code<\/h2>\n<p><a href=\"https:\/\/medium.freecodecamp.org\/how-to-keep-your-javascript-code-simple-and-increase-its-readability-94d6a949afc4\" target=\"_blank\">How to Keep Your JavaScript Code Simple and Increase Its Readability<\/a><br \/>\nThis article walks you through applying the SOLID principles to your codebase. The author starts the code review session with a 35-lines JavaScript Class and finishes with a beautiful 11-lines code piece using only slick functions. All you need is patience and resilience.<\/p>\n<p><a href=\"https:\/\/css-tricks.com\/approaches-to-deprecating-code-in-javascript\/\" target=\"_blank\">Approaches to Deprecating Code in JavaScript<\/a><br \/>\nAll code gets old and creaky, so what\u2019s the best way to deprecate it? This post on CSS-Tricks goes over some good practices when it\u2019s time to mark a JavaScript method obsolete and will probably help you write more resilient code in the future.<\/p>\n<p><a href=\"https:\/\/www.codementor.io\/billsourour897\/elegant-patterns-in-modern-javascript-roro-hn217atuu\" target=\"_blank\">Elegant Patterns in Modern JavaScript<\/a><br \/>\n<a href=\"https:\/\/www.devmastery.com\/\" target=\"_blank\">DevMastery.com<\/a> consultant and teacher Bill Sourour shares several coding patterns that lead to cleaner, more testable, more expressive code. So far he\u2019s covered RORO (Receive an Object, Return an Object) and Ice Factory, a powerful function that creates and returns a frozen object.<\/p>\n<p><a href=\"https:\/\/www.toptal.com\/javascript\/comprehensive-guide-javascript-design-patterns\" target=\"_blank\">A Comprehensive Guide to JavaScript Design Patterns<\/a><br \/>\nDesign patterns are reusable solutions to commonly occurring problems in software design. This article reviews some JavaScript basics before exploring different design pattern categories and examples, complete with code snippets.<\/p>\n<p><a href=\"https:\/\/scotch.io\/tutorials\/object-oriented-programming-in-javascript\" target=\"_blank\">Object Oriented Programming in JavaScript<\/a><br \/>\nZell Liew addresses the absolute basics of Object Oriented Programming in JavaScript: creating individual objects from a common object. Also check out Zell\u2019s article on <a href=\"https:\/\/www.heartinternet.uk\/blog\/20-things-to-consider-when-creating-your-first-node-js-application\/\" target=\"_blank\">20 things to consider when creating your first Node.js application<\/a>.<\/p>\n<p><a href=\"https:\/\/forestry.io\/blog\/write-better-javascript-with-webpack\/\" target=\"_blank\">Write Better JavaScript with Webpack<\/a><br \/>\nThis introductory post explores why Webpack is the right choice for bundling your JavaScript application. It compares Webpack with Gulp, explains how to write modular code, how to configure Webpack and use NPM scripts and more.<\/p>\n<h2>React<\/h2>\n<p><a href=\"https:\/\/www.zaje.me\/diving-into-react\/\" target=\"_blank\">Diving into ReactJS \u2014 The Minimalist Guide to Getting Started with React<\/a><br \/>\nHere\u2019s a little introduction to <a href=\"https:\/\/github.com\/zeit\/next.js\/\" target=\"_blank\">NextJS<\/a> \u2013 a framework for creating server-rendered React applications, developed by <a href=\"https:\/\/zeit.co\/\" target=\"_blank\">Zeit<\/a>, which makes you focus on React and leaves all the trouble of configuring webpack and Babel to the experts.<\/p>\n<p><a href=\"https:\/\/tylermcginnis.com\/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react\/\" target=\"_blank\">A Comprehensive Guide to Learning React.js in 2018<\/a><br \/>\nA classic, interactive \u2018from scratch\u2019 tutorial by Tyler McGinnis (also check out his <a href=\"https:\/\/tylermcginnis.com\/courses\/\" target=\"_blank\">courses<\/a>), originally published in January 2015, that\u2019s just been upgraded to React 16.3 standards. It covers fundamentals and creating your first component.<\/p>\n<p><a href=\"https:\/\/blog.usejournal.com\/getting-started-with-web-accessibility-in-react-9e591fdb0d52\" target=\"_blank\">Getting Started with Web Accessibility in React<\/a><br \/>\nFinal year computer science student <a href=\"https:\/\/twitter.com\/ermmears\" target=\"_blank\">Emily Mears<\/a> explains some of the basic accessibility features that React enables or supports, as well as some basic implementations. She covers keyboard focus, ARIA, and more, and also lists some useful development and testing tools.<\/p>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2018\/02\/react-d3-ecosystem\/\" target=\"_blank\">Bringing Together React, D3, and Their Ecosystem<\/a><br \/>\nIn this post, Marcos Iglesias explores how to approach building React projects that need the powerful charting goodness of D3 and covers various approaches and D3 libraries. Also check out Marcos\u2019 article on performance budgets in our <a href=\"https:\/\/www.heartinternet.uk\/blog\/build-faster-websites-free-ebook-download\/\" target=\"_blank\">free web performance guide<\/a>.<\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/javascript-react.jpg\" alt=\"A chart indicating the timeline for bringing together D3 and React\" width=\"650\" height=\"150\" class=\"aligncenter size-full wp-image-18655\" \/><\/p>\n<p><a href=\"https:\/\/medium.com\/dailyjs\/data-visualization-with-react-vis-bd2587fe1660\" target=\"_blank\">Data Visualisation with react-vis<\/a><br \/>\nIn this article, Shyianovska Nataliia, a front-end developer from Amsterdam, walks through getting started with react-vis, a simple and flexible React visualisation library created by Uber, to build a simple line chart.<\/p>\n<h2>Vue<\/h2>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2018\/02\/jquery-vue-javascript\/\" target=\"_blank\">Replacing jQuery with Vue.js: No Build Step Necessary<\/a><br \/>\nThis article by Sarah Drasner covers some common use cases in jQuery and how we\u2019d switch them over to Vue, and why we\u2019d even want to do so. It serves to show that Vue is also a pretty nice abstraction for small sites that don\u2019t need a lot of overhead, and it\u2019s very flexible.<\/p>\n<p><a href=\"https:\/\/www.telerik.com\/blogs\/building-pwas-with-vuejs\" target=\"_blank\">Building PWAs with Vue.js<\/a><br \/>\nWant to get started developing Progressive Web Apps? Start right here with this introductory article and learn how to you can build them quickly with Vue.js, one of the most popular JavaScript frameworks around at the moment.<\/p>\n<p align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/javascript-vue.jpg\" alt=\"A screenshot of two browser windows showing how to develop with Vue.js\" width=\"650\" height=\"390\" class=\"aligncenter size-full wp-image-18659\" \/><\/p>\n<p><a href=\"https:\/\/scotch.io\/tutorials\/how-to-make-netflix-like-swipers-in-vue\" target=\"_blank\">How to Make Netflix-like Swipers in Vue<\/a><br \/>\nSwipers always seem to have a mind of their own. In this tutorial Chris Nwamba explains how to use Vue and an Awesome Swiper Module to create swipers that are just as elegant and fluid as Netflix\u2019s movie swipers.<\/p>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2018\/04\/vuejs-firebase-firestore\/\" target=\"_blank\">Hit the Ground Running with Vue.js and Firestore<\/a><br \/>\nIn this article, you\u2019ll learn how to set up the basics of a web app using Vue.js and Firestore, a new data storage approach from Google Firebase. The goal is to build the core of the app as fast as possible so you can show it to users and get feedback and analyse usage.<\/p>\n<p><a href=\"https:\/\/viljamis.com\/2018\/vue-design-system\/\" target=\"_blank\">Vue Design Systems<\/a><br \/>\n<a href=\"https:\/\/vueds.com\/\" target=\"_blank\">Vue Design System<\/a> is a set of organised tools, patterns, and practices that work as the foundation for Vue.js application development. In this article, its creator, Viljami Salminen, sheds some light on the processes and workflows he uses to get started with a new project.<\/p>\n<p>Also check out \u2018<a href=\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/\" target=\"_blank\">5 reasons developers are switching to Vue.js<\/a>\u2019 by Ray Villalobos here on our blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript has evolved from being a &#8220;toy language&#8221; into a language that powers most of the web.  It&#8217;s pretty much everywhere, and here, Oliver Lindberg rounds up 25 of the best JavaScript tutorials from around the web right now.<\/p>\n","protected":false},"author":2,"featured_media":18538,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,24],"tags":[],"class_list":{"0":"post-18498","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-web-design"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>25 JavaScript tutorials to take your skills to the next level - Heart Internet<\/title>\n<meta name=\"description\" content=\"JavaScript has evolved from being a &quot;toy language&quot; into a language that powers most of the web. It&#039;s pretty much everywhere, and here, Oliver Lindberg rounds up 25 of the best JavaScript tutorials from around the web right now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"25 JavaScript tutorials to take your skills to the next level - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"JavaScript has evolved from being a &quot;toy language&quot; into a language that powers most of the web. It&#039;s pretty much everywhere, and here, Oliver Lindberg rounds up 25 of the best JavaScript tutorials from around the web right now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-01T11:30:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/25-javascript-tutorials-header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1265\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"25 JavaScript tutorials to take your skills to the next level\",\"datePublished\":\"2018-05-01T11:30:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/\"},\"wordCount\":1391,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/25-javascript-tutorials-header.jpg\",\"articleSection\":[\"Guest Posts\",\"Web Design\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/\",\"name\":\"25 JavaScript tutorials to take your skills to the next level - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/25-javascript-tutorials-header.jpg\",\"datePublished\":\"2018-05-01T11:30:08+00:00\",\"description\":\"JavaScript has evolved from being a \\\"toy language\\\" into a language that powers most of the web. It's pretty much everywhere, and here, Oliver Lindberg rounds up 25 of the best JavaScript tutorials from around the web right now.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/25-javascript-tutorials-header.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/25-javascript-tutorials-header.jpg\",\"width\":1265,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"25 JavaScript tutorials to take your skills to the next level\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"25 JavaScript tutorials to take your skills to the next level - Heart Internet","description":"JavaScript has evolved from being a \"toy language\" into a language that powers most of the web. It's pretty much everywhere, and here, Oliver Lindberg rounds up 25 of the best JavaScript tutorials from around the web right now.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/","og_locale":"en_GB","og_type":"article","og_title":"25 JavaScript tutorials to take your skills to the next level - Heart Internet","og_description":"JavaScript has evolved from being a \"toy language\" into a language that powers most of the web. It's pretty much everywhere, and here, Oliver Lindberg rounds up 25 of the best JavaScript tutorials from around the web right now.","og_url":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2018-05-01T11:30:08+00:00","og_image":[{"width":1265,"height":500,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/25-javascript-tutorials-header.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"25 JavaScript tutorials to take your skills to the next level","datePublished":"2018-05-01T11:30:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/"},"wordCount":1391,"commentCount":0,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/25-javascript-tutorials-header.jpg","articleSection":["Guest Posts","Web Design"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/","url":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/","name":"25 JavaScript tutorials to take your skills to the next level - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/25-javascript-tutorials-header.jpg","datePublished":"2018-05-01T11:30:08+00:00","description":"JavaScript has evolved from being a \"toy language\" into a language that powers most of the web. It's pretty much everywhere, and here, Oliver Lindberg rounds up 25 of the best JavaScript tutorials from around the web right now.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/25-javascript-tutorials-header.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/25-javascript-tutorials-header.jpg","width":1265,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/25-javascript-tutorials-to-take-your-skills-to-the-next-level\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"25 JavaScript tutorials to take your skills to the next level"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/18498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=18498"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/18498\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/18538"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=18498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=18498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=18498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}