Learn Web3 in 100 Days - Day 10: Front-End

Learn Web3 in 100 Days - Day 10: Front-End

By xuanling11 | Crypto Learning | 16 Apr 2022


Let’s explore the Front-End.

 

Table of Contents

What is a Front-End Developer

Front-End Engineers vs UX/UI Designer vs Graphic Designer

Web Design Process

Web3 Front-End

Front-End Roadmap

Front-End Learning Resources

Front-End Skills

In Conclusion

 

What is a Front-End Developer

 

 

19ebde96e50c2bd44453938533a8d3a4ef125c7228072878c5da4fda19cb0a07.png

Image Credit: https://www.upwork.com/hiring/development/front-end-developer/

 

Front-End Developer is a translator. They translate human language into computer executive codes. They build a skeleton of the website that users can interact with. As the industry progresses, there are many more new roles invented to specialize in the different aspects of web development.

 

Front-End Engineers vs UX/UI Designer vs Graphic Designer

518610f22114d2bf7542e4d62baba9858901fe7b6b0ff0de4bfc1f6c3ff02e54.png

Image Credit: https://www.youtube.com/watch?v=GJ8jidDdWVg

 

Front-End engineers or Front-End interface developers or Front-End designers are more emphases on how to execute arts. UX/UI designers bring relationships from users' perspectives into how website layout and functionality can bring more unique experiences to users. While graphic designers are more focused on the visual aesthetics of the website. 

6d932f83849bfd24b379f61ab457b32a0575fb64f7181865645c14842e628ac3.png

Image Credit: https://www.ideamotive.co/blog/difference-between-ux-and-ui-designer-and-front-end-developer

 

The front-End Developer takes take of coding for the website. UX takes care of the user experience of using the website, UI takes care of the user interface that reacts to the website and the graphic designer takes care of the cosmetic of the website,

 

Web Design Process

b8cbb12651a3fa4873d5cdf02a2b84d9225a3b5c3e78ead5fba0850d23f4155f.png

Image Credit: https://www.uxforthemasses.com/ux-deliverables-are-dead/

 

In the old process, it was more of a linear workflow in which 3 roles of designers interacted with each other through stages.  

 

There are more and more design and communication tools introduced within 10 years and the design process has also changed since.

9f126421ce51d1747159f5b13bf255885b48ce1f25801008fad6ba98b70ed16b.png

Image Credit: https://www.uxforthemasses.com/ux-deliverables-are-dead/

 

The new process is UXM or a minimum viable design. The goal is to produce a minimum prototype with active interaction with 3 roles that can quickly reach users through the testing phase.

 

Web3 Front-End

de7a2985db701edae0ede9b978cfadf3eaeaf1275be4cd2d83fcd130f46f95ee.png

Image Credit: https://itnext.io/top-3-web-3-0-architecture-layers-explained-frontend-backend-and-data-e10200f7fc76

 

 

In Web3, the Front-End developer also needs to consider how the website can interact with the blockchain and smart contracts. The current stage is still in development, it is simply to connect the wallet in most of the development phase.

 

Front-End Roadmap

 

 

To learn more about Front-End, the roadmap helps you to explore some of the tools and skills you want to learn. However, do not limit yourself within those roadmaps.

 

Front-End Learning Resources

 

There are many free resources to learn Front-End nowadays, try to explore them and find out what best fits your learning style.

 

Front-End Skills

 

Here is an example of a way to learn Front-End fast. However, the industry is changing rapidly, some of the skills will be outdated and many more new skills will need to be learned.

 

In Conclusion

Now you have learned Front-End. Try to explore your own path about how to learn Front-End effectively. 

 

Keep learning.


Photo by Christoph Peich on Unsplash
Note: the post was shared on multiple platforms here.

