Trying Something New

This week I decided to branch out a bit and learn some HTML and web development. As a part of this I went through codeacademy to get a start on HTML web development.

A screenshot of an explanation of HTML

Comparing codeacademy and the Android Developers tutorial the first thing that jumps out is codeacademy has more in depth explanations and doesn’t assume you know what anything is. I found the Android Developers tutorial to be hard to follow sometimes and it was not clear where things were or how to fix problems such as the ones that cropped up for me two weeks ago.

Screenshot of codeacademy html tutorial

If you want to see the start of my HTML coding journey head over to my other blog post talking about coding in general. Once I got through the first bit I started to learn about dividing text on the screen as well as creating headers of different sizes. HTML is very intuitive that way you just type <h#> where the number sign is a number with 1 being the largest and the heading getting smaller as you increase the number.

Screenshot of codeacademy HTML tutorial

Another thing I like about codeacademy compared to the Android Developers tutorial is that they have a checklist with each step of what you need to do to help you learn. It also is able to tell that you did it correctly and offer hints if you are running into issues.

HTML has what are called tags which are the <p> for paragraph or <h1> for heading. The big thing is you choose where you want to close the tag. For example I could type <p> DNA is made up of four nucleic acids called Adenine, Guanine, Thymine and Cytosine. These nucleic acids are found in all living things and are the building blocks of life. </p> The paragraph is not closed until I put in the </p> tag. This allows me to break up text or separate items for better visibility in the code but not have them separated in the actual web page.

Screenshot of codeacademy explaining what an image tag is in HTML

Images are handled differently. They are self closing tag meaning I don’t type <image> then when I want to close it put </image>. Instead the tag is <image src= “image-location />. This is because the image tag is specific to a single image if you had to close it separate each time you could try and put two images in and that can break things.

Screenshot of a website built using HTML

So after all this I have a website that is starting to come along nicely. It doesn’t have any fancy graphics or interactive elements yet but it does have the basics of a website with headers, subheaders, images, paragraphs and lists. Although this is the last week of my learning project for edtc300 I plan to continue to learn HTML and Android app development so that hopefully in the future I can build my own website and app.

WHat Have i Learned?

When I began this journey in the middle of May I would never have guessed how much I would have learned. I am now able to create and run a very basic Android App and I am also able to write a very basic web page.

Screenshot of the Android Developer Website and Codeacadaemy

I have gained an understanding of two development languages. Kotlin for developing Android Apps and HTML for developing webpages.

Screenshot of the layout Window in Android Studio

I have also learned how to implement buttons and text boxes in Android Apps and give them defined edges so they don’t appear off screen on different phones.

I have also learned how to use Android Studio and pass that knowledge onto others in the form of an info graphic. I have learned how to take large amounts of technical jargon and make it accessible and easy to understand.

Most importantly I have learned that coding may seem daunting and impossible to understand but there are lots of great resources out there to help you.

Learning Online

Coding is a little unique because it is a skill that requires you to learn online. Yes there are books for it but because they are static and can become out of date they cannot be your only resource. Learning coding online allows you to go through interactive tutorials such as codeacademy or hour of code. It also allows you to ask questions on websites such as stack exchange where you can ask for help and almost always get a response.

Screenshot of the technology section of Stack Exchange

One of the downsides to learning online is that there are a lot of materials, tutorials and how to videos out there. It is very difficult to determine which one is best for you. People may stick to the larger names or the ones made by the companies you are developing for but this means you may miss out on some awesome learning opportunities.

Learning online has many advantages. It is democratized, easily accessible and allows tutorials to be interactive, easier to understand and to reach even more people. However it does have its drawbacks such as an overload of information, and numerous tutorials to choose from. Learning online has allowed everyone with an internet connection to gain more knowledge and skills than ever before and to pursue careers, hobbies and interests that would have been out of reach without the internet.

Developing in Android Studio

I am taking a break this week from learning how to develop Android Apps to explaining how to use Android Studio which is the program you develop the apps in. I have an info graphic below because the mix of pictures and words helps with understanding. As a side note info graphics are a great resource in the classroom whether as a teaching tool or as an assessment by getting your students to make them.

Info graphic explaining how to use Android Studio

Here is a link to my previous post where I struggled a bit in developing my Android app.

Starting an Activity

Now that I have learned how to make a basic user interface it’s time to get the buttons to actually do something. I am following the tutorial provided by Android Developers to build my first app. The goal is to be able to enter text in the text box and then when the send button is hit it opens a new window displaying the text entered.

