我对学习Web开发非常感兴趣，几年前从W3Schools学习了一些有关HTML和CSS的基础知识，但是我从未学习过如何开发符合当今标准的网站，即不使用表格就可以自由流通的网站来管理网站的设计。

我可以从哪些好的资源开始呢？

CSS禅园

查看CSS Zen Garden并翻阅各种结果。它们非常通用，与同一源代码相比有很多不同之处。您将学到许多有关现代CSS技术的知识。即使您没有完全剖析它们，您也至少会发现许多针对普通可访问HTML的启发和CSS功能。CSS Zen Garden的伟大之处在于针对样式的语义。内容绝不是样式。您看到的所有样式都完全由CSS完成，这是正确的做法，因为数据可以被许多不同的客户端使用，而样式只能由可视化的客户端使用。

图书

在学习书籍方面，这很像是CSS的良好起点：《失踪手册》。

互联网

我在互联网上阅读了《粉碎杂志》，其中提供了许多示例和方法。它涵盖了从设计业务到网页设计的绝佳方法之类的文章。

学习如何创建网站和应用程序的最佳方法是实际进行操作，这意味着您应该创建项目并始终进行。这段简短的视频传达了新人的情感，并就此问题提供了一些很好的建议。

我还为有兴趣学习Web开发的人们写了一些其他建议，在开始之前应该先阅读一下。

但是，就像您不会说语言一样，您不会说任何单词，在构建有用的项目之前，您需要对基础知识有充分的了解。这里有一些资源可供您选择一些基础知识和网站，让您自己探索。

有很多地方可以免费学习Web开发的基础知识。从这里开始，但从他们那里分支出来，玩弄他们不直接教导的事情。经过几次尝试之后，尝试从头开始自己制作其他站点/项目。这样做将加强概念，教会您实施的细节，并可能还会教会您更多的事情。仅通过阅读就无法成为优秀的开发人员或设计师，而必须创建！

我为设计师学习了Web开发的速成班

看看这个！它们是针对基于设计的受众量身定制的，但适用于任何学习的人。他们在幻灯片/帖子/视频中讲授基础知识，然后在每个讲义的末尾分配一个小项目，以讲授实际的前端开发。

• 第1课-Web开发背后的原因和原因
• 第2课-启动HTML和CSS
• 第3课-启动JavaScript（JS）

其他好的教程网站

• CodeAcademy-几种语言的常识基础。
• Mozilla的“学习网络”系列 -从入门开始，可以指导您进入一些更复杂的主题。很棒的资源，我强烈推荐它。
• Udacity-通用Web开发课程。
• Tuts + -关于更多特定主题的教程。
• KhanAcademy-我还没有亲自使用它，但是它似乎每天都在进步。

不要使用W3Schools，它通常已经过时并且很容易出错。相反，如果您要查找特定的内容，请使用上面的教程网站来学习和使用下面的文档站点之一。

文献资料

查看属性，库等的文档对于成为一名优秀的Web开发人员至关重要。以下是您可以使用的最佳文档：

• W3.org -Web浏览器实现的大多数内容的官方文档。学习阅读这些文档非常重要！它与W3Schools 无关。
• Mozilla Docs -FireFox的创建者提供的非常可靠的第三方资源，该资源保持最新状态。
• WHATWG.org -W3的一种开源竞争者；一些浏览器有时会通过W3在此处实施某些建议。
• DevDocs-不是官方的，但是在一个站点上有很多语言文档。非常方便。

有用的提要

• WebPlatformDaily-处理每天（周末除外）更新的所有网络的新闻列表。
• SitePoint-关于各种事物的真正有用的文章。
• WebDesignerDepot-可以在垃圾邮件方面，但是他们的大多数实际文章​​都不错。
• Smashing Magazine-更高级的主题，但大多数都是不错的读物。
• 单独列出 -以博客形式提供的一些更高级的知识。

编者

小型项目/玩代码

• JSFiddle-创建小项目并跟踪它们。
• CodePen-查看其他人的代码涂鸦，然后提交自己的代码给他人查看。

全文编辑器

• SublimeText
• 原子

其他有用的网站

• 我的资源页面 -我一直在编译的资源列表，从介绍性到响应式设计，再到各种不同的在Web浏览器中进行动画制作的方式的分析。
• 前端开发人员手册 -内容多样但有用的文章集，涵盖了广泛的前端主题。
• WebFieldManual-大量有用的资源。
• StackOverflow-如果您有与编程相关的特定问题，StackOverflow是无与伦比的，可以为您提供帮助。
• LearnLayout-了解有关在CSS中进行布局的一些基础知识。
• 网页设计中的定位 -我的速成课程的一部分也许是最有用的。
• 您应该知道的30个CSS选择器 -了解它们并节省时间。还有一个很棒的小游戏可以测试您的CSS选择器知识。
• Codrops CSS参考 -简洁实用的参考页面。
• CodeMentor和Thinkful-您可以付费进行一对一辅导的网站。

