Personally 我建议您先学习 HTML 和 CSS，掌握它们并使其正常工作，然后再考虑 JavaScript（尤其是在考虑单页应用之前！）。以下是我最近为某个人写的一份小指南，希望对您有所帮助：
要成为 CSS 大师，您必须考虑并理解以下几个方面（按我的主观看法排序）：
1. 选择器
2. 层叠性
3. 优先级
4. 盒模型
5. 定位/浮动
6. HTML
选择器可以让您在页面上定位元素。如果没有选择器，除了将样式规则直接添加到元素中（不好的做法！），您几乎无法进行任何操作。因此，这是一个很好的起点。请理解选择器的工作原理及其支持情况。
下一件需要了解的事情是最重要的主题之一，它可以避免您不必要地编写过多的CSS——层叠！
特异性确定了应用于给定元素的规则。大多数情况下，可以避免使用它，并且可以继续无知地进行，但是了解它将使您的选择器更加明智，并防止您与自己展开竞争，通过向选择器添加更多的 ID 来使样式应用（如果这没有意义，那么您不理解特异性，请继续阅读！）
每当我和人们谈论CSS时，大多数人都理解字体样式、背景等基本概念。那是因为这些都是简单的东西；-) 人们似乎总是在理解定位和浮动方面遇到麻烦。这两个概念都与“盒子模型”相关，所以首先要学习它，然后再进入定位和浮动的学习：
如果你的思维有些混乱，不用担心，它们是相当令人困惑的概念！
但是没有标记的CSS有什么用呢？或者说，没有好的HTML，好的CSS有什么用呢？我认为，要对CSS有一个好的理解，就必须对HTML有一个好的理解。以下网站包含了大量关于HTML的信息：
它们可能对初学者来说有些深奥，因此我还强烈推荐以下书籍：
他们都向您展示如何编写良好的语义化标记并使用CSS进行样式设计，以创建出色的结果。我知道，在这个时代，当你拥有互联网时，谁还需要书籍呢？！但是这些书籍非常棒，绝对值得花费。
一些不太针对性的建议，但对于一般的CSS/HTML学习是很好的资源:
最后一件事——网络的一个巨大优势是，所有网站都是有效的开源*，因为您可以查看网站的所有CSS / HTML / JS。下次你看到有趣的东西，只需打开Firebug并尝试理解正在发生的事情，更改值，查看其效果。看看其他人如何组织标记，如何样式化内容，将哪些功能委托给JavaScript而不是CSS等。
在了解了以上内容之后，您可能会想尝试一些尖端的CSS。以下是用于玩弄某些CSS3技术的便捷网站：
这就是我目前所能想到的一切！当然，就像掌握任何技能一样，重要的不是你读了多少，而是你实践了多少。只有当您在实践中与这些问题作斗争时，您才能真正获得洞察力并加强自己的心智模型。
至于JavaScript，假设您了解一些编程知识（考虑到您提到了CGI和PHP），我强烈建议观看一些Douglas Crockford的视频，可以在此处找到：
Crockford 是 JavaScript 的大师，他发明了 JSON 并开始了 JSLint，做出了一些重大的进展。 YUI 剧院视频非常出色，内容详尽 :)
