前端2017年学习路线指南

作为一名Web开发人员和设计师,到底应该在2017年学习什么技术? 在本指南中,将讨论所有最新技术,告诉你如何正确的学习前端, 哪些知识是必须掌握的?哪些知识是可以作为补充学习的?

第一步: 掌握HTML/CSS

  1. 这是你最初必须掌握的

  2. 是网站的构建元素

  3. 没得选!

  4. 随着你前端的学习进程,熟练掌握

  5. HTML/CSS简单易学


掌握HTML/CSS

第二步: 使用基础工具

  1. 文本编辑器: Notepad2 / Sublime Text / Atom.io / IDE

  2. 图像编辑器:Photoshop, Illustrator, GIMP, Something slse

  3. FTP / SSH 工具 : Filezilla ,Putty

  4. 好的浏览器: Chrome

  5. 云盘: Dropbox, Google Drive, Box


基础工具

第三步: 学习原生JavaScript

  1. 原生JavaScript(现阶段不需要理会Node.js 和任何框架)

  2. 理解数据类型: String, Number, Arrays, Objects, etc

  3. 理解函数, 条件表达式, 循环,操作符等

  4. 事件处理

  5. JSON(JavaScript Object Notation), JavaScript对象表示法

  6. jQuery框架


原生JavaScript

第四步:搭建一个基础网站:

  1. 获取一个虚拟主机账户(Hostgator, InMotion, etc)

  2. 学习虚拟主机控制系统基础——cPanel (Email ,FTP Setup)

  3. 通过FPT(文件传输协议)上传你的项目

  4. 创建域名并和你的主机连接


搭建网站

第五步:恭喜你! 你现在是一个网页设计师了!——(现阶段还不足以称Web Developer)

  1. 有能力搭建一个专业的简单网站

  2. 有能力搭建网页应用的界面

  3. 能够把一张PSD 转化为基于HTML/CSS的静态网页

  4. 有在公司上班的实力, 或者选择成为一名自由职业者


网页设计师阶段

第六步: 思考接下来的侧重点!

  1. HTML/CSS框架: Bootstrap, Foudation(建议优先掌握!)

  2. 服务器端语言: PHP, Ruby....

  3. JavaScript框架: React ,Angular

  4. 数据库: MySQL, PostgreSQL


思考下一步

第七步: HTML/CSS框架

  1. Bootstrap(强烈推荐学习该框架!)

  2. Zurb Foundation

  3. Skeleton

  4. MUI

  5. Pure


HTML/CSS框架

第八步: 服务器端编程语言(专注于一个!)

  1. PHP(不是最好的语言,但是是最可靠的服务器端语言)

  2. Node.js(一款新型, 强大的后台语言)

  3. Ruby on Rails (最好的框架,但已经到了瓶颈期)

  4. Python(简单易学,但相对于主流语言并不流行)——可现在AI的爆红导致Python最近很火!


服务器端编程语言

第九步: 数据库(专注于一个!)

  1. 关系型数据库: MySQL 和 PostgreSQL

  2. 非机构化数据库: MongoDB 和 CouchDB

  3. 建议选择一个以下的组合:

    • PHP/ MySQL

    • Node.js/ MongoDB


数据库

第十步: 需要学习的一些端技术

  1. Git & Github

  2. SSH(安全外壳协议) & Basic Command Line

  3. CSS 预编译器: Sass/Less

  4. APIS / REST Service

  5. HTTPS / SSL


端技术

第十一步: 部署应用

  1. 专用服务器/ VPS

  2. 应用云平台: Heroku, Digital Ocean, AWS

  3. 部署工具

  4. Linux命令行

  5. 维护和升级


部署应用

第十二步:恭喜你,你现在成为一名网页开发者了!

  1. 能够创造出网页引用

  2. 能构建后端APIs

  3. 能连接服务器

  4. 能够管理数据库

  5. 你的选择: 得到一份很好的工作 / 成为自由职业者 / 开始一项事业


Web Developer阶段

第十三步:编程框架

  1. JavaScript框架: React, Angular 2, Vue.js, Express(后端)

  2. PHP框架: Laravel, Codeigniter, Symfony

  3. Ruby on rails

  4. MVC框架: Routing, Database Mapping, Helpers, Data Binding, Templating & UI


编程框架

第十四步: 内容管理系统(基于PHP)

  1. Wordpress(强烈推荐), Joomla, Drupal

  2. 有利用客户更新和维护

  3. 丰富的插件

  4. 开发速度快

  5. 模板的功能有限


内容管理系统

第十五步: 移动App发展

  1. 这是未来的趋势

  2. 你不需要学习Java 和C语言!

  3. 你只需要掌握JavaScript!我们可以使用React Native, Ionic, Cordova 等框架来构建移动App


移动App发展

第十六步:现阶段,现在你需要考虑什么?

  1. 专注于你的事业

  2. 回去学习更多的数据结构

  3. 跟进现在的新技术

  4. 学习一门高级语言,类似于Java, C语言