Stage: Awesome Tools to Help You Build Quickly | Progress: 0%

Stage: Awesome Tools to Help You Build Quickly

View As Multiple Pages

In this section:

1. You will learn to build a great website.

2. You will learn about the resources and tools to help you build even if you have no tech background. Some of them are as easy as drag and drop!


Learning how to code and build something has always been very hard. However, building a website or app these couple of years have become increasingly easy - thanks to all the new awesome technologies and tools that were built to help you build a product in the matter of days, instead of weeks or months. In this section, we'll share some of our favorite tools like Wordpress and other open source software we've used in the past, to help you get started.

If you want to build from scratch, you can create any first "working" version of your website or mobile app using Ruby on Rails + Bootstrap (HTML+CSS) + jQueryRuby on Rails is also very simple to learn or use this Rails TutorialBootstrap makes it super easy to build out a beautiful interface with modular CSS code approach. You can also post your question in StartitUp's Community to getsome help. StackOverflow is a question and answers website for coders that makes it insanely easy to get help for your coding needs.

Also, since the time needed to learn or build something definitely cannot be measured in minutes. Therefore, take the time-required is just the time needed to fully absorb the information.  

If you need to talk to someone about how to program, email me: [email protected]

We're also in the process of working with external partners to help you build. Stay tuned!

Fundamentals to building a product 10 Minutes

Any working website that you see is divided into at least 5 parts. Those parts being:

1. Back-end Programming - Think of this as the brains of the website. The back-end programming is the language that you use to design how the website behaves. Things like what a button does, and what events are triggered after another event happens, etc. are all considered back-end progrmaming.

2.  Front-end Design - Think of this as the skin of the website. The front-end has few to none functionalities. Everything you see in the browser is a part of the front-end design.

3. Database - Every long-term data inputted into an application is saved into the database. The database is basically a data-storing table, just like an Excel sheet. The software stores and retrieves information from the database.

4. Dymanic Webpage - This component makes a website dynamic. For example, Flash and animation on a website are all considered dynamic. This part also includes components that creates special effects on the webpage. However, when we are talking about a dynamic webpage in this stage, we are basically talking about Javascript.

5. Hosting - A physical computer server that resides remotely hosts your files on the internet. The files, which contain your code, is then served through a HTTP server (basically a language translator installed on the compuer server) specific to your programming language that translates your code into another language (HTML + Javascript) that your browser can understand, which then becomes the stuff you see in your browser.

Back-End Programming - Ruby on Rails 10 Minutes

Enter Ruby on Rails. Ruby is the programming language, and Rails is the framework for it. A framework is basically another layer that changes the native behavior of the programming language it supports. It has a library of prewritten features that just saves you time from having to code them from scratch.

Ruby also has this thing called "Gem"s that are pre-installed features or functions that you can install as plug-ins on the fly, and immediate use. This makes it so cool because in the past, you would have to write the whole function from scratch. With Gems, you can basically just install a feature that someone has already written, and it'll get that feature working for you. 

Ruby on Rails has made it so easy to program a MVP quickly and get it out to the public to get it validated, within in a matter of weeks or even days. So basically, what you would do with RoR is that you could theoretically just install gems for all of the features that you will need, tie them together, design your page, and then you're ready to go.


Learn how to code in Ruby on Rails in 1 month:

Update: Mattan Griffel is actaully operating a educational platform to help people how to code in Rails: http://onemonthrails.com/

To learn by building something like Twitter (The best RoR tutorial online):

http://ruby.railstutorial.org/

To install Rails:

http://railsinstaller.org/

Note: The best way to learn how to code is definitely not reading tutorial books. What you should do first is to skim through the tutorial above. You just need to learn the logic first. And then to really learn, the best way is by actually just getting down to do it. It's very daunting in the beginning, and trust me, you WILL struggle. However, at the end of it, you will come out a coder, and you will never regret any of the time you've spent on it. 

Having a mentor help you with parts you're stuck with is very helpful too, as it'd save you a lot of time to ask online or pull your hair out trying to figure it out.


Ruby Stuff

  1. Ruby on Rails – open source framework for Ruby
  2. Sinatra - another Ruby framework

Code Schools

  1. Udemy
  2. CodeAcademy
  3. CodeSchool
Front-End Programming - HTML/CSS/Bootstrap 10 Minutes

We're talking about HTML (HyperText Markup Language) and CSS here. HTML is the building blocks of a website that your browser understand. It's basically markups that tells the browser whether to display a header, a block, a horizontal line, etc. CSS is coding that adds style or design to all the elements on a webpage. So if you want to make a font bigger, a padding for a box bigger, a background color for a sentence - those are all CSS.

Master HTML + CSS at W3School

Lucky for us, we now have a design framework that just makes everything brainlessly simple. Enter Bootstrap. Bootstrap is a framework that has almost all the elements of a webpage pre-made for you. You can basically just copy and paste their template code to get a beautiful world class website design. They have modularized everything so that everything is in a block of code. In fact, 80% of StartitUp's website is built using Bootstrap.

