Open hylerrix opened 7 years ago
大前端有很多种，Shell 前端，客户端前端，App 前端，Web 前端和可能接下来很会火起来的 VR 前端等。当然在这篇文章，集中讨论一下身为小白，我们怎样去了解 Web 前端，以至达到一种入门级别的水平。
这同时也可作为任何一门编程语言入门之旅的小参考，不足之处欢迎指出。
互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。
当然，学 Web 前端的源动力也可以仅仅是想在浏览器上跑一个自己写的小游戏，或者好奇一下这个互联网的工作原理。
在浏览器中输入 www.jianshu.com 访问简书官网，服务器就会发来简书网页的源代码和一些图片，接着浏览器执行这些代码并将结果显示在浏览器窗口中，我们便可以进一步操作。
打开简书后，在( Chrome )浏览器窗口任意位置点击右键 -> 检查（快捷键 Ctrl + Alt + I 或 Alt + Commd + I）即可打开开发者模式，可见每一个我们能够看到的界面都是源代码被处理的结果。而这个源代码便是 Web 前端要去入手了解的第一步。
那么都该学什么才可以做出这么好看有趣的网页呢？可以从 @Phodal 大神之前写过的 Web 技能树看出 Web 前端的三大语言基石 -- HTML，CSS，JavaScript。
以及几年前一个很流行的前端工程师技能图谱可以借鉴学习。
其中，HTML 是超文本标记语言，文件以 .htm 或 .html 为扩展名，每当有一个 HTTP 请求（可以先理解为浏览器要访问网页的标准请求），服务器便根据请求发送相应的 HTML 文档到客户端进行解析，我们便可以看到相应的网页。
CSS 即层叠样式表 (Cascading Style Sheets)，定义如何显示HTML 元素。我们可以把 CSS 写到 HTML 页面的
JavaScript 是因特网上最流行的脚本语言，可以在不刷新整个 HTML 的页面时根据具体事件动态的更改页面内容，使网页真正的“活”了起来。这里不得不说的是，由于 JavaScript 近年来火热发展，覆盖已经不仅仅局限于 Web 前端而涉及到服务端（Node.JS 等）甚至物联网和 VR 设备上了。
例1. 《致JavaScript也将征服的物联网世界》 例2. 《打造VR世界: Oculus + Node.js + Three.js》
编程语言的概念在这里只做引导，具体点进下方“去哪儿入门 Web 前端编程语言”推荐的网址进行深入理解~
这里按类别直接上几个推荐学习 Web 开发（不只是前端）的学习网站：
更多的内容在我的 Github 仓库 @icorvoh:FSD-Debris 中持续维护。
这里是一些较为经典的 IT 新闻网站，可以及时关注最新的技术改变
写 Web 前端源码用什么工具写？难道就用文本编辑器编辑 .txt 文件后将后缀改为 .html 才能打开并运行吗？当然不是，这里有很多很棒的前端开发工具作为推荐。根据个人信仰，选择其一就好。
WebStorm 一度被广大中国 JS 开发者誉为“ Web 前端开发神器”、“最强大的 HTML5 编辑器”、“最智能的 JavaScript IDE ”等，有智能的代码补全，代码格式化，html提示，联想查询，代码重构，代码检查和快速修复，代码调试，代码结构浏览，代码折叠和包裹或者去掉外围代码等等等等特点。可以集成 Git ，随时将自己的代码提交到远程代码托管平台。
Sublime 是程序员Jon Skinner于2008年1月份所开发出来的一款跨平台轻量级文本编辑器。Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。配合上各种开发插件，便可达到高效开发的状态。
Atom 是由 Github 官方发布，专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持 CSS，HTML，JavaScript 等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。
安利一个 Atom 上的一个插件 -- activate-power-mode，打开会有震撼的敲击代码的效果。效果演示地址。
好的学习道理离不开实体书的陪伴。好的书籍便是节约学习时间、拓展视野的一个高效道具。从 HTML + CSS + JavaScript 出发推荐一些书籍。
节选自 FKS 前端书籍推荐
说了这么多，这也仅仅才是开始。Web 前端开发之路也是认知整个计算机科学之路，这一路技术底蕴必不可少。如果能再做到下面几点就更好了。
9 月份就要发布 HTML 5.1 了，这么重大的新闻，还在等什么。。？
Hello，我是韩亦乐，现任本科软工男一枚。软件工程专业的一路学习中，我有很多感悟，也享受持续分享的过程。如果想了解更多或能及时收到我的最新文章，欢迎订阅我的个人微信号：韩亦乐。我的简书个人主页中，有我的订阅号二维码和 Github 主页地址；[我的知乎主页]中也会坚持产出，欢迎关注。 本文内部编号经由我的 Github 相关仓库统一管理；本文可能发布在多个平台但仅在上述仓库中长期维护；本文同时采用【知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议】进行许可。
大前端之旅
大前端有很多种，Shell 前端，客户端前端，App 前端，Web 前端和可能接下来很会火起来的 VR 前端等。当然在这篇文章，集中讨论一下身为小白，我们怎样去了解 Web 前端，以至达到一种入门级别的水平。
这同时也可作为任何一门编程语言入门之旅的小参考，不足之处欢迎指出。
为什么学 Web 前端
当然，学 Web 前端的源动力也可以仅仅是想在浏览器上跑一个自己写的小游戏，或者好奇一下这个互联网的工作原理。
浏览器上的页面
在浏览器中输入 www.jianshu.com 访问简书官网，服务器就会发来简书网页的源代码和一些图片，接着浏览器执行这些代码并将结果显示在浏览器窗口中，我们便可以进一步操作。
查看页面源代码
打开简书后，在( Chrome )浏览器窗口任意位置点击右键 -> 检查（快捷键 Ctrl + Alt + I 或 Alt + Commd + I）即可打开开发者模式，可见每一个我们能够看到的界面都是源代码被处理的结果。而这个源代码便是 Web 前端要去入手了解的第一步。
Web 前端小白技能点
那么都该学什么才可以做出这么好看有趣的网页呢？可以从 @Phodal 大神之前写过的 Web 技能树看出 Web 前端的三大语言基石 -- HTML，CSS，JavaScript。
以及几年前一个很流行的前端工程师技能图谱可以借鉴学习。
其中，HTML 是超文本标记语言，文件以 .htm 或 .html 为扩展名，每当有一个 HTTP 请求（可以先理解为浏览器要访问网页的标准请求），服务器便根据请求发送相应的 HTML 文档到客户端进行解析，我们便可以看到相应的网页。
CSS 即层叠样式表 (Cascading Style Sheets)，定义如何显示HTML 元素。我们可以把 CSS 写到 HTML 页面的
标签中，或者直接引入外部以 .css 为拓展名的文件（外部样式表）到 HTML 页面中，外部样式表使你有能力同时改变站点中所有页面的布局和外观。JavaScript 是因特网上最流行的脚本语言，可以在不刷新整个 HTML 的页面时根据具体事件动态的更改页面内容，使网页真正的“活”了起来。这里不得不说的是，由于 JavaScript 近年来火热发展，覆盖已经不仅仅局限于 Web 前端而涉及到服务端（Node.JS 等）甚至物联网和 VR 设备上了。
编程语言的概念在这里只做引导，具体点进下方“去哪儿入门 Web 前端编程语言”推荐的网址进行深入理解~
去哪儿入门 Web 前端编程语言概念
这里按类别直接上几个推荐学习 Web 开发（不只是前端）的学习网站：
更多的内容在我的 Github 仓库 @icorvoh:FSD-Debris 中持续维护。
在哪儿了解 Web 前端编程语言动态
这里是一些较为经典的 IT 新闻网站，可以及时关注最新的技术改变
更多的内容在我的 Github 仓库 @icorvoh:FSD-Debris 中持续维护。
基本开发工具
写 Web 前端源码用什么工具写？难道就用文本编辑器编辑 .txt 文件后将后缀改为 .html 才能打开并运行吗？当然不是，这里有很多很棒的前端开发工具作为推荐。根据个人信仰，选择其一就好。
WebStorm
WebStorm 一度被广大中国 JS 开发者誉为“ Web 前端开发神器”、“最强大的 HTML5 编辑器”、“最智能的 JavaScript IDE ”等，有智能的代码补全，代码格式化，html提示，联想查询，代码重构，代码检查和快速修复，代码调试，代码结构浏览，代码折叠和包裹或者去掉外围代码等等等等特点。可以集成 Git ，随时将自己的代码提交到远程代码托管平台。
Sublime Text 3
Sublime 是程序员Jon Skinner于2008年1月份所开发出来的一款跨平台轻量级文本编辑器。Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。配合上各种开发插件，便可达到高效开发的状态。
Atom
Atom 是由 Github 官方发布，专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持 CSS，HTML，JavaScript 等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。
安利一个 Atom 上的一个插件 -- activate-power-mode，打开会有震撼的敲击代码的效果。效果演示地址。
Web 前端前期书籍推荐
好的学习道理离不开实体书的陪伴。好的书籍便是节约学习时间、拓展视野的一个高效道具。从 HTML + CSS + JavaScript 出发推荐一些书籍。
遇到问题怎么办
难道这就完了吗
说了这么多，这也仅仅才是开始。Web 前端开发之路也是认知整个计算机科学之路，这一路技术底蕴必不可少。如果能再做到下面几点就更好了。
HTML 5.1
9 月份就要发布 HTML 5.1 了，这么重大的新闻，还在等什么。。？