Web Front-end development learning routes and web development learning routes

Web Front-end development learning routes and web development learning routes

Lead: first, I will share my experience. to do one thing well, I have to spend some time, and then I will learn more, think more, practice more, communicate more, and summarize more to find my own problems, then we must overcome this problem. When the status is poor, we must adjust it in time. If you are a beginner, you must think about it.

First, I would like to share my experience. to do one thing well, it takes some effort to learn more, think more, practice more, communicate more, summarize more, and discover my own problems, then we must overcome this problem. When the status is poor, we must adjust it in time. If you are a newbie studying the front-end, you must think about why you want to learn it. It is out of a certain mentality. Then, you can locate yourself and consult with Daniel to learn more about people who are not at your own level, in this way, you can grow fast and never be impatient. For beginners, you can watch some introductory video tutorials. After that, you can buy some books and make small projects. You must learn how to invest, analyze your current situation and capabilities, and make real-time adjustments. You must have your own ideas, understanding innovation. You must analyze yourself and find a suitable learning method.

　　Web Front-end learning misunderstanding

Web page production is a course that computer students will access during their college years. Most of the first integrated development environment (IDE) used to learn web page production is Dreamweaver, this WYSIWYG "hanging sky" IDE brings us great convenience in making webpages.

Quick Start and quick effect have made us fall in love with creating web pages without knowing it. At this time, many people will fall into a misunderstanding, that is, since with such a handsome IDE, you can quickly and conveniently create webpages by clicking the menu with the mouse.

So why do we need to learn such hard-hitting code as HTML, CSS, JavaScrpt, and jQuery? Isn't this simple and traditional?

However, with the deep learning, we will find that we are in a dilemma-relying on IDE too much makes us not clear about the nature of its implementation, knowing it, but not knowing why.

Therefore, when there is a problem with the page effect, we are at a loss, not to mention how to optimize the page and complete some more advanced applications. The reason is obvious: Smart IDE fulfills our inertia and ignores the most essential content-code behind the gorgeous web page.


　　The right direction is better than unnecessary efforts

There are two ants who want to jump over a wall and look for food at the end of the wall. When an ant arrives at the foot of the wall, it does not hesitate to climb up, but whenever it climbs to the foot of the wall, it will fall down due to fatigue and fatigue. Although it was not discouraged, it fell down again and again, and quickly adjusted themselves, and began to climb up again.

Another ant looked at it and decided to bypass the wall. Soon, the ant began to enjoy the food before bypassing the wall, and the other ant continued to fall and start again.

In many cases, success requires both courage and perseverance. Maybe there is a good direction, and success is faster than you think. If you are running on the wrong road, it is useless to work hard. The same is true for learning the Web Front-end. You should first select a correct learning path.


　　Web Front-end learning route
 

Based on my learning experience, the experience of tutoring students in recent years, and the requirements of actual projects in the company, the Web Front-end learning is divided into the following stages and a specific learning roadmap.

　Stage 1: HTML learning

HyperText Mark-up Language (HTML) is the skeleton of a webpage. Whether it is a static webpage or a dynamic webpage, HTML code is returned to the browser, the browser interprets and renders the HTML code to the user. Therefore, we must understand the basic structure and common tags and attributes of HTML.

HTML learning is a process of memory and understanding. In the learning process, you can use the "split" view of Dreamweaver to assist in learning. Looking at the results in the "design" view, learn the essence in the "code" view, and bring the advantages of various views to the extreme, this comparative learning method makes up for the boring experience of simply memorizing HTML tags and attributes. It must be excellent for beginners!

After learning HTML, we just learned how to make various "raw materials, to build a building, we also need to combine these "raw materials" with our design scheme and make some styles beautify.

　　The second stage -- CSS Learning

CSS is short for Cascading Style Sheets. It is called a stacked Style sheet. It is a Style design language that truly achieves the separation of webpage performance and content. Compared with the traditional HTML, the style can be reused, which greatly improves the development speed and reduces the maintenance cost.

At the same time, the box model, relative layout, and absolute layout in CSS can precisely control the position and layout of objects on the webpage in pixels. Through this phase of study, we can successfully complete the construction of a building.

After the "building" is built, we can give it to users. However, if we want to give users a better experience, we can further "renovate" the "building ", make it look more luxurious.

　　The third stage -- JavaScript Learning

