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.

Cheatsheet

You can bring 1 double-sided 8.5”x11” piece of paper into the exam. This piece of paper can have information on it to serve as a memory aid.

Practice Exam

Learning Objectives

HTML Fundamentals

  • Distinguish between an absolute path, a relative path, and a URL, as well as how they are used in HTML
  • Classify standard HTML elements as block or inline
  • 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
  • Identify and describe the four key Web Content Accessibility Guidelines (WCAG) principles
    • Perceivable, Operable, Usable, Robust
  • Create forms using HTML form elements and attributes:
    • <form>, <input>, <textarea>, <button>, <select>, <option>
    • Attributes: action, method, name, id, value, placeholder, required
  • Explain the purpose and usage of the label element in forms

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 element(s) would be affected by a CSS rule that uses group, combined, child, or descendent selectors
  • Distinguish standard CSS value units for sizes (px, em, rem, %)
  • Identify the components of the CSS box model
  • Write syntactically valid CSS rules for at least the following purposes
    • Formatting and position: background, color, font
    • 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)
  • Distinguish CSS pseudoelements for various purposes
    • ::before, ::after, ::first-letter, ::first-line
  • Write CSS to style tables and forms

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)
  • Explain the difference between value 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; }
  • 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
  • Access the value of form elements using DOM methods
    • Example: let x = input.value;
  • Modify the value of form elements using DOM methods
  • Use FormData to collect and manipulate form data