Getting started building apps: concrete steps for beginners

The Short Version

  1. Note down an idea that you want to make real.
  2. Mock it up.
  3. Make the mockup real with HTML/CSS.
  4. Lay the foundation with Ruby.
  5. Bring the static mockup to life with Rails.
  6. Join the community.

The Long Version

For beginners who want to learn to code, the problem today is not that there aren’t enough learning resources; it’s that there are so many it’s hard to know where to even begin.

In this guide, I’ve outlined a list of concrete steps that a beginner can take to start building real, useful apps. The list is as small as I can think how to make it while not leaving anything essential out.

For each step I’ve tried to suggest at least one free resource that you can get started with right this minute. I’ve also included some paid book suggestions, but I recommend starting with the free resources and only using the books if you need references later on.

Good luck and happy building!

Step One: Note down an idea that you want to make real.

Does this deserve its own step on our minimal list? I believe it does, because I think many people underestimate the value of having a clearly defined goal drive your learning.

It’s truly amazing how good the tools of the trade have gotten — good enough to allow complete, non-technical beginners get productive quickly. But programming is still hard at times.

Having an idea you are excited about seeing made real helps keep you going through the rough patches. So always keep your eyes open for little “pain points” in your life that you can build a solution for.

Resources

Free: the backs of napkins (my tools of choice), Evernote (freemium)

Paid: Field Notes

Step Two: Mock it up.

Really, two steps in and still no code? Yes, really. An idea in your head or on a napkin is good, but a mockup really gets you thinking about what you are going to need in order to make it real.

And the mockup is one small but tangible step closer to a real product — every little bit of progress helps keep you going.

It doesn’t have to be super detailed, just rough it out for now. We can paint in the details later.

Resources

Free: pencil and paper (my tools of choice, I guess technically not free)

Paid: I’ve heard good things about Balsamiq and Keynote as mockup tools (both have free trials).

Step Three: Make the mockup real with HTML/CSS.

HTML tags are the clues web browsers use to understand content. For example, in the actual code of this page, the title of this step is enclosed in strong tags, like this:

<strong>Step Three: Make the mockup real with HTML/CSS.</strong>

This lets the browser know to draw it out bold. There’s a bunch of other tags, like <p> (for paragraphs), <img> (for images), or <a> (for links).

Once you’ve got all your data tagged up with HTML, you can use CSS to customize the look of your page. CSS lets you tell the browser to, for example, use Helvetica font for all the stuff inside of paragraph tags but use italic Times New Roman for all the headings.

Your next task will be to translate your mockup into actual HTML and CSS code. It’s just going to be a static page, for now; it’s going to look the same for everyone who visits it. You’ll have to manually type in data, even for stuff that you would want to be dynamic on your real site, like the current user’s name.

But this is the critical first step to making your idea real. The code you write now will come in handy later. But don’t get too bogged down in the details; just get the basic structure of a page or two written to whet your appetite, and then move on.

Resources

Free: A Beginner’s Guide to HTML & CSS, by Shay Howe. Shay is a designer and user interface engineer at Groupon, and the HTML & CSS instructor at Code Academy. He has made his course notes available for free.

Paid: Head First HTML with CSS & XHTML. Be careful not to accidentally get Head First HTML5 Programming: Building Web Apps with JavaScript, which is not quite as beginner-friendly.

Step Four: Lay the foundation with Ruby.

Ruby is the language we’re going to be using to start making our site smart. For now we’re just going to be doing some basic exercises which might seem like they have nothing to do with building apps, but hang in there: getting familiar with Ruby is going to pay dividends very soon.

Resources

Free: Learn to Program, by Chris Pine. If you can get through all these free chapters, you’ll be in good shape. Some of the exercises are tricky, but try to complete each one.

Paid: Learn to Program, Second Edition. This is the physical version of the online tutorial above. It’s a great reference to have around. Make sure to get the second edition, which is updated and improves on the online version.

Step Five: Bring the static mockup to life with Rails.

So now you know some basic Ruby. You could theoretically go out and program a web server, a database, and all the 1001 other things you need to run a website. But fortunately, someone has already written all that Ruby code for us, and released it for free.

This framework is called Ruby on Rails, or just Rails for short. Rails is how we’re going to finally bring our idea to life in a real, functional, dynamic web app.

Resources

Free: Ruby on Rails Tutorial, by Michael Hartl. This tutorial basically walks you through building Twitter from scratch. Really. Right now that might sound scary, but it’s not; if you’ve done the steps above then you are more than ready. In fact, Hartl assumes that you don’t know HTML or Ruby, so you are ahead of the game.

It will tie together all the things you’ve learned about HTML, CSS, and Ruby, and even introduce you to some other cool stuff. It also, within just a couple of chapters, walks you through how to get your creation live on the web for free.

Be sure to do the Rails 3.2 version; it just came out recently. Don’t do the 3.0 version.

Paid: I could recommend any number of great books to go deeper into Rails than the Hartl tutorial does, but I’m not gonna. Because if you can get through most of Hartl (in other words, you can build Twitter) then you are ready to start building your own app idea. And that’s by far the best way to learn.

You will run into specific questions not covered by any of the resources above, and at those times Google and Stack Overflow will be your best friends. If you can find a RailsCast on the particular technique you need for your site, like how to map an address, you’re usually all set.

Step Six: Join the community.

One last thing that’s going to greatly improve your odds of success: join the community. I can’t emphasize enough how much this helps motivate and educate you, and it’s also just plain fun. By and large, the Rails community is shockingly friendly and welcoming to beginners. Turn up at some events, find someone who sounds like they know what they are doing, and offer to buy them lunch once a week if they answer some questions.

Finally, try to find a friend to join you on this journey. Having a partner in crime to talk with makes learning much more fun and effective.

If you can’t convince anyone, get a rubber ducky and set it on your desk. When you get stuck, explain the problem to the ducky. Nine times out of ten, before you are done asking the question, you’ll have figured out the answer.

Now go forth and build!



I will be continually updating this guide as I come across better resources and strategies for learning. If you have suggestions or feedback, please let me know in the comments or email me@rugb.com.

Related Posts:

9 Notes

  1. newsandcode reblogged this from rugb and added:
    This is a really solid introduction to building web applications.
  2. lifeandcode reblogged this from rugb
  3. rugb posted this

Comments