web前端开发入门(一)

web前端开发入门(一)

  • 前端开发入门
    • HTML/CSS/JavaScript
    • JavaScript
    • 总结
    • 思考和实践

前端开发入门

首先必须掌握 HTML/CSS/JavaScript 这三大基础技术栈,所谓基础就是基石。

HTML/CSS/JavaScript

HTML、CSS、JavaScript 是前端的核心基础,所以必须要掌握。HTML 主要就是HTML5,相比之前的版本,新增了很多新特性。CSS 则主要是 CSS3 了,相比以前的版本,主要就是作了模块化的拆分。JavaScript 其实分为三部分:ECMAScript、DOM和 BOM。ECMAScript 简称 ES,是 JavaScript 的核心,目前最新版本已经是ES2017,是 ES6 的第三个小版本。DOM 是文档对象模型,其实就是一套访问和操作 HTML 所有元素的 API。BOM 则是浏览器对象模型,用于访问和操作浏览器的一些特性。
.
HTML/CSS/JavaScript 的学习资源比较多,我推荐几个。首先是 w3school 的系列教程:

  1. HTML:该教程也包括了 HTML5 新增的内容,但讲得没下面专门讲解 HTML5 的细,所以该教程我建议只看 HTML 基础教程和表单部分即可
  2. HTML5:该教程讲解了 HTML5 的新特性,所以还需要学习下面的 CSS3 的教程
  3. CSS3:该教程内容比较少,只包含 CSS3 新增的特性
  4. JavaScript:该教程只是讲解了非常基础的语法

不过,我更推荐菜鸟的教程,内容虽然也是来自 w3school,但部分内容比 w3school 的更详细,以下是教程地址:

HTML:http://www.runoob.com/html/html-tutorial.html
CSS:http://www.runoob.com/css/css-tutorial.html
JavaScript:http://www.runoob.com/js/js-tutorial.html

JavaScript

HTML 和 CSS 只要根据以上教程学习就足够了,但 JavaScript 则是不够的,以上教程缺少了 ES6 及更高版本的内容,后面我再推荐其他学习资源进行补充。

视频教程方面,慕课网、极客学院等都有基础课程,但都是收费的,而且价格不菲,性价比实在太低。比如慕课网的《前端小白入门》+《前端进阶:响应式开发与前端框架》两套课程的组合套餐就要 988 元了,而内容还没有上面免费教程的齐全。如果真要看视频,那我会推荐网易云课堂的一些免费课程:

  1. 从零玩转HTML5前端+跨平台开发
  2. H5/web前端开发|HTML5+CSS3
  3. 李炎恢JavaScript教程 第一季

书籍方面,HTML 和 CSS 基础方面的,首推《Head First HTML与CSS》,编排设计通俗易懂,就连完全零基础的非 IT 人员都适合学习。不过,Head First 这本书没有涉及到 HTML5 和 CSS3 的更新内容。不过,Head First 有另一本书讲解了 HTML5,叫《Head First HTML5 Programming》,不过,要熟悉 HTML5 的用法,还是要先掌握一点 JavaScript 基础。CSS3 方面 Head First 则没有相应的书籍,因此,我推荐另一本《CSS3实用指南》。

JavaScript 方面,我首推《JavaScript高级程序设计》这本书,书中内容由浅入深,也是写得通俗易懂,适合入门。另外,有些人会推荐《JavaScript权威指南》,但这本书主要还是一本字典书,略显晦涩,其实不适合入门。不过《JavaScript高级程序设计》还是基于 ES5 的,为了补充 ES6 的内容,推荐阮一峰的《ES6标准入门》,目前是第3版,内容已经覆盖了最新版本的 ES2017。另外,因为这是一本开源教材,所以也可以直接去阮一峰的官网免费阅读,以下是链接地址:

  • ECMAScript 6 入门:http://es6.ruanyifeng.com/
    另外,有一套系列书叫《You Don’t Know JS》也要推荐给大家,也是开源教材,这套书会让你对 JavaScript 知其然也知其所以然,也包含了 ES6 的内容,不过这套书面向初学者的,只适合用来进阶。也出版了中文翻译的书籍,叫《你不知道的JavaScript》,目前只有上卷和中卷两本,据评价,上卷的翻译还不错,但中卷的翻译则一般般,下卷不知道什么时候才出版。以下是系列书的github地址:
  • You Don’t Know JS:https://github.com/getify/You-Dont-Know-JS
    那么,这么多学习资源,我们应该如何学习才高效呢?其实,和前面学习 Android 和 iOS 时一样,我们主要还是为了了解各种核心概念,我们不可能在短期内熟悉所有知识点,因此,我还是和前面的文章一样,也罗列出一些核心的知识点吧。
  • HTML基础:以 w3school 或菜鸟的 HTML 教程为主,熟悉各种常用标签的用法,尤其是标题、段落、链接、图像、表格、列表、表单、区块、布局、CSS、脚本等
  • CSS基础:同样以 w3school 或菜鸟的 CSS 教程为主,熟悉 CSS 语法和选择器、样式、框模型、定位等模块的内容
  • JavaScript基础:首先作为一门编程语言,语言本身的基础肯定要熟悉,包括数据类型、变量、运算符、控制流、函数、对象等;另外,也要熟悉 DOM;BOM 简单了解下就可以了,使用场景不多
  • HTML5:HTML5 的新特性肯定要了解,内容其实也不是很多,核心的就是 canvas、svg、对多媒体的支持、Web 存储、应用缓存、WebSocket等
  • CSS3:CSS3 也是要熟悉那些新特性,最核心的就是弹性盒子
  • ES6:ES6 自然也是要熟悉的,学好阮一峰的《ECMAScript 6 入门》教程就足够了

总结

前端开发入门,要学的技术栈真的很多,除了最基础的 HTML/CSS/JavaScript,还包括 HTML5、CSS3、ES6,还要学习目前流行的 JavaScript 框架,我的建议是从 Vue 开始,容易入门,要掌握的技术栈包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack,另外,node.js 也要了解点基础。最后,实战项目我推荐了一个简单的小项目和一个完整的 vue 版饿了么项目。

思考和实践

前端开发的编程思想和移动开发有什么不同?如何将前端的架构思想应用到移动开发上?最后,还是要独立完成一款 Web 应用。

你可能感兴趣的:(前端开发)