Exam 01: Preparation

This exam will be on paper, and must be taken in-person.
Categories:

  4 minute read  

Learning Objectives

HTML and Web Fundamentals

  • Identify the main components of a URL (scheme, domain, path, query, fragment) and explain the purpose of each
  • Summarize the steps involved in requesting and displaying a web page (including issuing DNS queries, parsing HTML and CSS files, retrieving images, and rendering the page)
  • Distinguish between an absolute path, a relative path, and a URL, as well as how they are used in HTML
  • Determine an absolute or relative path given the location of a file in the file system and the root directory of the web server
  • Identify the HTML elements that are required for validation
  • Classify standard HTML elements as block or inline (default display)
  • Write syntactically valid HTML code for standard, empty, and nested elements:
    • Block-based elements: <p>, <ul>, <ol>, <li>, <div>, <h1>…<h6>
    • Table elements: <table>, <thead>, <tbody>, <th>, <td>, <tr>
    • Inline elements: <span>, <em>, <strong>, <a>
    • Metadata elements: <meta>, <title>, <head>, <link>
    • Multimedia elements: <img>
    • Semantic structure elements: <body>, <main>, <nav>, <header>, <footer>, <section>
    • Spacing elements: <br>, <hr>
  • Use and explain the purpose of HTML entities:
    • &nbsp; (nonbreakable space), &lt; (< symbol), &gt; (> symbol), &amp; (& symbol)
  • Use and describe the purpose of universal HTML attributes:
    • id, class, style
  • Use non-universal HTML attributes for elements as appropriate:
    • src, alt, href, type
  • Use and describe the purpose of WAI-ARIA attributes:
    • aria-disabled, aria-hidden, aria-label, aria-required, role
  • Identify and describe the four key Web Content Accessibility Guidelines (WCAG) principles
    • Perceivable, Operable, Usable, Robust

CSS Presentation and Layout

  • Distinguish basic CSS selector types (element, class, id) and how they are used with HTML
  • Determine which CSS property value would apply based on specificity rules and inheritance
    • Determine which CSS rule would apply (according to specificity) when there are conflicts
  • Distinguish standard CSS value units for sizes (em, rem, %, vw, vh)
  • Write syntactically valid CSS rules for the following purposes
    • Formatting and position: background, color, display, position, top, left, z-index
    • Box model and spacing: margin, border, padding, width, height
  • Determine which element(s) would be affected by a CSS rule that uses group, combined, child, descendent, adjacent sibling, general sibling or attribute selectors
  • Explain the purpose of the inline-block CSS display value
  • Distinguish static, absolute, fixed, and relative position in CSS
  • Identify the components of the CSS box model
  • Distinguish CSS pseudoclasses for various purposes
    • Link states: :link, :visited, :hover, :active
    • Parental ordering: :first-child, :last-child, :only-child, :nth-child(n)

JavaScript Basics

  • Identify basic JavaScript types
    • Number, String, Boolean, Object, null, undefined
  • Write syntactically valid JavaScript for the following actions:
    • Declare, initialize, and modify the values of basic types including arrays and objects
    • Access and modify the values of nested objects (Example: { 'a': [ 1, 2, 3 ] })
    • Create loops using multiple structures, including while, for-in, and for-of
    • Define and use functions that return a single value
  • Predict the output of JavaScript code that uses type coercion and both equality operators
  • Use the document.write() method to add arbitrary HTML content to the DOM
  • Explain the difference between innerHTML, innerText, and textContent
  • Access HTML elements with DOM methods
    • Example: let it = document.querySelector('#item');
    • Example: let it = getElementById('item');
  • Use DOM methods to create new HTML elements
    • Example: let newItem = document.createElement('li');
  • Set HTML element attributes using DOM dot notation
    • Example: a.href = 'other.html';
  • Modify an object’s classList using add, remove, and toggle
    • Example: img.classList.add('py-0', 'm-0');
  • Use DOM methods to add or remove children from an HTML node
    • Example: list.append(newItem);

Study Resources

Reading from Preps 1–5

Sections Topics
1.3, 2.3–2.5 HTTP, URLs
3.2–3.6 HTML Basics
4.1–4.7, 4.8.2 CSS Basics
5.1, 5.3–5.4 Tables & Forms
8.2–8.7, 8.8.1 JavaScript Basics
9.1–9.2 DOM Manipulation

Tasks from Labs 1–5

  • lab 01 – URLs and file paths
  • lab 02 – HTML and JS basics
  • lab 03 – JS objects, arrays
  • lab 04 – CSS basics, spacing

Live Editor Exercises

Alternative Readings

Last modified October 15, 2025: updates from brief sync-up (91b2c39)