Build Your First App

Learn to create a complete web application using modern development practices.

🛠 Setup 💡 Code
Setup Code Run

Get Started

1. Project Structure


/project
├── index.html
├── style.css
├── app.js
└── assets/

2. Initialize Project


# Create project directory
mkdir my-first-app
cd my-first-app

# Add basic files
touch index.html style.css app.js

App Development

HTML Structure

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World</h1>
    <script src="app.js"></script>
  </body>
</html>

JavaScript Interactivity

document.addEventListener('DOMContentLoaded', () => {
  const button = document.createElement('button');
  button.textContent = 'Click Me';
  document.body.appendChild(button);
  button.addEventListener('click', () => alert('Hello!'));
});

Run and Test

Start Local Server

# Using Python
python -m http.server

Open http://localhost:8000 in your browser

Testing

Unit Tests

Use Jest or Mocha for automated testing

Manual Testing

Test all UI interactions and edge cases

Next Steps

Ready to expand your skills? Check out our advanced tutorials!

Advanced Tutorials