In combination with the actual situation of my team, this paper summarizes the check list of basic abilities that novice, elementary and intermediate front-end engineers need to master, mainly focusing on HTML, JS, CSS, VUE and HTTP. Besides summarizing knowledge points, high-quality books applicable to each stage are also attached, hoping to help students in need.

Writing isn’t easy. Give a thumbs up if you find it helpful.

novice

Audience: interns, students

Learning objectives: It can be assumed that there is no development experience and no systematic knowledge of the basic skills required by Web development, so the focus of learning is mainly focused on basic knowledge HTML, CSS and JS. The goal of learning is mainly to apply the ability, need not and should not involve the principle level.

Knowledge points

  1. Introduction to HTML
    1. Understand basic rich text markup language syntax, tag attributes, and event definitions
    2. Understand common tags, with special attention to the semantics and basic styles of tags
    3. Interactive labels: A, button
    4. div + span
    5. Form tags: Form, input, Select, checkbox
    6. Semantic labels: Section, header, footer, figure, article, ul, OL, li
    7. Learn about other labels: www.runoob.com/tags/html-r…
  2. Introduction to the CSS
    1. Understand box model and streaming layout concepts
    2. Familiar with the following selectors: ID, class, element, wildcard
    3. Master the following selectors: pseudo-classes, properties, relationships
    4. Be familiar with the following attributes:
    5. Color: background, color, opacity
    6. Font: font-family, font-size
    7. Border: border, border-radius
    8. Box: width, height, padding, margin, min-width, min-height
    9. Master position usage, including absolute/fixed/relative
    10. Master display usage, including block/inline/line-block
    11. Know how to use transition, especially: scale, Translate, skew
    12. Understand animation usage
  3. Introduction to Javascript
    1. Proficient in programming structure: loop statement, judgment statement, sequential statement
    2. Understand prototype chains, closures, runtime concepts
    3. Understand DOM protocols and usage
    4. Proficient in browser (Chrome) breakpoint debugging function
    5. Understand axiOS usage and can use AXIOS to implement simple GET and POST request interaction scenarios
  4. Introduction to the Vue
    1. Understand template template syntax
    2. Understand data binding syntax
    3. Understand conditional judgment and loop syntax
    4. Good command of filter syntax and can use vuE2 -filters to solve practical problems
    5. Master common instructions, including: V-if/V-for/V-bind/V-model
    6. Understand component syntax and lifecycle rules
    7. Master the usage of vuE-CLI tool
    8. Understand MVVM mode, be able to distinguish view, view-model concept and relationship
  5. Network knowledge
    1. Understand HTTP protocol and HTTP request-response mode
    2. Understand webSocket protocol and understand the difference between WebSocket and HTTP in interaction mode

Recommended books

  • Head First Html Programming
  • Head First HTML5 Programming
  • The Art of JavaScript DOM Programming

resources

  • CSS manual

Learning task

Use Vue/react/ native JS to implement Todo list, support to add and delete list items; You can set the title and expiration time of list items.

primary

Audience: 0-2 years of work

Learning objective: To consolidate the foundation

Threshold:

  1. Master HTML syntax and be able to use various tags flexibly
  2. Flexible use of basic JS syntax and toolchain to solve production problems

