To build a website you can use HTML/CSS and JavaScript. HTML/CSS are not Turing complete programming languages. You can do static pages using only HTML.  Fortunately the web browsers are programmable platforms. You can interact with these programs using JavaScript.

Front end

For the web user interface you can use a responsive framework like Twitter Bootstrap. This will help you to get started quick without writing CSS. Front end user interface can by responsive or static. If you use Bootstrap and JavaScript you will be able to build faster and responsive user interfaces,

A responsive user interface is changing it’s appearance depending on the browser window size. If you have a small screen like a tablet or a phone your web site will still look good and will be readable.

Back end

You can write back-end programs using any of the following languages: ASP.NET, Python, Java, PHP, Ruby … In general each language has it’s own back-end framework.

JavaScript has evolved and now you can do the back-end using JavaScript. The idea is to use a singular base language for both back-end and front-end. This will give you productivity.

For JavaScript back-end you need to use a Node.JS engine and a Web Framework. This framework can be Ember.js, Angular.js or React.js. I think the best framework right now is Ember.js but also Angular.js is very popular.

Resources:

http://emberjs.com/
http://angularjs.org/
http://w3schools.com/

Setting-up the project

Here’s some things you must do to set-up a project. At the beginning you may be working alone but you will probably add some more people in a few months and it’s not going so smoothly if you do not set-up the project properly. Let’s say you currently work at a company on some big Web development , software & programming projects. You do everything by yourself from back-end to front-end. What is wrong with this?
It is not very good to do all by yourself. In computer programming we work in a team. Somebody is doing something and someone else is doing something different. The collaboration is helping team members to learn from each other. This is how we can build larger projects.

The 10 steps to create a project

  1. Firs you must learn to use a version control software, preferably git or mercurial. You check-in the empty project from the beginning. Do not wait until the project grow, it may be too late.
  2. Write unit tests. I’ve always scoffed at them because they only test the cases you’ve thought of, and you probably already thought of them when you wrote the code you’re testing, but once your project grows and you add people to the team, you’re going to wish you’d done it.
  3. Have separate development, test and production servers so you can have people looking at your stuff on test while you break stuff on development environment. Use a labeling or branching system in your version control so you can always go back to the code that’s running on each server. If a problem comes up in production while you’re working on a new whiz-bang new feature in development, you want to be able to put aside the new feature and fix it in the production version.
  4. Deploying code to development should be automatic as soon as you check in. Deploying to test and production should either be automatic or a single click.
  5. Make sure your boss and other stake holders actually look at the site on test before you deploy to production. Try to get some of the people who will actually use the site involved in usability testing. Listen to them, but don’t let them design the thing.
  6. Make sure your code has clear division of responsibility- don’t mix the access control in the middle of the business logic and the UI.
  7. Use a web framework like Twitter bootstrap. Sometimes you’ll be fighting with it, but it will take a lot of the burden of getting a consistent UI off your hands.
  8. Use a JS framework like Ember.js if you use JavaScript back-end.This will organize your application and you will have better integration between back-end and front-end.
  9. If you use Python, use a good back-end framework like Django or Flask that is lighter. Make sure it supports or at least doesn’t prevent you from doing AJAX and asynchronous backed work.
  10. Try to make responsive web pages using bootsrap. Your page should work on any monitor size from very large to very small ones. Some users use monitors in portrait mode and some are using multiple monitors. Having the applications design for a fix size monitor is a huge mistake.
Note: SageCode Instructors and Freelancers can create projects using a button. This is assisted by one of our SageCode founders. All you need is a good idea or a good vision of your project. After you set-up the project you can build on this idea a full specification. Do not have to be perfect from the beginning. A project is evolving with the specification.
Now you know. Starting a new project is easy  :).