Skip to content

Exam 1: Preparation

Important

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 resources below to review and practice further.

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)
  • Given an image of a flexbox layout, identify the properties or values required to produce that layout
    • Flexbox layout: align-items, justify-content, flex-direction
  • Identify and use the correct values for the separate dimensions of the flexbox layout
    • align-items: flex-start, flex-end, center, stretch
    • justify-content: flex-start, flex-end, center, space-between, space-start

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
7.1–7.2 Layout, Flexbox
8.2–8.7, 8.8.1 JavaScript Basics
9.1–9.2 DOM Manipulation

Tasks from Labs 1–5

  • Lab 1 – URLs and file paths
  • Lab 2 – HTML and JS basics
  • Lab 3 – JS objects, arrays
  • Lab 4 – CSS basics, spacing
  • Lab 5 – Flexbox, @media

Live Editor Exercises

Alternative Readings