Author: HelloGitHub- Dried fish

This is the last post in HelloGitHub’s Open Source Project for Beginners on GitHub:

  1. C + + article
  2. Python article
  3. Go article
  4. Java article
  5. JavaScript article

In Java, Lao Xun said that Java is the programming language with the largest share on the Internet today. As a junior, I have no objection to this statement. But what is the hottest and most popular programming language on the Internet in China? No one can argue with JavaScript. Compared with C++ and Java, JS has a lower threshold than Python. That should learn JS systematically as a novice, which steps should go?

  • Step 1: Open your browser and type in the url:https://hellogithub.com/
  • Step 2: Select the JavaScript project
  • Step 3: Learn one by one

Is there a faster way? There are! In this article, you’ll learn the basics, learn HTML, CSS, JS, and more, get your hands on pac-Man, start tuning, and finally get to the front end.

Go, go 🚗

Becoming a God Type 1: Lay a foundation

1.1 Front-end growth path: Web

HG # Vol.036 Web is a front end introductory graphic tutorial that documents the author’s process of learning front end from 0-1. As an introductory graphic tutorial, Web follows the principle of detail, in all the introduction of detailed KNOWLEDGE points such as HTML, CSS, JS, simple mobile terminal development, Vue and other framework use, Node.js introduction also dabbled in. It’s worth noting that the code comments in all of its examples clearly indicate what you need to be aware of when using a particular function, which is incredibly thoughtful.

However, the Web project is slightly inadequate in JS basic and advanced content stratification. It will find that there are many repetitive contents in 16 categories, and the front-end questions under the original advanced classification are independent into a separate classification, which includes a large number of interview questions and netizens’ face classics, but the flaws do not obscure the advantages. The Repo is definitely a useful tutorial for beginners.

Since the author did not make a brain map introduction to the contents of the classification and the contents under the classification, the brain map/directory structure of Xiaoyu Dried fish is drawn here, and some contents of the same theme are folded.

