【IT修真院】零基础到就业一个月系列之【CSS】篇

北京葡萄藤.IT修真院 http://www.jnshu.com
===============================
免费，快速，高效的帮助IT新人入门。微信公众号：葡萄藤IT技能树。球球群：一八五三五四一八八




前言
===============================
CSS入门比较简单，很适合零基础的人去学习。但是该从哪里开始呢？又该学到什么程度，学会了之后，又会能找到一份什么样的工作呢。


目录
===============================
一 什么是CSS
二 该学习哪些内容
三 能胜任什么工作

四 为什么不推荐去看视频
五 究竟该怎么去学习
六 遇到问题怎么交流
七 下一步学什么
===============================

一 什么是CSS？

CSS【层叠样式表】是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
但是对于新人来讲，更需要的是看懂这么一个流程图，论一个网站是怎么开发完成的，这样你才能了解通常程序员所说的CSS是什么。



解释一下每个名词的含义：


1.产品经理：每一个好的产品，都是产品经理在浴室里思考会议室上拍桌子说服大佬最后拿着枪指着程序员做出来的。这就是产品经理的职责，他们被认为是互联网的灵魂和发动机，理解用户痛点，给出解决方案，做出差异化的产品，能够快速迭代，可以合理分期并能够及时评估项目风险。产品经理就是负责把用户的需求，变成需求文档和原型和PPT和流程图。

    当然，大多数程序员对于产品经理的形容只有两个字：SB

2.UI：UI是一个又能做产品又能做页面又能做交互的神奇物种，做UI是跟做前端的人打交道最多的职业，所以他们跟CSS一样，有时候都被简称是美工或切图的，有时候就是给合影照做PS的。UI就是把产品经理设计的原型图，上色变成好看的设计稿。也就是PSD文件。

    当然，大多数程序员（特别是CSS）对于UI人员的形容只有三个字：像素眼

3.CSS：其实有时候CSS根本不算程序员啦，这也是为什么有时候UI会兼职做CSS的重要原因。也是CSS成为了最容易上手的IT职业。CSS就是负责把UI设计的图片(PSD)，变成Html网页,里面的数据全是假的。很多时候学会CSS就能找到一份IT行业的工作，但是并不能帮助你拿高薪。

    当然，大多数程序员对于CSS人员的形容只有三个字：切页面的。


4.JS：JS入门的难度比CSS稍高一些，但也是所有真正程序员里比较简单的工种了。简单的JS程序员只是做点轮播，做点特效和动画，加个弹窗，做个验证。但是，现在呢，前后端分离的方式，前端架构概念的出现，Html5的普及，已经让前端成为了一个最重要和最热门的工种。

    当然，大多数程序员对于JS人员的形容就是：我靠，你居然会写后端代码？


5.后端：后端其实才是神一样的存在，无论前端是有Apple还是IOS还是桌面客户端，永远少不了后端，后端要懂业务逻辑，要懂扩展，要懂备份和安全。但是后端是一个很吃年限，入门要求很高的职业。

    当然，大多数产品经理对于后端人员的形容就是：马丹又延期了。


6.QA：QA归属于程序员，但是常常会被程序员孤立哈哈哈哈哈。因为QA就是专门挑错的人，如果你挑错挑的不严谨，Boss会骂你。如果你挑错挑的很认真，程序员会杀了你。你自己看着办吧。

    当然，大多数程序员对于QA的形容就是：你是不会用吧。

7.OP：OP是比较奇葩的物种，跟各个程序员之间基本上没什么大的冲突，除非是到了发布的时间点。无数的OP都会经历过这样的事情，线上发布一次，马丹，有Bug，回滚或者是直接在线上改。改了半个小时，马丹，还是错，再继续改。这次先到了测试环境验证，好不容易验证通过了，再发到线上，又出问题了。马丹，程序员们继续改。

    当然，大多数程序员最喜欢对OP说的一句话就是：大哥，睡了没？没睡再帮我发一个版本吧？



小结：CSS就是负责把UI设计的效果图变成静态网页，然后由后端或者是前端JS把静态网页中（假数据）变成动态网页（真数据）。简单说，不用理解太多产品需求，只要勾搭好UI妹子，做好浏览器兼容，做好自适应和响应式，代码写的别那么烂，有点通用性，就好啦。这就为一个月之内学会CSS，成为一个初级的CSS工程师，创造了前提条件。


