This content originally appeared on DEV Community and was authored by Mohamed Samir Mouawad
Web3 Frontend – Everything You Need to Learn About Building Dapp Frontends
May 28, 2022
Blog · Dapps · Web3
Table of Contents
What is a Frontend?
Frontend Components: User Interface (UI)
Frontend Components: User Experience (UX)
What is Frontend Development?
Skills for Frontend Development
Web3 Frontend Development
Web3 Frontend Jobs
Summary
What is a Frontend?
The frontend of an application, website, or dapp is everything the user can see and interact with. It’s also called the client-side.
This includes:
Colors, styles, images, and animations.
Buttons, menus, input fields.
Graphs, tables, and text.
In short: If the user can see it or interact with it, it’s part of the frontend.
Frontend Components: User Interface (UI)
UI = the space where user interactions happen.
3 key elements:
Interactive Design → turns users into active participants.
Information Architecture → presents information logically.
Visual Design → makes apps/websites look appealing.
Tip: Tools like Moralis web3uikit can help you quickly build great Web3 UIs.
Frontend Components: User Experience (UX)
UX = the entire customer journey.
Focuses on research, testing, and personas.
Makes sure the product feels smooth and intuitive.
Difference:
UI → how it looks.
UX → how it feels.
What is Frontend Development?
Frontend development = building and implementing everything users see.
Responsibilities:
Structuring & designing UIs.
Ensuring responsiveness (works on all devices).
Maintaining performance and speed.
Skills for Frontend Development
To become a frontend developer, you need:
HTML → structure of the webpage.
CSS → styling, colors, layout, animations.
JavaScript → interactivity and dynamic elements.
Extra skills:
Frameworks → React, Angular.
Libraries → ready-made components (e.g., Web3.js).
Web3 Frontend Development
Web2 and Web3 frontends share the same basics.
The key difference: Web3.js
Web3.js is a JavaScript library that lets you:
Interact with Ethereum nodes.
Send transactions.
Read blockchain data.
Thanks to Moralis and other IaaS tools, backend-heavy tasks are easier, leaving developers free to focus on frontend.
This content originally appeared on DEV Community and was authored by Mohamed Samir Mouawad