JavaScript is a widely used footfall language on the client. It provides some built-in functions, objects, and DOM operations in JavaScript, with this content, we can implement special effects, verification, and interaction on some clients, so that our pages don't look so dull! Yes?

At this time, you may still be immersed in the surprises brought by JavaScript, but your project manager suddenly yelled at you

"This effect is not compatible in the x×browser. Try again ......"

"Incompatible ?" Instantly petrochemical companies have wood?

"I wiped it, my father! It took me a night to write hundreds of lines of code to get it done. I vomited blood !"

The compatibility and complexity of JavaScript sometimes make us a headache. Fortunately, the "Great God" helped us encapsulate it.

　　The fourth stage -- jQUery Learning

JQuery is a free and open-source lightweight JavaScript library and is compatible with various browsers (jQuery2.0 and later versions give up support for IE6/7/8 browsers ), at the same time, there are many jQuery-based plug-ins to choose from. This makes it easier and faster to implement some rich dynamic effects, greatly saving our development time and improving the development speed, this fully reflects the core purpose of write less and do more. This Feel is amazing! Yes?

The "luxury building" is now on the ground, but every day after day, building year after year is so cumbersome! Can We modularize every single part in the building? when building a building is required, it is not cool to combine it like a pile of wood? Can it be implemented? The answer is yes.

This idea is also suitable for Web Front-end development. As a result, various front-end frameworks have emerged. Bootstrap is recommended here.

Bootstrap is an open-source front-end development toolkit launched by Twitter. It is a CSS/HTML framework and supports responsive layout. It has been a popular open-source project on GitHub since its launch.


During project development, we can quickly complete page layout and style settings with the help of CSS styles, components, and JavaScript plug-ins provided by Bootstrap, and then fine-tune the styles accordingly, in this way, framework-based development greatly shortens the development cycle. Standing on the shoulders of giants is awesome!

　　Web Front-end learning suggestions

Finally, let's talk about some suggestions and methods for learning the Web Front-end.

One of the issues that need to be paid attention to during CSS layout is the lack of overall analysis on the page layout and the inability to grasp the nested relationship between boxes in the page from a macro perspective, as a result, the relationship between elements on the page is very chaotic, and the box may be misplaced when it is floating. We recommend that you use the idea of "going from top to bottom and gradually refining" in layout. First, use several boxes to divide the page from the whole, and then gradually nest the box.

"A gentleman is born like a stranger, and good or false is also a thing." In the course of learning, you must browse some excellent websites and be good at analyzing and learning from their design ideas and layout methods, only when multiple parties have broad knowledge can they be integrated and used by others.

At the same time, we must be good at using Firebug. Firebug, on the one hand, helps us debug our own pages during our learning process. On the other hand, we can use Firebug to conveniently view and analyze the source code of other websites. "Stealing" is also a skill!
 

The growth and foundation of each person are different. They are executed based on their actual situation. Repeat it. The core of the front-end is js. Css is not difficult, but it must be accumulated. I think so about the front-end:
Css is like a bottle of wine.
Html and css are all about the tag and Selector attributes, but it is not easy to write a page with scalability, robustness, or maintainability. Now, writing Basic page conditioned reflection is not about how to quickly complete it, but about how to quickly complete the required task when there is a need to modify the interface and the minimum amount of code to be modified. This is a triple test of front-end endurance, physical strength, and intelligence.
Js is like a sword.
At the beginning, JavaScript was just for better experience. With the development of any technology and society, it became increasingly important to assume more and more roles. At the beginning, jQuery began to feel like js was just the tip of the iceberg. With more and more understanding of js, he is abnormal and cute, that is, fun and difficult to control, there are many compatibility problems, but solving compatibility is our basic survival path. From ajax to jsmvc, we can see that the high speed is too high.
Life is a dream.
Technology is only part of life, once ambitious, and now write code down. Changes can be changed, and acceptance cannot be changed. Life is limited. The attitude of learning in life is: Don't worry, don't worry, don't be slow. Persevere and believe in yourself. I don't want to change the world, but I want to change my life. If you do not want to be healthy, you must step by step. Thanks to the hardships, he made us stronger. Thanks to setbacks, he keeps us growing, thanks to bugs, and he makes our thinking more profound. Thanks to the front-end, he made us more confident that it would take 18 martial arts to support the sky.

Some of the content in this article comes from the Internet. If you learn something useful to you, you can ignore it directly. It is just a reference. May you go farther and farther to the front-end.

QQ Group for front-end learning and communication: 328058344Let's learn the front-end together!