The primary distinction between web2 and web3' frontend vs backend concepts is that we will be interacting with smart contracts in the background, and rest leveraging the same technologies.
HTML: Hypertext Markup Language uses components, tags, and attributes, which enables web users to design and organize sections, paragraphs, and links in the web pages and online applications. Learn HTML here: w3schools html course
CSS: The content of the page is structured using HTML, and it is styled using CSS. The page can be styled in terms of layouts, colours, fonts, and styles with the help of CSS. We can create scalable and maintainable styling with CSS. Learn CSS here: w3schools css course
“What are smart contracts? A smart contract is a self-executing program that is recorded on a blockchain and executes automatically when predefined criteria are satisfied. As with any contract, a smart contract specifies the conditions of an agreement that are directly encoded in lines of code.”
APIs: It is an interface that communicates directly or indirectly with a blockchain node or client network. A nice example of a blockchain API would be an interface between a Bitcoin exchange and a user application that collects its data. Simple integration explained here: How to integrate apis
Database: Any information-storing data structure can be considered a database. At its foundation, blockchain technology is nothing more than a ledger for storing transaction information. Thus, blockchains can be regarded as databases. They basically store all the client and user data.
Additional reading on web3 frontend, backend, database here: web3 architecture layers explained
learnweb3.io. (n.d.). LearnWeb3 DAO | Become a Web3 Developer for Free. [online] Available at: https://learnweb3.io/courses [Accessed 21 Oct. 2022].
MongoDB. (n.d.). Blockchain Database: A Comprehensive Guide. [online] Available at: https://www.mongodb.com/databases/blockchain-database.
Sharma, T.K. (n.d.). What is a Blockchain API? How can you integrate in your website? [online] Available at: https://www.blockchain-council.org/blockchain/what-is-a-blockchain-api-how-can-you-integrate-in-your-website/.
Shevchuk, V. (2022). Top Web3 Architecture Layers Explained: Frontend, Backend, and Data. [online] Medium. Available at: https://itnext.io/top-3-web-3-0-architecture-layers-explained-frontend-backend-and-data-e10200f7fc76.
www.coinbase.com. (n.d.). Smart contracts allow developers to build apps that take advantage of blockchain security, reliability, and accessibility. [online] Available at: https://www.coinbase.com/learn/crypto-basics/what-is-a-smart-contract.