“单页应用从头开始”

Question

我一直在开发一个单页面的应用程序。(想想TiddlyWiki吧)

我已经有一段时间没有做严肃的网页设计了。我上一次建一个大网站是在css、javascript、HTML5之前，也就是HTML加上很多cgi脚本，在我的例子中，大部分都是PHP。多年来，我学会了一些新技术的片段，但没有以任何有组织的形式出现。

我认为是时候回到起点，浏览一系列越来越复杂的页面/站点了-- HTML+CSS HTML+CSS -> Javascript -> HTML5 functions.....

这让我想知道是否有类似于"Linux从头开始“的教程--但专注于”网站从头开始“？或者至少是一系列教程，从HTML hello world开始，然后以一种逻辑的方式逐步添加功能？

谢谢!

Answer 1

就我个人而言，我建议你正确地学习HTML和CSS，在考虑javascript之前(特别是在考虑SPAs之前)，让它们正常工作。这是我最近写给某人的一个小指南，可能会对你有所帮助：

所以，要想成为一名CSS大师，你必须考虑和理解一些事情(按照我个人认为的重要性顺序)：

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

选择器允许你在页面上定位元素，没有选择器你能做的很少(除了在元素内联中添加样式规则--这是不好的做法！)，所以这是一个很好的起点。了解选择器是如何工作的，以及它们的支持。

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

接下来要理解的是最重要的主题之一，这将避免你编写太多不必要的CSS -级联！

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

特异性确定将哪些规则应用于给定元素。大多数情况下，它是可以避免的，你可以在不知情的情况下继续下去，但理解它会驯服你的选择器，并阻止你与自己陷入一场军备竞赛，向选择器添加更多和if来应用你的样式(如果这没有意义，你不了解细节，请继续阅读！)

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

每当我和人们谈论CSS时，大多数人都了解字体样式、背景和所有这些东西。这是因为它是简单的东西;-)人们似乎总是在理解、定位和浮动方面遇到困难。这两个都绑定到盒子模型，所以首先要了解这一点，然后移动到定位和浮动：

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

如果你的大脑在这一点上有点混乱，也不要担心，它们是相当混乱的概念！

但是，没有标记的CSS是什么呢？或者说，没有好的HTML，好的CSS又有什么用呢？我认为，很好地理解CSS就是对HTML有很好的理解。以下网站包含大量关于HTML的信息：

• http://diveintohtml5.info/
• http://www.html5rocks.com/en/ <--这可能有点硬核/削减edge
• http://html5doctor.com/

对于第一次学习来说，它们可能有点太深了，所以我也强烈推荐以下书籍：

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

它们都向您展示了如何使用CSS编写良好的语义标记和样式，以创建出色的结果。我知道，在这个有网络的时代，谁还需要书呢？！这些书太棒了，而且100%物有所值。

一些不太有针对性的建议，但对于一般的CSS/HTML学习来说是很好的资源：

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

最后一件事--也是web的一大优势--所有的网站都是有效的开源*，因为你可以查看一个网站的所有CSS/HTML/JS。下一次你看到一些有趣的东西，只要打开firebug，试着了解发生了什么，改变值，看看它有什么效果。看看其他人如何组织他们的标记，他们如何样式化事物，他们委托给CSS上的javascript的功能等等。

在你理解了上面的所有内容之后，你可能会喜欢尝试一些最新的CSS。使用一些CSS3技术的方便网站：

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

这就是我目前所能想到的一切！当然，与掌握任何东西一样，重要的不是你读了多少书，而是你练习了多少你所读的东西。只有当你在实践中与这些事情作斗争时，你才能真正获得洞察力，并强化自己的心理模型。

至于JavaScript，假设你知道一些编程知识(如果你提到了CGI和PHP)，我强烈推荐你看看Douglas Crockford的一些视频，这些视频可以在这里找到：

• http://javascript.crockford.com/

Crockford是JavaScript的大师，并负责一些重大进展(他发明了JSON并创建了JSLint)。YUI影院的视频特别出色，细节令人难以置信:)

Answer 2

对于一些工具和“调试”，看看你的东西是否有效，我会使用：JSfiddle

此外，w3schools对于基本理解这些概念非常有用。

CodeAcademy上关于HTML5和Javascript的文章也可能对你有所帮助。

http://www.codeavengers.com/

很多东西仍然是一样的，只是CSS和JS增加了更多的功能，HTML5增加了更多的元素标签。

我会在你的地方做的是做一个基本的网站，然后慢慢添加新的功能，同时跟随教程，使它成为你自己的。

Answer 3

我也会加上我的2美分。这里有一些学习HTML，CSS，整体网站编码/设计过程和其他我认为非常好的有用信息的很好的系列文章：

• Begginers guide to HTML&CSS
• Advanced guide to HTML&CSS
• 30 days to learn NOT JUST HTML&CSS
• Web developer checklist
• Learn CSS layout
• Smashing magazine !

我可以发更多的帖子，但为什么会这样--这些足以让你保持体型。我建议你从他们开始，你会在路上找到更多的资源。