SuperHi FM

Search:

Catalog Cart About Sign in

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.

Rik Lomas

Taught by

Rik Lomas

Chapter 1

Chapter 1

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

Chapter 2

Chapter 2

Lesson 01

Welcome to Potstop

Lesson 02

Setting up our project

Lesson 03

Installing Node.js and Yarn

Chapter 3

Chapter 3

Lesson 01

Welcome to Prism!

Lesson 02

Setting up the project with Solidity and Truffle

Lesson 03

Initializing the project with Truffle

Chapter 4

Chapter 4

Lesson 01

Welcome to Planetary

Lesson 02

Setting up our project

Lesson 03

Setting up Truffle with Ganache

Chapter 5

Chapter 5

Lesson 01

Welcome to W-I-P

Lesson 02

Project setup

Lesson 03

Truffle init

Get access to Crypto + Web 3 for Creatives

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructor

Rik Lomas

Rik Lomas

Founder + CEO

Course structure

Chapter 01

Chapter 1

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!

Chapter 02

Chapter 2

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!

Chapter 03

Chapter 3

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!

Chapter 04

Chapter 4

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

Chapter 05

Chapter 5

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!

SuperHi students work at the best

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 work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

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.

View this course's environmental and ethical policies

What you’ll learn

How to create your own custom NFT platform and let people mint, buy and sell directly from you
How to move from standard web technologies ("Web 2.0") to Web 3 technology
How to create a decentralized social network that allows you to connect your digital wallet to websites, allowing you to log in without needing a back-end service
How to create your own digital currency for a social network where people can tip each other and have access to features based on how much of the social network's currency they have
How to create your own smart contracts, test them, and deploy them to Ethereum
Learn how to work with React.js, Next.js, Solidity and more!

Requirements

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.

VS Code or a code editor of your choosing
Metamask – a digital wallet which is installed as a browser extension
A Github account to store your code online
A Vercel account to host your final websites
An Infura account to let people who don't have a digital wallet interact with your sites

Target Audience

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.