1. 建立工作环境
你可以把你的工作环境看作是办公室的延伸。它就像一个虚拟的桌子，里面有各种各样的工具，可以让你的代码运行起来。
以下是新手必备
代码编辑器:代码编辑器，如Sublime Text、Brackets和notepad++，类似于普通的旧式纸质笔记本，你可以输入任何你想要的东西。
理论上，可以使用常规的文本编辑器，如notepad (Windows)或TextEdit (OS X)，但是一 些代码编辑器的代码着色、自动完成和实时预览等特性可以使编码更容易、更具交互性。
框架:框架是代码、组件和样式的集合，它们使生成web应用程序变得相对快速和容易。有像Bootstrap和Foundation这样的CSS框架，也有像AngularJS和React这样的JavaScript框架。
CSS框架本质上是预定义样式和web组件(如导航条、页脚、卡片、排版元素和网格)的库。avaScript框架类似，但它们可以满足特定于JavaScript的需求。稍后将进一步介绍CSS和JavaScript。
ResetCSS: ResetCSS就像Eric Meyer, HTML5 Docto和Yahoo!是一个包含一组标准化CSS样式的文件，这些样式被认为是最佳实践，并为页面提供了一致的外观基准。通常由ResetCSS修改的样式与行高、字体和标题大小、边框间距、列表样式等元素相关。
CMS：内容管理系统是一套复杂程度不同的套件，网站管理员可以轻松地上载，修改和管理其网站上的内容/资产。随着网站内容的增加，CMS会让你的工作变得更加简单
流行的CMS包括:WordPress、Joomla、Drupal、Magento和Shopify。后两者是非常适合于电子商务网站的CMSs。事实上，你可以在Magento和Shopify的可用性比较中了解更多。
FTP客户端:文件传输协议(FTPs)允许在的计算机和web服务器之间传输文件。当你探索web开发的世界时，毫无疑问，你需要向服务器传输大量的文件，从你的HTML、CSS和JS文件开始，到你的图片、音乐或任何你希望提供给访问者的东西结束。
一些流行的FTP客户端有:CyberDuck, Filezilla和transmission。
浏览器:这似乎是一个愚蠢的时刻，但是您对浏览器的选择可以决定你最终产品的很多方面。例如，Mozilla已经在其Firefox Developer Edition (FDE)浏览器中构建了一个优秀的开发套件。
Chrome、Firefox和Edge都内置了类似的工具(尽管不那么健壮)。开发工具可以帮助检查在其他站点上使用的代码，调试代码，编辑样式，测试响应等等。
2.了解这些理论知识
响应式设计:web设计和开发中最热门的话题之一是响应式web设计(RWD)，它指的是设置屏幕大小的路径点，告诉页面默认为更适合给定大小的特定布局。RWD的崛起源于停滞不前的网页设计，它根植于无法响应浏览器宽度变化的固定页面布局。新的实践允许对可用性进行优化，这超出了使用固定设计模型可以实现的范围。
移动优先:移动优先是现代网页设计的原则，与响应式网页设计密切相关。Mobile first建议你应该先设计你的页面的移动布局，然后再设计每个更大的格式。
从理论上讲，通过遵循“ 移动优先”的方法，可以使移动用户（占总用户数量非常大）的体验更加友好。传统上，随着屏幕尺寸变小，网站会按功能和内容缩小规模。然而，随着这些年来移动用户数量的巨大增长，这已成为全球设计师的主要关注点。
MVP：尽管它们在B2B中比在个人项目中更重要，但是MVP（最低可行产品）构建是必不可少的术语。MVP背后的想法是，你仅构建必需的功能，而避免了可以为第二个版本保存的功能。
作为一个web开发新手，建议在学习的同时实施这个策略。通过构建您想要的最基本的版本，你将有机会探索核心概念和策略，而不会受到复杂功能。随着你对开发、设计语言和其他相关原则的逐渐熟悉，你可能会想避开MVP构建并探索新的信心。
3.开始使用这些语言
Web开发以三种核心语言为根基，它们几乎涵盖了您在internet上看到和使用的所有内容。单独使用时，HTML、CSS和JavaScript几乎毫无用处。当彼此结合使用时，我们可以看到无限的可能。
HTML:作为一种标记语言，HTML负责网页上文本的流程和结构，并提供了一个系统，用于标记该文本，以便使用CSS进一步增强。
CSS:层叠样式表负责描述和定义标记为HTML的文本的视觉方面。使用CSS，你可以定义颜色，大小，布局，动画等等。
JavaScript:这是目前最流行和发展最快的网络语言之一。JavaScript主要用于向web元素添加交互性。这种可能性实际上是无限的。
除此之外，可以使用APICloud Studio 、AVM框架、Foundation，Bootstrap和Skeleton之类的框架来补充学习内容，这些框架为你提供了预构建的模块，供你随意使用。
APICloud Studio是一个全流程的开发工具，基于业界领先的代码编辑器-Vscode深度定制，可以快速构建多端应用，面向Android、iOS、Web、App、小程序打造应用, 都可以快速编译对应终端的代码。可以有效的解决开发者多端开发这个让人头疼的问题。
语法框架现在也很多，随着对于前端开发工作的熟悉深入，也会形成自己的一套理论体系
前面说到的AVM是一个跨端的高性能 JavaScript框架，更趋近于原生的编程体验，它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型，比较适合高度定制化的项目。
4.开始你的工作
在开发过程中:当您编写组成web页面的代码时，您可能希望看到它的运行情况，以便您能够看到哪些工作，哪些不工作，以及哪些可以更好地执行。虽然可以实时完成，但强烈建议使用本地服务器，因为这样可以将风险降到最低。
本地服务器是位于计算机上的一个软件集合，它允许你查看和进行网页交互，就像你在互联网上一样。
开发后:一旦完成(或大部分完成)站点，就可以将其从本地服务器迁移到实际服务器上了。这意味着需要支付服务器费用，购买域名，并使用FTP客户端将所有相关文件传输到服务器。一旦完成，世界上任何人都可以去你的网站，看到你的工作成果。
一些流行的托管站点是：WordPress、WIX、GoDaddy，BlueHost，InMotion和HostGator。你可以在此处研究可用的域名，然后在此处购买。如果您想尝试崭新的事物，请查看Google Domains，它目前处于测试阶段。