How should a designer with zero foundation learn front-end

How can non-professional designers learn front-end? Let @Hux黄玄 (current WeChat front-end) tell you with his personal experience! As a self-taught designer, he has gone through many detours, all of which are valuable experiences he has personally experienced. The full article not only teaches you how to learn, but also provides detailed suggestions for future career choices. It is full of practical information, come and collect it!

The author's major in college was digital media art. I interned as a motion effects designer in my freshman year. In my sophomore year, I got an offer from my first big company as an interaction designer. Later, I transferred to the front-end team of Taobao Travel. Now I am doing front-end development at WeChat Movie Tickets.

I have also tried many unconventional methods, but fortunately, there are great artists like Xiaoyou @尤小右 who have switched from art/design to front-end and set an example in front of me, proving that this path is feasible:)

Next, let me talk about my own learning suggestions. This is a small tutorial, which is also the process I have gone through. It is for reference only.

—————————————————— Background ——————————————————

To learn new things in this era, you must be good at using search engines such as Bing/Google... There are a lot of resources on the Internet, and self-study ability is also particularly important, especially for learning technology!

Getting Started (HTML/CSS)

When it comes to the original intention of designers to learn front-end, it is probably because all kinds of gorgeous web page special effects/interactions are too attractive. This feeling is probably: "Hey, my design can be made into a web page!"

Fortunately, "display" is actually the easiest part for front-end technology. So, put aside your fear of the word "programming" and start with HTML/CSS, which "cannot be called a programming language", and make something that gives you a sense of accomplishment!

For designers, the most fulfilling thing is "what you can see", and HTML/CSS is used to do this. HTML is just a bunch of very simple tags, and CSS is nothing more than writing your drawing process in English according to a certain format:

 < p > p is paragraph! </ p >   
 
 < style >  
 p { color: red;}
 </ style >

Isn’t it very easy? Just like reading English!

Next, you need to start self-study, such as the meaning of common HTML tags, various CSS properties, and CSS box model, priority, selector... Don't worry, they are all easy; designers who can play PS/AI/Flash/Axure/AE/Sketch, learn this.

Recommended resources:

• w3school online tutorial (in Chinese, a very low-level but good introductory learning website)
• Learn to code (Codecademy, if you are good at English, I strongly recommend you to use it for interactive learning! It has courses from HTML/CSS to building websites, free, vivid and intuitive)

The exercises at this stage are mainly "copying": use code to draw the website you want to draw, the more the better.

As for books, I strongly recommend not to read all kinds of thick introductory/guide books right away. It's not necessary! At this stage, you should quickly get started, cultivate interest, and develop a sense of accomplishment. Make something readable first, and master the common HTML/CSS.

If done well, after this stage you can probably write some simple and good-looking "static web pages", such as this portfolio/resume: Portfolio - Huang Xuan's blog (I haven't updated for a long time... embarrassing)

Getting Started (JavaScript/jQuery)

Want to achieve some interactive effects on the web page, such as carousel, animation after clicking a button? Then you must start learning JavaScript! JavaScript is a complete, powerful and very popular programming language. All the interactive or advanced functions you see in the browser are supported by it!

For example:

 alert( "Hello World!" )

With just this one line, Hello World will pop up in your browser!

After understanding some basic JavaScript concepts (variables, functions, basic types), we can go straight to learning jQuery. You don’t need to know what it is specifically (it is a JavaScript code library), you just need to know that it can significantly reduce the difficulty of writing interactions:

 $( '.className' ).click(function(){
 alert( "Hello jQuery" )
 })

With jQuery, we can continue to use the "selectors" we learned in CSS

For those who have no programming foundation, it is not easy to fully master them. As designers, we often don’t need to delve into their principles, but try to apply them directly! This way, the sense of accomplishment will come quickly, and you can better understand what JavaScript is used for through practical application.

I still recommend you to use w3school online tutorials and http://www.codecademy.com/ for learning. In addition, you can take a look at very practical books such as "Sharp jQuery (Douban)", which can help you quickly get started and create some simple effects!

If you learn smoothly, you can also try to use various jQuery plug-ins. You will find that it is not that difficult to write a website that supports user interaction. Many seemingly complicated functions (such as carousels, light boxes, drop-down menus) can be solved by searching, reading the documentation (tutorials), and modifying the sample code.

For example, with a carousel plugin like Huxpro/jquery.HSlider · GitHub, you can easily write a web album like Hux-Slider | Demo.

