Courtney Yatteau

Posted on Dec 28, 2022 • Edited on Jan 5, 2023

Code 👨‍💻 on your Phone 📱 with these 4 Mobile Apps

#webdev #javascript #mobile #html

Web Development Editors with Page Previews!

It may not seem feasible, but coding websites on your phone is not only possible, it’s also enjoyable. Below I’ve listed four mobile apps (some Android exclusive) that allow you to use the basics of HTML, CSS, and JavaScript to code and preview your site while out and about on your mobile device. So get ready to take your web development skills on the road, at a restaurant, and anywhere else you happen to go.

youtube.com

Spck Code Editor
Dcoder Code Compiler
anWriter HTML Editor
TrebEdit Mobile HTML Editor

Spck Code Editor

On Android and iOS

Spck is a fantastic smartphone code editor for HTML, CSS, and JavaScript. The app allows you to write and preview your code in seconds. The app also comes with Git client integration, allowing you to clone, commit, pull, push, etc., from Github, Gitlab, Bitbucket, and more. While the main languages supported in the app are the prominent web development stack listed above, there is intelligent code-hinting support for TypeScript, JavaScript, TSX, JSX, CSS, Less, and SCSS.

Dcoder Code Compiler

On Android and iOS

Dcoder is a great mobile app choice for your developer projects. Not only does it support HTML, CSS, and JavaScript, but it also has support for two JavaScript frameworks, React and Angular. Dcoder supports over 30 languages, including Java, C++, Python, and more. Like with Spck, Dcoder comes with Git client integration, allowing you to leverage the power of coding in multiple locations on multiple devices.

anWriter HTML Editor

On Android

The app anWriter is an excellent and lightweight option for writing HTML, CSS, and JavaScript code. It takes up less than half the storage space of all the other apps in this list. The app also supports LaTex, PHP, and SQL. Like the other apps mentioned, anWriter allows you to preview the results of your code and will be sure to alert you to errors in its console.

TrebEdit Mobile HTML Editor

On Android

TrebEdit is an excellent way to create your web development projects on your phone while keeping things organized. You can write and share projects in HTML, CSS, and JavaScript. The app's UI experience is visually pleasing and easy to understand. The app also allows users to look up and use the source code of any URL. A final selling point for TrebEdit is the integrated W3Schools learning capability.

Summary

Whether you’re a seasoned developer or a coding noob, these mobile apps will ensure you’re never without the ability to code. Happy coding! 👩‍💻

Courtney Yatteau, a Developer Advocate at Esri, wrote this article. The opinions in this article are solely Courtney’s opinions and do not necessarily represent the postings, strategies, or opinions of her employer. If you have any feedback, please like and/or comment. Also, you can contact Courtney through Twitter if you have any questions or comments that you’d prefer to send privately.

Top comments (15)

Sebastian Fritsch • Dec 28 '22

Why not using VSCode instead? Remote Tunnel with VSCode

omega • Oct 30

Is there vscode for phone?

Sebastian Fritsch • Oct 30

Not like shown in the gif of this post but, it is possible yes: github.com/coder/code-server

Ansari Husnain • Oct 7

Here's a simplified HTML code for the form:

<!DOCTYPE html>
<html>
<head>
    <title>Cricket Fan Registration</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Cricket Fan Registration</h1>
    <h2>Join the Cricket Community</h2>
    <h3>Register Now!</h3>
    <hr>

    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>

        <label for="address">Address:</label>
        <input type="text" id="address" name="address"><br><br>

        <label for="contact">Contact Number:</label>
        <input type="number" id="contact" name="contact"><br><br>

        <h4>Favourite Cricketers:</h4>
        <input type="checkbox" id="sachin" name="cricketer"> Sachin Tendulkar<br>
        <input type="checkbox" id="virat" name="cricketer"> Virat Kohli<br>
        <input type="checkbox" id="msdhoni" name="cricketer"> MS Dhoni<br><br>

        <label for="feedback">Feedback/Comment:</label>
        <textarea id="feedback" name="feedback" rows="5" cols="30"></textarea><br><br>

        <button type="submit">Register</button>
    </form>
</body>
</html>

Explanation:

<!DOCTYPE html> declares the document type.
<html> is the root element.
<head> contains metadata.
<title> sets the page title.
<style> defines CSS styles.
<body> contains the page content.
<h1>, <h2>, <h3> define headings.
<hr> creates a horizontal line.
<form> defines the registration form.
<label> and <input> create form controls.
<textarea> creates a multi-line text input.
<button> creates the submit button.

Tips for 11th std students:

Use HTML5 semantic elements.
Style your form using CSS.
Add JavaScript validation for form inputs.
Learn server-side programming languages (e.g., PHP, Python) to handle form submissions.

Practice and experiment with different HTML elements and attributes to improve your skills!

Ethan • Dec 29 '22

Or the Replit mobile app

Espinosa coded • Jun 22

I’m a newbie,please can someone teach me how to get started
Or what to do to get started

Courtney Yatteau • Jun 25

Try downloading one of the apps and play around with it. Then please let me know if you have any specific questions I can help you with! 😃

Espinosa coded • Jun 26

I have downloaded CodeSnack IDE, Mimo and code editor, but I’m want to start using CodeSnack IDE first then I will ask you questions when I need your help
Thanks for the reply I appreciate

Mohammed Hzayed • Oct 29

If you found someone please help me

Angel Quijada Soto • May 1

Thanks, I like Decoder code compiler cause it works with phyton.

MarcusAurelius • Dec 30 '22

We'd be better off with a drag / drop interface on the phone than typing like on a computer / keyboard or at a mix of typing , drag/drop and scroll wheel to keep engaged.

Typing code with my thumbs. . . .I can already FEEL that experience in my mind and let me tell you something : How DARE you.

My brain is LITERALLY offended at the prospect of this.

Shame on you. xD