随着多设备、浏览器和Web标准的演变革命，前端正在成为兼顾逻辑、性能、交互、体验的综合性岗位。
前端开发入门又相对容易，必须掌握的HTML+CSS+JS非常容易学习，如果你能再了解一定后端知识，对业务需求和架构设计有熟练运用，再能够兼顾技术和设计，很快就可以成为“以前端开发为主的全栈工程师”。
今天推荐一本Web前端的敲门砖！《Web前端工程师修炼之道》，这是一本完整的Web 设计和制作的入门指南。详解WEB前端基础知识，如HTML、CSS、JavaScript、Web图像制作等等。
你是否曾想过自己创建网页，但苦于没有经验？那么从这本书开始学习吧！本书由浅入深地讲解了Web设计的一些重要概念、基本原理，以及HTML、CSS和JavaScript的具体使用方法与技巧。当你读完本书后，将会掌握创建适用于移动设备的多列页面的技巧。
每章都提供了一些练习和小测验，帮助你了解不同的技术，巩固对重要概念的理解。
第5版进行了全面更新和修订，涵盖了Web前端开发所需的一切，无论对初学者还是对想提高已有技能的专业开发人员，本书都是理想的选择。
●使用文本、链接、图像、表格和表单来构建HTML页面。
●使用CSS调整颜色、背景、页面布局以及格式化文本，甚至是实现简单的动画效果。
●学习JavaScript的工作原理及其在Web设计中的重要性。
●创建并优化Web图像，加快图像下载速度。
使用CSS Flexbox和网格实现复杂灵活的页面布局。
学习自适应Web设计的细节，使Web页面在所有设备上看起来都很棒。
熟悉现代Web开发者工具包中的命令行、Git和其他工具。
了解SVG图像的超强能力。
本书分为六部分，每一部分都是Web开发的一个重要方面。
第①部分为本书后面的学习奠定了基础。我从关于Web设计的一些重要信息开始讲述，包括你可能会扮演的各种角色，你可能会学到的技术和工具。你会学到HTML和CSS，并学习Web和网页一般如何工作。我也会介绍一些重要的概念，带你体会现代Web设计师的思想。
第二部分涵盖每个元素和属性的本质以及语义结构。我们将讨论如何标记文本、链接、图像、表格、表单和嵌入式媒体。
在第三部分，你会学习使用CSS来改变文本的外观，为页面创建多列布局，甚至添加基于时间的动画、交互等。该部分还介绍了自适应Web设计，以及作为现代开发人员工作流一部分的工具和技术。
在第四部分，Mat Marquis从JavaScript的语法开始讲解，带领你逐步学习变量、函数。你也会学到JavaScript的使用方式（包括DOM脚本），以及已有的JavaScript工具（如polyfill和库），即便你还没有准备好从头开始编写代码，这些工具也可以帮助你更快地使用JavaScript。
第五部分介绍Web适用的各种图像文件格式，提供了将其作为自适应工作流的一部分进行选择的策略，而且描述了如何进行优化才能使文件尺寸尽可能小。此外，该部分还包括一个关于SVG图形的章节，这为自适应设计和交互式设计提供了极大的便利。
第六部分包含参考资料，如测验答案、HTML全局属性列表和CSS选择器，还介绍了HTML5及其历史。
【第一部分 开始起步7】
●第1章 Web设计入门9
从哪里开始9
它需要一个团队（网站创建角色）10
为Web设计做准备19
你学会了什么25
自我测验25
●第2章 Web是如何工作的26
互联网与Web26
提供你的信息27
关于浏览器27
网页地址（URL）29
网页结构31
小结36
自我测验37
●第3章 Web设计基本概念39
各种设备40
与标准一致41
逐步提高42
自适应Web设计43
可访问性：所有用户一个网站46
网站性能：连接速度的要求48
自我测验50
【第二部分 HTML结构53】
●第4章 创建简单网页55
创建网页的步骤55
启动文本编辑器56
第1步：从内容开始58
第2步：HTML文档结构化61
第3步：确定文本元素64
第4步：添加图像67
第5步：使用样式表改变外观70
当网页出错时72
验证你的文档73
自我测验74
元素回顾：HTML文档结构75
●第5章 标记文本76
段落76
标题77
主题中断78
列表79
更多内容元素82
组织网页内容85
内联元素综述91
泛型元素div和span100
使用ARIA提高可访问性104
字符转义107
小结109
自我测验112
元素回顾：文本元素112
●第6章 添加链接115
href属性115
链接到Web上的网页117
站内链接118
以新浏览器窗口为目标127
邮件链接129
电话链接129
自我测验130
元素回顾：链接131
●第7章 添加图像132
图像格式简介133
img元素134
添加SVG图像139
自适应图像标记146
小结158
自我测验158
元素回顾：图像159
●第8章 表格标记161
如何使用表格161
最小表结构162
表头165
合并单元格165
表格可访问性166
行和列组168
小结170
自我测验172
元素回顾：表格172
●第9章 表单174
表单如何工作174
表单元素176
变量和内容178
重要表单控件综述179
表单可访问性功能197
表单布局和设计201
自我测验202
元素回顾：表单203
●第10章 嵌入式媒体207
窗口中的窗口207
多用途嵌入器209
视频和音频210
画布219
自我测验223
元素回顾：嵌入式媒体223
【第三部分 表现层的CSS227】
●第11章 介绍层叠样式表229
CSS的优点229
样式表如何工作231
大概念235
CSS计量单位241
开发者工具就在浏览器中244
继续使用CSS246
自我测验247
●第12章 格式化文本248
基本字体属性249
使用CSS3的高级排版功能265
改变文本颜色267
更多选择器类型268
文本行设置274
下划线和其他“修饰”277
改变字母大小写278
空格279
文本阴影280
改变列表的数字编号284
自我测验286
CSS回顾：字体和文本属性288
●第13章 颜色和背景290
指定颜色值290
前景色297
背景色298
裁剪背景299
使用不透明度300
伪类选择器301
伪元素选择器306
属性选择器308
背景图像309
快捷背景属性323
渐变327
外部样式表334
小结339
自我测验339
CSS回顾：色彩和背景属性341
●第14章 盒子思想342
元素盒子342
指定盒子尺寸343
填充348
边框352
空白边362
分配显示类型365
盒子阴影368
自我测验369
CSS回顾：盒子属性369
●第15章 浮动与定位372
普通流372
浮动373
用CSS形状进行精美文本环绕383
定位基础390
相对定位391
绝对定位392
固定定位400
自我测验401
CSS回顾：浮动和定位属性402
●第16章 使用Flexbox和网格进行CSS布局403
使用CSS Flexbox的灵活盒子403
CSS网格布局432
自我测验463
CSS回顾：布局属性466
●第17章 自适应Web设计469
为什么要使用RWD470
自适应秘诀470
选择断点477
自适应设计481
关于测试492
更多的RWD资源494
自我测验495
●第18章 过渡、变换和动画497
CSS过渡497
CSS变换507
关键帧动画515
小结520
自我测验521
CSS回顾：过渡、变换和动画522
●第19章 更多CSS技术524
对表单设置样式524
对表格设置样式527
重置和Normalize.css530
图像替换技术532
CSS Sprite533
CSS特性检测535
小结539
自我测验539
CSS回顾：表格属性541
●第20章 现代Web开发工具542
熟悉命令行542
CSS的强大工具：处理器546
构建工具：Grunt和Gulp552
使用Git和Github进行版本控制554
小结560
自我测验561
【第四部分 JavaScript行为563】
●第21章 JavaScript简介565
关于JavaScript565
给网页添加JavaScript568
脚本剖析569
浏览器对象582
事件582
综合应用584
学习更多关于JavaScript的知识585
自我测验588
●第22章 使用JavaScript和DOM589
DOM简介589
polyfill597
JavaScript库599
小结603
自我测验603
【第五部分 Web图像605】
●第23章 Web图像基础607
图像来源607
格式简介610
图像尺寸和分辨率620
图像资产策略623
favicon627
小结630
自我测验630
●第24章 图像资产制作632
将图像保存为Web格式632
使用透明度637
自适应图像制作技巧640
图像优化650
自我测验660
●第25章 SVG661
使用XML绘图663
SVG作为XML的特性670
SVG工具675
SVG制作技巧677
自适应SVG681
SVG的进一步探索687
自我测验687
我们学完了688
【第六部分 附录689】
附录A 自我测验答案691
附录B HTML5全局属性705
附录C CSS选择器的第3级和第4级707
附录D 从HTML+到HTML5710
关注数：10亿+ 文章数：10亿+
粉丝量：10亿+ 点击量：10亿+
悬赏博主专区请扫描这里
喜爱数： 1亿+ 发帖数： 1亿+
回帖数： 1亿+ 结贴率： 99.9%
—————END—————
喜欢本文的朋友，欢迎关注公众号 程序员哆啦A梦，收看更多精彩内容
如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~
