Turn Your HTML and CSS Code into an iOS and Android App
By Appilix Software
July 28, 2026
Did You Know You Can Build a Mobile App with Just HTML and CSS?
Here's something most developers don't think about — you can actually ship a mobile app to the Play Store or App Store using just HTML and CSS. No Swift. No Kotlin. No React Native.
Sounds odd at first, but it makes complete sense once you think about it.
HTML and CSS are fast. You can put together a clean, good-looking webpage in a few hours. And a mobile app, at its core, just needs something to display. That something can be your webpage. You wrap it inside a mobile app using something called a WebView — it's basically a browser embedded inside an app — and that's it. Your webpage runs inside the app like it was always meant to be there.
This isn't a new trick either. Developers have been doing this for years, mostly for MVPs, internal tools, or simple apps where going fully native would've been overkill. The problem was always the setup — you still needed to know Android or iOS development just to get the wrapper working.
That's what this guide is about. We'll write a basic HTML and CSS webpage, host it on GitHub Pages so it has a real live URL, and then convert it into an actual mobile app — two ways. One gives you full control but takes more effort. The other gets it done in minutes.
Let's start from the beginning.
The process breaks down into three steps. First, we'll write a basic HTML and CSS webpage. Then we'll host it on GitHub Pages to get a live URL. And finally, we'll take that URL and turn it into a real mobile app you can publish to the Play Store or App Store.
We're not going to walk you through what HTML or CSS is — you already know that. What we're going to do is put together a simple, clean webpage that we'll use for the rest of this guide.
Here's a basic personal portfolio page. Nothing fancy, but it looks real and it's good enough to become an app. Here is our index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>John Doe — Developer</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>John Doe</h1>
<p>Full Stack Developer based in New York</p>
</header>
<section class="about">
<h2>About Me</h2>
<p>I build web apps and APIs. I love clean code, fast products, and shipping things that actually work.</p>
</section>
<section class="projects">
<h2>Projects</h2>
<div class="card">
<h3>Budget Tracker</h3>
<p>A simple app to track daily expenses. Built with vanilla JS and localStorage.</p>
</div>
<div class="card">
<h3>Weather Dashboard</h3>
<p>Fetches real-time weather data using the OpenWeather API.</p>
</div>
</section>
<footer>
<p>© 2025 John Doe</p>
</footer>
</body>
</html>And here's the CSS in style.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f5f5f5;
color: #333;
padding: 20px;
}
header {
background-color: #1E8A7A;
color: white;
padding: 40px 20px;
border-radius: 10px;
margin-bottom: 30px;
text-align: center;
}
header h1 {
font-size: 2rem;
margin-bottom: 8px;
}
header p {
font-size: 1rem;
opacity: 0.85;
}
.about, .projects {
background: white;
padding: 25px;
border-radius: 10px;
margin-bottom: 20px;
}
.about h2, .projects h2 {
font-size: 1.3rem;
margin-bottom: 12px;
color: #1E8A7A;
}
.card {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
margin-bottom: 12px;
}
.card h3 {
font-size: 1rem;
margin-bottom: 6px;
}
.card p {
font-size: 0.9rem;
color: #666;
}
footer {
text-align: center;
padding: 20px;
font-size: 0.85rem;
color: #999;
}Save both files in the same folder. Open index.html in your browser and you should have a clean, working webpage. That's your starting point.
Now let's put it online.
Now that the webpage is ready, we need to give it a public URL. The easiest way to do that for free is GitHub Pages. If you already have a GitHub account, this takes about five minutes.
Go to github.com and create a new repository. Give it a name — something like my-portfolio works fine. Set it to Public and hit Create repository.
If you're comfortable with the terminal, navigate to your project folder and run:
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/my-portfolio.git
git push -u origin mainReplace your-username with your actual GitHub username.
If you'd rather skip the terminal, GitHub Desktop is a great option. It's a free app that lets you push your files to GitHub with just a few clicks — no commands needed. Just open the app, add your project folder, write a commit message, and hit Publish repository.
Once your files are pushed, go to your repository on GitHub. Click on Settings, then scroll down to the Pages section in the left sidebar. Under Branch, select main and click Save.
GitHub will take a minute to build it. After that, your page will be live at:
https://your-username.github.io/my-portfolio/Open that URL in your browser. If your page loads correctly, you're good to go. That live URL is exactly what we'll use in the next step to create the mobile app.
This is where it all comes together. You have a live URL that loads in any browser. Now we need to wrap it inside a mobile app so it can be published to the Play Store or App Store.
There are two ways to do this. One requires some coding setup, the other gets it done in minutes without writing a single line of native code.
To build the app wrapper, we need a framework that can target both Android and iOS from a single codebase. Flutter does exactly that. You write the code once and build for both platforms without maintaining two separate projects.
There are other options — React Native being the most popular alternative — but Flutter is genuinely easier to get started with, especially for something as simple as wrapping a URL in a WebView. So for this guide, we're going with Flutter.
Flutter has a package called flutter_inappwebview that gives you a powerful, fully featured WebView with a lot more control than the basic alternatives. You can find the package and always grab the latest version from the official pub.dev page: flutter_inappwebview on pub.dev.
First, add it to your pubspec.yaml:
dependencies:
flutter:
sdk: flutter
flutter_inappwebview: ^6.1.5Then run:
flutter pub getNow here's what your main.dart looks like:
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: WebViewScreen(),
);
}
}
class WebViewScreen extends StatefulWidget {
const WebViewScreen({super.key});
@override
State<WebViewScreen> createState() => _WebViewScreenState();
}
class _WebViewScreenState extends State<WebViewScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: InAppWebView(
initialUrlRequest: URLRequest(
url: WebUri('https://your-username.github.io/my-portfolio/'),
),
initialSettings: InAppWebViewSettings(
javaScriptEnabled: true,
),
),
);
}
}Replace the URL with your actual GitHub Pages link and that's your app. Clean, simple, and it runs on both Android and iOS from the same codebase.
This is just the core of it though. From here you still need to handle app signing, build configuration, and store submission. If you want the full step-by-step walkthrough, we've covered all of that in detail here: https://appilix.com/articles/website-to-mobile-app-flutter.
If you just want your webpage live as a mobile app without dealing with Flutter, Xcode, or Android Studio, Appilix is the straightforward path.
Here's all you do:
No local development environment, no signing certificates to figure out upfront, no command line. Appilix handles the build process on the backend and hands you a ready-to-submit app file.
Pasting a URL and getting an app out is already useful on its own. But Appilix goes further than just wrapping your webpage. Once your app is set up, you get access to a set of native features that you can plug straight into your existing HTML and CSS project — no Flutter, no native code required.
Firebase Push Notifications
You can send push notifications directly to your users. Appilix integrates with Firebase so you can set up and send notifications right from the dashboard. Useful if your app needs to re-engage users or send updates.
Bottom Navigation Bar
You can add a native bottom navigation bar to your app and map each tab to a different URL or section of your website. It gives your app a proper native feel without touching a single line of Swift or Kotlin.
Navigation Drawer
On top of the bottom bar, you can also add a side navigation drawer — the slide-in menu that users are familiar with from most Android apps. Again, fully configurable from the Appilix dashboard.
JavaScript Bridge
This one is particularly useful for developers. The JavaScript Bridge lets your webpage communicate directly with native device features. That means from your existing HTML and CSS project, you can trigger native actions — like opening the camera, accessing device info, or handling custom events — just by calling JavaScript functions. No native code on your end.
These aren't afterthoughts. For a lot of use cases, they're exactly what makes the difference between something that feels like a wrapped webpage and something that actually feels like an app.
Building a mobile app with HTML and CSS is not a workaround. It's a legitimate approach that developers have been using for years, and the tooling around it has only gotten better.
If you enjoy the process and want full control over your app — how it's built, how it behaves, how it's signed and submitted — the Flutter route is worth the effort. You'll learn a lot along the way and end up with something you have complete ownership over.
But if your goal is simply to get your webpage in front of mobile users on the Play Store or App Store as quickly as possible, there's no reason to make it harder than it needs to be. Appilix handles the heavy lifting so you can focus on what actually matters — your product.
Either way, you now have everything you need to go from a folder of HTML and CSS files to a published mobile app. The path is clear. The only thing left is to actually ship it.
Yes, since your app loads content from a live URL, an active internet connection is required. If the user goes offline, the app won't be able to load the webpage. If offline support is important for your use case, you'd need to look into service workers or caching strategies on the web side before wrapping it into an app.
Yes, and this is actually one of the biggest advantages of this approach. Since the app just loads a URL, any changes you make to your webpage are reflected in the app instantly. Update your HTML, push to GitHub, and every user gets the updated version without you touching the app stores at all.
It depends on the content. Both stores have policies against apps that do nothing more than wrap a website with no added value. But if your app offers real, useful content or functionality, it will generally pass review. The key is making sure your app doesn't feel like a bare browser window — having proper navigation, a good icon, and a clear purpose goes a long way.
Absolutely. As long as your project builds to plain HTML, CSS, and JavaScript files and can be hosted on a public URL, it works exactly the same way. React, Vue, Svelte — it doesn't matter. The app just loads the URL.
GitHub Pages is just what we used in this guide because it's free and quick to set up. Any publicly accessible URL works — your own domain, Netlify, Vercel, or any other hosting provider. As long as the page loads in a browser, you can turn it into an app.
Appilix can help. Let's start!
