Coder Social home page Coder Social logo

web3-frontend-bootcamp's Introduction

Web3 Frontend Bootcamp

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

Introduction

本次「Web3前端训练营」由W3F 和 OpenBuild 共同发起。Artela、Morph 共同主办,并获得 theGraph 、Vara和 Chainlink 生态支持

。通过为期4周的系统课程和共同学习机制,帮助更多前端开发者丝滑进入Web3。与此同时,本次训练营将以实战为导向,一步步熟悉和掌握 Web3 前端代码开发。在4周的学习中,学员可以免费参与训练营,并可通过「学习绩点」得到最高 200U 的奖学金激励、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技术导师 + 助教团队,小白友好型氛围

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

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

✅ 学习奖励 + 认证证书,边学边赚边提升竞争力

💰 前端训练营总奖池超过20000元RMB

⭐ 学习大纲 ⭐

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

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

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

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

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

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

六、实战项目二:Uniswap实战(官网 | 哔站 | 油管

七、进阶实战:探索EVM++

参与方式

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

  1. 进入【Web3 前端训练营招募】官方链接进行报名
  2. 联系 sqiuqiu999 加入微信交流群
  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] 的命名方式创建任务文件夹,如:task1task2

任务代码必须全部开源公开,每个任务提交一次 PR,审核任务完成会把奖励打入 members/[github_id]/readme.md 提供的地址。

提交规范

每完成一个任务,在你自己的仓库 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 分支创建相应的功能分支,如:inittask1

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

奖励明细 请仔细阅读要求

任务 名称 奖励金额 说明
Task 1 React To-Do-List ¥18 开发一个待办事项应用
Task 2 Blockchain Basic ¥18 区块链基础小测
Task 3 NFTMarket Contract ¥28 编写并部署一个NFTMarket的合约
Task 4 NFTMarket Components ¥28 使用ethers.js和wagmi与NFTMarket合约交互
Task 5 NFTMarket Dapp ¥38 开发一个完整的NFTMarket的Dapp
Task 6 Uniswap SDK ¥38 完成SDK学习,制作一个与uniswap交互的前端app
Task 7 web3小工具实践 💲50(Token) 跟随教程学习EVM++,实现一个限流器demo

参考资料

前端基础

  1. Front End Roadmap
  2. React Learn

Web3 技术库

  1. WAGMi
  2. web3-react

实践参考

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

大牛学习心得

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

web3-frontend-bootcamp's People

Contributors

ourai avatar majoson-chen avatar zhengqiuwan avatar beavnvvv avatar bbk912 avatar restartgr avatar tristonchai avatar ccchur avatar jiantao88 avatar georgiafab avatar sheldon-xc avatar littlemoreinteresting avatar 964674798 avatar xiaodingmao avatar secret1007 avatar stajjj avatar qiaopengjun5162 avatar mosida avatar linhaishe avatar jrenc2002 avatar dethan3 avatar lzq2013asd avatar dockershe avatar yaqioooong avatar ben100118 avatar zhtkeepup avatar no5no6 avatar flatcc avatar zhangloveyan avatar wangmengcc avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.