. | ─ ─ the front-end tools | ├ ─ ─ VS Code using | ├ ─ ─ Git using | ├ ─ ─ Mac installation and configuration of iTerm2 | ├ ─ ─ Sublime does the use of Text | ├ ─ ─ the use of WebStorm | ├ ─ ─ the use of the Atom | ├ ─ ─ making use of the | ├ ─ ─ VS Code using cumulative | ├ ─ ─ Chrome | ├ ─ ─ Emmet in VS Code | ├ ─ ─ iTerm2 + OhMyZsh + agnoster build | ├ ─ ─ iconMoon Caught | | └ ─ ─ whistle network ─ ─ HTML | ├ ─ ─ know Web and Web standards | ├ ─ ─ the introduction of browser | ├ ─ ─ HTML person | ├ ─ ─ HTML tags: typesetting tags | ├ ─ ─ HTML enthusiast tags: Font tags and hyperlink | ├ ─ ─ HTML tags, image tags | ├ ─ ─ HTML tags: graphic explanation | ├ ─ ─ HTML 5, rounding | ├ ─ ─ for example: Simple video player | ├ ─ ─ HTML, (2) | ├ ─ ─ HTML, (3) | └ ─ ─ HTML based review | ─ ─ CSS based | ├ ─ ─ CSS properties: fonts and text attribute | ├ ─ ─ CSS properties: Background properties | ├ ─ ─ a CSS stylesheet and selector | ├ ─ ─ the CSS selector: pseudo-classes | ├ ─ ─ a CSS stylesheet inheritance and cascading | ├ ─ ─ CSS box model, rounding | ├ ─ ─ floating | ├ ─ ─ CSS properties: positioning properties | ├ ─ ─ CSS case to explain in detail: Boya interactive | ├ ─ ─ range selector, rounding | ├ ─ ─ range of attributes, a (a) | ├ ─ ─ CSS 3 attribute a: animation, rounding | ├ ─ ─ CSS 3 attributes: Flex layout by rounding | ├ ─ ─ CSS 3 attributes: Introduction to Web fonts | ├ ─ ─ SaaS | ├ ─ ─ browser compatibility problems | └ ─ ─ the common border of the CSS 3 summary | ─ ─ CSS advanced | ├ ─ ─ to | ├ ─ ─ the layout of the CSS style | ├ ─ ─ CSS layout | ├ ─ ─ | font common sense in Web development and design ├ ─ ─ how to make an element horizontal center | ├ ─ ─ CSS development accumulation | ├ ─ ─ CSS articles recommendation | ├ ─ ─ CSS knowledge of small | └ ─ ─ CSS interview questions | ─ ─ JS based | ├ ─ ─ programming language | ├ ─ ─ JS introduction | ├ ─ ─ variable | ├─ Variable data types: Basic data types, and the reference data type | ├ ─ ─ the basic data type | ├ ─ ─ typeof and data type conversion | ├ ─ ─ operator | ├ ─ ─ flow control statement | ├ ─ ─ object profile | ├ ─ ─ base package type | ├ ─ ─ the built-in objects | ├ ─ ─ array | ├ ─ ─ | function ├ ─ ─ scope and variable | ├ ─ ─ precompiled | ├ ─ ─ this point to | ├ ─ ─ the call, the apply and bind | ├ ─ ─ higher-order functions | ├ ─ ─ closure | ├ ─ ─ object | ├ ─ ─ depth copy | ├ ─ ─ prototype chain and prototype inheritance | ├ ─ ─ classes and construct | inheritance ├ ─ ─ the regular expression | ├ ─ ─ event | └ ─ ─ jQuery | ─ ─ of JS ES6 grammar | ├ ─ ─ ES6 introduction and environment configuration | ├ ─ ─ ES5 strict mode of | ├ ─ ─ some extension of the ES5 | ├ ─ ─ ES6: Variable let, const and block-level scope | ├ ─ ─ the deconstruction of variable assignment | ├ ─ ─ arrow function | ├ ─ ─ the rest of the parameters and extended operator | ├ ─ ─ string, the expansion of the data and objects | ├ ─ ─ a built-in object extension: The Set data deconstruction | ├ ─ ─ Promise introductory explanation | ├ ─ ─ ES7: async function explanation | └ ─ ─ ES6: Symbol | ─ ─ JS advanced | ├ ─ ─ var, let, the difference between const | ├ ─ ─ data assignment | ├ ─ ─ JS development accumulation | ├ ─ ─ the call, the apply and the difference between the bind | ├ ─ ─ this | ├ ─ ─ | scope and closure └ ─ ─ to create objects and inheritance | ─ ─ the front basic skills | ├ ─ ─ CSS based practice | └ ─ ─ the DOM operation practice | ─ ─ Ajax | ├ ─ ─ server classification and PHP portal | ├ ─ ─ Ajax entry and sends an HTTP request | ├ ─ ─ function encapsulation | ├ ─ ─ homologous and cross-domain | | └ ─ ─ template engine ─ ─ mobile Web development | ├ ─ ─ the Bootstrap entry | ├ ─ ─ the Bootstrap use | └ ─ ─ Less explanation | ─ ─ Node. Js and database | ├ ─ ─ Node. Js introduction | ├ ─ ─ Node. Js | ├ ─ ─ Node. Js development environment setup | ├ ─ ─ Node. Js modular specification | ├ ─ ─ Node. Js built-in module | ├ ─ ─ Node. Js MySQL database operation | ├ ─ ─ CommonJS | ├ ─ ─ ES6 | ├ ─ ─ js modular: AMD | ├ ─ ─ JS modular: CMD | ├ ─ ─ JS modular: ES6 | ├ ─ ─ KOA2 | ├ ─ ─ Node. Js code example | ├ ─ ─ WebSocket | └ ─ ─ event-driven mechanism and non-blocking | ─ ─ Vue base | ├ ─ ─ instruction system | ├ ─ ─ v - modifier on event | ├ ─ ─ system instruction (2) | ├ ─ ─ for example: List feature | ├ ─ ─ custom filters | ├ ─ ─ the custom key modifiers & custom command | ├ ─ ─ Vue instance lifecycle function | ├ ─ ─ Vue of Ajax request | ├ ─ ─ Vue animation | ├ ─ ─ Vue component definition and registration | ├ ─ ─ Vue Between components of the value of | ├ ─ ─ Vue - the router routing | ├ ─ ─ Vue. Js in the development of common writing cumulative | ├ ─ ─ Vue accumulated development | └ ─ ─ Vue component | ─ ─ the React based | ├ ─ ─ the React to introduce | ├ ─ ─ JSX syntax introduced | | ├ ─ ─ the React module: life cycle ├ ─ ─ the React module: Common attributes and functions | ├ ─ ─ the React of binding this and to transmit the function and the method of | ├ ─ ─ the React one-way data binding | ├ ─ ─ the React of routing using | ├ ─ ─ Ant Design the basic use of | ├ ─ ─ AntD framework on pit recording | Custom | ├ ─ ─ AntD framework upload component └ ─ ─ the React Native | person ─ ─ the front interview | ├ ─ ─ the interview will see | ├ ─ ─ interview problems accumulated | └ ─ ─ netizen plane by | ─ ─ the front-end advanced | ├ ─ ─ code specification | ├ ─ ─ common terms | ├ ─ ─ an array of the common operating | ├ ─ ─ the front-end monitoring technology | ├ ─ ─ the lazyload & shake and throttle valve | ├ ─ ─ Vue accumulated development | └ ─ ─ the front to answer a few questions | ─ ─ the front-end integrated | ├ ─ ─ 2019 Web front-end route entry self-study | ├ ─ ─ share | front end learning ├ ─ ─ Express | ├ ─ ─ 2018 front-end diary | ├ ─ ─ 2019 front-end diary | ├ ─ ─ 2020 front-end diary | ├ ─ ─ CSS development summary | ├ ─ ─ Ajax related | ├ ─ ─ the HTML related | ├ ─ ─ a Json string parsing and traversing | ├ ─ ─ Json related | ├ ─ ─ the front-end blog recommendation | ├ ─ ─ the front-end development accumulation | ├ ─ ─ the front-end quotations | └ ─ ─ network caught and proxy tools: Whistle └ ─ ─ extension reading ├ ─ ─ 2020 Web front-end latest navigation ├ ─ ─ making project recommend ├ ─ ─ website recommends ├ ─ ─ the front article recommended ├ ─ ─ what are the major Internet companies in Shanghai ├ ─ ─ what are Beijing Internet giant └ ─ ─ what are the major Internet companies in shenzhenCopy the code

