Many people are interested in the web front-end. This issue mainly talks about how to get started and share the process of learning Web front-end development. This article is suitable for beginners who want to get started, so you don’t need to read it. The main content is some experience and suggestions from my own self-study web front-end, what knowledge to learn, and how to learn correctly. Although the self-study process is difficult, it finally lives up to expectations. Record and share below:
First, what is Web front-end development?
First of all, let's understand what is the Web front-end development that everyone is talking about? If you want to work in an industry, you must at least know what it is and what skills are mainly used, so that we can better learn and master knowledge and skills to meet the requirements of development work. The following answer comes from Sogou Encyclopedia:
Front-end development is the process of creating front-end interfaces such as web pages or apps to present to users. Through HTML, CSS, JavaScript and various derived technologies, frameworks, and solutions, the user interface interaction of Internet products is realized .
Front-end development evolved from webpage production. With the development of Internet technology and the application of HTML5 and CSS3, modern webpages are more beautiful, with remarkable interactive effects and more powerful functions.
So in the end, what is used is the common front-end three swordsmen , html, css, js, the three basic webpage technologies, and a webpage that is beautiful and powerful, is also written by these three swordsmen.
Second, the analysis of the front-end three musketeers:
The skills needed to get started with the web front end have already been said, so what exactly are html, css, and js, and how do we form a web page that we usually look good and very cool? The functions of these three are explained in detail below.
html: web infrastructure scaffolding
Popular interpretation: You can understand it as a person's unclothed torso, head, and body (including the stomach, limbs, and feet), and it also corresponds to the basic structure of html, head, and body.
css: webpage modification and beautification
Popular interpretation: You can understand it as a person wearing beautiful clothes and various gestures, etc., so that the person looks very good-looking. We also want to make the web page look good. By writing some css, we can Achieve a beautiful and cool web page.
js: dynamic interactive behavior of web pages
Popular interpretation: You can understand that a person cannot stand or sit all the time, but needs to walk with his feet, eat with his hands, and exercise. With these concepts of movement, you can roughly understand the role of js in web pages. The embodiment of user dynamic interaction function.
Web page basic template:
<!DOCTYPE html>
<html lang="zh">
<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>页面标题</title>
</head>
<body>
<!-- 网站主体 也是网页所有代码编写位置 -->
</body>
</html>Third, how to learn correctly? (emphasis)
The specific time for expected study depends on the individual's learning ability, and it is not the only one. The order of basic learning is also in accordance with the following steps.
1 , learn html (1-6 days)
- It is recommended to watch some basic tutorials: w3cschool l , video tutorials are not recommended (because there are too many video tutorials, and many things are not useful for getting started). After watching it for a long time, I forgot.
- Just look at the part mentioned in my picture (the outline on the picture is written according to the tutorial of w3cschool), how much do you want to see? I have a general impression, just know what this label is for.
Brief introduction picture:
2. Learning css (1-4 days)
- Tutorial: w3cschool is recommended , video tutorials are not recommended
- Just learn the parts mentioned in my mind map, to what extent can you learn? If you have a general impression, you can make your own understanding of the following questions.
Simple introduction map
3. Learning js (2 weeks to 4 weeks)
js is a relatively difficult and boring part. This is probably a stage of persuasion, because it is getting complicated~~ Many people have slipped here, so the focus needs to be on this One piece, eat slowly. After learning most of js, you can also combine the previous html+css connection at the same time to do some comprehensive small demo projects
Simple introduction map
4. Case recommendation
This is an interface effect of Zaku.com, which I imitated in the early stage of online learning. It is very suitable as a small case for testing and practice. Not only the home page, but also the navigation bar can be clicked, and there are corresponding pages displayed. You can also search Zhanku.com to find more pages. Then copy it yourself, if you need the demo source code of this case,
You can private message me for a comment.
Fourth, development tools
The ancients said: If you want to be good at your work, you must first sharpen your tools. To learn any technology, you need a good tool support, which is more conducive to learning and development. Currently, the commonly used front-end tools are HBuildX (click me to download ), Dreamweaver, vscode ( poke me to download ), edipus, etc. Of course, the tools are not limited to these and there are others, just know a few commonly used ones.
It is recommended for beginners to learn HBuildX and Dreamweaver . At the same time, the Chinese version does not need to be processed separately, and you can use the powerful vscode editor to develop after you are proficient.
Five, about self-study
Digression: I vaguely remember how good the training was when I first graduated. The actual situation varies from person to person, so I won’t make too many comments on this. Anyway, stick to your own path, don’t listen to wind and rain, learning is all about persistence! ! ! If you are still studying, then it is time to make a choice when you are about to graduate from university.
I am self-taught, and the road of self-study is indeed easy to take some detours, but this will make you remember deeply. Therefore, I also recommend learning the front end by self-study, and the most important thing for self-study is actually the driving force
Learning any technology is relatively difficult for self-study. If there is no continuous driving force, interest will gradually weaken. It just so happens that the front-end system is very large, so this situation is easy to occur: (from a conversation in Zhihu)
- Look at html, oops, it’s very simple, I’ve made a lot of progress by watching a little bit every day (the interest is very high, it’s been a while
- Looking at css, it seems a little difficult, but I seem to be able to resist (interest has weakened, and some time has passed
- Look at js, emmmmm (interest is not enough for me to learn, spread hands
- Look at the frame, mmp, I'm so tired, it's so cold (give up the treatment
- Goodbye, I'm not good at programming ...
So applying what you have learned is the key . Through some of the usage and knowledge points you have learned so far, slowly combine what you have learned before to make a small demo case together, so as not to lose your interest too seriously, and then use the project to drive yourself to digest the knowledge , Use the sense of accomplishment after completing the project to strengthen your interest , and then consolidate the foundation after getting started, so that you can probably enter the front-end threshold