Real-World Coding

Create and run a three-file HTML, CSS, and JavaScript project in a browser-based coding workspace on an iPad.

Construct a valid HTML5 page using doctype, html, head, and body elements.

Mark up page content with headings, paragraphs, and lists.

Create working internal and external links with HTML anchor elements.

Add an image with meaningful alternative text to a web page.

Organize a page with semantic header, navigation, main, section, and footer elements.

Diagnose a broken web preview caused by an incorrect filename, path, or HTML tag.

Connect an external CSS stylesheet to an HTML page.

Target HTML elements with type and class selectors.

Apply readable colors, fonts, font sizes, and line spacing with CSS.

Calculate how content, padding, borders, and margins form the CSS box model.

Control element dimensions and spacing without causing content overflow.

Style hover, focus, and active states for an interactive link or button.

Recreate a simple content card from a visual reference using HTML and CSS.

Arrange page elements in a row or column with CSS Flexbox.

Create a two-dimensional page layout with CSS Grid.

Use percentages, rem, and viewport units to make dimensions flexible.

Adapt a layout at a chosen screen width with a CSS media query.

Make images scale within their containers without distortion.

Size links and buttons so they are comfortable to use by touch.

Test and correct a page at phone, tablet, and desktop viewport widths.

Run JavaScript in a web page and inspect output in a console.

Store and update program values appropriately with const and let.

Use strings, numbers, booleans, null, and undefined in small programs.

Calculate values with arithmetic operators and compare values with comparison operators.

Choose between alternative actions with if, else if, and else statements.

Define and call a function that accepts parameters and returns a value.

Locate and correct a JavaScript syntax or runtime error using its error message.

Create, access, update, and remove values in a JavaScript array.

Repeat an operation over an array with a for...of loop.

Find or filter array values using an appropriate array method.

Represent a real-world item with a JavaScript object and access its properties.

Read and update values in an array of objects.

Generate a random whole number within a specified range.

Schedule a delayed or repeating action with setTimeout or setInterval.

Select a page element with a DOM query.

Change an element’s text, attribute, or CSS class with JavaScript.

Respond to a click or touch-triggered event with an event listener.

Read values submitted through an HTML form.

Validate a required form value and display a useful error message.

Create, append, and remove page elements through the DOM.

Render an array of objects as a visible list on a web page.

Convert a short client-style website brief into a checklist of page requirements.

Sketch a simple mobile-first wireframe before writing code.

Implement a semantic responsive landing page from a wireframe.

Build accessible navigation that moves users to the correct page sections.

Create a contact form that displays clear success and error feedback.

Test a website’s links, layout, images, and form against a requirements checklist.

Publish a static website and open its public link on another device.

Create an HTML canvas and explain its coordinate system.

Draw and clear basic shapes on a canvas with JavaScript.

Animate a changing canvas scene with requestAnimationFrame.

Move a game object by updating its position and velocity.

Control a game object with keyboard and on-screen touch input.

Keep a moving object within the canvas boundaries.

Switch explicitly among start, playing, paused, and game-over states.

Detect a collision between two rectangular game objects.

Spawn an obstacle or collectible at a valid random position.

Update and display a score when a game event occurs.

Increase game difficulty gradually with speed or spawn timing.

Implement start, pause, restart, and game-over controls.

Save and restore a high score with localStorage.

Test and correct a game for both touch and keyboard play.

Convert between JavaScript objects and JSON text with stringify and parse.

Explain how asynchronous code prevents a page from freezing while waiting for data.

Request data from a public web API with fetch and await.

Check an HTTP response and handle an unsuccessful request.

Display distinct loading, empty, success, and error interface states.

Render selected fields from an API response into accessible HTML.

Filter displayed API results from a user’s search input.

Distinguish data safe for browser code from secret credentials that must not be embedded in it.

Define the state and data structure for a small list-based app.

Implement a form that adds a new item to application state.

Implement controls that edit and delete items from application state.

Serialize and save an array of objects in localStorage.

Restore saved application state when the page reloads.

Add a web app manifest with an app name, icons, and display settings.

Cache the app shell for offline use with a service worker.

Install and test the completed progressive web app from an iPad browser.

Define a small final product as an MVP using three concrete user stories.

Break an MVP feature into ordered coding tasks that each produce a testable change.

Create named project versions and restore an earlier working version when needed.

Diagnose a bug systematically by reproducing it, isolating its cause, and verifying the fix.

Correct common accessibility problems involving labels, keyboard focus, contrast, and alternative text.

Use v0 to prototype one visual component, then recreate the component with personally written HTML, CSS, and JavaScript.

Build a portfolio page that links to the completed website, browser game, and installable web app.

Publish the portfolio and revise one project in response to specific user feedback.