Making address – github.com/qianguyihao…

1.2 Edutainment: Pacman

HG # Vol.029 Pacman is an HTML5-based Pac-Man game. The core code is just two files, the main program is only 1000 lines of code, and the code is annotated and clean. It’s a great practice for beginners, and it gives you the habit of reading other people’s code.

Making address – github.com/mumuy/pacma…

1.3 Novice Level: 33-JS-CONCEPTS

HG # Vol.031 33- JS-CONCEPTS is the final entry point for the basic concepts that every Javascript developer should know to start the next level of development.

Making address – github.com/leonardomso…

Become the second type: moves change

2.1 Depth is breadth foundation: Web-series

HG # Vol.028 Web-series is a Web full stack development, engineering architecture and performance tuning written by A former Ali engineer, 王 王 invited Yuexiong, which Xiaoyu Dried likes very much. After you’ve familiarized yourself with the basics of the front end and made a simple game like Pac-Man, it’s time to move up the ladder to further performance tuning and engineering architecture issues. As a front-end engineer with more than 10 years of development experience, In web-series, Kingking Invites Moon Bear to explore how to effectively improve the team’s r&d efficiency and timely and reliable delivery in the entire product iteration life cycle; At the same time, it can control the overall complexity of the system, and continuously and continuously optimize the system performance and experience. It can be said that promotion and salary increase is poor this trick [manual dog head]

Making address – github.com/wx-chevalie…

2.2 Simplified operation process: d3.js

HG #vol.031 d3.js (Data-Driven Documents) provides a variety of easy-to-use functions that greatly simplify JavaScript’s ability to manipulate Data. The use of this library is a must for data visualization.

The most important point is that the D3.js project itself provides extremely rich demo for you to use directly, avatar as a “reference engineer” to draw a variety of cool power map, present a variety of visual data, such as: a dream of Red Mansions character relationship group diagram. After you have learned the basics in the demo, you can bind any data to the DOM according to your business needs, or directly manipulate the DOM to complete W3C DOM API operations, limiting the power of D3.js is only your imagination.

– > github.com/d3/d3 making address

2.3 Everything: X-build

HG #vol.040 X-Build is a scaffolding tool for small projects that initializes the project directory in seconds with terminal commands. The library internally integrates Webpack, Babel, ESLint, and other common front-end tools. Learn about scaffolding development and get familiar with how to integrate Webpack into your tools, which is helpful for custom scaffolding development.

Making address – github.com/codexu/x-bu…

Chengshen third type: ask triad wulin

3.1 Drinking with design: Next

One of the competitors of HG # Vol.054 is the designer, and pixel level reductiveness prevents many front end engineers from getting promoted. Next is your sword, Ali open source enterprise level background UI solution, is committed to solving the problems of designers and front end in the work collaboration, product experience consistency, development efficiency. After the designer modifies elements such as colors, an NPM theme package can be generated, and the front end can take this package and directly restore the designer’s design. Next is capital 🏄 came ️

Making address – github.com/alibaba-fus…

3.2 Whoever gets Chrome gets the world: Chrome-extensions-searchreplace

HG #vol.052 Chrome-extensions-SearchReplace is a Google plugin that searches and replaces text, and is also a great plugin development practice.

Making address – github.com/Summer-andy…

The last

This article concludes with GitHub Open Source Projects for beginners. Have you found any interesting projects or directions for your advancement from this series? If there are any other series you want to see, please leave a comment and let us know. You can also talk about what you want to say to HG!