Connect Your DApp Frontend: Learn Web3.js or Ethers.js

Once you’ve mastered Smart Contracts, the next step is connecting your front-end to your Solidity (or similar) backend. This can be done using communication protocols like HTTP or WebSockets.

To achieve this, you can use one of two popular JavaScript libraries:

Web3.js
Web3.js is a collection of libraries that enables you to interact with local or remote Ethereum nodes directly from your JavaScript-based front-end using HTTP, WebSockets and other protocols.

Check out this Web3.js Crash Course by DApp University to get started.

Ethers.js
Ethers.js is a lightweight alternative to Web3.js. It simplifies connecting your JavaScript front-end to Smart Contracts.

Learn front-end DApp development with Ethers.js through Nader Dabit’s tutorials.