1. CSS related
1. CSS Battle - online CSS competition
Address: CSSBattle
Compete CSS online, a very interesting competitive game, there are 12 levels in total, you need to use HTML and CSS to restore 100% of the page it gives, and then minimize the code, you can also check the global leaderboard to see the solution plan.
2. Learn CSS layout - Learn CSS layout
Address: Learn CSS Layout
Online CSS layout learning, it will guide beginners to learn CSS basics step by step, help beginners master CSS layout knowledge in practice, improve beginners' writing habits and correct methods of CSS
3. Flexbox Froggy - a small game to learn about Flex layout
地址：Flexbox Froggy - A game for learning CSS flexbox
A guided game for learning the flex layout. Use the flex layout to make the frog jump onto the lotus leaf. The game contains almost all commonly used attributes, so it is very interesting to learn, and the image is easy to remember. Anyone who is not familiar with the flex layout If you are familiar with it, practice more here.
4. EnjoyCSS-online CSS code visualization tool
地址：Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS
The online version of the CSS3 code generation tool, based on visual operations, can quickly adjust web page effects and graphic styles in a non-coding environment. It's like using PS or AI software locally.
5. CSS-Tricks - CSS tricks
Address: https://css-tricks.com
This website is constantly updated with some excellent tutorials and tips on CSS tips, and the articles are updated every day.
6. Neumorphism-realize the effect of new mimicry
Address: Neumorphism/Soft UI CSS shadow generator
You can easily realize the new mimetic effect. Not only can you modify the color or fill in the color value, but you can also modify parameters such as size, radius, distance, intensity, blur effect, and shape. At the same time, CSS code is provided for direct copying.
7. uiGradients - share gradient colors
地址：uiGradients - Beautiful colored gradients
There are nearly a hundred gradient color schemes in the site that provides gradient color effects. You can choose and match according to your own style, and you can directly get the CSS code corresponding to the gradient color scheme.
2. JavaScript related
8. JavaScript Secret Garden
Address: JavaScript Secret Garden
A JavaScript grammar document that is constantly updated, mainly about how to avoid some common mistakes, and find hard-to-find bugs, and go deeper into the language features of JavaScript.
9. JS Tips - JS Tips
Address: Js Tips - A JavaScript tip per day!
A little knowledge of Javascript every day.
10. JSweekly - Technology Weekly
地址：JavaScript Weekly: The JavaScript Email Newsletter
A weekly technical magazine dedicated to Javascript.
11. CDNJS - JavaScript library
地址：Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
CDNJS provides developers with the latest front-end web development resources, which are free to use and unlimited in use. You can directly reference these JS files on your own web pages. After entering the CDNJS website, search for the resource library you want, find it, click [Copy Script Tag] behind the project, and then paste it to use. Currently, CDNJS ranks second among the CDN services on the front end of the web (the first is Google), with excellent performance.
12. Beautiful Open - A Collection of Open Source JS Libraries
Address: Beautiful Open
Collect all kinds of open source projects with excellent designs, ranging from CMS content management systems to commonly used Javascript libraries, suitable for website development users.
13. JavaScript Fun - Collection of Code Libraries
Address: Front End | JavaScript Fun | Front End Workshop
A collection of the most popular JavaScript code libraries at the moment, showing the popularity ranking, developers can easily find the latest code plugins, tools and blogs they want.
3. Community and blog
14. Stack Overflow - Q&A Network for Programmers
Address: https://stackoverflow.com
One of the most popular technical question-and-answer websites in the global IT industry, a bug-solving community, is called "One Hundred Thousand Whys in the Programming World".
15. Nuggets - High-quality technical community
Address: Nuggets - more than code, no more nuggets
The Nuggets Technology Community is a high-quality technology sharing community. High-quality dry goods are edited and screened by technology experts and geeks. These technical articles include Android, iOS, front-end, and back-end resources.
16. Codrops - Web Design Development Blog
Address: https://tympanus.net
Publish technical articles and web tutorials, provide experience, avoid pitfalls, and have abundant resources. Many excellent technologies come from here.
4. Online IDE
17、CodePen
Address: https://codepen.io
A website front-end design and development platform, a tool for the front-end code of the website, with case effects (show-offs) of various effects on it, and you can develop your own front-end design on the basis of their demos.
18、CodeSandBox
地址：CodeSandbox: Online Code Editor and IDE for Rapid Web Development
As the name suggests, the CodeSandBox website provides an online development environment "sandbox". The mainstream frameworks such as React, Vue, Angular, etc. can be used out of the box and compiled and previewed in real time, which is very convenient.
19、JS Bin
Address: JS Bin - Collaborative JavaScript Debugging
Another lightweight online editor website with a simple and clean interface. If you want to debug simple HTML or JS code temporarily, you can consider giving it a try here.
5. Resources
20. ICONSVG - online custom design SVG icon material
地址：ICONSVG - Quick customizable SVG icons for your project
It is an online website that can customize the design of SVG icon materials. It helps front-end designers find the icon materials they want. These icon materials are commonly used icons. You can click on the official materials for secondary design. Icon export.
21. OpenMoji - Free Emoji Library
Address: https://www.openmoji.org
The source code of the emoji library is available for free download.
22. Share Icon - Free Vector Graphics
地址：Share Icon - more than 250.000 free icons
A site that provides more than 250,000 ICON vector image materials, more than 120 categories, all materials are provided in PNG and SVG formats, and the materials are available in various sizes, including 512*512, 256*256, 128*128, 64*64, 32*32, 16*16, etc., are very suitable for front-end designers to collect and reserve.
23. tableconvert - online table editor
地址：Table Convert Online - Make it easier to work with tables
A powerful online table editor that supports conversion between Excel, Markdown, JSON, CSV, HTML and other formats. When you need to convert a table without deforming it, try this tool.
24. Feathericons - minimalist ICON icon set
地址：Feather – Simply beautiful open source icons
A free and open source collection of simple and beautiful ICON icons, mainly designed for application systems, media control, location, weather, arrows, logos, etc., can be used in mobile application development, and the icon format is SVG.
25. HTML5 + CSS 3 free template
Address: https://html5up.net/
A large number of HTML5 templates are provided, and users can share and modify templates by themselves.
