Teach yourself how to code without breaking the bank!

A black and white picture of a hand on a mouse, keyboard and a coffee cup

I’ve been curious about web and app development for a while now. I switched my career from Cardiac Nursing to UI Developer/UX Designer 2 years ago. If you’re like me, it takes me a while to grasp concepts as I’m a bit of a slow learner. But sometimes the commitment to learn in depth courses can really set you back in the back pocket. So here are some interactive tutorials that won’t set you back while keeping it fun and interactive.

Online Schools

There are so many places to get started for FREE. I highly recommend

Code Academy

I started out with Codecademy, it’s grown a lot since I first started using it. It only used to have basic HTML, CSS, Javascript, jQuery, PHP, Rails…when I first joined. It’s grown immensely and cannot recommend it enough. I was still a nurse and coding in my spare time.

Code School

This is also a great place to start. It’s got really funny videos and instructors. I first learnt AngularJS with this course. I also have more in depth resources on learning AngularJS here. But in all honesty, it’s a got more than just AngularJS tutorials.

Udemy

I’m a bit of an addict to Udemy courses. Pro-tip: wait until they have a sale to buy courses. You can go through the video curriculum, wishlist them for later then buy them when they go on sale.

Khan Academy

Free large courses, not just coding. So sign up to get learning.

Lynda

(Free trial, not so free)

If you live in QLD, sign up to the SLQ website to get free Lynda courses.

TreeHouse

(Free trial, not so free).

Their videos and courses look really good. But I have never tried because of pricing, they do have a free trial. They do have a blog that does come in handy as well.

Free Code Camp

I “met” with Quincy Larson who reached out to me when I was answering questions on Quora a while ago. He’s got an awesome community called Free Code Camp. I’d recommend these courses for absolute beginners, it’s pretty good. Don’t be off put by the number of hours estimated to complete the course. Coding can be hard and it can take time which is why I like Free Code Camp so much…I felt like an idiot when I was trying to learn by myself a few years ago. It took me 9 months to build my first app. I could probably build it in 1 week now that I have more experience. I wish this was around then to help me out.

I’ve signed up just to learn the Backend Javascript.

Disclaimer: I did not get anything for mentioning this, Quincy and Free Code Camp are awesome.

HTML CSS

(client side / front-end )

Is essential in web development. HTML is your mark up that structure your website or web app. CSS makes it interactive and look pretty. Think of HTML as your bones, and CSS as the meat on that bone.

Basic HTML & CSS courses (FREE at the time of posting this blog…hopefully still free):

CSS Diner: Fun and interactive way of learning CSS

CSS Diner

CodeSchool:

HTML CSS Path

Learn Web Development

Udemy:

HTML Workshop

Learn HTML5 from scratch

HTML and CSS for beginners crash course

Javascript

(client side / front-end, except for Node.js)

Javascript is a browser language…it’s the most versatile language and gaining momentum as it has so many frameworks, libraries etc. If you’ve heard of AngularJS, ReactJS, EmberJS, BackboneJS, KnockoutJS, jQuery, Typescript, CoffeeScript…these are all built on top of Javascript. A special mention to Node.js of course as this is Javascript in the backend (server-side Javascript). Along with HTML and CSS, you can build some pretty interactive and awesome apps and websites.

I’m currently very familiar with Angular JS…although I’d like to try Ember and React. I’ve written another blog post on Helpful JS libraries for any project.

Ruby on Rails

(server side / back-end language)

Ruby is a great language to get started with development. It’s been made popular by packaging it up in the Rails framework. Google Ruby on Rails tutorials to get started there are plenty around for you to dip your toes into. You’d be surprised how easy it is build something of value with ease. So just to clarify again Ruby is a language, Rails is a framework built on top of Ruby to get started…seriously if you want to dip your toes into development try Ruby on Rails.

Try Ruby here

Rails for Zombies

http://railscasts.com/

Clojure

(server side / back-end language)

I’m not familiar with Clj (Clojure) but found some great resources.

http://www.tryclj.com/

http://clojurekoans.com/

https://learnxinyminutes.com/docs/clojure/

Python

(server side / back-end language)

I’m not familiar with Python but found some great resources. Python seems pretty similar to Ruby syntax to me but here’s a tutorial to see for yourself.

