What I Learned Building Three Simple Projects: AnimalSounds, CheeseMath, and a Node.js Secrets Tutorial

I have been trying to understand how the web actually works by building things instead of watching tutorials. None of these projects are big, but each one taught me something I did not fully understand before. These three projects, AnimalSounds, CheeseMath, and the EthicsFrontEndDemo, helped me get a clearer feel for JavaScript, testing, and basic security.

🐾 AnimalSounds, learning how the browser behaves

Live: https://bradleymatera.github.io/AnimalSounds/

Repo: https://github.com/BradleyMatera/AnimalSounds

AnimalSounds is a simple soundboard. You press a button and it plays the sound. Working on it helped me understand DOM events, how the browser handles audio, and how to add basic keyboard accessibility. Building something small like this helped me see how front end code behaves in a real browser.

🧀 CheeseMath and Jest, my first real experience with testing

Live: https://bradleymatera.github.io/CheeseMath-Jest-Tests/

Repo: https://github.com/BradleyMatera/CheeseMath-Jest-Tests

CheeseMath looks goofy, but the whole point was learning Jest. This was the first time I wrote unit tests for my own code. I learned why separating logic from the UI matters, how simple tests work, and how tests reveal mistakes or edge cases I did not think about. It changed how I approach small functions and debugging.

🔐 EthicsFrontEndDemo, understanding the basics of handling secrets

Live: https://bradleymatera.github.io/EthicsFrontEndDemo/

Repo: https://github.com/BradleyMatera/EthicsFrontEndDemo

This project compares bad and better ways of handling secrets in Node.js and on the front end. Working on it helped me understand why client side secrets do not mean anything, how environment variables actually work, and how to explain the differences clearly. Some of the early text came from AI drafts, but building the project myself gave me a much better understanding of security basics.

🧩 What all three taught me

Building small projects like these helped me understand the fundamentals much better, including:

• how the browser handles events and rendering
• how separating UI from logic makes testing easier
• why accessibility should be part of the build
• why tests matter for catching mistakes early
• why basic security habits matter, even in small demos

Each project gave me a clearer understanding of how web development works in practice.