查找您喜欢的Web开发人员和设计师的个人博客。他们经常有很棒的内容。

我还写了一个关于UI设计的介绍，这可能会很有用。我在其中链接了一些其他很棒的资源。

我压力不够大，最好的学习方法是建立可以不断突破极限的东西。

如需更多（或可能是压倒性的）有用的Web相关站点列表，请签出WebDesignRepo！

对于我而言，学习Web设计（布局解决方案，可用性，图形和技术解决方案）的最佳场所是：

查看在那些网站上撰写文章的人的所有网站：

分开列出
24ways.org

或有关列表设计和浮动http://css.maxdesign.com.au/index.htm的更多技术文章

您必须知道什么是网络标准。官方来源是： 万维网联盟（w3c） 从那里学习有点棘手，因为它技术含量很高，但是当您想了解事物在网络上的工作方式以及原因时，最好先进行检查关于标准。最有用的是HTML代码的验证器。

最好的方法之一是仔细查看优质网站的源代码，并顺理成章地将所学内容与学习技巧的内容对齐：http : //www.cssbeauty.com/

并查看优秀网页设计师的网站及其工作：

Jason Santa Maria
Dustin Curtis
Joshua Davis
David DeSandro
http://www.thinkingforaliving.org/
等...

和我的Delicious书签（有很多东西，您必须仔细研究它们并浏览不需要的内容） http://www.delicious.com/Littlemad/webdesign

在您开始学习所有这些框架之前...

我想将您的注意力转移到网页设计的设计部分。

当然，您可以使用Bootstrap或其他框架轻松构建网站。但这不是设计。框架可以作为基础，但是如果您不自己动手，那么基本上可以得到一个与所有其他网站一样的网站。

因此，我建议您学习设计的基础知识，并尝试自己应用这些基础知识。

您如何独自制作（美丽的）网站？

现在这是一个值得一本书的问题，但是这里有一些要点：

1. 阅读有关设计的基本原理。Web设计中的这7个步骤入门将帮助您入门。此外，《粉碎杂志》上的该系列文章。
2. 观察别人的设计。他们使用了哪些基本原理？但不要只是观察，要注意你的观察。
3. 设计时要牢记业务目标。存在一种网页设计，以帮助企业实现其目标并帮助用户实现自己的目标。当两个目标融合时，每个人都会感到高兴。因此，这个目标应该永远是您的出发点。您应该基于此目标做出的每个设计决策-字体选择，颜色选择，布局等。
4. 确保整个设计和谐。通常，这意味着您要发送的消息，颜色，字体，网站气氛和品牌之间的协调。通过使用模块化比例尺来指导您的尺寸决定，开始将和谐嵌入到您的设计中。这个小型丛书进一步说明了和谐以及如何使用模块化秤。
5. 阅读这个令人惊叹的版式介绍：Butterick的实用版式，或者至少摘录一下。

尝试从头开始设计

现在，当您阅读完所有这些内容并且了解HTML和CSS时，您将能够做自己的非常简单的设计。

尝试设计一个仅包含黑白文本的页面。

为什么只发短信？因为文本是迄今为止在网络上传达消息的最常用的媒介。因此，作为网页设计师，对于您来说，使文字看起来更漂亮并且阅读愉快是至关重要的。

为什么是黑白的？因为选择颜色是另一种野兽。采取小步骤会使您对自己正在取得的进步感到满意，并帮助您更快地学习。

运用您学到的基本设计原理+使用其他人的设计观察+考虑页面的目标+使用模块化比例尺调整文本大小。

最好的学习方法是制作事物，因此，使自己成为一个网站。

阅读标准，alistapart，tutsplus。

如果您需要一本书，请查看SitePoint的-HTML Utopia：使用CSS进行无表设计。

关于csszengarden和W3Schools的几点思考。

老实说，我将从学习如何开发WordPress网站开始。是的，我可以使用HTML，CSS，PHP等编写网站代码，但是我可以更快地组合WordPress网站，然后根据需要进行自定义。

如果您只是想开始学习当今的标准，那么我建议您http://nettuts.com/。获得高级会员资格并访问一些很棒的教程也将是有益的。如果您对从PSD转换为HTML感兴趣，那么它们将为您解决。

Nettuts是Envato的一部分。Envato的一些教程站点涵盖了Web开发，wordpress，矢量，照片和视频编辑等等。这是一个很好的起点。

只是我的2美分。

对于使用Web设计的Photoshop初学者，我建议您访问此网站http://psdvibe.com/

有很多教程的网站很多。但是，学习网页设计的最佳平台是http://teamtreehouse.com/。希望能帮助到你！尼克