我对学习 Web 开发非常感兴趣，几年前从 W3Schools 学习了一些有关 HTML 和 CSS 的基础知识，但我从未学习过如何开发符合当今标准的网站，即不使用表格的自由流动网站来管理网站的设计。
我可以从哪些好的资源入手？
如何开始学习 Web 开发？
平面设计
网站设计
资源推荐
2021-12-27 10:23:10
4个回答
学习如何创建网站和应用程序的最佳方法是实际去做，这意味着您应该创建项目，并且一直这样做。这段简短的视频传达了一个新人的情绪，并就该主题提供了一些很好的建议。
我还为有兴趣学习 Web 开发的人写了一些其他建议，您应该在开始之前阅读这些建议。
但是，就像您不会说您不知道任何单词的语言一样，您需要很好地理解基础知识，然后才能构建有用的项目。这里有一些资源可以帮助您了解一些基础知识和网站，让您自己探索。
有很多地方可以免费学习 Web 开发的基础知识。从这里开始，但从他们那里分出一些来玩他们不直接教的东西。在经历了一些之后，尝试从头开始自己制作其他网站/项目。这样做会强化概念，教你实现细节，还可能教你其他东西。你根本无法通过阅读成为一名优秀的开发人员或设计师，你必须创造！
我为学习 Web 开发的设计师制作了速成课程
看看这个！它们是为基于设计的受众量身定制的，但适用于任何学习者。他们在幻灯片/帖子/视频中教授基础知识，然后在每个项目结束时分配一个小项目来教授真实世界的前端开发。
其他好的教程网站
- CodeAcademy - 几种语言的一般知识基础。
- Mozilla 的“学习网络”系列- 这从初级开始，可以引导您进入一些更复杂的主题。很好的资源，强烈推荐。
- Udacity - 通用 Web 开发课程。
- Tuts+ - 关于更具体主题的教程。
- KhanAcademy - 我没有亲自使用过，但它似乎每天都在变好。
不要使用 W3Schools，它通常已经过时并且很容易出错。相反，当您正在寻找特定的东西时，请使用上面的教程网站来学习和使用下面的文档网站之一。
文档
查看属性、库等文档对于成为一名优秀的 Web 开发人员至关重要。以下是您可以使用的最佳文档之一：
- W3.org - Web 浏览器实现的大部分内容的官方文档。学习阅读这些文档非常重要！这与 W3Schools没有任何关联。
- Mozilla Docs - 来自 FireFox 创建者的非常可靠的 3rd 方资源，它保持最新。
- WHATWG.org - W3 的一种开源竞争对手；某些浏览器有时会通过 W3 从此处执行某些建议。
- DevDocs - 不是官方的，但在一个站点上有很多语言文档。很方便。
有用的提要
- WebPlatformDaily - 处理每天更新的所有网络的新闻列表（周末除外）。
- SitePoint - 关于各种事情的真正有用的文章。
- WebDesignerDepot - 可能是垃圾邮件方面，但他们的大多数实际文章都很好。
- Smashing Magazine - 更高级的主题，但大部分都是好读物。
- A List Apart - 博客形式的更高级的知识。
编辑
小项目/玩代码
全文编辑器
其他有用的网站
- 我的资源页面- 我一直在编译的资源列表，从介绍到响应式设计，再到分析在 Web 浏览器中制作动画的不同方式。
- 前端开发人员手册- 涵盖广泛的前端主题的更多样化但有用的帖子集合。
- WebFieldManual - 大量有用的资源。
- StackOverflow - 如果您有特定的编程相关问题，StackOverflow 是无与伦比的，可以为您提供帮助。
- LearnLayout - 学习一些有关在 CSS 中进行布局的基础知识。
- 网页设计中的定位- 我的速成课程的一部分，这可能是最有用的。
- 30 个你应该知道的 CSS 选择器- 了解它们并在以后节省你的时间。还有一个很酷的小游戏来测试你的 CSS 选择器知识。
- Codrops CSS 参考- 简洁有用的参考页面。
- CodeMentor和Thinkful - 您可以付费获得一对一指导的网站。
寻找您喜欢的网络开发人员和设计师的个人博客。他们通常有很棒的内容。
我还写了一篇关于 UI 设计的介绍，它可能非常有用。我在其中链接了一些额外的重要资源。
我怎么强调都不为过，最好的学习方法是构建能够突破极限的东西，并不断地这样做。
对于更大的（并且可能是压倒性的）有用的 Web 相关站点列表，请查看WebDesignRepo！
CSS禅园
查看CSS Zen Garden并浏览各种结果。它们非常通用，并且与相同的源代码有很大的不同。您将学到很多关于现代 CSS 技术的知识。即使你没有完全剖析它们，你至少会发现很多灵感和 CSS 能力，而不是普通的可访问 HTML。CSS Zen Garden 的伟大之处在于语义对抗风格。内容不是样式。你看到的所有样式都是纯粹由 CSS 完成的，这是正确的做法，因为数据可以被许多不同的客户端使用，而样式只能由那些可视化它的客户端使用。
图书
当谈到从书本上学习时，这本书看起来非常像是一个好的开始CSS: The Missing Manual。
互联网
我在互联网上阅读了Smashing Magazine，它提供了很多示例和方法。它涵盖了从设计业务到网页设计等方面的优秀方法的文章。
对我来说学习网页设计（布局解决方案、可用性、图形和技术解决方案）的最佳地点是：
查看在这些网站上撰写文章的人的所有网站：
或者更多关于列表设计和浮动的技术性http://css.maxdesign.com.au/index.htm
你必须知道什么是网络标准。官方来源是这样的： 万维网联盟（w3c） 从那里学习有点棘手，因为它技术性很强，但是当你想知道网络上的事情是如何工作的以及为什么时，最好检查一下关于标准。最有用的是HTML 代码的验证器。
一个最好的方法是好好看看好网站的源代码，自然而然地把事情的比例对齐，就像那些学习技巧一样：http ://www.cssbeauty.com/
并查看优秀网页设计师的网站以及他们在做什么：
杰森·圣玛丽亚·
达斯汀·柯蒂斯·
约书亚·戴维斯
大卫·德桑德罗
http://www.thinkingforaliving.org/
等...
还有我的 Delicious 书签（有各种各样的东西，你必须通过它们挖掘并浏览你不需要的东西） http://www.delicious.com/Littlemad/webdesign
在你开始学习所有这些框架之前......
我想将您的注意力转移到网页设计的设计部分。
当然，您可以使用 Bootstrap 或其他一些框架轻松构建网站。但这不是设计。框架可以是基础，但如果您不自己动手，您基本上会得到一个与所有其他网站一样的网站。
这就是为什么我建议您学习设计的基础知识并尝试自己应用这些基础知识。
你如何自己制作（漂亮的）网站？
现在这是一个值得一本书的问题，但这里有一些建议：
- 阅读有关设计的基本原则。网页设计中的这7 步入门应该可以帮助您入门。另外，这一系列文章在 Smashing Magazine 上。
- 观察别人的设计。他们使用了哪些基本原则以及如何使用？但不要只是观察，注意你的观察。
- 设计时要牢记业务目标。网页设计的存在是为了帮助企业实现其目标并帮助用户实现自己的目标。当2个目标收敛时，每个人都很高兴。所以，这个目标应该永远是你的起点。您应该根据这个目标做出的每个设计决策——字体选择、颜色选择、布局等。
- 确保在整个设计中保持和谐。一般来说，这意味着您要发送的信息、颜色、字体、网站的氛围和品牌之间的和谐。通过使用模块化比例来指导您的尺寸决策，开始在您的设计中嵌入和谐。这个迷你系列解释了更多关于和谐和使用模块化音阶的信息。
- 阅读这个令人惊叹的排版介绍：Butterick's Practical Typography，或者至少是它的摘要
尝试从头开始设计
现在，当您阅读完所有这些内容并了解 HTML 和 CSS 后，您将能够进行自己的非常简单的设计。
尝试设计一个只有文本的单页，黑白。
为什么只是文字？因为到目前为止，文本是在网络上传达信息最常用的媒介。因此，作为一名网页设计师，让文本看起来不错并且阅读起来很愉快，这对你来说至关重要。
为什么是黑白的？因为选择颜色是另一种野兽。迈出一小步会让你对自己取得的进步感到高兴，并帮助你更快地学习。
应用您学到的基本设计原则 + 使用其他人的设计观察 + 考虑该页面的目标 + 使用模块化比例调整文本大小。
其它你可能感兴趣的问题