File types and what's inside
Extensions tell the computer how to open a file
⏱ Est. ~4 min
01 · Read
A file extension (the part after the period) tells the computer what kind of content is inside the file, and which program should open it.
💡 Picture thisAn extension is like the label on a box. A box marked "Fragile — Glass" tells you what's inside and how to handle it. A file ending in .jpg tells the computer "this is an image, open it with an image viewer".
Key points
- Text files (.txt, .md): plain text, any text editor can open them
- Document files (.pdf, .docx): formatted documents
- Images (.jpg, .png, .gif, .svg): visual content
- Code files (.html, .css, .js, .py, .ts): instructions for the computer
- Data files (.json, .csv, .xml): structured data
- Config files (.env, .yml, .toml): settings and configuration
- YAML files (.yml, .yaml): readable config files that use indentation to organize data, commonly used for system config, CI/CD pipelines, and app configuration
02 · Read
One more important idea: code files are just text files with special extensions. Any .js or .html file can be opened in a regular text editor and read directly. There's nothing mysterious or encrypted about code.
03 · Match
Match each file on the left to its type on the right: click a file on the left, then click its matching type on the right.
(This section is interactive — please enable JavaScript.)
04 · Quiz
A friend sends you a file called styles.css. What's inside?
- An image
- A spreadsheet
- Styling code for a web page
- A video
05 · Quiz
Can you open a .js file with a regular text editor?
- No, you need special software
- Only after renaming it to .txt
- Yes, but the code will be unreadable — like garbled text
- Yes — code files are just text files
Other lessons in this chapter
⚠ The full interactive experience needs JavaScript. Please enable it and reload.
※ This is an independent Traditional Chinese teaching project — not an official Anthropic product. Claude™ is a trademark of Anthropic, PBC.