HTML, CSS, and JavaScript: a complete web from scratch

Three layers, three jobs

HTML describes what things are. CSS controls how they look in different contexts. JavaScript reacts to events and changes data or interface.

• A button performs an action; an anchor navigates.
• Use Grid for two-dimensional composition and Flexbox for a row or column.
• Listen to events instead of embedding logic inline.

A component without a framework

The DOM already provides a basic component API. Model clarity matters more than the tool.

<button id="counter">Clicks: 0</button>
<script>
  let count = 0;
  const button = document.querySelector('#counter');
  button.addEventListener('click', () => {
    button.textContent = `Clicks: ${++count}`;
  });
</script>

Responsive from content

Prefer fluid sizes, max-width, and media queries where the content actually breaks. Do not design only for a list of devices.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}