http://www.learnpython.org/

Git

(is a version control tool)

Version control is probably one of the hardest concepts to grasp as a self-taught coder. Luckily there are some great tutorials out there that are interactive. If you want to become a developer of any kind you need to learn git. Although there are apps for git such as SourceTree and GitHub Desktop to help you out, I’d recommend learning Command-Line Tools version of git as it is very fast to learn.  (I’ll be posting more on git in another blog post).

Code School’s try Git course

Atlassian has a great interactive tutorial

a more in-depth tutorial by Atlassian

Once you get familiar with git create yourself a GitHub account and a BitBucket account.
I recommend a bitbucket account for free private repositories but definitely first create your Github account to link to.

Youtube

Free videos that you can search how to get started with coding. It’s incredible what you will find on here to get started. It can be a bit scattered, but there are some gems in there that people have taken the time to make good tutorials so invest some time and pop those headphones on to get going.

Stackoverflow

Stackoverflow is the developer forum for all your needs. It’s likely when you first start coding that someone else has run into the same problem. Stackoverflow is your friend, rather the awesome people that contribute to this awesome community are your friends. So if in doubt Google it but also Stackoverflow it.

Vim

(a text Editor on steroids)

I know a lot of Developers swear by Vim, I’m unfamiliar with it as I use Sublime. (I have post coming soon on my favourite IDE’s)

What Is Vim?

Vim is a highly configurable text editor built to enable efficient text editing. It is an improved version of the vi editor distributed with most UNIX systems.

Vim is often called a “programmer’s editor,” and so useful for programming that many consider it an entire IDE. It’s not just for programmers, though. Vim is perfect for all kinds of text editing, from composing email to editing configuration files.

Despite what the above comic suggests, Vim can be configured to work in a very simple (Notepad-like) way, called evim or Easy Vim.

What Vim Is Not?

Vim isn’t an editor designed to hold its users’ hands. It is a tool, the use of which must be learned.

Vim isn’t a word processor. Although it can display text with various forms of highlighting and formatting, it isn’t there to provide WYSIWYG editing of typeset documents. (It is great for editing TeX, though.)

http://vim-adventures.com/

http://www.openvim.com/

Overall, this post is supposed to give you a range of ways to learn how to code for free. I hope you find what you like and what you don’t like so that you get a taste of coding. I still love it. I hope you enjoyed reading this as much as I did writing this.

So there you have it…if you have your own suggestions to add please comment below!

Advertisements

What the hell is Pizza Mogul?

Since my last post I’d just started working on Pizza Mogul for Domino’s. To answer the question above…Pizza Mogul is great concept by Domino’s Pizza Enterprises so that anyone in Australia can sign up, create your own pizzas (using Dominos Toppings), and sell them to earn Virtual Money (like BitCoins) known as Mogul Dough (pun intended). Mogul Dough can be cashed out into your own bank account! So you can earn a slice of the profit. It’s pretty rad, I recommend signing up…It’s Free and fun.

Working on this project was insane (in good way)! The sheer scale and size of the project was massive, by the time I had rolled on the project there were about 40 ThoughtWorkers still currently working on this thing…and many more who had come and gone. We had Teams in our ChengDu, Perth, Sydney and Brisbane Offices.

Assigning features to each of the TW Offices and the use of Microservices were allowed us to work productively and help the delivery of this product. Having that many ThoughtWorkers on a project is kind of unheard of…It opened up the opportunity to pair with lots of different people Devs, X.D.’s, QA’s, BA’s internally and also got to collaborate with Legal and Marketing Teams on the client side; meet a lot of people from ThoughtWorks on a global scale; challenged me to learn a whole suit of tools AngularJS, KnockoutJS, SCSS, Git Command Line, Bourbon Neat; It was a great project to learn how to write tests (TDD), learn Design Principles, Agile Delivery, Stakeholder Management and Consultancy skills. I can imagine the integration would have been challenging to say the least, I myself can’t fathom what that would have been like.

I mainly worked as part of the design team heavily involved with the Front-end development using AngularJS and SCSS, there was also a big responsibility for maintaining accessibility. We used CodeSniffer a great tool for helping with maintaining this and also writing end-to-end tests for accessibility for our views. It really brought my attention to the importance of this and I realised that I need to apply this to my projects. The cross-browser and cross device testing was pretty damn thorough, I recall feelings of frustration related to IE, Firefox, and devices that run on Android 4.2.2.

