Tutorial
Full Web Development from Android: HTML, CSS and JavaScript
Create professional websites from your phone. Real-time preview, integrated DevTools and direct deploy with Pocket Code.
3 min
By Pocket Code Team
Full Web Development from Android
Pocket Code turns your Android device into a complete web development environment. Create, preview, and deploy websites without needing a PC.
Initial setup
Local development server
Pocket Code includes a local HTTP server that starts automatically:
# Starts when opening a web project
# Accessible at http://localhost:3000
pocket-server start --port 3000 --hot-reload
Creating a web project
- Tap New Project
- Select the Web App template
- Choose the framework (Vanilla, React, Vue, etc.)
- The project is generated with the full structure
Real-time preview
Split View
Split the screen between editor and preview:
- Vertical: Editor on top, preview below
- Horizontal: Editor left, preview right (tablets)
- Floating: Preview as a resizable floating window
Hot Reload
Changes are automatically reflected in the preview:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<style>
.hero {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: white;
}
.title {
font-size: clamp(2rem, 5vw, 4rem);
font-weight: bold;
}
</style>
</head>
<body>
<div class="hero">
<h1 class="title">Hello World!</h1>
</div>
</body>
</html>
Developer tools
Integrated DevTools
Pocket Code includes developer tools similar to Chrome DevTools:
- Elements: Inspect and edit the DOM
- Console: Execute JavaScript and view logs
- Network: Monitor HTTP requests
- Responsive: Test on different sizes
Responsive testing
Preview your site on different devices:
| Device | Width | Height |
|---|---|---|
| iPhone SE | 375px | 667px |
| iPhone 14 | 390px | 844px |
| iPad | 768px | 1024px |
| Desktop | 1920px | 1080px |
Supported frameworks
React
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div className="p-4">
<p className="text-2xl">{count}</p>
<button
onClick={() => setCount(count + 1)}
className="px-4 py-2 bg-blue-500 rounded"
>
Increment
</button>
</div>
);
}
Vue
<template>
<div class="p-4">
<p class="text-2xl">{{ count }}</p>
<button @click="count++" class="px-4 py-2 bg-green-500 rounded">
Increment
</button>
</div>
</template>
<script setup>
import { ref } from "vue";
const count = ref(0);
</script>
Vanilla + Tailwind
<div class="min-h-screen bg-gray-900 flex items-center justify-center">
<div class="bg-gray-800 rounded-xl p-8 shadow-2xl max-w-md w-full">
<h2 class="text-2xl font-bold text-white mb-4">Login</h2>
<input
type="email"
placeholder="Email"
class="w-full p-3 rounded-lg bg-gray-700 text-white mb-4"
/>
<input
type="password"
placeholder="Password"
class="w-full p-3 rounded-lg bg-gray-700 text-white mb-6"
/>
<button class="w-full p-3 bg-blue-600 rounded-lg text-white font-semibold">
Sign In
</button>
</div>
</div>
Direct deploy
Vercel
# Install CLI
npm install -g vercel
# Deploy
vercel --prod
Netlify
# Install CLI
npm install -g netlify-cli
# Deploy
netlify deploy --prod
GitHub Pages
# Configure in package.json
{
"scripts": {
"deploy": "gh-pages -d dist"
}
}
# Deploy
npm run deploy
Tips for mobile web development
- Use relative units:
rem,em,%,vw/vh - Mobile-first: Design for mobile first
- Tailwind CSS: Ideal for development on small screens
- Small components: Short and modular files
- Auto-save: Enable auto-save for continuous hot reload
With Pocket Code you can create complete websites from your Android. From a landing page to a complex web application, everything is possible from the palm of your hand.