Let’s explore deeper into CSS.
Table of Contents
Style Your Web
Separation of Concerns
Layers in Blockchain
Link Between HTML to CSS
CSS Animation
In Conclusion
Style Your Web
CSS or Cascading Style Sheets is the language that provides style to the HTML page. Of course, HTML can also style content by itself, but CSS offers more tools to do so. It is one of the most fundamental principles called Separation of Concerns that makes CSS more powerful in styling contents while HTML focuses more on contents themselves.
Separation of Concerns
The idea is not to write a program with one solid block to increase the potential of a single point of failure. Rather, separating features into each block can finish their distinct job.
Layers in Blockchain
Image Credit: https://cointelegraph.com/blockchain-for-beginners/a-beginners-guide-to-understanding-the-layers-of-blockchain-technology
A similar concept from Separation of Concerns may be demonstrated in Blockchain layers. Layer 1 is the blockchain fundamental layer with Consensus like Proof of Work or Proof of Stake. While Layer 2 you have scalability solutions like Polygon to reduce transaction fees while increasing the transaction speed. However, in more concise descriptions of layers, there are six layers including the application layer, modeling layer, contract layer, system (consensus) layer, data layer, and network layer. Note that the modeling layer facilitates smart contracts and the contract layer executes smart contracts and users' interaction with such contracts.
Link Between HTML to CSS
A simple one-line code that makes a connection between HTML and CSS:
<link rel="stylesheet" href="style.css">
You can test here.
CSS Animation
CSS can also make animations on the web. There are many ways to learn and here is one example of a tutorial below:
Here is a tutorial here with some very useful websites to help code below:
https://webcode.tools/generators/css/keyframe-animation
https://css-tricks.com/almanac/properties/a/animation/
https://coolcssanimation.com/
In Conclusion
Now you have learned the basics of CSS. You can make your website interactive and improve the user experience!
The next topic I will go deep into is JavaScript.
Join Odyssey DAO to onboard 1 million to web3 and check out our community to check out more events, contribute to a project, and stay up to date. Also, check out the website here and subscribed to the newsletter here
Photo by Marcus Ganahl 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
-------------------------------------------------------------------------------------
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.
