# Fed-100

**Repository Path**: zptcsoft/fed-100

## Basic Information

- **Project Name**: Fed-100
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-23
- **Last Updated**: 2026-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端开发 100 案例 - 从入门到精通

一个包含 **100 个精心设计的案例** 的前端开发学习资源，通过实践练习带你从 HTML、CSS 和 JavaScript 基础走向精通。

## 项目简介

本项目包含 100 个循序渐进的案例研究，每个案例都包括：

- **交互式演示** (`index.html`) - 可在浏览器中运行的完整示例
- **详细教程** (`tutorial.md`) - 概念和代码的分步讲解
- **统一案例详情页** (`case-detail.html`) - 集中展示案例说明、效果演示、核心代码和知识点解析

## 快速开始

### 🆕 开发模式（推荐）

项目已升级为现代化构建工具，支持热更新和自动化检查。

```bash
# 1. 安装依赖
npm install

# 2. 启动开发服务器
npm run dev

# 3. 访问 http://localhost:3000
```

**优势：**
- ⚡ 快速的热更新（HMR）
- 🎯 自动代码检查和格式化
- 📦 优化的资源加载
- 🔧 完整的开发工具链

### 传统方式

### 文件结构

**现代化构建结构：**

```
fed-100/
├── package.json              # ⭐ 项目配置（新增）
├── vite.config.js            # ⭐ Vite 配置（新增）
├── .eslintrc.json            # ⭐ ESLint 配置（新增）
├── .prettierrc               # ⭐ Prettier 配置（新增）
├── DEVELOPMENT.md            # ⭐ 开发指南（新增）
├── ARCHITECTURE.md           # ⭐ 架构说明（新增）
├── index.html                # 主导航页面
├── case-detail.html          # 统一案例详情页（新增）
├── viewer.html               # Markdown 查看器工具
├── src/                      # 源代码目录（新增）
│   ├── css/                  # 样式文件
│   │   ├── base/             # 基础样式
│   │   ├── components/       # 组件样式
│   │   └── features/         # 功能样式
│   └── js/                   # JavaScript 文件
│       ├── components/       # 组件
│       ├── features/         # 功能模块
│       ├── data.js           # 案例数据
│       └── main.js           # 主入口
├── cases/                    # 案例目录（新增）
│   ├── css/                  # 案例通用样式
│   ├── js/                   # 案例通用脚本
│   ├── 001/                  # 案例 001: Hello World
│   │   ├── index.html        # 交互演示
│   │   └── tutorial.md       # 详细教程
│   ├── ...                   # 案例 002-100
│   └── 100/                  # 案例 100: 综合项目
│       ├── index.html
│       └── tutorial.md
```

**构建输出目录：**

```
dist/                         # 生产构建目录
├── assets/
│   ├── js/                   # 压缩后的 JS
│   ├── css/                  # 压缩后的 CSS
│   └── images/               # 优化的图片
└── [HTML 文件]
```

## 学习路径

案例按技能进阶组织：

### 基础阶段（案例 001-020）
- HTML 基础和文档结构
- CSS 基础和样式设置
- JavaScript 入门和 DOM 操作
- 构建简单的交互组件

### 进阶阶段（案例 021-060）
- 高级 CSS 布局（Flexbox、Grid）
- JavaScript ES6+ 特性
- 表单处理和验证
- 响应式设计原理
- 动画和过渡效果

### 高级阶段（案例 061-100）
- 现代 JavaScript 模式
- API 集成和异步编程
- 复杂 UI 组件
- 性能优化
- 真实项目示例

## 技术栈

- **HTML5** - 语义化标记和现代 Web 标准
- **CSS3** - 样式、布局、动画和响应式设计
- **JavaScript (ES6+)** - 交互功能和 DOM 操作
- **Prism.js** - 教程代码语法高亮
- **Vite** - 现代前端构建工具

## 特性

- **100 个完整示例** - 从"Hello World"到高级应用
- **双语内容** - 中文和英文解释
- **响应式设计** - 所有案例支持桌面和移动设备
- **清晰的代码** - 注释完善，易于理解
- **渐进式学习** - 概念逻辑递进
- **视觉反馈** - 交互式演示，即时见效
- **深色模式** - 支持浅色/深色主题切换（新增）
- **统一导航** - 全局一致的导航体验（新增）
- **案例详情页** - 集中展示案例信息和代码（新增）
- **现代化架构** - 模块化组件和功能（新增）

## 使用示例

### 🆕 开发模式（推荐）

```bash
# 安装依赖
npm install

# 启动开发服务器（支持热更新）
npm run dev

# 访问 http://localhost:3000
```

### 运行特定案例

```bash
# 开发模式下，直接访问对应路径
http://localhost:3000/cases/001/          # 案例演示
http://localhost:3000/case-detail.html?id=001  # 案例详情页
```

### 构建生产版本

```bash
# 构建优化的生产版本
npm run build

# 预览构建结果
npm run preview
```

### 代码检查与格式化

```bash
# ESLint 检查
npm run lint

# ESLint 自动修复
npm run lint:fix

# Prettier 格式化
npm run format

# CSS 检查
npm run stylelint
```

## 案例主题涵盖

- HTML 基础元素和属性
- CSS 选择器和优先级
- 盒模型和布局原理
- Flexbox 和 Grid 布局
- JavaScript 变量和数据类型
- 函数和作用域
- DOM 操作
- 事件处理
- 表单验证
- CSS 动画
- 响应式断点
- 深色模式实现
- 模块化组件开发
- 以及 90+ 更多主题！

## 浏览器兼容性

所有案例均在现代浏览器中测试通过：
- Chrome（推荐）
- Firefox
- Safari
- Edge

## 贡献

这是一个教育资源，欢迎：
- 报告问题或 Bug
- 提出改进建议
- 添加新案例
- 完善文档

## 许可证

教育用途 - 免费学习和练习

## 致谢

作为前端开发学习者的综合学习资源而创建。每个案例都经过精心设计，旨在教授特定概念，同时帮助学习者逐步掌握 Web 开发的整体技能。

---

**快乐编码！** 🚀

从案例 001 开始，完成全部 100 个案例，建立扎实的前端开发基础。

## 目录索引

| 阶段 | 案例编号 | 主要内容 |
|------|----------|----------|
| 基础 | 001-020 | HTML/CSS/JS基础，DOM 操作 |
| 进阶 | 021-060 | 高级布局，ES6+，响应式设计 |
| 高级 | 061-100 | 异步编程，API 集成，综合项目 |

---

**适合人群**：
- ✅ 零基础初学者
- ✅ 想系统学习前端的开发者
- ✅ 需要实战练习的程序员
- ✅ 准备面试的求职者

**最新特性**：
- 🌙 深色模式支持
- 🧭 统一导航系统
- 📱 响应式设计
- 🎨 现代化 UI
- 📚 统一案例详情页