2017 web front-end learning route: Quick introduction to WEB front-end development. First of all, I would like to share my experience. If you want to do something well, you must spend some effort. Then you need to learn more, think more, practice more, communicate more, summarize more, find your own problems, and then you must overcome them. In good situations, adjustments often need to be made in time. If a novice learns front-end, he must think about why he wants to learn it and what his mentality is, and then position himself well, ask more experts for advice, and teach more people who are not as good as himself. This will often allow him to grow. Be quick and don’t be impatient. For beginners, you can watch some introductory video tutorials. Later, you can buy some books and do some small projects. You must learn to invest, analyze your current situation and capabilities, and make real-time adjustments. You must have your own ideas and know how to innovate. You must analyze yourself here and find a suitable learning method.
1. WEB front-end-learning misunderstanding
Web page production is a computer It is a course that professional students will be exposed to during college. The first integrated development environment (IDE) used to learn web page production must be Dreamweaver. This WYSIWYG "explosive" IDE creates web pages for us. Brings great convenience.
The quick entry and quick results have made us fall deeply in love with web page production without even realizing it. At this time, many people will fall into a misunderstanding, that is, with the help of such a handsome IDE, web pages can be created quickly and conveniently by clicking the menu with the mouse.
So why do we still have to learn HTML, CSS, JavaScript, jQuery and other hard codes? Isn’t this the pursuit of complexity over simplicity?
But as the study deepens, we will find that we have entered a dilemma - excessive reliance on IDE leads to us not knowing the essence of its implementation, knowing it but not knowing why.
So when there is a problem with the page effect, we are at a loss, let alone how to optimize the page and complete some more advanced applications. The reason is obvious - smart IDE fulfills our laziness, causing us to ignore the most essential content behind the gorgeous web pages - code.
The right direction is better than useless efforts
There are two ants trying to climb over A section of wall, looking for food on the other side of the wall. When an ant reaches the foot of the wall, it climbs up without hesitation. However, every time it climbs halfway, it will fall down due to fatigue and fatigue. Although it was not discouraged, it fell down time and time again, quickly adjusted itself, and started climbing up again.
The other ant observed it and decided to go around the wall. Soon, the ant walked around the wall to the food and began to enjoy it; while the other ant kept falling down and starting again.
# Many times, in addition to courage and perseverance, success requires direction. Maybe with a good direction, success will come faster than imagined. If you run on the wrong road, no matter how hard you try, it will be in vain. The same is true for learning Web front-end. You should first choose a correct learning route.
2. WEB front-end - learning route
The first stage - HTML learning
HyperText Mark-up Language (HTML for short) is the skeleton of a web page. Whether it is a static web page or a dynamic web page, what is ultimately returned to the browser is HTML code, and the browser interprets the HTML code Rendered and presented 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. During the learning process, you can use Dreamweaver's "split" view to assist learning. See the effects in the "Design" view, learn the essence in the "Code" view, and maximize the advantages of various views. This method of comparative learning makes up for the tedium of simply memorizing HTML tags and attributes. It must be useful to all beginners. It must be great for little friends!
#After learning HTML, we just mastered the production methods of various "raw materials". If we want to cover A building also needs to put these "raw materials" together according to our design plan and perform some beautification.
php Chinese website recommended courses:
Manual: HTML Development Manual
HTML is easy to learn! I’m sure you’ll learn it quickly! HTML Examples This tutorial contains hundreds of HTML examples. Using the editor of this site, you can easily modify HTML online and view the results of the example.
Video: Video Tutorial on Learning HTML with a Flick of Finger
The second stage - CSS learning
CSS is the abbreviation of English Cascading Style Sheets, called cascading style sheets, which can truly achieve the performance of web pages and A style design language for content separation. Compared with the performance of traditional HTML, its styles can be reused, which greatly improves our development speed and reduces maintenance costs.
After the construction of the "building" is completed, we can hand it over to users for use. However, if we want users to have a better experience, we can also further "decorate" the "building" so that It looks a bit more "luxurious".
php Chinese website recommended courses:
Manual: 《CSS Online Manual》By using CSS we can greatly improve the efficiency of web development! This CSS online manual contains hundreds of CSS online examples. Through the online editor of this site, you can edit CSS online and view the modified effects online. Video:Video tutorial on how to learn CSS at your fingertips
##"Video tutorial on how to learn CSS at your fingertips" We will learn the CSS method Use, the difference between CSS selectors, and the common use of CSS and HTML.
JavaScript is a scripting language widely used on the client side. JavaScript provides us with some built-in Functions, objects and DOM operations, with the help of these contents we can implement some client-side special effects, verification, interaction, etc., so that our pages look less dull, and the diaosi can instantly counterattack the rich and handsome! Is there any?
php Chinese website recommended courses:
Manual:
JavaScript Reference Manual"JavaScript Reference Manual" is a reference manual. In your study and work, if you encounter knowledge that you don't understand about JavaScript, you can come and consult our manual. There are There are a lot of examples for everyone to refer to and learn from.
Video:
javascript Elementary Video Tutorial
"Javascript Elementary Video Tutorial" will introduce you to the basic variables, syntax, and Knowledge of conditional judgments, loop statements, arrays, functions, object BOM and DOM etc.
The fourth stage - JQuery learning
jQuery is a free, open source lightweight JavaScript library, and is compatible with various browsers (jQuery2.0 and subsequent versions have given up support for IE6/7/8 browsers), and now there are There are many jQuery-based plug-ins to choose from, which are more convenient and faster when we implement some rich dynamic effects, greatly saving our development time and improving development speed. This also fully reflects its core purpose of write less, do more . This feels so good! Is there such a thing?
"Luxury buildings" are rising from the ground, but the buildings are built like this every day, day after day, year after year. , so tedious! Can every single component in the building be modularized and put together like stacked blocks when it is time to build a building? Wouldn’t it be great? Can it be achieved? The answer is yes.
This kind of thinking is also suitable for Web front-end development, so various front-end frameworks have appeared. The one recommended to everyone here is Bootstrap.
Bootstrap is an open source toolkit launched by Twitter for front-end development. It is a CSS/HTML framework and supports responsive layout. It became very popular once it was launched and has always been a popular open source project on GitHub.
During the project development process, we can use the CSS styles, components, Java plug-ins, etc. provided by Bootstrap to quickly complete the page layout and style settings, and then make targeted Fine-tuning the style and developing based on the framework greatly shortens the development cycle. It’s cool to stand on the shoulders of giants!
php Chinese recommended course:
Manual:jQuery Chinese Reference Manual
"jQuery Chinese Reference Manual" will teach you to learn jQuery knowledge from basic to advanced. The manual contains a large number of jQuery online examples. You can run the examples directly to view the
video: jquery basic video tutorial
3. WEB front-end - learning suggestions
Finally, let me talk to you about some suggestions and methods in learning the Web front-end.One problem that needs to be paid attention to when laying out CSS is that many students lack the overall analysis of the page layout and cannot grasp the nested relationship between the boxes in the page from a macro perspective, so they are eager to do it. Doing this will cause the relationship between the elements in the page to be very confusing, and it is easy for the boxes to be misaligned when floating. It is recommended that you adopt the idea of "top-down, gradual refinement" when laying out. First use several boxes to divide the page as a whole, and then gradually continue to nest boxes within the boxes.
"A gentleman is born with something different, and he is good at fake things." In the process of learning, you should browse more excellent websites and be good at analyzing and drawing on their design ideas and In terms of layout methods, only by seeing many things can we become knowledgeable, and then we can integrate them and take advantage of others for our own use.
#At the same time, you must be good at using Firebug as a tool. On the one hand, Firebug can help us debug our own pages during our learning process. On the other hand, we can use Firebug to easily view and analyze the source code of other people's websites. "Stealing" is also a skill!
Everyone’s growth and foundation are different, and they should be implemented based on their own actual situation. Let me repeat it. The core of the front-end is js and css. It is not difficult, but it requires accumulation. This is how I look at the front-end:
css is like a bottle of wine, it has to be tasted
html, CSS only consists of tags and selector attributes, but it is not easy to write a page that is scalable, robust or maintainable. Now when writing the basic conditional reflection of the page, it is not about how to complete it quickly, but about thinking about how to quickly complete the required tasks with minimal code modifications 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 sharpened
js was just for From experience, with the development of technology and society, the roles assumed are becoming more and more important. When I first started playing with jQuery, I felt that I already knew js, but in fact it was just the tip of the iceberg. As we learn more and more about js, it is both perverted and cute, fun and difficult to control, and has many compatibility problems, but solving compatibility is our basic way of survival. Looking all the way from ajax to jsmvc, the tide of high load is getting higher and higher
Life is a dream, you have to make it
Technology is just a part of life. I used to be ambitious, but now I am writing code. Change what can be changed, accept what can not be changed. Life is limited, brothers fight for the day and night. The attitude towards life learning is: neither impatient nor impatient, neither fast nor slow. Persevere and believe in yourself. Don’t seek to change the world, but seek to change your own life. Don’t ask for a flying stride, but ask for one step at a time. Thanks to suffering, it makes us stronger inside. Thanks to setbacks, they make us continue to grow. Thanks to bugs, they make our thinking deeper. Thanks to the front end, he made us believe even more that it takes eighteen kinds of martial arts to hold up a sky.
We are a group of young people who love IT. If you also love IT and HTML5 development, please log in to www.php.cn to learn online and let us speak out for our dreams together.
Related recommendations:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
