Today I learnt about the basic structure of a web application — how frontend, backend and server communicate, what system design means, and different types of architectures like monolithic and modular.
I also wrote my first HTML code with comments explaining every tag.
Every web application mainly has three layers:
-
Frontend (Client Side)
- Built using HTML (structure), CSS (style) and JavaScript (logic).
- Runs on the browser.
- Example frameworks: React, Vue, Angular.
-
Backend (Server Side)
- Handles logic, databases, and APIs.
- Languages/frameworks: Node.js, Django, Flask, Spring Boot, Laravel.
-
Server (Hosting & Infrastructure)
- Runs the backend code.
- Could be local development server or cloud (AWS, Vercel, Azure etc.).
System Design means planning how frontend, backend and database interact efficiently.
Good system design ensures scalability, performance, security and easy maintenance.
Everything (frontend + backend + database) is built together as one application.
Pros: Simple to start.
Cons: Hard to scale and update.
Application is divided into independent services (like login, payment, notification).
Pros: Easy to scale and maintain.
Cons: Complex to manage initially.
JSX is JavaScript XML – used in React to write HTML-like code inside JavaScript.
const element = <h1>Hello World!</h1>;<!DOCTYPE html> <!-- defines the document type so browser knows it’s HTML5 -->
<html lang="en"> <!-- root element of the page with language attribute -->
<head> <!-- contains meta information about the page (not visible to user) -->
<meta charset="UTF-8">
<!-- character encoding: UTF-8 stands for Unicode Transformation Format
allows webpage to display any language/symbol correctly -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- makes the site responsive across devices by controlling viewport scaling -->
<title>Document</title> <!-- title shown on browser tab -->
<link rel="stylesheet" href="style.css"/>
<!-- connects external CSS file.
kept inside <head> so HTML and CSS load first for faster rendering -->
</head>
<body> <!-- visible content of the page -->
<h1>My Introduction</h1>
<p>
Hello! My name is Tanush. I am a web developer with a passion for creating beautiful and functional websites.
In my free time, I enjoy hiking, reading, and exploring new technologies.
</p>
<div class="hello"></div>
<!-- class selector in CSS uses a dot (.)
example: .hello { color: red; }
shortcut in VS Code: .type .hello and press Enter -->
<div id="hello1"></div>
<!-- id selector in CSS uses a hash (#)
example: #hello1 { background: blue; }
shortcut in VS Code: type #hello1 and press Enter -->
<script src="script.js"></script>
<!-- links external JavaScript file.
placed before </body> so HTML content loads first,
preventing render delay if script is large. -->
</body>
</html>📅 Day 1
🧭 Topics Covered: Frontend, Backend, Server, System Design, Monolithic vs Modular Architecture, JSX, HTML Structure
🎯 Next Goal: Learn about CSS selectors and how to link styles to HTML elements.
Today I learnt about the most common HTML tags that bring structure and interactivity to a webpage — like lists, links, radio buttons, line breaks, and images.
I also answered a few basic HTML theory questions to strengthen my understanding.
HTML stands for HyperText Markup Language.
It is used to structure content on the web — headings, paragraphs, links, images, lists, forms, etc.
It tells the browser what to display and how to organize it, not how it looks (that’s done by CSS).
- Webpage: A single HTML file (like
about.htmlorindex.html). - Website: A collection of connected webpages under one domain.
Boilerplate code is the basic HTML structure that every webpage starts with.
It helps browsers understand the type of document, encoding, and setup.
<!DOCTYPE html> <!-- defines that the file is HTML5 -->
<html lang="en"> <!-- sets the page language to English -->
<head>
<meta charset="UTF-8"> <!-- ensures special characters display correctly -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- makes website responsive on all devices -->
<title>My Webpage</title> <!-- title of the tab -->
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML page.</p>
</body>
</html><head>→ contains metadata (information about the page).
Includes SEO info, links to CSS/JS, and viewport settings.<body>→ contains visible content (text, images, buttons, etc.).<meta>→ helps browsers and search engines interpret your site correctly.
HTML has six levels of headings — <h1> to <h6>.
<h1> is the largest and usually used for page titles.
Example:
<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>The anchor tag is used to create clickable links.
<a href="https://www.google.com" target="_blank">Visit Google</a>href→ defines the destination URL.target="_blank"→ opens link in a new tab.
Example from my code:
<a href="https://www.linkedin.com/in/taanushhh?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app" target="_blank">
Tanush LinkedIn
</a>- Relative link: points to a file within the same project
Example:href="about.html" - Absolute link: points to a full web address
Example:href="https://www.google.com"
Used to display images on a webpage.
<img height="500" width="500"
src="https://cdn.pixabay.com/photo/2025/04/14/18/05/mountain-9533968_640.jpg"
alt="ocean">- src: path or URL of the image.
- alt: text that appears if the image fails to load (also improves accessibility).
- height / width: controls size of image.
📎 Example:
<img src="logo.png" alt="Website Logo"><br>→ breaks a line (used for spacing inside text).<hr>→ creates a horizontal line (used to separate sections).
Example:
<p>Hello!<br>Welcome to my website.</p>
<hr>
<p>This is another section.</p>Radio buttons let users select only one option from a group.
<!-- Radio Buttons Example -->
<input type="radio" name="options" value="option1"> Option 1
<input type="radio" name="options" value="option2"> Option 2
<input type="radio" name="options" value="option3"> Option 3💡 Note:
- All radio buttons in the same group must share the same
name. - Only one option with that name can be selected at a time.
There are two main types of lists:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol><ul>
<li>Frontend</li>
<li>Backend</li>
<li>Database</li>
</ul><ul>
<li>Frontend
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
</li>
<li>Backend</li>
</ul>Attributes add extra information to tags.
They are always written inside the opening tag.
Example:
<img src="logo.png" alt="Website Logo" height="200">Here:
src→ image pathalt→ alternate textheight→ sets image size
All are attributes modifying the <img> element.
Today’s class made HTML feel more alive — it’s not just writing tags, it’s learning how structure, attributes, and linking work together.
Also, understanding relative vs absolute links and how tags behave inside each other really helped me visualize how a webpage is formed step by step.
📅 Day 2
🧭 Topics Covered: Boilerplate, Headings, Anchor, Lists, <br>, <hr>, <img>, Radio Buttons, Attributes
🎯 Next Goal: Learn about forms, input fields, checkboxes, and basic CSS styling.