如何从零开始入门前端开发

  我经常会看到很多同学在学习前端的时候比较迷茫,不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下自己的学习经验,但发现这是一个问得非常多的共性问题。
 
  作为程序员,肯定不能容忍重复无味的劳动,因此我就系统地总结分享一下我的前端学习路线,本文为「前端入门」部分,希望对你能有帮助。
 
  我还推出了「编程每日一题」,每天早上 8:16 推送精选面试和编程题,长按扫描下方二维码,即可关注订阅:
 
  前端学习是一个螺旋上升的过程,既要反复地看书,也要抓紧时间进行实战。只看书,看了就会忘,所以必须将看书和写代码相结合。只要你认真学,入门前端的话3——6个月左右就可以了。之后我还给出了前端进阶路线,帮助你提升前端技能水平。
 
  我把前端入门和前端进阶一共分为六个阶段,并对相应阶段所需要的大致的学习时间进行了标注。本文为「前端入门」,仅包括前三个阶段。想看前端进阶路线的请在?本公众号后台?回复关键字「进阶」。
 
  入门前端开发主要需要学习 HTML,CSS 和 JavaScript 三大件。之后学习前端主流框架的使用,并基于已学内容开发一个小项目进行实战。当你把这些学习并理解透彻以后,也就算真正地入门前端了。
 
  前端对于入门者相当友好,因为开始学习的时候你只需要一个浏览器,推荐 Chrome。HTML 和 CSS 可以直接运行在浏览器中,浏览器就是它们的运行环境。你也可以使用编辑器,推荐 VSCode,这是前端开发使用最多的编辑器。
 
  HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其实并不是编程语言。HTML 中文名叫做超文本标记语言,其实就是一些标签。CSS 中文名为层叠样式表,也就是一些样式的配置。
 
  首先学习 HTML,非常简单。HTML 有非常多的标签,刚入门的时候不要沉浸在记住这些标签中,你也记不住。你只需要整体浏览一遍,知道有哪些标签,各自的作用是什么,整体有一个印象就行了。我推荐跟着?MDN 的 HTML 学习路径[1]?过一遍就行。我学习 HTML 的时候还看过两本书,你感兴趣也可以看一下,这是这方面很好的书了:
 
  《Head First HTML and CSS》
 
  《HTML5 与 CSS3 基础教程》
 
  看完之后可以自我检测一下,例如常用的标签有哪些,?的作用是什么,哪些标签是行内标签,哪些是块级标签,HTML5 有什么新特性等。这里不要花太多时间,大致过一下即可,不用都记住,之后有需要再回来查就行。
 
  接下来学习 CSS,直接推荐目前最适合 CSS 入门的书:
 
  《精通 CSS(第三版)》
 
  在入门阶段,不需要将整本书一字不差地看完,你只需要抓住几块核心内容,例如选择器、层叠、继承、盒模型、Flex 页面布局和网格等。这些内容快速过一遍就行,太细节的内容不用记,之后需要了再回来查。
 
  最近我又发现了一本 2020 年的新书,《深入解析 CSS》,奇虎团工程师翻译,质量有保证。这本书讲得也非常详细,你也可以买这本不买上面那本。
 
  有了这些基础知识,你就可以进行实战了。这里推荐百度前端技术学院平台,他们这都是开源免费的前端题目,应该是为了培养前端人才,让自己能够招到更合适的人而创建的。他们的课开了四年:
 
  IFE 2015:
 
  IFE 2016:
 
  IFE 2017:
 
  IFE 2018:
 
  现在打开 IFE2018 中的?第五题[2]?开始写静态页面吧(只是举例,具体可以自己找题目做)。然后你会发现,你根本写不出来。这是很正常的,那你就去看别人的代码,看一点你就开窍了,就知道怎么写了。忘掉的属性就回去查 MDN 或者查我推荐的书,如此反复你就记住了。
 
  写完一个页面之后别急着往下写。你写的第一个页面肯定有很多问题,例如属性使用错误,代码缩进不规范等问题。这时候你应该找一个代码规范,例如?百度前端代码规范[3],根据规范重写你的代码。这个规范我只是举一个例子,自己上网搜一下,好的大公司都有自己的规范,这个不是规定死的,风格统一并且可读性强即可。
 
  重写代码之后,你再去看看别人提交的代码,这个页面是怎么写的,如果身边有技术好的前端,可以让他帮你指点一下。这时候你应该就知道如何写一个页面,并且怎样才能写好一个页面了。然后你可以自己再去找几个题目,写几个页面熟练一下。
 
  以上为阶段一内容,用时 10——20 天左右。
 
  CSS 进阶:学习 CSS 核心内容不需要很多时间,但其实 CSS 是细节非常深的一个技术。前期不要陷入其中,那么你会问如何深入学习 CSS 呢?我推荐一些很好的权威书籍,基本看这些就够了。
 
  《CSS 世界》:张鑫旭大神的书,十多年的 CSS 经验分享,进阶内容。
 
  《CSS 选择器世界》:张鑫旭大神的另一力作,深入讲解 CSS 选择器。
 
  《CSS 揭秘》:各种 CSS 奇淫巧技,主要是来开阔视野。
 
  《CSS 权威指南》:属于 CSS 的新华字典,很全面,属于一本工具书。
 
  学习了 HTML 和 CSS,可以开始学习 JavaScript 了。这也是至关重要的阶段。JavaScript 主要包括语言基础(ECMAScript)、DOM 和 BOM 三部分,如果你是初学者,会想这到底是啥,咋还三个东西。那就开始学起来,学完你就知道啦,其实没那么难。
 
  学习这部分,一定要从现代 JavaScript 教程学起:
 
  现代 JavaScript 教程是 React 官方文档中与 MDN 并列推荐的 JavaScript 学习教程。这个教程解决了现存 JavaScript 书籍最大的痛点:实时性。技术领域的书籍在实时性上一直都存在很大的问题,而这个教程却解决了这个问题。
 
  并且它为读者搭建了良好的学习路线,图文搭配,由浅入深,内容足够详细也足够全面,你就按着教程顺序学习就行了。此外,每节内容后,还给出了高质量的课后习题和解析。通过做题可以帮你检验自己的学习效果,并巩固新学到的知识。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61656.shtml

张贴在2