How to code HTML, CSS and JavaScript on iPad and iPhone

What you need to code on iPad

Web pages are plain text files. A browser reads index.html, follows the links to style.css and script.js and puts it all together. So on an iPad you need three things: an editor that handles several files, a preview that shows the result, and a console that shows what your JavaScript is doing.

Code Editor covers all three in one app: it shows your HTML page as you type – below the code on iPhone, next to it on iPad – and loads CSS, JavaScript and images from the project just like a real web server would. It works without an account and without internet.

Set up a project folder

Keep each website in its own folder. A typical small project looks like this, with index.html as the entry point that browsers and web hosts open first.

• index.html – the structure and content of the page
• style.css – colors, fonts and layout
• script.js – behavior, such as reacting to taps
• images/ – a subfolder for pictures you reference with relative paths like images/logo.png

The example page: index.html

Here is a tiny tap counter. The viewport meta tag matters on phones: without it, mobile browsers render the page at desktop width and zoom out. The script tag sits at the end of the body so the button already exists when the script runs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tap counter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Tap counter</h1>
  <button id="tap">Tap me</button>
  <p id="count">0 taps</p>
  <script src="script.js"></script>
</body>
</html>

The style sheet: style.css

The CSS centers everything, gives the button a comfortable touch size and switches to dark colors when the device is in dark mode.

body {
  font-family: system-ui, sans-serif;
  text-align: center;
  padding: 2rem;
}

button {
  font-size: 1.25rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  background: #2563eb;
  color: white;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}

The script: script.js

The JavaScript finds the button and the paragraph by their id, counts each tap and writes the result back into the page. The console.log line is for you, not the visitor: it shows each tap in the console so you can see the code running.

const button = document.getElementById("tap");
const label = document.getElementById("count");
let taps = 0;

button.addEventListener("click", () => {
  taps += 1;
  label.textContent = taps === 1 ? "1 tap" : `${taps} taps`;
  console.log("Taps:", taps);
});

A live preview workflow

Coding on a touch screen works best in small steps. Change one thing, look at the preview, then move on. In Code Editor the preview updates while you type, and a style sheet shows the page it styles, so you can tweak a color in style.css and watch the button change. One tap opens the preview in full screen.

When something doesn't work, look at the console before you change more code. Code Editor shows console.log output, warnings and errors with their line number right below the preview; tapping an error jumps to that line.

• Write the HTML structure first and check that every element appears.
• Add CSS rule by rule and watch the preview.
• Add JavaScript last and log values with console.log while you build.
• Remove debug logs once everything works.

Typing code on a touch keyboard

The on-screen keyboard hides many characters that code needs, such as angle brackets, braces and the Tab key. An editor with an extra key row saves a lot of switching. Code Editor has a bar above the keyboard with Tab, symbols and building blocks, suggestions as you type for HTML, CSS and JavaScript, and it closes brackets, quotes and HTML tags by itself. With a hardware keyboard on iPad, keyboard shortcuts work too.

Testing your page on mobile

Since you are building on a mobile device, you test on one at the same time. Still, check a few things on purpose before you publish.

• Rotate the iPad or iPhone and check that the layout still fits without sideways scrolling.
• Make buttons and links large enough to tap – around 44 points is a good minimum.
• Switch the system to dark mode if your CSS supports it.
• Use relative paths (style.css, images/logo.png) so the page works the same after upload.
• Once the site is online, open it in Safari and on other people's devices as well.