JavaScript Fundamentals

Explore & Discover

JavaScript is the only programming language that runs natively in every web browser — it's what makes websites actually do things instead of just look pretty. Open any website, right-click, choose Inspect, and click the Console tab. Type 2 + 2 and press Enter. You just ran JavaScript. Now type document.body.style.backgroundColor = "red" and watch the page change. That's JavaScript controlling the page in real time. Spend some time on javascript.info — the free "JavaScript Fundamentals" section is beautifully written and starts from scratch. Notice how JavaScript is everywhere: Google Maps, YouTube's video player, the search bar on literally any modern website. You're ready for the next step when you've run at least five JavaScript commands in a browser console and can describe what the DOM is.

Learn the Basics

Head to freeCodeCamp.org and work through the "JavaScript Algorithms and Data Structures" certification — the first four sections cover everything you need right now. Learn variables (let and const), data types (strings, numbers, booleans), conditionals (if/else and switch), loops (for and while), and functions. Also practice on Codecademy's free "Learn JavaScript" course if you want video explanations alongside the exercises. One tip: the browser console is your best friend for testing small ideas — you don't need a whole file for every experiment. Create a small .html file with a script tag and practice inside it. You're ready for the next step when you can write a JavaScript function that takes an array of numbers, loops through it, and returns only the even ones.

Build Your First Project

Build your first interactive webpage: a to-do list app. The page needs an input field where you type a task, a button that adds it to a list on the page, and a way to mark tasks as done or delete them. This project uses the DOM — JavaScript's way of reading and changing what's on your webpage. You'll use document.querySelector to find HTML elements, addEventListener to listen for button clicks, and createElement to add new list items dynamically. No frameworks, no libraries — just plain JavaScript, HTML, and CSS. This is called "vanilla JS" and understanding it makes learning frameworks like React much easier later. You're ready for the next step when your to-do list adds, completes, and deletes tasks and all changes are visible on the page without refreshing.

Experiment & Iterate

JavaScript has some quirks that trip up beginners — work through them deliberately. Experiment with these: how callbacks work (passing a function as an argument to another function); what happens with setTimeout and setInterval; how arrays methods like map, filter, and reduce work; and the difference between == and ===. Build a small project that uses a timer: maybe a countdown clock for a Utah Jazz game, or a Pomodoro study timer with a start/pause/reset button. JavaScript30.com by Wes Bos is a free course of 30 small browser projects — try the first five. Each one teaches something real. You're ready for the next step when you can use map, filter, and reduce on an array and explain what each one returns.

Advanced Techniques

Now learn asynchronous JavaScript — how your code talks to the internet and handles data that takes time to arrive. Start with fetch(): JavaScript's built-in tool for loading data from an API. Use the free Open-Meteo weather API (open-meteo.com) — no sign-up required — to fetch current weather for Salt Lake City and display it on a webpage. Learn async/await syntax, which makes asynchronous code much easier to read. Then learn about Promises and why they exist. JavaScript.info has an excellent free section on all of this. Try also pulling data from the NASA APOD API (free, no key needed) to display the astronomy picture of the day. You're ready for the next step when your webpage fetches live weather data from an API and displays it without any page refresh.

Final Project Showcase

Your final project is a complete single-page web application — a real, working tool that does something useful. It must fetch data from at least one public API, respond to user input, and update the page dynamically. Strong ideas: a Utah trail finder that pulls from a hiking API and lets you filter by difficulty; a quiz app that loads questions from the Open Trivia API and tracks your score; a weather dashboard that compares current conditions across five Utah cities. Use ES6 modules to split your code into logical files. Deploy it free on Netlify or GitHub Pages so it has a real URL. Record a short 2-minute screen recording walking through how it works and what you built. You're ready for the next step when your app is live on the internet, fetches real data, and you can explain every line of your JavaScript code.