NgSysV2-1.1: A Young Person’s Guide to Software Development in the Age of AI

This post series is indexed at NgateSystems.com. You'll find a super-useful keyword search facility there too.

Last reviewed: Jan'26

1. Introduction

Hello and welcome! I hope you find what you're looking for here.

This post is for complete beginners. It covers everything I wish I'd known when I first started tinkering with websites and databases. Maybe you're still in school, considering a career change, or retired but curious. What matters is that you have an open mind—one that's ready for new ideas and quick to spot opportunities. You'll need this because modern web development is a jungle of tools and techniques, and it's evolving fast. Where should you even start?

This series charts a path through that jungle—one that delivers quick results while building the skills you need to eventually go your own way.

The best part? Almost everything I describe here is free. Your only investment is time, and yes, that won't be insignificant. But as they say, "no pain, no gain!"

Here's the game-changer: you now have a powerful free ally in AI assistants like ChatGPT. This series includes some long posts with detailed instructions, but they'd be even longer if I explained every step in full. Instead, whenever you get stuck or confused, just ask ChatGPT (or whatever alternative you favour). It'll give you clear, jargon-free answers instantly. This wasn't possible before 2022. Now it is, and it changes everything. See Post 4.1 for more on using your digital tutor.

So, let's get to it. Here's what this series aims to teach you and how we'll get there:

2. Objectives

The assumption here is simple: you want to develop software that reads information into a computer, processes it in a purposeful way, and displays the results on a screen. Oh, and on top of that, you’d like anyone, anywhere in the world, to be able to use your work.

Sounds straightforward? Unfortunately, in the world of IT, there are many ways to achieve this simple task — and choosing the right one matters!

In my experience, one of the simplest and most flexible approaches is to use an internet browser such as Chrome or Safari as the launchpad for your software. But, you might wonder: isn’t everyone using dedicated apps on their phones these days?

One key advantage of browsers is that they let your application run across every conceivable device — laptops, tablets, desktops, and phones — without worrying about hardware differences or operating systems. Browsers provide a sophisticated and practical environment for running your application logic. In contrast, native apps are tied to particular platforms and come with added complexity.

Another advantage is that browsers are already positioned on the Internet, whose whole purpose is to facilitate information sharing. This ubiquity is one reason major platforms such as Amazon and Facebook rely on browser-based interfaces to deliver their services worldwide.

The route I suggest leads to what is now generally known as a "web application" or webapp — a piece of software activated simply by entering the webapp’s address into a web browser. A modern webapp can maintain persistent data stores (“databases”) and provide security for that data via user login. ChatGPT itself is distributed as a webapp.

Before we dive into hands-on coding, here’s a brief look at the tools and technologies you’ll need to master to build a modern web application:

1. HTML (HyperText Markup Language) — the language used to structure and format content in web pages and web applications.
2. An IDE (Integrated Development Environment) — the editor used to write and manage code; in this course weu’ll be using Visual Studio Code (VS Code).
3. A programming language — the language in which you implement your application’s logic; we’ll be using the JavaScript programming language.
4. Browser developer tools — tools built into modern browsers for inspecting and debugging web applications; we’ll be using Chrome Developer Tools here.
5. A web development framework — a structured toolset that helps you build web applications efficiently; the framework we’ll use is SvelteKit.
6. A backend server platform — responsible for hosting the webapp, storing data, and running server-side code; we’ll be using Google Firebase on App Engine, which offers a particularly generous free tier.

In later posts, we’ll look in more detail at topics such as user authentication, databases, deployment, and security — all essential components of a real-world web application.

Since you’re reading this post online, I’ll assume you’re already reasonably accustomed to the online world. For simplicity, I’ve assumed you’ll be using a Microsoft Windows desktop or laptop, but you should be able to adapt these instructions if you’re on another platform.

OK. Buckle up - here we go!

2.1 HTML (HyperText Markup Language)

You’re developing software that displays text in a web browser. To control how that text appears — its position, size, colour, and emphasis — browsers rely on a system called markup. Markup works by surrounding text with special instructions, called tags, that tell the browser how to display the content.

You can try this out immediately using a simple text editor such as Microsoft’s Notepad.

Type the following line into your editor and save the file with an .html extension (for example, my-first-app.html):

<h1>Hello there</h1>

Now double-click the file. Your default web browser should open and display the words Hello there as a large heading. Congratulations — you’ve written your first webapp (albeit one that only you can see for now).

