"从头开始的单页应用"

Question

我一直在单页应用程序上开始工作.(想想TiddlyWiki)

自从我做了严肃的网页设计以来已经有一段时间了.上次我建一个大网站是pre-css,pre-javascript,pre-html5,即HTML加上很多cgi脚本,在我的例子中,主要是在PHP中.多年来我一直在学习新技术的片段,但不是以任何有组织的形式.

我认为是时候回到原点并通过一系列越来越复杂的页面/网站 - HTML - > HTML + CSS - > Javascript - > HTML5函数.....

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

谢谢!

Answer 1

就个人而言,我建议你正确地学习HTML和CSS,在考虑javascript之前(特别是在考虑SPA之前),让它工作和运作良好.这是我最近为某人写的一个小指南,可能对你有所帮助:

因此,有一些事情你必须考虑并理解为CSS主人(按照我认为的重要性顺序):

1. 选择
2. 级联
3. 特异性
4. 盒子模型
5. 定位/浮动
6. HTML

选择器允许您在页面上定位元素,没有选择器,您可以做很少的事情(除了将元素规则添加到元素内联 - 糟糕的做法!),所以这是一个很好的起点.了解选择器如何工作及其支持.

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

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

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

特异性确定将哪些规则应用于给定元素.大部分时间都可以避免,你可以继续无知,但理解它会驯服你的选择器并阻止你与自己进行军备竞赛,为选择器添加更多和ID以应用你的风格(如果没有意义,你不明白特异性,请继续阅读!)

• 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/ < - 这可能有点硬核/前沿
• 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

最后一件事 - 以及网络的强大功能 - 是所有网站都是有效的开源*,因为您可以查看网站的所有 CSS/HTML/JS.下次你看到一些有趣的东西,只需破解开放的萤火虫并试着了解发生了什么,改变价值观,看看它有什么影响.了解其他人如何组织他们的标记,他们如何设计样式,他们通过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 添加了更多元素标签。

我会做的就是制作一个基本的网站，然后慢慢地向其中添加新功能，同时按照教程尝试将其变成您自己的网站。