DEV Community

Cover image for Code πŸ‘¨β€πŸ’» on your Phone πŸ“± with these 4 Mobile Apps
Courtney Yatteau
Courtney Yatteau

Posted on • Updated on

Code πŸ‘¨β€πŸ’» on your Phone πŸ“± with these 4 Mobile Apps

Web Development Editors with Page Previews!

Image description

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.

Table of Contents

Spck Code Editor

On Android and iOS

Image description

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

Image description

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

Image description

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

Image description

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! πŸ‘©β€πŸ’»

Image description

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 (12)

Collapse
 
sfritsch09 profile image
Sebastian Fritsch

Why not using VSCode instead? Remote Tunnel with VSCode

Collapse
 
j1omega profile image
omega

Is there vscode for phone?

Collapse
 
sfritsch09 profile image
Sebastian Fritsch

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

Collapse
 
ansari_husnain_957fc74f7f profile image
Ansari Husnain

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>
Enter fullscreen mode Exit fullscreen mode

Explanation:

  1. <!DOCTYPE html> declares the document type.
  2. <html> is the root element.
  3. <head> contains metadata.
  4. <title> sets the page title.
  5. <style> defines CSS styles.
  6. <body> contains the page content.
  7. <h1>, <h2>, <h3> define headings.
  8. <hr> creates a horizontal line.
  9. <form> defines the registration form.
  10. <label> and <input> create form controls.
  11. <textarea> creates a multi-line text input.
  12. <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!

Collapse
 
not-ethan profile image
Ethan
Collapse
 
espinosa_coded_4a2dba8d55 profile image
Espinosa coded

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

Collapse
 
c_yatteau profile image
Courtney Yatteau

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! πŸ˜ƒ

Collapse
 
espinosa_coded_4a2dba8d55 profile image
Espinosa coded

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

Collapse
 
zayed profile image
Mohammed Hzayed

If you found someone please help me

Collapse
 
nogalitos13 profile image
Angel Quijada Soto

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

Collapse
 
darth_guappi profile image
MarcusAurelius

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

Collapse
 
pra3t0r5 profile image
Pra3t0r5

Acode with Termux ideal if you don't want to depend in any external appliance