Programming Basics
More to discover ↗Make a small browser project that generates five random colors, displays their hex codes, and lets you copy a code with one click. The project uses plain JavaScript and includes a manual-copy fallback.
Read article ↗
Practice Projects
More to discover
Create a small browser quiz using one HTML file and plain JavaScript. The quiz shows one question at a time, updates the score, gives feedback, and lets the player start over.
Read article · 4 min↗Build a small Python program that converts between Celsius and Fahrenheit, rejects invalid input, and displays a clear result. Includes a complete example and practical test cases.
Read article · 4 min↗Make a small browser-based tip calculator that accepts a bill amount, tip percentage, and group size. The project calculates in cents, handles leftover cents fairly, and gives you useful cases to test.
Read article · 4 min↗Make a small interactive counter with Increase, Decrease, and Reset buttons. This beginner project uses JavaScript to create the controls, update the displayed value, and prevent the count from dropping below zero.
Read article · 4 min↗A practical beginner project for presenting plans, prices, and features in a table that is easier to read with a keyboard, screen reader, or small screen.
Read article · 4 min↗Create a compact profile card that adapts to narrow screens. This beginner project covers semantic HTML, flexible CSS sizing, readable spacing, and simple checks you can make in a browser.
Read article · 4 min↗Learn how to use curl to check an HTTP response’s status, headers, body, and redirects. This beginner-friendly guide explains the commands, what their output means, and a few mistakes to avoid.
Read article · 4 min↗Previewing Markdown lets you check headings, links, images, and code blocks while you write. Learn a simple workflow in Visual Studio Code, plus ways to diagnose common preview problems.
Read article · 4 min↗Learn how to choose the right Git command for an unwanted edit, a staged file, or a commit. This beginner-friendly guide explains what restore, reset, and revert change, with practical examples and safety checks.
Read article · 4 min↗A beginner-friendly guide to Git remotes: what they point to, what push and pull actually do, and how to check changes before sharing or receiving them.
Read article · 4 min↗Learn a simple Git workflow for keeping a change separate from your main branch, committing it, merging it, and checking the result. Includes the commands you need and a brief guide to merge conflicts.
Read article · 4 min↗A .gitignore file helps Git leave local and generated files out of future commits, but it does not remove files Git already tracks. Learn how to write useful patterns, check whether they match, and safely stop tracking a file while keeping your local copy.
Read article · 4 min↗Learn a repeatable way to inspect uncommitted edits, staged changes, and past commits. This beginner-friendly guide uses git diff and git log to help you understand what changed before you commit or continue working.
Read article · 4 min↗Learn a simple local Git workflow: start a repository, check its status, stage a file, and save a commit. This beginner-friendly guide also explains how to review staged changes and avoid committing files you did not intend to include.
Read article · 3 min↗Set up a small Vite project, start its local development server, and see changes in your browser. This beginner-friendly guide covers the tools you need, the commands to run, and common startup problems.
Read article · 4 min↗A package-lock.json file records the dependency tree npm selected for a project. Learn how it works with package.json, why teams usually commit it, and when to update it.
Read article · 3 min↗Learn how npm scripts turn common project tasks into memorable commands. Set up a small Node.js project, add start and check scripts, run them from a terminal, and troubleshoot common mistakes.
Read article · 4 min↗Learn the two commands that show your installed Node.js and npm versions, how to tell whether both tools are available, and what to check when a terminal cannot find them.
Read article · 3 min↗ESLint and Prettier can both improve a JavaScript project, but they do different jobs. Learn what each tool checks, how their roles overlap, and how to set up a simple workflow without making beginners manage the same style rule twice.
Read article · 4 min↗Set up Prettier in a JavaScript project, choose a small set of shared formatting options, and add commands that everyone can run before committing changes.
Read article · 3 min↗Extensions can make Visual Studio Code more useful, but installing too many can create noise and make problems harder to diagnose. Learn how to choose extensions for a specific task, check what they can do, test them safely, and keep your setup manageable.
Read article · 4 min↗Visual Studio Code lets you set personal preferences for every project or choose settings for one workspace. Learn where each type lives, which one takes priority, and how to avoid sharing preferences your teammates may not want.
Read article · 4 min↗Learn how to open a whole project in Visual Studio Code, browse its folders, jump to a file by name, and search for text across your project.
Read article · 4 min↗Command-line tools are easier to explore when you know where to find help, how to read flags, and what an exit code tells you. Learn these basics with a small Python example you can run on your own computer.
Read article · 4 min↗Learn the basic command-line tools for managing files in a small practice folder. This beginner-friendly guide covers creating files, making copies, moving and renaming them, and deleting them with care.
Read article · 4 min↗Learn how to find your current folder, move between folders, and list files using common terminal commands. Includes a small practice exercise for Bash, Zsh, and PowerShell.
Read article · 4 min↗A practical guide to finding code that never finishes: recognize the symptoms, interrupt safely, check loop progress and recursion base cases, and add guards while debugging JavaScript.
Read article · 4 min↗An import error does not always mean a package is missing. Learn how to read the error, check paths and project settings, inspect dependencies, and verify a fix without making your project harder to reproduce.
Read article · 4 min↗An application can start locally but fail in a test, a new terminal, or a deployment because a required environment variable is missing. Learn how to recognize the symptoms, check the process environment without exposing secrets, and make configuration errors easier to diagnose.
Read article · 4 min↗A failing unit test tells you that an expectation and a result differ, but it does not tell you which one is wrong. Learn a repeatable way to reproduce the failure, read its evidence, check the expected behavior, and make a focused fix.
Read article · 4 min↗A JSON parsing error does not always mean the JSON itself is malformed. Learn how to inspect the actual API response, distinguish parsing failures from HTTP errors, and fix common problems such as HTML error pages, empty bodies, and invalid JSON syntax.
Read article · 4 min↗A practical checklist for finding out why a button click produces no response. Learn how to check the console, confirm your selector, inspect event listeners, and distinguish a missing click from a handler that fails later.
Read article · 4 min↗When a page looks wrong, changing CSS at random can create new problems. Learn a repeatable way to inspect an element, identify the rule or container causing the issue, test a fix in browser developer tools, and move the change back into your stylesheet.
Read article · 4 min↗A beginner-friendly workflow for finding out why a web page cannot load data, submit a form, or fetch a file. Learn how to capture the request, inspect its status and response, and decide what to check next.
Read article · 5 min↗A browser console error is a starting point, not a verdict. Learn how to reproduce the problem, read its message and stack trace, inspect the values involved, and verify that your fix addresses the cause.
Read article · 4 min↗An unhandled promise rejection can make an asynchronous failure easy to miss. Learn how to reproduce one, trace it through browser developer tools, and put error handling at the right boundary.
Read article · 4 min↗When JavaScript produces a surprising value, check the types involved before changing the calculation. Learn how to trace string and number conversions, inspect inputs, and fix common mistakes with explicit validation.
Read article · 4 min↗A practical debugging method for finding where a missing JavaScript value came from. Learn to read the error, inspect each step of a property path, trace assignments backward, and fix the cause rather than hiding the symptom.
Read article · 4 min↗A loop that runs once too many or once too few can quietly skip a value or read past the end of an array. Learn to spot off-by-one errors by checking index ranges, tracing small examples, and testing boundary cases.
Read article · 4 min↗When a program produces the wrong result, you do not have to inspect every line in order. Check the data near the middle of the process, decide which half contains the problem, and repeat. This guide shows how to use that approach with a small JavaScript example.
Read article · 4 min↗A minimal reproducible example strips a bug down to the smallest set of steps that still shows the problem. Learn how to capture the expected and actual results, remove unrelated code safely, and share an example someone else can run.
Read article · 4 min↗A beginner-friendly guide to pausing JavaScript, following its execution one line at a time, and checking variable values to find a loop bug.
Read article · 4 min↗Breakpoints are useful when you can pause a program and inspect its state. Logging is often better when a bug is intermittent, depends on timing, or happens somewhere you cannot easily attach a debugger. Learn how to choose between the two and write logs that help you trace a problem without creating new ones.
Read article · 4 min↗A program can fail before it starts, stop while it runs, or finish with the wrong answer. Learn how to recognize each kind of problem and choose a useful first debugging step.
Read article · 3 min↗A stack trace can look intimidating, but it follows a useful pattern. Learn how to identify the error, follow the path through your code, and turn the trace into a small debugging experiment.
Read article · 4 min↗A useful bug report gives another person a reliable path from a clean setup to the same failure. Learn what to include, how to build a minimal example, and how to separate what you observed from what you expected.
Read article · 4 min↗
