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

Building web apps with Rails4 and AngularJS in 15 minutes

An approach for Angular and Rails CRUD

Josh Software - Where Programming is an Art!

While learning AngularJS to make a single page app using Rails4, I found some good videos and blogs. However, I did not find any simple example for CRUD operations that made me easily understand the integration between Rails4 and AngularJS. So in this tutorial post, I explain how to create basic CRUD operation using Rails4 and AngularJS.

Here is my git repository for the complete code Github

Create rails project

Create User model

file db/migrate/[timestamp]_create_users.rb

app/model/user.rb

Create Users controller

Create the CRUD operation in users controller and send JSON response. The code sample is here

Add angular gem

In Gemfile add these two gems.

Setup layout

Adding ng-app and ng-view indicates that we have an AngularJS app in the page.

Create an angular controller

First let’s create a directory for our controllers. You can name it whatever you want.

Now create users_controllers.js file. Here I have used the same naming…

View original post 329 more words

So you want to learn AngularJS

angular tshirt
Be an Angular Master

I found starting Angular a bit difficult as I’ve come from a jQuery/Javascript Front-end background. I’m no expert even now, but I’ve certainly come a long way since I started. The Angular way is a bit different and just knowing principles of MVC Framework learning curve can be quite steep. My aim for this post is to save you some time and get you to take the leap to start learning AngularJS.

Disclaimer: NO CODE SNIPPETS THIS POST. I couldn’t do justice with these great resources available outlined below.

1. Start with Code School FREE Course

If you are looking for a place to start I recommend Code School’s Angular Course. It’s a fun course that you can follow quite easily. It involves some quirky videos as all codeschool flavoured tutorials do, but I found this such a great place to start.
https://www.codeschool.com/courses/shaping-up-with-angular-js

2. Setup an Angular and Bootstrap project with Yeoman

I only found Yeoman a month ago and it changed my life! Don’t let the Terminal setup put you off. The Yeoman Terminal Wizard structures your app with ease! It goes further to teach you how to do a “to-do app”. If your feeling keen, setup Yeoman project with Bootstrap and follow the Code School Tutorial. You’ll also never have to refresh your Browser with the livereload integration!!!
Hint: To Edit HTML use the main.html (View) and main.js (Controller)
Yeoman.io – makes Terminal less frightening
http://yeoman.io/codelab.html
I prefer setting up Yeoman with SASS, Compass, Bootstrap Version of SASS. So that I don’t diverge from the original intent of this post…You’ll have to wait for post on why I love SASS/SCSS. It’s also worth mentioning that Yeoman also sets up your project for TDD.

3. Egghead.io Tutorials

John Lindquist’s Egghead.io is also a great place to start Angular JS learning. His egghead.io site is filled with other tutorials in addition to Angular JS.
Egghead.io Tutorials:
https://egghead.io/articles/new-to-angularjs-start-learning-here

4. ng-book

Ng-book …great book to follow: I haven’t finished this book yet but it’s great at explaining how angular works. Once you get more familiar with Angular this book is a great reference. I recommend following this book along with a fresh Yeoman project.
If you want awesome code samples here’s github repo. Here’s the book on Amazon

5. ng-europe conference: October 22nd-23rd, 2014

Not really a physical resource as such, but worth mentioning non-the-less! If you have the opportunity I think this would be an amazing event to sign up for. I wish I was going.
ng-europe

Some Key Concepts to learn…

  • Model-View, View-Model: ng-view, ng-controller
  • scope: $scope, ng-model, two-way-binding
  • routing & templating: $routeProvider, $location
  • built-in filters that come with angular: orderby, date, currency, uppercase, lowercase
  • built-in directives that come with angular: ng-show, ng-hide, ng-repeat, ng-class, ng-click

The future of Angular

This is just a slide that I found while surfing the web. It’s an exciting insight into the future for Angular.

So hopefully this helps you get started with Angular JS! Good luck and Happy Coding. If you can suggest any other resources feel free to comment.

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%;
}