▍ CSS related
* 1
CSS Battle – Online CSS Battle
cssbattle.dev
Online CSS competition, a very interesting competitive game, a total of 12 levels, you need to use HTML and CSS to 100% restore the page it gives, and then as little code as possible, you can also check the global leaderboards, see the solution.
* 2
Learn CSS Layout – Learn CSS layout
learnlayout.com
Online CSS layout learning, it will step by step guide beginners to learn the basic knowledge of CSS, in practice to help beginners master CSS layout knowledge, improve the writing habits and correct methods of CSS beginners.
* 3
Flexbox Froggy – Learn the layout of Flex
flexboxfroggy.com
A guided learning Flex layout game, with Flex layout let frog jump lotus leaf even if complete, the game contains almost all the commonly used attributes, so it is very interesting to learn, image good memory, who if the Flex layout is not familiar, in this practice.
* 4
EnjoyCSS- Online CSS code visualization tool
enjoycss.com
The online version of CSS3 code generation tool, based on visual operation, can quickly adjust web page effects and graphic styles in a non-coding environment. It’s like using PHOTOSHOP or AI software locally.
Low 5
Css-tricks – CSS Tricks
css-tricks.com
The site is constantly updated with excellent tutorials and tips on CSS, with articles updated daily.
Low 6
Neumorphism- Implements new mimicry effects
neumorphism.io
Can easily achieve new mimicracy effect, not only can modify the color or fill in the color value, can also modify the size, radius, distance, intensity, blur effect and shape parameters, while providing CSS code can be directly Copy.
Low 7
UiGradients – Share gradients
uigradients.com
Provide gradient effect site, which is close to hundreds of gradient color schemes, according to their own style to choose collocation, can directly obtain the corresponding gradient color matching CSS code.
▍ JS related
Low 8
JavaScript Secret Garden
Bonsaiden. Making. IO/JavaScript -…
An updated JavaScript syntax document, mainly about how to avoid some common errors, and find hard to find bugs, more in-depth JavaScript language features.
* 9
JS tips-JS Tips
www.jstips.co
A Javascript tip every day.
Low 10
JSweekly – Technology Weekly
javascriptweekly.com
A technical weekly devoted to Javascript.
Low 11
Cdnjs-javascript library
cdnjs.com/libraries
CDNJS provides developers with the latest front-end Web development resources, free to use, unlimited use. You can reference these JS files directly on your own web pages. Enter the CDNJS website, search for the resource you want, find it and click on the [Copy Script Tag] at the back of the project, then paste it and use it. At present, CDNJS ranks the second in Web front-end CDN services (the first is Google), with excellent performance.
Low 12
Beautiful Open – A collection of Open source JS libraries
beautifulopen.com
A collection of open source projects of outstanding design, from CMS content management systems to common Javascript libraries, suitable for users of web development.
Low 13
JavaScript Fun – Collection of code libraries
www.javascript.fun
A collection of the most popular JavaScript code libraries at the moment, showing a popular ranking, developers can easily find the latest code plug-ins, tools and blogs they want.
Community and blogging
Low 14
Stack Overflow – Programmer q&A
stackoverflow.com
One of the world’s most popular technology q&A sites, a bug-solving community, is called “The 100,000 Whys of Programming.”
Low 15
Nuggets – High quality technology community
juejin.cn
The Gold Digger Tech Community is a high-quality technology sharing community where tech geeks and geeks work together to edit and select high-quality technical articles, including Android, iOS, front-end and back-end resources.
Low 16
Codrops – Web design and development blog
tympanus.net
Publish technical articles and web tutorials, provide experience, less step pit, rich resources are very rich, a lot of excellent technology are from here.
▍ online IDE
Low 17
CodePen
codepen.io
A website front-end design and development platform, a tool for website front-end code, there are various effects of the case effects (show skills), you can develop your own front-end design on the basis of their demo.
“18
CodeSandBox
codesandbox.io
As its name suggests, CodeSandBox provides a “sandbox” for online development environments. Mainstream frameworks like React, Vue, Angular, etc., can be compiled and previewed in real time, which is very convenient.
Low 19
JS Bin
jsbin.com
Another lightweight online editor site, the interface is clean, temporary want to debug simple HTML or JS code can consider here to try.
▍ resource class
Low 20
ICONSVG – Online custom design SVG icon material
iconsvg.xyz
SVG is an online custom design SVG icon material website, help front-end designers to find the desired icon material, these icon materials are commonly used ICONS, you can click on the official provided material for secondary design, at the same time you can export the designed icon.
When the 21st
OpenMoji – Free emoji library
www.openmoji.org
Provides source code emoji library, can be downloaded for free use.
Low 22
Share Icon – Free vector footage gallery
www.shareicon.net
Provide more than 250 thousand ICON vector image material site, 120 kinds of classification, all materials provide PNG, SVG format, material has a variety of sizes including 512512, 256256, 128128, 6464, 3232, 1616 and so on, very suitable for front-end designers to collect spare.
Low 23
Tableconvert – Online table editor
tableconvert.com
A powerful online table editor, support Excel, Markdown, JSON, CSV, HTML format conversion between. When you need to transform a table without distorting it, try this tool.
Low 24
Feathericons – A collection of minimalist ICONS
feathericons.com
A simple and beautiful collection of free open source ICON ICONS, mainly designed for use in the application system, media control, location, weather, arrow, logo, etc., can be used in mobile application development, ICON format in SVG.
Low 25
HTML5 + CSS 3 free template
html5up.net/
Provides a wide range of HTML5 templates that users can share and modify themselves.
Summary of this article:
- CSS battle : cssbattle.dev
- Learn CSS layout：learnlayout.com
- Flexbox Froggy：flexboxfroggy.com
- EnjoyCSS：enjoycss.com
- CSS – Tricks: css-tricks.com
- Neumorphism: Neumorphism. IO
- uiGradients：uigradients.com
- JavaScript: bonsaiden. Making. IO/JavaScript -…
- JS Tips: www.jstips.co
- JSweekly：javascriptweekly.com
- CDNJS：cdnjs.com/libraries
- Beautiful Open ：beautifulopen.com
- JavaScript Fun: www.javascript.fun
- Stack Overflow：stackoverflow.com
- The Denver nuggets: juejin. Cn
- Codrops：tympanus.net
- CodePen: CodePen. IO
- CodeSandBox: CodeSandBox. IO
- JS: Bin:jsbin.com
- ICONSVG: ICONSVG. Xyz
- OpenMoji：www.openmoji.org
- The Share Icon: www.shareicon.net
- Tableconvert: tableconvert.com
- Feathericons：feathericons.com
- HTML5UP ：html5up.net/