‘壹’ 前端开发，有哪些好看的书籍
《CSS网站布局实录》
《CSS权威指南》
《HTML5与CSS3权威指南》
《JavaScript异步编程》
《图解HTTP》
《瞬间之美：WEB界面设计如何让用户心动》
‘贰’ 希望有前端大佬指导指导，到底该如何自学前端
1. Web前端是做什么的？
学习之前我对网页设计、UI、网页制所盒Web前端的概念很混淆，上网查了才明白：网页设计是指运用一些软件对网站进行美化，解决“好看”的问题；UI是指人与界面互动的优化，解决“舒适”的问题；网页制作着重PC端网页制作；而Web前端包括PC端和移动端的前端界面制作。
2. Web前端的基础技能及工作职责是什么？
爱它就要更深入了解它，学习Web前端就要清楚地知道Web前端工程师需要什么基础技能及其工作职责。其实，这“很简单”，只要你精通HTML+css（包括现在的HTML5+CSS3）、JavaScript、JQuery，了解界面设计，了解后端编程，服务器知识+后端语言基础。
3. 怎么样才能学好拿高薪，Web前端开发职业的前途怎样？
个人觉得三百六十行，行行都蕴藏的无限可能，干一行就爱一行，只要脚踏实地，努力学技术，技术硬了，自然会有前途和“钱”途。但是努力学习之前，必须要明确的目标，否则就是“看起来很认真”而已。
4. 如何学？
零基础学前端的话，这些书籍资料可以参考一下：
《JavaScript高级程序设计(第3版) 红皮书 》，适合有一定编程经验的Web应用开发人员阅读，也可作为高校及社会实用技术培训相关专业课程的教材。
《JavaScript权威指南(第6版)》 犀牛书，本书不仅适合初学者系统学习，也适合有经验的 JavaScript 开发者随手翻阅。
《JavaScript DOM编程艺术 (第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库。
《CSS权威指南(第三版)》，不管你是一个有经验的Web开发人员还是一个彻底的初学者，《CSS权威指南(第3版)》都是你的CSS学习源泉。
《JavaScript设计模式》，适合JavaScript初学者、前端设计者、JavaScript程序员学习，也可以作为大专院校相关专业师生的学习用书，以及培训学校的教材。
《你不知道的JavaScript(上中下卷) 》，本书既适合JavaScript语言初学者了解其精髓，又适合经验丰富的JavaScript开发人员深入学习。
《Vue.js权威指南》，该书内容全面，讲解细致，实例丰富，适用于各层次的开发者。
学习路线：
第1阶段：前端页面重构(4周)
内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)
第2阶段：JavaScript高级程序设计(5周)
内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)
第3阶段：PC端全栈项目开发(3周)
内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)
第4阶段：移动端项目开发(6周)
内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)
第5阶段：混合(Hybrid,ReactNative)开发(1周)
内容包含：(微信小程序开发、ReactNative、各类混合应用开发)
第6阶段：NodeJS全栈开发(1周)
内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)
视频教程：
网页链接
‘叁’ Web前端面试指导（五十）：CSS样式书写有哪些
一、CSS书写顺序
1.位置属性(position, top, right,z-index, display, float等)
2.大小(width, height, padding,margin)
3.文字系列(font, line-height,letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、CSS书写规范
1.使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
2.去掉小数点前的“0”
3.简写命名
很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！
4.16进制颜色代码缩写
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
5连字符CSS选择器命名规范
1）长名称或词组可以使用中横线来为选择器命名。
2）不建议使用“_”下划线来命名CSS选择器，为什么呢？
输入的时候少按一个shift键；浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名是用“_”）
6.不要随意使用id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
7.为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
三、CSS命名规范
常用的CSS命名规则
头：header
内容：content/Container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：right
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
ID的命名-页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
ID的命名-导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
ID的命名-功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：right
四、注释规范
/* Header */
内容区
/* End Header */
五、注意事项
1.一律小写;
2.尽量用英文;
3.尽量不缩写，除非一看就明白的单词。
六、CSS样式表文件命名
主要的 master.css
模块 mole.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
‘肆’ Web网站开发自学指南
你可能是对Web开发有某种兴趣，甚至你开始想去学习Web开发。本文则展示了一个成为一个Web开发者可以遵循的途径。作为一篇初学者指南，本文从学习什么出发到如何专攻。或许对打算进军Web开发的您有所帮助。
你可以同时掌握前端和后端，当然从一般情况来讲，Web开发者更倾向于其中的一个，对另一个只做了解。专攻于一个的也大有人在。虽然两者之间有一个分割线，但是对于哪一方应该做些什么是没有限制的。有时候前端仅用于可视化表示，所有的工作都在后端完成。而有些时候后端只服务于数据，所有的计算和函数都位于前端。这是一种设计和结构的关系，以此来定义哪一方做什么事情。
如果你是一个初学者，给自己一些时间去学习一个框架。框架是简化Web开发者工作的代码库。框架赋予Web应用一个结构，这帮助开发者更容易的处理一些任务并且效率上比什么都要自己编写来的快。如果你想要成为一个专业的Web开发者，那么就必须要学习至少一个框架，促进你的发展速度。
Web开发可以是巨大的，你可能想要专注于一种类型的应用。以Web网站的内容管理系统（CMS）为例，如果你选择了PHP，那么建议你继续使用WorldPress。WorldPress允许你创建网站、博客，同时它也能够通过默认插件或自定义插件和主题来扩展，以适应更加复杂的业务应用。
你将发现你选择的任何一种语言背后都有大量的框架，所以基于你选择的语言，你将和不同的框架打交道。
好了，望采纳
‘伍’ 关于前端开发的20篇文档与指南
英文原文：Another
20
Docs
and
Guides
for
Front-End
Developers
相信在
2015
年很多这个行业的人都会有这样的两种感受：
真的不知所措，这个行业到底有多少东西需要去学习；
渴望更多，并迫不及待的为接下来的学习寻求一些思想方向。
第一个来自于我们的个人感受，而第二个则是纯粹的必要性了。所以本文整理一些有用的信息，希望可以帮助相关领域的前端开发人员。
1.
I
want
to
use
基于
Can
I
use
的数据和功能，这款应用给予你选择一组前端开发特性的能力，并会读取出一个全球性用户能够使用它的百分比。
2.
Regulex
JavaScript
正则表达式的可视化工具，在线输入表达式后，动态生成表达式图片。非常不错的一个可视化
Web
在线正则表达式设计工具。
3.
Mastering
the
:nth-child
一个单页网站，帮助你理解如何去使用各种有用但又复杂的基于选择器组合的
nth-child。
4.
HTML
5
视频事件和
API
这个页面展示了新的
HTML
5
视频元素、媒体
API
和媒体事件。播放、暂停、搜索整个视频、改变音量、静音、改变播放速度（包括进入负值），查看视频和潜在事件与属性上的效果。
5.
Excess
XSS
这可能是所有开发者都应该熟悉的一个话题，并且这可能是一个很好的着手点。它是一个跨站点脚本编制综合教程。
6.
RSCSS
意思为Reasonable
Standard
for
CSS
Stylesheet
Structure（CSS
样式表结构合理的标准），记录一些针对大项目的
Sass/CSS
编写技巧和技术。
7.
CodeFightClub
一个由
Andrew
Hathaway
建立的项目，目的是帮助其他开发者学习如何用最好、最有效以及首选的方法编写代码。
8.
Sass
Guidelines
Hugo
Giraudel
写的
Sass
Guidelines
目前已经被翻译成其他六种语言。
9.
Flexbugs
如果你的目的是使用
flexbox
构建一个网站，而事情却并没有像你所期望的那样进行，你可以在这里找到解决方案。
10.
A
Front
End
Engineers
Manifesto（一个前端工程师的宣言）
没什么深入的东西，只是一些简单的事情提示，所有的前端开发者应该考虑将其结合到开发过程和工作流中。
11.
ES5
中的
ECMAScript
6
等价物
ES6
特性转换到
ES5-compatible
代码的一个很好的参考。
12.
Flexbox
Adventures
来自开发者
Chris
Wright
对
Flexbox
深入、实际看法。
13.
BEM
一个全面推广和培养
BEM
CSS
使用方法的网站。
14.
Sass
Compatibility
记录不同
Sass
引擎之间的不兼容性问题。
15.
HTMLelement.info
一个整洁、逻辑、易使用的指南规范，在不同的
HTML
元素上获得信息。
16.
JSLint
Error
Explanations
你可能跟随过很多
JavaScript
最佳实践，却并不明白所有这些技术背后的原因。本站旨在揭露
JSLint、JSHint、和
ESLint
工具里错误和警告。
‘陆’ 如何成为一个前端工程师
作为一名前端工程师，必须要掌握的三样东西HTML,CSS,Javascript。这里掌握的意思是，你不需要去借助搜索引擎去完成你的主要任务，当然我没有涵盖到书本，因为在JS发展到现在的，我们已经在里面添加里数不清的接口，你也不可能全部都了然于心。
三者当中你还要比较深刻了解JS中的两大部分，COREscript 和DOM,前者也就是我们经常提到的ECMAscript。你需要知道JS中最不同于其他语言的一些基本概念，诸如原型链，事件冒泡，字面量等，这对于你去了解一些框架有很大的帮助。当然你是不能不懂得AJAX，几乎我没有见过有哪个新型web站是不用这些技术的。另外你还懂得如何去操纵DOM，这个很关键。也是最繁琐的一个地方（繁琐的地方是，当你深入理解到节点类型，map，一堆繁琐的底层API的时候，你就会想哭的感觉，当然很多时候你都不会用到这些东西），当然一般来说它也不是什么难题，多加训练即可。
socket 需要重点理解），只是一些新的扩展性API，在经验当中可以成长。
当你觉得自己概念知识都能够基本掌握的时候，那么请你去实践。多么伟大的代码都要经过实践出真知，它不仅可以给你带来验证，而且它可以让你深刻去理解。
如果你想继续提升自己的能力，那么可以从以下几个方面去提升：
1.阅读别人的程序，理解别人的思路。你可以去使用和阅读框架，当然有人一听到框架就会嗤之以鼻，特别是性能党。我想说框架是个好东西，不过前提是你最好理解底层的东西。
2.优化你的程序，把你的程序做精做简，这是非常考验一个前端工程师的自我修养能力。
3.构建一个后端程序，或许你可以使用node去构建一个服务器，网上有教程手把手教你从基本做起，让你可以很好的贯穿前后端的知识。
4.如果你还有时间，那么可以学些脚本语言提高下自己的能力。作为一名前端个工程师，我们并不是需要你很全面的掌握一切有关计算机的知识，因为那样很不实际。你要相信你的记忆力和精力都是有限的，特别是面对费脑子的计算机。
‘柒’ 零基础如何学好Web 前端
朋友，如果你是零基础的话，建议你先自学一下前端的基础知识（html、css、Js）。
自学方法：
1、作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己钻研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间6个月保底。
2、视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里给大家提醒，书可以看，但是是在建立于你已经对于某个知识点有了具体操作的执行后，在用书去巩固概念，这样更加利于你对于知识的理解。
3、对于学习技术来讲，掌握一个学习方法是非常重要的，其实对于学习web前端来讲，学习方法确实很多都是相通的，一旦学习方法不对，可能就会造成“方法不对，努力白费”。其实关于这方面还是很多的，我就简单说个例子，有的人边听课边跟着敲代码，这样就不对，听课的时候就专心听，做题的时候就专心做题，这都是过来人的经验，一定要听。根据每个人的不同，可能学习方法也会有所出路，找到适合你自己的学习法方法是学习的前提。
4、不建议自己一个人瞎学，在我了解学习编程的这些人来看，从零基础开始学并且最后成功做这份工作的其实并没有几个，我觉得大部分原因就是因为他们都不了解web前端是干什么的，学什么的，就盲目的买书看，到处找视频看，最后看着看着就放弃了，所以我建议初学者在没有具体概念之前，还是找有经验的人请教一下，聊过之后你就会知道web前端具体是干什么的，该怎么学，这是我个人的小建议，可以不采纳。
2020前端最新学习路线图：
前端基础学习内容：
第1阶段：前端页面重构(4周)
内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)
第2阶段：JavaScript高级程序设计(5周)
内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)
第3阶段：PC端全栈项目开发(3周)
内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)
第4阶段：移动端项目开发(6周)
内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)
第5阶段：混合(Hybrid,ReactNative)开发(1周)
内容包含：(微信小程序开发、ReactNative、各类混合应用开发)
第6阶段：NodeJS全栈开发(1周)
内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)
前端基础书籍：
《Head First HTML与CSS(第2版)》，入门真的是经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。
《CSS权威指南(第三版)》，这本书作为 CSS 的经典着作，把原理讲得非常的通透，除了 w3c 标准，算最权威的一本了，毕竟权威指南。
《CSS揭秘》神书，47 个 css 技巧让你在面对各种 css 问题的时候游刃有余。是 css 书籍中评分最高的了，css 进阶必备。
《javascript语言精粹》，这本书可以在入门之前了解一下基本语法，以及在学习之前可以了解下 JS 里面的精粹以及糟粕，虽然这本书很薄很薄，但是值得反复去读的一本书。
《JavaScript DOM编程艺术(第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践。
《JavaScript权威指南》：犀牛书是每个FE都绕不过的一本书，可以先大致通读几遍，也可以把其当作工具书，时时翻阅。
前端视频教程：
网页链接
希望对你有用，望采纳~
‘捌’ Web 前端怎样入门
报班或者自学。网上有很多基础教程
‘玖’ 了解一点web前端的人想提高JS选择《JavaScript高级程序设计》还是《权威指南》
前端也很广啊，不知道你是想从哪方面提高啊？是站在程序员的立场还是产品经理的立场啊。程序员的话除了js入门“之类的书其他都还可以，各有侧重。产品经理的话就要看《js设计模式》这样的书咯，一般”XXX权威指南“这种书很类似于字典，我个人感觉是属于工具类的，某个地方不知道怎么写了打开看一看
‘拾’ web前端看哪些书籍好，前端开发书籍大全
1、HTML/HTML5基础：
《HTML5秘籍》
2、CSS
推荐书籍：
1、《图灵程序设计丛书:HTML5与CSS3设计模式》
2、《Web开发技术丛书:深入理解Bootstrap》
3、《高流量网站CSS开发技术》
4、《CSS设计彻底研究》 这个一定要
5、《Web开发技术丛书:深入理解Bootstrap》
6、可以找一些专门讲SASS的书，但是我没找到
7、《CSS权威指南(第3版)》
3、深入学习JS
推荐书籍：
1、《单页Web应用:JavaScript从前端到后端 》
2、《Web 2.0界面设计模式》
3、《响应式Web设计:HTML5和CSS3实战》
5、工具
学会使用grunt进行JS、CSS、HTML 压缩，特别是模块化js开发时候的压缩
会用PS进行切图、保存icon
入手sublime、webstorm
学会使用chrome调试面板，特别是：console、network、profile、element
进阶：
4、性能
推荐书籍：
1、《Web性能权威指南》
2、雅虎网站页面性能优化的34条黄金守则
5、HTTP及TCP协议族
推荐书籍：
1、《HTTP权威指南》
2、《TCP/IP详解》
3、《图解TCP/IP(第5版)》
请使用手机"扫一扫"x