Unfamiliar with some of the technologies mentioned in this guide? Here are resources to help you get up to speed.

Working with AI

For a general background about working with AI for a project like this, here are authors and articles that have proven to be helpful and thought-provoking:

Here's how I use LLMs to help me write code

Simon Willison, one of the foremost thinkers and (thankfully for us) sharers of information about AI, rounds up his philosophy and tips for working with it to write code. Though some of this is dated because the technology moves fast, most of it remains relevant and useful.

An Opinionated Guide to Using AI Right Now

Ethan Mollick, another AI titan, is also a teacher, so his perspectives and advice always hit home and act as guiding stars for work like this. His book, Co-Intelligence, is also a highly recommended read.

Web Fundamentals & JavaScript

The Odin Project

The Odin Project covers:

• How the web works (client-server communication, HTTP, URLs)
• HTML and CSS fundamentals
• JavaScript basics and modern ES6+ features
• Working with the DOM (making web pages interactive)
• Asynchronous JavaScript (handling API calls)

The "Foundations" course and early sections of "Full Stack JavaScript" provide solid grounding in web development concepts.

Programming Fundamentals

If you're new to programming and want to go beyond the JavaScript content in The Odin Project, Python is a good starting point. Its readable syntax makes core concepts easier to grasp, and those concepts transfer to other languages.

Resources:

• Python for Everybody - a full online course by Dr. Charles Severance
• Think Python - a beginner friendly course by Allen B. Downey
• Python Programming Beginner Tutorials a YouTube playlist by Corey Schafer

Core concepts:

• Variables and data types
• Functions
• Loops and conditionals
• Data structures (lists, dictionaries/objects)
• Reading and writing files
• Error handling

PHP (for those familiar with another language)

This project uses PHP on the server side. If you know JavaScript or Python, these resources help bridge to PHP syntax:

• Learn PHP in Y Minutes - a concise overview
• PHP Manual - Getting Started
• PHP The Right Way

Key PHP concepts for this project:

• Reading/writing JSON files with json_encode() and json_decode()
• Using getenv() for environment variables
• Making HTTP requests with cURL
• Basic error handling

Hosting & Environment Setup

Working with shared hosting requires these skills and tools:

FTP/SFTP - Uploading files to your web server

• Filezilla - a cross-platform SFTP client
• Cyberduck - a Mac and Windows SFTP client
• Your hosting provider's FTP documentation

Environment Variables - Storing API keys securely

• Check your hosting provider's documentation for "PHP environment variables" or "cPanel environment variables"

.htaccess Files - Apache server configuration

• .htaccess files - Apache tutorial

Error Logs - Finding and interpreting server errors

• Look for "error logs" in your hosting control panel

APIs

Before working with AI APIs, understand how APIs function generally.

API Fundamentals:

• What is an API? - a quick introduction by Mulesoft (3 min)
• What is a REST API? - a more specific information by IBM Technology (9 min)
• APIs for Beginners - a full video course by freeCodeCamp (3 hours)

Key concepts:

• API requests and responses
• HTTP methods (GET, POST)
• Authentication (API keys)
• JSON data format
• Rate limiting

AI Provider Documentation:

NOTE: Once you've chosen your provider, also consider saving relevant pages as Markdown (see below) to provide as references

• Google Gemini API Quickstart
• OpenAI API Documentation
• Anthropic Claude API Documentation

Cost Understanding:

• LLM Pricing Calculator by Simon Willison

Command Line Interface (CLI) Basics

You'll use terminal commands for Git, creating directories, and navigating your project. Basic CLI familiarity is essential.

Core commands you'll need:

• cd - Change directory
• ls (macOS/Linux) or dir (Windows) - List files
• mkdir - Create directory
• pwd - Show current directory path
• Basic Git commands (covered in next section)

Resources:

• Command Line Crash Course by MDN (30 min)
• Windows Command Line Basics by MakeUseOf

For this project, you'll need to know about:

• Opening a terminal/command prompt
• Navigating to your project directory
• Running basic Git commands
• Creating directories with mkdir

Version Control with Git

You'll commit your work at the end of each build stage. Basic Git knowledge helps you track progress and recover from mistakes.

Core Git concepts:

• Initializing a repository (git init)
• Checking status (git status)
• Staging changes (git add)
• Making commits (git commit)
• Viewing history (git log)
• Seeing what changed (git diff)

Resources:

• Git Handbook by GitHub (10 min read)
• Git - The Simple Guide - No-frills reference, but a bit of salty language

For this project, you'll need:

• A Local Git repository (no GitHub account required)
• The basic commit workflow: git add . → git commit -m "message"
• The ability to view history and differences between commits

AI Coding Tools

You'll use AI coding assistants to generate most of the code for this project.

Command-line AI coding assistants:

• Claude Code - Anthropic's AI coding assistant
• OpenAI Codex - OpenAI's coding assistant
• Gemini CLI - Google's command-line AI assistant

Working with AI coding assistants:

• Describe what you want to build in natural language
• Ask for explanations when code isn't clear
• Provide error messages when something doesn't work
• Use browser DevTools (Console, Network tab) to capture detailed error information
• Check server error logs and share relevant entries with the AI
• Test incrementally and provide results back to the AI for iteration
• Ask the AI to include diagnostic output (console.log, error_log) in the code it generates

Markdown Basics

Markdown is a lightweight text formatting syntax that's widely used in documentation, README files, and when working with AI tools. Understanding markdown helps you read and write formatted documentation effectively.

Why markdown matters for this project:

• AI coding assistants work well with markdown-formatted prompts and context
• Your context template and other files for AI use are formatted with markdown
• It's human-readable as plain text but renders beautifully when formatted

Core markdown syntax:

• Headers: # Heading 1, ## Heading 2, ### Heading 3
• Bold: **bold text**
• Italic: *italic text*
• Lists: - item or 1. item
• Code blocks: Three backticks on separate lines before and after code
• Links: [link text](url)

Resources:

• Markdown Guide - Complete introduction
• Markdown Cheat Sheet - Quick reference
• CommonMark Tutorial - Interactive 10-minute tutorial

For this project, you'll need:

• Ability to read markdown-formatted documentation
• Basic formatting for your ai-context-template.md file
• Understanding of code blocks and lists

Learning Communities

These communities can help with specific technical questions:

• freeCodeCamp
• Stack Overflow
• r/learnprogramming

Found a better resource? Suggestions welcome.