Web Development Topics — Quick Reference + Examples

A single HTML file that documents the requested topics and shows small, copy-pasteable code blocks.

What are HTML, CSS, and JavaScript?

HTML — structure and content of the page (elements like headings, paragraphs, lists, images).

CSS — styling: colors, layout, spacing, fonts.

JavaScript — behavior: interactivity, DOM manipulation, network calls.

Check a live demo showing the differences on CodePen: https://codepen.io/MDJAmin

Minimal example (HTML + CSS + JS)

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML, CSS, JS example</title>
  <style>
    body { font-family: sans-serif; }
    .btn { background:#2563eb; color:#fff; padding:8px 12px; border-radius:6px; border:none; }
  </style>
</head>
<body>
  <h1>Hello from HTML</h1>
  <button class="btn" id="clickMe">Click me (JS)</button>

  <script>
    document.getElementById('clickMe').addEventListener('click', function(){
      alert('This alert is powered by JavaScript');
    });
  </script>
</body>
</html>

Web Development Learning Map — Front-end & Back-end

Front-end

  • HTML, CSS, JavaScript
  • Frameworks: React, Vue, Svelte, Angular
  • Tooling: bundlers (Vite, webpack), package managers, testing, accessibility

Back-end

  • Languages: Node.js (JavaScript), Python, Ruby, PHP, Java, Go
  • Databases: PostgreSQL, MySQL, MongoDB
  • APIs, authentication, servers, deployment

Install Code Editor

Recommended: Visual Studio Code (VS Code). Set a color theme and enable auto save.

Auto save & color theme (settings)

// Add to your <code>settings.json</code> in VS Code:
{
  "workbench.colorTheme": "Default Dark+",
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

Extensions

Essential:

- Prettier - Code formatter
- HTML Boilerplate
- HTML CSS Support
- Live Server

Optional:

- Material Icon Theme
- vscode-pets
- Code Spell Checker
- Color Highlight
- Image preview
- Auto Rename Tag

Default formatter & format on save

// put this in settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Basic concepts of Website and Browser

A website is a collection of files (HTML, CSS, JS, images) served by a web server. The browser (Chrome, Firefox, Safari) requests those files, parses HTML into the DOM, applies CSS, and executes JS.

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document title</title>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

Working with Texts

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
...
<h6>Heading 6</h6>

Paragraphs, line break, horizontal rule

<p>This is paragraph text.</p>
<br /> <!-- line break -->
<hr /> <!-- horizontal rule -->

Text Formatting

<b>Bold (b)</b>
<strong>Strong (strong)</strong>
<i>Italic (i)</i>
<em>Emphasis (em)</em>

Note: <strong> and <em> are semantic. Use them for accessibility/SEO; <b> and <i> are presentational.

Special Text Tags

<mark>Highlighted text</mark>
<ins>Inserted / underlined text</ins>
<sub>H₂O (subscript)</sub>
<sup>x² (superscript)</sup>
<abbr title="HyperText Markup Language">HTML</abbr>
<address>
  Example Corp.
  <br>123 Example Lane
</address>
<cite>— Title of a work</cite>

What is an attribute?

An attribute adds extra information to an element. Example: <a href="https://example.com" target="_blank">link</a>. Here href and target are attributes.

Comments

<!-- This is an HTML comment -->