# Computer Graphics and Web Development Courses in cs-self-learning: Complete Catalog

> Explore 6 Computer Graphics and 4 Web Development courses from PKUFlyingPig/cs-self-learning. Access university-level structured Markdown files for free self-study.

- Repository: [Yinmin Zhong/cs-self-learning](https://github.com/PKUFlyingPig/cs-self-learning)
- Tags: getting-started
- Published: 2026-03-02

---

**The PKUFlyingPig/cs-self-learning repository hosts 10 university-level courses—6 in Computer Graphics and 4 in Web Development—as structured Markdown files under `docs/计算机图形学/` and `docs/Web开发/` with consistent metadata patterns and bilingual support.**

The **PKUFlyingPig/cs-self-learning** repository serves as a comprehensive open-source curriculum for self-taught computer scientists. Within its documentation structure, you'll find dedicated tracks for **Computer Graphics and Web Development courses** that aggregate high-quality university materials from institutions like Stanford, MIT, and CMU. Each course is stored as an individual Markdown file with standardized metadata describing prerequisites, programming languages, and difficulty levels.

## Course Organization and Metadata Structure

### File System Layout

The repository stores every course description as an individual Markdown file within category-specific subdirectories. For **Computer Graphics and Web Development courses**, the relevant paths are:

- `docs/计算机图形学/` — Contains 6 graphics courses including ray tracing, real-time rendering, and physics simulation tracks
- `docs/Web开发/` — Contains 4 full-stack and frontend development courses

### Metadata Schema

Each Markdown file follows a consistent structure defined in the source code:

1. A level-1 heading (`# Course Name`) serving as the course title

2. A **课程简介** (Course Introduction) block containing key-value pairs for university affiliation, prerequisites, programming language, difficulty rating, and time commitment
3. A **课程资源** (Course Resources) section listing official websites, video playlists, textbooks, and assignment repositories

This flat file structure enables automated parsing and integration with static-site generators like MkDocs, which is configured via [`mkdocs.yml`](https://github.com/PKUFlyingPig/cs-self-learning/blob/main/mkdocs.yml) at the repository root.

## Available Computer Graphics Courses

The Computer Graphics track in `docs/计算机图形学/` features six university-level courses ranging from introductory ray tracing to advanced real-time rendering:

**USTC Computer Graphics** (University of Science and Technology of China) — Located at `docs/计算机图形学/USTC ComputerGraphics.md`, this course teaches C/C++ based graphics fundamentals.

**GAMES101** (UCSB) — Found in `docs/计算机图形学/GAMES101.md`, this introductory course focuses on C++ and rasterization basics.

**GAMES202** (UCSB) — The advanced follow-up at `docs/计算机图形学/GAMES202.md` covers real-time rendering techniques in C++.

**GAMES103** (UCSB) — Located in `docs/计算机图形学/GAMES103.md`, this specialized course explores physics-based animation using C++.

**Stanford CS148** — Stored as `docs/计算机图形学/CS148.md`, Stanford's introductory graphics course utilizing C++.

**CMU 15-462** — The Carnegie Mellon course file `docs/计算机图形学/15462.md` provides comprehensive C++ based computer graphics instruction.

All six courses specify C/C++ as their primary programming language and include detailed prerequisites in their **课程简介** metadata blocks.

## Available Web Development Courses

The Web Development curriculum under `docs/Web开发/` contains four full-stack and specialized frontend courses:

**MIT Web Development** — File `docs/Web开发/mitweb.md` covers HTML/CSS/JavaScript fundamentals from MIT's curriculum.

**Full-Stack Open** — Located at `docs/Web开发/fullstackopen.md`, this University of Helsinki and ETH Zürich collaboration teaches modern JavaScript and Node.js development.

**CS571: Building UI** — The University of Wisconsin-Madison course at `docs/Web开发/CS571.md` focuses specifically on React and React Native development in JavaScript.

**CS142: Web Development** — Harvard University's offering in `docs/Web开发/CS142.md` provides comprehensive HTML/CSS/JavaScript training.

## Bilingual Support and Localization

Every course file includes an English translation following a strict naming convention. The repository maintains parallel files using the [`.en.md`](https://github.com/PKUFlyingPig/cs-self-learning/blob/main/.en.md) suffix—for example, `docs/计算机图形学/USTC ComputerGraphics.en.md` contains the English version of the USTC Computer Graphics description. This dual-file structure ensures that both Chinese and international learners can access identical metadata and resource links in their preferred language.

## Programmatic Course Catalog Generation

Because the metadata is plain text following consistent patterns, you can extract **Computer Graphics and Web Development courses** automatically without manual parsing.

### Extracting Graphics Courses with Python

The following Python script parses the `docs/计算机图形学/` directory to generate a machine-readable catalog:

```python
import pathlib
import re

def parse_course(md_path: pathlib.Path):
    text = md_path.read_text(encoding="utf-8")
    title = re.search(r'^#\s+(.+)$', text, flags=re.MULTILINE)
    uni = re.search(r'- 所属大学：(.+)', text)
    language = re.search(r'- 编程语言：(.+)', text)
    return {
        "title": title.group(1).strip() if title else md_path.stem,
        "university": uni.group(1).strip() if uni else "‑",
        "language": language.group(1).strip() if language else "‑",
        "link": f"https://github.com/PKUFlyingPig/cs-self-learning/blob/master/{md_path.as_posix()}"
    }

base = pathlib.Path("docs/计算机图形学")
catalog = [parse_course(p) for p in base.glob("*.md") if not p.name.endswith(".en.md")]

for c in catalog:
    print(f"- [{c['title']}]({c['link']}) — {c['university']} ({c['language']})")

```

This script filters out English translation files (those ending in [`.en.md`](https://github.com/PKUFlyingPig/cs-self-learning/blob/main/.en.md)) and extracts the course name, university affiliation, and programming language using regex patterns that match the **课程简介** metadata structure.

### Querying Web Development Courses with Bash

For quick terminal-based exploration, use `ripgrep` to scan the `docs/Web开发/` directory:

```bash

# Show the first level heading and the university line for every .md file in the Web folder

rg -N '^#|^-\s+所属大学' docs/Web开发/*.md

```

This command outputs the course title and university metadata directly from the source files:

```text
docs/Web开发/mitweb.md:1:# mitweb

docs/Web开发/mitweb.md:5:- 所属大学：MIT
docs/Web开发/fullstackopen.md:1:# fullstackopen

docs/Web开发/fullstackopen.md:4:- 所属大学：University of Helsinki & ETH Zürich
...

```

These extraction methods demonstrate how the repository's flat Markdown layout enables integration with static-site generators, search APIs, and custom curriculum tools.

## Summary

- The **cs-self-learning** repository organizes **Computer Graphics and Web Development courses** as individual Markdown files under `docs/计算机图形学/` and `docs/Web开发/`.
- Six graphics courses are available (USTC, GAMES101/202/103, Stanford CS148, CMU 15-462), all utilizing C/C++ and stored with consistent metadata patterns.
- Four web development courses cover full-stack JavaScript (MIT, Helsinki/ETH), React (Wisconsin-Madison), and general HTML/CSS/JavaScript (Harvard).
- Bilingual support is implemented via parallel [`.en.md`](https://github.com/PKUFlyingPig/cs-self-learning/blob/main/.en.md) files, enabling access for both Chinese and English-speaking learners.
- The structured metadata allows automated extraction using Python regex or Bash tools like `ripgrep`, facilitating custom catalog generation.

## Frequently Asked Questions

### How are the Computer Graphics and Web Development courses organized in the repository?

Each course exists as a standalone Markdown file within category-specific directories. Computer graphics content resides in `docs/计算机图形学/` while web development courses are stored in `docs/Web开发/`. Every file follows a standardized template with a level-1 heading for the course name, a **课程简介** block containing university and language metadata, and a **课程资源** section listing external links.

### What programming languages do the Computer Graphics courses use?

According to the repository source code in `docs/计算机图形学/`, all six available graphics courses specify **C++** (or C/C++) as their primary programming language. This includes USTC Computer Graphics, the UCSB GAMES series (101, 202, 103), Stanford CS148, and CMU 15-462.

### Are English translations available for these self-learning courses?

Yes. The repository maintains bilingual parity through a dual-file system. Every course file has an English counterpart using the [`.en.md`](https://github.com/PKUFlyingPig/cs-self-learning/blob/main/.en.md) suffix—for example, `docs/计算机图形学/GAMES101.en.md` and `docs/Web开发/CS571.en.md`. These files contain identical structure and metadata, only translated into English.

### Can I automatically extract the course catalog to build my own learning tracker?

Absolutely. The consistent Markdown structure enables programmatic parsing. You can use Python with `pathlib` and `re` modules to extract metadata from the **课程简介** blocks, or use command-line tools like `ripgrep` to quickly query course names and universities. The flat file structure in `docs/` makes it trivial to generate JSON feeds, static sites, or integrate with the existing MkDocs configuration defined in [`mkdocs.yml`](https://github.com/PKUFlyingPig/cs-self-learning/blob/main/mkdocs.yml).