浅谈web前端技术·入门篇(一)

前言

咳咳,近些年随着移动互联网的迅猛发展和技术爆炸,整个互联网生态链获得了空前的发展。

回顾整个进程,在html5,css蜕变的同时,js已经从一门浏览器脚本语言,发展成前后端同构,兼容全平台全浏览器的庞然巨物。前端技术不再等同于网页编辑,js不再是丑陋和低效的代名词。经历几番技术爆炸,前端技术蓬勃发展,性能得到飞跃,功能越来越强,从前端到后端,从自动化到工程化,社区生态生机勃勃日新月异。此间诞生了无数优秀框架和技术,兴衰沉浮不知凡几。

而笔者则有幸亲历了前端技术的进化史,从懵懵懂懂加入到开发者的大军,从小白逐渐长成大白,码耕不辍研习至今。期间笔者踩坑无数,承蒙互联网开的源精神才能坚持下来。笔者深感自学不易,遂将学习经验分类整理以作留念,分享给需要的朋友。

ps:前期会有较多废(xin)话(de)。

正文

参考资料与学习网站

http://www.w3school.com.cn/

w3c官方教程,前端开发者必备手册,从入门到精通就全靠它了。然鹅前端易于上手难于精通,笔者建议不要看一遍就丢下,无论你到了那个层次,这本手册里都能找到你所没注意到的知识点。多翻,多看,你总会有新的收获。

前期你并不需要其他文档来分散注意力,啃完这本你就明白前端开发是个什么概念了。

慕课网

帮助笔者走出新手村的不二指南。这里大部分课程免费,讲的很细,教学质量还是蛮高的。

极客学院

同样相当不错的学习网站。

工具

VSCode

目前最好用的编辑器了

六经注我!我注六经!

那么如何快速啃下这本手册呢?快速阅读是一门技能,这对于每天都要翻看各种文档的前端开发者尤为重要。文档和书籍的区别就是,文档是工具,能快速解决问题就好,毕竟时间精力都有限,你并不需要一上来就通读所有内容。

技巧简单来说就是:带着问题去浏览。先提出一个问题,再根据这个问题有针对性的去找到答案,用答案填补你的问题。

从W3C开始入门

不出意外,你看到的是:

用红框标出的就是第一学期的目标,本学期不需要任何前置知识,可以放心食用。

展开后按照从上至下的顺序学习即可,其他的不用管,暂时还用不到。

点亲自试一试,进入其中一个小节,会看到上图的界面。左边是源代码,右边是显示效果。其实这里官方还是搞复杂了,我的建议是把左边全删掉,点提交代码,你会发现右边也全没了,why?因为右边是左边的代码运行之后的结果,没有左边,右边也就没有了。那我们开始写第一段代码吧,在左边输入(国际惯例)

1
hello world

你会发现左边也是,因为这是原样输出,等于我们什么都没做。现在来稍加修改:

1
<b>hello world</b>

点提交,哇,字变粗了。发生了什么?我们只用 <b></b>把文字包裹了起来,他就变了,这就是html超文本标记语言。虽然严格来说不算编程语言,但我们终于开始编程之旅了。

认识一下吧, b 这就是第一个要掌握的html标签了,他能把被包裹的文字变粗。相当于word里面的加粗black。就是个文字加个标记,告诉浏览器这是粗体。

像他这样的,目前为止共有119个,我们先认识下i,u,b这三个最简单直观的,看看他们都有什么本事?

我不会告诉你答案是:斜体,下划线,加粗。

接下来自己去看就好,每天学一点。

嗯,全看一遍是略感枯燥(笔者乐在其中)的过程,而且看完也没记住啥…因为看一遍是没用的,不会用还是不会用,先留个印象,需要的时候知道上哪里找就好。他就像新华字典,会查就可以了。

从慕课网开始

HTML+CSS基础课程

这个课程免费,比w3c界面好看些,内容是一样的,入门很好用。跟着做就行…

从视频开始

传智播客html基础

哇,上古视频啦,笔者看的就是这个版本,其实还不错。

极客学院前端开发基础合集(推荐)

看了下目录,应该适合新手入门。

慕课网收费视频

慕课网收费了,希望这课程值499。