Web front-end development learning route

Lead: First share my experience, want to do a good thing, must spend some kung fu, then is more learning, more thinking, more practice, more exchanges, more summary, find their own problems, and then must overcome, in the condition of bad situation, often to timely adjustment. Novice learning front-end words, must think about

First of all to share my experience, want to do a good thing, it must take some effort, then more learning, more thinking, more practice, more exchanges, more summary, find their own problems, and then must overcome, in the condition of bad situation, often to timely adjustment. Novice learning front-end words, it is necessary to think about why to learn it, is out of a kind of mentality, and then positioning themselves, multi-directional Daniel Consult, teach some people do not have their own level of high, so often can let themselves grow fast, do not be impatient. Beginners can see some introductory video tutorials, then you can buy some books, do some small projects, to learn to invest, analyze their own status and ability, real-time adjustment, must have their own ideas, know how to innovate. Be sure to analyze yourself here and find a suitable learning method.

　　 the misunderstanding of Web front-end learning

Web-making is a computer professional students in the university will be exposed to a course, and learning Web page production used by the first integrated development environment (IDE) presumably mostly is Dreamweaver, this WYSIWYG "hanging bombing day" IDE for our production of Web pages brought great convenience.

Get started fast, quick results let us unknowingly have been deeply in love with the production of the web. At this point, many people will fall into a misunderstanding, that is, since the use of such a handsome IDE, through the mouse click on the menu can be quickly and easily create a Web page.

So why do we have to learn HTML, CSS, JAVASCRPT, jquery and other hard-pressed code?

But as the study progresses, we will find ourselves in a dilemma-the excessive reliance on the IDE leads us not to know the nature of its realization, but does not know why.

So when there is a problem with the page effect, we are overwhelmed, not to mention how to optimize the page and to complete some more advanced applications. The reason is obvious--the clever IDE has perfected our inertia, leaving us to overlook the most essential content--code behind the gorgeous Web page.


　　 the right direction is better than useless effort.

Two ants want to climb over a wall and look for food on the wall. An ant came to invade without hesitation to climb up, but whenever it climbed to half, it will be tired, tired and fall down. Although it is not discouraged, again and again fell down, and quickly adjust themselves, and began to climb up again.

Another ant took a look and decided to go around the wall. Soon, the ant went around the wall to get to the food and began to enjoy it, while the other ant continued to fall and start again.

Many times, success in addition to courage, perseverance, but also the need for direction. Maybe in a good direction, success comes faster than you think. If you run on the wrong road, then how hard it is useless. Learning the Web front end is also the case, first of all should choose a correct learning route.


　　 Learning route for web front end

Combined with my learning experience, the experience of coaching students in recent years and the needs of actual projects in the company, the Web front-end learning is divided into the following stages, specific learning roadmap.

　 the first stage of--html learning

Hypertext Markup Language (hypertext mark-up Language) is the skeleton of a Web page, whether it is a static web page or Dynamic Web page, the final return to the browser end is HTML code, the browser will interpret the HTML code rendered to the user. Therefore, we must master the basic structure of HTML and common tags and attributes.

HTML learning is a process of remembering and understanding that can be assisted by Dreamweaver's "split" view during the learning process. In the Design view, in the "Code" view of the essence of the high school, the advantages of the various views to the extreme, this control of learning to make up for the simple knowledge of HTML tags and attributes of the boring, presumably for you beginners of the small pot friends must be very good!

After learning HTML, we just mastered a variety of "raw materials" production methods, to build a building we also need to put these "raw materials" in accordance with our design portfolio layout together and some style of landscaping.

　　 the second stage of--CSS learning

CSS is the abbreviation of English cascading style sheets, called cascading style sheet, is a kind of style design language that can really achieve the separation of Web performance and content. The style is reusable compared to the traditional HTML, which greatly improves the speed of our development and reduces the cost of maintenance.

At the same time, the box model, relative layout, absolute layout of the CSS can realize the precise control of the pixel level of the position of each object in the Web page. Through this stage of learning, we can successfully complete the "one building" construction.

"Building" after the completion of the construction, we can hand over to the user, but if you want to give users a better experience, we can also be "building" a further "decoration" to make it look more "luxurious" some.

　　 the third stage of--javascript learning

JavaScript is a language that is widely used in the client, and in JavaScript we provide some built-in functions, objects, and DOM operations, which we can use to implement special effects, validations, interactions, and so on, to make our pages look less stiff. Cock Silk Instant counter attack Gaofu! Do you have one?

