Full Stack WEB3 Developer- Roadmap and Free Resources
Tags: web3, eth, javascript, blockchain
Published: 2022-10-09 04:07:39


![WEB3](https://miro.medium.com/max/1400/0*c2seIUOYkKFuv9Q3.png)
**WEB3** is the **HOTTEST domain** right now with millions of developers wanting to enter this field globally. However, lack of structured ROADMAP may lead to an unnecessary delay in learning among enthusiasts. I want to present a **FULL STACK WEB3 DEVELOPER** roadmap with **FREE resources** using which you can learn and become a FULL STACK WEB3 developer for free of cost.


## STEP 1:- Learn HTML
![HTML](https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png)
Learning HTML is the BASIC BLOCK of web development as well as web3 development.
Here are free resources to learn HTML:-

1. [HTML Full Course by FreeCodeCamp](https://www.youtube.com/watch?v=kUMe1FH4CHE)
2. [Html (Hindi) Full Course by Code with Harry](https://www.youtube.com/watch?v=BsDoLVMnmZs)

## STEP 2:- Learn CSS
![CSS](https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png)
There is no **escaping** CSS. Easy to learn but **TOUGH** to master, CSS is an essential when it comes to WEB3 Development. Every company wants a dev who can create interactive **UIs**. 
Here are free resources to learn CSS:-

1. [CSS full course by FreeCodeCamp](https://www.youtube.com/watch?v=OXGznpKZ_sA)
2. [CSS (Hindi) by Code with harry](https://www.youtube.com/watch?v=Edsxf_NBFrw)

## STEP 3:- TAILWIND CSS
![Tailwind CSS](https://laravelnews.imgix.net/images/tailwindcss-1633184775.jpg?ixlib=php-3.3.1)
While **Tailwind CSS** might not be the most necessary skill when it comes to web3 but it's certainly good to have as most web3 protocols use it for creating **interactive UI**.
Here are free resources to learn Tailwind:-

1. [Tailwind by Traversy Media](https://www.youtube.com/watch?v=dFgzHOX84xQ)
2. [Tailwind CSS playlist by Code with Harry](https://www.youtube.com/watch?v=L4_jarMnB0c&list=PLu0W_9lII9ahwFDuExCpPFHAK829Wto2O)

## STEP 4:- Javascript (from basics to advanced)
![Javascript](https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/2048px-Unofficial_JavaScript_logo_2.svg.png)
**Javascript is the BACKBONE of web3**. It is the most used language in web3 front end as it has the most stable frameworks support. **Javascript is a MUST if you want to do WEB3**. Python, Java and others also have web3 frameworks but none come close to javascript in terms of adoption among companies and developers in web3 domain.
Here are free resources to learn Javascript:-

1. [Javascript by Dave Grey](https://www.youtube.com/watch?v=EfAl9bwzVZk)
2. [Advanced Javascript (hindi) by Code Eater](https://www.youtube.com/watch?v=8g_CbydoWBo)
3. [Javascript basics (hindi) by Code with Harry](https://www.youtube.com/watch?v=hKB-YGF14SY)

## STEP 5:- Making Projects using HTML,CSS,JS
![Projects](https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200121234029/Top-10-Projects-For-Beginners-To-Practice-HTML-and-CSS-Skills.jpg)
It is really important to **cement the concepts by making projects**. You can make these practice projects on HTML,CSS,JS to strengthen your command over these three building blocks.
Here is a list of projects you can build to practice your concepts:-

1. [HTML CSS JS projects (in Hindi) by Code with Harry](https://www.youtube.com/watch?v=ANzPM5-lwXc&list=PLu0W_9lII9aiQiOwthuSvinxoflmhRxM3)
2. [HTML CSS JS projects (in English) by Javascript King](https://www.youtube.com/watch?v=EWv2jnhZErc)
3. [Tailwind CSS project by Coding in Public](https://www.youtube.com/watch?v=xpGNcQDmV2A)

## STEP 6:- Blockchain Basics
![Blockchain Basics](https://blogs.iadb.org/caribbean-dev-trends/wp-content/uploads/sites/34/2017/12/Blockchain1.jpg)
Now let's start the **journey of blockchain**. Learn the basics of Blockchain and **clear your concepts** so you can understand the coding part in future easily.
Here is a list of resources from where you can learn Blockchain Basics:-

1. [Blockchain Basics by Patrick Collins](https://www.youtube.com/watch?v=Qe-3FUxThso)
2. [Blockchain Full Course (in Hindi) by Code Eater](https://www.youtube.com/watch?v=6aF6p2VUORE)

## STEP 7:- Solidity
![Solidity](https://res.cloudinary.com/practicaldev/image/fetch/s--Rxmub8vz--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jd65usaioipnkv5xs5a.png)
**Solidity** is the **official language of the Ethereum Blockchain**. It is also the most popular language in WEB3 space as well as the most **in-demand language** among **web3 companies**. Getting started with Solidity has many advantages. Here is a list of resources from where you can learn Solidity:-

1. [Solidity Playlist by Smart Contract Programmer](https://www.youtube.com/watch?v=xv9OmztShIw&list=PLO5VPQH6OWdVQwpQfw9rZ67O6Pjfo6q-p)
2. [Solidity (in HINDI) by Code Eater](https://www.youtube.com/watch?v=NqGe942J4Y0)
3. [Full Stack WEB3 development by Patrick COllins](https://www.youtube.com/watch?v=gyMwXuJrbJQ)

## STEP 8:- Learn React.js
![React js](https://reactjs.org/logo-og.png)
Now that you have learnt the Backend part(Blockchain Part), its time to move to front-end. Here is a list of resources from where you can learn React.js

1. [React.js crash course (HINDI) by Code with Harry](https://www.youtube.com/watch?v=RGKi6LSPDLU)
2. [React.js Crash Course by Javascript Mastery](https://www.youtube.com/watch?v=b9eMGE7QtTk)
3. [React.js tutorial by FreeCodeCamp](https://www.youtube.com/watch?v=bMknfKXIFA8)

## STEP 9:- Learn basics of Next.js
![React js](https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Nextjs-logo.svg/1200px-Nextjs-logo.svg.png)
**Next.js is a react library** that is extremely popular as it supports client-side rendering. It's really good to learn it.
Here is a list of resources from where you can learn Next.js:-

1. [Next.js Crash Course](https://www.youtube.com/watch?v=AOQ80BaV_NQ)
2. [Next.js (Hindi)](https://www.youtube.com/watch?v=_oNAGdvsFW4)

## STEP 10:- Build dApps using JS libraries!!
![dApps](https://bs-uploads.toptal.io/blackfish-uploads/components/seo/content/og_image_file/og_image/957329/ethereum-name-service-dapp-tutorial-08de2d66b422d12b766420857f0428b6.png)
Phew! You have FINALLY reached the **LAST STEP** where you can create your favourite WEB3 apps (or dApps) using Javascript Libraries like **Hardhat, Ethers.js, web3.js or Truffle**, some of the most popular and well known **web3 frameworks**. Here is a list of resources from where you can learn and build your first dApps:-

1. [Full Stack WEB3 development bootcamp by Patrick Collins](https://www.youtube.com/watch?v=gyMwXuJrbJQ)
2. [Blockchain App tutorial by Javascript Mastery](https://www.youtube.com/watch?v=Wn_Kb3MR_cU)
3. [Alchemy ROAD to WEB3](https://www.youtube.com/watch?v=veBu03A6ptw&list=PLMj8NvODurfEYLsuiClgikZBGDfhwdcXF)
4. [Buildspace projects](https://buildspace.so/p)
5. [Crypto Zombies](https://cryptozombies.io/)
6. [FreeCodeCamp WEB3](https://web3.freecodecamp.org/)

## STEP 11:- MASTER Different Domains
![dApps](https://www.datocms-assets.com/41207/1627427892-metaverse-edited.png?q=60)
WEB3 is **HUUUUUUUGGGGGEEEEE**. It consists of **Defi, Daos, NFTs, Metaverse, Layer 1s, Layer-2s, etc.etc.etc.** Either master ONE OF the domains OR MASTER THEM ALL! Here is a list of resources to learn all domains of WEB3:-

1. [Full Stack WEB3 development bootcamp by Patrick Collins](https://www.youtube.com/watch?v=gyMwXuJrbJQ)
2. [Alchemy ROAD to WEB3](https://www.youtube.com/watch?v=veBu03A6ptw&list=PLMj8NvODurfEYLsuiClgikZBGDfhwdcXF)
3. [Buildspace projects](https://buildspace.so/p)
4. [Crypto Zombies](https://cryptozombies.io/)
5. [Nft marketplace](https://www.youtube.com/watch?v=2bjVWclBD_s)
6. [DAO tutorial by Patrick Collins](https://www.youtube.com/watch?v=AhJtmUqhAqg)
7. [FreeCodeCamp WEB3](https://web3.freecodecamp.org/)
8. [Metaverse tutorial by dApp University](https://www.youtube.com/watch?v=EqmD4BYkffg)
9. [Metaverse playlist by Hashlips](https://www.youtube.com/watch?v=SV0W_B8iOzc&list=PLvfQp12V0hS3EbCBw7kDNOJ1l412tzcrM)



---

## CONCLUSION
WEB3 is the hottest domain and its recommended to learn the latest skills.
**Best web3 resources**
- [FreeCodeCamp WEB3](https://web3.freecodecamp.org/)
- [Full Stack Web3 Bootcamp](https://www.youtube.com/watch?v=gyMwXuJrbJQ)
- [BuildSpace projects](https://buildspace.so/p)
- [Crypto Zombies](https://cryptozombies.io/)

---
## About the Writer.
Hello everyone, myself Mohammad Ayaan Siddiqui from India. I am a Full Stack WEB3 developer and a Certified Ethereum Developer. I talk about WEB3, Cryptocurrencies, Javascript and Python. If you are interested in either of the topics, connect with me below:-
1. [Connect on Github](https://github.com/moayaan1911)
2. [Connect on Linkedin](https://linkedin.com/in/ayaaneth)
3. [Connect on Twitter](https://www.twitter.com/usdisshitcoin)
4. [Connect on dev.to](https://dev.to/moayaan1911)