# Eth.build Quickstart | Web3.0 dApp Dev 0x01

By [leeduckgo](https://paragraph.com/@leeduckgo) · 2021-10-19

---

Eth.build Overview
------------------

Eth.build is a educational Web3.0 sandbox with following features:

*   No-code drag and drop programming
    
*   Fully open-source
    
*   Visualized workflow of Ethereum
    

> **Official website:**
> 
> [https://eth.build/](https://eth.build/)
> 
> **Youtube playlist:**
> 
> [https://www.youtube.com/playlist?list=PLJz1HruEnenCXH7KW7wBCEBnBLOVkiqIi](https://www.youtube.com/playlist?list=PLJz1HruEnenCXH7KW7wBCEBnBLOVkiqIi)
> 
> **Repository:**
> 
> [https://github.com/austintgriffith/eth.build](https://github.com/austintgriffith/eth.build)

Eth.build Quickstart
--------------------

### Loading tutorial examples

Click "learn more". You will see a lot of tutorial examples. You can click the button to load and watch the tutorial!

image-20210917102528583

image-20210917102633107

image-20210917102938705

### Basic practices: getting the balance of ETH address

image-20210917104531017

This is a simple demo that realize the feature that get the balance of ETH address.

We can learn the usage of `eth.build` from this example.

#### STEP 0x01. Create Text Block

Click `INPUT`\>`TEXT` to create a text input box. `INPUT` has a set of input box components.

image-20210917104858238

#### STEP 0x02. Create Balance Block

Click `WEB3`\>`BALANCE` to create a balance box，`WEB3` is a series of realization of ETH `Web3` features, which is similar to the realizations in `ether.js`.

image-20210917113330225

Looking at this block, you can see it is composed of three parts: `INPUTS`, hidden operation, and `OUTPUTS`. So, from computer's POV, these blocks can be viewed as a visualization of functions.

#### STEP 0x03. Link Text and Balance

We connect Text's output to Balance input, then they are linked.

image-20210917113718107

#### STEP 0x04. Enter an address!

Copy and paste an address into `Text`. Oops! Our input of `Balance` becomes an integer.

image-20210917113848959

#### STEP 0x05. Wei to ETH

Well, that's an integer, cause the unit of the number is `wei`. We can convert the unit to `ETH`, so we need to add two more blocks.

"`Utils`\>`From Wei`" and "`DISPLAY`\>`WATCH`". Utils is the set of universal components. DISPLAY is the set of output components.

image-20210917114243087

#### STEP 0x06. Show it to ur FRIENDS！

That's all! You finished your first `eth.build` project, and you can show off in front of all your friends!

image-20210917114533319

`SAVE` > `Share`, then you can get a link, send that link to your friend so that they can see the project:

image-20210917114727200

#### STEP 0x07. Download your project

Maybe you want to save the project in your computer for later work.

Click "`Save`\>`Download`" and "`Load`\>`Load From File`".

### More!

> No-code Ethereum blockchain browser:
> 
> [https://eth.build/build#3c50b1af5fd2956e808ac4d3132a9d063b8e2f9eac3b44d3971fe83165d5d0b8](https://eth.build/build#3c50b1af5fd2956e808ac4d3132a9d063b8e2f9eac3b44d3971fe83165d5d0b8)

From this example, we can see some advanced development of `eth.build`.

image-20210917122822025

#### 0x01. Modify the property

image-20210917122804436

By modifying the `Properties`, we can modify blocks such as `BUTTON`, `WATCH` and etc. That will be nicer and customized. For example, I will have `0x01` as the number of click events for the buttons.

image-20210917122956248

#### 0x02. Title and QR code

By clicking "`DISPLAY`\>`TITLE`", we can add title to our project.

image-20210917123424682

Apart from that, we can add our contact QR code to the project!

image-20210917123505349

Download QR code from your social media, then convert the QR code to `URL` by using tools like this([https://www.patrick-wied.at/static/qrgen/](https://www.patrick-wied.at/static/qrgen/)), then paste the url into `Text`. That's it!

image-20210917123708696

Here is the QuickStart of `eth.build`. It has many more tricks to learn🤩！

> Authors’ Information:

[Leeduckgo](https://noncegeek.com/namecards/leeduckgo.svg?display=iframe)

[Msfew](https://noncegeek.com/namecards/msfew.svg?display=iframe)

---

*Originally published on [leeduckgo](https://paragraph.com/@leeduckgo/eth-build-quickstart-web3-0-dapp-dev-0x01)*