Learn how to design, build, and market a web app

I’m a strong believer that with enough effort, anyone is capable of learning the skills necessary to start a company. Whether you’re rich or poor, whether you go to Harvard or a middle school in Zimbabwe, whether you’re 22 or 44, I believe you are capable of learning what it takes to successfully start your own business.

In this post, I’m going to spill out as many resources as I can related to design, development, and distribution/analytics (i.e. the three D’s), all of which are critical to startups. I don’t claim to be an expert in any of these fields, so take my advice with a grain of salt.  My main goal is to help you get off the ground and offer you the tools to start learning on your own.  Most of the content will only be applicable to web and possibly mobile products.

For those of you non-techy folks, this might be especially useful so that you can stop worrying about getting a technical co-founder and start building things yourself. Even if you want a technical co-founder, it will likely be easier once you’ve demonstrated some technical ability or some competence in these three areas that a techy person would rather have someone else deal with.

Feel free to suggest other resources. If you don’t find what you’re looking for here – Google is your best friend.

Design

Start with a problem that you’re passionate about solving and brainstorm product concepts that could potentially solve this problem.

A great way to brainstorm and solidify your idea is to start wireframing your application using a tool like Balsamiq or Pencil. Wireframing takes no time to learn and lets you quickly mock up what you envision your concept to be. This allows you to quickly get feedback on your concept from friends and potential users and seamlessly collaborate with someone on the initial design. The wireframe is a great way to get started in talking to customers, via customer development.

The “low-fi” nature of the wireframe also lets you focus on the functionality and flow of the app without getting distracted by aesthetics like color and typography.

If Balsamiq ends up not working for you or you’d like to try something else – here are 50 other tools, resources, and Photoshop web templates: http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/

Once you’ve gotten feedback from potential users and you’re happy with your wireframe, you’ll want to refine your design using a tool such as Photoshop.  This is where you start designing how exactly the app will look like. You have two options:

1. Take a stab at learning design on your own. Get inspiration from products/sites you admire. See what you can do in Photoshop with some trial and error. You may want to start by tweaking Photoshop web templates (see above).

Take a look at these resources if you’re interesting in learning:

Design inspiration:

2. Get someone else to do it. If you’re serious about building your web app, but have no interest in learning design on your own, find someone to help you! Ideally you have friends/colleagues that are capable of helping you with design. If not, you can always outsource and buy a design off a site like 99designs.com to get you started.

Front-end Development

As a studious college student, I’ve always been used to depending on books as my main source to learn new subjects. As I’ve grown as a web developer, I’ve realized that coding is best learned by doing. I’ve found that I learn and master concepts much more quickly when I’m experimenting and failing on the keyboard rather than being nose deep in a book. As scary and difficult as it might sound, if you really want to learn, put that programming book down and start coding now.

The good news with front-end development, is that there isn’t much to it (at least to start). Front-end development deals mainly with the look of an app rather than the complicated functionality. To start building a web app, all you need is to open a text editor (even notepad would do, but go and google around to find a better one), slap some HTML code on it, rename the file extension to be .html, and you have a web page!

For your web app, start with HTML, the basic structure of your web app. You can think of HTML as sort of the skeleton–it is extremely important in dictating how your web app is organized, but it has less to do with your outward appearance. You will later use CSS (cascading stylesheets) to deal with the actual styling of your app.

Walk through an HTML tutorial like this one to get a very basic understanding of how the language works: http://www.w3schools.com/html/default.asp. You don’t need to go through every chapter; only the first several pages are really necessary. I recommend having a text editor open and trying out the exercises yourself.

The beauty of HTML is that there is little to memorize or understand, as there are only a handful of tags you need to know. Read through the tags to have an idea of each tag’s functions: http://www.w3schools.com/html5/html5_reference.asp.

After you’ve gained a very basic understanding of HTML, get to know CSS in a similar way: http://www.w3schools.com/css/css_intro.asp. Again, keep a text editor open to follow along and try everything. Play around with HTML tags and CSS properties to see what they all do in the browser.

There are a lot more things to know about in CSS, but when you start coding in it, you’ll want to spend most of your time googling for specific answers/tutorials rather than trying to memorize everything. For instance, want to learn how to make rounded corners? Google “how to make rounded corners css.” Many times, it’s that simple.

For supplemental help and extra confidence, you can pick up a book like this one as a reference. However, you can move on without it (like I did).

Now that you’ve gotten a basic understanding of HTML/CSS, you can move on to start building a whole web page. Walk through this tutorial to understand some of the latest features of HTML5/CSS3 and most importantly, learn about the process and thinking behind structuring a web page.

At this point, you should have at least a reasonable amount of confidence in how HTML and CSS work, and how you might be able to put up a simple web page. It’s natural to feel pretty shaky, but I would continue to dive deeper in the code. If you have a PSD/design that you’d like to finally turn into a web site, I think you’re ready to start taking it on. There are plenty of PSD to HTML tutorials out there, but this is just one of many decent ones: http://designinstruct.com/web-design/code-a-vibrant-professional-web-design-with-html5css3/

