“Baby steps, & lots of practice.”
Because let’s face it:
At Snipcart, we have many users who aren’t JS experts—and that’s just fine. We often try to guide them towards a better understanding and best practices. Following the count your keystrokes principle, I decided to create an evergreen resource I could later point to!
This intro for JS beginners will feature:
- A step-by-step learning program & key resources
Let’s take those first baby steps.
To put things a bit crudely:
- HTML structures your content
- CSS styles it
These three languages enable web developers to create vibrant online experiences.
- Auto-update content, like a social media feed 🐦
- Animate visual elements 💨
- Add visual feedback on user interactions ✅
- Add interactive maps 🗺
- Trigger pop-ups/offers after user actions ‼
However, these use cases only represent the tip of the JS iceberg. Web developers also use it to:
- Create single page applications—with frameworks like React & Vue.js
- Run backend web servers—with Node.js
Absolute beginners need not worry about that just yet though! We’ll cover this in an upcoming, intermediate post. 👍
Let’s use a simple analogy to break this down: building a house 🏠
The convention on how to write house plans—the one all architects agree upon—is ECMAScript. Thick lines represent exterior walls; thin ones, interior, etc.
Let’s see how they differ.
Client-side JS: browser magic!
In section 4, we’ll show you concrete examples of how to use JS in the browser!
Server-side JS: Node & npm
It comes with a ton of APIs (here’s an API intro!) that interact with computer resources: file system, network I/O, etc.
See, these capabilities aren’t available in the browser. Why? Mostly for security reasons: you wouldn’t want web pages to run code that reads local files on your computer… that’s nasty!
Using Node.js, developers are building a wide array of backend JS programs, ranging from simple developer tools to full-blown production web servers.
To build these programs, developers can pick and choose from a myriad of building blocks available through npm.
npm (which stands for Node Package Manager) is a command line tool and a public package registry. It’s a tool that lets you include external libraries, known as packages, in your Node.js program.
Check out this post if you want to dig deeper into Node.js.
3. Actually learning JS—where to start?
I’d love to go on about what statements, declarations, variables, objects/functions, and expressions are.
If you’re coming from a backend programming background, you’ll get the hang of these in no time.
Now before you go on a rampage of clicks and scrolls, wait. I suggest following this simple beginner’s path first:
- Understand some basics on Udacity, Codecademy, or freeCodeCamp (or in the exercises below!)
- Check out the YDKJS series!
Rapid-fire tips for JS beginners
- Get the hang of developers tools—debugging will save your life!
- Learn the difference between falsy & truthy values.
- Learn promises, then async/await.
- Get familiar with useful APIs like
a new programming language anything takes time and practice. It won’t be easy, but it’ll empower you to create awesome experiences online. Be it for yourself, your friends, a company, or some clients!
What’s next, you ask?
Slowly but surely, take the time to go through some hand-picked resources in the GitHub repo shared above.
If you enjoyed this post, please share it on Twitter. Is there a topic in there you’d like us to explore more? Let us know in the comments, and we might just write a post on it! 😊