1.建立工作环境
你可以把你的工作环境看作是办公室的延伸。它就像一个虚拟的桌子，里面有各种各样的工具，可以让你的代码运行起来。
以下是新手必备
代码编辑器:代码编辑器，如SublimeText、Brackets和notepad++，类似于普通的旧式纸质笔记本，你可以输入任何你想要的东西。
理论上，可以使用常规的文本编辑器，如notepad(Windows)或TextEdit(OSX)，但是一些代码编辑器的代码着色、自动完成和实时预览等特性可以使编码更容易、更具交互性。
框架:框架是代码、组件和样式的集合，它们使生成web应用程序变得相对快速和容易。有像Bootstrap和Foundation这样的CSS框架，也有像AngularJS和React这样的JavaScript框架。
CSS框架本质上是预定义样式和web组件(如导航条、页脚、卡片、排版元素和网格)的库。avaScript框架类似，但它们可以满足特定于JavaScript的需求。稍后将进一步介绍CSS和JavaScript。
ResetCSS:ResetCSS就像EricMeyer,HTML5Docto和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已经在其FirefoxDeveloperEdition(FDE)浏览器中构建了一个优秀的开发套件。
Chrome、Firefox和Edge都内置了类似的工具(尽管不那么健壮)。开发工具可以帮助检查在其他站点上使用的代码，调试代码，编辑样式，测试响应等等。
2.了解这些理论知识
响应式设计:web设计和开发中最热门的话题之一是响应式web设计(RWD)，它指的是设置屏幕大小的路径点，告诉页面默认为更适合给定大小的特定布局。RWD的崛起源于停滞不前的网页设计，它根植于无法响应浏览器宽度变化的固定页面布局。新的实践允许对可用性进行优化，这超出了使用固定设计模型可以实现的范围。
移动优先:移动优先是现代网页设计的原则，与响应式网页设计密切相关。Mobilefirst建议你应该先设计你的页面的移动布局，然后再设计每个更大的格式。
从理论上讲，通过遵循“移动优先”的方法，可以使移动用户（占总用户数量非常大）的体验更加友好。传统上，随着屏幕尺寸变小，网站会按功能和内容缩小规模。然而，随着这些年来移动用户数量的巨大增长，这已成为全球设计师的主要