开发与工具

在线调试、代码演示

JSBin, CodePen

• JS Bin
• CodePen
• dabblet.com 即写即得可视化html+css+js在线编辑器。。
• Tryit Editor v3.6

代码学习网站

• W3docs online HTML Editor
• 菜鸟教程在线编辑器

Stylus

• Stylus
• Try Stylus! 开始学习Stylus
• stylus入门使用方法
• stylus中文版参考文档之综述 张鑫旭
• stylus入门使用方法
• Stylus - 富于表现力、动态的、健壮的 CSS
• stylus中文版参考文档之综述 · 张鑫旭

Emmet

• emmet cheat sheet 语法速查表

vue.js

• Vue.js——60分钟快速入门 - 钟于 - 博客园
• vue js 十一天教程 入门加实战 day 1 04 为什么要学习前端的流行框架

JavaScript 插件、组件、控件

swiper.js 轮播图插件

https://swiperjs.com/demos

可触摸、焦点图、轮播图、幻灯片、移动端弹出菜单、微展示易企秀H5、内容TAB、滑动导航

未整理

网站开发

• w3schools.com
• WebPlatform.org
• MDN
• HTML5 Rocks
• CSS-Tricks

前端根据

• 在线生成雪碧图 css sprite

前端组件js、jq库下载站

• CSS Script Best Free JavaScript & CSS/CSS3 Libraries For Modern Web Design
• jqueryscript

HTML

• allowfullscreen - an HTML attribute for the iframe tag 视频播放插件在iframe中无法全屏

PHP

旧文章收藏

• PHP初学者：构建您的第一个简单的CMS | CSS-技巧
• ThinkPHP5快速入门
• APMServ5.2.6升级php到5.4版本 | JohnZJH
• php 7 安装指南 （windows 篇）

ThinkPHP

• 安装ThinkPHP · ThinkPHP5.0完全开发手册 · 看云

cordova

• Apache Cordova

• Apache Cordova API Documentation

• cordova入门教程（一） - 简书

• 创建一个Cordova项目 - Apache Cordova 教程 - 极客学院Wiki

• 插件搜索 - Apache Cordova

• Cordova之如何用命令行创建一个项目（完整示例） - lion1ou - 博客园

• (12)使用Cordova命令行界面(CLI) - AL的学习笔记 - SegmentFault

• App开发如何扩展和使用本地插件（Cordova plugin），基于完全开源免费的框架为例 - 开源中国社区

• ionic state reset failed with 404 · Issue #948 · ionic-team/ionic-cli

• 创建一个Cordova项目 - Apache Cordova 教程 - 极客学院Wiki

未分类

• SourceForge 开源软件平台
• LeanCloud - 为开发加速
• styleguide 谷歌出品代码编写规范

交流社区

• SegmentFault
• W3Cfuns 前端网

博客

• 程序师 - 程序员、编程语言、软件开发、编程技术
• WEB骇客 - HTML5, CSS3, WEB前端开发技术
• 裁纸刀下 - 小李刀刀的前端开发博客 | Laravel | PHP | JavaScript
• 99css
• WonderCSS | 关注网站前端设计，提倡优雅简洁的用户体验
• 进步博客 | 关注信息无障碍！
• CSS森林(CSS Forest)

网站

• Bootstrap中文网

• Web Designer Wall - Design Trends and Tutorials

• Maxim-Ui

前端教程

• HTML、CSS书写规范·AlloyTeam
• CSS编码规范·FEX team
• 沪江HTML与CSS编码规范
• 前端开发者指南（2017）
• Front-end Developer Handbook中文版PDF
• Front-end Developer Handbook 2017

语言

CSS

• ul ol li的序号编号样式 - 爱博子 - 博客园
• 为HTML5 Placeholder占位文字添加CSS样式

学习网站

手册文章

• W3school.com.cn
• W3Cschool.cn
• 菜鸟教程 RUNOOB.COM

视频

• 前端开发·慕课网

经验分享、交流

• 前端乱炖

语言、引擎

Jade

• Jade中文文档
• Jade- Template Engine

前端开源代码

视频

• jPlayer

前端框架

• Bootstrap（twitter，知名度最高、应用面最广，但是个人觉得太庞大了）
• Bootstrap Themes
• Tailwind CSS（把常用的样式属性规范成，通过组合构建各种风格的页面及元素）
• YDUI Touch（比较完善的移动端前端解决方案，组件齐全，风格贴合微信）
• LuLu UI（基于jQuery,针对PC网站，兼容ie7\ie8的前端UI框架）

后台框架控制面板前端 CSS 框架

• Bootstrap Dashboard Theme 80+
• post: 27 Best Free Bootstrap Admin Templates 2021

未试用

• Ant Design（蚂蚁金服出品，基于React-未试用）
• Framework
• WeUI / WeUI Github
• jQuery WeUI（未试用）
• amazeUI（未试用）
  • Fullscreen 全屏切换
• JEUI（未试用）
• ZUI（未试用）
• MZUI（未试用）
• MDUI
• 拼图Pintuer-跨屏响应式布局前端开发CSS框架

js框架

• MT（MT是手机腾讯网前端团队开发维护的一个专注于移动端的、带有增量更新特色的js模块管理框架）

其他略显陈旧

• alloyui

CSS

• loaders.css

• CSS: Elastic Videos 视频自适应宽高

• Mobile-Friendly Responsive Menus 响应式导航菜单

• Typo.css - 中文网页重设与排版

• CSS参考手册v3.3.0_web前端开发参考手册系列 / css-handbook Github

• CSS参考手册

javascript JS

• JavaScript禅

javascript教程

• JavaScript 教程 - SegmentFault 思否
• 程序员实验室 » JavaScript入门教程

插件

• mBox - 弹层组件（未试用）

• jeBox - 弹层组件（未试用）

• jeDate - 日期控件（未试用）

• jQuery Date Range Picker

• Smooth Scroll behavior polyfill 纯js页面平滑滚动插件 回到顶部

• Hide-Address-Bar 在手机上隐藏地址工具栏

• Waves 点击特效（圆放大） / Waves demo

• Marka Beautiful transformable icons built for the web.

• FitVids.js 让视频响应屏幕尺寸变化 / FitVids.js Github

• PhotoSwipe

js 教程

• jquery 互转 javascript
• JavaScript–返回顶部方法:锚链接、行内式js写法、外链式、内嵌式

旧文章收藏### 旧文章收藏

jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content. 过长文字或链接 省略号处理

• jQuery.validVal - A highly customizable and feat ure rich jQuery form validator that embraces the power of HTML5 表单验证
• 熙熙-如何对待JavaScript-（绝好的一套针对初学者的JavaScript教程）推荐-教程下载-PDF-CHM-电子书-经-熙熙-筛选整理 - 桂林熙熙 - 博客园

语言、引擎

JS 引擎

• Template7

JS评论

• Valine
• Disqus
• 来必力
• Gitment：使用 GitHub Issues 搭建评论系统

JS 编辑器

• UEditor
• KindEditor
• Simditor 一个简单便捷的可视化编辑器 / Simditor github

模板

TemplateMonster
331 Free Bootstrap Templates & Website Themes

less

• less / LESS 一种动态样式语言 bootcss
• Less中文文档

基本操作

全局安装
npm install less -g
编译.less为.css
lessc stylesheet.less stylesheet.css
编译.less为.css并压缩
lessc -x stylesheet.less stylesheet.css

浏览器使用方法

页面添加LESS脚本，让浏览器支持LESS:
<script src="less.js"></script>

页面之间引用Less
<link href="styles.less" rel="stylesheet/less" type="text/css"/>

• 用 LESS 寫 CSS ( 入門、Import、變數 )
• 使用LESS color函数创建配色方案 带图片演示
• UI /主题框架和组件

CSS？

• cssreference.io / 一个免费的视觉引导CSS
• css-protips

css 生成

• CSS三角形產生器
• css3 渐变制作 Ultimate CSS Gradient Generator - ColorZilla.com
• CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator
• 缓动函数速查表 js css 动画过渡
• CSS3 Please! The Cross-Browser CSS3 Rule Generator
• Sprite Cow - Generate CSS for sprite sheets 背景图精灵 合成背景图

未整理收藏

• css不规则图形实现原理及代码_CSS教程_CSS_网页制作_脚本之家

• CSS实现三角形或者不规则的方法 - DivCSS教程 - CSS3-HTML5之家 中文CSS3,HTML5教程网站

开发环境

• xmapp 支持win、os x

软件打包、构建

• Electron 使用 JS、HTML 和CSS构建跨平台的桌面应用程序。
• nw.js 使用HTML和JavaScript来制作桌面应用。

编码环境

Sublime Text

Sublime Text help

notepad++

• Zen Coding 让 Notepad++ 代码书写健步如飞 - 任平生
• Notepad++ 五大实用技巧 - 开源软件 - ITeye资讯
• Notepad++使用教程
• [Notepad++中支持Markdown] (https://xuhehuan.com/2237.html)

notepad++插件

• Compare 文件对比
• Light Explorer 左边栏浏览资源管理器，查看电脑文件
• Convert ASCII与十六进制编码相互转换。
• XBracket Lite 括号自动补全插件
• Eemet

自定义语言 代码高亮

• markdown-plus-plus Markdwon自定义语言高亮

Dreamweaver

• Dreamweaver CC2018 64位
• Dreamweaver CC2018 32位

Atom

• Atom Atom win64 下载地址 Atom packages Atom themes

Visual Studio Code

• Visual Studio Code

协助软件

markdown编辑器

• Haroopad Haroopad win64 下载地址
• typora typora win64 下载地址
• MarkdownPadMarkdownPad win 下载地址

Markdown 在线编辑器

• Markdown Tables generator - TablesGenerator.com
• Convert Markdown to HTML
• Word 转 Markdown
• Markmap Markdown 转 思维导图 支持导出 SVG
• Convert HTML to Markdown 支持表格

表格工具

• TableConvert 在线将表格转换为CSV、JSON、XML、YAML、Markdown、HTML、Excel等文件