快速入门前端开发，你只须要这4步

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、小程序打造应用, 均可以快速编译对应终端的代码。能够有效的解决开发者多端开发这个让人头疼的问题。

APICloud Studio试用地址

语法框架如今也不少，随着对于前端开发工做的熟悉深刻，也会造成本身的一套理论体系

前面说到的AVM是一个跨端的高性能 JavaScript框架，更趋近于原生的编程体验，它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型，比较适合高度定制化的项目。

AVM框架使用地址

4.开始你的工做

在开发过程当中:当您编写组成web页面的代码时，您可能但愿看到它的运行状况，以便您可以看到哪些工做，哪些不工做，以及哪些能够更好地执行。虽然能够实时完成，但强烈建议使用本地服务器，由于这样能够将风险降到最低。

本地服务器是位于计算机上的一个软件集合，它容许你查看和进行网页交互，就像你在互联网上同样。

开发后:一旦完成(或大部分完成)站点，就能够将其从本地服务器迁移到实际服务器上了。这意味着须要支付服务器费用，购买域名，并使用FTP客户端将全部相关文件传输到服务器。一旦完成，世界上任何人均可以去你的网站，看到你的工做成果。

一些流行的托管站点是：WordPress、WIX、GoDaddy，BlueHost，InMotion和HostGator。你能够在此处研究可用的域名，而后在此处购买。若是您想尝试崭新的事物，请查看Google Domains，它目前处于测试阶段。