There was more coding this week than before which was nice and not so nice. It was nice because it let me work on my coding skills. The not so nice part was that my coding skills are not up to scratch and there was a lot of troubleshooting involved. Thankfully Android Studio makes it easy to see where issues are going to arise by underlining in red the different lines or variables that are not defined or in the wrong syntax.

I ran into several bugs trying to run the app. One of these being the activity must be exported or contain an intent-filter. I so far was not able to fix this error and have been unable to run the app. Next week will be about troubleshooting and refining the app so that I am able to run it.

Designing, Designing, Designing

This week I embarked on learning how to design a user interface for an Android App. I was expecting to be doing a lot of coding and having to design my own buttons but Android Studio makes it surprisingly easy. It has a layout editor that lets you view the design of the app as you make it.

The next step was to add a test box and a button. These are pretty useful in most apps so learning this first makes sense.

You can see several arrows pointing to the top and side of the “screen.” This is so that the text and buttons have a defined distance to stay away from the edge of the screen. This is important because if you don’t specify this the button or text box could be rendered off the edge of the screen.

To change the text in the box and the button you don’t just double click and edit text. You have to go in and change the strings.

This allows you to have a single text item that can be used for multiple buttons, text boxes etc. So a little more work upfront but a huge time saver in the end.

Voila we now have an app with a text box and a button!

Next Week: Adding another activity (making things work with other things)

Hello World!

There are a lot of resources out there for coding. From YouTube to Udemy to Google, Microsoft and other tech companies tutorials. The first part of my learning project was deciding where I wanted to start with learning. After taking a look around I decided that it would make the most sense to start with developing an Android App instead of a website. The reason for this is there are quite a few resources such as Squarespace or Wix that let you build websites without coding that look very professional. For this reason I decided to learn how to develop and Android App. I am starting with the Android Developers tutorial call Build your first app.

Working off of this tutorial I had to download Android Studio which is the code editor where I will work through the different tutorials and apps that I am going to work on. Android Studio is called an IDE which stands for Integrated Development Environment. Basically this is a bunch of software tools all in one program that make it easy to write code and test your projects. Android Studio is one and Microsoft Visual Studio Code is another. This is a good example of the beginning of coding you need to learn a lot of the language. That was what took up most of this week. Learning that the XML file is what defines the apps UI (user interface). This is where you decide where the buttons are located, the animations that happen when you press the buttons, how text is formatted along with a host of other things. After gaining some of an understanding it was time to run Android Studio and get into some code.

It looks complicated but it’s actually pretty easy. It has three windows with the one on the far right showing a preview of what the app will look like when it has finished compiling all the code. The middle window is where you edit, add or remove the code. This is your main work area where you would spend most of your time. The far left window shows you all the different files for your app. Thin of it like file explorer in Windows where you can see all your files and the folders within folders of your files.

Success!

After a lot of hard work I now have an app that says Hello World! Honestly a little anticlimactic but still a good start! It’s nice to know that at the very least I am able to code something. Although this is just the start I already feel a little sense of accomplishment.

Next week: Learning how to build a user interface and make an app look pretty.

In the Beginning

I have always been interested in technology I enjoy reading about technology as well as understanding how things work. A part of that has taken me to my current part time job at Geek Squad.

Photo Credit: watts_photos Flickr via Compfightcc</a

Since I have an interest in technology I have decided that my learning project will be learning to code a progressive web app or PWA and an Android App. Progressive web apps are quickly becoming popular and will most likely replace apps to some degree. I have wanted to learn how to code for a while and the learning project is a good kick in the butt to get started on it. the reason I want to learn to code both is to understand the differences between the two as well as to gain more experience with coding in general.

The Plan

My current plan is to follow Google’s codelabs tutorial and the Android Developer Training. The reason I have chosen this is because Google is one of the main companies pushing forward with PWA in addition to Microsoft and other developers. Additionally this tutorial is easy to follow and broken in to 14 chunks that I can work on. The other reason is they are very accessible and easy to follow. In addition to that I will be taking the basics I have learned in each course and trying to expand upon them using other tutorials and YouTube videos. I do not have any specific ideas for that yet as it will depend on what feature or API I am learning. I also would like to learn how to use Github which is a repository for people to upload their projects and other people to contribute. Additionally I want to delve more into the open source community. Open source means code that is developed so that the whole world is able to see and contribute. How-To-Geek has a really nice overview of what open source is.

My goal is to learn how to code a functional web app by the end of the course and to upload the code on that web app to Github so it can be viewed and changed by the open source community.