Reading AI-generated code; working with an agent

Today we reviewed git with five questions and three live demos, set up the Babson Claude key in VS Code, went back through the HTML head and the common tags, and had the agent build a richer hello.html. Two classmates gave the first lightning talks of the semester. When the agent writes code for you, open the page and check it before you move on.

The last git question asked what happens when you add secrets.txt to .gitignore after committing it last week. Nothing happens. The file stays in the repository, and in a public repository anyone can read it. In class I also called "GitHub hides it from visitors" correct. That was wrong, because I had misread the question.

.gitignore only applies to files git is not tracking yet. The demo in class created a new secret.txt that had never been committed, which is the case where it works.

To stop tracking a file you already committed:

1. Add the file's name to .gitignore.
2. Move the file out of your repository folder, then commit and push. Git records it as deleted.
3. Move the file back. Git now ignores it.

The file is still in your old commits, so if it held a password or an API key, treat that key as exposed and replace it. VS Code stores your Babson key outside your repositories. If you ever paste it into a project file and commit it, message me for a new one.

• Commit saves a snapshot in the repository on your computer. GitHub does not have it yet.
• Push sends your commits to GitHub. The Sync Changes button in VS Code pulls and pushes in one step.
• Pull brings commits from GitHub down to your computer. You need it when GitHub has changes you do not, for example after you edit a file on github.com.

In GitHub Desktop, Fetch origin checks GitHub for new commits, and the button becomes Pull origin when there is something to bring down. On a team project, pull before you start working.

If GitHub has commits you do not have, the push fails. Pull first, and git combines the two versions. Changes on different lines merge automatically. If both sides changed the same lines, you get a merge conflict, and VS Code shows buttons above each one:

• Accept Current Change keeps your version.
• Accept Incoming Change keeps the version from GitHub.
• Accept Both Changes keeps both, and you tidy up afterwards.

Save, complete the merge, then push.

GitHub Pages runs on servers where Logs and logs are two different folders. Windows and macOS usually treat them as the same folder, so a wrong capital letter looks fine on your laptop and still counts as missing online. Use lowercase, no spaces, and hyphens between words.

To fix only the capitalization, rename in two steps: rename Logs to logs-temp and commit, then rename logs-temp to logs, commit and push. On Windows and macOS, git usually does not notice a rename that changes only a capital letter.

The steps are in Your Babson AI Key. Pick Sonnet 5 (Babson) in the chat model picker and pin it. When this course says "use AI", this is the setup it means. The budget is $100 a month and resets on the first of each month, and the key runs through December 31.

• <!DOCTYPE html> tells the browser the file is an HTML page.
• <html lang="en"> declares the page's language. Screen readers use it to pronounce the text, and browsers use it when they offer a translation.
• <title> is the text on the browser tab.
• <meta charset="UTF-8"> names the character encoding. UTF-8 covers every language, so Chinese, Spanish and emoji all display correctly.
• <meta name="viewport" ...> makes the page scale to a phone's screen width.
• <meta name="description" ...> is a one-sentence summary that search engines often show under your link. Search for Babson College, then find the same sentence in the page source.
• A favicon is the small icon on the browser tab. Many sites serve it at /favicon.ico. Give your personal site one, in the same colors as the rest of the site.

• Format the file with Shift+Alt+F (Windows) or Shift+Option+F (macOS). The indentation then shows which element sits inside which.
• Comment out the <style> block to see the page with no CSS: large bold headings, plain paragraphs, blue underlined links.
• An <a> needs an href, the address the link goes to. An <img> needs a src, and an alt that describes the picture.
• Keep images in your repository when you can. A picture linked from another site can change or disappear.
• Type html:5 in an empty .html file and press Tab for a starter page. This is a template built into VS Code, and no AI is involved.
• View → Word Wrap keeps long lines on screen.

The prompt from class:

"Take my hello.html and add a navigation bar, a section with a list of my interests, and a footer. Use different HTML tags I have not seen before."

Then:

1. Read what the agent changed, line by line.
2. Mark every tag or attribute you do not recognize.
3. Ask the agent about those, and only those.
4. Change one thing to prove you understand it.
5. Open the page with Live Server and check that it shows what you asked for.

The agent knows which file you have open, and it reads files from your folder as it works. When the result needs a fact only you know, such as your GitHub username, tell the agent and let it make the edit.

AI tip: Type # in the chat box to add another file from your repository to the agent's context.

Two classmates gave the semester's first lightning talks, one on AI in schools and one on Apple's new foldable phone. The Thinking Game, the DeepMind documentary that came up in the discussion, is free to watch. Claim your own slot on the lightning board.

Mini Project 1: start looking for a client and schedule the interview.

Checkpoint 1 closes Sunday 9/13. In your oim3690 repository:

1. hello.html at the root, pushed to GitHub.
2. logs/wk02.md, including something you learned from reading the AI-generated hello.html or index.html.
3. Anything else on the Checkpoint 1 list that is still missing. Check every folder and file name letter by letter.

about-me.html is not due this week. We build it on Tuesday.

Tuesday: we finish HTML and start CSS.