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

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

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) 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:

# 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:

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

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}