INTERMEDIATECOURSE
Crypto + Web 3 for Creatives
Our crypto course shows you how to code websites that interact with the Ethereum blockchain and smart contracts in a practical, real-world, no-hype, no-BS, ethical way.
Taught by
Rik Lomas
Taught by
Rik Lomas
Crypto is one of largest shifts in how the web works in decades... to the point where people are calling this new phase 'Web 3', but what is this shift and why is it happening?
Crypto lets data be completely decentralized so that there isn't one company or service holding all the cards. If, say, Instagram shuts down tomorrow, all your Instagram data is lost forever... this does not happen with crypto as everything is permanently stored online publicly. This lets us as creatives make brand new concepts that were previously thousands of lines of complex coding much simpler (or concepts that just didn't exist at all!). Crypto lets you remix projects like never before and for us, it's one of the largest movements since the open source movement.
All the tooling that we need for this course is completely free to download. You may want to buy some Ethereum to deploy any projects to the main Ethereum blockchain, but this isn't necessary for this course.
Anyone who wants to better understand how to incorporate Web 3 and crypto techniques into coding websites.
We recommend you already have some front-end experience building websites with HTML, CSS and Javascript in order to get the most out of this course. Starting with our Foundation HTML, CSS + JS course and Javascript for Designers course will be sufficient.
Most of our students work in the creative and tech industries, but you can work in any industry to join the course. This is not a get-rich-quick type course but a course for adding value to the internet and its communities.
In this first project you'll add a tip jar to a portfolio website – a super simple way to accept money without having to use PayPal, Stripe, or any other payment gateway.
We'll lay the groundwork on what exactly crypto is, why we would use Ethereum, how to connect a digital wallet to the Ethereum blockchain, and how to transfer Ether payments to other digital accounts.
Potstop is a completely decentralized social network – one of the under-appreciated and under-hyped benefits of building on the Ethereum blockchain is the ability to have accounts that you can take with you. No more lock-in to a big company!
In a standard web project, we would need to create our own user account system but there's no need to do this with digital wallets. In this project, we'll be showing you how to connect your digital wallet to sites to allow you to login without needing a back-end service, how to verify if someone is who they say they are, and let our community tip each other.
Smart payments! For us, the most exciting thing about crypto is the ability to make complex payments really simple. We'll be launching a band's new album as a 100-copy limited edition with 20% of revenue going to charity.
In the past, this would be thousands of lines of code and you'd usually have to integrate a third party API like Stripe. Now it's only 40-odd lines and a million times more readable.
NFTs – you may have heard of these... For some, they're the next big way to own things; for others, they're for others who want to spend money on JPGs. However, there's more to NFTs than this.
Even if you hate or don't grasp the reasoning for buying digital art, the concept of being able to prove ownership of a digital item will get more common. For example, we don't do this yet but we could offer our students digital certificates of completion to prove they finished this course to an employer.
In this project, we'll create our own NFT platform and let people own a part of our project.
Crypto communities and DAOs like Friends With Benefits let their members join by buying their very own digital currency called $FWB. These 'coins' are built on top of the Ethereum blockchain but the value of the currency is totally up to you and your community!
In this project, we'll create our own photography community built on top of our own coin, the $WIP, which we can send to others for being strong community members. We will also set up thresholds so your members need a set number of $WIP to access certain features.
Again, in a standard 'web-app' site, this kind of site build would be thousands of lines of complex code, whereas with crypto and Web 3 technology, we can not only make these communities a lot quicker but it also allows others to build projects that work on top of our very own digital currency too!
Rik (he/him) is a Mancunian coder, teacher and CEO of SuperHi. He was the co-founder of Steer (a code school in London) and has taught several thousand people to code. He is a bit too old to be posting memes on our social media and recently featured as a Sour Patch Kid in the Macy's Thanksgiving Parade.
Lesson 01
Welcome to the Crypto + Web 3 for Creatives course
Lesson 02
VS Code and running a live server
Lesson 03
Explaining the HTML and CSS
Lesson 04
Installing a digital wallet
Lesson 05
Your Ethereum account and the blockchain
Lesson 06
Adding a script to the HTML page
Lesson 07
Running code on form submit
Lesson 08
Only show the form if the user has a wallet
Lesson 09
Show a message if no digital wallet installed
Lesson 10
Creating a send function
Lesson 11
Passing in the correct amount from the input
Lesson 12
Connecting your site to a digital wallet
Lesson 13
Async and await
Lesson 14
Sending a Ethereum transaction
Lesson 15
Converting from Ether to Wei with web3.js
Lesson 16
Testing with the Ropsten test network
Lesson 17
Testing with the Ganache app
Lesson 18
Next steps!
Lesson 01
Welcome to Potstop
Lesson 02
Setting up our project
Lesson 03
Installing Node.js and Yarn
Lesson 04
Setting up with yarn install and yarn dev
Lesson 05
React components and import from different files
Lesson 06
Passing data into React components
Lesson 07
Changing components based on data
Lesson 08
Connecting to a wallet
Lesson 09
Async and await with a wallet
Lesson 10
useState to hold account information
Lesson 11
Multiple accounts and isLoggedIn state
Lesson 12
Cleaning up the code with useEffect
Lesson 13
useEffect on load only
Lesson 14
Adding an accountsChanged listener
Lesson 15
Off-chain vs on-chain
Lesson 16
Pulling in data by fetching from an API
Lesson 17
Displaying answers and loading state
Lesson 18
Using map to loop over answers
Lesson 19
Adding tipping to each answer
Lesson 20
Hiding the tip button on our answers
Lesson 21
Formatting the addresses
Lesson 22
Adding a Jazzicon for each account
Lesson 23
Adding ENS names
Lesson 24
Adding ENS avatars
Lesson 25
Setting up the answers form
Lesson 26
Signing our data to prove its us
Lesson 27
Next steps!
Lesson 01
Welcome to Prism!
Lesson 02
Setting up the project with Solidity and Truffle
Lesson 03
Initializing the project with Truffle
Lesson 04
Truffle configuration
Lesson 05
Compiling and migrations with Truffle
Lesson 06
A pretend Javascript version of our smart contract
Lesson 07
Setting up total and max sales
Lesson 08
Making information publicly accessible
Lesson 09
Adding public addresses
Lesson 10
Adding a canBuy function to Solidity
Lesson 11
Adding a basic buy function
Lesson 12
Using require in Solidity
Lesson 13
Allow functions to accept Ether
Lesson 14
Splitting payments between owner and charity addresses
Lesson 15
Does the user already have access to the album?
Lesson 16
Using Remix to play with our contract
Lesson 17
Adding Truffle tests to our smart contract
Lesson 18
Testing whether the owner and charity addresses are correct
Lesson 19
Testing whether payments get split between owner and charity
Lesson 20
Adding our smart contract to the front-end
Lesson 21
Connect button
Lesson 22
Accounts on load and on changed
Lesson 23
Run functions on our smart contract
Lesson 24
Send transaction to our smart contract
Lesson 25
Checking whether we have access to the download
Lesson 26
Confirming download access on the back-end
Lesson 27
Deploying to Ropsten test network
Lesson 28
Last things!
Lesson 01
Welcome to Planetary
Lesson 02
Setting up our project
Lesson 03
Setting up Truffle with Ganache
Lesson 04
Using the OpenZeppelin Wizard
Lesson 05
Minting a token
Lesson 06
The _createPlanet function
Lesson 07
Testing our smart contract with Remix
Lesson 08
Setting up with IPFS
Lesson 09
Pinning content with Pinata
Lesson 10
Deploying our contract to Rinkeby
Lesson 11
Using a metadata set standard
Lesson 12
Setting up our web project
Lesson 13
Pulling in the metadata via the token URI
Lesson 14
Adding the OpenSea URL to the button
Lesson 15
Using the OpenSea API
Lesson 16
Showing if the planet is for sale on OpenSea
Lesson 17
Finishing our project
Lesson 18
Variation: Mirror and Arweave
Lesson 19
Variation: Loot project
Lesson 20
Variation: Cryptopunks
Lesson 21
Variation: proofof.network
Lesson 01
Welcome to W-I-P
Lesson 02
Project setup
Lesson 03
Truffle init
Lesson 04
What is a ERC20 contract?
Lesson 05
Adding post and comment thresholds
Lesson 06
Changing the thresholds after deploy
Lesson 07
Adding canPost and canComment functions
Lesson 08
Checking tests with Solidity coverage
Lesson 09
Deploying to Ropsten
Lesson 10
Verifying and publishing the contract on Etherscan
Lesson 11
From contract to website
Lesson 12
Adding a wallet component around every page
Lesson 13
createContext and useContext
Lesson 14
Using useState and useEffect in wallet.js
Lesson 15
Cleaning up code with object destructuring
Lesson 16
The Web3Modal library
Lesson 17
useEffect on web3
Lesson 18
Connecting to the contract
Lesson 19
Fetching the balance on a live contract
Lesson 20
Implementing canPost and canComment
Lesson 21
Using context in other places
Lesson 22
Sending $WIP via a form
Lesson 23
Goverance with tokens
Lesson 24
Swapping and pooling tokens on Uniswap
Lesson 25
The pros and cons of a token-based community
Lesson 26
Thank you!
Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?
View student workDon’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