To make your web app actually functional, you’ll need a more complex scripting language – Javascript. Since you’re probably new to programming if you’re reading this, it’s probably best to stick to the simpler UI stuff in JS by taking advantage of awesome frameworks that do the dirty work for you. The most popular of which is http://jquery.com/. There is a massive variety of things that you can do with JS and jQuery, so going with a specific tutorial may not cover all your needs. jQuery has some of the best written documentation I’ve seen, so simply searching around the documentation for things you’re trying to do will get the job done for most of your javascript UI needs. It is difficult to take a deep dive and master javascript without strong fundamentals, which I discuss in the next section.

More front-end resources:

Back-end Development

Back-end development (ruby, python, java, objective-c, etc.) is necessary if you want to store data and make your application truly powerful. A lot of the functionality you had in mind for your application will probably be in the back-end side of things. It takes a lot more time and commitment to pick up as a beginner programmer compared to front-end. I definitely recommend learning the front-end before the back if you don’t plan on being a hardcore developer and/or if you’re brand new to coding.

With that said, there are awesome resources out there to help you on your quest. To learn the basic fundamentals of programming, I suggest a beginner’s course. For a thorough understanding, I think it’s an invaluable investment to take free online CS introductory courses such as Stanford’s CS106A and B: http://see.stanford.edu/see/courses.aspx. These courses will teach you the basics that will give you enough knowledge to comfortably tackle most programming languages and books. I believe a course like this or your own university core CS coursework is a worthwhile investment if you’re serious about learning how to code.

If you’d prefer a quicker, less thorough route, there are other great courses such as: http://learnpythonthehardway.org/. I have not taken this course, but I’ve heard rave reviews about how it’s a great starting point.

After you’ve gain a solid grounding in programming, it’s time to pick a language and potential framework. That’s a tough cookie as there are tons of viable options, each with their own pros and cons.

For mobile apps, it’s easy. If you want to make iPhone apps, objective-C. If you want to make Android apps, Java. Stanford offers a great free course on iPhone development: http://itunes.apple.com/itunes-u/iphone-application-development/id384233225#ls=1. You can probably find similar courses and tutorials (albeit not as thorough) for Android out there with a little Googling.

For web apps, it’s complicated to pick a language. Ruby and Python are increasingly becoming the most popular for new web apps. PHP, Java, and others are still pretty popular for web apps. Each language has special frameworks with many helper functions, the most popular of which are Ruby on Rails (although I recommend checking out the simpler Sinatra framework to start out with), and django (Python). Do your research and figure out what most interests you and suits your needs. A few languages have fun tutorials to check out as a way to introduce you to them such as tryruby.org and railsforzombies.org.

Other resources:

  • Check out http://www.udemy.com/ for worthwhile programming courses (including Learn Python the Hard Way, discussed above)
  • http://stackoverflow.com/ for all your programming questions
  • reddit.com/r/learnprogramming for a friendly community to get help
  • If you’re on Windows, it is highly recommended that you move to a Unix platform like Ubuntu: http://blog.sudobits.com/2011/04/23/how-to-install-ubuntu-11-04-from-usb-or-cd/. You can dual boot your computer to load Ubuntu when you want to code, and windows for everything else (if you still want to use it). I can tell you from personal experience (and from many others’ experience), coding in Ruby in Windows is a pain in the ass. Other languages may have similar issues. Along with being a great programming environment, everything in Ubuntu is pretty much free, it’s more secure, and it’s fairly simple to install and use. If you’re on Mac, you’re probably fine, but Ubuntu and other Linux distros are options worth exploring :).

Distribution/Analytics

Unless you’re incredibly lucky, you’re going to need figure out creative ways to drive traffic and get users to your web app. You should learn the basics of web analytics to understand what metrics you need to improve in order to meet your goals.

A great starting point is Dave McClure’s AARRR metrics: http://500hats.typepad.com/500blogs/2007/06/internet-market.html.

To get your hands really dirty in learning sales funnels and marketing channels, you’ll need to read David Skok’s blog: http://www.forentrepreneurs.com/.

A great way to drive traffic to your site for free is by getting high ranks in Google searches through SEO (Search Engine Optimization). Some sites may even depend on most of their traffic from SEO. Learn the basics: http://www.seomoz.org/beginners-guide-to-seo. Check out the other articles on SEOMoz to get a deeper expertise.

A big buzz word surrounding startups is “viral.” A common misconception is that you can turn any app into a viral app or depend on it as your main source of traffic. YouTube and Zynga are perfect examples of driving ridiculous amounts of traffic through virality, but they are the exception, not the rule. Don’t expect your app to go viral. However, you still have a decent chance of getting significant traffic through virality optimizations. Gain a basic understanding through one of my old blog posts: http://www.trueventurestec.com/2011/07/14/virality-for-zombies/ and get in depth lessons through David Skok’s posts. After you understand how virality works, the key to optimizing it is to give the user a compelling reason to share something in the simplest way possible.

Other resources:

Misc startup stuff

I know this was a massive post, but hopefully you’ve found any useful tidbits in here. Please feel free to email me for any help or just to chat (lgvital (at) stanford (dot) edu).

Leave a Reply

Your email address will not be published.

*