The MERN stack is a popular JAVASCRIPT based technology stack used for developing
full-stack web applications.
1. MongoDB: A NoSQL database for storing application data in a flexible, JSON-like
format.
2. [Link]: A lightweight and fast web application framework for [Link], used
to build robust backend API's.
[Link]: A frontend library for building user interface with a focus on single-
page applications(SPAs)
4. [Link]: A runtime environment for executing JavaScrit code on the server-side.
HTML Tags and Attributes for Quick Reference:
Tag: <div>
Attributes: class, id, style
Purpose: Container for HTML elements.
_____________________________
Tag: <span>
Attributes: class, id, style
Purpose: Inline container for styling text.
________________________________
Tag: <p>
Attributes: style
Purpose: Paragraph text
________________________________
Tag: <h1>....,<h6>.
Attributes: class, id, style
Purpose: Heading with varying levels
__________________________
Tag: <img>
Attributes: src, alt, width, height
purpose: Image element.
__________________________________
Tag: <a>
Attributes: href, target, rel, title
purpose: Hyperlink element
____________________________________
Tag: <form>
Attributes: action, method
Purpose: Form container for user inputs.
_______________________________
Tag: <button>
Attributes: type, class, id, style
Purpose: Button elements
_________________________________
Tag: <input>
Attributes: type, name, placeholder, value.
Purpose: Input field for forms
_____________________________________
Tag: <ul>/<ol>
Attributes: type
Purpose: Unordered/Ordered list.
____________________________________________
a)href(Hypertext Reference): Specifies the URL or link destination.
Purpose: Clicking the link navigates to...
b) target: specifies how the linked document will be displayed(eg. in a new tab,
the same tab, or a specific frame).
_self: Opens the link in the same tab.
_blank: Opens the link in a new tab or window.
_parent: Opens the link in the parent frame.
_top: Opens the link in the full body of the window.
c) rel:(Relationship)
Defines the relationship between the current document and the linked document.
d) title: Adds extra information about the link(appears as a tooltip)
Important tags:
1.<main>: Represents the main content of the document. It should include content
unique to the page and exclude repetitive elements like headers, footers or
sidebars.
Example:
<main>
<h1> Welcome to My Blog </h1>
<p> This is where the main content of the page</p>
</main>
2. <section>: Break content into meaningful sections with a specific purpose.
eg:"About Us" or "Services"
3. <nav>: Represents navigation links for the website. Usually includes menus or
links to other parts of the site.
4. <article>: Represents a self-contained piece of content, such as a blog post,
news items, or forum entry.
5. <footer>:
Represents footer content for its nearest ancestors(section, article, or body etc)
<main>
<section id="about">
<h2>About Us</h2>
<p> We are passionate about creating
modern web expereiences.
</p>
</section>
<section id="articles">
<h2>Latest Articles</h2>
<article>
<h3> Understanding HTML5</h3>
<p>HTML5 introduces semantic elements
to make the website more meaningful.
</p>
</article>
<article>
<h3>CSS Flexbox Guide</h3>
<p>Flexbox is a powerful layout tool
for modern web design.
</p>
</article>
</section>
</main>
<footer>
<p>&Copy; 2025 My Awesome Website. All Rights
Reserved.
</p>
</footer>
<style>
body{
font-family: Arial, sans-serif;
margin:0;
padding:0;
line-height: 1.6;
}
header{
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
header h1{
margin:0;
}
nav ul{
list-style:none;
margin:0;
padding: 0;
display:flex;
justify-content: center;
}
nav ul li{
margin:0 15px;
}
nav ul li a{
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul li a:hover{
text-decoration: underline;
}
/* Main content Styles */
main{
background-color: #f4f4f4;
padding: 20px;
}
section{
margin-bottom: 20px;
padding: 15px;
border: 2px solid #ddd;
border-radius: 8px;
background-color: #e7f3ff;
}
section h2{
margin-top:0;
color:#0056b3;
}
/*Article Styles*/
article{
margin: 15px 0;
padding: 15px;
border: 2px solid #ccc;
border-radius: 8px;
background-color:#fff7e6;
}
article h3{
margin-top:0;
color: #b35400;
}
footer a{
color:#FFD700;
text-decoration: none;
}
footer a: hover{
text-decoration: underline;
}
</style>
Working with HTML Tables:
Basic Table Tags:
1.<table>: Defines the table
2. <tr>: Defines a table row
3. <th>: Defines a table header cell(Usually bold and centered by default)
4. <td>: Defines a table data cell.
5. <caption>: Adds a caption(title) to the table.
6. <thead>: Groups the header content in a table.
7. <tbody>: Groups the body content in a table.
8. <tfoot>: Groups the footer content in a table.
9.<colgroup>: Groups columns in a table
10.<col>: Specifies column properties(used inside <colgroup>)
Attributes:
>border: Adds a border around the table
>colspan: Merge cells horizontally
>rowspan: Merge cells vertically
HTML TABLE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Student Name</th>
<th>Maths</th>
<th>Art</th>
<th>Science</th>
<th>German</th>
</tr>
</thead>
<tbody>
<tr>
<td>Elena</td>
<td rowspan="2">70</td>
<td>60</td>
<td rowspan="3">50</td>
<td>50</td>
</tr>
<tr>
<td>Mark</td>
<td>80</td>
<td>50</td>
</tr>
<tr>
<td>John</td>
<td colspan="2">100</td>
<td>100</td>
</tr>
<tr>
<td>Jhonas</td>
<td>80</td>
<td colspan="2">70</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html>
__________________________________________________________
