Exclusive Share--Daniel teaches you how to learn Web front-end development

Speech


Since 2008 to contact the development of the site has been six years, and today accidentally collated computer data to see at that time to participate in the Department of a game and do the first website, hook up in this web site development on the road of a string of memories, success and joy, trouble and tangled are vividly, feeling a lot. Here to share with you, I hope that the novice web front-end children's shoes to help. Welcome you to spit groove, shoot bricks.


Let's start with a misunderstanding of our study.


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.


So into the second phase of--CSS study


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.


In order to complete this task, we entered the third stage of--javascript's study.


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.


Next we go into the fourth stage of--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!


With the advent of the mobile internet boom, mobile development has been more and more popular, responsive layout, micro-site and other demand is increasing, is our web front-end of the future direction of development, students can pay more attention to learning. Finally, I wish you all a wider and wider world on the Web front-end development road!

Article Lu Xinchin

This article is reproduced, because feel good, share to everyone

Exclusive Share--Daniel teaches you how to learn Web front-end development