We Keep Coding

Building websites using JavaScript frameworks

I have learned and can read/write code in JavaScript. I am a backend engineer by profession and want to learn how to build websites. I have gone to the point where I can build wireframes and start writing basic HTML. I've never succeeded in creating a complete webpage, because they always looked awful midway through.
I've seen many JavaScript frameworks (like Bootstrap, Backbone.js, and others) that one can use to create websites.
Which framework(s), if any, should I use? Which would you recommend I use to start building websites (and why, if applicable)?

I wouldn't recommend you using a JavaScript-framework to build your entire website. I would only recommend JavaScript to enhance your website with cool features.
I'm not sure what type of website we're talking about, but if you're planning on getting traffic from search engines — think twice.
Google aren't that good at reading content embedded in JavaScript. Meaning: your SEO will be terrible if you choose to build the website entirely in JavaScript.
HTML/CSS is easy, man. I'm sure you'll be able to learn that in a one day — tops! You're a backend engineer by profession for gods sake, HTML can't possibly be that hard to get a grasp of :)

I was in your exact shoes not so long ago - I'm a programmer and had no issues picking up the backend programming that is required of websites, but when designing the web page is something I just could not do. I would end up with terrible looking web pages which was very discouraging.
One great way to get around this is use HTML/CSS templates - there are plenty free ones available. Download one you like, then go through the CSS and change as much of it as you need to personalise your site. This process will also give you a great understanding of how CSS works, and how it should be used to design a page.
After doing this a couple of times, you will be confident/able enough to design a webpage from scratch. If not, continue using the templates. No harm in that.
As others have already mentioned, for a powerful, dynamic website you will need a server side language as well. Javascript frameworks like jQuery are nice for the front-end for the website. For the back-end you can try CakePHP, CodeIgniter etc., or just code the back-end from scratch. Doesn't seem that would be a problem for you.
Some sites that provide free HTML/CSS templates:
CSS Creme
FreeTemplatesOnline
Most of them are optimized for 1024x768 which might seem a little outdated for a few. Try tweaking the CSS code to make the template suitable for your purposes - change images, width etc.

You can't exactly build a website using JavaScript. You could, but that would be very inefficient...I recommend going through some HTML tutorials, as you (and the websites you build in the future) will benefit a lot from the fact that you use HTML primarily, and enhance it with JavaScript. After all, JavaScript can't do much in comparison to HTML (since in order to build a site with JavaScript (or my interpretation of what that is), you need to have a basic understanding of HTML).
Unless I misunderstood your question, then that's about it. Frameworks like jQuery can really enhance a page and make it beautiful and, fortunately, much more user-friendly.

You can't create a website (at least a dynamic one) without a server side language. There you can pull from a number of languages.
If you are just a JavaScript fan, then you can use server-side JavaScript code as Node.js. On the client side you can use jQuery and you can have a supporting database like MySQL.

Can I start with jQuery (or Node.js) with "NIL" knowledge of JavaScript?

