What is the self-study route of Web front-end development? How to learn HTML + CSS + JavaScript?


No nonsense, direct dry goods.

Several stages of learning front-end:

Stage 1: HTML tags, HTML 5 new tags, CSS style, CSS3 style, media query, etc.

Stage 2: JavaScript, jQuery, ajax, object-oriented, HTTP transport protocol, etc.

Three phases: canvas, JS advanced application, JS-SDK, H5 new technology

Four stages: node.js, vue.js




Stage 1 – Learning HTML

HyperText Mark up Language (HTML) is the skeleton of a web page. Whether it is a static or a dynamic web page, the HTML code is the ultimate return to the browser. The browser interprets and renders the HTML code to the user. Therefore, we must master the basic structure and common tags and attributes of HTML.

HTML learning is a process of memory and understanding, in which Dreamweaver’s “split” view can be used to assist learning. Seeing the effect in the “design” view, in the essence of “code” view, to bring the advantages of all views to the extreme, this contrast learning method has made up for the monotonous nature of simply memorizing HTML tags and attributes. It must be excellent for all the beginners.

After learning HTML, we have only mastered various methods of making “raw materials”. To build a building, we need to put these “raw materials” together according to our design plan and make some style beautification.




The second stage – CSS learning

CSS is the abbreviation of English Cascading Style Sheets, which is called cascading style sheet. It is a style design language that can really separate webpage performance from content. Compared with the performance of traditional HTML, its style can be reused, which greatly improves the speed of our development and reduces the cost of maintenance.

At the same time, the box model, relative layout and absolute layout in CSS can realize the precise control of the position layout of each object in the web page at the pixel level. Through this stage of learning, we can successfully complete the construction of “a building”.

After the completion of “building” construction, we can give users to use, but if we want users to have a better experience, we can also “decorate” the “building” further to make it look more “luxurious”.




The third stage – JavaScript learning

JavaScript is a footstep language widely used in the client. It provides us with some built-in functions, objects and DOM operations. With these contents, we can achieve some client-side effects, validation, interaction, etc. so that our pages look less rigid. What’s the point that Diao Silk instantly attacks Gao Fu Shuai?

At this point, maybe you are still immersed in the surprise of JavaScript, but your project manager suddenly yells at you.

This effect is incompatible with * browser. Re-establish…”

“Incompatible?” Instantly petrified Wood?

I wipe, pit Dad! It took me one night to write hundreds of lines of code, ah, vomit blood all! “

Compatibility and complexity of JavaScript can be a real headache at times, thanks to the encapsulation of the Great God.



Learning Suggestions for Web Front End

Finally, we will talk about some suggestions and methods in learning the front-end of the Web.

One of the problems that should be noticed in CSS layout is that many students lack the overall analysis of page layout. They can not grasp the nested relationship between boxes on the page from a macro perspective, so they are eager to do it. As a result, the relationship between elements on the page is very confusing, and the boxes are prone to be misplaced when floating. It is suggested that we adopt the idea of “top-down, step by step refinement” in the layout. First, we divide the page into several boxes as a whole, and then continue to nest boxes in the boxes step by step.

“Gentlemen are not different, they are good at imitating things.” In the process of learning, they should browse more excellent websites, be good at analyzing and drawing lessons from their design ideas and layout methods, and be knowledgeable in many ways, so that they can be integrated and utilized by others.

Thoughts and layout methods can be seen in many ways, so that they can be integrated and utilized by others. On the other hand, we can use Firebug to easily view and analyze other people’s website source code, “stealing” is also a skill!

Everyone’s growth and foundation are different, combined with their own actual situation, in the implementation. Again, the core of the front end is html, js, css, which is not difficult, but needs to be accumulated. That’s what I think of the front end.


With the rapid updating of front-end technology, it is particularly important for front-end engineers to maintain self-learning ability in such an environment. Therefore, “learning what” and “how to learn” are the urgent problems we need to solve. This is my front-end communication learning qun: the front is 484, the middle is 757, the back is 760. If you need learning materials, download them. I have been in this field for more than ten years and come to ask me any questions, such as learning methods, learning efficiency and so on.

Html, CSS is like a bottle of wine.

HTML and CSS share those tags and selector attributes, but it is not easy to write pages with scalability, robustness or maintainability. Writing the basic conditional reflex of a page now is not how to accomplish it quickly, but how to accomplish the requirement task quickly with the least amount of code modification if the interface needs to be modified. This is a triple test of front-end endurance, physical strength and intelligence.

JS is like a sword, it has to be ground.

JS is just for experimentation. With the development of technology and society, the role of JS becomes more and more important. It feels like JS is just the tip of the iceberg when you start playing jQuery. With more and more knowledge of js, he is abnormal and cute, amusing and difficult to control, that is, there are many compatibility problems, but solving compatibility is our basic way of survival. From Ajax to jsmvc all the way, the high load tide is higher than the wave.

Life is a dream.

Technology is only a part of life, once ambitious, now bow down to write code. Change what can be changed, accept what cannot be changed. Limited life, just seize the day and night. The attitude of life learning is: not impatient, not quick, not slow. Keep it up and believe in yourself. We don’t want to change the world, but we want to change our lives. Do not seek vigorous steps like flying, but seek one step at a time. Thank you for suffering. He strengthens our hearts. Thanks for setbacks, he keeps us growing, thanks for bugs, he makes our thinking more profound. Thanks to the front end, he made us more confident that it takes eighteen kinds of martial arts to prop up a piece of sky.


Recommended Today

[tutorial] restful API using JWT authentication in laravel

This article is forwarded from the professional laravel developer community, original link: https://learnku.com/laravel/t… In this article, we’ll learn how to use JWT authentication to build restful APIs in larevel. JWT stands for JSON web tokens. We will also use the API to create full-featured crud applications for user products. When using cross platform applications, the […]