Developer with lots of Devices
Cross Device Testing+++
My Desk at Dominos, lots of Screens
My workspace….Got Screens?!

A highlight in this project was when I presented my first interactive draft of the treaded tax questions page and charity workflow on an iPhone to the marketing team. Tax questions aren’t sexy and trying to make the process as painless as possible was a really big challenge given the legal implications that had to be made explicit to the user.

The marketing team were excited to see this and were impressed with the animations, overall flow and solution. One of the marketing team members even went so far to mention that he wanted to show the CEO of Dominos! I was chuffed! I remember thinking to myself…If I can make tax questions bearable then my job is done!

Don’t get me wrong there were many days when I felt out of my depth, pressured and stressed. To keep my sanity on those days I asked myself if anyone had died because the build had broken, or something that was meant to be simple to implement wasn’t. Somedays you felt like say “Hey we’re not curing cancer here, so take a chill pill.”

Overall, it was an intense learning experience and due to the length of the project I am now able to draw on those experiences good and bad to help me make decisions on future projects. Since leaving the project, I’ve become an Angular JS and SCSS addict, Mobile First Design fan boy, more confident with Git Command Line although I still love BitBucket’s SourceTree App.

Hour of Code: Do it!

This will be a quick one. To those of you who don’t know me. I’ve just been accepted into ThoughtWorks an Agile Software Consultancy Company. I start January 2014. What might surprise you is that I never went to University. Well that’s a lie I went to University and have a degree in Nursing. I’ve been a Cardiac Nurse for most of my career with humble beginnings in Gastroenterology. I was driven to learn how to code, to solve a problem while working as a co-coordinator of the Chermside Cardiac Rehabilitation unit in Brisbane. I wanted to cut down assessment time because there was sooo much paper work. One of the contributing factors was how long it took to conduct a 6 minute walk test. Sounds like it takes 6 minutes, but after recovery of the client, explanation of the test, explanation of results, calculating formulas and then having to document the results in 5 different places. It turned into a nightmare. I was so fascinated with this small problem, I decided to tackle it myself in my own spare time. I taught myself how to code and found other people who helped me learn. It started when I was introduced to CodeAcademy…it was the Year of Code…I taught myself HTML, CSS, Javascript (I’m still learning and have a long way to go yet) and managed to build an app that I wrapped in PhoneGap. My app is now downloaded all over world and although I’m not making millions. I still find it so rewarding to see people use my app and continue to improve it. I love coding so much that I resigned from my Cardiac Rehab Job (my last day was two weeks before my wedding) and decided to take my novice Web Dev skills to the next level. After blood sweat and tears I now have a portfolio I’m proud of (that I will continue to grow) and can happily say that I will be a Graduate User Interface Developer at ThoughtWorks. The point is if a Nurse from Brisbane can teach himself how to code and change his career to Web Development without a University Degree. I’m sure you can too. I’m very excited to be part of the “Hour of Code” movement. I hope to gain more experience at ThoughtWorks and one day build more robust software to tackle bigger problems in the Health Care Industry.

Cool Code Snippets: Responsive Facebook Feed (Facebook Like Box)

6mwt Facebook Like Box
6mwt Facebook Like Box
6mwt Facebook Like Box

Okay so I get a lot of requests from clients who want their Facebook Feeds (Facebook Like Box) to be embedded within their websites. It’s a great way for them to use it as a news feed as they can post something on their Facebook Page which is then seen on their websites. It’s quick and simple for the client to do this, and saves me updating their page. Win-Win!

You need to make a Facebook Page, then you go to make your Like Box here
I’m going to use 6MWT App Page as an example…

 https://www.facebook.com/pages/6MWT/379954588681643

Then you click on “Get Code” Button. You can choose from HTML, XFBML, IFRAME, URL. I tend to go with HTML.
Paste this code below in your HTML file, ideally right after the opening tag.


<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Then you paste this snippet of code where you want your Facebook Feed (Like Box) to appear on your page.

