You’re about to make an app.
No coding experience needed. You’re going to follow a few simple instructions, make changes, and watch your app come alive in the browser.
index.html file you can double-click and play.Make a folder on your Desktop.
Open a plain-text editor.
Open Notepad.
Open TextEdit.
Copy this entire block.
Then paste it into Notepad or TextEdit.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Emoji Party</title>
<style>
body {
margin: 0;
min-height: 100vh;
font-family: Arial, Helvetica, sans-serif;
background: #5b3df5;
color: white;
display: grid;
place-items: center;
text-align: center;
}
</style>
</head>
<body>
<h1>My Emoji Party</h1>
</body>
</html>
Save it as index.html.
2. Open your MY FIRST APP folder
3. File name: index.html
4. Save as type: All files
5. Click Save
2. Open your MY FIRST APP folder
3. Save As: index.html
4. If TextEdit asks about using .html, choose Use .html
Double-click index.html.
Your browser should open and show this:
My Emoji Party
Put your name on the app.
Go back to your text editor. Find:
<h1>My Emoji Party</h1>
Change only the words between <h1> and </h1>.
Save the file. Return to your browser. Refresh.
Pick your app’s background color.
Find this line:
background: #5b3df5;
Replace #5b3df5 with one of these:
Save → Refresh.
Replace your code with the party version.
This is the largest copy-and-paste step. Select everything in your text editor, delete it, then paste this version in its place.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Emoji Party</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(135deg, #5b3df5, #9c4dff);
color: white;
display: grid;
place-items: center;
padding: 24px;
}
.app {
width: min(900px, 100%);
text-align: center;
}
h1 {
margin: 0 0 18px;
font-size: clamp(2rem, 6vw, 4.5rem);
}
.controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 18px;
}
button {
border: 0;
border-radius: 999px;
padding: 14px 20px;
font-size: 1rem;
font-weight: 800;
cursor: pointer;
background: white;
color: #241552;
box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
button:active { transform: translateY(2px); }
.play-space {
position: relative;
height: min(58vh, 520px);
min-height: 340px;
overflow: hidden;
border: 4px solid rgba(255,255,255,.8);
border-radius: 28px;
background: rgba(15,10,50,.25);
box-shadow: inset 0 0 50px rgba(255,255,255,.08);
}
.emoji {
position: absolute;
font-size: clamp(2rem, 6vw, 4rem);
animation: floatUp 2.4s ease-out forwards;
user-select: none;
pointer-events: none;
}
@keyframes floatUp {
from { transform: translateY(50px) scale(.65) rotate(-10deg); opacity: 0; }
20% { opacity: 1; }
to { transform: translateY(-360px) scale(1.15) rotate(12deg); opacity: 0; }
}
.hint {
margin-top: 14px;
opacity: .85;
font-size: .95rem;
}
</style>
</head>
<body>
<main class="app">
<h1>My Emoji Party</h1>
<div class="controls">
<button onclick="party('🎈')">🎈 Balloon</button>
<button onclick="party('🫧')">🫧 Bubble</button>
<button onclick="party('✨')">✨ Spark</button>
<button onclick="party('🐸')">🐸 Frog</button>
</div>
<div id="playSpace" class="play-space"></div>
<div class="hint">Press a button. Make a mess. 😄</div>
</main>
<script>
const PARTY_COUNT = 14;
function beep() {
const AudioContext = window.AudioContext || window.webkitAudioContext;
if (!AudioContext) return;
const ctx = new AudioContext();
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.type = "sine";
osc.frequency.value = 520;
gain.gain.setValueAtTime(0.06, ctx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.18);
osc.connect(gain);
gain.connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 0.18);
}
function party(symbol) {
const space = document.getElementById("playSpace");
beep();
for (let i = 0; i < PARTY_COUNT; i++) {
const item = document.createElement("div");
item.className = "emoji";
item.textContent = symbol;
item.style.left = Math.random() * 90 + "%";
item.style.bottom = (-10 + Math.random() * 70) + "px";
item.style.animationDelay = (Math.random() * 0.35) + "s";
item.style.animationDuration = (1.8 + Math.random() * 1.4) + "s";
space.appendChild(item);
setTimeout(() => item.remove(), 3500);
}
}
</script>
</body>
</html>
Save → Refresh.
Press the 🎈 Balloon button.
Don’t edit anything. Just press it.
Emoji should fly through your play space.
Change one of the emoji.
Find a button like this:
<button onclick="party('🐸')">🐸 Frog</button>Swap both frogs for another emoji. You can also change the word Frog.
Windows: Press the Windows key + . (period) to open the emoji picker. Choose any emoji you like.
Mac: Press Control + Command + Space to open the emoji picker. Choose any emoji you like.
Save → Refresh → Press your new button.
Make a bigger emoji explosion.
Find:
const PARTY_COUNT = 14;
Change 14 to 30.
Save → Refresh → Press a button.
Turn your volume up a little.
Now press one of your buttons again.
Your app creates its own tiny sound in the browser. No audio file was downloaded.
You made an app.
It has your title, your choices, buttons, animation, sound, and behavior.
You didn’t need an account. You didn’t need to install a coding program. And the app is yours to keep.
You followed instructions and made something real.
Want to understand what was actually happening underneath all those changes?
Prototype 0.1 ends here. These will become real calls to action in the public version.