[Disclosure: This question is slightly related to my previous question.]
As you can see, a few suggested that I learn JavaScript / jQuery / Node.js. From what I've read, (a) jQuery is a JS library that makes coding in JavaScript (that works across all browsers in one go) easier, (b) Node.js is a basically a server-side JavaScript environment, (c) Javascript is the root programming language of the aforementioned ones, and is client-side.
I have also read many questions regarding the same on SO, but for someone (like me) who has nil knowledge of any kind of programming, somethings aren't clear.
(1) Basically, my goal is to write a (real-time) live blogging/commenting application for my blog. This, I have learnt, requires a client-side scripting language like JavaScript. So, the question is, can I build such an application with (a) jQuery alone (b) Node.js alone?
(2) If the answer to (1) is YES: Do you think going with the server-side option - - Node.js would be better? (as jQuery definitely doesn't work on JS-disabled browsers, I don't know about Node.js.) Please advise.
(3) When I got a book for XHTML, the book got me started with HTML, and gradually took me into XHTML. So, there was no confusion between HTML and XHTML. Would that be the case with (a) jQuery and (b) Node.js too?
EDIT: (4) There's one problem with JS. Some users may have JS disabled in the browser. Is there any other client-side scripting alternative as good as JS? (Just asking)
That is, in order to learn, (a) jQuery or (b) Node.js should I first learn, JS or can I start with a beginner's jQuery or Node.js book right away? Which would be the right way?
I really need your advise here, as I am totally new to programming (and have very little time to study), and I am pretty excited of what's ahead.
(I used (a) jQuery and (b) Node.js whenever possible to denote that you consider them separately, and not think that I will be learning both. I can only choose one, at least for now.) Thanks.
DECISIONS! DECISIONS! For someone who may come here in the future searching for the same... From the answers it's clear that one can start with jQuery, and end up learning pure JS through practice (building applications, solving issues etc). It seems the learning curve, that way, would be longer?! (Because you end up having problems, keep trying to solve them, maybe lose confidence... blah! blah! blah!) Still that's good. What I've chosen is the straight forward way - JS first (until I feel like I've got some hold), and then go go jQuerying! I hope I am not wrong in my conclusion. :) {Thanks #Greg Pettit and #Pete Wilson}

Node.js and jQuery perform two different roles. One facilitates server-side JavaScript, the other provides an abstraction library for client-side JavaScript. It's not one or the other. The question has to be branched into two directions:
What server-side technologies do I want to use? Is PHP+MySQL (a known commodity) going to do what I want on the server side? Should I use something I'm already familiar with (ASP or whatever)? Or do I like the projected performance benefits and scalability of Node.js to jump into that? Does Node.js have mature enough Database classes to actually use it for my purpose?
On the client-side, do I want to write everything with 'pure' JavaScript, or do I want to use a framework? If I use a framework, should I use jQuery because it seems to be the most widely-known, or do I research other frameworks that might do what I want? Furthermore, should I look into web application frameworks like Kendo UI or jQuery UI or piece it together with a JavaScript framework?
At some point, someone is going to tell you if you don't know JavaScript at all that you should start with pure JavaScript so that frameworks don't corrupt you. Me, I say phooey. You want to get stuff done. You don't want to spend your hours jumping through hoops when you could be just getting stuff done.
If you jump right into a framework (say, jQuery) instead of learning JavaScript properly, there are things that you will learn eventually anyhow. Before too long you'll realize that you didn't need to use $(this).attr('id') when you could've just used this.id. But it doesn't matter, because the former worked until you learned the better way.
I'm a former educator and very much in support of seeing results quickly, because it will propel you to learn more. Just because you start with jQuery doesn't mean you'll forever ignore 'pure' JavaScript. If you are an intelligent problem-solving kind of person, eventually 'pure' JavaScript will find you, and you'll begin to identify the right time to use it, and the right time to use a framework.

You should definitely start with learning Javascript first. I would read Eloquent Javascript to learn javascript at first. Then, learn jQuery and then node.js. For jQuery, I would say you should read jQuery in Action to learn jQuery.

For most web-applications, you need a server-side part. For the application you want to do, you need client-side Javascript. You'll have to do both parts.
For the server-side part, you can use whatever you please, whether it's Node.js, or PHP + the myriad PHP web frameworks, or anything else that can respond to HTTP requests.
Node.js and jQuery serve completely different purposes, it's unlikely you'll find a book that deals with both, and if you do, there's no "smooth" progression between the topics I can imagine.
jQuery does make use of certain idiosyncracies of Javascript (rebinding this), some of its nontrivial features (anonymous functions), and introduces several patterns on top (using literal objects for named/optional function arguments), so I'd recommend looking into JS at the moderately advanced level rather than just muddling though.

You should read javascript the good parts by Douglas Crockford, make a hello world with pure node.js then use express.js + socket.io or now.js. and mongodb for data persistence

Well it goes without saying to learn library of any language you need to learn the laguage first. But how you want to learn it is your choice, some people prefer to start with the library first then traverse bottom up to cover the basics of the language, while some other likes to get their hands dirty with basics of language before trying out advanced syntaxes and libraries.
To add to it I should also mention jQuery and Node.js are totally different things and have different learning curve too.
Node.js is more of a concept to enable javascript run at server side with asynchronus programming inbuilt. To learn node you will be learning some server level APIs like file streaming, logging, file system operations, callback etc which are typically server level tasks.
Whereas to learn jQuery you would learn how javascript operate of doms and events, css , ajax etc on a webpage to alter those pages dynamically.
From application/website building point of view I would say to get started you need very little knowledge of nodejs but more knowledge of JQuery.
PS: If you are looking to build an website today in 2017 I would suggest to avoid jQuery altogether and go for client frameworks like angular/react.

How to start developing Javascript apps?

I started out with Rails development, but soon I realized Rails without JS is pretty much useless. So, I am trying to play with JS in my free time.
So, what are the "tools of trade (IDEs if any)" for JS development?
My primary focus is usage of APIs, Ajax etc, so that I don't get lost when I get develop Rails apps which uses JS.
There are many tutorials for using JS for Open graph API or twitter API, but that is to get things done and abstract some feature sets which a beginner should know.
I generally start learning a language by making a calculator, end to end (always works for me). But I cannot make a calculator and use API/Ajax calls.
So, what are your suggestions?
PS: I am aware about Douglas Crockford's video lectures, they are awesome, but I need some thing more concrete.
UPDATE:
My 2 original questions:
1. What are the tools of trade for JS? Like Eclipse:Java::X:Javascript, What is X (multiple Xs are allowed)?
2. What sample app do you recommend for me to start with?

I think the most important thing is: Know your language!
JavaScript libraries are useful, but if your do not know the language, you have no chance of getting something done that cannot be achieved using your library of choice. For example: JavaScript's prototype-system is very valuable and important for building robust applications. I really recommend that you experiment with this before diving into something you barely know. Closures are also very important to understand.
One thing is important, though: Do not spend too much time on browser incompatibilities. This is what most libraries are for. What you need to know is how the language works. Implementation-specific things are not worth learning (in most cases), since somebody already fixed those for you.
#PS: Douglas Crockford indeed does a pretty awesome job on explaining how JavaScript really works. You should keep watching this.
#UPDATE:
I think the X has it's origin in JavaScript's MIME-type: application/x-javascript. My tool of choice for web-development (including JavaScript) is NetBeans IDE. I use it in my workplace and it is very reliable and comfortable to work with. This is subjective (of course). Most other IDE's will do, too.
This is difficult to answer. I will update my post if something comes to my mind.

(I realize my comments below typically refer to using javascript with regards to websites, so ymmv if you're using js for a different environment, like couchDB)
For an ide, any text editor will do, but I prefer convenient features like:
syntax coloring (because it's so pretty)
(s)ftp plugins - makes saving files convenient
I would probably go with something like notepad++, or aptana studio (although I find aptana to be a bit of overkill at times, but very powerful). Adobe Dreamweaver works nicely too, if you wanna pay. Otherwise, the bare minimum would be notepad and an ftp client (again, with regards to front-end web development work)
For debugging or trying out quick javascript, I find safari's and chrome's built-in development tools handy, but on firefox, it's firebug all the way. Firebug is awesome.
I notice that in my work environment that some people (particularly the business side) use the words javascript and the DOM interchangably, but I find that their attempts at explaining something simply leads to confusion. That being said, if you're writing web apps, I find the mozilla DOM reference to be pretty awesome and used to hit it up all the time before I got familiar: https://developer.mozilla.org/en/DOM
Actually developer.mozilla.org is overall pretty awesome.
Other than that, getting started is simply a matter of learning the syntax. I would probably get used to the syntax first (which should be pretty quick anyways) before I start thinking about other concepts like learning how to prototype and whatnot (which you can look up on this site).
A framework like jQuery is very convenient for various repetitive tasks, but I wouldn't necessarily jump straight into using jQuery without being familiar with the js syntax first.

The most important thing you should learn is jQuery. It is now the de facto standard javascript library.
jQuery is great regardless of what you are doing with it, but since you mentioned AJAX, I'll point out that jQuery makes AJAX stupid easy, because you can do things like this:
$.ajax({
url: 'some/ajax/endpoint',
success: function(data) {
// do something with data
}
});
Obviously there are a lot of other options you can pass along, but the basic structure is really simple and easy to use.
jQuery also has a really powerful syntax for selecting parts of the DOM and adding events. For example, if you wanted to catch anytime some clicked on an image and tell them the image src, you can do something like this:
$('img').click(function() {
alert($(this).attr('src'));
});

Introductory JavaScript programming task for an expert developer

What would be a good mini-project to get intimate with JavaScript, as an advanced 'introduction' to the language? I want to actually code an application in JS, not hook up bits of it to enhance a web application.

A lot of stuff you could learn by doing an RSS reader on a page. Google shows what can be done. The whole lection concentrates on javascript, network access, security restrictions and medium data mangeling.
If you have the ability to do any sort of backend programming than AJAX is really neat to do. You can get a lot of good effects with less efforts. A good thing to build on up.

I would argue that if you're really an advanced programmer then the exercises above would not really give you any insight into the language as they are just variations on things you probably have already done. Javascript's strongest suit is it's LISP style ability to grow. Write something AI(ish) that creates new functions. Most people don't utilize the language in this way, but, its ability to augment its own classes on the fly is, I would argue, it's most unusual and most powerful feature.

Although not a project, watch the Douglas Crockford videos at YUI theater.
The biggest web based Javascript projects are going to deal with the DOM. Do some nifty stuff with JQuery. Make a table with rows that highlight when you hover. Make them update themselves through AJAX and JSON when you click on them.
If you're really looking for something magical and usefull write a scrollable table with fixed headers and footers for IE8.
If you want to stay away from the WEB use the JDK 1.6 and run Javascript code in that. You could do TONS with that.

Whenever I'm trying to get familiar with a language, I will work on Project Euler problems with it.

I would implement a simple game like sokoban first.
The second application would be an AJAX-based multiuser chat application, first fetching other people's responses by polling, later with AJAX push.

Interesting question.
Really you could do any sort of application. In order to make sure you're using the latest and greatest stuff, I'd try making a simple CRUD style application using DHTML and AJAX. Perhaps a contacts list or calendar. If you're feeling really energetic, you could write the back-end in JavaScript as well.
Unless you want to get really friendly with the DOM and browser compatibility, I'd learn Javascript through the mask of one of the nice frameworks like Jquery or Prototype.

The Holy Grail - a WYSIWYG editor. They wouldn't need to complete it, but just seeing their plan of attack would be interesting. Plays right into patterns and OO.

I suggest you create a Google Gadget. You can create one for free and perhaps make something useful out of it. If you don't have a Google account, sign up for one. Then add the Google Gadget Editor to begin writing your code.
With the gadget, you'll be able to mess with JavaScript, JSON, CSS, etc. Furthermore, you'll be able to store the file on Google's server so you can work on it from any computer.
I created a simple RSS reader and wrote JavaScript to get the feed (using Google's API) then dealing with that JavaScript object because it came back as JSON. I then developed some JavaScript to hide/show div tags.
It was a good starter project for me to learn JavaScript.

Get JavaScript the Good Parts by Douglas Crockford. Also check out his web site: http://www.crockford.com
Key reason: just because JavaScript looks like C/C++/Java/C# doesn't mean it actually is like them. Things are significantly different. I suggest reading his book to get a grasp of those differences.
Otherwise, I would look at the JQuery web site. JavaScript is cool and all, but a good framework will save you from a lot of the pitfalls and make you much more productive faster.

try making an advanced AJAX application like for example try to recreate the google calander.

How about a firefox plugin to monitor StackOverflow? It could use RSS to monitor feeds and let you know when new questions are asked with your tags.
It could also be grown as your js skills progress.

Write yet another javascript framework, but focused specially in something, ie game programming.

Metalanaguage to describe the Model from MVC to generate identical client and server side code

I am looking for a powerful meta-language to describa behaviour for an application i intend to use in offline mode (google-gears + javascript) and server side sqlite + (php/ruby/java etc) and looking for a good format to describe the model's behaviour which can be easily converted to the target languages.
Am I completely off track, and there is a much better way?

Have you looked at Google Web Toolkit? GWT allows you to write server side Java objects which get translated into Javascript for you. This allows you to not deal with the browser quirks at all.
I'm not sure how well integrated the Gears and GWT projects are, however. If it isn't integrated yet, I'm sure it will be in fairly short order.
Edit: This is probably more of an alternate way of doing what you're looking for, rather than a suggestion for a meta language.

This may be out of your scope, but maybe you should consider sproutcore. From what I understand, it's a bundled up MVC architecture that can be backend-agnostic.
I don't have much experience with it, but it sounds like some of the consumers (apple's MobileMe for instance) want to do the same thing you do.

Maybe you should consider using Script#?