***, I would like to recommend Bootstrap · The world's most popular mobile-first and responsive, which is one of the world's most well-known front-end UI frameworks, providing a large number of CSS styles and jQuery plug-ins. It is very easy to learn and the English and Chinese tutorials are very complete. You don't need to understand the working principle behind it to use it well, allowing you to quickly reach the "level of being able to build a website". In addition, you can not only learn how to use it, but also learn the ideas behind it.

Job transfer direction 1: front-end reconstruction

The industry usually calls front-end practitioners who specialize in HTML/CSS refactoring, and for designers who focus on visual effects, after mastering basic HTML/CSS, they can develop in this direction.

At this stage, you should not only know how to write pages, but also know why they are written and how to do it better. This is very helpful for you to understand the Web world and can help you make a more "systematic" design.

There is a lot to learn about CSS. You need to start by understanding the various positioning methods and principles such as document flow and floating flow, understand the ideas of inheritance and reuse of CSS, understand the differences between browsers, compatibility, and elegant degradation... Here I strongly recommend a book: "Mastering CSS (2nd Edition) (Douban)". Although front-end technology has advanced by leaps and bounds, the ideas in this book will never be outdated.

In terms of HTML, you need to start paying attention to semantics, accessibility, and reasonable structure. You need to start learning the "separation of structure and style". Here is a great book that does this separation to the extreme: "CSS Zen Garden (Douban)"

In addition, you will definitely like all kinds of cool CSS 3 properties: you can use media queries to do responsive web design, you can use transition and animation to do tween animation and keyframe animation, use transform to do scaling, rotation, 3D transformation, as well as rounded corners, gradients, shadows, and elastic boxes! Everything is a designer's magic weapon!

If you have mastered the introductory chapter (JavaScript/jQuery), then congratulations! You can already make a lot of interesting web pages! You can easily make many minisites or "H5" ads on WeChat!

With your design skills, you can start to create some interesting things, such as this interactive and animated website SENOVA, which is still based on Huxpro/jquery.HSlider · GitHub! Or you can try to make a small personal website for yourself.

Job transfer direction 2: Front-end engineer

If you feel that the above are not enough to satisfy you, and you are eager to make more amazing interactions, or even you have fallen in love with programming and want to switch to being an engineer, or become a full-stack designer, then you can continue to develop in this direction!

The most difficult part of this stage is that you must learn to think like a software engineer. You need to learn programming languages ​​​​down-to-earth, and have a deep understanding of a lot of programming concepts such as scope, objects, classes, encapsulation, inheritance, object-oriented programming, event listening, event bubbling, etc. You also need to understand browsers, learn DOM, BOM, CSSOM API, and you even need to learn some network principles, including domain names, URLs, DNS, HTTP requests, etc.

You may be intimidated by this large number of terms. Indeed, it is not easy to master them. However, you have to believe that they are not that difficult as long as you are willing to put in the effort. More importantly, if you can master them, what you gain is not just these, but you have truly crossed a hurdle - your world will be opened up, and the way you look at the world will change

At this stage, you can continue to learn on http://www.codecademy.com/, but w3school is no longer enough. If you encounter syntax you don’t understand, I recommend you check out the Mozilla Developer Network, which is one of the few super professional and friendly websites in both Chinese and English.

In the meantime, you may want to look at some books to help you learn JavaScript:

• "JavaScript Advanced Programming (3rd Edition) (Douban)" or "JavaScript Definitive Guide (Douban)", a large and comprehensive book only needs one copy
• If you think the above book is too difficult, you can first read "The Art of JavaScript DOM Programming (2nd Edition) (Douban)" as a transition. This book is easier and will teach you the excellent ideas of "graceful degradation and progressive enhancement"

If you can successfully pass this stage, I think you can already make many websites that you are proud of! Try to ask your engineer friends how to buy a domain name, configure a simple static server, or search for "Github Pages", and then put your work on the Internet for everyone to appreciate!

You can also try to write small games with JavaScript, which can not only improve your programming skills but also be very interesting. For example, this is the product of a one-night hack shortly after I learned JS - Hux - Aircraft, a plane shooting game implemented with DOM (not supported on mobile phones)

—————————————————— Entering the industry ——————————————————

