You don't need a computer or a desktop to start your coding journey. With an Android device and internet connection, you can start learning to code today! In this article, I'm going to tell you everything you need to know to code on your Android device.

Table Of Contents

• Introduction
• Disclaimer
• Code Editor
• Terminal
• Browser
• Dev Tool
• Desktop View
• Resources
• Too Long; Didn’t Read

Introduction

(Back to top)

Hi! I'm Vanza. I had coded on my Android device for about 6 months and now I'm going to share the tools that I used to code on my Android.

This is a long article. Let's get started!

Disclaimer

(Back to top)

This guideline is focused on front-end web development, although it is possible to do some other stuff, like Python, etc.

This guideline is going to cover the basic stuff of using certain tools. For further learning, I have provided the links to help you learn about the specific tool.

Also, keep in mind that coding on Android is only an alternative way to code.

First, let's discuss what code editor you should use.

Code Editor

(Back to top)

The first thing that you need to have is a code editor. This is the place where you can write or edit your code.

I have two recommendations. Both are free and amazing code editors. I have tried both code editors and each has pros and cons.

Let's get into the first code editor.

1. Acode (Recommended)

Acode is a freemium and open source code editor developed by foxdebug (a.k.a. Ajit Kumar - deadlyjack on GitHub).

It has a good rating on Google Play Store which is 4.4 stars for the free version and 4.5 stars for the paid version.

It has many features as described in the app description. But I want to mention some of my favorite features:

• Emmet, write HTML & CSS quickly
• Two font families (the default and fira code)
• Customizable
• Open multiple files and folders at once!

The things that I don't like are:

