{ tranqui.eth }

Condensed Guide for Learning Web3 Development in 100 Days


Below is a chronological list of every learning exercise + project I completed during my 100 day experiment:

  1. FreeCodeCamp Responsive Web Design (except the final challenges)
    • Skills Gained:
      • HTML, CSS
  1. FCC Tribute Page Challenge
  1. CSS Flexbox Practice
    • Skills Gained:
      • CSS (flexbox specifically)
    • Miscellanous:
      • This was really helpful. Don't rush through it
  1. Download VSCode (or other text editor and start writing your code in here)
    • Skills Gained:
      • Writing code in your own IDE
    • Miscellanous:
      • Helpful extensions to install: Prettier, Indent-Rainbow, Emmet, DotEnv
  1. FCC Survey Form Challenge
  1. Create calculator using CSS flexbox (doesn’t have to work, shoot for at least the design)
  1. Built a Mindfulness/Meditation Guide w/ HTML + CSS
  1. Wrote This Blog Post
  1. CSS Grid Review
  1. Built calculator using css grid (doesn’t have to work)
  1. FreeCodeCamp Javascript Algorithms and Data Structures
  • Skills Gained:
    • JavaScript
  • Miscellanous:
    • I stopped after the functional programming section on my first pass at this
    • If you have never coded before, this is gonna be really hard (especially at the beginning). If you are stuck on a section, skip to another one. Do the problems that you can solve and don’t let yourself spend too long stuck on one. At the very least, make sure you read through all the different sections so you understand what JavaScript can be used for. I completed most of this course but definitely not everything. As you get better by doing projects, you can come back to this course to test your knowledge on some of the harder problems
    • On Day 99 as I am writing this, I probably still can’t solve all of the functional programming problems
  1. Made a basic project with HTML + CSS + JS
  1. Complete most/all of the FCC JS “Intermediate Algorithmic Scripting” Questions
  • Skills Gained:
    • JavaScript
  • Miscellanous:
    • If you can't solve all of them, that's totally fine
  1. Complete Some of the FCC JS Final Problems
  1. Made a JS Project w/ Live Updating Info. I Created a Clock by Following This
  1. Wrote This Blog Post
  1. Made a JS project That Takes in User Info. I Built a YouYube Randomizer App
  1. FCC React Course (only do the react section)
  • Skills Gained:
    • React
  • Miscellanous:
    • If you want another react course, this is pretty good (I personally didn’t like it)
  1. Learn how to use terminal (for Mac)
  1. Made a Calculator w/ React
  1. Made a Site-Counter App w/ React (combined this link and this link)

At this point, my notes became slightly less detailed. This is because my confidence in being able to figure things out myself / solve random coding related problems was growing. If you’ve made it this far, you should be confident/take pride in your abilities. You are very close to being able to build cool things

  1. Scaffold-Eth
  • Skills Gained:
    • Solidity, dApp Infrastructure
  • Helpful Links:
  • Miscellanous:
    • Scaffold-Eth is kind of overwhelming. There is a lottt of extra stuff in it that you will never use/don’t understand. That is on purpose, because it allows you to do almost anything with it, but just keep this in mind
  1. Briefly Skimmed Intro-to-Smart-Contracts in the Solidity Docs
  • Skills Gained:
    • Solidity

At this point I did a hackathon for a week (web3con my first hackathon <3) where I got first exposure to writing my own external contract interactions. Try building a super basic UI (maybe on top of scaffold-eth?) that lets you interact with some already existing external contracts you are interesting in (I did mine off the drips protocol). The following exercises are all stuff I did/taught myself during the hackathon

  1. Cryptozombies (start with lessons 1 + 2)
  • Skills Gained:
    • Solidity
  • Miscellanous:
    • This is still one of the best sources I’ve ever used. DONT RUSH THROUGH THIS! If you take the time to understand everything that’s going on (its relatively simple), it will provide a great solidity foundation for you to build on
  1. Learn How to Use Hardhat
  1. Learn How to Interact w/ Other Smart Contracts That Already Exist

Everything after this is post-hackathon (during which I gained basic solidity understanding + the ability to set up contract interactions)

  1. Wrote This Blog Post
  1. Cryptozombies (Lessons 3 - 6)
  • Skills Gained: Solidity
  • Miscellanous:
    • Same as the first couple cryptozombies lessons: DONT RUSH THROUGH THIS! Take the time to understand everything that’s going on (its relatively simple), and it will provide a great solidity foundation for you moving forward
  1. Speed Run Ethereum (Challenges 0 - 2)
  • Skills Gained:
    • Solidity, dApp Infrastructure, Web3 Focused Problem Solving
  • Helpful Links:
  • My Code:
  • Miscellanous:
    • These 3 challenges were very helpful. I encourage you to complete all of the Speed Run Ethereum challenges. The first two required me to follow example code, and then I was able to solve #2 (the third challenge) myself without looking at other people’s code
  1. Build Nader's Solidity-by-Example NFT Marketplace
  1. Build Nader's More Comprehensive Full-Stack NFT Marketplace
  • Skills Gained:
    • Solidity, dApp Infrastructure
  • Helpful Links:
  • My Code:
  • Miscellanous:
    • This was one of the most useful tutorials I completed. Definitely recommend doing this, and taking the time to figure everything out and deploy it correctly

At this point I spent a month (6-10 hours a day) learning how to build my own custom NFT marketplace and ERC721 NFT minting contract + front end. Try committing 2 - 4 weeks to a large project (incorporating smart contracts) that will require you to implement everything you’ve learned and figure a ton of stuff out by yourself. In terms of project ideas, my recommendation would be building a project that extends a protocol/project that you are interested in and making a really good guide for it. Great way to create value for that team and connect with people in the space

  1. Custom NFT Marketplace Built Using Zora Protocol Rails

At this point, I then took another 10 ish days to create a new version of the custom NFT marketplace, this time deploying the project to Optimism and using a different protocol for the underlying marketplace rails (0x Protocol)

  1. Custom NFT Marketplace Built Using 0x Protocol Rails
  1. Personal Portfilio Website
  • Skills Gained:
    • Next.js App Architecture + Vercel
  • Helpful Links:
    • HIGHLY recommend following this basic guide to create next.js apps and deploy them to to Vercel
    • How to buy a cheap domain name and set it to your vercel deployment
    • How to make sure your twitter link image preview looks good
  • My Code + Site:
← Back to home