If this doesn’t work as expected, don’t get stuck. File associations and browser settings vary by device, so this is a good moment to ask ChatGPT for help. Describe what you’re seeing, and it can guide you through fixing the issue.

In this example, <h1> and </h1> are HTML tags. They tell the browser that the enclosed text should be displayed as a top-level heading. HTML includes many such tags, each with a specific purpose.

A good place to start learning HTML is Mozilla’s excellent guide:
Getting Started with the Web

Another popular resource is the interactive
W3Schools HTML Tutorial, which lets you experiment directly with HTML syntax.

You’ll also discover that tags can be qualified with additional instructions. For example, an <h1> tag can include a style attribute to change its colour:

<h1 style="color: red;">Hello there</h1>

These styling rules belong to a system called CSS (Cascading Style Sheets), which we’ll see in action shortly.

2.2 The IDE (Integrated Development Environment)

As you’ve probably guessed, even simple web applications quickly grow into large collections of files. Webapp code is verbose, and files containing hundreds or thousands of lines are entirely normal.

You could type all of this into a basic text editor like Notepad, but that approach doesn’t scale. Small mistakes — missing brackets, misspelt keywords — are easy to make and can be hard to spot. What you really want is a specialised editor that understands code and helps you write it correctly.

That’s the role of an IDE (Integrated Development Environment).

An IDE monitors your code as you type, highlights its structure, flags obvious errors, and often suggests or completes code for you. Used well, it dramatically reduces frustration and speeds up development.

There are many IDEs available, but the one I recommend is Visual Studio Code (VS Code). It’s free, widely used, and well supported by excellent documentation.

VS Code includes tools to format code consistently, detect syntax errors, and provide auto-completion for things like JavaScript keywords and variable names. As your project grows beyond a single .html file, it also helps you manage the collection of files that make up your application — what developers refer to as a project.

For example, VS Code lets you search and edit text across all files at once, undo changes by returning to earlier versions of a file, and run commands directly via an integrated terminal. These features become indispensable as your projects grow.

This is a good point to install VS Code and work through Microsoft’s short introduction:
Getting Started with Visual Studio Code

2.3 JavaScript

JavaScript is a good first programming language (and might possibly be the only one you ever need). It runs natively in the web browser, where it can read and modify the HTML that defines your web page — put simply, it can change what appears on the screen. It can also communicate with remote servers, making it useful well beyond simple visual effects.

JavaScript runs directly in the browser, with no separate compilation step, so you can edit code and see the results immediately. Your web browser itself acts as the JavaScript runtime (i.e., the interpreter that converts your code into the low-level instructions that actually display information on your screen).

Because HTML follows strict structural rules, the browser can build an internal representation of the page called the Document Object Model (DOM). JavaScript can access and modify individual elements within this model.

Let’s extend the my-first-app.html file you created earlier:

<h1 id="test">Hello there</h1>
<script>
let hourOfDay = (new Date()).getHours(); // 0–23
if (hourOfDay < 12) {
    document.getElementById('test').style.color = "blue";
} else {
    document.getElementById('test').style.color = "red";
}
</script>

This version makes the output depend on the time of day. Before midday, the text appears in blue; after midday, it appears in red. You’ve now written a simple dynamic web application. Congratulations - you're a programmer!

The <script> tags tell the browser that the enclosed content is JavaScript code. The expression new Date().getHours() returns the current hour (from 0 to 23). The if / else logic then uses this to decide which colour to apply.

If you’d rather not wait until lunchtime to test this behaviour, try switching the colour based on whether the current minute is even or odd. You can obtain the minute using getMinutes() and test for even numbers with:

if (num % 2 === 0)

The id="test" attribute on the <h1> tag gives that element a unique identifier. The call to document.getElementById('test') allows JavaScript to find that element and modify its style.

If you have any problems getting these heavily abbreviated instructions to work, just cut and paste the code from your file into ChatGPT and tell it what problem you're seeing. It will respond with an explanation of the necessary changes and a corrected version for you to paste back into your file.

You won’t spend your life writing document.getElementById(...) calls. Modern frameworks allow you to control screen behaviour using higher-level, more expressive patterns. In this series, you’ll use a framework called SvelteKit, which greatly simplifies this kind of work.