If you can complete all the above learning, you are already a very good front-end apprentice! For designers or product managers who just want to enrich their skills, the following content may make you feel uncomfortable; (

But if you are determined to really enter the industry and work as a full-time front-end developer in a large company, then you can continue reading:

Front-end technology has developed rapidly in recent years. Front-end engineers are no longer just a job where you can just cut pictures, write pages, and create some special effects. You need to have fairly complete engineering qualities and computer knowledge to become a real engineer.

You need to have a good understanding of JavaScript, including closures, IIFE, this, prototype, and some underlying implementations (ES, VO, AO), and be familiar with common design patterns and JavaScript paradigms (such as implementing classes and private properties). In addition, the new ES6 has been released, including class, module, arrow function, etc.

You need to have a very good understanding of the commonly used front-end network and back-end knowledge, including Ajax, JSON, HTTP requests, GET/POST differences, RESTful, URL hash/query, webSocket, common cross-domain methods (JSONP/CORS), as well as CDN caching, the difference between static websites/dynamic websites, the difference between server-side rendering/front-end rendering, etc.

You need to learn to use advanced CSS, including being familiar with CSS 3, using languages ​​that compile to CSS such as Scss/Less, using PostCSS tools such as autoprefixer, and understanding the shortcomings of CSS in Scope/Namespace. You can also learn interesting new things such as CSS Modules and CSS in JS.

You need to be very familiar with the front-end modularization specification. Maybe by the time you learn this, Require.js/AMD has already said goodbye, but you must understand CommonJS and ES6 Modules. (You can watch my sharing "JavaScript Modularization Seven Days" to learn the history of JS modularization)

You need to be familiar with the use of Git and Shell, including git-based version management, branch management and team collaboration, including simple Linux/Unix commands. You should know that most programmers' work can be completed faster and cooler through shell, and many "software" can only be used through shell. You can also put your code on github to share with others, and learn other excellent open source codes on github.

You need to be familiar with and get used to using Node, including understanding npm, using Grunt/Gulp/Browserify/Webpack to optimize your workflow, and packaging, obfuscating, compressing, and publishing your code. You can also use Express/Koa with MongoDB/Redis to get involved in the backend field, or try using Node for backend rendering to optimize your first-screen experience.

You need to understand various new HTML 5 APIs, including <video>/<audio>, Canvas, webGL, File API, App Cache, localStorage, IndexedDB, Drag & Drop, more advanced DOM API, Fetch API, etc.

You need to learn JavaScript's single-threaded and asynchronous programming methods because they are very commonly used, including setTimeout/setInterval, callbacks and callback regions, events and event loops, Promise and even Async/Await.

You need to know browsers very well, including the names, kernels and differences of mainstream browsers, including private attributes and -webkit-. You need to learn how to use Chrome DevTool. You need to understand the reflow/repaint of browser rendering to avoid Jank and perform targeted performance optimization.

You need to learn Mobile Web specifically, because mobile Internet is the trend, including viewport, CSS pixel, touch event, differences and compatibility between iOS/Android browsers, performance optimization of mobile terminals, 300ms delay, etc. You also need to know what Hybrid is, including Cordova/Phonegap, and more complex mechanisms such as communication with iOS/Android, such as URI Scheme or JS Bridge.

You need to learn some very popular front-end frameworks/libraries, which can not only help you develop faster, but more importantly, the ideas behind them, including Backbone, Angular, Vue, React, Polymer, etc., and understand the two-way data binding, one-way data flow, MVC/MVVM/Flux ideas, Web Component and componentization, etc.

You need to learn how to build single-page web applications, which is the future of the web, including using the history API or hash to implement routing, front-end rendering based on Ajax + template engine or other technologies, organizing more complex software designs, and so on.

I also recommend that you learn more computer knowledge, which can have a subtle impact on your code, including simple computer architecture, broader programming knowledge (object-oriented/functional, etc.), data structures such as stacks, heaps, arrays, queues, hash tables, trees, graphs, time complexity and space complexity, and simple algorithms, etc.

You need to get to know the experts in the industry and read their blogs/Zhihu/Weibo. You can only learn a lot of ideas and new things from them. I also recommend that you participate in more technical exchange meetings and get to know more friends who can learn together. You can communicate with each other and grow together.

You need to have strong self-learning ability, be passionate about technology and keep up with the latest developments. Because the JavaScript/front-end community is very active, there are too many new things for you to discover and learn: such as Universal JavaScript (isomorphic), front-end testing, HTML5 games, WebRTC, CSS 4, ES 7, React Native, Babel, TypeScript, Electron, etc.

Although it's a bit too much, these are indeed what you will encounter in the future. You don't need to master all of them, but the more the better; you can also specialize in certain aspects, which is enough to make you a very professional front-end engineer.