Web3 Frontend Bootcamp

一个具备前端+智能合约能力的开发者就可以完成一个完整的应用开发，因此前端开发者已经成为Web3的主流力量 ，也是所有开发者群体中最容易进入Web3开发的。

Introduction

本次「Web3前端训练营」由 W3F 和 OpenBuild 共同发起。Artela、Morph 共同主办，并获得 theGraph、Vara 和 Chainlink 生态支持。通过系统的课程和共同学习机制，帮助更多前端开发者丝滑进入Web3。与此同时，本训练营以实战为导向，一步步熟悉和掌握 Web3 前端代码开发。

Github Discussion 使用方法

Categories	Description
🍕Materials	课外资料/课堂笔记（欢迎贡献）
🙏 Q&A	提问 / 知识答疑
💰Bounty	Bounty 任务：课堂作业/课堂笔记/社区贡献etc
💡I've got an idea!	关于一些 Amazing fancy ideas, 用来 1. Web3前端共学 2. 组队开发 3. 参加黑客松 4. 招聘内推 5. 自娱自乐🎣

⭐ 核心亮点 ⭐

🧙‍♂️ OpenBuild技术导师 + 助教团队，小白友好型氛围

👩‍🏫 录播课 + 研讨会 + 免费知识库，学习灵活高效

🙌 免费学习 + 官方背书，资源丰富

✅ 认证证书，边学边提升竞争力

⭐ 学习大纲 ⭐

一、React框架介绍和优势（官网 | 哔站 | 油管）

二、Web3技术基础入门（官网 | 哔站 | 油管）

三、智能合约快速入门（官网 | 哔站 | 油管）

四、Web3前端框架和合约关系（官网 | 哔站 | 油管）

四点五、Web3前端训练营AMA答疑第一期（官网 | 哔站 | 油管）

五、实战项目一：轻松开发DApp前端项目（官网 | 哔站 | 油管）

六、实战项目二：Uniswap实战（官网 | 哔站 | 油管）

七、进阶实战一：探索EVM++（官网 | 哔站 | 油管）

八、进阶实战二：在Morph上部署你的第一个合约（官网 | 哔站 | 油管）

八点五、Web3前端训练营AMA答疑第二期（哔站 | 油管）

九、扩展工具篇：利用The Graph实现DAPP数据分析和数据可视化（哔站）

参与方式

⚠️⚠️⚠️ 请先完整地看完这部分内容再开始操作！

1. 注册 OpenBuild 账号；
2. 联系 fxxkol 加入微信交流群；
3. 参考「活动报名」提交 PR，完成报名。

任务提交

除了下面的文字说明，也可看视频《OpenBuild Web3 前端训练营作业提交演示》。

前置操作

先点击页面顶部右上角的「Fork」在自己空间中创建备份，随后将备份仓库 git clone 至本地，接下来的所有操作请在自己的仓库内完成。

如果你不熟悉 Git 的操作，可以下载 GitHub Desktop，使用 GUI 完成。

活动报名

复制 members 文件夹中的 github_id 文件夹，将新文件夹名称改为自己的 GitHub ID，填写其中 readme.md 的信息，提交 PR，完成注册报名。

不要把 github_id 文件夹删除了，只能提交自己新创建的文件夹！

课后作业

每节课都有相应的实战任务，需要在 members/[github_id] 文件夹下按照 task[n] 的命名方式创建任务文件夹，如：task1、task2。

任务代码必须全部开源公开，每个任务提交一次 PR。

提交规范

每完成一个任务，在你自己的仓库 commit 之后提交一个 pull request，只可以修改你自己的文件，不可修改其他人的文件。

⚠️⚠️⚠️ 不符合规范的会加上「invalid」标签，请按要求提交你的 PR！

PR 命名

注册的 PR，命名为 init: user-name，例如 init: Beavnvvv

提交 task 的 PR，命名为 task[n]: user-name，例如： task0: Beavnvvv

需要编写网页的 task，请在描述中上传效果截图。

请不要把报名和提交TASK的内容合并到一起，也不要将多个TASK放到一起提交！
请不要把报名和提交TASK的内容合并到一起，也不要将多个TASK放到一起提交！
请不要把报名和提交TASK的内容合并到一起，也不要将多个TASK放到一起提交！

开启多个 PR

很多人学习热情高涨，会迫不及待地把能做的任务都做了；但由于审核人员人手不够，PR 合并得会比较慢，若只是「单线程」地提交 PR 的话，影响学员的进度。

实际上是可以开启多个 PR 的，可「多线程」去完成任务——

将本仓库 fork 到自己空间后，基于 main 分支创建相应的功能分支，如：init、task1。

在功能分支完成对应任务后，发起 PR；切换到其他功能分支继续做任务，再发起 PR，如此往复。

任务说明 请仔细阅读要求

任务	名称	说明
Task 1	React To-Do-List	开发一个待办事项应用
Task 2	Blockchain Basic	区块链基础小测
Task 3	NFTMarket Contract	编写并部署一个NFTMarket的合约
Task 4	NFTMarket Components	使用ethers.js和wagmi与NFTMarket合约交互
Task 5	NFTMarket Dapp	开发一个完整的NFTMarket的Dapp
Task 6	Uniswap SDK	完成SDK学习，制作一个与uniswap交互的前端app
Task 7	web3小工具实践	跟随教程学习EVM++，实现一个限流器demo
Task 8	Hello Morph	在Morph Holesky上部署任意合约并在Morph浏览器上验证
Task 9	Hello TheGraph	为NFTMarket创建一个The Graph子图

参考资料

前端基础

1. Front End Roadmap
2. React Learn

Web3 技术库

1. WAGMi
2. web3-react

实践参考

1. Next.js Ethereum 脚手架
2. Uniswap

大牛学习心得

1. Web3 DApp 最佳编程实践指南
2. 郭宇的 Web3 技术栈收藏