• The autocomplete for JavaScript is not smart (It doesn't like VS Code IntelliSense)
• You can't change the app color theme unless you buy the pro version
• Ads on the setting interface (checked on v1.6.0)

I recommend installing Acode from the F-Droid. It is the pro version of the Acode but free. If you install it from F-Droid, you can get all the premium features including no ads.

So, that's a brief overview of the app. It is a good code editor that I always used when I was coding on my Android.

2. Spck Editor

Spck Editor is a free and very powerful code editor for HTML, CSS, and JavaScript.

It has a good rating on Google Play Store which is 4.3 stars.

The stuff that I like about this code editor:

• 100% Free
• Emmet, write HTML & CSS quickly
• Git client integration (basic commands only)
• Customizable (dark & light themes, custom fonts, etc)
• It has smart IntelliSense like VS Code for the JavaScript
• Great built-in console (eruda)
• And much more!

But, it also has some limitations:

• You can't open multiple files (to work with) or folders (projects)
• Your local projects will disappear if you uninstall the app

For the second point of the limitations, if your phone is Android 10 or lower, you can prevent it by copying the io.spck folder to somewhere safe before uninstalling the app. But for Android 11, you can't do anything about it.

Access to files
You can no longer use the ACTION_OPEN_DOCUMENT_TREE or the ACTION_OPEN_DOCUMENT intent action to request that the user select individual files from the following directories:

• The Android/data/ directory and all subdirectories.
• The Android/obb/ directory and all subdirectories.

- From Android Developers page about "Storage updates in Android 11"

Meaning that you can't access the Android/data/io.spck.

The only way to save all your projects is to push each project to a GitHub repository.

So, Spck Editor offers a lot of awesome features but at the same time gives some limitations that I don't like.

Which one should I use?

I would recommend trying both of them and picking the one that makes you comfortable writing the code. For me, Acode is the answer.

Terminal

(Back to top)

Terminal or command line is a tool that allows you to do many tasks. You can create, modify, and delete file(s), and much more!

For terminal, Termux is the absolute best choice for me.

Now, let's dive into Termux!

Termux

What is Termux?

Termux is an Android terminal emulator and Linux environment application that works directly with no rooting or setup required.
- From the Termux Wiki main page

Here's why it is the best terminal for Android:

• 100% Free & Open Source!
• Easy to use, it gives you extra keys like arrow keys
• Install & update packages easily
• And much more!

Now, If you want to install Termux, install it from the F-Droid. Do not install it from Google Play Store, since it doesn't receive any updates anymore.

Next, I'm going to tell you how to set up Termux for web development.

Set Up Termux

I would recommend reading the Getting started - Termux Wiki page to get some basic knowledge about Termux. "Why?", because "Knowledge is power".

Now, open your Termux and follow the instructions below.

• First, copy-paste or type the command below

termux-setup-storage

• Second, Termux will be asking for storage permission, and you should grant the permission
• Third, you must update the packages that already exist on Termux. So, copy-paste or type the command below

pkg upgrade

• During the upgrade process, you might get asked two times or more, answer it with Y

*** motd (Y/I/N/O/D/Z) [default=N] ? Y

• After that, you should see a message that says, All packages are up to date . (on the Termux output)
• Now, it is recommended to install all the official packages from Termux. To do that copy-paste or type the below command.

pkg install game-repo && pkg install science-repo && pkg install root-repo && pkg install x11-repo

• Then, Termux will ask you a question and you can answer it with Y
• That's it! Now your Termux is ready to use!

The list of the official Termux packages is coming from the Termux Wiki page

Basic Commands

Here are the commands:

• cd : change directory/folder

~ $ cd storage/shared
~/storage/shared $

• mkdir : make directory/folder(s)

~/storage/shared $ mkdir test
~/storage/shared $

• ls : list all the files and folders except the files or folders that start with . (hidden files or folders). To list all the files and folders, type ls -a

~/storage/shared $ ls
Android    DCIM    
test       notes.txt

Note: Yours might be different, but you should see the test folder if you follow along.

• touch : create file(s)

~/storage/shared $ cd test
~/.../shared/test $ touch index.html style.css
~/.../shared/test $ ls
index.html    style.css
~/.../shared/test $ 

To learn more commands, you can visit the Linux Journey website.

Install Git

Git is free and open-source that is used to track your file history. It's an important tool for every developer.

Now to install Git, follow the instructions:

• First, type git in your Termux and execute it (tap Enter)
• Then, Termux should tell you that Git is not installed and tell you what command you should execute to get Git

The program git is not installed. Install it by executing:
  pkg install git

• The above step might be useful for you if you want to install new packages but don't know what command you should type
• That's it! After executing the pkg install git, you should have Git now.

To check that Git has been installed, you can type git --version. If it has been installed, Termux should tell what version your git is.

To set up your Git, you can watch this Youtube video.

Keep in mind, that you are using Termux which means you are typically a Linux user (not Mac or Windows user).

Install Vim

Vim is a free and open-source text editor that can run on Termux.

You need Vim. Vim allows you to access some files, like git config file and .bashrc (they are located above the shared/ folder) which can't be accessed by Acode or Spck Editor.

Also if you are using Git there's a chance that Git wants to open a text editor, like solving merge conflicts, doing rebase, and other stuff that required the user to decide what Git should do.

So, to install Vim execute the command below:

pkg install vim

After that, you can use it by executing this command:

~/.../shared/test $ vim index.html

Luckily Termux version 0.117 already provides you the arrow keys or else you have to use h, j, k, and l.

To learn more about Vim key bindings, visit the Vim Cheat Sheet website

I am going to show you all the things that commonly you will use:

• i to get into insert mode (edit file)
• Esc to go back to the initial mode
• The below command will only work if you are in initial mode:
  • Type :q to exit (only work if you don't edit the file)
  • Type :q! to exit without saving the file
  • Type :wq to save and exit (often used)

Pro tip: Only use Vim for Git stuff. Once, you are comfortable with Termux and Vim, you can start using them to edit the .bashrc file to set up aliases.

Install Node.js

To install Node.js all you have to do is execute the command below and type Y to proceed with the installation.

pkg install nodejs

Install npm Packages

Installing any npm packages on Termux are the same as installing them on Mac or Windows. But, on Termux, or I should say on Android, you can only install npm packages globally since Android doesn't allow you to install the packages locally. So, keep that in mind.

There's one npm package which is chalk that I know can be installed locally.

To install chalk execute the commands below your project folder:

npm init -y && npm install chalk

Now, I'm going to show you how to install Sass (CSS Pre-processor) and live server (automatically reload your website after any changes that you made).

Now, let's install both packages directly.

Execute the command below:

npm install sass live-server --global

The above command will install Sass and live-server globally, which means that you can execute the Sass and live server command from any directory.

To learn how to use Sass and/or live-server, you can see the documentation for each package, or for Sass, you can type sass and Termux should give you a useful output.

~/.../shared/test $ sass
Compile Sass to CSS.

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/> <dir/>

# more information

Uninstall npm Packages

Let's say, that you don't use Sass and live-server packages, you can uninstall them by executing the below command:

npm uninstall sass live-server --global

Pro Tips

• Don't watch any YouTube tutorials about "Hacking using Termux"
• Update installed packages regularly
• Always read the Termux output
• Don't execute the command that you don't understand
• Learn about alias command
• Read the Termux Wiki FAQ
• Read the README on Termux official GitHub repo
• Install man package. man is going to provide documentation about commands.

~ $ pkg install man
# some output
~ $ man cd
# It will show the manual page of the "cd" command

• Have fun with it!

Browser

(Back to top)

Browser is the place where you will see what your code is doing (how your website looks like). Choosing the correct browser would be an important step.

I have three options. Each browser has different use cases based on my preference.

1. Google Chrome (Recommended)

Google Chrome is without a doubt the most popular browser. It is free and cross-platform. So, it is a good practice to make sure that your website looks great on Google Chrome.

Now, I am going to give you one suggestion to use Google Chrome for web development.

Make the Text scaling to 50%. To find the setting you can follow these steps:

• Tap the three dots
• Scroll until you find Accessibility and tap it
• Now adjust the Text scaling down to 50%

The reason for doing that is that you want to make sure that the mobile view on your Android is the same as the mobile view on the desktop (using responsive mode on a desktop browser).

Unfortunately, if you are using the default value which is 100%, making 1rem is no longer 16px. It is around 17px to 18px. Also, it feels like your website gets to zoom in.

2. Firefox

The second browser is Firefox. It is also free and cross-platform.

My recommendation is to use Firefox to see the mobile and the desktop view at the same time. The desktop view that I'm talking about is the built-in desktop view and the text scaling on the accessibility menu.

To find it, follow the step above (on Google Chrome section).

After you find the Font Size (text scaling in Firefox), what I want you to do is disable the Automatic font sizing setting and make the Font Size to 100%.

Now, any website that you open should have the same size as you see in Google Chrome.

Here's the trick to see your website on different resolutions in Firefox:

• Try to play around with the Font Size
• Next, try to enable and disable the Desktop site option
• Try to make your phone on landscape mode

If you try to open this website on Firefox with Font Size 50%, see it on landscape mode, and make sure the Desktop site is disabled. Then, you will see that the layout is changing from one column to two columns. The two columns layout is the desktop layout.

Well, you can play around with it as much as you want but keep in mind that it is not working if the developer or you use the px unit for the @media query.

/* ❎ This will not have any effect */
@media screen and (min-width: 950px) {
  /* ...some code */
}

/* ✅ This will take effect */
@media screen and (min-width: 59.375em) {
  /* ...some code */
}

For more information about px and em on @media query. I would recommend reading this article from Zell Liew about "PX, EM or REM Media Queries?".

Keep in mind, that this is not the best way to see your website on any screen size. Later, I am going to tell you a better way to see your website on different screen sizes.

3. Brave

The last browser is Brave. It is commonly used to see a website when there's an Adblocker (making sure that it still looks good without ads).

In this case, you can use it to see how your website looks without JavaScript.

It is much easier to use Brave than other browsers since it only requires the toggle Block Scripts option.

Dev Tool

(Back to top)

Developer tool is a tool that can help you debug your code in your browser. Developer tool in front-end web development is commonly used to inspect the element's styling or debug the JavaScript code.

The best (and the only) Android dev tool is Eruda. Let's discuss it!

Eruda

Eruda is a free and open-source developer tool for mobile browsers. It's easy to use and the interface is as similar to the dev tool on the desktop.

liriliri / eruda

Console for mobile browsers

Eruda

Console for Mobile Browsers.

中文

Demo

Browse it on your phone: https://eruda.liriliri.io/

In order to try it for different sites, execute the script below on browser address bar.

javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();

Features

• Console: Display JavaScript logs.
• Elements: Check dom state.
• Network: Show requests status.
• Resource: Show localStorage, cookie information.
• Info: Show url, user agent info.
• Snippets: Include snippets used most often.
• Sources: Html, js, css source viewer.

Install

You can get it on npm.

npm install eruda --save

Add this script to your page.

<script src="node_modules/eruda/eruda.js"></script>
<

…

View on GitHub

You can try it yourself by visiting https://eruda.liriliri.io/. Try to inspect any elements, try all the Snippets, etc.

After you try it, it is powerful, isn't it?

Now to use it on your project, you can put these lines of code inside the <head> tag.

<head>
  <script src="//cdn.jsdelivr.net/npm/eruda"></script>
  <script>eruda.init();</script>
</head>

If you want to inspect another website, you can follow these steps:

• First, bookmark a blank page.
• Second, a box message from the bottom should appear.
• Immediately, tap the Edit before the box message disappears.
• Next, change the name to Dev Tool.
• Then, change the URL with this line of code.

javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();

• Now, if you want to inspect the website that you're currently add, you can tap the search bar, then remove the URL, and type Dev Tool.
• Then, tap the one that has javascript.
• Finally, wait for a couple of seconds and the gear icon should show up on the bottom right of your screen (default position).

Keep in mind, that unfortunately on some websites you can't use the Eruda developer tool.

Desktop View

(Back to top)

Viewing your website using a built-in Desktop site does not show you the exact view of how your website looks on a real desktop. But, there's a tool that can help you to see your website in different screen sizes easily.

Responsive Testing Tool

The way you view your website on a desktop or any screen size is the following:

• Visit the http://responsivetesttool.com/.
• Copy and paste this URL: https://nftcardfrontendmentor.netlify.app/index.html.
• Now, you should see a text : 1024 x 600 [ Desktop ], which is showing how your website looks like on 1024px x 600px
• To see your website on a specific screen size, let's say on 1440px x 1080px, you should click the icon next to the television icon.
• Then, it should show the input text that contains 1024 (right input : width) and 600 (left input : height).
• Next, you can swap 1024 with 1440 and 600 with 1080.
• Lastly, you can tap the GO button.

Now, you can put your localhost URL and try to see your website on different screen sizes.

Keep in mind, that the URL should always end with .html or else it will say that it is invalid.

Resources

(Back to top)

All the resources are in the GitHub repo, which you can frequently check to keep up to date with the latest tools to code on Android.

Too Long; Didn’t Read

(Back to top)

• Code Editor
  • Use Acode or Spck Editor or both
• Terminal
  • Termux for the terminal. Learn how to use it from the official Termux Wiki
• Browsers
  • Chrome, makes sure your website looks good on it since it's the most popular browser
  • Firefox, makes sure your website also looks good on it
  • Brave makes you easier to see your website without JavaScript
• Dev Tool
  • Use Eruda, learn how to use it by reading the README on the GitHub repo
• Desktop View
  • Visit the responsive site tool website and make sure the URL always ends with .html or else it will say that the URL is invalid (both localhost and hosted website)
• Resources
  • All the links are in this GitHub repo

Have Fun!

That's it! Hopefully, this is helpful!