Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleTo do a good job, you must first sharpen your tools — Software installation and Environment construction


Preface: in the previous “from zero basis to ease employment | first-time front, we want to understand which noun?” In, we understand the nouns and concepts that we should grasp at the beginning of the front-end, which also involves a lot of knowledge points such as the software we need to install and the configuration environment.

This we will not mechanically go through the installation process, because as long as you learn the “scientific Internet”, so the installation software is only: open the corresponding software’s official website → DOWNLOAD → always “next” (foreign software is generally more conscience, there will not be other bundled installation).

The main point of this article is that you and I will get started, in order, by installing software to familiarize ourselves with new browsers, new ways of searching, and get a first-hand look at some of the great, lovely tools we’ll be using all the time.

Please refer to the relevant explanation of the previous chapter.


1 Scientific Internet

The most basic and frequent operations in learning the front end are search and check.

1.1 the search

1.1.1 Tool: Chrome

  • Official website, or Baidu search installation.

1.1.2 Enabling Chrome to log in to foreign websites (especially important step)

  • Sensitive operation – please read by yourself;

  • Check criteria: Access to YouTube.

1.2 check

After learning HTML, CSS, JS or AJAX, this check action is the most frequently used action.

  1. On any web page in your browser, right-click and choose Check from the options that pop up.

  1. The code associated with this page — DOM tree (Document Object Model);
  • The DOM provides the methods and attributes for adding, moving, changing, or removing elements of a page through JS.

  1. By clicking the icon in the upper left corner of the code box, you can view the corresponding code of any module in the web page in real time (the mouse will display the corresponding code in the code box when the mouse is placed anywhere);

  1. To open Console, press Esc on the build disk or directly click Console in the code box.

  • Function: used for debugging JS;

  • For example, if a style is missing, the code box will report an error and let us know what is wrong.


2 Git installation

💡Git Chinese usage documentation – refer to it as a reference manual

2.1 Installation Methods

Google Install (click DOWNLOAD and go to next) – Note: Git comes with Xcode installed on macOS.

2.2 Precautions

For Windows users, Git is best installed directly on a C drive. Because Windows under these software will always appear some inexplicable small problems, directly installed in C disk will support relatively better.

2.3 Installation Complete

Git Bash comes with Git Bash after installation. Git Bash client: Git Bash client: Git Bash client

Git config --global user.email -- git config --global user.email -- git config --global user.email Git config --global push. Default simple git config --global core.quotepath false Core. editor "vim" → Use vim to edit the submission informationCopy the code

2.4 Appearance Settings

Set up the appearance of the Git Bash client (for Windows users).

2.4.1 Set the operation interface to be transparent for easy operation and observation of changes

2.4.2 Setting the scroll bar on the right

2.4.3 Setting the encoding mode


3 Node. Js installation

3.1 Installation Methods

Google Search to install (click DOWNLOAD and go to next);

3.2 Precautions

For Windows users, Node.js is best installed on drive C. Because Windows under these software will always appear some inexplicable small problems, directly installed in C disk will support relatively better.

3.3 Installation Complete

Git Bash: $Git Bash: $Git Bash: $Git Bash: $Git Bash: $Git Bash

3.3.1 Checking where node and NPM are on the computer

which node
which npm
Copy the code

3.3.2 Viewing the Version numbers of Node and NPM

Node -v NPM -v or node --version NPM --versionCopy the code

3.3.3 Try using NPM to install a command line translation tool (this small tool named Fanyi)

npm i -g fanyi
Copy the code

3.3.4 After the loading is complete, enter

fanyi hello
Copy the code

The relevant Chinese explanations will come out and you will be given pronunciation.

❗ ️ note:

  • If you encounter the following “Permission issues” :

  • Please do as follows: (Refer to handling NPM permission issues)

3.3.5 Try using Node to do a math

node
Copy the code
  • After entering the node runtime environment, we can use Node to write JS:
1 + 2Copy the code


4 Editor installation

4.1 Installation Methods

Google install (click DOWNLOAD and go to next).

4.2 Editor selection

As for the editors described in the last article, I personally prefer Sublime Text and WebStorm.

4.3 suggest

In the first half month, I strongly recommend using a notepad/text editor to type out the code one by one and familiarize myself with the basic structure.

4.4 Emmet grammar

For code editors, a noun is introduced: Emmet syntax. All front-end editors currently support Emmet for efficient code entry.


Postscript: the above is the most basic installation and configuration, as for the specific use, the initial need not dig, with the depth of learning, taking questions to find the answer is the best way to learn.

We’ve had a first try at the top, have to admire, these tools are powerful, we should feel lucky, lucky in this era, with so many resources, we can certainly get the front end done. There’s no end to learning, and it’s worth the next 10,000 hours for you and me.

I wish you good, QdyWXS ♥ you!