二 该学习哪些内容
===============================
先看一下这张图，不同的颜色代表着你需要了解到不同的程度。





简单来说呢，我对一个月的CSS工程师要求是：能独立完成自适应和响应式的项目，能会使用Bootstrap和Less。
你们觉得难么？可能大部分人都未必知道，什么是适应，什么是响应式，什么是Boostrap和Less。

好吧，这确实是有点难度，不过我大IT修真院的弟子可以在15天之内完成这个的。所以，其实还不算太难啦，难的还在于是编码规范。
这儿我把CSS初级工程师，需要会的内容，再整理成一个文字版的。

1.基础环境的配置：WebStorm/sublime,Svn/Git，Nginx/shell ，PS ，命名和规范。这些都是一开始就要会的了，只有一开始都先从简单的功能开始使用，然后每天巩固，每天在用，当一个月之后，你会发现根本就不用刻意去学，自然就会了。其中，WEBStorm是IDE，SVN是源码管理工具，Nginx是WEB服务器，Shell只需要会一些简单的脚本，PS是要你自己学会切图，命名和规范是格外的重要的。。这里每一个点都可以无限扩散，然而你并不需要会那么多，暂时来说，会用就行。

2.布局+样式：布局是最基础的操作，先抛开各种奇怪的控制的属性不谈，单说各种对齐和局中。这里其实是需要了解一些理论知识的（大概也是CSS里为数不多的理论知识之一），主要就是盒子模型，定位（标准流）（浮动）(相对，绝对)。用这些东西做出常见的居中，两列，三列，Header，Foot，侧边栏等。 然后就是学习各种控件（简单的和复杂的）的样式，这里包括选择器，优先级等等。

3.自适应+响应式：可以这么说吧，从现在开始，表再做没有自适应的网页了，优先考虑响应式吧，跨屏时候已经来临。所以你要了解屏幕尺寸（Media），要懂长度单位（em,rem,百分比）

4.性能优化：一些简单的常识就够了。最少要学会雪碧图的制作。

5.框架：Bootstrap和Less，在学会以上4种的时候，已经可以自己搭建一个网站了~吃惊咩？然而还是需要学习一下Bootstrap，学会了解一下使用开源框架的感受，学习别人封装代码的思路，这是最重要的。
Less可以帮助你从另一个角度去思考，让你的代码更简洁。



好的，现在来简单总结一下，当我说，一个月之内成为一个CSS初级工程师的时候，就是指的你已经学会了以上的内容。这样你就能开始写一些项目了，在写项目的过程中，会加深很多细节的知识，CSS的知识就是繁琐的。
只有掌握了这些，你才能完成接下来的学习。



三 能胜任什么工作
===============================

其实，刚刚已经说到一些了。初级的CSS工程师，在北京可以拿到4K~8K的薪水，能不能找到工作，取决于你能不能独立做出来项目的页面。能拿到多少薪水，取决于你会不会一些JS。
这样的水准啊。在北京找到份工作其实不难了，你每天的日常工作就是，从UI那里拿到图。然后切成静态页面，然后当后端的同学套页面的时候，去看看套的对不对。

跟着会做一些轮播图，做个小弹框之类的。如果你停止学习，你可能在这个水平上停留很长时间。哦，还有可能会懂一些浏览器的Hack。学会兼容IE的老版本。


四 为什么不推荐去看视频
===============================

坦白的说呢，如果没有人教你，没有人带你，想要实现在一个月的时间里就学会这些，基本上是做不到的。
这也是我写这篇贴子的很重要的原因,这也是这篇贴子中最有价值的地方。
总的原则是：
1.永远永远不要去先看视频，先看书。
2.永远永远记着代码是写出来的，不是看出来的。
3.永远永远记着要有自己独立学习独立解决问题的能力。
4.永远永远记着不要说自己不会英语。
5.永远永远记着不要给自己没有时间找借口。
6.永远永远记着要学的知识有很多，找到一条正确的途径才可以。


好了。看完这些，也可能会跟你之前的认知有所不同。
但是，想想，你有没有遇到过这些问题。


1.不知道自己该学什么，从哪里入手。
2.视频看了很多，讲起来好像懂了，做起来完全又不会。
3.遇到了问题，根本找不到人解决。
那么我来解释一下，为什么我会让你们抛弃看视频，看教程，做测试题等各种奇怪的学习方式，转而投向更高效更快速的IT修真方式。

