In this project, you will create a real project folder, write two source files, and ask four AI models to turn the same material into a small personal website.
By the end, your folder will contain:
project-1/
├── me.md
├── prompt.txt
├── me-gpt-5.6-luna.html
├── me-claude-haiku-4.5.html
├── me-gemini-3.1-flash-lite.html
└── me-glm-5.3-flash.html
Along the way, you'll learn about:
- Files, folders, and text files
- Markdown and HTML
- Paths and file extensions
- One-shot prompting across different AI models
Work in the real files on your computer. The fields in this project are a backup of your work. Sign in and complete each part as you go.
In the olden days, before the internet, anything of value on your computer was stored in files. Usually, these files were organized into folders.
If you wanted to write a document of some sort, you'd use a text file.
Some of this knowledge has been smoothed over or lost in the iPad era of computing. Files and folders are often baked into apps or stored in "the cloud."
When we're building things like websites, apps, systems, etc., we need to understand the basics of how files and folders work.
This project will walk you through a series of tasks that will help you use your computer more effectively and stay organized and efficient.
We're going to create a new folder for your class work and then, inside that folder, another folder for this project.
Nested folders are organized into a particular data structure called a "tree." Conceptually, that might look like this:
/Users/<your-name>/My Classes/
/CSC 105/
/Project 1/
Note: <your-name> is a placeholder for your actual username on your computer.
The above is often called a "folder structure." This will come up later when we are working on large projects with lots of moving parts. Keeping things organized and clean will make your life (and your agents' lives) easier.
Now, if you're a web developer/coder, you might look at that and cringe a little: those folder names have spaces in them!
In code, we tend to use lowercase letters and hyphens or underscores instead of spaces.
Something like this:
~/classes/
/csc-105/
/project-1/
On Unix-based systems (e.g., macOS, Linux), there's a special shortcut to your "user folder": the tilde (~) character.
So, assuming the structure above, the path to your project folder might be
~/classes/csc-105/project-1/.
This is important even if you use Windows, because most web servers and development environments use Unix-based systems.
On Windows, paths use a backslash (\) instead of a forward slash (/) and the drive letter is included (e.g., C:\Users\your-name\Documents\furman\comp-100\project-1\).
Windows does have a special shortcut to the user folder, but it's ugly and not so short: %USERPROFILE%.
Now it's your turn. Create a class folder and a Project 1 folder under it. You don't have to name them exactly like the examples above, but I would suggest using lowercase letters and hyphens or underscores instead of spaces.
Good job! But do you know how to describe where your folders are?
In the workbench below, describe the folder structure (including your user folder) as a tree, like the examples above.
folder-tree.txt
Map your folder structure
Represent the folders you actually created. Use one line per folder and indentation to show nesting.
Next, record the exact path to your Project 1 folder. On macOS, you can drag a folder into Terminal to reveal its path. On Windows, click the File Explorer address bar.
$ pwd
Record the exact path
This should identify one specific folder on your computer, not just describe its shape.
Not submitted
Folders aren't much good unless we put something in them. That something is often a text file of some sort. Text files are simply files with text in them. There are different kinds of text files you can use. The kind of text file is indicated by an "extension." The extension is a suffix added to the end of the file name to indicate the type of file.
Some common extensions:
| Extension | What it usually contains |
|---|---|
.txt | Plain text |
.md | Markdown |
.html | The structure and content of a web page |
.css | A web page's visual styles |
.js | JavaScript behavior |
All of the above are technically plain text files, and you can read them in ordinary text editors like Notepad, TextEdit, VS Code, etc.
Modern operating systems tend to hide these by default, so it's likely you aren't aware of them. Have you ever wondered how your computer knows to open certain files with certain programs, or what icons to show for certain files? It's because of the extension.
Typically, a .html file will open in your default web browser, a .txt file will open in your default text editor, etc.
Install or open a text/code editor:
- VSCode: a free, open-source text editor from Microsoft
- Zed: a free, open-source text editor
- Cursor: an AI-powered text editor from Cursor AI (forked from VSCode)
- Something else? You can choose any text/code editor you want.
Then use it to create a file named hello.txt inside your Project 1 folder.
Write one sentence in the file, save it, close it, and reopen it. That small
round trip proves the file really exists on disk.
text-editor
Record your editor
Enter the editor you used to create, save, close, and reopen hello.txt.
Not submitted
Now, using your new folder and text-file skills, we're going to introduce a new kind of file: the Markdown file.
Markdown is a simple markup language that lets you write text with formatting. It's often used to write README files, commit messages, and other documentation.
In the current "AI era" of computing (we're in the middle of it), Markdown has become the "lingua franca" of both AI input and output.
When ChatGPT is outputting formatted text in your ChatGPT app, under the hood, it is writing it in Markdown.
Much of modern software engineering has become a matter of creating tight Markdown specs and handing them off to AI agents to implement. Agents and humans alike are using Markdown to communicate and collaborate frequently.
For your final project submission, you will:
- Create a Markdown file in your project folder that describes who you are, your interests, and your goals (
me.md) - Use the Markdown file to "one-shot" prompt several different new files into existence.
- Zip/archive the new files and submit them to the instructor.
You'll use the course Prompt Lab to run the same prompt against four models so you can compare what changes—and what stays consistent.
Create me.md in your Project 1 folder. Write it in Markdown and include at
least:
- Your name and a short introduction
- Your interests or hobbies
- Something you have made, learned, or done that you are proud of
- What you hope to learn in this course
Use headings and lists so the document has a clear structure. You can practice
in the Markdown Lab, but your final source
must be saved as the real me.md file in your folder.
project-1/me.md
Back up your Markdown source
Paste the current contents of your real me.md file here. Keep editing the real file in your text editor; this copy lets your instructor see your progress.
Create a plain text file named prompt.txt. Write one prompt that tells an AI
agent to create a complete, standalone HTML personal page. Include the complete
contents of me.md inside the prompt so that it is self-contained. The output
should work when you double-click the HTML file—no build tools or extra files
required.
Think about the audience, content, visual direction, and technical constraints.
Tell the model to return only the raw contents of one HTML document, starting
with <!doctype html> and ending with </html>. Explicitly ask it not to add an
explanation or wrap the HTML in Markdown code fences (lines that begin with
three backticks).
You will use the exact same prompt with every model so the comparison is fair.
project-1/prompt.txt
Write the exact one-shot prompt
Paste the full contents of prompt.txt here. Write this as instructions you can reuse without adding follow-up messages.
Not submitted
Use the Prompt Lab below. Paste the exact contents of prompt.txt, run it once
with each model, and use Copy output to save each response as the matching
.html file. Do not change the prompt between runs.
Before saving each response, make sure it contains only the HTML page. Remove
anything the model added before <!doctype html> or after the final </html>,
including explanations and Markdown code fences such as ```html and
```. Do not change the HTML itself. The finished file should begin with
<!doctype html> and end with </html>.
Your final submission should be a single zip/archive file containing all of the following:
me.md: your description of yourself, your interests, and your goalsprompt.txt: your one-shot promptme-gpt-5.6-luna.html: an HTML file created by GPT 5.6 Luname-claude-haiku-4.5.html: an HTML file created by Claude Haiku 4.5me-gemini-3.1-flash-lite.html: an HTML file created by Gemini 3.1 Flash Liteme-glm-5.3-flash.html: an HTML file created by GLM 5.3 Flash
Before you archive the folder, open all four .html files in a browser. Your
folder should contain only the files you intend to submit.
Not submitted
Upload one ZIP containing me.md, prompt.txt, and all four HTML files. You can submit a newer ZIP if you make changes.
Not submitted
Submit your project