百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术资源 > 正文

计算机专业的学生如何系统学习前端技术?

off999 2024-10-19 07:11 19 浏览 0 评论

一个寒假回来,好几个同学都来问我或者自己开始学起了前端,前端入门虽然简单,但是想要做好很难,是一个要通十行才能精一行的工作。再这几年 MVVM 框架的大肆流行,前端已经不是以前用 jQuery 写一写就可以的时代了。于是我写下这篇文章,来给大家一个参考。

首先,请大家牢记以下几点:

  1. 前端不简单!前端不简单!前端不简单!
  2. 前端和美工不一样!不是只会 HTML、CSS、JavaScript 就行的。
  3. 程序和其他的行业不一样,经验是十分重要的,不管看多少书,都逃不过要经常的练习。
  4. 在学会使用 JavaScript 实现相同操作之前,不要使用 jQuery。
  5. JavaScript 和 Java 的关系如同雷锋和雷峰塔的关系一样,并没有什么关系!

前期准备工作

  1. 下载好 Sublime Text 3,并自行找教程安装 Package Control。安装完后使用 Package Control 安装 Sublime Text 的汉化包,名字叫做 ChineseLocalizations。之后单独写 HTML 和 CSS 的时候,使用 Sublime Text 编辑。
  2. 下载 Chrome 浏览器,目前(2017 年 3 月 9 日)最新版本为 56,请尽量安装最新版本,并设置为默认浏览器。
  3. 下载 Visual Studio Code,之后单独写 JavaScript 的时候,使用 VS Code 编辑。
  4. 下载并在本地安装 Node.js,目前(2017 年 3 月 9 日)最新版本为 7.7.1,请尽量安装最新版本。
  5. 使用 Google 搜索,不能使用 Google 的使用 Bing 搜索,不要使用百度
  6. 注册一个 Github 账号。

初学阶段

学习时间:1 个月

初学阶段主要是学习 HTML、CSS 和 JavaScript,掌握三种语言的基础语法,并且掌握基本的布局方式、基本的 DOM 操作和算法。

HTML 和 CSS

推荐跟着 iMooc 的《HTML + CSS 基础课程》学习,里面的每一小节都是指引式的教学,跟着指导学习 HTML 和 CSS 的基础语法。

链接:http://www.imooc.com/learn/9

学习完上面《HTML + CSS 基础课程》的所有内容之后,自行完成一个百度搜索的首页,要求做到位置、颜色、间距等 99% 还原。不需要点击可以搜索。

【3.12 更新】

课程中没有提到的该学习的还有 flex 布局

JavaScript

学习 JavaScript 可以上廖雪峰的网站上学习:

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

跟着目录从上往下学习,一直到 Promise。

学习的过程中可以结合练习题学习,这里整理了一些:

https://github.com/iszu/web-learning/blob/master/JavaScript%E7%BB%83%E4%B9%A0%E9%A2%98.md

正确把代码写的简单,短小。最好能一行实现。

当你学完 HTML、CSS 和 JavaScript 的基础之后,完成这么一个小练习:

实现一个简单的 TodoList

不懂啥是 TodoList 的自行 Google

限制

  1. 界面不能照抄网上已有页面的风格,可以把网上的设计稿做成你的页面,也可以自己设计
  2. 不能使用任何已有的库(如 jQuery, Bootstrap, Vue 等)
  3. 增加、删除、修改的操作执行后,页面不能刷新

基本功能

  1. 增删改查
    增删改查是指可以实现“增加”、“删除”、“修改”、“查询”四个功能。 其中“查询”不代表“搜索”,只要页面刷新后,数据能够正常显示即可。
  2. 可以储存 “内容”“是否已完成” 的状态
  3. 使用 localStorage 储存数据
  4. 界面尽可能做的好看

加分项

  1. 可以只显示“未完成”或“已完成”的条目
    你可以把它们分开显示,或者是通过按钮切换显示,或者你也可以自己想一种把它们分开显示的方法
  2. 给每一条 todo 添加 “完成日期”
  3. 在第二点的基础上,已过期的条目有不同的样式
  4. 其它更牛逼的功能

进阶阶段

学习时间:1 个月