首先，技术是有体系的，但是又是非常零散的。
这些零散的小知识太多了，而且在实际使用中，你并不需要把所有的零散小知识都学会，那样太慢了，更何况，在做真实的项目中，根本用不到这些小知识。
用不到的东西很容易就会忘啊。所以这就是你看视频或者是教程之后，就算是懂了也会很快就忘记的原因。
怎么解决？多写多练，学习致用。

其次,做技术的要培养的是自我学习和解决问题的能力。这是看视频和看教程绝对没有办法教会你的。比如说，遇到了问题，该去找哪些关键词？百度的结果中，哪些常用网站的答案是可信的？哪些的方法根本就是错的？
请教别人的时候，如何能够快速准确的描述清楚自己的问题呢？
每个人都有自己的学习方式，都有自己无法理解的问题和困扰，这些只能靠真正的写代码去实践出来的。

再次，学习的氛围很重要，讨论交流，同学都在努力学习的氛围会让你不自然的向前走。
这同样是视频和教程很能给你培训的啊。没有人监督，没有人一起学，很容易被各种各样的琐事打断。


最后，做项目更看重的是编码规范，交流沟通，协作和进度支持。
这也是各种培训机构很难带给你们的。很多培训机构的老师都只会讲课，并不会做项目。



五 该怎么去学习
===============================

说了这么多，该怎么去学习呢。别着急，容我仔细讲来。


1.要明白自己学习的目标是什么。
    这里的学习目标，并不是成为一个CSS工程师之类的，也不是迎娶白富美什么的，而是一个明确的，专业的目标。
    对于CSS工程师来讲，要进入公司就必须能够独立做项目，必须学会编码规划和协作，必须学会自适应和响应式，再学会Bootstrap来了解框架，最后是学习Less扩展视野。


    记住了么，如果这些名词不太熟悉，不要害怕，学习都是有顺序的。但是，前提条件是，你必须明白，你会了这些，你才能够说自己算是CSS入门了，可以独立去找一份工作了。


2.要有明确的学习规划
    从简到难，先学什么，后学什么，有人带和没人带的差别，就在于这里。
    对于CSS来说，重新回过头来看看本篇贴子的第二节，这就是你的一个学习的规划。这就是你要学习的内容。


3.要不断的用代码去验证自己学习的成果
   会和不会最直接的方式，就是你能不能做得出来，所以一定是你去做一个任务，然后这个任务呢，包括某种技能和知识点的训练（玩过游戏的都会比较熟悉这种方式），在做任务的时候遇到了问题，再去找人交流或者是请教师兄。
   能直接写出来的代码，会让你有脚踏实地的感觉，不会心虚。
    对于CSS来说，重新回过头来看看本篇贴子的第二节，这就是你的一个学习的规划。这就是你要学习的内容。


4.要学会自己去主动解决问题

    之前提到过，自己主动解决问题的能力很重要，这是一个程序中的生涯中必不可少的解决问题的方式。所以从一开始就要培养自己在这方面的能力，而这个真的是一种能力。有的人能够快速找到问题的解决方案，有的人会被一个问题卡很久，每个人的情况都不一样，早点入手，早点找到更适合自己的方式。


5.要学会自己去和其他人交流请教
其实交流和请教别人，也不是一件简单的事儿，很多时候你并不能描述清楚你的问题。因为出现问题的原因总是千奇百怪，特别是每个人走的路子不一样，解决问题的方案也不一样。因些，最好的方式就是寻找那些刚刚解决过这些问题，比你早走一步的师兄，对他们来说，更乐意去帮助你解决掉这些问题，这也是强化记忆的一种方式。
  学会寻找合适的人去请教，描述清楚又不能过多打扰对方，这也是一种能力的训练。还有，提前认识一些技术上的前辈，他们能给你们的指导和帮助，远远超出你的想像。（IT修真院就是提供这么一种途径）


6.每天都去总结反馈
  不要给自己任何的理由去停止练习，哪怕你什么都没做，也要保持记录日报的习惯（IT修真院的论坛里有很多师兄写的日报，可以参考，也是我带IT修真院学员的时候，点评日报是和学员交流的最好方式），你可以发现，自己究竟学会了什么，又因为什么阻碍了自己的进度，在什么地方进步更快。
  不断的反思和总结，会让你收益颇丰。

