一个渣渣的前端学习之路_html/css_WEB-ITnose

一个渣渣的前端学习之路

缘由

今晚我的舍友（凯哥）突发奇想说暑假要跟我学前端，问我应该从何入手，想了一下，发现自己在前端这个坑中已经摸索了半年多了，从一开始什么都不懂，一脸懵逼到现在可以独立完成一个简单的网站。虽然说基本上还是处于刚入门的阶段，但觉得一些经验对于从零开始学前端的童鞋应该还是有一点帮助，所以打算把自己摸索的前端的道路写出来供一些人参考。

为什么选了软件工程这个专业

其实我不是一个对技术特别有兴趣的人，在高考后才发现自己并没有特别热爱的东西，很多兴趣爱好也都是虚无缥缈的东西，加上自己色弱很多专业都选不了，于是就随便选了软件工程，那时候觉得多会一门技术也是好事吧，反正自己那么“聪明”，如果到时找到自己兴趣所在再自学也没关系（有点太自以为是了哈哈）。

于是刚进大学的时候对于什么是技术，什么是码农，连C语言都以为是computer语言吗？完全一脸懵逼，再看到那些搞技术的很多都是宅男就更加排斥这个专业，于是就“荒废”了一年干了一些不知所谓的琐事。到大二因为某个人想让自己得很厉害而开始走上了技术这条道路。

学习一门技术的好处

1. 首先肯定是赚钱，程序员可以自己去接一些外包赚零花钱。当成为一个大神之后你会发现赚钱其实是很容易的事情，可能你每天打几个小时的代码之后就顶得上别人去兼职一天所赚来的钱。所以对于我这种很想独立的人来说最好不过了，再加上本人打算大四去留学，就可以通过打代码赚取自己的生活费了，不用像其它留学生去洗盘子哈哈，其实主要是因为家境一般哈哈。
2. 在作业（课程设计）上carry舍友（同学），对于我这种很喜欢帮助他人（出风头）的人来说，当你发现通过自己的努力可以独立一个人完成其他人完成不了的作业的时候是很值得骄傲的。
3. 撩妹，这是因为很多妹子对技术都不太在行，所以当她们遇到什么问题的时候你可以一本正经的帮她解决。或者打开一个小黑窗子（终端）打着一些她不懂的东西帮她修电脑的时候是很容易受到她的崇拜的，哈哈这个因人而异。
4. 装逼，学技术的童鞋一般都会顺带学习一下linux，当你用着他人不会用的操作系统时是很有成就感的，比如我这种喜欢装逼的人。
5. 当然以上那些只是一些学技术的附属品，在学技术的过程中肯定会有你意想不到的收获。

什么是前端

Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码，并增加交互动态功能，开发javascript同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。（这是百度来的，太官方了）

海豚AI学

猿辅导集团旗下的一款全新智能学习产品

64

查看详情

一开始的我以为前端就是html＋css＋javascript，但就我目前所知，前端分很多岗位，比如重构，javascript前端工程师，node前端工程师，好像腾讯还有一个前端交互设计师，当然还有全部都懂的，也就是全栈工程师了，这也是本渣渣想要达到的程度了。（个人观点）

立即学习“前端免费学习笔记（深入）”；

html、css和javascript入门

1. 一开始我是在w3school这个网站学习的，那时候除了这里也不知道在该去哪里学习，也不知道该如何去学习。不过我觉得在这里入门算是比较正常的了，虽然很多知识点不怎么全面，但是对于一个小白去熟悉一下html标签，看一下静态页面的效果还是足够的了。
2. 学习的话，先从html开始，认真学习每一一章节，然后在记事本上照着教程把代码都打一遍（熟悉）
3. 学完html了就可以开始学习css样式了，还是得按部就班得一点一点看，一点一点打，慢慢熟悉各种css选择器。但学完这里还是不够的，因为这里的教程对于很多模型还有几种定位都讲的不太清楚，所以学完这个可以再去慕课网上学习一下网页布局基础，掌握三大布局技巧——流式布局、浮动布局及绝对定位布局；学习标准文档流、盒子模型、float属性以及position属性等知识。然后再看一下固定层，现在应该基本可以了解css的工作原理了。
4. 接着再熟悉一下如何用css进行网页布局，网页简单布局结构与表现原则的分离，看完这两个视屏应该对html和css会有更深的了解了。
5. 这时候可以回过头去w3school学习css3和html5的一些知识点，还是得先照样画葫芦熟悉各种新标签。学完可以先看下面的编辑器的选择再回来。
6. 接着可以开始学习去廖雪峰博客那里学习一下javascript的基础了，看完javascript教程可以在慕课网上看一下表单验证，弹出层，Tab选项卡切换，在这里就可以开始感受javascript的神奇之处了。

编辑器的选择

1. 一开始可以简单得使用window自带的编辑器，写完后把后缀改为.html就可以在浏览器中打开了。
2. nodepad++，这个编辑器我没怎么用，不过如果很厉害的人可以用这个进行编程。
3. Dreamweaver这个编辑器强烈要求不要使用，因为很多代码都是自动生成，虽然说很方便，但是不利于学习，而且效果非常不好。在我看来这个编辑器不过是给不是程序员的人使用的。
4. sublime Test，这个编辑器是我个人所强烈推荐的，喜欢看视屏学习的可以去慕课上看sublime教程，喜欢看文字的可以去博客园sublime教程上看。
5. vim，这个编辑器虽然好用，但不推荐入门者使用，毕竟我也还不太会用。

未完待续

本来打算一起性写完的，结果发现有太多想要写的了，包括git的使用，以及javasript进阶，node.js的入门，环境的搭建，还有资源的查找等等，而且现在好困蚊子昆虫又多，所以先睡觉了，打算过两天有空再写完了，希望能对一些人有所帮助把。如果觉得不错的麻烦点下赞哈，这是我继续写下去的动力，谢谢啦！