学习完上面的课程,你就已经是一个合格的美工了,能根据设计师的设计稿实现出页面,但是还不是一个前端工程师,或者说还不是一个工程师。这一阶段你要开始接触一些作为程序员需要学习的东西。

Markdown

首先学会使用 Markdown 进行写作,Markdown 是什么,怎么样个语法;

git 版本控制

其次要学会使用 git 进行版本控制,还是刚刚的廖雪峰—— git 教程:

http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

并且把上面做的两个项目,通过 git push 到 Github 上开源,README.md 使用 Markdwon 编写。

HTTP, Ajax 和异步

学习 Ajax 的基本实现,在这个阶段你会接触到 JavaScript 的异步编程,你得自行了解什么是异步,并且会开始基础 HTTP 协议,请自行了解 HTTP 状态码,请求头,响应头等基础知识,并了解 TCP/IP,HTTP,HTTPS 协议的概念和关系。接着了解 JavaScript 的同源策略,为什么需要同源策略,以及如何跨域。

高级阶段

学习时间:6 个月以上

【3.12 更新】

这个阶段你会开始多终端前端的开发,了解响应式布局,接触前端工程化和前端框架,并开始深入学习 JavaScript 的深入内容,包括 ES6、ES7 等。

响应式布局

了解响应式布局的应用范围、基本原理。学习 em, px, rem, vh, vw 等单位的使用。

ECMAScript 6

学习 ECMAScript 6,了解 ECMAScript 和 JavaScript 的关系,具体文章可以看阮一峰的 《ECMAScript 6 入门》,另外可以参考我写的《ECMAScript6 学习笔记》。

NPM

自行找教程学习 npm 的使用,接触前端工程化,了解 Gulp, Webpack 等工具的用处,并在本地自己搭建一个工程化环境。

前端框架

自行找教程学习 Vue.js 或 React 或 Angular 等前端框架,并尝试使用这些框架搭建一个单页面应用。以下以 Vue.js 举例:

  • 学习 Vue.js 基础语法,一定要看官方的文档来学习:https://cn.vuejs.org。
  • 学习使用 Vue-cli 在本地一键搭建 Vue.js 项目。
  • 本地开发一个 Todolist 的 Vue.js 版本,同样使用 localstorage 进行存储。
  • 学习使用 Github pages 部署开发好的 Todolist,可以让别人一起使用。
  • 了解 Vue.js 2.0 的内部原理和外部思想:
    • Virtual DOM
    • 数据监听
    • render 函数
    • 单向数据流
    • Vue.js 的 Lifecycle
    • 服务端渲染的原理
    • Vuex 和 Vue-Router
    • ……

Canvas 相关

了解 Canvas API 的使用,懂得使用 Canvas 制作动画,以此来制作一些更炫酷的前端效果,如图片背景的高斯模糊等。

深入阶段

学习时间:无限

这个阶段是作为一个前端继续精进自己的一个阶段,你已经可以胜任小型项目了,但是还有一些细节需要你一直不断的学习。

前端储存

前端储存知识点:

  • 储存技术有哪些?
  • Cookie, SessionStorage, LocalStorage 有什么区别?
  • ……

History API

什么是 History API,为什么要增加这个功能?

性能优化

学习有关前端性能优化的相关知识等:

  • 如何缩短白屏时间
  • 如何提升 CSS3 动画的性能
  • ……

安全

学习有关前端的安全相关知识等:

  • 通信安全
    • 如何保障 Ajax 通信安全
  • XSS 攻击
    • 什么是 XSS 攻击
    • 如何防范 XSS 攻击
  • CSRF 攻击
    • 什么是 CSRF 攻击
    • 如何防范 CSRF 攻击
    • CSRF 攻击和 XSS 攻击的区别是什么
  • ……

兼容性

有关 IE 浏览器以及老版本浏览器的兼容性问题的学习和解决,包括:

  • HTML 标签的兼容性
  • CSS 样式的兼容性
  • JavaScript 的 API 的兼容性
  • 优雅降级与渐进增强

学习后端

等到前端学习的差不多了,可以通过 Node.js 来接触后端的开发,这里不再详述。


相关推荐