7.公开代码，接受交流
  你是一个新人，所以没什么可羞涩的。把代码公开出来，把做出来的效果贴出来，这都是很好的交流方式和心态。

8.注重规范，注重合作，注重交流
   在真实项目中，这比什么都重要，你会发现，当你和三个人一起合作的时候，因为Class命名不统一不规范产生冲突，因为三个人风格不一致导到项目后期维护困难，当需求发生变化的时候你发现自己写的代码简直无法改动，等等等等这些，在刚开始的时候就这么做，考虑代码的扩展性和可维护性，否则一旦你养成很多坏习惯，再纠正过来就很难了。

9.在需要的时候再去看视频和教程
  在遇到一些关键的节点上，自己解决不了的问题的时候，再去翻阅视频和教程-我不确定你们是否明白这两种方式的差别，就是不要跟着教程和视频走，那样太慢，不要去做所谓的练习题，对你没有任何帮助。而是把教程和视频当成是词典，你只在需求的时候去查阅它，在自己积累到了一定的困惑的时候，再去梳理和总结。这是我从业近十年以来发现的最快的学习方式。
  
10.不要太贪心，什么都想学
  严格按照任务序列去做，不要太纠结于细节，学会把不会的内容放一放，留在脑袋里一直让它困惑。保持足够的进度，当积攒到一定程度，你发现他成为你学习的瓶颈的时候，再去解决它。 

  否则你会就迷失到知识的海洋中，根本找不到方向。


11.学会最佳实践
  在做CSS或者是其实的语言的时候，慢慢的你会发现，完成一份工作，总是有很多种方式，很多时候你会困惑，我究竟该用哪些方式好？这个在项目中，就叫做最佳实践，换句话说。最佳实践就是无数人走了无数的弯路，告诉你那么走是走不通的，按照正确的方法走是没问题的。

  然而问题又来了，很多时候都会告诉你正确的路怎么走，但是为什么不能走其他的路，并没有人说。而且，也太多了。
  因此我必须要认真的提醒你，先确定自己能用一种方式把问题解决，然后再去寻找更好的方式，这就是你的最佳实践。等以后有更好的办法解决问题的时候，再去改进自己的经验体系。


六 遇到问题怎么交流

    一般来说，遇到问题往往会有以下几种解决方案。
    1.如果有之前的正确代码，回滚到正确的代码上，先确认是哪一行代码产生的问题。
    2.确认你的运行环境，如果是CSS的话，确定是在哪个浏览器的哪个版本下出的问题。
    3.打开F12，如果有报错信息，那么就直接百度报错信息，先试着理解一下报错的含义。
    4.如果没有报错信息，用两到三个词来描述你的错误现象，查一下百度结果。用最快的速度判断出来哪些结果有用和没用。如果没用，更换关键词，通常你应该做到，在10秒钟之内至少切换两到三次关键词。
    5.写清楚自己的环境很困惑的地方，像一个程序员一样的去问问题，比如说，为什么我的Nginx配置完正确的路径之后显示出来的仍然是默认的欢迎页面，并没有切换到我自己的Html页。而不是像个傻子一样说，有没有人会Nginx？为什么我的Nginx不能用？如果有截图，截上全屏的图，不要只截一小块，真的很烦只截一小块代码的没头没脑的图。
    6.先整理问题，再去提问，不要随便遇到一个问题就各种去找人问，整理清楚自己的困惑，然后发给别人，等他们有时间的时候再回复。
    7.查阅相关的资料，用最短的时间确定是否能解决自己的问题。不要迷失，不要一直看下去。有困惑一定要存疑，积累至少一到两天或者一周（看你困惑的是不是关键性的问题）。
    8.多写不同的代码，多找已有的例子，公开自己的源码，找固定的学习伙伴，寻找比你刚好多学了一点点的师兄，而不是一定要找一些技术大牛，你遇到的问题，他很难领会到你的困境，因为离菜鸟困惑的时间点太远了。【我不得不强烈推荐IT修真院，去哪找这么好的学院找师兄？】




七 下一步学什么

     

    实际上，当你能通过IT修真院的15个Task，你就已经可以成为一个具有学习能力，了解CSS的整体趋势，能够独立完成一些项目的初级CSS工程师了。接下来就应该偏向于代码规范，JS，CSS3和Html5的内容。如果想了解更多，就关注IT修真院的微信公众账号，开始CSS中级工程师的修真之旅吧。