DISCLAIMER
This article is a collection of some learning material for those who want to become a front-end developer. Although it should be useful for all beginners, it's mainly written to meet the require of a certain project. So it will focus on things that I think useful for the project.
# Pre
What's happened when we surf the Internet?
- Read the answer (opens new window) written by Zhang Qiuyi from Alinode (opens new window).
- "20 Things I Learned About Browsers and the Web" [en (opens new window);zh] from Google.
# HTML/CSS
HTML and CSS are the foundations of web programming, you should grasp both of them deeply. Unlike any other programming language, they are very easy to learn from the beginning, but they are also profound in advanced learning.
- Mozilla's intro of HTML (opens new window)
- Mozilla's intro of CSS (opens new window)
- Head First HTML/CSS (opens new window) This book is highly recommended by many people, but I think if you have already read the two items above, you can feel free to skip this and do some further reading.
*The most efficient way to learn things is to learn it from doing it, so I highly recommend you to have a try during reading on your computer or in jsfiddle (opens new window) which is an awesome web IDE. If you come across problems, you should try to look for the answer in the documentation first and then search on the Internet, if you still can't find the answer, don't be nervous to ask for help (opens new window) on the Internet or just turn to me.
# Javascript
- A tutorial (opens new window) was written by liaoxuefeng.
- Mozilla's intro of Javascript (opens new window)
- JavaScript Secret Garden (opens new window), a collection of documentation about the most quirky parts of the JavaScript programming language, take a quick look to it.
# Vue.js
A tutorial (opens new window) was written by Evan You (opens new window), who is the founder of Vue.js. Follow the first and second parts(the start and front-end environment) of this article and skip the third part for the moment.
# Tools
- Editor recommended Visual Studio Code (opens new window), read another article (opens new window) I have written for why.
- Documentation browser recommended zeal (opens new window) in windows, and dash (opens new window) in macOS.
- Chrome developer tool. A1 (opens new window) A2 (opens new window)
- Git
- A brief view (opens new window) to git.
- A tutorial (opens new window) was written by liaoxuefeng.
- GitHub git cheat sheet (opens new window)
- Advanced learning. Git Pro (opens new window)
- Coding.net offers a full-featured Linux terminal (opens new window) which supports git. (click the demo button and the terminal panel is in the lower part of the viewport) We may use Coding (opens new window) as our git service, you should sign up and take a look of it.
- Linux
- vbird (opens new window)
- Also use the terminal offered in Coding.net's IDE to practice the use of Linux commands.
# Standard
- CodeGuide (opens new window) was written by Tencent's alloy team (opens new window).
- Airbnb's js style guide (opens new window)
# Further Reading
- A review (opens new window) of 2016 development in frontend
- Project around Vue.js (opens new window)
- The-growth-of-front-end (opens new window) written by taobao front-end team.
- keepachangelog (opens new window)
# Task
Build a blog by writing HTML, CSS and JS. Feel free to use any front-end framework or open source projects as you want, but you need to tell me the reason why you should use that project. The blog should have some functions as followed:
- contain several articles
- support code highlight
- support comment (can use third-party services like Disqus (opens new window) or duoshuo (opens new window))
- responsive, mobile supported
Examples:
The most important thing I think is to be elegant, wherever in code or design. And I recommend you to use vue.js to implement some functions.