The latest navigation of web front end from 2020 to 2021 – sharing of front end Learning Resources & summary of front end interview resources

National day these days, I collected a large number of front-end navigation links that can significantly improve the development efficiency.

These navigation links are very helpful to me, and I hope they are also helpful to you.

These easy-to-use navigation links have been deployed to the following website, where eating is more delicious.

The latest navigation of web front endhttps://www.kwgg2020.com/

My blog address:https://github.com/biaochenxu…

JavaScript

• JavaScript tutorial
• Introduction to ES6
• JavaScript 30Complete 30 projects in 30 days using native JavaScript
• CodewarsWork with others to complete real code challenges and improve your technology
• JavaScript tutorialModern JavaScript tutorial
• Excellent JS code specification
• The treasure project of development
• Typescript tutorial:https://github.com/xcatliu/typescript-tutorial
• Node.js studyhttps://blog.poetries.top/node-learning-notes/

CSS

• Various effects of CSSVarious effects of CSS (especially animation effect)
• CSS InspirationFind the inspiration to write CSS here
• CSS common stylesSummarize some common CSS styles
• Animate.cssOut of the box cross browser CSS animation
• animistaCustomize CSS animation effect on demand
• SpinKitCollection of CSS code fragments to achieve various loading effects
• CSS MinifierOnline CSS code simplification / compression tool
• https://sass.bootcss.com/docu…Sass is a mature, stable and powerful CSS extension language
• https://less.bootcss.com/A dynamic style language that endows CSS with dynamic language features
• https://stylus-lang.com/Expressive, dynamic and robust CSS

algorithm

• JavaScript algorithm and data structure:https://github.com/trekhleb/javascript-algorithms
• Leetcode solution:https://github.com/azl397985856/leetcode
• Five minute learning algorithm:https://github.com/MisterBooo/LeetCodeAnimation
• Thoughts on the topic of leetcodehttps://github.com/MisterBooo/LeetCodeAnimationThe idea of solving leetcode problem is presented in the form of animation.
• Beauty of data structure and algorithm by geek time app
• Front end learning data structure and Algorithm Project of 170k + star on GitHubhttps://github.com/biaochenxu…
• The beauty of JavaScript data structure and algorithmhttps://github.com/biaochenxuying/blog/issues/42
• Algorithm visualization toolhttps://github.com/algorithm-visualizer/algorithm-visualizerAlgorithm visualization tool is an interactive online platform, which can visualize algorithm from code.
• Algorithm visualization sourcehttps://visualgo.net/en
• Observe how the algorithm workshttps://github.com/skidding/illustrated-algorithmsVisual representation of variables and operations enhances control flow and actual source code.

Front end interview

• The front-end interview questions are sorted according to the module knowledge pointshttps://blog.poetries.top/FE-Interview-Questions/
• Front end development interview questions:https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions
• Web front end interview Dictionary:https://github.com/h5bp/Front-end-Developer-Interview-Questions/
• Nuggets front end interview questions collection:https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md
• Front end interview map:https://yuchengkai.cn/docs/zh/
• Summary of open source projects of 100k + star on GitHubhttps://github.com/biaochenxu…

Technology community

• GitHub：https://github.com/High quality content creation and sharing platform
• stackoverflow：https://stackoverflow.com/A website for answering technical questions
• Nuggets:https://juejin.im/At present, many high-quality front-end articles in China are on nuggets.
• Blog Park:https://www.cnblogs.com/A very pure technology blog platform.
• Zhihu:https://www.zhihu.com/Many students who do technology also begin to play Zhihu. Many of Ali’s front-end bulls are very active in Zhihu.
• CSDN：https://www.csdn.net/There are too many advertisements, but you are so old.
• segmentfault：https://segmentfault.com/Low key technology blog platform.
• v2ex：https://www.v2ex.com/A place to share and explore
• http://cnodejs.org/Node.js Professional Chinese community
• https://www.smashingmagazine….A web technology blog magazine site
• https://www.jstips.co/Launch a JS tips website every day
• W3cplus：https://www.w3cplus.com/Is a technology blog dedicated to promoting domestic front-end industry
• Imprint Chinese-https://docschina.org/Imprint Chinese is the most authoritative technical Chinese document community
• Collect high quality Chinese front-end Blogs:https://github.com/FrankFang/best-chinese-front-end-blogs

Blog team

• Tencent alloyteam:http://www.alloyteam.com/
• Tencent social user experience isux:https://isux.tencent.com/
• Taobao fed | Taobao front end team:http://taobaofed.org/
• UED of Alibaba International:http://www.aliued.com/
• Jingdong laboratory:https://aotu.io/
• Are you hungryhttps://zhuanlan.zhihu.com/ElemeFE
• Fex of Baidu front end R & D department:http://fex.baidu.com/
• 360 | Dance Company:https://75team.com/
• Meituan technical team:https://tech.meituan.com/

GitHub statistics

• GitHub Chinese ranking, high score excellent Chinese project:https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts
• GitHub global ranking:https://gitstar-ranking.com/This ranking is very authoritative. If your project is more than 10k star, you can be on the list and be among the top 1000 GitHub projects in the world.

