Many times, success requires not only courage and persistence, but also the right direction. Perhaps with the right direction, success will come faster than expected. If you run the wrong way, no matter how hard you try. The same is true of learning the Web front end. First, make clear your learning route. The following are four stages of learning the web front-end:
1. Hypertext Markup Language
First, learn HTML. HTML (Hypertext Markup Language) is the skeleton of a web page. Whether it is a static web page or a dynamic web page, the HTML code is finally returned to the browser, which interprets and renders the HTML code and presents it to the user. Therefore, we must master the basic structure and common tags and attributes of HTML.
Learning HTML is a process of memorizing and understanding. In the process of learning, you can use Dreamweaver's "split" view to assist learning. See the effect in "Design" view, learn the essence in "Code" view, and give full play to the advantages of various views. This comparative learning method makes up for the boredom of memorizing HTML tags and attributes, and it must be a good method for beginners who just learn web front-end development.
After learning HTML, I just mastered the production methods of various "raw materials". If I want to build a building, I have to combine these "raw materials" according to our design scheme to beautify some styles.
2. Semi-cast cast iron (Cast Semi-Steel)
Then learn CSS. CSS(Cascading Style Sheets) is a style design language, which can really separate the presentation and content of web pages. Compared with traditional HTML, its style can be reused, which greatly improves our development speed and reduces the maintenance cost.
At the same time, the box model, relative layout, absolute layout and so on 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 study, the construction of "one building" can be successfully completed.
After the building is completed, it can be handed over to users, but if you want users to get a better experience, you can further "decorate" the building to make it look more luxurious.
3.java description language
JavaScript is a scripting language widely used in clients. JavaScript provides us with some built-in functions, objects and DOM operations. With these contents, we can realize some client-side special effects, verification and interaction, and make the page look more vivid.
Although JavaScript has many advantages that surprise you, when the project manager says to you, "This effect is not compatible in XXX browser, do it again!" At this time, you must be confused: "Can't you get along? It took me a night to write hundreds of lines of code! "
Indeed, the compatibility and complexity of JavaScript are sometimes really a headache, but fortunately, there is a "great god" to help us pack.
4.jQUery
Finally, learn jquery. JQuery is a free, open source and lightweight JavaScript library, which is compatible with all kinds of browsers (jQuery2.0 and subsequent versions gave up the support for IE6/7/8 browsers). At the same time, there are many plug-ins based on jQuery to choose from, which can realize some rich dynamic effects more easily and quickly, greatly saving the development time and improving the development speed, which also fully embodies its "writeless, domore".
"Luxury buildings" have sprung up here, but Gai Lou, day after day, year after year, is so complicated! If we can modularize each independent part of the building, when Gai Lou is needed, it can be put together as simply and quickly as stacked wood.
This idea is also applicable to Web front-end development, so various front-end frameworks came into being. Bootstrap is introduced below.
Bootstrap is an open source toolkit for front-end development launched by Twitter. It is a CSS/HTML framework that supports responsive layout. Once launched, it was very popular and has always been a popular open source project on GitHub.
In the process of project development, with the help of CSS styles, components and JavaScript plug-ins provided by Bootstrap, you can quickly complete page layout and style setting, and then fine-tune the styles, which greatly shortens the development cycle based on the framework.
Second, suggestions on learning Web front-end
Finally, I will give you some suggestions in the process of learning Web front-end.
In CSS layout, we need to pay attention to a problem: many students lack the overall analysis of page layout, can't grasp the nesting relationship between boxes in the page from a macro perspective, and are eager to achieve success, which leads to the confusion of the relationship between elements in the page and the dislocation of boxes when floating. Therefore, the idea of "top-down, gradual refinement" is adopted in the layout. First, the whole page is divided into several boxes, and then the boxes are gradually nested in the boxes.
"Gentlemen are born different and good at faking." In the process of learning, he should also visit some excellent websites, and be good at analyzing and drawing lessons from their design ideas and layout methods and various knowledge, so as to achieve mastery through a comprehensive study, learn from each other's strong points and use them for his own use.
At the same time, be good at using Firebug. On the one hand, Firebug can help us debug our own pages, on the other hand, we can easily use Firebug to view and analyze the source code of other people's websites.
With the arrival of the mobile Internet boom, mobile development is more and more welcomed by everyone, and the demand for responsive layout and micro-site is increasing, which is also one of the future development directions of Web front-end. Students who are interested in web front-end development can learn more about it.