Skip to content

Exam 1

The learning objectives are statements of what you should be able to do at this point in the course. If you are unsure about any of these topics, use the course resources to review and practice further.

Learning Objectives

HTML Fundamentals

  • Distinguish between an absolute path, a relative path, and a URL, as well as how they are used in HTML
  • 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, for, required, placeholder
  • 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 Fundamentals

  • 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
  • Determine which element(s) would be affected by a CSS rule that uses group, combined, child, or descendent selectors
  • Distinguish standard CSS value units for sizes (em, rem, %)
  • Identify the components of the CSS box model
  • Write syntactically valid CSS rules for the following purposes
    • Formatting and position: background, color, display
    • Box model and spacing: margin, border, padding, width, height
  • Explain the purpose of the inline-block CSS display value
  • 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 ] })
    • Define and use functions that return a single value
  • Evaluate equality tests using both == and ===
  • Use basic control structures for conditions (if/else) and loops (for/while)
    • Know when to use for(const x in o) vs. for(const x of o)
  • Evaluate the result of an operation that uses type coercion (e.g., concatenating a string and number)
  • Use the document.write() method to add arbitrary HTML content to the DOM
  • Explain the difference between innerHTML, innerText, and textContent
  • Use built-in functions (splice(), slice(), pop(), shift(), push(), unshift()) to access and modify arrays
  • Use built-in functions (charAt(), split(), substring()) to access and modify strings

JavaScript Functions

  • Create named functions that take parameters and return a value
  • Declare and determine the values of variables based on scope (lexical vs. global)
    • Use both let and const as appropriate
    • Understand why var is not advised for variable declaration
  • Create a variable that stores a function defined using anonymous syntax
    • Example: let f = function(x) { return x + 1; }
  • Distinguish function definition from immediate execution
    • Example: f from above vs. let g = (function(x) { return x + 1; })(5);
  • Create self-executing anonymous functions (typically for initialization)
    • Example: (function() { ... })();
  • Create and predict the behavior of arrow functions with and without optional syntax
    • Example: let x = (s) => { return 'hello ' + s; };
    • Example (omitting optional syntax): let x = s => 'hello ' + s;
  • Create and use object functions
    • Use the this keyword to access the object
    • Understand when the this keyword is bound to an object and when it is not

DOM Manipulation and Events

  • 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');
  • Access and modify fields within an object
    • Example: console.log(obj.x + obj['x']);
  • Set common HTML element attributes (href, src, alt, id, etc.) using DOM dot notation
    • Example: a.href = 'other.html';
    • Example: a.attributes['data-bs-toggle'].value = 'collapse';
  • Modify an object’s classList using add, remove, and toggle
    • Example: img.classList.add('py-0');
  • Redirect a window to a separate page
    • Example: location.href = 'other.html';
  • Use DOM methods to add or remove children from an HTML node
    • Example: list.append(newItem);
  • Add a click event listener to an HTML element
    • Example: button.addEventListener('click', () => alert('clicked'));
  • Explain the behavior of preventDefault() and stopPropagation() on events
  • Evaluate the effect of event listeners defined for the capture, target, and bubbling phases of propagation