or

我的Web前端学习之旅-2

2018年8月23日
更新: 2019年5月4日
Let's Go!

0. 工具准备

  1. (可选,强烈建议必选)电脑安装 有道词典:学习中碰到英文是不可避免的,尤其是编程。碰到陌生词汇就去查询不要畏惧,当然了,查询结果仅供参考,因为计算机领域的很对词汇和日常使用的意思可能会有差别的。若对有些内容依然不理解,欢迎email共同探讨呦。
  2. (可选)电脑安装笔记本工具:如果你不喜欢手记笔记,则下载一款电脑笔记本十分必要,目前我个人使用的是微软的 onenote。也可以选择手记,但是真得不推荐,因为初期学习记录的东西肯定是会非常多的,但是这些东西大多在你学习到一定时间后就会变成“废品”,所以记录到电脑上可以很方便的更新,也节省时间,并且手机上随时可看。
  3. (必选)电脑安装 chrome浏览器火狐浏览器,或者是任何的非IE浏览器(在我没搞前端前,我确实不在意浏览器用哪个,但现在我不是会妥协了)。
  4. (必选)代码编辑器的选择:
    • 在线编辑器
      • 初期学习,大家应该想更专注于代码练习。使用在线编辑器的好处就是只需要敲写代码即可,不用进行任何额外的操作,比如文件建立、存放、页面刷新等。在线编辑器现在也是种类繁多,为了避免选择困难症,直接推荐选用codepen
    • 本地编辑器
      • 如果觉得自己眼神很好,使用电脑自带记事本其实就够了(手动滑稽)
      • 当下web开发很热门的一款编辑器就是 visual studio code(完美支持中文哦):该款编辑器有着丰富的插件,并且可以高度自定义。大家下载安装好后就正常使用即可,编辑器会自动帮你检测文件后缀并给你提供相应的插件推荐,我们只需点击下载即可。
      • 其他可选的编辑器:sublime text3,atom,webstorm(我的最爱)
  5. (2018年10月21日补充)关于将vscode(visual studio code的简称)语言设置为中文的方法:
    • 进入vscode,键盘敲击ctrl+shift+x进入扩展下载市场
    • 在搜索栏输入"chinese",过一会下方会列举出一个描述信息为 中文(简体) 的插件然后install它
    • 完毕后重启vscode或点击reload
    • 如果语言已经变成中文,则无须下面的步骤了,直接收工敲码去
    • 键盘敲击ctrl+shift+p,然后输入 "display language",然后回车
    • 将打开的文件里的"en"改成"zh-CN",然后ctrl+s保存
    • 重启,收工
    • ps: 以上过程也是各位接触的(第一个)vscode插件使用了,在插件市场里有着无数炒鸡好用的插件哦,未来大家慢慢发现吧。我在这篇文章里进行了收录(由于vs code不是我的主力开发编辑器,可能更新很慢,大家网上一搜一大把,搜索关键词为"vs code插件")

2. 代码结构

当你使用在线编辑器时,会发现每个编辑器的布局都是这样的: 20180823P1 从上图可清楚的看到,三个窗口里要写的就是在Part1提到的三种语言,剩下一个白色窗口是代码运行结果的预览窗口。

当你使用本地编辑器时,就会稍有复杂了,那就是文件的建立:html,css,js三种语言你可以把它们统一写在一个文件后缀为 .html 的文件里,也可以为他们单独建立文件,即分别建立后缀为.html, .css, .js 的三个文件,然后使用linkscript标签将这些文件引入进来。当写好代码后,只需要用用浏览器打开.html结尾的文件即可,你会在浏览器内看到运行结果。

PS:在保存自己写的代码文件时,建议在某个盘符下单独建立一个文件夹,比如my_code,然后为你的每次代码再单独建立文件夹,比如test1,test2,切不可随意的存放文件,这不是一个好习惯。另外希望你的存放路径里不要带有中文,虽然目前不会有太大影响,但是在将来你肯定会因为路径带有中文而碰到大坑。

3. 开始吧

学习中100%会碰到很多的英文,不要害怕,不要方张,勇敢面对,英语学的差并不等于代码能力差!另外就是,在学习会发现学的东西十分混杂,一会这个一会那个,也不必担心,这只是个时间问题,慢慢的就会有了条理性,唯一操心的就是自己能不能坚持了。学习中不懂了请务必先网上搜索而不是直接问别人! 当碰到了自己觉得不错的网站可以保存书签。

  1. 以下列举并非官方、权威、全面,只是将我目前有印象的中文资源列举了出来。另外,以下内容并不代表每个都要学习,也不是每个都要学完,在学习到一定程度后,你会发现自己已经可以主动性地去学习自己需要的内容了。
  2. 三者可交叉学习。
  3. 个人建议先从视频下手学习。
  4. 不推荐付费购买学习资源,不要盲目被学习中碰到的任何广告所吸引!! 一切你想学的内容都可以在网上找到!在自己对大致体系有了了解之后,在思考自己需要进阶哪方面的内容,再去理性购买。(网上公开课可以听听,到最后的广告阶段撤离即可) (处在知识付费时代,我这么说不会有人打我吧...)

HTML

  1. (视频)慕课网-html
  2. (视频)我要自学网-html
  3. w3cschool-html ==> w3cschool-html5
  4. 菜鸟教程-html ==> 菜鸟教程-html5

CSS

  1. (视频)慕课网-css
  2. (视频)我要自学网-css
  3. w3cschool-css ==> w3cschool-css3
  4. 菜鸟教程-css ==> 菜鸟教程-css3

JS

  1. (视频)我要自学网-js
  2. (视频)慕课网-js
  3. w3cschool-js
  4. 菜鸟教程-js
  5. 廖雪峰-js

Mixed

  1. fcc中文站-交互式学习
  2. mdn-不建议零基础阅读,该网站也将是我们未来的“字典网站”

后记

在上述内容的学习中,你一定会接触到除了htmlcssjs之外的内容,比如git github nodejs react vue,这些东西也将是后期提升中需要去了解学习的内容。此外,你也会不断地知道更多更多web相关的网站,阅读到很多相关领域的大神们的文章,你的浏览器书签可能会日益增多... 最后我就扯一句我深有感触的至理名言: 请不要做一个收藏党!脑子才是它们的最好归宿!(我深受其害,却仍不曾逃离)

or