HTML is the standard markup language for creating web pages. It defines the structure and content of web documents. See the example below:
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
CSS is used for designing the visual layout and appearance of web pages. It defines how elements should be displayed. See the example below:
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: blue;
}
</style>
JavaScript is a versatile programming language for adding interactivity and functionality to web pages. See the example below:
// JavaScript code example
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('h1').textContent = 'Hello World!';
});
React is a popular JavaScript library for building user interfaces. It uses a component-based architecture. See the example below:
// React Component Example
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
ReactDOM.render(
<Welcome name="World" />,
document.getElementById('root')
);
A Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. See the example below:
<!-- Bootstrap Button Example -->
<button type="button" class="btn btn-primary">
Click Me!
</button>
Tailwind CSS is a "utility-first CSS framework" which provides several of these opinionated, single-purpose utility classes that you can use directly inside your markup to design an element. See the example below:
<!-- HTML with Vanilla CSS -->
<div class="center-div">
<p>Centered Content</p>
</div>
<!-- Corresponding CSS -->
<style>
.center-div {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<!-- HTML with Tailwind CSS -->
<div class="flex justify-center items-center">
<p>Centered Content</p>
</div>
Node.js® is an open-source, cross-platform JavaScript runtime environment. See the example below:
// Node.js: Read a file
const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
if (err) {
console.error('Error reading the file:', err);
return;
}
console.log(data);
});
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. See the example below:
// Simple Express.js Server
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});
MongoDB is an open source NoSQL database management program. NoSQL (Not only SQL) is used as an alternative to traditional relational databases. See the example below:
// Simple MongoDB Find Query
const { MongoClient } = require('mongodb');
const url = 'mongodb://localhost:27017';
const dbName = 'myDatabase';
async function findDocument() {
const client = new MongoClient(url);
try {
await client.connect();
const db = client.db(dbName);
const collection = db.collection('myCollection');
const document = await collection.findOne({});
console.log('Document found:', document);
} finally {
await client.close();
}
}
findDocument().catch(console.error);
PostgreSQL is an advanced, enterprise-class open-source relational database that supports both SQL (relational) and JSON (non-relational) querying. See the example below:
// Simple PostgreSQL Query with Node.js
const { Pool } = require('pg');
const pool = new Pool({
user: 'myUser',
host: 'localhost',
database: 'myDatabase',
password: 'myPassword',
port: 5432,
});
async function queryDatabase() {
const client = await pool.connect();
try {
const res = await client.query('SELECT \* FROM myTable LIMIT 1;');
console.log(res.rows[0]);
} finally {
client.release();
}
}
queryDatabase().catch(console.error);