Front-end entry---day1 (Introduction and recommended books and websites)

image description

Who wrote

This article written for the entry you want or just to get the front end of the front end of white ~
If it has been working for several years little friends can skip this series of articles friends.

Why write this article

Finally decided to give himself dug the pit, until not going to write this series of articles. Recall own front-end process, quite a few detours, I hope this series of articles can help white detours, Quick Start.

different places

Not a day more, because during the day to go to work, go back at night but also busy preparing for something else, will try to do a two to three days more, forgive me friends ~
There will be a lot of very complex concept, I will use their own language to express, as concise, easy to understand.
Everything will be combined with their actual development used in, speak their own stepped pit, pay attention to the point, as far as possible I will have to teach you.
Do not speak too old stuff, like IE6 compatibility problems and the like, the demand has been very little.
It will recommend appropriate books, suitable site for everyone to learn

Started slightly

What is the front-end, front-end to do what

Hey hey hey, in simple terms, you're viewing this page, above the buttons, text, images and the like, are the front-end engineers to show it to you. This page also known as H5 page, generally speaking, be responsible for front-end logic and page display the page, it is responsible for providing the back-end data, such as additions and deletions to the database search, and so on.

What front-end stuff to learn

To be honest, a lot of, the actual development, a front-end to learn the following things (even more):

Basis: HTML + CSS + Javascript
Framework: Vue or React or Angular (usually a school can recommend to learn Vue, a later article will only speak Vue)
Strapping Tools: webpack or gulp or grunt (mainstream Webpack)
npm: package management (will be used on the line, do not get to the bottom)
git: version control tools (multiplayer collaborative development)

It is not a little nervous, ha ha ha do not worry, one by one.

In fact when you learn 基础, then you can develop a web page, but also to learn in a very short frame of time, but once mastered the foundation and framework for the development of less formal skills needed basically are available,其他的东西都是一些工具。

So, 基础最重要。today to talk about the foundation, how to learn, what good learning resources and what books to read.

Ready to work

Download and install VSCode , VSCode is an awesome IDE, called IDE is the tool used to write the code, the code provides a function to highlight completion of the class, anyway, is it necessary front-end development!

Relationship between HTML, Javascript, CSS's

This three represents three different languages, but also correspond to three different files, respectively, to .html, .js, .cssthe end. These three documents combine to form a web that we see. 相辅相成，负责不同的功能。
Take to build a house analogy:

HTML is to build a good rough housing, setting up the shelves, look ugly, but also can not live inside, because inside had nothing, what appliances are not.
CSS is engaged in the decoration, the whole web of neat.
Javascript is to control the logic of the house, such as open doors, turn on the air, turn on the TV and so much more.

and so:

HTML is responsible for the basic structure of the page, you want to have a button on the page, you need to write a document in HTML <button>点我</button> tags
css responsible for landscaping the page, such as setting the background color of the button,background-color: red;
Javascrip click the button responsible for controlling what happens, for example, a warning window appears when you click.

The three file linking

Create a new folder, the folder with vscode open, respectively, and then create a new folder at the day1.html, day1.css, day1.jsthree files.
In day1.html, enter an exclamation mark !and then press the tabkey (note that the exclamation mark is in English exclamation point, rather than the Chinese), automatically generates the following HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

And then <body></body>add between a button tag <button class="my-button">点我</button>, so that a button can be displayed.
Add the following in the title <link rel="stylesheet" href="./day1.css">, so the introduction of the CSS file.
In </body>the top row is added <script src="./day1.js"></script>, so that the introduction of Js file. Final code obtained as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./day1.css">
</head>
<body>
    <button class="my-button">点我</button>
    <script src="./day1.js"></script>
</body>
</html>

We put these three different files connected up, although CSS and JS nothing there, behind Wang Libian add something more specific. Now you can open a browser day1.htmllook like a

ps: script标签和link标签里的./代表当前目录下，如果想表示上一层目录则要用../

HTML

HTML entry really does not take much time to understand the following points just fine.

HTML is a markup language, i.e., composed of a label, usually of a pair of an element, for example <button>点我</button>, note that there is a front and back slash button, representatives are closed.
Also it does not require closing tags, such as<link rel="stylesheet" href="./day1.css">
Tags can be nested, such as the link tag is nested in the head of the tag.
If you want to increase the content of the page, then the bodynew label tag, head embedded in the label is not displayed on the page, so we usually only need to write something in the body tag.

Learning method is very simple, according to the tutorial, one by one knock, then look at the effect, probably one day be able to read.

Recommended books:
not recommended, such a simple thing to see the document can get.

CSS

Write down the following code in day1.css in:

.my-button {
    background-color: #add8e6;
}

Then open your browser day1.html, you will find we became a light blue background color button. explain:

Add in the HTML button class named 类class namemy-button
css of .my-buttonthe “.”class representing the selector means to select earth element is called a my-button.
#add8e6Is a hexadecimal color method, may be used in rgb notation can also be built using some colors, such as red.

Recommended portal:
CSS- English tutorial
CSS- Chinese tutorial

Some points need to focus attention:

To get to know the box model, that is, the picture below:

To get to know the selector There are many, but the most common are class selectors and id selectors, as well as nth-childa selector very practical, you can all find out.
To get to know the display properties, with particular attention to inline, inline-block, blockthe difference between
To get to know the impact location, namely positionproperty, get to know who is positioned relative.
Less the initial float ( float), because a lot of people the wrong place, or do not know how clear the float.
The content of the tutorial, you can skip some reading CSS Tutorial, and CSS Advancedyou can, to save time, the rest of the free look. In addition elastic layout (flex) you can also skip, although very, very easy to use! ! ! Take a separate chapter later say.

When seen through the tutorial content, going to see with these questions above.

Javascript

Open day1.js, add the following code:

document.querySelector('.my-button').addEventListener('click', function () {
  alert('Hello, World!!')
})

explain:

document.querySelector('.my-button')Find HTML representation, the class of elements called my-button
addEventListenerThis element represents to add an event listener, the event is named click, that click event. When this element is clicked, call the anonymous function behind the pop-up warning window.

Relative to the HTML, CSS speaking, Javascript just like a real language, like C language did.
Front end, the core of the core is Javascript, because it controls the entire page logic to interact with the user.

Recommended books:

"JavaScript DOM programming Art (Second Edition)" This book is very thin, it is easy to read, the best introductory book.
"JavaScript Advanced Programming (3rd Edition)" legendary Little Red Book, relatively thick, patience to read.

ps: 推荐新人《Javascript权威指南》这本书的人通通乱棍打死，这本书绝对绝对不适合作为入门书籍，以上两本书就足够入门到较合格的前端开发了

ps: 请先跳过闭包！！难度较大，而且初级开发中用到的地方很少，需要的时候再去深入。适当的退步是为了更快的前进

At last

Amway an online learning program website, also in English, it is suitable for entry. Codecademy
summarize learning methods below:

For the basic things, I recommend the site to go one by one to see, one by one knock 不需要强记, looks, and the more you use the more skilled will be back.
Different stages to see a different book, Getting Started Front had just finished my recommendation site, while watching two books recommended, enough, more focused entry faster.
The fastest way to progress is always followed by knock, do not settle for watching.
Google first encountered the problem, really I do not understand the question may be, the time will help you answer.

All articles and code will be synchronized to facilitate browsing on github.

https://github.com/JJJustCodi...