前面的文章中只是对前端开发的铺垫，接下来的文章将带你真正学习Web前端开发技术，想要学习的跟紧了，如果对前面的还不了解的朋友，可以再回头看看前面的文章，做好充足的准备，我们开始吧！

在这里你将学会如何设置构建简单网页所需的工具并发布你自己的简易代码。

Web前端开发学习第一步，带你一步一步掌握核心技术

构建一个专业的网站需要大量的工作，所以如果你是新手，我们鼓励你从小事做起。你不会直接建立另一个 Facebook，但建立一个个人的简单在线网站并不难，所以让我们从这里开始吧。

通过按顺序阅读下面列出的文章，你将逐渐建立好你自己的第一个在线网站。让我们开始吧！

安装基础软件

Web前端开发学习第一步，带你一步一步掌握核心技术

当提到建站工具的时候，网上有着一大堆工具可供选择。如果你才刚刚起步，你可能会在各种各样的代码编辑器、框架以及测试工具中困惑不已。 在安装基础软件中我们将一步一步地展示如何安装一些你所需要的基础 Web 开发软件。

在安装基础软件中, 我们将向你展示简单网页制作所需要的工具，以及如何正确安装它们。

专业人员使用哪些工具？

1.计算机，也许这对你来说是很明显的，但是你们中有些人们是通过手机或者图书馆的计算机来阅读这篇文章的。对于正经的 Web 开发，最好还是使用运行 Windows，Mac，或者 Linux 系统的台式计算机或笔记本电脑。

Web前端开发学习第一步，带你一步一步掌握核心技术

2.文本编辑器，用来编写代码。这可以是纯文本编辑器，比如 Sublime，Brackets， Atom 或 Visual Studio Code；也可以是混合的编辑器，如 Dreamweaver 或者WebStorm。Office 文档编辑器不适合在此使用，因为他们依赖的隐藏元素会干扰浏览器渲染机制。

Web前端开发学习第一步，带你一步一步掌握核心技术 Web前端开发学习第一步，带你一步一步掌握核心技术

Sublime官方地址：https://www.sublimetext.com/

Brackets官方地址：http://brackets.io/

Atom官方地址：https://atom.io/

Visual Studio Code官方地址：https://code.visualstudio.com/

WebStorm官方地址：https://www.jetbrains.com/webstorm/

3.浏览器，用来测试你的代码。如今使用最多的浏览器有 Firefox，Chrome，Opera， Safari，Internet Explorer 和 Microsoft Edge。你同时需要在移动设备和任何你的目标用户可能使用的老式浏览器（如 IE 8-10）中测试你的网页表现如何。

Web前端开发学习第一步，带你一步一步掌握核心技术

Firefox官方地址：https://www.firefox.com.cn/

Chrome官方地址：https://www.google.com/chrome/

Opera官方地址：https://www.opera.com/

Safari官方地址：https://www.apple.com/safari/

4.图像编辑器，像 The GIMP，Paint.NET，或 Photoshop，用来编辑你的网页所需的图像。

Web前端开发学习第一步，带你一步一步掌握核心技术

GIMP官方地址：https://www.gimp.org/

Paint.NET官方地址：https://www.getpaint.net/

5.版本控制系统，用来管理服务器文件，支持项目中的团队协作，共享代码与资源，以及避免编辑冲突。当今最流行的版本控制工具是 Git，同时 GitHub 这个基于 Git 的代码托管服务网站也非常流行。

Web前端开发学习第一步，带你一步一步掌握核心技术

Git官方地址：https://git-scm.com/

6.FTP 工具软件，在旧式使用网络账户管理的服务器上，通常我们使用 FTP 进行文件管理（Git 正在取代 FTP）。有很多 (S)FTP 工具软件，比如 Cyberduck，Fetch，和 FileZilla。

Web前端开发学习第一步，带你一步一步掌握核心技术

Cyberduck官方地址：https://cyberduck.io/

Fetch官方地址：https://fetchsoftworks.com/

FileZilla官方地址：https://filezilla-project.org/

7.自动化构建工具， 比如 Webpack，Grunt 或 Gulp，来自动完成重复的任务，例如压缩代码和运行测试。

Web前端开发学习第一步，带你一步一步掌握核心技术

Webpack官方地址：https://webpack.js.org/

Grunt官方地址：https://gruntjs.com/

Gulp官方地址：https://gulpjs.com/

8.模板，库，框架等等，任何用来加快编写常规功能的工具，当然还有更多的工具。

Web前端开发学习第一步，带你一步一步掌握核心技术

什么是我现在真正需要的工具？

上面的列表看起来可怕，不过幸运的是你刚接触 Web 开发时并不需要知道上面大部分内容。在这篇文章里，我们只要求你有最小的配备——一个文本编辑器和一些现代的浏览器。

1.安装文本编辑器

你的电脑上可能已经安装了一个基本的文本编辑器。Windows 上默认安装了 记事本 而 macOS 上则有 TextEdit。Linux 发行版众多，其中 Ubuntu 上是默认是 gedit。

Web前端开发学习第一步，带你一步一步掌握核心技术

在Web开发中，你可以使用比记事本和 TextEdit 更好的工具。 我们推荐初学者使用 Brackets, 它提供了实时预览和代码提示等强大功能，而且免费。我个人更加倾向于使用 Visual Studio Code，完美的原生中文支持，强大的插件体系，多平台支持，它是微软出品，开源免费。

2.安装现代浏览器

现在，我们只要安装几个桌面 Web 浏览器来测试我们的代码。在下面选择你的运行系统然后点击相应的链接来下载你最喜爱的浏览器的安装器：

Web前端开发学习第一步，带你一步一步掌握核心技术

Linux: Firefox，Chrome，Opera。

Web前端开发学习第一步，带你一步一步掌握核心技术

**Windows: **Firefox，Chrome，Opera，Internet Explorer，Microsoft Edge （Edge 是 Windows 10 的默认浏览器；如果你的系统版本是 Windows 7 或者更高，你可以安装 Internet Explorer 11；否则你应该安装另外一个浏览器）

Web前端开发学习第一步，带你一步一步掌握核心技术

Mac: Firefox，Chrome，Opera，Safari (Safari 是 iOS 和 macOS 的默认浏览器)

在继续我们的教程之前，你应该安装好以上至少两个浏览器，并准备用它们来测试你的代码。

3.安装本地 Web 服务器

一些示例需要通过 Web 服务器运行才能正常工作。

Web前端开发学习第一步，带你一步一步掌握核心技术

下次文章将更新如何在本地配置服务器，请大家持续关注，谢谢大家，如果文章中有的软件无法下载或者无法使用，请在评论区留言或者直接私信我，我会在第一时间问大家解答问题。如果感兴趣的人多的话，我会把自己整理的一些资料放在下次文章中，大家就注意下载，后面我将持续更新前端开发的文章，有这方面的问题也可以随时问我，希望能在前端开发方面帮助到大家。如果觉得文章不错，就点个关注呗，谢谢了^_

声明：本媒体部分图片或文字来源于网络，版权归原作者所有，如有侵权，请与我联系删除。