structure

• NPM：https://www.npmjs.com/
• Yarn：https://yarnpkg.com/zh-Hans/
• Webpack：https://webpack.js.org/
• Gulp：https://www.gulpjs.com.cn/
• Babel：https://babeljs.io/
• ESLint：https://cn.eslint.org/Assembleable JavaScript and JSX checking tools.
• PostCSS：https://www.postcss.com.cn/Tools for converting CSS code with JavaScript tools and plug-ins

deploy

• GitHub PagesFree static website hosting service provided by GitHub
• NetlifyDeploy your website within 30 seconds
• VercelQuickly deploy your website
• SurgeYou can publish your website with one command
• HerokuBuild and run your applications in the cloud

Static site building tools

• Hexo：https://hexo.io/zh-cn/
• VuePress：https://www.vuepress.cn/
• GitBook：https://www.gitbook.com/

Front end code specification

• Tencent’shttp://tgideas.qq.com/doc/index.html
• Jingdong’shttps://guide.aotu.io/index.html
• Bootstrap code specification:https://codeguide.bootcss.com/
• ES6 programming style:http://es6.ruanyifeng.com/#docs/style
• Airbnb Javascript Style Guide：https://github.com/airbnb/javascript
• ESLintDetect and fix problems in JavaScript code
• PrettierFormatting JavaScript code

Debugging and capturing

• whistle：https://wproxy.org/whistle/Agent packet capture tool, very good, very powerful.
• Fiddler：https://www.telerik.com/fiddlerProxy packet capture tool.
• Easy Mock：https://www.easy-mock.com

development tool

• VS Code：https://code.visualstudio.com/
• Sublime Text：https://www.sublimetext.com/
• WebStorm：https://www.jetbrains.com/webstorm/
• Atom：https://atom.io/

Online tools

• CodePen – https://codepen.io/Online code testing tools

• Can I use – https://caniuse.com/Web front end compatibility list
• TinyPNG – https://tinypng.com/Png / JPG image online compression tool
• Cnzz site statistics-https://www.umeng.com/Domestic common site statistical tools

Front end Conference

• Vue.js Developer Conferencehttps://fequan.com/Vue.js Developer Conference China
• China JS Developer Conferencehttps://jsconfchina.com/A game focused on JavaScript and Node.js International Conference on Technology
• China CSS Developer Conferencehttps://css.w3ctech.com/Conference on improving CSS development posture
• D2 front end Technology Forumhttp://d2forum.alibaba-inc.com/Alibaba held the forum to share the fun of technology and discuss the development of the industry

Icon

• Font Awesome：http://www.fontawesome.com.cn/The most popular icon set for website development
• FeatherSimple and beautiful open source icon
• IoniconsWell drawn open source icon
• Simple IconsSvg icon of common brands
• Material Design IconsLight and exquisite symbols and icons, including common operations and matters
• Tabler Icons681 customizable open source SVG icons

color

• Material Design ColorsMaterial design color
• Flat UI Colors 214 color matching, 280 colors
• Color HuntFree and open platform for sharing color matching, including thousands of artificially selected color matching, from which you can get inspiration for color matching
• Color SpaceColor scheme, CSS color gradient generation tool
• uiGradientsBeautiful color gradient
• Colors and FontsColor and font tools
• CoolorsColor scheme generation tool

Illustration

• UndrawBeautiful SVG illustrative album with continuous update
• manypixelsFree gallery
• IRA DesignThrough the deployment of gradient, with hand-painted components custom illustration
• Free Illustrations by Lukasz AdamFree SVG illustration
• BlobmakerOnline SVG shape generator
• Get WavesOn line SVG waveform generator

picture

• UnsplashPictures available for free
• PexelsBeautiful free pictures and videos
• BurstFree high resolution images for website and commercial use
• ISO RepublicFree high resolution pictures and videos with cc0 license
• PixabayAmazing Free (public domain) photo and video sites
• StockSnap.ioBeautiful free pictures, also use cc0 license
• PhotopeaOnline image editing tool, support a large number of advanced functions
• Online Image CompressorOnline image compression tool, can compress up to 20 images at a time
• Bulk Resize PhotosThe fastest online image zooming tool (image zooming and compression are done locally without uploading to the server)

other

• Unit test:https://github.com/goldbergyoni/javascript-testing-best-practices
• web.devEvaluate website performance (based on lighthouse)
• Shape DividerSvg tool for customizing various shapes of website partition
• GTmetrixWeb performance analysis tool
• Can I UseBrowser support of front end technology
• CarbonCode to picture tool
• WappalyzerDetect the technology stack used by a website

design tool

• Ink knife: prototype design tool. website:https://modao.cc/
• Blue lake: an online collaboration platform for product documents and design drawings. website:https://lanhuapp.com
• Pxcook (pixel Chef): an efficient and easy-to-use automatic annotation tool. Software download link:https://www.fancynode.com.cn/pxcook

Front end navigation website address:https://www.kwgg2020.com

My blog address:https://github.com/biaochenxu…

Recommended reading:

• Through 10 examples of small exercises, quick start, skilled vue3 core new features

Support