Web Development Glossary: 50 Terms You Must Know in 2026

<!-- 5. Element: an opening tag, content and closing tag -->
<p>This whole line is a paragraph element.</p>

<!-- 6. Attribute: extra information on an element -->
<a href="https://example.com" target="_blank" rel="noopener">Visit</a>

<!-- 7. Form: collects user input and sends it somewhere -->
<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Subscribe</button>
</form>

/* 8. Box model: content + padding + border + margin */
.card {
  padding: 16px;
  border: 1px solid #ccc;
  margin: 12px;
  box-sizing: border-box;   /* width includes padding and border */
}

/* 9. Flexbox: one-dimensional layout for rows or columns */
.row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

/* 10. Media query: apply styles at certain screen sizes */
@media (max-width: 600px) {
  .row { flex-direction: column; }
}

// 15. Event listener: code that runs when something happens
document.addEventListener('click', () => console.log('page clicked'));

// 16. Promise: a value that will be ready later
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
wait(500).then(() => console.log('half a second passed'));

// 17. async/await: cleaner syntax for working with promises
async function run() {
  await wait(500);
  console.log('done waiting');
}
run();

// 18. JSON: text format for data exchange
const text = '{"name": "Asha", "course": "Web"}';
const user = JSON.parse(text);
console.log(user.name, JSON.stringify(user));

// 19. fetch: built-in function to call an API
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((r) => r.json())
  .then((todo) => console.log(todo.title));

// 20. npm: the package manager for JavaScript libraries
// Terminal:  npm init -y && npm install dayjs

// 25. Authentication: proving who a user is (e.g. login)
// 26. Authorisation: deciding what that user may do
// 27. Cookie: small data the browser stores and sends back
// npm install express cookie-parser
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();
app.use(cookieParser());

app.post('/login', (req, res) => {
  // authentication would check a password here
  res.cookie('session', 'abc123', { httpOnly: true, sameSite: 'lax' });
  res.json({ loggedIn: true });
});

app.get('/admin', (req, res) => {
  const isAdmin = false;               // authorisation check
  if (!isAdmin) return res.status(403).json({ error: 'forbidden' });
  res.json({ secret: 'admin data' });
});

app.listen(3000);

// 28. CORS: browser rule controlling which sites can call your API
// 29. Environment variable: config stored outside code
// 30. Middleware: function that runs before route handlers
// npm install express cors
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({ origin: 'https://myfrontend.example.com' }));   // 28
const PORT = process.env.PORT || 3000;                           // 29

app.use((req, res, next) => {                                    // 30
  console.log(req.method, req.url);
  next();
});

app.get('/api/health', (req, res) => res.json({ status: 'ok' }));
app.listen(PORT, () => console.log('listening on', PORT));

31. Git          Tracks changes to code over time
32. Repository   A project's folder of files and history
33. Commit       A saved snapshot of changes with a message
34. Branch       A separate line of work, merged later
35. Pull request A request to review and merge a branch
36. Linter       Tool that flags style and bug-prone code
37. Bundler      Tool that combines and optimises files (e.g. Vite)

38. Hosting      A service that serves your site on the internet
39. Domain       The human-readable address, e.g. example.com
40. DNS          System that turns domains into IP addresses
41. HTTPS / TLS  Encrypted connection shown by the padlock
42. CDN          Network that copies files close to users
43. Caching      Storing responses so they load faster next time
44. Lazy loading Loading images or code only when needed

45. Responsive design     Layout adapts to phone, tablet, desktop
46. Accessibility (a11y)  Usable by people with disabilities
47. SEO                   Making pages easy for search engines to understand
48. Cross-browser testing Checking pages in different browsers
49. Unit test             Automated test for a small piece of code
50. SSR                   Server-side rendering: HTML built on the server