推荐一款Python的GUI可视化工具(python 可视化工具)

在Python基础语法学习完成后,进一步开发应用界面时,就需要涉及到GUI了,GUI全称是图形用户界面(GraphicalUserInterface,又称图形用户接口),采用图形方式显示的计算机操...

教你用Python绘制谷歌浏览器的3种图标

前两天在浏览matplotlib官方网站时,笔者无意中看到一个挺有意思的图片,就是用matplotlib制作的火狐浏览器的logo,也就是下面这个东东(网页地址是https://matplotlib....

小白学Python笔记:第二章 Python安装

Windows操作系统的python安装:Python提供Windows、Linux/UNIX、macOS及其他操作系统的安装包版本,结合自己的使用情况,此处仅记录windows操作系统的python...

Python程序开发之简单小程序实例(9)利用Canvas绘制图形和文字

Python程序开发之简单小程序实例(9)利用Canvas绘制图形和文字一、项目功能利用Tkinter组件中的Canvas绘制图形和文字。二、项目分析要在窗体中绘制图形和文字,需先导入Tkinter组...

一文吃透Python虚拟环境(python虚拟环境安装和配置)

摘要在Python开发中,虚拟环境是一种重要的工具,用于隔离不同项目的依赖关系和环境配置。本文将基于windows平台介绍四种常用的Python虚拟环境创建工具:venv、virtualenv、pip...

小白也可以玩的Python爬虫库,收藏一下

最近,微软开源了一个项目叫「playwright-python」,作为一个兴起项目,出现后受到了大家热烈的欢迎,那它到底是什么样的存在呢?今天为你介绍一下这个传说中的小白神器。Playwright是...

python环境安装+配置教程(python安装后怎么配置环境变量)

安装python双击以下软件:弹出一下窗口需选择一些特定的选项默认选项不需要更改,点击next勾选以上选项,点击install进度条安装完毕即可。到以下界面,证明安装成功。接下来安装库文件返回电脑桌面...

colorama,一个超好用的 Python 库!

大家好,今天为大家分享一个超好用的Python库-colorama。Github地址:https://github.com/tartley/coloramaPythoncolorama库是一...

python制作仪表盘图(python绘制仪表盘)

今天教大家用pyecharts画仪表盘仪表盘(Gauge)是一种拟物化的图表,刻度表示度量,指针表示维度,指针角度表示数值。仪表盘图表就像汽车的速度表一样,有一个圆形的表盘及相应的刻度,有一个指针...

总结90条写Python程序的建议(python写作)

  1.首先  建议1、理解Pythonic概念—-详见Python中的《Python之禅》  建议2、编写Pythonic代码  (1)避免不规范代码,比如只用大小写区分变量、使用容易...

[oeasy]python0137_相加运算_python之禅_import_this_显式转化

变量类型相加运算回忆上次内容上次讲了是从键盘输入变量input函数可以有提示字符串需要有具体的变量接收输入的字符串输入单个变量没有问题但是输入两个变量之后一相加就非常离谱添加图片注释,不超过1...

Python入门学习记录之一:变量(python中变量的规则)

写这个,主要是对自己学习python知识的一个总结,也是加深自己的印象。变量(英文:variable),也叫标识符。在python中,变量的命名规则有以下三点:>变量名只能包含字母、数字和下划线...

掌握Python的"魔法":特殊方法与属性完全指南

在Python的世界里,以双下划线开头和结尾的"魔法成员"(如__init__、__str__)是面向对象编程的核心。它们赋予开发者定制类行为的超能力,让自定义对象像内置类型一样优雅工...

11个Python技巧 不Pythonic 实用大于纯粹

虽然Python有一套强大的设计哲学(体现在“Python之禅”中),但总有一些情况需要我们“打破规则”来解决特定问题。这触及了Python哲学中一个非常核心的理念:“实用主义胜于纯粹主义”...

Python 从入门到精通 第三课 诗意的Python之禅

导言:Python之禅,英文名是TheZenOfPython。最早由TimPeters在Python邮件列表中发表,它包含了影响Python编程语言设计的20条软件编写原则。它作为复活节彩蛋...

取消回复欢迎 发表评论: