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) + jQuery. Ruby on Rails is also very simple to learn or use this Rails Tutorial. Bootstrap 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: ed@startitupco
We're also in the process of working with external partners to help you build. Stay tuned!
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.
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:
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
Code Schools
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.
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.
The 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!.
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.
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/
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
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:
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.
Examples of Wordpress websites:
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:
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.
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.
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:
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:
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.
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.