Knowledge points

  1. HTML
    1. Understand label semantics and use labels correctly according to context
    2. Understand form usage and browser default processing logic
    3. Understand the role of META, keyword and other SEO tags
    4. Learn how to optimize performance through HTML tags
    5. Script tag on page execution flow and optimization
    6. The impact of style on page execution flow and optimization
    7. Learn about the http-Equiv tag
  2. Css
    1. Master common layout implementation methods, including:
    2. Fluid layout
    3. Responsive layout
    4. Elastic layout
    5. Grid layout
    6. Understand the special use of margin, including: margin collapse, center based on margin
    7. Understand the concepts of mobile render units, including PPI and pixel ratio; Understand the concepts of 2X and 3X diagrams and their usage scenarios
    8. Understand multimedia query capabilities
    9. Understand the usage of PostCSS
  3. Less
    1. Understand CSS preprocessor concepts, less environment configuration, processing process, solved problems, and output results
    2. Understand programming structures: loops, judgments, assignments, mixins
    3. Understand variable concepts and be able to perform numerical, color, Angle, percentage calculations based on variables
    4. Master functional tools
    5. Understand the operating principles of less-loader
  4. JavaScript
    1. Understand the memory stack and understand the concepts of value types, reference types, and wrapper types
    2. Understand the concept of prototype chain and be able to implement OOP programming using the prototype interface
    3. DefineProperty, Object. Create, Proxy usage, can simply describe the differences between these interfaces
    4. Understand the V8 engine garbage collection principle
  5. BOM & DOM
    1. Understand multimedia interfaces and be able to load and play videos and audio files on a web page.
    2. Understand the DOM event model and the role of bubbling features in performance optimization
    3. Understand document operation interfaces, including query, copy, delete, update attributes, and update contents
  6. Tool library
    1. Familiar with lodash functions, including map, reduce, filter, forEach, chain, sortBy, groupBy, pick, omit
    2. Familiar with dayJS /moment.js tool library, able to parse and format date string; Time calculation, duration calculation
  7. engineering
    1. Understand the principles of webpack file packaging, and be familiar with Entry, Resolve, Rules, and plugins configuration items
    2. Understand AST concepts and the role of AST in engineering tools such as WebPack and Babel
  8. Small program
    1. Understand the multiprocess architecture of applets, especially setData and event model
  9. Vue
    1. Understand the principles of V-Model instructions and be able to encapsulate the v-Model logic of components
    2. Understand how data binding works
    3. Understand the principle of diff algorithm
  10. Getting started with HTTP
    1. Grasp the use of Charles(or Fiddle) and Bifrost
    2. Understand cache-specific headers, including etag/ last-Modified /cache-control/ Expires; Understand the difference between negotiated caching and strong caching
    3. Familiar with the semantics of common response codes, including 200, 301, 302, 404, 500, 502, and 101
    4. Understand the semantics and usage scenarios of get, POST, PUT, and DELETE request methods. Understand idempotent concepts
    5. Understand the main constraints on HTTP 1.x transport performance, including:
    6. The concept of browser parallel connection number and what problems it solves
    7. Domain name resolution, TCP handshake, TLS handshake
    8. Request block/head block
  11. Node.js
    1. Familiar with file IO interface, familiar with read/write/open/stat
    2. Understand the concept of streaming interface, and be able to use streaming interface to realize file reading, writing and conversion
    3. Understand the HTTP module interface
    4. Understand the KOA framework and be able to write a simple HTTP service using KOA
  12. Network knowledge
    1. Understand TCP/IP and TCP three-way handshake
    2. Understand the difference between TCP and UDP. Can you tell why HTTP is usually implemented using TCP
    3. Understand DNS, and be able to clarify the relationship between DNS and CDN
    4. Understand TLS/SSL protocol, TLS handshake process, TLS certificate and verification process
    5. Understand page performance metrics, including FMP, TTI, FP
  13. Basic computer knowledge
    1. Familiar with common data structures, including linked lists, hash tables, binary trees, and arrays
    2. Familiar with common algorithms, including: bubble sort, quick sort, Hill sort, binary search
    3. Understand UTC date format and timestamp concepts
    4. Understand codec concepts and common methods, including UTF-8 / UTF-16 /ASCII/ Unicode
    5. Understand the concept of von Neumann structure

Recommended books

  • The Definitive GUIDE to CSS
  • Illustrated HTTP
  • The Definitive GUIDE to HTTP
  • NodeJs In Action
  • NodeJs in Plain English
  • JavaScript Advanced Programming
  • The Definitive JavaScript Guide

resources

  • Less website

Learning task

  • Try compiling various JS syntax on astExplorer.net/ tool, read AST structure carefully, and understand the internal logic
  • The DOM native Form interface is used for file transfer

The intermediate

Audience: 2-4 years experience

Characteristics: A pillar of the team, with rich development experience, should be familiar with front-end technology and have their own opinions, able to deal with most development scenarios.

Knowledge points

  1. Deep understanding of HTML, CSS, JavaScript
    1. Understand the page rendering process, including the process of compiling from static document to DOM, RenderObject, RenderTree, RenderLayout
    2. ESM modular
  2. learningJest, master the ability of automatic testing
    1. Master common Jest commands
    2. Build automated test processes with webpack, Rollup, NPM Scripts, etc
  3. Code elegance
    1. Deep understanding of OOP, including encapsulation, inheritance, polymorphism, composition concepts
    2. Understand the six principles of OOP programming
    3. Familiar with common design patterns, able to flexibly use various design patterns in actual practice
  4. Architectural knowledge
    1. Understand the principles of plug-in architecture and read and understand the source code implementation of plugins for Vue
    2. Understand BFF architecture concepts
    3. Understand microservices concepts
  5. Soft skills
    1. Strong learning ability, able to grasp a certain technical direction of self-research work
  6. Learn more about HTTP
    1. Understand the enhanced features of HTTP2, including: subcontracting algorithms, streaming, binary transport, and header compression features

Recommended books

  • HTTP2 Basics tutorial
  • TCP/IP Details
  • JavaScript Language Essentials
  • High Performance JavaScript
  • JavaScript Ninja Secrets
  • JavaScript You Don’t Know
  • CSS World

Byte game front a large number of recruitment of junior middle school and high levels, there is an internal push demand can be added wechat: tecvan