Oops! Does Frontend Need HTML and CSS?
The answer is: Of course, yes! 😄
But why do we need them?
What is the purpose of learning HTML and CSS?
Let me explain with an example.
Imagine a world where humans roam around with only skeletons 💀
How scary would that be?
Now imagine covering those skeletons with skin.
They still cannot move, but they definitely look much better than plain skeletons 😄
Now let’s connect this idea to web pages.
A web page is nothing without its structure and design. 🤷♀️
Here:
- HTML acts like the skeleton of a webpage.
- CSS acts like the skin, clothes, and cosmetics that make it attractive and beautiful.
- JavaScript gives life and movement to the webpage! ⚡
So, HTML gives structure, CSS gives style, and JavaScript adds interactivity.
Let me introduce the two — actually three — most important pillars of web pages!
Here comes our HTML — HyperText Markup Language.
Mr. Hyper communicates with the browser through a standard markup language used to create and structure the content of a webpage. Just like a skeleton gives structure to the human body!
To understand it more clearly, let’s split the abbreviation:
HYPERTEXT
HyperText refers to the links that connect web pages to one another — simple and straight! To know more, Click here
MARKUP LANGUAGE
A markup language is a system of special “tags” used to organize content and tell the browser how to display it.
I need a language to communicate with you — in this case, English.
Similarly, to communicate with browsers, we use HTML along with CSS styles.
To learn any language, we must understand its purpose and rules. Likewise, in frontend development, we follow certain rules and structures to communicate properly with browsers.
“Frontend without HTML and CSS is like trying to open a lock with a spoon 🍴🔒😄”
Haha… all the best!
Now, let’s discuss those “spoons” — sorry — the actual keys to unlock the world of Frontend Development 🔑
HTML Quick Introduction
Name: HTML — HyperText Markup Language
Version: HTML5
Invented By: Sir Tim Berners-Lee
Before jumping into structure and rules, you should be familiar with a few important terms like Metadata, Extensions, Elements, IDE, and more. We’ll catch up with the others later!
METADATA
Metadata means “data about data.”
I know that sounds confusing 😹
Let me simplify it.
Imagine an employee details form containing:
- Employee ID
- Employee Name
- Employee Department
This structure or format used to collect information is called metadata.
The actual employee information is the data, while the format describing that data is metadata.
Hope that makes sense now 😄 Still confused ? click me
EXTENSION
When saving a file, the last 3–4 characters added after the file name represent the file type. This is called an extension.
It’s basically like introducing yourself with your family name 😄
Examples:
.html.css.js.jpeg.pdf.doc
IDE — Integrated Development Environment
Before understanding IDEs, answer this honestly 😄
When you are extremely hungry, would you:
- Eat food that is already prepared and ready to serve?
- Or collect ingredients, cook everything yourself, and then eat?
Most of us would choose the ready-made meal 😹
Similarly, an IDE is a ready-to-use environment where developers can:
- write code,
- test applications,
- debug errors,
- and manage projects easily —
all in one place!
Popular IDEs include:
- Visual Studio Code
- IntelliJ IDEA
- PyCharm
- Eclipse
HTML Elements
The HTML element is everything from the start tag to the end tag:
Syntax : Content goes here...
Examples of some HTML elements:
Click here to know more - HTML ELEMENTS
The HTML structure and CSS magic will continue in the next blog 😄
For now, I’m logging out before JavaScript gains consciousness ⚡🤖
References :