"single page app from scratch"

Question

I've been starting work on a single page app. (think TiddlyWiki)

It's been a while since I've done serious web design. Last time I built a big site was pre-css, pre-javascript, pre-html5, i.e., HTML plus a lot of cgi scripts, in my case, mostly in PHP. I've picked up snippets of the new technologies over the years, but not in any organized form.

I figure it's time to go back to square one and work through a serious of more and more complex pages/sites - HTML -> HTML+CSS -> Javascript -> HTML5 functions.....

Which leads me to wonder if there are any tutorials floating around akin to "Linux from Scratch" - but focused on "web site from scratch?" Or at least a series of tutorials that start with HTML hello world, and progressively add features in a logical way?

Thanks!

Answer 1

Personally I suggest you learn HTML and CSS properly, get that working and working well before even thinking about javascript (and especially before thinking about SPAs!). Here's a little guide I wrote up for someone recently that may be of help to you:

So there are a few thing which you must consider, and understand, to be a CSS master (in my opinionated order of importance):

1. Selectors
2. Cascade
3. Specificity
4. Box model
5. Positioning/floating
6. HTML

Selectors allow you to target elements on a page, without selectors you can do very little (apart from add style rules to elements inline – bad practice!), so it’s a good place to start. Understand how the selectors work and their support.

• http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

The next thing to understand is one of the most important topics, which will avoid you writing too much CSS needlessly – the cascade!

• http://reference.sitepoint.com/css/cascade

Specificity determines which rules are applied to a given element. Most of the time it can be avoided and you can proceed with ignorance, but understanding it will tame your selectors and stop you getting into an arms race with yourself, adding more and IDs to selectors to get your styles applied (if that makes no sense, you don’t understand specificity, read on!)

• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Whenever I talk to people about CSS, most people understand font styling, backgrounds and all that jazz. That’s because it’s the simple stuff ;-) the areas where people always seem to have trouble are in understanding positioning and floating. These are both tied to the box model, so first thing is to learn that, then move onto positioning and floating:

• http://css-tricks.com/the-css-box-model/
• http://www.alistapart.com/articles/css-floats-101/
• http://www.alistapart.com/articles/css-positioning-101/

Don't worry if your mind is blown a little at this point, they're fairly confusing concepts!

But what is CSS without markup? Or rather, what use is good CSS without good HTML? I think, to have a good understanding of CSS is to have a good understanding of HTML. The following websites contain masses of info about HTML:

• http://diveintohtml5.info/
• http://www.html5rocks.com/en/ <-- this can be a bit hardcore/cutting edge
• http://html5doctor.com/

They may be a little too deep for first learning, so I’d also heavily recommend the following books:

• http://simplebits.com/notebook/2009/06/09/wssse/
• http://easy-readers.net/books/adaptive-web-design/

They both show you how to write good, semantic markup and style with CSS to create great results. I know, right, who needs books in this day and age when you have the internet?! Well these books are awesome, and are 100% worth the cost.

Some less targeted suggestions, but good resources for general CSS/HTML learning:

• http://www.alistapart.com
• http://www.smashingmagazine.com
• http://www.css-tricks.com

One final thing – and a great strength of the web - is that all websites are effectively open source*, in that you can view all the CSS/HTML/JS for a website. Next time you see something interesting, just crack open firebug and try to understand what’s going on, alter the values, see what effect it has. See how others organise their markup, how they style things, what functionality they delegate to javascript over CSS etc.

After you’ve understood all the above, you may fancy dabbling with some cutting edge CSS. Handy websites for playing about with some CSS3 technologies:

• http://css3please.com/
• http://www.colorzilla.com/gradient-editor/

That’s everything I can think of at the moment! Of course, as with mastering anything, it is not how much reading you do but rather how much you practice what you read. Only when you struggle with these things in practice will you truly gain insight and strengthen your own mental model.

As for JavaScript, assuming you know some programing (given you mention CGI and PHP) I heartily recommend watching some of Douglas Crockford's videos which can be found here:

• http://javascript.crockford.com/

Crockford is a master of JavaScript and is responsible for some big advances (he invented JSON and started JSLint). The YUI theatre vids are particularly excellent and incredibly detailed :)

Answer 2

For some tools and 'debugging' and seeing if your stuff works I'd use: JSfiddle

Also, the w3schools are great for basic understanding of those concepts.

The tracks for HTML5 and Javascript at CodeAcademy may also help you too.

http://www.codeavengers.com/

A lot of it is still the same, it's just that CSS and JS have added even more functionality and HTML5 has added more element tags.

What I would do in your place is to make a basic website and then slowly add new features to it while following along with the tutorials to try and make it your own.