前端开发，从草根到英雄（第一部分）

版权申明：
此文章首发于公众号程序员在深圳，搜索 studycode 即可关注
本文无需授权即可转载，转载时请务必注明作者

我还记得当我刚开始学习前端开发时，我被大量的技术文章淹没，当时让我非常困惑的是：我究竟需要学多少知识才算足够，我甚至不知道从哪里开始。

这篇指南会告诉你学习前端开发的方向，它会提供一些过去我在学习中遇到的非常有效的学习资源，并伴随着我的一些注解。

HTML和CSS基础

通过这些资源后，不要担心自己记不住，而是将你的注意力集中在HTML和CSS在一起是如何工作的。

HTML和CSS基础练习

目前你对HTML和CSS有了基本的认识，接下来我们玩点更有趣的。这一章节里，会有两个实验，它们会教你如何创建网站和界面。我用“实验”这个词的目的是：在实验中，你从失败中学到的东西将会和你从成功中学到的一样多

实验1

如果你的“复制品”看起来和“参照物”不太一样，你也不必灰心，继续做不同的设计练习，你会发现每次你都会进步。

实验2

希望第一个实验能给你带来一些HTML和CSS的信心。在第2个实验中，我们将看一些网站，然后试图实现它们的组件。

一些网站会使用CSS框架，或重命名它们的CSS类名，这样的代码读起来非常困难，所以我挑选了一些源代码很好读的网站，这些网站拥有良好的设计。

• : 试着复制段落
• : 试着复制页脚段落
• : 试着复制导航条
• : 试着复制页面底部的登录部分
• : 试着复制支付部分

同样的，第2个实验的重点也不是重建整个页面。选择一些像导航条或hero段落这样的关键组件去编码，对于做什么组件，我已经在网站列表右边给出了建议。

同时，请记住在任何页面，你都可以看见它的HTML和CSS代码，仅仅只需要右键页面或页面中的一个组件，点击检查，一个HTML在左、CSS在右的面板便会弹出，一旦你完成了或卡住了，也可以使用检查器对你的HTML和CSS进行对照。

HTML、CSS最佳练习

到目前为止，我们学到了基本的HTML和CSS，下面我们将要进入最佳练习，最佳练习指的是一些能帮助你提升代码质量的非常规规则。

语义标记

如何写语义标签是HTML和CSS的最佳实践之一，好的语义意味着使用合适的HTML标签以及有意义的CSS类名，它们可以传达结构的含义。

CSS命名约定

CSS重置

跨浏览器支持

CSS预处理器和后处理器

自从90年代引入CSS以来，CSS已经走了很长的路。 由于UI系统变得越来越复杂，人们想出了被称为预处理器和后处理器的工具来管理复杂性。

网格系统和响应式

网格系统帮助把CSS结构竖直的和水平的排列起来。

练习HTML和CSS最佳实践

现在你已经武装了最佳实践的武器，我们可以用它来做一些"军式演习"，下两个实验的目标是练习写干净整洁的代码，以及长期观察最佳实践对可维护性和可读性的影响。

实验3

第三个实验是，挑选一个之前的实验，并使用学到的最佳实践方法来重构它，重构的意思是编辑你的代码，让它变得更容易读和减少它的复杂性。

当你在重构代码时，你需要问自己几个问题：

• 你的类名是否模糊不清？在六个月后吗，你还会记得这些类名的意思吗？
• 你的HTML和CSS具有语义吗？当你在此审视你的代码时，你还能快速辨别结构和关系的意义吗？
• 你还在一遍遍的使用十六进制颜色编码吗？难道使用重构它们不会更能表达它们的意思吗？
• 你的代码在Safari上是否和在Chrome上一样好呢？
• 你可以把你的布局代码换成想这样的网格系统吗？
• 你经常用!important标签吗？你如何解决这个问题？

实验4

最后一个实验将告诉你如何使用你学到的最佳实践。 然而，最佳实践的效果往往不明显，直到您将它们应用到一个更大的项目。

对于最后一个实验，建立自己的文件夹网站。 作为前端，您的文件夹网站是您最重要的数字资产之一。文件夹是展示您的工作的网站。 更重要的是，这是一个持续的记录，可以帮助你跟踪你的进步和发展。所以即使你只有1或2件事可以展示，你也应该把它们放上去。

如果你的文件夹刚开始并不完美，也没关系，随着时间推移，文件夹会迭代，最重要的是，你将使用你自己的技能来创造它。

保持更新

虽然HTML和CSS不会马上过时，但保持最新的技术视野是一件很重要的事情。

下面的网站，博客以及论坛列表很有意思，也很有价值：

从例子中学习

最后，最好的学习方式是从例子中学习， 这里有一套styleguides和代码约定，将教你如何成为一个更有效的前端。

Styleguides

代码约定

圆满

希望在本文结束时，你已经非常熟悉HTML和CSS了，并有一些项目在折腾了。 学习前端的最好方法是建立项目和实验。 记住，每个前端开发人员都必须从某处开始。 从今天开始比明天更好。