为什么前端入门也这么难 work-in-progress

之前自学过一段时间前端，发现还是没有进入门槛。最近又鼓捣了一下，才踏入门中。如果你也自学过一段时间仍不得要领，本文或许可以给点启发。

Note: 如果你有充裕的时间，那么阅读完Getting started with the Web,那么你就入门前端了。

Intro

似乎有种偏见，前端很简单，每个人都能学得会。而后端就比较难，比较难学。实际上，没有所谓每个人都能学得会，也没有比较难学。关键在于走对了路，学会了，走错了路，从未入门然后放弃。

我很久以前读了JavaScript DOM 编程艺术/ DOM Scripting Web Design with JavaScript and the Document Object Model，希望入门前端（忘了具体当时的目的了）。但是最后学会了一点JavaScript和DOM model (写了一个脚本方便科研工作者），但是没有入门前端，因为我那时仍未掌握自己建立一个网站的能力，只是可以在一个已有的网站上面加点功能。

最近花了也时间重新学习了，并且动手做了个demo网站，才觉得自己似乎应该是踏入门中。于是我回想了自己这学习的路，总结了一些关键点，一是加深印象，二是也帮助那些曾经像我一样徘徊许久的人。

俗话说前端三驾马车: HTML, CSS, JavaScript。HTML负责对组织内容结构，比如几个段落，几个标题。CSS负责样式，这个段落应该长什么样子，什么颜色。JavaScript负责给网页增加交互，比如点了按钮应该触发什么。

所以入门前端要对三驾马车都掌握。但是以什么顺序掌握，每种掌握的程度是多少。完整学一遍JavaScript，可能兴趣就被磨灭了。取决于你自身的现状和你想要达到的目标。如果时间充裕，可以一个一个攻克。如果时间不够充裕，那么就以demo驱动，花点时间来做demo。

对于有编程经验的人来说，JavaScript比较容易掌握，HTML也容易得个大概。这时候最难琢磨的就是CSS。结果表明单单知道CSS负责样式，负责颜色，字体等等是远远不够的。

当你用简单的HTML构建一个段落的时候，你希望增加CSS，让网站变得更漂亮和整齐，这时候去学习CSS发现，大部分的CSS都是从局部入手，比如 font-family: Avenir, Helvetica, Arial, sans-serif;设置字体，比如width: 100px设置宽度。让人学习起来感觉没有方向，容易认为CSS就是这么拼接，没有整体设计。

实际上CSS入门应该从盒子模型(box model) 入手，深刻理解盒子模型。当你运用CSS的时候，你是在在一个二维平面（三维的，等你入门你也容易掌握了）整理拼图，只不过这里的拼图基本都是长方形。详情请见The box model - Learn web developmentilding_blocks/The_box_model。这里简单介绍一下。box model 定义了其他放在它里面的boxes应该如何排列(inner display type)。每个box也可以指定它与其他boxes应该怎么排列(outter dispaly type)。定义通过display property 来实现

ThedisplayCSSproperty sets whether an element is treated as ablock or inline element and the layout used for its children, such as flow layout, grid or flex.

这样子，你就会知道如何排版你的网站，一旦排版符合你想要的样子，那么你就会有成就感。

而box的大小是由width, height, padding, border决定的， margin用来说明其他box与它的距离。见下图

接着是明白CSS的 Cascade and inheritance 和Selector。这样可以精准地描述你要修改的元素。

另外还有一点是，借助Chrome Dev tools 或者Firefox the Dev tools,这样你可以交互式地观看CSS的效果和探索不同属性和值的作用。

等入门以后，你就可以去玩弄前端三大框架，选一个作为你的技术栈了。记住，不要以三大框架作为入门，除非你是编程老手和在人带领下。

封面图片来源： https://crayonsandlearning.blogspot.com/2020/02/printable-owl-coloring-pages-for-kids.html