前端面试题：

web前端工程师（高级）

Web前端软件工程师

高级web前端开发工程师（vue）

css相关

  • scss在线转css https://www.sassmeister.com/

  • CSS3 UI 库 http://css3lib.alloyteam.com/#progress_bar/demo2

  • 一份非常完整的网页CSS速查表 http://lesliefranke.com/files/reference/csscheatsheet.html

  • 一份清单，按字母表顺序列出了每个CSS属性 http://www.blooberry.com/indexdot/css/propindex/all.htm

  • HTML5 元素标签含义大全(元素周期表)—HTML5星空 http://www.html5star.com/manual/html5label-meaning/

  • 很方便地查找一个CSS属性，并且可以迅速地浏览可能的value值 https://cssvalues.com/

  • CSS参考手册 http://css.doyoe.com/

  • 最新最全的CSS3参考手册 https://www.html.cn/book/css/

  • css3按钮动画 http://fian.my.id/Waves/#examples

  • css按钮生成器 https://www.bestcssbuttongenerator.com/#/37

  • CSS3样式生成器-Css3演示 https://www.html.cn/tool/css3Preview/

  • svg背景生成 https://www.svgbackgrounds.com/#rose-petals

  • 多张图片生成雪碧图 https://www.toptal.com/developers/css/sprite-generator

  • Animate.css https://animate.style/

  • 按需定制 CSS 动画效果 https://animista.net/play/basic/scale-up

  • CSS 动画效果收集，点击某个效果即可复制相应的代码片段至剪贴板 https://emilkowalski.github.io/css-effects-snippets/

  • 汇集了实现各种加载效果的 CSS 代码片段 https://tobiasahlin.com/spinkit/

  • SVG滤镜 https://yoksel.github.io/svg-filters/#/docs

  • KakaCss - 快速生成Css样式 https://renzhezhilu.gitee.io/kakacss/

  • iDea CSS-常见效果 https://yangzw.vip/idea-css/

  • 贝萨尔曲线 https://cubic-bezier.com/#.17,.67,.83,.67

  • Bulma-css简洁的样式库 https://bulma.io/documentation/elements/button/

小程序相关

  • 小程序-Color Ui注重视觉组件库 https://www.color-ui.com/

正则工具

  • Regulex练习网站 https://jex.im/regulex/

  • 正则表达式在线测试 https://regex101.com/

  • 正则大全 https://any86.github.io/any-rule/

nginx

  • Nginx配置在线生成 https://www.digitalocean.com/community/tools/nginx#?

bootstrap

  • Bootstrap 4 速度表 + Class 列表 https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/

  • bootstrap手册 https://www.jqhtml.com/bootstraps-syntaxhigh/index.html

加载

  • 各种各样的loading效果 https://loading.io/

PS设计相关

  • 【抠图】在线抠图软件 https://www.gaoding.com/koutu

  • 【在线PS】PS软件网页版，ps在线图片处理工具photopea-稿定设计PS https://ps.gaoding.com/#/

  • 设计导航 http://hao.shejidaren.com/

  • 【在线PS软件】在线PS图片（照片）处理工具_在线制作编辑图片ps精简版 https://www.uupoop.com/

  • 消除图片中的背景 –抠图 https://www.remove.bg/zh

流程图

  • draw.io工具 https://app.diagrams.net/

Git

  • gitignore.io - 生成项目忽略的文件 https://www.toptal.com/developers/gitignore

cdn相关

  • 国内cdn库查询网址 https://cdn.baomitu.com/

富文本

  • simditor 便捷的所见即所得编辑器 https://simditor.tower.im/

  • draftjs 一个用于构建文本编辑器的React框架 https://draftjs.org/

  • mavonEditor mavonEditor-基于Vue的markdown编辑器，支持多种个性化功能 https://github.com/hinesboy/mavonEditor

  • tiptap Vue.js的无渲染富文本编辑器 https://tiptap.dev/

  • vue-quill-editor @quilljs的编辑器组件@vuejs https://github.com/surmon-china/vue-quill-editor

  • editor.js 具有干净JSON输出的块样式编辑器 https://github.com/codex-team/editor.js

其他

  • 选俩色彩就行，其他的网站会自动给出最佳配色 https://www.materialpalette.com/teal/cyan

  • 分析网站使用的技术 https://www.wappalyzer.com/

  • Emoji 表情包 https://emoji.muan.co/

  • WebP - 图片格式的发展趋势 - 又拍云 https://www.upyun.com/webp

  • 在线工具  https://tool.lu/

图标

  • 网站开发最流行的图标集 https://fontawesome.com/

  • 简洁美观的开源图标 https://feathericons.com/

  • 精心绘制的开源图标 https://ionicons.com/

  • 常见品牌的 SVG 图标 https://simpleicons.org/

  • 681 枚可定制的开源 SVG 图标 https://tablericons.com/

插画

  • 持续更新的精美的 SVG 插画集 https://undraw.co/illustrations

  • 免费插画集 https://www.manypixels.co/gallery/

  • 通过调配渐变色、搭配手绘组件定制插画 https://iradesign.io/gallery/illustrations

  • 在线 SVG 波形生成器 https://getwaves.io/

  • 在线 SVG 形状生成器 https://www.blobmaker.app/

色彩

  • Material Design 色彩 https://www.materialui.co/colors

  • 14 组配色、280 种颜色 https://flatuicolors.com/

  • 分享色彩搭配的自由开放平台，包括成千上万人工选取的配色，可以从中获取配色的灵感 https://colorhunt.co/

  • 配色方案、CSS 颜色渐变生成工具 https://mycolor.space/

  • 美观的颜色渐变 https://uigradients.com/#Dusk

  • web 安全色 https://www.bootcss.com/p/websafecolors/

  • 李紫 - 中国色 - 中国传统颜色 http://zhongguose.com/#lizi

  • 色輪、調色盤產生器 | Adobe Color https://color.adobe.com/zh/create/color-wheel

  • uiGradients - Beautiful colored gradients https://uigradients.com/#WeddingDayBlues

  • palettable 利用数百万设计师的知识生成漂亮的调色板 https://www.palettable.io/C7CEB8

  • colorsupplyyy 设计师和插画家的选色器 https://colorsupplyyy.com/app

  • webgradients 是180个线性渐变的免费集合，您可以将其用作网站任何部分的内容背景。轻松复制CSS3跨浏览器代码 https://webgradients.com/

  • 配色表 网页设计常用色彩搭配表 http://tool.c7sky.com/webcolor/

图片

  • 可供免费使用的图片 https://unsplash.com/

  • 精美的免费图片和视频 https://www.pexels.com/zh-cn/

  • 免费高分辨率图片，可用于网站和商业用途 https://burst.shopify.com/

  • 使用 CC0 许可的免费高分辨率图片和视频 https://isorepublic.com/

  • 在线图片压缩工具，一次可以压缩多达 20 张图片 https://imagecompressor.com/

  • 最快的在线图片缩放工具（图片缩放和压缩在本地完成，无需上传到服务器） https://bulkresizephotos.com/en

  • 花瓣网_陪你做生活的设计师（创意灵感天堂，搜索、发现设计灵感、设计素材） https://huaban.com/

表单校验器

  • Learn | JSON Schema http://json-schema.org/learn/

  • ajv - npm-执行json-schema规则 https://www.npmjs.com/package/ajv

  • JSON Schema Validator-在线校验 https://www.jsonschemavalidator.net/

可视化编辑

  • imgcook/imove: Move your mouse, generate code from flow chart https://github.com/imgcook/imove

代理工具

  • ngrok - secure introspectable tunnels to localhost https://ngrok.com/

  • Chrome 插件下载-无需翻墙 https://chrome-extension-downloader.com/

压缩图片

  • 在线图片压缩 - docsmall 在线图片压缩工具,在线图片压缩软件 https://docsmall.com/image-compress

  • TinyPNG – Compress PNG images while preserving transparency https://tinypng.com/