At this point, you may still be immersed in the surprises that JavaScript has brought to you, but your project manager suddenly yells at you

"This effect is not compatible under XX Browser, re-engage ..."

"Not compatible?" In an instant petrified with wood there?

"I wipe, pit daddy!" It took me one night to write hundreds of lines of code to fix it, spit it out! "

The compatibility and complexity of JavaScript sometimes really gives us a headache, but it's okay to have the "great God" help us with encapsulation.

　　 The fourth stage--jquery study

jquery is a free, open-source, lightweight JavaScript library that is compatible with a variety of browsers (jQuery2.0 and subsequent versions give up support for IE6/7/8 browsers), and now has a number of jquery-based plugins to choose from. This allows us to achieve some rich dynamic effects more convenient and fast, greatly saving our development time, improve the development speed, which also fully reflects its write less,do more core purpose. This feel is so cool!

"Luxury building" up to this point, but every day, year after year to build the building, so cumbersome! Can you block each individual component in the building, when it needs to be built like a pile of wood together, so it is not cool crooked? The answer is yes.

This idea in the Web front-end development is also suitable, so there are a variety of front-end framework, recommended here for everyone is bootstrap.

Bootstrap is an open source toolkit for front-end development launched by Twitter, a css/html framework that supports responsive layouts. Popular since its launch, it has been a popular open source project on GitHub.


In the project development process, we can use the CSS style, components, JavaScript plug-ins provided by Bootstrap to quickly complete the page layout and style settings, and then a targeted fine-tuning style, so that the framework-based development greatly shorten the development cycle. Standing on the shoulders of giants is cool!

　　 Learning suggestions for web front end

Finally, let's talk about some suggestions and methods in learning Web front-end.

In the CSS layout need to pay attention to a problem is that many students lack of the overall layout of the page analysis, can not be macro-based on the page in the nested relationship between the box to grasp, the rush to do, resulting in the relationship between the elements of the page is very confusing, prone to the box floating in the case of dislocation. We recommend that you use the idea of "top down, gradual refinement" in the layout, using several boxes to divide the page from the whole, and then gradually nesting the boxes in the box.

"Gentleman born non-different also, good fake in the matter also", in the course of learning also to browse some excellent website, good at analysis and reference its design ideas and layout method, see many can know wide, then can digest, take other people's long for me to use.

At the same time also be good at using firebug this weapon. Firebug on the one hand in our learning process to help us debug their own pages, on the other hand we can use firebug easy to view, analyze the source code of other people's website, "Stealing" is also a skill!

Each person's growth is not the same as the foundation, combining their own reality, in the implementation. Or repeat, the core of the front is JS. CSS is not difficult, but needs to accumulate. To the front-end I see this:

CSS is like a bottle of wine, a product.

Html,css a total of those tags and selector attributes, but it's not easy to write a page with extensibility, robustness, or maintainability. Now write the basic conditioning of the page, not how to quickly complete, but think if there is a need to modify the interface, how to modify the code in the fewest cases to complete the requirements of the task quickly. This is the triple test of stamina, stamina, and intelligence.

JS is like a sword, it has to grind.

JS just at the beginning just for more testing, casual technical social development, assume the role of more and more heavy, just started to play jquery feel already will JS, in fact, just the tip of the iceberg. With the understanding of JS more and more, he is sick and cute, that is fun and difficult to control, that there are many compatibility problems, but to solve the compatibility is our basic survival of the road. From Ajax to JSMVC all the way, high-load tide a wave higher than a wave

Life is a dream, to be done.

Technology is only a part of life, has been ambitious, now bowed down to write code. Change what can be changed and accept what cannot be changed. Life is limited, brother fight all the way. The attitude of life learning is: not anxious, not impatient, not slow. Persevere, believe in yourself. Don't ask to change the world, but to change your life. Do not beg legs, but beg one step one footprints. Thanks to the tribulation, he makes us stronger inside. Thanks to setbacks, he makes us constantly grow, thanks to the bug, he makes our thinking more profound. Thanks to the front-end, he makes us more believe that prop up a piece of sky need terrorize.

The article part of the content from the Internet, learn to their own useful things, feel that there is a wrong place can be directly ignored, just a reference, I hope everyone's front-end road farther and farther away.

Front-end Learning Exchange QQ Group: 328058344 We learn the front end together!

Web front-end development learning route