You can refer my previous article lists here and here
------------------------
2022 Prediction
2022 Prediction #1: L1 Scalability
2022 Prediction #2: L2 Bridges
2022 Prediction #3: Zero-Knowledge Proofs or ZKPs
2022 Prediction #4: Regulated Defi On-Chain KYC
2022 Prediction #5: Institutional Crypto Adoption
2022 Prediction #6: Defi Insurance
2022 Prediction #7: NFTs-Based Communities - DAO 1.5
2022 Prediction #8: Metaverse and NFTs
2022 Prediction #9: Web2 Companies’ FOMO
2022 Prediction #10: Time for DAO 2.0
------------------------
DAO The Way
DAO The Way Part 1
DAO The Way Part 2
DAO The Way Part 3
DAO The Way Part 4
DAO The Way Part 5
DAO The Way Part 6
DAO The Way Part 7
DAO The Way Part 8
DAO The Way Part 9
DAO The Way Part 10
DAO The Way Part 11
DAO The Way Part 12
------------------------
Learn How To Defi
Learn How To Defi Part 1
Learn How To Defi Part 2
Learn How To Defi Part 3
Learn How To Defi Part 4
Learn How To Defi Part 5
------------------------
Crypto Comics
Crypto Comics
Crypto Comics - PoW
Crypto Comics - Who is Satoshi
Crypto Comics - What is Token
Crypto Comics - What is DeFi
Crypto Comics - What is Wallet
Crypto Comics - What is HODL
Crypto Comics - What is Coinbase
Crypto Comics - What is PoS
Crypto Comics - What is DAO
Crypto Comics - What is A Block
Crypto Comics - What is NFT
Crypto Comics - What is Fork
Crypto Comics - What is Web3
Crypto Comics - What is DeFi-2
Crypto Comics - What is Yearn Finance
Crypto Comics - What is Degen
Crypto Comics - What is Aping
Crypto Comics - What is Cold Wallet
Crypto Comics - What is Hot Wallet
Crypto Comics - What is Airdrop
Crypto Comics - What is DYOR
Crypto Comics - What is 65537
Crypto Comics - What is RC4
Crypto Comics - What is WAGMI
Crypto Comics - What is Bagholder
Crypto Comics - What is Decentralization
Crypto Comics - What is Wallet Address
Crypto Comics - What is Plagiarism in Web3
Crypto Comics - What is Bart Pattern
Crypto Comics - What is Encryption
Crypto Comics - What is Consensus
Crypto Comics - What is Protocol
Crypto Comics - What is Stablecoin
Crypto Comics - What is ApeCoin
Crypto Comics - What is FOMO
Crypto Comics - What is Tokenomics
Crypto Comics - What is APR
Crypto Comics - What is to The Moon
------------------------
Learn Web3 in 100 Days
Learn Web3 in 100 Days - #1 What is the Internet and How Relevant to Web3
Learn Web3 in 100 Days - Day 2: What are the Browsers and Servers
Learn Web3 in 100 Days - Day 3: What are HTTP Status Code
Learn Web3 in 100 Days - Day 4: HTML and CSS and JS
Learn Web3 in 100 Days - Day 5: What is programming
Learn Web3 in 100 Days - Day 6: Markup, Elements, Tags, and Hyperlinks
Learn Web3 in 100 Days - Day 7: Style Your Web
Learn Web3 in 100 Days - Day 8: JS
Learn Web3 in 100 Days - Day 9: SQL
------------------------
Modern Economic Nonsense
Modern Economic Nonsense - Inflation and Incentives
Modern Economical Nonsense - The Astrologist's Way
Modern Economical Nonsense - The VUCA World
-------------------------------------------------------------------------------------
Disclosure: The article was written by a delusional author who is possibly a nut job without any questions whatsoever about expertise in the subject matters. You should not believe any words this author wrote or you may experience similar symptoms or even possibly become a nut job.

How do you rate this article?

19


xuanling11
xuanling11

Check out https://www.xuanling11.com/.


Crypto Learning
Crypto Learning

All article was written by a delusional author who is possibly a nut job without any questions whatsoever about expertise in the subject matters.

Publish0x

Send a $0.01 microtip in crypto to the author, and earn yourself as you read!

20% to author / 80% to me.
We pay the tips from our rewards pool.