我一直在单页应用上开始工作。 （想想TiddlyWiki）
自从我做了严肃的网页设计以来已经有一段时间了。上次我建立一个大网站是pre-css，pre-javascript，pre-html5，即HTML加上很多cgi脚本，在我的例子中，主要是在PHP中。多年来，我一直在学习新技术的片段，但不是以任何有组织的形式。
我认为现在是时候回到原点并通过一系列越来越复杂的网页/网站 - HTML - ＆gt; HTML + CSS - ＆gt; Javascript - ＆gt; HTML5功能.....
这让我想知道是否有任何类似于“Scratch的Linux”的教程 - 但是专注于“从头开始的网站？”或者至少是一系列以HTML hello world开头的教程，并以逻辑方式逐步添加功能？
谢谢！
答案 0 :(得分：8)
我个人建议你正确学习HTML和CSS，在考虑javascript之前（特别是在考虑SPA之前），让它工作和运作良好。这是我最近为某人写的一个小指南，可能对你有所帮助：
因此，有一些事情你必须考虑并理解为CSS主人（按照我认为的重要性顺序）：
选择器允许您在页面上定位元素，没有选择器，您可以做很少的事情（除了将元素规则添加到元素内联 - 不好的做法！），所以这是一个很好的起点。了解选择器如何工作及其支持。
接下来要理解的是最重要的一个主题，这将避免你不必要地编写太多的CSS - 级联！
特异性确定将哪些规则应用于给定元素。大部分时间都可以避免，你可以继续无知，但理解它会驯服你的选择器并阻止你与自己进行军备竞赛，为选择器添加更多和ID以应用你的风格（如果没有意义，你不明白特异性，请继续阅读！）
每当我和人们谈论CSS时，大多数人都会理解字体样式，背景和所有爵士乐。那是因为它是简单的东西;-)人们似乎总是遇到麻烦的领域是理解定位和浮动。这些都与盒子模型相关联，所以首先要了解它，然后进入定位和浮动：
不要担心，如果你的思想在这一点上被吹了一点，它们的概念相当混乱！
但是没有标记的CSS是什么？或者更确切地说，没有良好HTML 的好 CSS有什么用？我认为，要对CSS有一个很好的理解，就是要对HTML有一个很好的理解。以下网站包含大量有关HTML的信息：
对于第一次学习，它们可能有点太深，所以我也重点推荐以下书籍：
他们都向您展示了如何使用CSS编写好的语义标记和样式来创建出色的结果。我知道，那么，当你拥有互联网时，谁需要这个时代的书籍？！这些书很棒，而且价值100％。
一些不太有针对性的建议，但是用于一般CSS / HTML学习的良好资源：
最后一件事 - 以及网络的强大功能 - 所有网站都是开源 *，因为您可以查看所有 CSS / HTML / JS为一个网站。下次你看到一些有趣的东西，只需破解开放的萤火虫并试着了解发生了什么，改变价值观，看看它有什么影响。了解其他人如何组织他们的标记，他们如何设计样式，他们通过CSS委托给javascript的功能等等。
在您了解了上述所有内容之后，您可能会想到一些尖端的CSS。用于玩一些CSS3技术的方便网站：
这就是我现在能想到的一切！当然，就像掌握任何东西一样，你所做的阅读量不是多少，而是你练习的内容。只有当你在实践中与这些事情斗争时，你才能真正获得洞察力并加强自己的心智模式。
至于JavaScript，假设你知道一些编程（假设你提到了CGI和PHP），我衷心建议你观看Douglas Crockford的一些视频，这些视频可以在这里找到：
Crockford是JavaScript的大师，负责一些重大进步（他发明了JSON并启动了JSLint）。 YUI剧院视频特别优秀且非常详细：）
答案 1 :(得分：1)
对于某些工具和“调试”，看看你的东西是否正常，我会使用：JSfiddle
此外，w3schools对于理解这些概念非常有用。
CodeAcademy上的HTML5和Javascript曲目也可能对您有帮助。
很多内容仍然相同，只是CSS和JS添加了更多功能，HTML5添加了更多元素标签。
我要做的就是创建一个基本网站，然后慢慢添加新功能，同时按照教程尝试使其成为您自己的。
答案 2 :(得分：0)
我也加2美分。这里有一些很好的系列，用于学习HTML，CSS，整体网站编码/设计过程以及其他我认为非常好的有用信息：
我可以发布更多，但为什么如此 - 这些足以让我们保持良好状态。我建议你从他们开始，你会发现更多的资源。
答案 3 :(得分：0)
答案 4 :(得分：-1)
如果您想制作SPA，请让我建议一个完全不同的方法，您不一定要从HTML / CSS级别开始：www.amber-lang.net
“Amber语言深受Smalltalk的启发。它旨在使客户端开发更快更容易.Amber包括一个带有类浏览器，工作区，单元测试运行器，脚本，对象检查器和调试器的实时开发环境。
Amber本身就是编写的，包括编译器，并编译成高效的JavaScript，与JS等价的一对一映射。“
检查出来，真的很酷。