Understanding Common Project File Types

Welcome to the third module of our course, where we'll start making sense of the files and folders that make up a software project. In our last lesson, you successfully used npm run dev to launch a local development server and saw the magic of hot reloading firsthand. You now understand the basic command loop for running a modern web project.

Now, let's open up that my-first-app folder you created. Inside, you'll find a collection of files with different names and endings, like .html, .css, and .js. When an LLM generates an app for you, it creates a similar set of files. Think of these as the different materials and documents for a physical product: you have the structural blueprints, the color and finish specifications, and the user manual explaining how it works. In this lesson, we will decode these common file types so you can understand the distinct role each one plays in bringing your app to life.

The Foundation: HTML, CSS, and JavaScript

At the heart of virtually every website and many web apps are three core technologies, each with its own file type: HTML, CSS, and JavaScript. A classic and effective analogy compares them to the human body.

Let's break down what this means in practice.

• .html (HyperText Markup Language): This is the structure of your app. HTML files use tags like <h1> for a heading or <p> for a paragraph to define and organize the content. It’s the raw skeleton that holds everything together. When you edited the <h1> tag in the Vite project, you were directly changing the HTML structure.

• .css (Cascading Style Sheets): This is the presentation layer. A .css file contains rules that tell the browser how to display the HTML elements. This is where you define colors, fonts, spacing, and layout. It's the "skin and clothes" that give your app its visual identity, turning a plain skeleton into a finished design.

• .js (JavaScript): This is the behavior of your app. JavaScript files make your app interactive. When you click a button and a menu appears, or when an animation plays, that's JavaScript at work. It's the "brain" that responds to user actions and can even change the HTML and CSS of the page dynamically.

This short video from Danielle Thé gives a great and quick overview of how these three work together.

When you're vibe-coding and your LLM gives you code for a .html file, you know it's defining the core content. If it's a .css file, it's all about styling. And if it's a .js file, it's adding some form of interactivity.

The Modern Upgrade: TypeScript (.ts)

As you build more complex apps, you'll frequently see .ts files instead of .js files. Many modern projects, and therefore many LLM-generated projects, use TypeScript by default.

Think of TypeScript as an enhanced version of JavaScript. It is, as its name suggests, "typed" JavaScript. In regular JavaScript, a variable can hold a number one moment and a piece of text the next, which can sometimes lead to unexpected bugs. TypeScript helps prevent this by allowing you to define what type of data a variable is supposed to hold. It's like having a set of labeled containers in your workshop—one for screws, one for liquids, one for wires. You're less likely to make a mistake by putting the wrong thing in the wrong place.

This makes your code safer, more predictable, and easier for you (and your LLM) to understand, especially in large projects.

The key takeaway is that TypeScript is a "superset" of JavaScript. This means any valid JavaScript is also valid TypeScript. You're simply adding extra information (types) to make your code more robust. When Claude generates a .ts file, it's giving you code with these built-in safety checks.

The Project's Organizer: JSON (.json)

The last file type we'll cover today is .json (JavaScript Object Notation). You've already encountered this one: the package.json file in your project is a JSON file.

JSON files are used for two primary purposes:

1. Configuration: They act as settings files for your project and the tools it uses. package.json tells Node.js and npm about your project, its dependencies, and its scripts. You'll also encounter other files like tsconfig.json (for TypeScript settings). Think of these as the instruction manuals and spec sheets for the tools in your workshop.

2. Data Storage and Exchange: JSON is a simple, human-readable text format for representing structured data. This makes it the most common format for APIs (which we'll cover later) to send and receive information. It’s a universal language that different systems can use to talk to each other.

Here is what a typical package.json file looks like. Notice the simple key: "value" structure.

To see where these files fit in the broader ecosystem, this guide is a useful reference.

Conclusion

You can now look into a project folder and see not just a random list of files, but a set of components with clear responsibilities. You've demystified the five most common file types you'll encounter when vibe-coding a web application.

Key Takeaways:

• .html (The Skeleton): Defines the structure and content of your page.
• .css (The Skin): Defines the visual style and presentation.
• .js (The Brain): Adds interactivity and behavior.
• .ts (The Upgrade): A safer, more robust version of JavaScript that is common in modern projects.
• .json (The Organizer): Used for configuration files (package.json) and for exchanging data.

In our next lesson, we'll zoom out a little. Now that you understand the individual files, we’ll explore why they are organized into specific folders like src, public, and components. You'll learn how a good folder structure keeps a project tidy and makes it much easier to build and maintain.