To become fluent in JavaScript, you’ll need a solid reference. The book I recommend is Eloquent JavaScript by Marijn Haverbeke. A physical copy is ideal, but the online version is also available. For browser-based learning, Mozilla’s tutorial on JavaScript basics is an excellent alternative.

Finally, start thinking about a small personal project to practise on. What data would it use? How would users interact with it? These questions will become increasingly important as you progress.

2.4 Browser Tools**

Your code won't work perfectly the first time. That's normal. Maybe the layout's off, or your logic has a bug. Sometimes the browser throws an error, sometimes it just sulks silently.

Your secret weapon: Browser DevTools

Every major browser has built-in debugging tools. In Chrome, just right-click anywhere on your page and select "Inspect." Boom—you're in.

Yes, it looks intimidating at first — a maze of tabs and panels. But trust me: once you learn the basics, you'll wonder how you ever coded without it. Full Chrome DevTools docs here.

What you can do with it:

Layout problems? The inspector shows you exactly how margin, padding, and width are affecting each element. You can even tweak values in real time and see instant results.

Logic problems? Set breakpoints in your JavaScript. Your code will pause when it hits them, letting you check variable values and step through line by line.

Code crashes? The console tells you exactly what went wrong and where.

Try it now: Open that my-first-app.html file from section 2.3, right-click, hit Inspect, and poke around. Change the colour in the Elements tab. Check the Console tab for any messages. Get comfortable — you'll be living here.

2.5 SvelteKit

In section 2.3, JavaScript interacted with the page using calls such as document.getElementById(...). While this works, it quickly becomes fragile and hard to maintain as applications grow.

Frameworks such as SvelteKit provide a higher-level interface to the browser’s DOM. Instead of manually locating elements and changing their properties, you describe what should happen, and the framework keeps the screen in sync with your data. This approach is known as reactivity.

For example, in Svelte, you can express logic such as “when popupVisible becomes true, show the popup”. When the value changes, the framework automatically updates the screen—no explicit DOM manipulation required.

During development, SvelteKit runs your application using a local development server started from the IDE’s terminal. As you edit your code, the browser refreshes automatically, giving near-instant feedback. This tight edit–refresh loop makes experimentation and learning much easier.

SvelteKit also allows you to control where code runs. Some logic executes in the user’s browser, while other logic can run securely on the server. You don’t need to worry about this distinction yet, but it becomes important when dealing with performance, security, and private data. SvelteKit is designed to make this separation clear and manageable.

When your application is ready, the framework “builds” it for deployment. This process bundles and optimises your code so that the deployed webapp is fast, compact, and efficient.

Many web frameworks exist, including React, Vue, and Angular. SvelteKit is a newer option, and I’m using it here because it offers a clean mental model, especially suited to beginners.

Svelte is the language that extends JavaScript and defines how components behave. SvelteKit is the framework that provides routing, server integration, and the overall application structure. You’ll be using both together throughout this course.

2.6 Firebase and App Engine

You can develop a complete webapp on a modest desktop computer. However, once you want other people to use it, you’ll need a specialist backend platform to support it on the web. This backend will:

• Provide a public endpoint (a URL) from which your webapp’s files are delivered to users’ browsers.
• Provide central storage for your application’s data, typically in a structured database.
• Provide a secure environment for running sensitive or privileged parts of your application logic.

In this course, you’ll use two services from Google Cloud:

• Firebase — an application development platform that provides tools such as Firestore, a simple and scalable cloud database.
• App Engine — a hosting platform used to deploy your SvelteKit webapp and run its server-side code.

Because Firestore is used from the outset, your first step will be to create a Firebase account.

In the past, cloud services were often provided by traditional Internet Service Providers such as GoDaddy or HostPapa. These services still have their place and can offer excellent hands-on support. For modern web application development, however, cloud platforms such as Google Cloud offer a more flexible, integrated toolset.

3. Now Read on

This course is organised into two main stages.

In the first stage, you’ll learn the foundations: HTML, JavaScript, Firebase, and Firestore. If you’re new to web development, there’s a lot to absorb here, and it’s normal to feel unsure at times. Take it slowly, revisit sections as needed, and make active use of your chatbot tutor to unblock yourself.

The second stage introduces more advanced SvelteKit concepts and patterns. By the time you complete it, you’ll have the core skills needed to design, build, and deploy a genuinely useful web application.

The next step is to install SvelteKit on your local machine and get comfortable with the webapp development workflow. See Post 2.1 for instructions.

Keep smiling! This is all going to be just fine!