<div class="fb-like-box" data-href="https://www.facebook.com/pages/6MWT/379954588681643" data-width="400" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>

Okay so the Facebook Feed is on your page but isn’t responsive…all we have to do next is add this CSS rule to so that it does make it responsive.

#fb-root {
    display: none;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

And now you have a Responsive Facebook Feed! I’ve got a couple of examples on Street Science website and El Matador Muay Thai Stables website.

Cool Code Snippets: Responsive Video

Every now and again, I’m going to post code snippets that I find that are really helpful and cool. It may be as simple and not original but these have helped me solve problems I’ve had building responsive websites. This post is just going to show case responsive video. You can read more about it here.

This is the markup for the embedded video as an iframe from youtube, wrapped inside of a div with the class “videoWrapper”.


<div class="videoWrapper"><!-- Copy & Pasted from YouTube -->
</div>

This is the CCS markup for the class “videoWrapper”.


.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

How I make web apps for iOS…(PhoneGap, Xcode, bonus ChildBrowser Video)

Source Code Here from BitBucket

Installing PhoneGap and Xcode:

First download PhoneGap 2.2 from here or Go to PhoneGap.com > Install on the top right corner > Scroll Down to PhoneGap 2.2.0. Unzip and Put it somewhere (I’ve put it in Documents Folder and renamed the folder to Phonegap 2.2).

Secondly, download Xcode 4.6.3 from here (you will need an Apple developer account) and Install it.

Create a new PhoneGap project:

To create a new PhoneGap Project go to the PhoneGap folder and navigate to lib > ios. Right Click on bin folder > Services > New Terminal at Folder. This opens up the terminal app on Mac. Type in using the format

./create ~/Desktop/Folder/ProjectFolder com.companyname.appname appname 

Go to Finder and navigate to your ProjectFolder and you should see your new PhoneGap project. YAY! Open the Xcode Project File (ends with .xcodeproj). Do a clean, build and run then you should your phonegap project working in the simulator.

Okay, so stop the project in Xcode. Navigate to www folder by clicking on the folder below the play button. In the www folder you can put in your web project, and remember to keep the cordova javascript file (cordova-2.2.0.js).

Whitelisting External Hosts (allow domains):

We also need to whitelist external hosts Phonegap reads a setting called ‘ExternalHosts’ – this one is used to whitelist allowed external domains (so that the project can connect to the internet). To do this go to Resources folder > Cordova.plist file > then expand the ExternalHosts Key> click on plus (+), it will create Item 0, make sure the Type is set to String and add asterisks “*” as the Value.http://www.youtube.com/watch?v=VkxPx1IIrCk

Installing ChildBrowser Plugin:

This is a really cool feature where you can open a webview inside your app as a subview. You can open up a webpage within your app without leaving your app! So you will need to download the ChildBrowser Plugin Files from here or here.Copy the files into your Plugins Folder:

  • ChildBrowser.bundle
  • ChildBrowserCommand.h
  • ChildBrowserCommand.m
  • ChildBrowserViewController.h
  • ChildBrowserViewController.m
  • ChildBrowserViewController.xib

Copy ChildBrowser.js file into your www folder

Go to your Cordova.plist > Expand the Plugins Key > press the plus (+) symbol add the ChildBrowserCommand as Key, Type as String, Value as ChildBrowserCommand.

Example of Cordova plist for ChildBrowser
Make sure it looks like this.

Reference the ChildBrowser.js in your index.html

<script type="text/javascript" src="ChildBrowser.js"></script>

To make ChildBrowser Functions Call

<script type="text/javascript">
        //ChildBrowser js calls
        document.addEventListener("deviceready", loaded, false);

        function loaded()
        {
            if (console)
            {
                console.log("cordova loaded");
            }
        }

        function openGoogle()
        {
            if (console)
            {
                console.log("in show pmt page");
            }

            Cordova.exec("ChildBrowserCommand.showWebPage", "http://www.google.com/" );
        }
</script>

Now you are ready to call your javascript function that will open Google in ChildBrowser.

<a href="#" onclick="openGoogle();">Search Google</a>

I hope you enjoyed this post as much as I did writing it. If you ever need a mobile website, app, phonegap project for your business I’d be happy to talk to you about it. http://newhereinc.com, http://webcred.biz.