Organizing a Small Web Project Structure

Hello—your development workspace now has a stable parent folder, projects, and you know how to reach it with PowerShell. This lesson turns that empty workspace into a real, small web-project structure.

The aim is not merely to make files appear in VS Code. You will give each kind of file a predictable home, use names that will still work when the site is published, and verify that VS Code and PowerShell are working in the same project. This is an early habit of maintainable software: make the structure clear enough that you can locate a responsibility without hunting.

For this course, we will use a small starter project called small-business-starter. It is only a learning workspace for now, not a final product commitment.

---

A project has one root folder

A project root folder is the top-level folder containing everything that belongs to one application or website. In the previous lesson, projects was a workspace parent: it is where many separate projects can live. This lesson creates one project root inside it.

Our target structure is:

projects
  small-business-starter
    index.html
    images
    styles
      main.css
    scripts
      main.js

Each item has a distinct job:

Item	Purpose
small-business-starter	The project root: everything for this site stays inside it.
index.html	The main web-page document. Later, it will contain the page’s semantic structure and content.
images	Image assets such as logos, photographs, and icons.
styles	CSS files that control visual presentation.
styles/main.css	The site’s main stylesheet.
scripts	JavaScript files that provide behavior and interactivity.
scripts/main.js	The site’s main browser-side JavaScript file.

This structure is deliberately small. A beginner project does not need folders for every imaginable future possibility. The goal is a useful separation between page content, visual styling, behavior, and media—without premature complexity.

A folder layout is not, by itself, the complete software architecture of an application. It is a local organizational decision. But it supports architectural thinking because clear boundaries make responsibilities easier to see and change.

---

Names and paths are part of the project’s contract

A file name usually has two parts: its base name and its extension. In main.css, main is the base name and .css identifies it as a CSS stylesheet. Similarly:

• .html identifies an HTML document.
• .css identifies a stylesheet.
• .js identifies a JavaScript file.
• Common image extensions include .png, .jpg, .svg, and .webp.

The extension matters. A file accidentally named index.html.txt is a text file whose name happens to contain html; a browser will not treat it as your intended HTML document. Creating files directly inside VS Code reduces this risk because you explicitly type the whole name.

Use these naming conventions throughout the course:

1. Use lowercase letters.
2. Use short, descriptive names.
3. Do not use spaces.
4. Separate multiple words with hyphens, such as pricing-guide.html or business-logo.png.
5. Keep the extension unchanged when renaming a file.

These rules prevent a common deployment surprise. Windows usually treats Logo.PNG and logo.png as the same filename, but many web servers do not. A page that refers to images/logo.png may fail to load an actual file named images/Logo.PNG after deployment. Consistency is more valuable than clever names.

A relative path describes a location from the file that refers to it. When index.html eventually needs the stylesheet, its path will be:

styles/main.css

When it needs JavaScript, its path will be:

scripts/main.js

And an image called welcome-sign.jpg in the image folder would be located with:

images/welcome-sign.jpg

Even on Windows, web paths use forward slashes (/), not Windows backslashes (\). The location is relative to index.html, which is why the folder structure needs to be intentional before you begin linking files together.

---

Build the starter project in VS Code

Open VS Code. If your projects folder is not already open, select File > Open Folder…, find the projects folder you created in the previous lesson, select it, and choose Select Folder.

In the Explorer, make sure the folder name at the top is projects. The Explorer is a view onto your actual file system: any file created here also exists on your computer.

1. Create the project root

Move the pointer over the projects folder in Explorer. Click the New Folder icon, type:

small-business-starter

Press Enter.

If that folder already exists, do not create a second version with a slightly altered name. Expand it and inspect its contents first. Reusing it is appropriate only if it is the project you previously created intentionally.

2. Open the project root, not just its parent

Right-click small-business-starter in Explorer and choose Open in Integrated Terminal. In the terminal, run:

pwd

The result should end in a path similar to:

...\Documents\projects\small-business-starter

The beginning may differ if your Documents folder is under OneDrive. What matters is that the final folder is small-business-starter.

Now open this project root as its own VS Code workspace:

1. Select File > Open Folder….
2. Open projects.
3. Select small-business-starter.
4. Choose Select Folder.
5. If VS Code asks whether you trust the authors, choose Yes, I trust the authors only because this is the folder you just created yourself.

Opening the project root keeps the Explorer, file search, terminal commands, and later Git repository focused on one application.

3. Create the root HTML file

In Explorer, select the small-business-starter folder. Click New File, type:

index.html

Press Enter, then save with Ctrl+S.

For now, leave the file empty. The next lesson will focus on writing the semantic HTML that belongs inside it. At this moment, the important result is its correct location and extension: directly in the project root.

4. Create the three asset folders

Select small-business-starter before each action so that every folder is created at the root level. Use New Folder to create these folders one at a time:

images

styles

scripts

The Explorer should now show index.html alongside all three folders. images, styles, and scripts are siblings—not folders inside one another.

5. Create the CSS and JavaScript files

Expand the styles folder. Select it, choose New File, and create:

main.css

Then expand the scripts folder. Select it, choose New File, and create:

main.js

Save each file with Ctrl+S. Your completed structure should now match:

small-business-starter
  images
  index.html
  scripts
    main.js
  styles
    main.css

The ordering in Explorer may differ because VS Code can sort folders and files differently. The locations, not the display order, are what matter.

---

Verify before moving on

Open the integrated terminal with View > Terminal or **Ctrl+**. Because you opened small-business-starter` as the workspace folder, a newly opened terminal should normally start there. Confirm rather than assume:

pwd
dir

You should see index.html, images, styles, and scripts in the dir listing. You can inspect the files inside each code folder:

dir styles
dir scripts

You should find main.css inside styles and main.js inside scripts.

Use the Explorer as your main visual organizer and PowerShell as an independent check. If something appears in one but not the other, pause and verify the folder path; you may have opened a different folder in VS Code than the terminal is using.

A few maintenance rules will keep this project orderly:

• Keep every file for this starter site inside small-business-starter.
• Put downloaded images in images before you use them in the page.
• Do not place CSS beside index.html; keep it in styles.
• Do not place JavaScript beside index.html; keep it in scripts.
• Rename and move files deliberately. Any reference to a moved file must be updated.
• Avoid creating folders such as backend, database, or components yet. They have no responsibility in this small static project at this stage.

This last point is important. Good structure is not the largest number of folders; it is the smallest structure that clearly supports the work you have now.

---

Wrap-up

You have created a practical foundation for a web project:

• projects remains your parent workspace for multiple applications.
• small-business-starter is one self-contained project root.
• index.html is the future main page.
• images, styles, and scripts separate three common types of web assets.
• main.css and main.js have clear, predictable locations.
• Lowercase, hyphen-separated names and correct extensions make local development and future deployment more reliable.
• pwd and dir let you verify that your terminal is operating inside the intended project.

Next, you will begin filling index.html with semantic HTML elements: meaningful page structure such as headings, navigation, main content, and a footer.