Build the html structure for a draggable list app in Visual Studio Code, including an h1, a draggable ul, a check button, and Fontawesome icons, then run Live Server.

Style the app using CSS by importing a Google font, applying box-sizing, centering content with flexbox, and building visually polished, draggable list items with responsive colors, borders, and interactive states.

Implement drag and drop in a JavaScript app using the Drag and Drop API. Wire drag start, drag over, drop, drag enter, drag leave swap items and apply over class.

Build an analog clock app using HTML, CSS, and pure JavaScript, and learn clock-math basics, setInterval, date functions, style transforms, and linking HTML ids with JavaScript to animate the hands.

Explore building an analog clock with HTML, CSS, and JavaScript by rendering clock hands, applying a rotation formula, and updating every second with setInterval using new Date.

Build a JavaScript application named My Book List that uses object oriented classes and objects, local storage, DOM manipulation, and JSON to add, display, and delete books.

Learn to set up a JavaScript project in Visual Studio Code, organize files in a folder, and design a Bootstrap-powered heading with an open-book icon using Font Awesome.

Create and append table rows for books by building tr and td elements, filling them with title, author, and ISBN, and render the list with a dom content loaded listener.

Show how to display danger and success alerts when adding or removing books, auto dismiss via setTimeout after three seconds, remove alerts from the DOM, and enable local storage persistence.

Learn to implement a local storage store for a books app, adding, retrieving, and deleting books with JSON stringify/parse, and updating the UI to reflect changes.

Create a bootstrap-based HTML page with fontawesome icons to add, display, and remove books using a JavaScript class system (Book, UI, Store) and local storage.

Create a structured JavaScript project in Visual Studio Code for a music player, with folders Music Player, images, and songs, and the files index.html, styles.css, and script.js.

Update music playback by clicking the progress bar to seek, using event listeners and duration-based calculations to set current time, and support loop, shuffle, and playlist behaviors.

Create a JavaScript-powered music player by selecting all playlist items, extracting and displaying duration, toggling a playing state, and wiring click events to load and play a chosen track.

build a dictionary web app that searches words, shows meanings, pronunciation, and synonyms via a dictionary api, while mastering dom manipulation and async/await for api data.

Set up a folder-based dictionary app layout in Visual Studio Code with index.html, styles.css, and script.js, including a container, header, and enter key input handling.

Design and implement a dictionary feature by integrating the free dictionary API to fetch a word’s meaning, phonetics, and synonyms, and render a styled UI with HTML, CSS, and JavaScript.

Explore hands-on css techniques in designing the application part 2 to style inline blocks, meanings, synonyms, phonetics, and responsive layouts with media queries for mobile devices.

Fetch and select page elements with querySelector, then fetch word data from an API in JSON using async/await. Render the word, phonetics, audio, meaning, and synonyms in the result section.

Fetch word data from an API using async/await, parse JSON, and display the word, phonetics, pronunciation, meaning, and synonyms on page, revealing result section when a user submits a query.

Explore handling API corner cases in a dictionary app by testing endpoints with Postman, using status codes like 200 and 404, and displaying messages when results or synonyms are unavailable.

Learn to build a pure JavaScript to-do list app with add, edit, delete, and complete tasks, organized into all, to-do, and completed sections using DOM manipulation, localStorage, and ES6 features.

Enhance the to-do app by replacing actions with bootstrap icons via CDN, styling with CSS colors and font sizes, and wiring JavaScript to add items and save to local storage.

Link script.js to the HTML, fetch form, input, and list with querySelector, then on submit validate input and create a todo item with name, done=false, and added time.

Create a function to push new items into the to do items array, save them in local storage with JSON.stringify, and retrieve and render them with JSON.parse on load.

Build a snake game in pure JavaScript, using DOM manipulation, event listeners, and ES6 features to track score, high score, and random tile placement with arrow keys.

Apply arrow key input to drive snake movement, update direction and coordinates, and handle food consumption with random repositioning on the grid.

Implement a game over by detecting head-to-body or wall collisions using x and y coordinates on a 0–18 grid, triggering an alert and stopping the game, with high score tracking.

increment the score when the snake eats the food, regenerate the food, and update the high score as the game ends; display the score in a dedicated score box.

Update the high score by comparing the current score to the stored value, save the new high score in local storage with JSON.stringify, and update the HTML high score display.

Build and summarize a JavaScript snake game: inspect the 18x18 grid board, the score and high score elements, the food and snake visuals, and index.html, styles.css, and index.js integration.

Build a browser game with JavaScript that uses DOM manipulation, event listeners, and keyboard input to move a dragon, jump over a monster, score points, and trigger a game-over sound.

Determine collision between dragon obstacle and dinosaur using left and top offsets; trigger game over when offset x < 93 and offset y < 52.

Add right and left movement for the dinosaur by handling arrow keys to update its left position with a 112-pixel step, enabling jumping over the monster and avoiding collision.

Track and display the score as the dinosaur jumps over monsters, using a cross flag to increment only on crosses, and increase obstacle speed by adjusting animation duration.

Explain how the dragon game is built with index.html, script.js, and styles.css, using a background image and dinosaur and dragon assets. Demonstrate keyboard controls and game-over on collision.

Explore building a pure JavaScript quiz app with a dynamic DOM, score tracking, and a leaderboard. Learn DOM manipulation, event listeners, ES6 features, array methods, and modular file structure.

Students learn to scaffold a quiz app with multiple pages in Visual Studio Code, creating index.html, game.html, end.html, and high-score pages with linked CSS and JS.

Design home page buttons with the btn class: 2.4rem font, padding, width, center alignment; blue and yellow gradients, rounded corners, hover glow on the high-score button.

Design the quiz page using CSS. Style the body and choice container with flex, add hover effects and correct/incorrect gradients, and implement a HUD with a progress bar.

Learn to verify a user's quiz answer, handle click events, apply correct or incorrect feedback, update score, and load new questions in a JavaScript quiz app.

Fetch end-page elements and display the most recent score from local storage. Save new scores with usernames, sort descending, limit to five, and return to the home page.

Develop a high score leaderboard page using HTML, CSS, and JavaScript that fetches scores from local storage and dynamically displays the leaderboard for a portfolio-ready game.