Bootstrap templateThe template above from Bootstrap is a copy and paste template. You can just go to to this page and find the template you want and your landing page is done!.


Website Design Tools

  1. Twitter Bootstrap - Twitter toolkit for development of slick, intuitive webapps and sites
  2. Google Web Fonts - open API of 613 web fonts
  3. Subtle Patterns - free tileable textured patterns
  4. iStock Photos - Royalty Free stock photos and images
  5. ColorSchemeDesigner – find complementary colors
  6. ColourLovers – share colors, palettes, and patterns
  7. Meteor - open source platform for building web apps
  8. ThemeForest - site templates cheap
  9. Scraster- Record screen and webcam. Simple editing. Perfect for screencasts or user studies
  10. Microsoft WebMatrix - Web server, database, and ASP.NET and PHP
  11. AppMakr – Mobile Ap Creator create quick mobile apps
  12. EditMe - create collaborative websites
  13. GooglePageSpeed - optimize your web pages
  14. Launchbit - online web site class for novices
  15. Zencoder – online video converting/encoding/transcoding service
  16. Google: HTML, CSS and Javascript from the Ground Up
Database 5 Minutes

Rails comes with sqlite3, which is a light-weight database that comes with Rails. Unless if you need anything more advanced, this will be quite good enough for your MVP.

As mentioned, a database is just like an excel spreadsheet that a program can store and retrieve from. Every single piece of information or data is identified by an "id" or the row number that you have in Excel, which is used to identify and retrieve the information. The column names are the names of the fields.

Mysql Database

In the example above, this is an example of a database of a gas company. Lets just say you want to pull up the revenue earned from user 1 (id: 1), then you could ask your website to pull up that whole horizontal row of information and display or calculate that data, to be shown on the website or app.

To build a MVP, you don't need to worry too much about this right now. Also, there are abundant resources on the internet teaching you the basics of databases. Like here: http://zetcode.com/db/sqlite/

Dynamic Webpage - Javascript/jQuery 10 Minutes

All the elements on a website is more or less inanimate unless if you spice it up with some Javascript or Flash. Flash is pretty old news now so we wouldn't suggest using it unless if there is such a special need for it.

Javascript is also a kind of programming language that alters a website when it is loaded. For instance, if you want your page to show a popup when a button is pressed on, Javascript can make that happen. If you want to replace the visual look of your scroll bar, Javascript will do that too. 

Again, lucky for us, jQuery is a Javascript library that also has almost everything you will need pre-written for you, so all the special effects from popups, to mouse hover animation, etc. you may need for your website are readily available for you to plug-in and start using. jQuery is so popular that almost every website you visit uses jQuery.

See some great jQuery examples here


JavaScript

  1. Node.js -  event-driven I/O server-side JavaScript environment based on V8
  2. Express - web development for Node.js
  3. JSON - lightweight data-interchange format, subset of Javascript
  4. SproutCore - open-source JavaScript framework
  5. jQuery - cross-browser JavaScript library
  6. Cappuccino - JS development framework
  7. JSFiddle - preselect/add JavaScript frameworks and test your code
  8. Baseline for front end developers - good summary
Developing for Mobile Apps 5 Minutes

If in case you are developing for mobile, here are some tools below that you can use to build your mobile app.

Tools you can use to develop your mobile app:

  1. Phonegap - a free and open source framework that allows you to create mobile app using standardized web APIs for the platforms you care about.
  2. RhoMobile - RhoMobile makes it easy for you to develop native apps that spans over a wide range of OS' and smartphones. THe OS includes Android, Windows, Symbian, iOS, and RIM. 
  3. Appcelerator - Create & Manage Native Mobile Apps Across Devices
  4. Parse - An awesome SDK (software development kit) that makes hosting and managing your mobile app and its database a lot easier.
  5. Corono - A popular mobile app development platform
  6. trigger.io - a development framework that makes your website compatible for different patforms.
  7. Kendo UI - "Comprehensive HTML5, Javascript framework for modern web and mobile app development"
Build your website in days - Use Open Source! 30 Minutes

If you don't want to code everything yourself, there is another way. Dead easy way actually. You will lose some flexibility, but you will be able to launch your MVP a whole lot faster. You can possibly launch your product within a weekend using an open source script that has already been built by someone.

However, this option is more applicable if your product is not be too customized. These software are basically websites that have already been made, and are highly customizable so that you can just load it up and start customizing it by installing plugin functionalities that are like plug-n-play features that you can just install on the fly. 

There are also clone scripts for websites like Facebook, Twitter, Pinterest, Foursquare, Groupon, CNN, etc. Basically any popular website that you can think of.

Case Study: Groupon was originally run on Wordpress, which is an open source CMS (Content Management Software) platform. Groupon is basically a blog with shopping cart function that lets you make purchases. So using Wordpress, you can potentially launch your own group buying website in the matter of hours.


General/Powerful Open Source Scripts:

Wordpress - The most powerful open source CMS (content management system) - in our opinion. We're not talking about running a blog under Wordpress, but about downloading their script and running it yourself on a server. Wordpress is flexible with a lot of plug-ins that you can readily download from their adminstrator dashboard. With Wordpress, you can easily create a blog, a social network, an eCommerce website, a micro-blog, a news portal, etc. - basically anything you want to create. Some of the CNN sub-websites are also powered by Wordpress. 

Wordpress backend

Examples of Wordpress websites:

  1. MSNBC - http://tv.msnbc.com/
  2. Level 4 Storefront - http://wordpress.org/extend/plugins/levelfourstorefront/screenshots/
  3. Snoopdog Shop - http://www.myplaydirect.com/snoop-lion/features/28117500?current_country=US

Drupal - Another popular open source CMS platform

Joomla - Another great open source platform, but I feel that the management is a bit more complex than Wordpress

See comparison here: http://www.linuxforu.com/2012/05/winner-takes-all-wordpress-vs-drupal-vs-joomla/


Other tools:

  1. Check out Agriya, one of the biggest producers of high quality clone scripts.
  2. eCommerce Scripts: osCommerceZen-CartosCMaxPrestashopMagentoUberCartCS CartWordpress + Plugins (Try getshopped or cart66)
  3. Social Networks Scripts: SocialEngineWordpress + BuddyPressGroup.lyGrou.ps
  4. Twitter Clones: YonklyRevouFloopo!ScritterScriptJaikuPageCookery
  5. EchoWavesSweeter 3.0
  6. Forums: PhPBBIPBVBulletinInvision Power
  7. Yelp Clones: MeeplaceCrowdvox

Yelp Clone

This is what Crowdvox can give you right out the box

If you don't see the clone we've listed here, just google "(name of a website that is similar or has similar functions as your website) clone" For example, if I wanted to build something like Glassdoor, I could search for "Yelp Clone", as both of them are basically just location review platforms.

Website Builders 10 Minutes

There are also other services that could help you build up a website easily. The links are below. Most of those are not free, so if you'd like to get more convenience, you can consider these. otherwise check out the other open source options in the last task.

  1. Weebly – get a website up quickly with no tools
  2. Wix - free website builder
  3. Webs - Create a free website
  4. MoonFruit - Awesome website builder
  5. Squarespace - build an exceptional website
  6. Yola - get a website up quickly with no tools
  7. Easel.io - Design in your browser
  8. Edicy - Create a website
  9. Pagelines - build a website with WordPress
  10. Zozolo – start a website within Facebook
  11. GoogleSites - simple web host provider

Read: How Much Does a Website Cost?

Hosting 120 Minutes

After you are done with developing your website or your mobile app, you will need a server to host your files on the internet. In this section, we will help you choose a good hosting service to get you started.

There are different kinds of hosts. There are shared hosting, VPS (virtual private servers), dedicated servers, and cloud servers.

If you have not already found a shared hosting in an earlier section, please consider the different options below:

Shared Hosting - as low as $2/month - The easiest and cheapest one to set up, where they have the environment set up for you, and you only need to upload your website in able to start hosting it. In this case, you usually share the same computer with many other users. The downside is that the resources or security of your server isn't always optimal.

Some shared hosting providers also let you download and set up scripts on the fly. You could also just sign up, and put up a storefront right after you start your subscription.

Some popular shared hosts:

  1. iPage ($1.99)
  2. JustHost ($2.95)
  3. GoDaddy ($1.99)
  4. Fatcow ($3.15)
  5. WebHostingHub ($3.95),
  6. BlueHost ($4.95)
  7. InMotion ($4.17)
  8. HostGator ($3.96)
  9. GreenGeeks ($4.95)
  10. HostMonster ($3.95)

VPS (virtual private server) - roughly $20/month -  is one where a server or a computer is partitioned and you share the computer with few others. Usually you will need to administer the server yourself and will require a certain level of linux experience. If you want more flexibility, but do not want the cost associated with dedicated servers or the complexity of cloud servers, then this is the best choice. 

Some popular VPS: 

  1. Linode (this is what we are using)
  2. Slicehost
  3. Prgmr
  4. Rackspace

Read the comparison between them: http://uggedal.com/journal/vps-performance-comparison/


Dedicated Servers - roughly $139+/month - You get the whole server to yourself at a higher price. While this option does give you 100% control, it is not very necessary unless if you have a lot of users on your server initially. We do not recommend this to begin with.


Cloud Servers (AWS - Amazon Web Services, etc.) - ~$62.05/month - This option is the most flexibility and scalable way of building your service. However, not all services require this kind of infrastructure. The cloud allows you to quickly increase and decrease server resources and you are billed for how much you use and not by a monthly basis. This method also gives you security from hacker attacks, but is the most difficult to set up and is not very friendly for users who have had no experience with servers.

Still need help?

If after this section you still have questions about building the first version of your prototype, please email me: [email protected]. I'll try my best to help you set things up.

Stage: Outlining Your... Stage: Start Building