5

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!

4

5 回答 5

8

就我个人而言，我建议您正确学习 HTML 和 CSS，在考虑 javascript 之前（尤其是在考虑 SPA 之前！）让它们正常工作和工作良好。这是我最近为某人写的一个小指南，可能对您有帮助：

因此，要成为一名 CSS 大师，您必须考虑并理解以下几点（按照我认为的重要性顺序）：

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

选择器允许您定位页面上的元素，没有选择器您可以做的很少（除了向内联元素添加样式规则 - 不好的做法！），所以这是一个很好的起点。了解选择器的工作原理及其支持。

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

特异性决定了哪些规则适用于给定的元素。大多数时候它可以避免，你可以继续无知，但理解它会驯服你的选择器并阻止你与自己进行军备竞赛，向选择器添加更多和 ID 以应用你的样式（如果这没有意义的话，你不了解具体情况，请继续阅读！）

每当我与人们谈论 CSS 时，大多数人都了解字体样式、背景和所有爵士乐。那是因为它是简单的东西 ;-) 人们似乎总是在理解定位和浮动方面遇到困难的领域。这些都与盒子模型相关联，所以首先要学习这一点，然后再进行定位和浮动：

如果您在这一点上有点震惊，请不要担心，它们是相当令人困惑的概念！

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

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

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

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

最后一件事——也是网络的一大优势——是所有网站都是有效的开源*，因为您可以查看网站的所有CSS/HTML/JS。下次您看到有趣的东西时，只需打开 firebug 并尝试了解发生了什么，更改值，看看它有什么效果。看看其他人如何组织他们的标记，他们如何设置样式，他们通过 CSS 委托给 javascript 的功能等等。

在您了解了以上所有内容之后，您可能会喜欢涉足一些最前沿的 CSS。使用一些 CSS3 技术的便捷网站：

这就是我此刻能想到的一切！当然，就像掌握任何东西一样，重要的不是你读了多少，而是你练习了多少。只有当你在实践中与这些东西斗争时，你才能真正获得洞察力并加强你自己的心智模式。

至于 JavaScript，假设您了解一些编程（假设您提到了 CGI 和 PHP），我衷心建议您观看一些 Douglas Crockford 的视频，这些视频可以在这里找到：

Crockford 是 JavaScript 大师，负责一些重大进展（他发明了 JSON 并启动了 JSLint）。YUI 剧院的视频特别出色，而且非常详细:)

于 2013-01-18T16:59:08.613 回答
1

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

此外，w3schools 非常适合对这些概念的基本理解。

CodeAcademy的 HTML5 和 Javascript 轨道也可能对您有所帮助。

http://www.codeavengers.com/

很多还是一样的，只是 CSS 和 JS 添加了更多功能，而 HTML5 添加了更多元素标签。

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

于 2013-01-18T16:57:48.833 回答
0

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

我可以发布更多内容，但为什么会这样 - 这些足以塑造身材。我建议你从他们开始，你会在路上找到更多的资源。

于 2013-01-22T12:49:10.120 回答
0

如果你想做一个 SPA，让我建议一个完全不同的策略，你不必从 HTML/CSS 级别开始：www.amber-lang.net

“Amber 语言深受 Smalltalk 的启发。它旨在使客户端开发更快、更容易。Amber 包括一个带有类浏览器、工作区、单元测试运行器、脚本、对象检查器和调试器的实时开发环境。

Amber 是自己编写的，包括编译器，并编译成高效的 JavaScript，与等效的 JS 进行一对一的映射。”

看看吧，真的很酷。

于 2014-02-23T18:48:36.913 回答
0

如果你还在寻找 2020 年的起点，我最近写了从零开始构建 Web 应用程序时要考虑的事项。

不完全是您正在寻找的内容，但我认为这是一个很好的更新起点。

最好的，最大的，

于 2020-02-21T21:41:49.597 回答