Front-end learning path

What is a front-end engineer?

In general, front-end engineers use Web technologies such as HTML/CSS/JavaScript to cooperate with designers to implement user interfaces at work, connect data with back-end engineers, and complete Web application development positions.

Development Tools

Design software

The most important task of a front-end engineer is to cut the designer's design drawings and translate them into code, so we need to learn some basic operations of design software and drawing cutting methods.

• Photoshop is the most widely used design software. Most people are using it. It is necessary to learn it.
  • Essential PS skills for front-end engineers - picture cutting
• Sketch is lightweight and powerful, cutting pictures quickly and efficiently, a Mac App born for UI design
  • Sketch cutting tutorial

Editor

If a worker wants to do his job well, he must first sharpen his tools. There are many editors and IDEs available, but here I only recommend the best two.

• Sublime text is the sexiest editor, with various plug-ins that are easy to use
  • Configuration and usage
• Webstorm is a powerful front-end development IDE that students can use for free

Code Management

Not only must you learn to write code, but you must also learn to manage your code. At work, you may encounter situations where you need to deploy code yourself; constantly modifying, iterating and refactoring, of course, you also need to master version control software.

• Linux you need to learn the most basic operations such as opening, moving and copying files on the command line
  • The 20 most commonly used commands in Linux
  • Brother Niao’s Linux Private Cooking - Basics
• Git is a version control software that you must use when writing code. You can learn it quickly after getting started.
  • Introduction to Git that even a monkey can understand

Testing Tools

Previewing and debugging are essential. Most of the time when writing front-end code is switching between the editor and the browser.

• Chrome Dev Tools Google Chrome development tools, if you want to preview and debug your front-end page, you must go here

Basic knowledge

• HTML
  • Getting started with HTML from MDN
  • HTML 30-minute quick start
• CSS
  • MDN’s CSS introductory tutorial
  • Learn CSS layout
• JavaScript
  • JavaScript Tutorial for Newbies
  • Introduction to JavaScript on MOOC.com
• Web
  • What happens when you type google.com into your browser and press enter
  • Introduction to Internet Protocol

Intermediate knowledge

• HTML5
  • MDN’s HTML5 introductory tutorial
  • Getting started with HTML5 in NetEase Cloud Classroom
• CSS3
  • CSS3 Tutorial for Newbies
  • CSS3 tutorial for Gitbook
• Style Guide
  • Tencent alloteam front-end code specifications
  • Baidu ecomfe front-end code specification
  • Google HTML/CSS Style Guide
  • Google JavaScript Style Guide
• Responsive Design
  • Responsive Design Guide
  • Adaptive web design - Ruan Yifeng
  • What is responsive web design? How to proceed?
• Web Animation
  • CSS animation
  • Canvas Animation Tutorial
  • Learn to Create Animations in JavaScript
• Bootstrap
  • Bootstrap tutorial for newbies
  • Play with Bootstrap on MOOC.com
• jQuery
  • jQuery Tutorial for Newbies
  • MOOC jQuery Basics
• Ajax
  • jQuery Ajax Quick Start
  • jQuery Ajax full analysis

Advanced knowledge

• w3c standard
  • Web Platform Docs
• ECMA6
  • Ruan Yifeng’s introduction to ECMAScript6
• Test
  
  • FEX front-end automated testing exploration
  • Testing Framework Mocha Example Tutorial
  • Automated unit testing with Karma and Jasmine
• Automated build
  
  • Streaming automation build tool Gulp
  • Front-end engineering construction tool fis
  • Web project scaffolding generation tool Yeoman
    • Build web applications using Yeoman and AngularJS
• Module/Package Management
  
  • npm
    • Introduction to using npm
    • Quickly build a Node.js development environment and accelerate npm
  • Sea.js
    • Get started with Sea.js in 5 minutes
  • RequireJS
  • ES6 module
• Preprocessor
  
  • Haml
    • Tutorial
    • HTML code abbreviation: Emmet and Haml
  • Sass
    • Getting Started with Sass
  • TypeScript
    • TypeScript Handbook (Chinese version)
• Framework
  • React
    • Getting Started Example Tutorial
  • Vue
    • vue.js tutorial
  • Angular

Server side

• Nodejs
  • Getting started with Node
  • Learn NodeJS in 7 days
• MongoDB
  • NodeJS interacts with MongoDB

Skill Map

• StuQ Skills Map
• Frontend Knowledge Structure

Online resources

• Big front-end navigation
• Frontend Stuff
• Frontend directory
• Frontend Interview Questions

Online Tutorial

• Tutorial for newbies
• Geek Academy Wiki
• Mozilla Developer Network
• front-end-web-development on Treehouse
• Learn to Code Advanced HTML/CSS

Online books

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

Recommended books

• Basics
  
  • In-depth explanation of HTML, CSS, and XHTML
  • HTML & CSS website design and construction
  • Pro Git Chinese version
  • Brother Niao’s Linux private cooking
• Intermediate
  
  • Head First HTML5 Programming
  • The Definitive Guide to JavaScript
  • The essence of JavaScript language
  • JavaScript & jQuery interactive web front-end development
  • Explain Ajax in a simple way
• Advanced
  
  • JavaScript Advanced Programming
  • HTML5 Advanced Programming
  • The Definitive Guide to CSS
  • Introduction to Node.js