Many designers want to front-end direction, and that the most appropriate learning path front-end designers, what does? Before the start of this content, we give answers to a few minor problems!
The first question: I want to learn to develop mobile app, is not it also learn front-end?
Phone app development, the key is how you have to learn is Apple's mobile phone app development or Android app development mobile phone, because the two systems are not the same, and their app development language is not the same, iPhone development, then you can swift language learning, and the development of Android phones, you can learn Java or Kotlin.
I also mentioned in a content can be developed through the end of the phone app, and is cross-platform, Apple and Android can be developed, but this is the need to base your front end is better, we have in-depth study to a certain extent to master a skill, based front-end can not help you do this too.
My advice is if you just want to learn app development, you can learn Apple's swift language, because Apple's ecological better product experience even better, high-quality online learning resources on this language very much, but only because this language to develop software products run on Apple systems, such as Apple phone, Apple computers, there are still big limitations, but for now can only be used to develop the app, can not write web sites, using relatively simple scenes, on current trends, many small program is already able to replace a lot of app usage scenarios, while the development of technology applet is based front-end, which you can consider it.
However, even if even if you just want to learn app development, then after you master a language app development platform, then it's best to have the opportunity to learn some knowledge of front-end, so not only can widen your ability boundary, can also help you break the limitations of the platform, while the front-end technology can also be combined with other languages and swift mixed together to develop and improve your app development efficiency.
The second question: It seems able to achieve a very high level of effectiveness and multi-function C4D inside, which is not that python is also very suitable for designers to learn?
The past two years because the three-dimensional design style is very popular, many designers are beginning to learn the C4d. Indeed, python in C4D inside, you can achieve a lot of advanced features and effects with code, but you also say this is an advanced feature, and I know very advanced part. Since such advanced features is certainly very C4D specializes in content-related jobs and people may need to have to learn, for most designers build an atomic bomb this level of functionality with less than a high probability lifetime.
However, python In fact, this language has so many applications, particularly data processing and analysis, artificial intelligence, deep learning, web crawler etc. in the field (if you know it, in fact I would say JS can write reptiles). But the so-called industry specializing in surgery, it is better at the field of data processing and analysis, and the needs of designers really do not fit, the language really well, if you really need to be learning, I also encourage you to learn, but never by those unscrupulous marketing No. blinded, no access to the school, it really is a waste of time.
The third question: AE expression programming count it? Want to learn what ae expressions to learn?
After Effect software used in this latter part of small partners certainly have heard or have used more or less ae expressions. ae expression can help us quickly achieve a lot of complex advanced animation effects, if used well it can help us reduce the number of repetitive work to do to improve the efficiency of the latter do animation. In fact, the wording of that expression ae JavaScript wording, as long as you learn JavaScript, then another expression ae look at some special knowledge within it, it is very easy to get started.
So, if you have the ability, after the front end, especially mastered the JavaScript language, ae expression is very easy to learn. And not only ae expression, in fact, a lot of design software plug-ins or scripts can be used js language development, as some scripts of AE, some plug-ins sketch, figma is possible to use JS to develop. So if you know JavaScript, you can develop plug-ins or your own script, to help designers improve the efficiency of their own or other design work.
Next, we will begin the topic of this issue, the designer's front-end learning path.
The so-called learning path is to let everyone know at the front-end designers to learn what knowledge learning, learning what order.
All things are difficult, learning is not a front-end crash can do, if there is a relatively clear learning path, we have designers learn step by step to the front would be helpful.
Many small partner in a front-end began when I wanted to learn the idea and will definitely surf the Internet and a variety of front-end and front-end wanted to know what is what to learn and what to learn what the school first, and then make sure to see all kinds of the front end of the term people ignorant circle, I start too, have seen my head explode, a bunch of jargon, and thought this is what with what ah.
Well, today, on the front end of the learning path, I would like to put it another way and tell you that, according to my own learning experience and understanding, then the path to the front end designers study is divided into four stages.
Introducing these four stages of the process, I might have talked about some of the technical terms, we will try to do some straightforward explanation, if you still do not understand, it does not matter, I will mention professional terms are prompted to come out, you can find information to understand their own, and for some very important concept in the future I will be making additional relevant content to introduce.
getting Started
This stage is the most dazed stage, like my own at this stage, when the front-end know nothing about, looking for information everywhere want to know all aspects of the problem of the front end, the front end of the word can not wait to have open crumple look.
That on this stage, let me tell you that no matter what information you found, is how many have a headache the whole front end professional terms, those are not important to remember that all front-end knowledge and skills are built on html, css , JavaScript basis of these three languages. The most important thing is to learn html and css, then start learning the basics of JavaScript, these three are always not open around the front of the base, but the order must be the first html, css and then JavaScript, and recently added webassembly, this Some large web application language is only used to get language that most people can not use it.
In the process of looking for information, you may see the concept jquery, react, vue, ts, node, and so the first time you've heard, no headaches, all these things are done that you want to learn the basics of html, css after the JavaScript before you can go to learn, but also in order to learn the content.
html, css, JavaScript that three languages are mutually reinforcing.
html page is responsible for organizing the raw material, which is able to determine what the basic content of this document put inside, such as what to put text, what to put pictures.
css is in charge of the decoration of this page, it can assist html, make the page look good, by the way also add some animation.
js, is to give web site with a lot of features and interactivity, you can make your website can only see from a vase into a watch and easy to use and can become 72 all-rounder.
At this stage, have to be familiar with the syntax of html and css, familiar with their wording, can skillfully written several full page out.
After getting familiar with html and css, then start learning the basics of JavaScript section, js understand the basic writing and grammar, can understand basic js code to understand some basic concepts js among such variables, functions, arrays, objects, expression and so on, and then can be achieved by js page features some small, little interactivity.
In addition to basic knowledge of three languages, but also to learn some basic knowledge of the network, understand the basic principles server and browser, after all, the front end of all of the content is obtained from the browser to the server over the network.
Once you master these, then from the general sense you have been officially Getting Started Front, of course, if you require some low, just want to learn html and css, after all, they only have to write a full page, then you It can also be regarded as a beginning.
But if you want to further study the front, then in my view, to reach the standard entry, you still need to learn some knowledge.
Is a git and github, these two names I'm sure a lot of work over a period of time on the Internet junior partner certainly will not feel strange, but specifically what it is these two, I'll be alone elaborate.
It simply said, git is a program open source (ie free) program, can help achieve such a version of the program management code in the computer locally, github is to the git program is based on the local code on the remote server version and code libraries connected together for a website platform management.
There is to learn about the basic command line, the command line is to use the code line by line to achieve some control computer functions and operations that we will see in a number of films and television shows that cool hacker will use a way to operate a computer.
mac computer has a built-in command-line tool, called terminal. windows on the computer has its own command-line tool, you can also install some third-party command-line tool, specific tutorial I will elaborate on later in the command line inside. The reason why we have to learn the command line, partly because the git command is used to operate the line, and start early familiar with using the command line will contribute to post-depth study and front-end, after a number of high-level knowledge will be frequently used command line the way.
If you take more than I say these are finished school, in my opinion, it has been officially Getting Started Front, and you have been able to enter the second phase of the study.
explore
A small partner may wonder why the second phase is called to explore, discover should not be the first stage of it. Because in my opinion, only when you have mastered the basic knowledge of front-end, you have the ability to learn a variety of in-depth knowledge of the front end, and the process further in-depth learning, in fact, it can be subdivided into several directions, and these directions will require you to try, to explore, to see their own interest in the end where, which direction is suitable.
So I would summarize several learning direction for the designer, but I will in each direction in the main core knowledge to make a simple introduction. Here, I have to say first of two concepts frameworks and libraries, you will always have to see these two concepts, such as react, vue, bootstrap and so are the frameworks and libraries in their own time to learn or find information. That is specifically what frame (Library) and libraries (Framework)? Now, you can think of them as being the same thing to understand.
I have an analogy, just as we design software or other tools usually used, based on the assumption that the software is able to provide js in some very basic features, you can help me build the drawing board, drawing board to adjust the color, you can move to the drawing board position, two strokes painting a pen, etc. on the drawing board. That all of these operations, we need to go step by step operation, is also a function of a single. That so-called libraries and frameworks, that one should help us to separate these functions based on a variety of whimsy combine our software when we do not need to use a basic function, because this library and framework well, a variety of more efficient integrated functions. For example, to use a feature provided by this library, you can create and export the drawing board and color in one step, so we do not bother to go step by step to operate.
So, it can simply a collection of libraries and frameworks understood as a series of efficient shortcut commands or tools in some language-based composition.
The second concept is a version of the problem on a computer language.
We find information in the process will encounter some problems about the language versions, such htm4, html5, css2, css3, ES6, ES7 and so these concepts.
Why html, css, JavaScript language there will be so many versions? JavaScript and ecmascript What is the relationship? We may all feel very ignorant.
In fact, It's a bit like products, computer language designed for people who are, after all, is to keep upgrading, constantly improved.
This version of the computer language that, in fact, is the same reason. Take this language html for instance, there is a special organization responsible for developing and updating standards Html language, called the W3C. W3C time to time organize, discuss, update Html language standard, and those browser development company, will generally follow standard language to keep updated browser, these browsers can make the wording of the adoption of new standards html file correctly decoded, but these standards are not mandatory.
So sometimes you have to understand, is not a standard out, the browser will support, it is also possible that the standard has not officially released, the browser may have been supported by the case, the key is that the browser manufacturers of these new features the degree of the positive.
Generally speaking, unless the entire re-design language, or updated version of the computer language are forward-compatible, the new version is mainly compared to the previous version adds some elements to support more functions and features, without affecting support for previous versions of the language. If you see any tutorial says a knowledge point is html5, css3 knowledge, in fact, that this thing is html5 or css3 version of the new entrants, so, if your browser supports html5 version of the interpretation of html files, also html4 can file support versions of the wording. So html4, html5 These are actually a standard html language version of the name, like css2, css3, is css language version of a standard call, this version would have guessed, css3 achievable than css2 the effect more.
But the JavaScript language standard version of the name is relatively complex, you may hear a short ECMAscript 6 ES6, it is actually a version of js language standard. Some article said to learn es6, in fact, it is to let you learn the features and added new wording ES6 version of which some js language, and these standards are a dedicated organization to develop and publish. Now every year released a version, such as JS is now clearer language version of the standard naming some of the direct call ECMASCRIPT2018 this way, short ES2018.
That on this piece of knowledge you a quick view next like.
Three directions and a basic exploration stage
Having these two concepts, we can talk about it in three directions exploration stage and a base.
A basic
In the introductory phase at the beginning, in fact, we have learned only superficial knowledge of only the front end, more of a basic understanding and use of front-end several languages, if you want to go more in-depth study and master more front-end knowledge, we must take the foundation is more solid, especially css and JS needs to be more comprehensive and systematic study. While continuing to lay the foundation, you can begin to learn the use of some framework to understand the principles of the framework so that they have the ability to use these frameworks to improve their ability to code for, say js, Query, boostrap, vue react, in the framework of learning but also make you a better understanding js, js to learn more thoroughly, to improve their ability to help a lot of code.
Of course, not all frameworks need to learn a variety of frame is too much, even you can also have the ability to develop a framework. But my advice is to react this framework will learn, because it is now very popular, the penetration rate is also high, many companies are using this technology, and design tools FramerX like these and the code is a combination of depth collection of react. If you can master react, so will your design work of great help. So basically this is the need for you to continue to lay a good foundation, not to relax seemingly already know CSS, JS learning content, this part of knowledge is actually very much, especially JS, it is necessary to spend a lot of time and energy can slowly of learning through and thoroughly.
And that three directions, a lot of knowledge are built on your solid CSS and JS basis, the better your foundation, the easier it will later learn, the more efficient. Then we take a look at three directions in the end is what three.
The first direction: the direction of creative products
This direction is to make yourself learn to develop and complete a number of projects on the direction of the product line.
In fact, for many designers junior partner Internet products have their own ideas and thinking, but also the desire to implement some of the ideas fall out, and not just painted icon art interface make high-fidelity, so if you are a designer, then product development can go in-depth study of this one field, it is likely to become an independent product designers, design their own, their own development. If you want to learn this one, it is very much content.
First, you can delve into the knowledge under react, because the scene react can be used very much, help us to do many things, not only to develop the site, webapp, but also help us to achieve ──react-native app developers in the mobile terminal, and there are many useful development framework is based react, for example GATSBY next.js.
You can also learn about the development of small procedures, the development of language is actually a small program to front-end technology of these language-based, if you are a good basis for a front end, then started to develop small program is very fast. By developing a small program you can actually do a lot of application-level products, and most of the time have been able to replace app development needs.
In addition, you can also learn the next node or call nodejs. node is a program that allows us to use js on the server, because the previous js are traditionally only run in the browser because the browser inside a js engine, can resolve this js file, but with the introduction of after the node, you will be able to achieve many functions using js language on the server.
If you are not satisfied, you can also learn some knowledge of databases and servers, to understand the next mongdb (one kind of database), work together to achieve it and the node number of read and write access to user information, so you can do more things, do some of the more complex products. If you want to develop computer terminal app, you can learn under electron this framework, it can help us with htm, css, js to achieve the developers of desktop software cross-platform, vscode this code editor is to develop by the electron.
If you can say that I have learned of these, then you have a very powerful full-stack independent product designer, and to develop some small but beautiful of Internet product for you is not a difficult thing.
The second direction: animation interactive experience with dynamic efficiency
In fact, many designers in this direction is also possible and better at work most closely related.
First you go in this direction more in-depth learning CSS, master the methods and techniques implemented CSS animation, there is the knowledge of html graphics rendering and animation of the svg. About JS, you need to be more deeply to learn how to interact pages by js, not only can control and change the content of the page, you can also control some of the behavior of the browser, allowing the interactive experience or animation dynamic efficiency closer to our design Program.
Then also learn some libraries and frameworks designed to achieve animation, more famous example gsap, can help you more easily control the animation, to achieve some complex animations using general wording is difficult to achieve in a web page .
In addition, you can go to learn about FramerX this high-fidelity prototype production tools with a combination of code and design, it's part of the code is based react, it also has a special library called framer-motion, is it provides many convenient features for use in the development of real products, it's easy to realize that we can help a lot of interaction behavior and animation details.
Third directions: the front end of the data visualization and visualization
This is a direction, is a very promising direction. In this direction, I think the main focus on two aspects.
The first is the data visualization. I think the term big data we may listen to the bad, and then the data visualization is actually a big data brings important usage scenario.
How to display large amounts of data, how to improve the ability to communicate data, that is data visualization problems to be solved, and the demand will increase as this aspect of the development of the digital economy, will grow.
The front end, in the direction of data visualization actually have some of the more mature library, probably the most famous is D3, there are many other new library, you can go to search to find out. If you are interested in data visualization, then this may have been the target of some libraries you need to learn.
Another aspect is a visual front end.
With the continuous upgrading of computer equipment and mobile devices, the browser can do more and more things have been achieved in a number of three-dimensional pages, dynamic, interactive graphical effects, it has also been very relaxed .
This piece of knowledge involved are very large, very interesting, if you are interested, you can learn this is a very deep field, which not only needs a solid foundation js, and even some in-depth section may have to learn some graphics knowledge of science, as well as slightly more mathematical knowledge. However, on this one, I simply know some, so I am here simply to talk about what I learned.
Knowledge is mainly related to the canvas and webgl, canvas is a label hmtl inside, if you do not know what is the label, you can understand it as a feature inside the html language, and webgl is in this canvas through JavaScript ( draw a variety of 2D and 3D graphics on canvas).
The Library About three most famous is three.js, of course, there are many other libraries, you can go to find relevant information themselves.
Another is my last issue said p5 this library, used to achieve the effect of processing arts programming, arts programming if you are interested, you can learn at the appropriate time. In fact, knowledge in this direction, whether it is data visualization or visual front-end, are mainly to be built on a solid foundation of js, because all of these libraries are on the page elements to operate using js, in order to achieve various effects , so before you learn the content, be sure to lay the foundation of js.
The above is a summary of my three directions, in fact, these directions are not mutually exclusive, or even can be carried out alternately, can be more and more to try to learn, which is the reason I call this stage of exploration, while this process is a process of trial and error learning and review, allowing you to front-end have more in-depth knowledge of the experience, but also better able to grasp, especially knowledge of JavaScript can grasp more solid.
Remember, JavaScript's ability is the core foundation of your front-end skills to further their education.
Well, the second exploration phase is finally finished.
create
In the second stage, you've also learned a lot of front-end related skills, and some may be of some deep, some might just know some, but most of the time is to follow the tutorial to do stories, do exercises, and the third phase, is the need for you taking some time to do, systematic nature of the project output of the autonomy.
Apply their knowledge is the best way to master a skill, then this stage is something you need to learn with them, create some products, this stage is the project combat, to consolidate what they have learned by creating, identify problems, continuous learning, in-depth study. Learning is the need to practice, as do products, we want to use in-depth real user scenarios, can we truly find the products in question, the user pain points, learning is the same, you only really do the project, you will find yourself where where not understand, if only blind shining tutorials do, there will be a lot of knowledge of blind spots skills.
Many students feel that they can do what the project would be no, it is not true, such as your own personal web site development, web site development own blog, you can do both general site pages can also be a small program. For example, you have to work in some app product design draft, you put it into a web version of the product, with its own code to achieve it. As another example, you are responsible for moving the work efficiency, you can give yourself a 100 dongxiao source implementation of the project, his own work and interact with their own dynamic efficiency to achieve them in code. So, in fact, you can do a lot of projects, you can put some of their own needs or problems usually encountered record, if you can use technology to solve some of the front end, that this can be turned into a new project.
When you accumulate more and more of the actual project experience all through this project, your code will quickly increase capacity unconsciously, at the same time, you can show for individual projects will be more and more for you, it is a very valuable capital.
Study
If you can come to the fourth stage, that your front-end capacity has reached a certain level, and write the site, write or do some dynamic effect visual effects have not beat you.
At the same time, you should be able to know roughly which direction to prefer in-depth development. Of course, as a designer, it may be a lot of small partners will want to move the animation effect or visual front-end development, does not rule out some small partners are very interested in developing products, mainly want an independent product designer, himself design their own product development.
That in any case, at this stage is in a clear direction of their own, a period of time to focus on key areas of energy into this one inside continuous learning, continue to do the project, to exercise their own, continue to learn and summarize, in this area continued to deepen. Because a person's energy is limited, from the first few stages describe me, you probably also learned that no matter which direction actually need to spend a lot of energy to learn and practice. This fourth stage is not the end, you can learn after a certain depth, and then switch the other direction, then learn in a certain direction, it all depends on your own needs and interests.
This learning is endless, especially the Internet this line, particularly fast development and changes, technological progress and iterative too fast, and only keep learning, you have probably not be eliminated in this industry. Hope in this process, you can enjoy learning, and harvest their own growth.
Knowledge mentioned above, are based on my own experiences and real learning experience summed up the more central and important, I said all of these content and knowledge is not what you might encounter in the learning process, there are many I can not, there is no need to enumerate, if in case you encounter any do not understand, please share with me. I hope this issue will help you solve some questions about the front-end learning to learn.