lyhper blog

如何学习前端

准备篇

  • 基本的英文阅读能力
  • 学会使用google搜索引擎
  • 学会使用markdown编辑文档
  • 了解常用终端命令
  • 基本的photoshop使用

入门篇

HTML

  • 学习常用html标签的含义,熟悉每种标签的用途
  • 学会使用正确的标签描述正确的内容,达到仅用html标签就能绘制一篇易阅读的文档

推荐资源:W3Schools Online Web Tutorials

CSS

  • 学习css选择器
  • 学习各种常用的css属性
  • 学习文档流
  • 学习各种定位
  • 学习浮动
  • 学习常见布局方式
  • 学会css的书写与命名
    • 减少对html结构的依赖
    • 增加css可重用性)
    • BEM(block-element-modifier),严格的命名约定,使其他开发者看到命名就能明白用途
  • 练习临摹各大网站

推荐资源:

  • 《精通CSS:高级web标准解决方案(第2版)》
  • 《CSS权威指南》

javascript

  • 学习js基本语法
  • 学习变量
  • 学习作用域
  • 学习this关键字
  • 学习原型、继承
  • 学习事件机制
  • 了解回调问题,学习promise
  • 学习正则表达式
  • 学习跨域问题

推荐资源:

  • 《JavaScript DOM编程艺术》
  • 《JavaScript高级程序设计》
  • 《JavaScript权威指南》
  • MDN

实践篇

  • 开发工具(webstorm/sublime/VS code...)
  • 版本管理(git基本操作)
  • 学习模块化(CommonJS,AMD,CMD)
  • 学习jQuery,Vue等框架或库,学习使用模板引擎,推荐阅读官方文档
  • 学习Chrome开发者工具的使用
  • 学习CSS预处理语言(less/sass)
  • 学习http请求相关知识
  • 学习Nodejs,学习express框架
  • 前端自动化(gulp/fis/webpack)
    • 静态资源的压缩合并
    • 文件hash
    • css预处理语言编译
    • ES6语法编译
    • mock server
    • 自动刷新页面
  • 学习ES6语法
  • 学习服务器的基本配置
  • 在项目中学习,比如搭建一个自己的博客