A beginner's guide to Front End Web Development

A beginner's guide to Front-End Web Development
❍ HTML
❍ CSS
❍ JavaScript
⇩
➊ Web Applications
⬘ Applications that are accessed using Web-based protocols (HTTP/S) are known as Web Applications.
⬙ They have 2 major components
❍ UI (Front End)
❍ API (Back End)

⚠️ The division I made and, the terms I used are just to simplify things.

➋ Front End (UI)
⬘ Front End is the User Interface (UI) and, it's the visual part of a Web Application.
⬗ Front End is mostly accessed from Web Browsers.
⬙ Web Browsers contain 2 engines
❍ Browser Engine
❍ JavaScript Engine

➌ Browser Engine
⬘ Websites are divided into multiple pages. At any time a single page is rendered. This is called a Web Page.
⬗ Browser Engines are responsible to parse a web page and, rendering it in browser.
⬙ Here's a list of Browser Engines
https://twitter.com/swapnakpanda/status/1470380392209285120?s=46&t=hBHSNhdGhI2pceTy7YMe4g

➍ JavaScript Engine
⬘ A Browser Engine renders the web page, but it can't handle all events that may occur.
⬗ A JavaScript Engine is for this purpose.
⬙ Here's a list of JavaScript Engines

➎ HTML, CSS & JavaScript
⬘ There exists these 3 popular languages for Front End Development.
⬗ Why so many? They help in the clear separation of concern.
⬙ Let's see how they operate

❍ HTML ➟ Structure
❍ CSS ➟ Presentation
❍ JavaScript ➟ Behaviour

Let's understand using an analogy
⬘ HTML is like a raw-built house. It's just a structure laid out.
⬗ CSS is like adding all facilities and, beautifying. You paint, you make modular designs.
⬙ JavaScript is like operating all these. You switch on light, open the tap etc.

🏁 Final Words
⬘ Web Applications have 2 major parts. UI (Front End) is the visual part of it.
⬗ UI is built using 3 languages viz. HTML, CSS and JavaScript.
⬙ HTML is for structuring, CSS is for presentation and JavaScript adds behaviour.