Crypto Research

Learn Web3 in 100 Days – Day 7: Style Your Web

This article is sponsored by the MixPay Content Reward Program. MixPay is a decentralized crypto payment service platform built on Mixin Network. MixPay, Payment for Web3.

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

Image Credit: https://cointelegraph.com/blockchain-for-beginners/a-beginners-guide-to-understanding-the-layers-of-blockchain-technology

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

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://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.

Related posts
Crypto Research

Modern Economic Nonsense — Inclusive blockchain

Crypto Research

Modern Economic Nonsense — Banks are seeking shelter in cryptocurrencies

Crypto Research

Modern Economic Nonsense — Web3 continues building despite the bear market

Crypto Research

Modern Economic Nonsense — Payment apps move away from the fiat currency

Sign up for our Newsletter and
stay informed

Leave a Reply

Your email address will not be published.