For better understanding, we will start by looking at what a code entails.
So, what is a code?
A code is the foundation of every website, computer, or app that you are currently using or ever used. It is just like building a bridge. Coding an app or website involves putting together tiny bits of code into a bigger and better functional one.
Usually, when you want movies, code is often misinterpreted. It usually denotes a character hacking into something. It may look like a text with different types of punctuation. That’s why we are shedding more likely light on it.
In web development, code can be of two types – front and back end code.
Front end code is the type of code that is related to what the user sees. For instance, buttons, text, and pictures encompass front end code.
Whereas, back end code is more like a boiler room of the website, the place where important aspects like security and logins are managed.
Why is code essential?
Typically, suppose you have a website, and you run. In that case, you must know basic code; the exact way of knowing basic mechanics is essential if you have a car. On days that the car becomes faulty, you can fix it by yourself. While it’s true that you can pay someone else to fix it, but it’s more economical to fix it by yourself.
According to Jake Byman, Senior Software Engineer, coding ex exercises are an integral part of the brain that is difficult to locate through other disciplines. Apart from that, it’s a whole lot of fun. It’s related to cooking, in the sense that you can take a set of pieces that you don’t mean anything on their own and join them together to produce something amazing.
4 Types of Code
There are several types of doing language; you don’t need to know everything. However, there are four languages that you need to have a grasp of.
No worries! Because you don’t have to be an expert in all these, it’s just paramount that you have a basic understanding of it all.
1. HTML
It’s known as a markup instead of a language. This is the content of the site at its most elementary level. You can control text, buttons, and formatting using HMTL.
HMTL is an acronym of Hypertext Markup Language.
2. CSS
It stands for Cascading Style Sheets. It controls what the content of the site looks like. CSS is in charge of the website’s fonts, sizes, and colors. If you can see it, then it’s definitely under the control of CSS.
3. JavaScript
It controls a high percentage of the interactions on the site. When an HMTL creates the button, CSS decides what it looks like, and the JavaScript will control what happens if the button is pressed.
4. PHP
The above three mentioned are called front end languages because they control what is happening on the site.
PHP – Hypertext Preprocessor is a back end language. This means it controls certain things like email, user account, and log in. This is what happens behind the scene that the user would never be aware of or see. However, they would depend heavily on it.
Imagine a website as having a front and back end; you see the front end (HTML, CSS, JavaScript). The back end controls the behavior and data of the site- PHP, Java, Python.
According to Jake Byman, if you want to spin up a website by yourself, you will need to ensure that you maintain the cloud infrastructure (DNS, SSL certificates, provisioning EC2 instances) and a deployment pipeline.
It can be worth it to pay for the hosting services, even if you don’t intend to spend the time sustaining the site.
In the previous lesson, I created a page from HTML to show as the Welcome page. Since then, I have gotten a lot of questions from people about the code I used and how I was able to make the page look like that. Though there is a simple to use HTML editor that many people are aware of, most prefer to create their page using a code by themselves. This article will put you through the basic steps on the code you need to create an HMTL page, just exactly like the welcome page you had created on my app.
I’ll implore that you kindly follow this tutorial by copying and pasting this code into your dashboard’s HTML page. If you want to try the code at first, ensure that you use the code editor provided for free from W3schools.com. Remember to delete anything you see that is written in grey and brackets. Change only the items in red.
How To Create An App Using HTML Code
1. Create The App Header
As you know that our page is divided into these three sections, header, body, and a footer. The code below is what is used to determine what will be the header, what will be at the top of the page.
<div id="container" style="width: 250px; text-align: center;">
Ensure that you use the same sizes. Copy this directly.
<div id="header" style="background-color: #ffa500;">
You can decide to change the color code once again that is available from w3schools.
<h1 style="margin-bottom: 0;">Dog Show Photos</h1> </div>
Choose the title of your choice and change it to it.
2. Create The App Body
In the body, I have added some features – a sentence, image, and finally, a sentence, located at the bottom with a link to my Facebook page. You can add this code.
<div id="content" style="background-color: #eeeeee; float: center;">Save the photos as your screensaver<p>
Write the sentence of your choice above between the tags.
<img src="//fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-snc7/582779_550113208345795_117921545_n.jpg" alt="Dog show photos" width="232″ height="150″ /></p>
Ensure that you create the link to your image and alt must be your keywords
<p>Join us on <a href="//www.facebook.com/DogShowPhotosAppsgeyser">Facebook </a>for more doggie adventures</p> </div>
I wrote a sentence and put in a link in the middle of the sentence around the word Facebook. Kindly change the link to your website and the sentence to suit your needs
You find the footer usually at the bottom of the page. I believe strongly that on any app, it’s of great importance that the user has access to the app developer’s contact details. This is simply because it enables them to be able to reach out to you whenever a problem arises, rather than writing a bad review about the app on Google Play.
<div id="footer" style="background-color: #ffa500; clear: both; text-align: center;">Copyright & copy; Kim Cohen – AppsGeyser.com <a href="mailto:[email protected]">Send e-mail</a></div>
As you can see in this section you have the color to change, your copyright details and your email address that is added into your sentence. Change the bits in red to your own details.
<script type="text/javascript" src="/assets/83fc9665/js/uncompressed.jquery.dd.js"></script> <script type="text/javascript" src="/assets/83fc9665/js/icons.js"></script> </div>
Congratulations! You have succeeded in creating your welcome page. So, you can now make your opening page to suit your brand without the need to pay so much money to big developers. I would recommend that you keep using the W3School for HTML practice.
It is easy to use the website, and the charges are completely free. As you can see, creating an Android app from scratch is way easier than you think.
Conclusion
Now you know how to create your android app from scratch using a simple HTML code. It’s easy, and it’s best to put into continuous practice what you have just learned.
Our Welcome Page: