一、前端代码一些要注意的问题：
- 不要轻易改动全站级CSS和通用CSS库，改动后，要经过全面测试
- 避免使用filter
- 避免在CSS中使用expression
- 避免过小的背景图片平铺
- 尽量不要在CSS中使用!important
- 绝对不要在CSS中使用"*"选择符
- 层级(z-index)必须清晰明确，页面弹窗、气泡为最高级(最高级为999)，不同弹窗气泡之间可在三位数之间调整，普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比
- 背景图片在情况允许，尽可能使用sprite技术，减小http请求，考虑到多人协作开发，sprite按照模块、业务、页面来划分
- 页面内部尽量避免使用style属性，CSS放在head标签中，由link标签引入，使页面的结构与表现分离
- 尽量减少使用float、position等影响性能的属性，这样可以避免新手在布局时出现的混乱
- 尽量少使用<br />来断行
- 不要连续出现多个 (空格)，也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent、maring/padding等方法来实现
- 排版如果遇到需要首行缩进的处理，可以使用text-indent:2em;
- 图片如果需要加载就在页面上用img标签写出，并指明宽高，重要的图片必须加上alt属性，给重要的元素和截断的元素上加上title
- 如果有跳转的地方，统一使用a标签，<a href="#"></a>，需要跳转到新页面，则还需要加上targent="_blank"属性，如果点击的是空链接(#)，则会自动将当前页面重置到首端，可以使用"javascript:void()"来替代原来的"#"
- 分清楚什么情况下jpg/gif/png图片
二、前端自学网站，提升前端技能的26个网站，人手必备：
- CSS battle【在线比拼 CSS】 : https://cssbattle.dev
- Learn CSS layout【学习 CSS 布局】：http://learnlayout.com
- Flexbox Froggy【学习 Flex 布局的小游戏】：http://flexboxfroggy.com
- EnjoyCSS【在线CSS代码可视化工具】：https://enjoycss.com
- CSS-Tricks 【CSS 技巧】：https://css-tricks.com
- Neumorphism【实现新拟态效果】：https://neumorphism.io
- uiGradients【分享渐变色】：https://uigradients.com
- JavaScript【一个一直更新的JavaScript 的语法文档，主要会写如何去避免一些常见的错误】：https://bonsaiden.github.io/JavaScript-Garden/zh/
- JS Tips【JS 技巧】：https://www.jstips.co
- JSweekly【技术周刊 】：https://javascriptweekly.com
- CDNJS【JavaScript 资料库】：https://cdnjs.com/libraries
- Beautiful Open 【开源 JS 库集合】：https://beautifulopen.com
- JavaScript Fun【代码库集合】：https://www.javascript.fun
- Stack Overflow【编程人员问答网】：https://stackoverflow.com
- 掘金【高质量技术社区】：https://juejin.im
- Codrops【网页设计开发博客】：https://tympanus.net
- CodePen【一个网站前端设计开发平台，针对网站前端代码的一个工具，上面有各种效果的案例特效（炫技），可以在他们的 demo 基础上开发自己的前端设计。】：
https://codepen.io - CodeSandBox【提供一个在线开发环境的“沙盒”，主流的框架如 React、Vue、Angular 等，都可即开即用、实时编译预览，非常方便。】：
https://codesandbox.io - JS Bin【轻量级在线编辑器网站】：https://jsbin.com
- ICONSVG【在线自定义设计SVG图标素材】：https://iconsvg.xyz
- OpenMoji【免费表情符号库】：https://www.openmoji.org
- Share Icon 【免费矢量素材图库】：https://www.shareicon.net
- tableconvert 【在线表格编辑器】：https://tableconvert.com
- Feathericons【极简 ICON 图标集】：https://feathericons.com
- HTML5UP 【提供大量的HTML5模版】：https://html5up.net/
- 趣IT【一个会更新面试题和练习题的宝藏王】https://www.funit.cn/
三、前端学习路线图概览：黑马程序员web前端视频教程从入门到精通Web前端视频教程完整版_Web前端视频教程从入门到精通_黑马程序员
HTML+CSS-->移动web->JavaScript基础-->Web APIs->数据交互&异步编程-->Node.js-->Vue2+Vue3-->React核心技术-->微信小程序
新手不要光看，学完基础就可以写静态页面，学完特性就可以独立搞一个商城首页。可以独立完成之后再去学习JavaScript。
JavaScript个非常重要
- JavaScript本身属于抽象的，尤其是闭包、内置对象、DOM这里都有难度；
- 而且要学习的内容非常多，比如函数库，对象库也是很多很多；
- 不仅涉及面向过程的编程思想，还有面向对象的编程思想；
- 好不容易都学习完了之后会有一种脱离实际应用的感觉，这些都算是javascript的难点。
一条清晰的学习路线了很重要，基础部分（定义变量、函数、数组、字符串、内置函数、内置对象）——>面向过程的编程思想（在这里可以试着用自定义按钮、自定义播放器练习）——>面向过程编程思想（封装一些我们自己想的对象，提供有意义的接口）
最后想说的最简单的方法就是找到官方帮助手册，所有的方法属性，都读。读到自己我安全理解了，这些文档可以帮我们夯实基础学习，起码有一个帮助，就是优化了我们不规范的代码。很多人上来就建议看文档学习，个人感觉没必要。学完基础知识之后，夯实基础看官方文档会让大家更受益。