如何自学前端与web前端知识体系梳理

如何自学前端与web前端知识体系梳理_第1张图片

什么是前端工程师?

总而言之前端工程师就是运用HTML/CSS/JavaScript等Web技术,在工作中配合设计师实现用户界面,和后端工程师进行数据对接,完成Web应用开发的职位。

建立学习大纲

必学内容

基础:

  • HTML
  • CSS
  • JavaScript

进阶:

JavaScript 的三大框架,三个必学一个。

  • vue.js
  • react.js
  • angular.js

基础知识

  • HTML
    • MDN的HTML入门
    • HTML30分钟快速入门
  • CSS
    • MDN的CSS入门教程
    • 学习CSS布局
  • JavaScript
    • JavaScript菜鸟教程
    • 慕课网JavaScript入门篇
  • Web
    • 当你在浏览器中输入google.com并按下回车后发生了什么
    • 互联网协议入门

中级知识

  • HTML5
    • MDN的HTML5入门教程
    • 网易云课堂HTML5入门
  • CSS3
    • CSS3菜鸟教程
    • Gitbook的CSS3教程
  • Style Guide
    • 腾讯alloteam前端代码规范
    • 百度ecomfe前端代码规范
    • Google HTML/CSS Style Guide
    • Google JavaScript Style Guide
  • Responsive Design
    • 响应式设计指南
    • 自适应网页设计——阮一峰
    • 什么是响应式web设计?怎样进行?
  • Web Animation
    • CSS动画
    • Canvas动画教程
    • Learn to Create Animations in JavaScript
  • Bootstrap
    • Bootstrap菜鸟教程
    • 慕课网玩转Bootstrap
  • jQuery
    • jQuery菜鸟教程
    • 慕课网jQuery基础
  • Ajax
    • jQuery Ajax快速入门
    • jQuery Ajax全解析

高级知识

  • w3c标准

    • Web Platform Docs
  • ECMA6

    • 阮一峰ECMAScript6入门
  • 测试

    • FEX前端自动化测试探索
    • 测试框架Mocha实例教程
    • Karma和Jasmine自动化单元测试
  • 自动化构建

    • 流式自动化构建工具Gulp
    • 前端工程构建工具fis
    • Web项目脚手架生成工具Yeoman
      • 用Yeoman和AngularJS做Web应用
  • 模块/包管理

    • npm
      • npm使用介绍
      • 快速搭建 Node.js 开发环境以及加速 npm
    • Sea.js
      • 5分钟上手Sea.js
    • RequireJS
    • ES6模块
  • 预处理器

    • Haml
      • Tutorial
      • HTML代码简写法:Emmet和Haml
    • Sass
      • Sass入门
    • TypeScript
      • TypeScript Handbook(中文版)
  • 框架

    • React
      • 入门实例教程
    • Vue
      • vue.js教程
    • Angular

服务器端

  • Nodejs
    • Node入门
    • 7天学会NodeJS
  • MongoDB
    • NodeJS与MongoDB交互

在线资源

  • 大前端导航
  • Frontend Stuff
  • Frontend directory
  • Frontend Interview Questions

在线教程

  • 菜鸟教程
  • 极客学院Wiki
  • Mozilla开发者网络
  • front-end-web-development on Treehouse
  • Learn to Code Advanced HTML/CSS

在线书籍

  • Front-end Developer HandBook
  • Front-end Database
  • Frontend Notebook

推荐书目

  • 基础

    • 深入浅出HTML与CSS、XHTML
    • HTML & CSS设计与构建网站
    • Pro Git中文版
    • 鸟哥的linux私房菜
  • 中级

    • Head First HTML5 Programming
    • JavaScript权威指南
    • JavaScript语言精粹
    • JavaScript & jQuery交互式Web前端开发
    • 深入浅出Ajax
  • 高级

  • JavaScript高级程序设计

  • HTML5高级程序设计

  • CSS权威指南

  • 深入浅出Node.js

面试

  • 目前最全的前端开发面试题及答案

  • 前端面试常考问题整理,按模块知识点分类

  • 全栈工程师培训材料

免费视频学习资料

  • 完整学习视频

如何自学前端与web前端知识体系梳理_第2张图片

如何自学前端与web前端知识体系梳理_第3张图片

  • Vue2.0+Node.js+MongoDB全栈打造商城系统
    如何自学前端与web前端知识体系梳理_第4张图片

  • node.js
    如何自学前端与web前端知识体系梳理_第5张图片

  • Vue+Node+MongoDB高级全栈
    如何自学前端与web前端知识体系梳理_第6张图片

最后

以上就是我对自学前端的几点建议,希望对你们有帮助。
最后,对 WEB 前端 学习感兴趣请长按二维码关注一波,我会努力带给你们价值,如果觉得本文对你哪怕有一丁点帮助,请帮忙点个赞。

以上视频学习资料只需要关注公众号: BiaoChenXuYing ,然后回复 福利 即可免费获得。

如何自学前端与web前端知识体系梳理_第7张图片

你可能感兴趣的:(前端,全栈修炼)