Tutorial 1: HTML, CSS, JavaScript, and the DOM

Unit 2 · Client-side web applications

Objectives

HTML communicates structure and meaning; CSS controls presentation; JavaScript adds behavior. Prefer a real button for an action, a label for an input, and headings that describe document hierarchy.

<button id="load" type="button">Load courses</button>
<ul id="courses" aria-live="polite"></ul>
<script type="module">
const button = document.querySelector('#load');
button.addEventListener('click', () => {
  document.querySelector('#courses').textContent = 'Loading...';
});
</script>

Use event listeners rather than inline handlers. Keep DOM updates small and clear. Progressive enhancement means the basic document remains understandable even if a script fails.

Exercises

  1. Build a semantic course card with a heading, description, and link.
  2. Add keyboard-accessible expand/collapse behavior.
  3. Use CSS grid to make cards responsive without fixed widths.

Self-check

  1. What role does semantic HTML play?
  2. Why use a button instead of a clickable div?
  3. What does aria-live communicate?

Self-Check Quiz

1. Which layer describes document meaning?

AnswerHTML describes structure and semantics; CSS and JavaScript serve presentation and behavior.

2. What event should a keyboard user be able to trigger?

AnswerA real button is focusable and activates from keyboard input without custom key handling.

Homework

  1. Create an accessible, responsive course listing page.
  2. Test it at narrow width and with keyboard-only navigation.
  3. Record one progressive-enhancement fallback.
Sample answer

A good answer uses headings, lists, links or buttons according to action, visible focus, readable contrast, responsive grid tracks, and a fallback document that still lists course names if JavaScript does not run.

👤