This is an opinionated guide to becoming a web3 developer in 2023.
I'll outline the exact steps that I personally took to land a role as a developer relations engineer at thirdweb; a suite of developer tools for building in web3.
Unlike other roadmaps, I'm not going to give you 300 things to learn and get you stuck in tutorial hell. This is an actionable, sequence of technologies for you to learn, including the exact resources I found most helpful throughout my journey.
Let's dive into it! Below is a preview of each layer of the stack we'll be covering.
Important Disclaimer (READ THIS)
Consuming resources alone will never teach you how to become a developer.
Every dev has to constantly fight their own battles on the journey to understanding how to code, and put together the pieces of the gigantic puzzle along the way.
As soon as you know how to START building, exit the roadmap and go at it alone. Just try to build something. It's going to suck. And that's the point!
Come back to the resources to fill in the gaps in your knowledge as you get stuck; learn what tools are available for you to use that solve your problems with the resources in this guide.
Every project you make will be better than the last, and you'll soon be embarrassed by your old code.
DO NOT just consume these resources, they are only there to help point you in the right direction in a logical order as you actually build your own projects.
It's not going to be easy, but it is worth it. Buckle up and let's get started!
We're going to cover a lot of topics in this roadmap, and I'll provide you with resources that I personally used to develop my understanding at each step of the way. Here's a quick preview of some of the tools we'll cover:
The Fundamentals: HTML & CSS
Every website consists of three things:
HTML: Structure of elements on the page
CSS: Style of elements on the page
Any application you build, no matter what technology you use, is eventually transformed into these three languages and served to a user on a web page.
Hence it's an important foundational piece of knowledge to understand the very basics of HTML and CSS first before diving into any "programming" (adding interactivity or logic to your application).
HTML & CSS
CS50 is Harvard's introductory course to computer science. It's an outstanding resource taught by the best lecturers in the world. I have taken multiple of their free online courses including their previous years' CS50 course and cannot recommend it enough.
Even if you already know HTML and CSS, you'll be surprised at how much you learn from these lectures by going back to basics and gaining a deeper understanding of the fundamentals.
Here are some more great interactive resources that you can use to learn as a beginner:
Optional (For Now): Computer Science Fundamentals
If you are willing to spend significantly more time learning the fundamentals of computer science, consider watching the full playlist of lectures for CS50 2022; which is ~20 hours total.
My personal opinion is that it's better to come back to these fundamentals later and start building something as soon as possible.
I personally didn't learn these computer science fundamentals in detail until 1-2 years into working as a professional software engineer (which might sound crazy, I know). Again, these are my personal opinions and others will disagree with this.
Here's where the learning curve reached a steep point for me.
The resources I'm about to share may feel overwhelming at first; it took me several re-watches and many, many pages of notes to start to understand these concepts.
Topics like scope, closures, and prototypical inheritance are funnily enough the topics I've been asked about several times in job interviews over the past few years.
(Optional) Paid Course: "ES6 for Everyone!" by Wes Bos
An additional resource I recommend (if you can afford it) is the "ES6 for Everyone!" course by Wes Bos. It's an excellent interactive course that teaches you a variety of super helpful syntactic sugar that are part of the later releases of ECMAScript.
(VERY Optional) Paid Course: Master the Coding Interview
As you're on your journey and are building your projects, some code you write is not going to be as efficient as it could be.
A paid course that taught me a tremendous amount about writing better code is the "Master the Coding Interview: Big Tech (FAANG) Interviews" course by Andrei Neagoie.
For me, this was extremely hard and took me many months to get through; which is why I put the "very optional" tag on this course. It's an amazing resource that I recommend you take at some point on your journey, but if you're a beginner it's likely going to be too hard for you.
React - Building User Interfaces
If you've started building your project by this point, you've probably realised that it is difficult to build an application by writing HTML, CSS, and JS alone.
One library has come out on top; React, which is:
The most in-demand frontend framework for landing a job (too lazy to get a source for this stat, so... "probably" 😄).
React uses a syntax called JSX to combine writing your UI structure and design with your "interactivity" in the same location:
A great resource to understand the "why" of React is this CS50W lecture on user interfaces:
This lecture outlines the problems of building applications without a framework or library and introduces React as the solution to some of the problems you might already be running into.
Diving Deeper Into React
The React core team have been iteratively releasing its new "beta" documentation over the past few months (or years).
This new documentation is excellent and I strongly recommend you go through their Quick Start to learn all of the core concepts of React on one simple page.
You'll learn about the most common patterns of React like creating components, displaying data, and responding to events.
Before you dive too deep into building with React alone, I'll introduce you to another layer of abstraction on top of React, called Next.js; which takes things to the next level.
Next.js - Making React WAY Better
I'll save you a lot of struggle: completely skip Create React App (CRA) and arguably even Vite. Start by using Next.js right from the get-go.
Below is a great three-minute explainer of why CRA is no longer ideal for new projects using React:
Get Started with Next.js
Next.js documentation is absolutely brilliant. Lee Robinson and his team of DX engineers have written fantastic, interactive documentation to help you learn Next.js and quiz your knowledge along the way.
For this reason, I recommend running through the interactive documentation first; and then diving into creating your first Next.js application with their CLI.
TypeScript can be a real pain in the 🍑 at first, but once it clicks, you'll never want to go back. More and more developers and developer tools are defaulting to TypeScript and for good reason; type safety makes your code significantly less likely to have bugs!
My suggestion: turn strict mode off at the beginning. Use the
any type whenever you get completely stuck and don't know what to do. These are bad practices in reality, but will help you onboard to TypeScript without wanting to break your keyboard.
As you write more and more code with TypeScript and pick up more tricks, you'll feel comfortable enabling strict mode and using the
There are a number of options for you to build out more beautiful applications that are ultimately just different ways of abstracting CSS so that it's ... well basically CSS but easier.
The general consensus going into 2023 is that Tailwind CSS is the gold standard for adding styles to your application. I personally like to use a tool called Material UI that comes with pre-built components; however, most people don't agree with me on this.
Short answer: If you don't already know and love a UI library, pick Tailwind CSS.
If you don't already have knowledge of what a blockchain or smart contract is, a helpful resource for beginners is Patrick Collins' blockchain course.
I suggest you watch the first 2 hours of the 32-hour course which introduces the core concepts of blockchain, smart contracts and web3. You can pick and choose the other areas of the course that interest you as you wish!
Understanding the Web3 Stack
An introductory video I recommend watching is "Defining the Web3 Stack", by Nader Dabit; which outlines the equivalent web3 tech stack compared to a traditional "web2" application.
As an updated graphic to Nader's talk in 2021, I have provided my thoughts on the tech stack of a web3 application below:
There are a lot of moving pieces to consider when building a web3 application. There are a plethora of tools available to help you build different aspects of your decentralized application, and it's up to you to learn what you like best.
Of course, I'll provide my recommendations here that I have come to after experimenting with a number of these tools in the past year.
Building a full stack web3 app "the hard way"
Arguably the best resource I consumed when I was entering the web3 space was Nader Dabit's "Full Stack NFT Marketplace" video tutorial. You'll learn how to build almost every aspect of a full-stack web3 application at a rapid pace, including:
NFT Collection smart contract
NFT marketplace smart contract
Smart contract development environment and testing
IPFS file uploads and downloads
Frontend technologies & Next.js to build a web3 application
RPC nodes and IPFS Gateways
This might feel like quite the jump from the previous step, and you might not understand everything in this video immediately, and that's okay!
This resource taught me a tremendous amount about how the pieces of the web3 stack fit together and teach you how to build an epic project with modern technologies.
Extending Nader's Project
Something that really made me understand what was happening was adding more functionality to Nader's NFT marketplace project; specifically, adding a function to get an individual listing's information on the marketplace smart contract.
Adding this capability to the project might sound easy, but it tests to see if you really understand how the project is functioning; and is a great step to add on top of the build itself.
Why is this "the hard way"?
This resource introduces you to what I'd argue is a low-level abstraction of building a full-stack web3 app; it shows you every step of the process which is super important to understand.
However, I'd argue that the purpose of the video isn't to build a "production-ready" application in 2023. I say this because there are a large number of tools that have been released since mid-2021 (the time this video was made), that has abstracted away the complexity of building full-stack web3 applications significantly.
Let's quickly cover a few other core concepts and then dive into the more modern tools available to build web3 apps with.
To communicate to and from the blockchain, you need to use a node. Unless you want to run your own Node, you need to use a service provider such as Alchemy, Coinbase, or Moralis, (or thirdweb as we'll explain in the next section) to do so.
Below is a great resource outlining what an RPC Node is and why it's required to build web3 applications.
Interesting Project: Lava Network
A project I am excited to see in 2023 is Lava Network; which offers a decentralized alternative to the RPC Nodes. Check it out if you are interested!
Decentralized Storage Solutions
Not all information needs to be stored on the blockchain. Storing data on the blockchain itself costs gas fees and has a significant storage limit; for this reason, a common pattern is to store your information "off-chain" and store the URL of that data on the blockchain instead.
Storage solutions exist that aren't stored "on-chain" but are still not controlled by a centralized service such as AWS or Google Cloud. The two prominent decentalized storage solutions solutions in 2023 are:
Below is a concise summary of what IPFS is, how it works, and how you can integrate it into your applications using thirdweb (we'll talk more about this next).
To access data stored on IPFS on most browsers such as Google Chrome, you'll need to use an IPFS Gateway. There are a couple of options available for you here:
Public gateway (available for everyone, not very reliable)
I should mention a lot of these technologies such as Arweave have grant programs if you are building with them; if you're looking for some funding this might be interesting to you.
Full disclosure: I work on the thirdweb team!
I used Nader's NFT marketplace video as a starting point for a freelancing project I was working on as I began to increase my skills in web3 development. I came to the realisation that building smart contracts is HARD!
I didn't have the confidence at this point to write a fully-featured, gas-optimized, bug-free marketplace smart contract for my clients' requirements; so I started to ask myself: "someone must have done this and open-sourced it somewhere RIGHT!?"
Well, turns out I was right!
I stumbled upon thirdweb shortly after it was released and discovered they had open-source smart contracts for NFT collections, marketplaces, and more.
I basically planned to just copy-paste their solidity smart contracts into my existing project and carry on my way 😂! Here's proof (don't tell Furqan):
But as I explored the product more, I discovered they had an SDK! I didn't have to use ethers anymore! They also have tools to connect users' wallets, and manage my IPFS storage for me! I didn't even need my smart contract code in my project anymore as they had a dashboard I could deploy it with.
I was able to remove SO MUCH of the code I wrote for my marketplace project and replace them with thirdweb tools that I ended up falling in love with the product; and applied for my current position at thirdweb a few months after completing my freelance work!
So, while I do get paid to advocate thirdweb's products, I do it from my heart, not from my ... wallet? 🥲 I was really out here using their tools before I joined the team.
I've spent a lot of time refining the Getting Started flow of the thirdweb documentation to get you up and running from building a smart contract to building a front-end Next.js application in no time! So, my recommendation is to start there!
Alternatively, there is a getting started video that covers the same content:
Once you get the power of thirdweb's stack, you won't want to go back! 🤠 Since I joined, we have shipped even more features that make the web3 building process simpler:
Free IPFS gateway and IPFS rendering components in the SDK.
Free RPC included directly in the SDK (which can be overridden).
IPFS upload and downloads in React hooks with Storage.
React hooks for everything you can imagine on the frontend; for both user wallets and interacting with smart contracts.
Full Solidity SDK called "ContractKit" which is similar to OpenZeppelin.
An Explore page; for you to deploy the most popular smart contract standards.
Deploy a smart contract with thirdweb and connect to it in your Next.js application and I promise you'll never want to go back to your old stack.
Other Web3 Frontend Libraries
So that I'm not completely biased, I'll also recommend you some of the other modern libraries available for you to build more robust frontends for your web3 apps.
wagmi is a library of React Hooks for building EVM frontends. Much like the thirdweb React SDK, it has hooks for pretty much everything you can imagine and is significantly better than using ethers or web3.js alone.
The documentation is a great starting point for you to understand how to use it in your Next.js/React apps.
RainbowKit is an excellent library for adding connect wallet capabilities into your application and supporting a variety of different connection options for your users.
Their documentation is concise and includes helpful short videos to get you up and running quickly.
Some web3 applications require information that isn't directly available from any smart contract; such as what NFTs a wallet owns, or how many times an NFT has been transferred.
When it comes to indexing solutions, you can use The Graph; a decentralized solution, and again use Nader's resources to learn how to get started:
You might prefer to use SDKs or API endpoints to get your indexed information, and there are a number of popular solutions you can use, each with helpful resources and videos on their documentation:
These tools have similar capabilities with various pros and cons, you can use their documentation to explore which tool is right for you.
This might seem crazy that the smart contracts section is all the way down here. 🤯
The reason I placed smart contracts after learning the full frontend tech stack is that you are often going to be building on top of smart contracts that other people have deployed already; such as Lens Protocol, or deploying gas-optimized, audited smart contracts that suit your needs such as those available on thirdweb Explore.
To land a job in web3 you don't need to be an expert in writing your own smart contracts. At thirdweb, we have a team that is dedicated to writing Solidity smart contracts and building out our Solidity SDK; the rest of our engineers understand the Solidity code; but aren't actively writing smart contracts on a daily basis.
This might be a hot take 🌶️🥵 but you should learn the details of building smart contracts after learning how to actually build stuff people interact with; which usually means you need some kind of frontend application skills.
Some people will disagree with that; as almost everything in web3 depends on the foundational layer of decentralized applications; which is smart contracts. I'm not saying it's correct, this is just the path that I personally took to learn web3.
There are many resources you can use to learn Solidity itself, such as:
Object Oriented Programming
OOP. more like oof, am I right? 😑
Solidity is an object-oriented programming language to build your own smart contracts. If you know OOP principles you are already most of the way there to be able to write basic Solidity.
OOP In Solidity
Once you know what OOP is, I recommend you return back to Patrick's video at this timestamp (chapter 3), to see how inheritance and overrides work in Solidity:
Using OSS Smart Contracts
Usually, you'll want to build some variety of ERC standards such as ERC20 fungible tokens, ERC721 NFTs, or marketplaces, with a twist that makes your project unique.
Now that you know how to utilize inheritance in Solidity, you can make use of libraries such as OpenZeppelin Contracts and thirdweb ContractKit to import core chunks of logic into your smart contracts; and customize them as you wish!
thirdweb's ContractKit has a vast array of plug-and-play smart contracts for you to extend, customize, and include in your own smart contracts; including ERC721, ERC1155, ERC20, staking, airdrop, and more 🤠!
Smart Contract Security
It is important to know the most common vulnerabilities of smart contracts, which again Patrick covers thoroughly in his 32-hour Solidity course in Chapter 18 at this timestamp.
There is also a detailed open-source repository outlining common attack vectors for smart contracts and historical exploits using these attacks:
That's it! These are the resources I personally used to develop my knowledge in web3 and land a job as a developer relations engineer at thirdweb!
I'd like to reiterate that tutorials and resources alone will never be enough to become a dev. You need to get your hands dirty ASAP, come back to these resources as you run into problems in your project, and constantly fight battles on your own over many years to come.
The goal of this article isn't to give you months of resources to consume, it's here so you can come back to trusted sources of high-quality information as you build your own projects alone! 🦸
If you want to join a community of devs on your journey, jump into my community Discord server and introduce yourself! 👋