The article I wrote yesterday was sent out early in the morning when I clicked on the preview and found the format was out of order. In a hurry to get to work, I deleted the article. The habit of Monday was broken and updated on Tuesday. Today is Tuesday. After a boring Monday, a new workday begins.
This article started out as: What are some front-end projects for beginners to get started on? But I find I can’t do it by myself, so I’m inviting some big friends to help. So this topic is not available for a week or two weeks, and it may be filled next week or the week after that. Welcome friends in the process of learning encountered a good exercise can be actively recommended.
Learning programming column serial training project, if interested can visit the first three:
Are there any Java projects suitable for beginners? – Learning programming – Zhihu Column
What are some Java Web projects for beginners? – Learning programming – Zhihu Column
What are some Python projects for beginners to learn? – Learning programming – Zhihu Column
This article recommends sharing five posts about the front-end resource summary, hoping to help you learn the front-end. In the meantime, take a look at the front-end skill tree:The front-end skills
First: front favorites, and their lot address: making – w3ctrain/w3ctrain. Making. IO: w3ctrian front-end favorites
Below is the table of contents, please visit their home page for more information:
The front-end tool
Automation: Gulp, Grunt, Baidu Fis, Ant, Yeoman, Codekit, Koala, Webpack
Precompiled: Slim, Haml, Coffeescript, Sass, BabelJs, Jade, Less, Stylus, Pleeease, PostCSS,
Find tools: CssTriggers, Screensiz. es, Friendship Index, javascripting, BuiltWith, TheToolbox, stylesheets
Version control: Github, GitCafe, GitLab, Bitbucket, Sourcetree, Cornerstone, Way of Version Control, ProGit, Liao Xuefeng’s Git tutorial, SVN tutorial
Editors: Sublime Text, Atom, HBuilder, WebStorm, MacDown, UltraEdit, ACE, Brackets, LightTable, Visual Studio Code
Online editing: Jsfiddle, Codepen, Jsbin, Runjs, Sassmeister
Debug/test: Firebug, YSlow, IEDeveloperToolbar, Fiddler, ChromeDevTools, JSLint, JSHint, CSSLint, HTML Validators, UnitJS, Jasmine, BrowserStack, Testem, Dalekjs, NightWatch, Hardy
Deployment process: YUI Compressor, UglifyJs, CleanCss, and JSDoc
Efficient tools: Dash, Wonder List, Omnigraffle
Other: CodeIf, H5Viewer, Anvil, CSSMixins, JSON Server, NGROk, Glyphter, CSSStats, Spritegen, Placehold. it, MWeb, BrowserSync. IO, kjson.com, strut. IO, Reveal. Js, Iconverticons.com , Wismap, LongShadows, Cubic – Bezier, Browserhacks, Tool.oschina.net, Pagespeed, IComon. IO, Circulus, Mock.js
Blog/community/information
Domestic comprehensive: W3ctech, W3CPlus, W3CFuns, Front-end Chaos, Front-end Observation, SegmentFault, HTML5Tricks, Tencent ISUX, Baidu EFE, Qiwu, Taobao UED, Front-end, div. IO, MOOCnet, Codecademy, Geek Tags, InfoQ China , WEB front-end development, front-end development blog, Iqiwu – H5. Vc, Look cloud, Hui Zhi net, Bole Online
Foreign comprehensive: Tutsplus, CSSAnimation, TeamTreehouse, SmashingMagazine, CodyHouse, Echojs, Codeschool, CodeWars, Html5Rocks, SpeakerDeck, Alistap Art, Lynda, DigitalTutors, Ponyfoo.com, Tutorialzine
Front-end information: CSS-Tricks, WebDesignerNews, FrontEndFont, Sidebar. IO, DesignerNews
Q&a community: StackOverflow, Quora, Zhihu
Fresh of the Day: Rare earth nuggets, Developer Headlines, Geek Headlines, development Headlines
Front-end bull: Hugo Giraudel, Philip Walton, David Walsh, Sara Soueidan, Paul Irish, Yu Bo, Liao Xuefeng, Ruan Yifeng, Gou Sanfangsi, Zhang Xinxu, Yu Guo, Sofish, Tangbing, Evan You, Darren Nie, James Seto, CSS Magic
All kinds of plug-in
Slip/parallax: FullPage, swiper, Slick, Sliderjs, Hammer.js, UnSlider, Superscrollorama, ScrollMagic, WOW, Skrollr, stellar. Js, multiscroll.js, ISC Roll, Dragula, waypoints
Animation/Effects: Popmotion, Velocity, greensock-js, Snapsvg, sketch.js, impress, blast.js, sticky, colorify.js, nProgress, Mojs, skrollr, typed Feckt. CSS, Hover. CSS, Animatable, Animate. CSS, CSS3 Animation Cheat Sheet, pagePiling. Js, Headroom.js, hint. CSS, SpinKit, CircularProgressButton, CSS-loaders, pace, two-.js, Sequence, ElasticProgress , CSSgram
Compatible with: Modernizr, Bowser, retinajs, picturefill, normalize.css, Respond, html5shiv, box-sizing-polyfill, elementQuery, CSS-element-Queri es
Chrome: Clear-cache, EditThisCookie, Full Page Screen Capture, HTML5 Outliner, JSONView, Postman, User-Agent Switcher for Chrome, Window Resizer, automatic page refresh, Chrome Sniffer Plus
Template tools: Handlebars, Mustache, artTemplate, Nunjucks, Transparency, doT
Other: Validation, moment, primer, please. js, qrcode, dynamics. Js, SmartCrop. Js, Lazyload, Imagesloaded, Shuffle, Fastclick, jQuery Form Plugin, jquery-file-upload, Sweetalert, toolbar, Tooltipster, video.js, font-awesome, Minigrid, bricks.js
Mainstream framework
Synthesis: React, Bootstrap, Foundation, SemanticUI, Purecss, UIKit, girl UI, Alice, Materialize, Material-Design-Lite, Html5Boilerplate, Material Design, Lightning Design System, Vux
MVVM: AngularJS, Vue. Js, Backbone, Avalon, Knockout
Modularization: require.js, sea.js
JavaScript: JQuery, Zepto, PrototypeJS, EmberJS, MooTools, Dojo, Meteor, Domcom
Hybrid: React-Native, Nativescript, Phonegap, Ionic, Crosswalk, Meteor, Electron
Games: Construct 2, ImpactJS, CreateJS, three. js, PlayCanvas, Pixi, Hilo
Manuals/books
Books: Advanced JavaScript Programming (3rd edition), One-page Web Applications :JavaScript from the Front end to the Back End, The Essence of the JavaScript Language, the Art of JavaScript DOM Programming (2nd edition), “Writing Maintainable JavaScript”, “Self-Training for Web Full-Stack Engineers”, “Simple To Understand Node.js”, “Responsive Web Design”, “Mastering CSS”, “High-performance JavaScript”, “Yout-Dont-Know-JS”
Quick start: Learn CSS layout, Learn to Code HTML & CSS, Learn to Code AdvancedHTML & CSS, front-end skill tree
Selected articles: How to keep up with the latest frontier of front-end development, mobile H5 front-end performance optimization guide, those unforgettable H5 pages, play HTML5 mobile pages, MobileWeb adaptation summary, deal with these difficult problems, say yes to CSS3 animation
Manuals/Specifications: Front-end developer manual, front-end development notebook, Material Design Chinese version, CSS specification, JavaScript Style Guide, Sass specification, Ecmascript3/5, ECMAScript6, W3C, CommonJS Modules
Learn flexbox properties and use Velocity.js to improve the user experience
Design/Interaction
Source of inspiration: Dribbble, SiteInspire, Httpster, Designer, PhotoshopLady, Cool, UI China, UIParade, 365pSD, Behance, Naldz Graphics, Mobile-Patterns, Wa. Design, Pinterest, Petals, Sugar, Mee, Visual China
Study design: TutsplusDesign, Typography, PSDFAN, Envato, abduzeedo, Interactive Guide to Blog Typography, 24Ways
Interactive experience: Navnav, Codyhouse, Tencent ISUX, Taobao UED, Alibaba Chinese station, Alibaba International station, Ali Mom UED, Baidu Mobile User Experience Department, Baidu Search user experience Center, Tencent TGideas, Tencent MXD, Tencent UED, Tencent CDC, Sina UDC, Xunlei CUED, UXBO Oth, tympanus
Color matching tool:Adobe color, FLATUI, Thedayscolor, colrd, Nipponcolors, NolourloversChinese traditional colorsJapanese traditional colors, Fashiontrendsetter
Github-hawx1993 / Github-fe-Project: A collection about github front-end project
A small section of catalogue
Integration/resources
Frontend -dev-bookmarks is a huge list of front-end development resources. star:15000
Front-end-collect shares excellent websites, blogs, and active developers related to front-end development that they have been paying attention to for a long time. star:860
The most comprehensive front-end development of Interview questions and answers in history
F2e-hub contains Animation, UI, Dialog, Carousels, color, Image, Workflow, etc. star:100
Awesome-javascript A series of great javascript libraries, resources, and resources. star:3100
FKS front-end skills summary, including front-end knowledge architecture, back-end knowledge, Linux, book recommendations, etc. star:4000
Node123 Node. js Chinese document navigation. star:1200
Mobile-web-favorites Mobile Web development favorites. star:200
Gulp -book Describes how to start gulp
Front-end-tutorial – the most comprehensive resource tutorial – all the knowledge system involved in the Front-end. (Update 12.25)
Canvas/Data visualization
Echarts is based on Canvas, a pure Javascript chart library that provides intuitive, vivid, interactive and customizable data visualization charts. star:6900
Chart.js is a simple HTML5 Chart that uses tags. star:14600
Sketch. Js cross-platform JavaScript creative coding framework, only 2KB after gzip compression. star:1500
D3 a js data visualization framework based on data manipulation documents, one of the most popular visualization libraries. star:38000
Zrender is a lightweight Canvas library, MVC wrapped, data-driven, providing dom-like event model to make a big difference to Canvas drawing! star:850
C3 A reusable JavaScript charting library based on D3.js. Almost zero learning curve. Star :4.5K (update 6.28)
img2cssConvert images to pure CSS code. (Update 11.3)
Github – JacksonTian/ FKS Front-end skills Frontend Knowledge Structure (Github address), known as the most complete resource tutorial – all the Knowledge system involved in the front-end.
Some of the directories (all of them are linked to the home page here), visit the specific url and Github for more information
1. General categories
2. Category entry
3. Tool classes
4. Comprehensive effect search platform
5 · team Blog | weekly classes
6. Development Center
July Nodejs
8. Comprehensive API
September Ecmascript
10 · Js template
11, HTML 5 (HTML)
12 · CSS 3 (CSS)
13 · Angularjs
14, the React
15 DE vue
16. Mobile API
17 · jQuery
18, D3
19, Requriejs
20 Seajs,
21, Less and sass
22, Markdown
23. Compatibility
24. UI related
25. Other apis
26. Chart class
27, regular
28. Front-end specifications
29, PHP
30. Open source projects of major companies
31, the commonly used
32 algorithm,
33. Mobile terminal
34, JSON
35. Focus diagram
36. Ext, EasyUI, J-UI and other UI schemes
37. Page social sharing function
38. Rich text editor
39. Front End Overview
40, Gulp
41, Grunt
42, Fis
43 · PC chart wheel
44. Mobile terminal drawing wheel
45. File upload
46. Simulate SELECT
47. Color plug-in
48. Linkage of cities
49. Clipboard
50. Simple and complex transformation
51. Table Grid
52 · Online presentation
53. General optimization
54. Optimization tools
55. Online tools
56. Front-end architecture
57. Recommended works
58. Resume Template
59. Interview questions
60 · iconfont
61 · Fiddler
62 · Chrome
63 · Firebug
64 · Mobile, wechat debugging
65 · the iOS Simulator
66 · Image
67 · Browser synchronization
68. Make online PPT
69 · Front navigation website
70. Common CDN
71 · Git
72 · Calendar of various dates
73 · the Date library
74 · other
75. Effects
76. Pop-up layer
77 · Excellent JavaScript projects
4: Github Resource Collection in which the author does not find Github addresses, starmode projects in Github that are accessed directly at the site.
Partial contents:
Github Resource Collection — HTML/CSS Github resource Collection — Shim/Polyfill Github resource Collection — Mobile Github Resource Collection — Test framework and assertion library Github resource collection — Node.js Github resource collection — template engine Github resource collection — Data visualization Github resource collection — React and related library Github resource collection Github Resource Collection — Other excellent JS frameworks Github Resource Collection — Functional programming related…………..
