HTML

Structure the page

HTML Forms

Inputs, textarea, select

HTML Structure

		Title
		

		Message
		

                    

CSS

Make it look nice

Theme Classes

.theme-blue {
  background: #dbeafe;
  border-color: #2563eb;
}

.theme-amber {
  background: #fef3c7;
  border-color: #d97706;
}
                    

JavaScript

Make it respond

Find Elements in the DOM

const titleInput = document.querySelector("#titleInput");
const messageInput = document.querySelector("#messageInput");
                    

Update the Preview

previewTitle.textContent = titleInput.value;
previewBody.textContent = messageInput.value;
                    

Listen for Events

titleInput.addEventListener("input", updatePreview);
colorSelect.addEventListener("change", updatePreview);
                    

Break

Stretch, grab water, and come back ready to build.

Would you rather...

• Have every website be perfectly designed, but all look identical
      or
• Have every website look different, but some are not as intuitive

Your Mission

Build an interactive message box.

Project Checklist

• Update title + message text
• Change box color from a dropdown
• Resize the box with a number input
• Test and refresh often

Sync your fork

• Go to GitHub and make sure you are logged in
• Navigate to your forked repository
• Click the Sync button
• Click "Update branch"
• Synchronize Changes in VS Code

Save Your Work

git add .
git commit -m "Complete message box"
git push
                    

Show and Tell

Who wants to share their message box?

Wrap-Up

What We Learned

• HTML inputs collect user info
• JavaScript updates the DOM
• Events make pages interactive
• CSS themes change the look

Coming Up Next

Game Engine Tools

Learn how to use free tools to build games