Project 1: One shot

Build a small website from one prompt

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.

Part 1: Create your workspace

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.

Task 1: Create and organize your project folder

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%.

Create your folders

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.

tree 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.

terminal $ pwd

Record the exact path

This should identify one specific folder on your computer, not just describe its shape.

Not submitted

Part 2: Work with text files

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:

ExtensionWhat it usually contains
.txtPlain text
.mdMarkdown
.htmlThe structure and content of a web page
.cssA web page's visual styles
.jsJavaScript 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.

Task 2: Choose an editor

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.

tool text-editor

Record your editor

Enter the editor you used to create, save, close, and reopen hello.txt.

Not submitted

Part 3: Markdown files and one-shot prompting

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:

  1. Create a Markdown file in your project folder that describes who you are, your interests, and your goals (me.md)
  2. Use the Markdown file to "one-shot" prompt several different new files into existence.
  3. 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.

Task 3: Write me.md

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.

markdown 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.

Task 4: Write one reusable prompt

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.

prompt 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

Part 4: Run, compare, and package

Task 5: Run the same experiment four times

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>.

Task 6: Check the final folder

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 goals
  • prompt.txt: your one-shot prompt
  • me-gpt-5.6-luna.html: an HTML file created by GPT 5.6 Luna
  • me-claude-haiku-4.5.html: an HTML file created by Claude Haiku 4.5
  • me-gemini-3.1-flash-lite.html: an HTML file created by Gemini 3.1 Flash Lite
  • me-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

Submit your project

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