是否在你的待办学习清单中依然列有学习网站设计的基础知识？ 你为什么还没有开始呢？ 今天，我们汇总了30个提示和相关的资源，希望可以帮助你在本月开始学习网页设计（甚至可能会帮助你找到一条新的职业道路！）
想要学习新东西或想要取得突破的网站或平面设计师和创意人第一件要做的事情就是需要“戒掉”拖延。 你没有在每天踏出你的第一步，那么你将远远落后于其他人！
按照以下步骤开始你的学习计划——如何在30天内创建你的第一个网站！
1.开始（Start a Website）
开始学习网页设计的最佳方式是你实际上直接参与它。 这是Design
你不必从庞大的网站或疯狂的设计开始，从小的事项开始去慢慢了解，比如通过浏览网站，弄清楚是什么让它如此有效（或相反），同时你可以检查代码，以便你可以开始熟悉将使你的网站正常工作的内容。
2.阅读你需要的一切（Read Everything You Can）
开始阅读。 你可能已经习惯于及时了解设计世界中正在或即将发生的事情。 请继续抱有这种热情并积极阅读。
阅读有关网站设计，趋势，技术和最佳实践的所有内容。 在社交媒体上关注你觉得很棒的设计师。
为你的网站设计阅读阶段积累足够的知识和经验。 阅读有关学习一些代码的基础知识，阅读有关设计理论的知识，阅读教程和当前文章。
3.成为一个有效的沟通者（Be An Effective Communicator）
如果你不是善于表达的人，那就要熟练掌握这些技巧。 网站设计的一个重要部分是沟通。
网站设计师必须定期与客户沟通，以确定设计需要解决的问题，他们必须传达这些解决方案并实施它们。
4.订阅Tuts+以及Envato Elements（Subscribe to Tuts+ & Envato Elements）
考虑订阅Envato Elements，这也可以让你访问优秀的Tuts +学习资源。
Tuts +会定期发布关于图形和网页设计的常规课程，从基础技术到最新的高级方法和发展。 它完全是自定进度的，由专业教练讲授。 你还可以访问Envato Elements，这是查找图形，模板等绝佳资源的站点。
5.思考HTML（Think in HTML）
HTML或超文本标记语言是网站设计的基石。 HTML是帮助创建网站结构的骨架，一旦你学会阅读该语言，网站设计的世界将更有意义。
W3Schools有一个很棒的HTML入门教程，里面有数以百计的HTML示例，你可以在屏幕上看到它们，看看会发生什么以及它是如何工作的（你可能会发现它比你想象的更直观）。
6.通过Codeacademy了解代码（Play with Code at Codeacademy）
虽然HTML是一个良好的开端，但你几乎可以从Codeacademy学习任何编程语言。 免费工具将教你如何使用交互式活动和进行编码。
你可以随时随地选择Codeacademy课程，并根据需要启动和停止。 选择要学习的科目-网络开发，编程，数据 - 或专注于语言-HTML和CSS（一个很好的起点），Python，Java，SQL，Ruby等。
7.学习样式（Learn to Understand CSS）
CSS或级联样式表定义了用HTML，XML和SVG编写的文档的表示。
Mozilla还有很多CSS资源可供入门者使用，并详细介绍了CSS的工作原理，包括选择器和属性，编写CSS规则，将CSS应用于HTML，如何在CSS中指定长度，颜色和其他单位，级联和继承，盒子模型基础和调试CSS等。
8.将你的设计技巧应用到Web上（Apply Your Design Skills to the Web）
如果你已经在创意或平面设计领域工作，请考虑你已经知道的可以应用于网站设计的内容。 使视觉上具有吸引力的原则不会基于媒介而改变，所有设计理论也将在数字空间中派上用场。
虽然学习代码等元素可能感觉不自然，但拥有设计背景是一个巨大的好处。 如果没有人愿意与之互动，那么编码再精巧的网站有什么用呢？
9.关注你喜欢的网站（Pay Attention to Websites You Love）
记下你喜欢的网站。 他们对你有什么吸引力？ 你要怎么学会复制这些元素？注意：
· 字体
· 导航
· 图片以及空间的使用
· 表格的设计
· 动态交互以及滚动效果
· 用色
10.框架草稿（Draw a Wireframe）
框架草稿是网页设计师的头脑风暴阶段。
在最纯粹的形式中，线框是网站内容的草图。 它不是美学元素的轮廓，而是网站的蓝图。 绘制线框并不是关于这种设计的外观，而是关于其中的信息结构。
11.花一些时间学习Sketch（Take Some Time to Learn Sketch）
Sketch是Mac的矢量绘图工具，可以轻松创建设计元素。 许多设计师正在转向Sketch来创建UI元素等设计项目。
它包含各种插件，允许你导出代码以便于使用和访问。 它是自Adobe的Creative Suite以来最强大，最受欢迎的工具之一，非常值得你花时间。
12.随时了解技术（Stay Up to Date with Technology）
AI，VR，AR，全景视频，机器人。
有许多新技术和趋势可能很难跟上。 但是你需要掌握这些变化。
一次解决一个问题，从与你所做工作最直接相关的技术开始。 如果你有一个在线聊天的网站，首先要了解机器人。 或者，如果你将使用大量视频内容，就关注和视频相关的技术。
人工智能和虚拟增强现实等技术更复杂，但很可能成为网站设计领域的一部分。 至少，你应该知道它们是什么以及可能的用途。
13.考虑SEO（Get Comfortable with SEO）
虽然许多网页设计师认为搜索引擎优化应该交由专业的人员来处理，但很多设计工作都与搜索引擎优化有关。
从图像上传的方式到创建干净的代码，包括页面和元素的元描述，设计师应该将搜索思维融入他们的工作流程中。
自由职业者，这对你也很重要。 大多数客户都足够精明，会要求SEO优化的网站。 如果你独自工作，你需要足够的知识来创建一个可以阅读的可靠框架（并且如果需要做更多的工作，可以将客户推荐给SEO专家）。
14.了解网站搭建工具（Play with a Website Builder）
网站构建者可以很好地熟悉最佳实践以及快速开始构建和设计网站。
这些工具中的大多数都有大量的模板，允许你自定义元素甚至添加代码片段。 对于简单的网站，许多网站建设者也有一个免费的计划，你可以在其中创建个人投资组合页面或基本网站。
然后在网站构建器中挑选出各个部分，看看它们的设计和编码方式，以了解它们如何结合在一起。
15.寻找导师（Find a Mentor）
是否有与你合作过的人，或者和你比较熟悉的设计师？ 和他们一起去吃午餐或进行简短的谈话，了解他们关于这个行业的认识。
寻找愿意与你合作并能够你思考该领域以及如何自己学习网页设计的导师是非常宝贵的。 虽然你可以在网络社区找到一个导师，但没有什么比一个你可以定期面对面的活人更好。
16.加入CodePen社区（Join the CodePen Community）
一旦你开始熟悉某些代码和编程，你就可以加入CodePen社区。 开源社区允许你在各种社交网络中共享和编辑代码片段。
该网站的创始人这样描述该平台：“CodePen希望提供一个公共的社交开发环境。 从本质上讲，它允许你在浏览器中编写代码，并在构建时查看结果。 对于任何技能的开发人员而言，这是一个有用且具有解放性的工具，特别是为学习编码的人提供支持。 我们主要关注前端语言，如HTML，CSS，JavaScript和转化为这些事物的预处理语法“。
17.参与相关的课程（Take a Class）
对于一些学习者来说，更正式的课堂是最好的选择。
有大量的课程（面对面或在线的形式）可以提供你学习网页设计基础知识。 从当地的大学或在线学习中心开始。 以你目前的能力和水平为基础选择一堂课，然后继续前进。
18.想要了解更多，搜索它（Want to Do Something? Google It）
对于不想要那么传统的学习的人，请在Google上找到网页设计相关的关键词来查收答案。 有很多教程和视频可以引导你解决几乎所有问题。
关键是要准确搜索你需要知道的内容，并寻找有信誉的答案来源。 更新的内容可能会给你一个更好，更完整和更相关的答案（请记住，对于设计，一些东西正在快速变化。）
19.注重用户体验（Pay Attention to the User Experience）
没有什么能够像用户体验设计那样创建或破坏一个网站了。 所以，你需要计划并理解它。
用户体验（UX）设计是创建和提供有意义的和个人相关体验的产品的过程。 这包括仔细设计产品的可用性和消费者使用它所带来的乐趣。 它还关注获取和创造产品的整个过程，包括品牌，设计，可用性和功能方面。
用户体验设计师或了解其经验形成过程的设计师会设法创造和塑造具有影响过程的因素。 为此，UX设计人员将考虑产品使用的原因，内容和方式。
20.关注设计趋势（Pay Attention to Design Trends）
现代的网站设计是什么样的？ 这不是一个技巧性的问题。 要设计现代网站和用户体验，你需要了解用户想要什么以及他们需要如何与之交互。 如果你上次下载应用程序或查看手机上的网站是在2016年，那么你将有很长的“课”需要补习的。
创建将现代风格和趋势集成到设计中的网站设计将有助于你的项目脱颖而出。 但是你怎么知道什么是趋势呢？ 继续阅读和关注相关的网站，并注意其他设计师正在做的事情。 记下你经常访问的网站中包含的颜色，样式和功能。
21.无色创造（Create Without Color）
开始一个没有颜色的设计。 一位伟大的设计师曾经告诉我，如果你的设计在黑白的阶段都能展示出很好的视觉表现的话，它将在颜色的版本中更加完美。
这可能并不总是成立，但这是一个很好的起点。
通过创建黑白设计，你可以看到元素的对比以及它们如何在没有任何色彩元素的影响下工作。 你已经消除了由于它而发生的颜色或眼球运动的任何情感联系。 这种最简单的设计形式可以让你在最终确定之前，了解某些事物是否可以作为一个统一的概念。
22.学会“爱上”谷歌字体（Learn to Love Google Fonts）
谷歌字体是所有设计师的朋友！
无论你对Google的看法如何，浏览、排序和选择你知道将在网站设计中使用的字体的能力都很重要。 你不必考虑字体的版权许可问题，或者字体是否与特定浏览器兼容。
你所面临的限制仅仅只是你只能使用Google Fonts库中所提供的内容。 但是，如果你尝试，你可以找到几乎适合于每个项目的东西。 从长远来看，这将为你节省大量时间。
23.选择一个UI套件（Pick Apart a UI Kit）
下载用户界面或图标工具包并将其拆开成立你自己的素材库是一件很有必要的事情。
正如你可以检查网站的代码一样，查看如何为Web构建设计元素。 记下比例和网格，查看颜色混合以及如何在Photoshop或Illustrator中组织文件。
寻找要下载的工具包，其中包含多种格式的元素，可用于在高分辨率显示（下载一堆JPEG文件并不能很好地为你服务）。
然后尝试构建或自定义一个或两个元素。
24.成为一名排版师（Become a Typographer）
现代网站设计非常注重排版......好的排版。 从具有引人注目的单词的英雄标题到将用户引入设计的文本层，理解如何配对类型元素和构建引人注目的文本块的原则至关重要。
你可以从Ellen Lupton’s Thinking with Type开始（还有一本同名的书）。Lupton是排版的权威，里面的信息会让你像一名专业的排版师一样思考。
25.学习JS（Jump into JavaScript）
当你开始对涉及网页设计感觉非常好时，再次挑战自己学习JavaScript。 在HTML和CSS之后，它是Web上最重要的语言。
JavaScript允许设计人员在网页上实现复杂的效果和交互的工具。 我们经常使用的滑动幻灯片效果或视差动画效果就是基于该语言。
26.更新你的作品集（Update Your Portfolio）
一旦你开始你的网站设计之旅，请确保使用你最新完成的设计项目来更新你的作品集。 这个简单的动作将帮助你展示自己以及其他。
更新的内容可以帮助潜在客户了解你的“风格”。 确保展示布局，颜色，排版和不同的技术，以显示你实际上可以做什么。
27.挑战你自己（Challenge Yourself）
有这么多的快捷方式和代码片段可以帮助你解决几乎所有的网站问题，所以不要偷懒。 记住要不断挑战自己，学习新技能，新技术并不断改进网页设计。
这个领域最重要的一点是：它是在不断变化的，学习或尝试新的东西是其中很重要的一个环节。
28.将你的经验最大化（Maximise Your Experience）
不要把自己局限于理论或文字层面。想要成为真正的网站设计师，你必须真正的参与进去，动手去做。
你可以从小的地方开始，或者和其他人一起开展比较大的项目。 加入可以与工作团队合作的项目，为你的朋友制作一个小网站。 你构建网站的经验越多，获得的也就越多越好。
你还在等什么？ 别磨蹭了。
29.请求反馈（Ask for Feedback）
使用有效的沟通方式和途径收集有关网站设计项目的反馈，无论是多小的项目。 仔细了解和解决这些反馈，即使你不喜欢它，看看你能从中学到什么。
除了视觉偏好之外，提供反馈的人是否提供了使网站的设计和功能更好的建议？ 他们能轻松理解设计的目标吗？ 他们是否与消息传递有关？
30.持续学习新的东西（Keep Learning New Things）
要成为一名出色的网站设计师，你需要不断的探索，尝试和学习新事物。 积极的通过网络或面对面的沟通，以便你可以掌握所需的技术和视觉变化。
如果你正在寻求学习网站设计或者希望可以更好的提升自己，那么这可能已经在做的事情了。 但就像我们一直强调的一样，这是一个不断发展的领域，它几乎每天都在变化。 所以不要只局限自己在很小的一个空间中，要不断的在网络或身边正在从事这项事情的前辈更加深入的进行探讨和学习。
最后，希望你在你所感兴趣的领域玩得开心，并且成功！
----图文来自：design shack