第一、 前端入门
先熟悉前端基础,再做些小项目快速上手。
前端的基础:JavaScript,HTML,CSS,然后学习jQuery。
基础入门可以按照Web前端工程师学习路径学习,看教程的同时,要多多练习。走向大神的路无他,唯手熟尔。可以模仿自己喜欢的漂亮的网站,写写页面,实现一些特效。
基础篇
1.Web – HTML基础入门
如果你想制作自己的网页,做网页设计,网站开发,那么你首先要学习的就是HTML,本教程就是入门HTML实验。
2.Web – CSS速成教程
CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
3.Web – Javascript基础(新版)
介绍 JavaScript 的语法及事件、对象、DOM 等基础知识。
4.HTML5 – HTML5基础入门
HTML5有很多新特性,本实验将做入门介绍。
5. Web – jQuery基础入门
jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器。
6.Web – Bootstrap3.0入门学习
项目篇
下面是一些有意思的前端练手小项目,如果不过瘾可以在这里找你感兴趣的全部 – 课程 – 实验楼
1.HTML5 – HTML5两步实现拼图游戏
使用HTML5和css3实现的九宫格拼图游戏。


2.Web – 网页版扫雷
相信大家都玩过windows系统自带的扫雷,今天我们来做一个网页版的扫雷。


3.Web – 亲戚称谓计算器
使用html,css,jquerymobile带你完成一个亲戚称谓计算器,帮你快速想起你的亲戚的称谓


4.Web – 打造网页版「大白」
使用 HTML 和 CSS 来打造自己的「大白」,最好对 HTML 和 CSS 有一定的了解。


5.Web – 网页版-别踩白块游戏
用最基础的html,css,以及原生的JavaScript实现一个网页版本的“别踩白块”游戏,有图有真相。


6.Web – Ajax歌词同步播放器
用JS实现动感的歌词同步播放器,仅需简短的JS代码就可以实现歌词同步播放,配合简单的几十行php既可以实现切换歌曲。全部是Ajax哦,非常简单。


7.PHP – 转盘抽奖
使用javascript、html、css、jquery和php实现一个转盘抽奖,让你窥探抽奖背后的秘密。


8.HTML5 – HTML5 本地裁剪图片
利用HTML5的File API和Canvas实现本地的图片裁剪
9. Web – SCSS(SASS)画小黄人
SCSS(SASS)画小黄人,学习CSS3。

第二、 如今的前端

近几年前端发展迅速,ES6的普及速度更是惊人,所以一定要学习ES6/7(ECMAScript 6入门)。
其次是Node.js,Node.js是服务器端的一个平台,其给前端开发提供了很多实用的工具,是如今前端开发的重要组成部分。
工具推荐:Babel,Webpack,Postcss。
框架推荐:React,Vue.js。

第三、不止前端
使用Hexo(一个Node.js平台下的静态博客)在 github page 上面搭建一个博客,通过博客写下自己学习过程中的经验和问题可以与更多的人交流,提交自己的代码到github上面保存自己的成果。写博客是一个很好的成长方式。
前端已不是从前的前端,不仅仅是切页面做特效,如今的前端项目越来越庞大,需要重视项目组织和管理,需要工程化,需要前端架构。
同时,学习一门后端语言更有利于在前端的路上走得更远。赞JacksonTian/fks · GitHub

你只需要注册一个github账号,github去关注一下,了然!


总结一些常用的前端知识体系

  1. 布局框架:

Bootstrap: getbootstrap.com/

Foundation: Foundation | The most advanced responsive front-end framework in the world.

Uikit: UIkit

Web Components:css-tricks.com/modular-

  1. 构建工具及包管理器:

Grunt: Grunt: The JavaScript Task Runner

Yeoman: The web’s scaffolding tool for modern webapps

Bower: Bower

NPM: npm

  1. 代码优化:

Google Closure Compiler:

CSS Lint: CSS Lint

JSHint: JSHint, a JavaScript Code Quality Tool

JSLint: JSLint: The JavaScript Code Quality Tool

  1. CSS预处理器

Less: Getting started

Sass: Sass: Syntactically Awesome Style Sheets

  1. 调试工具:

Chrome:developers.google.com/c

Firebug: Firebug

HTTPWatch: HttpWatch 10: HTTP Sniffer for IE, iPhone and iPad

Fiddler: Fiddler free web debugging proxy

IE Developer Toolbar:

Weinre: weinre – Home

  1. 文档工具:

JSDoc: GitHub – jsdoc3/jsdoc: An API documentation generator for JavaScript.

Jekyll: jekyllrb.com/

  1. IDE/文本编辑器

WebStorm: WebStorm: The Smartest JavaScript IDE

  1. 移动端 手势事件库:

GMU: GMU – mobile UI

Hammer.js:eightmedia.github.io/ha>

QuoJS: QuoJS

Zepto: Zepto.js: the aerogel-weight jQuery-compatible JavaScript library

Swipe: GitHub – thebird/Swipe: Swipe is the most accurate touch slider.

jQuery Mobile: jquerymobile.com/

KendoUI:Kendo UI HTML Framework

Goratchet:Ratchet

  1. 思维导图

XMind:XMind: The Most Professional Mind Mapping Software

10.模块加载器:

ESL:GitHub – ecomfe/esl: enterprise standard loader>

RequireJS: RequireJS

SeaJS:Sea.js – A Module Loader for the Web

  1. 项目管理:

Github: How people build software · GitHub

GitLab: Code, test, and deploy together with GitLab open source git repo management software

Redmine: Overview – Redmine

  1. 原型设计:

Axure RP: Interactive Wireframe Software & Mockup Tool

  1. 富互联网应用框架

AngularJs: AngularJS — Superheroic JavaScript MVW Framework

Backbone: Backbone.js

AmpersandJSAmpersand.js

Knockout: Knockout : Home

Underscore: Underscore.js

  1. 模板引擎

EJS: EJS – JavaScript Templates

Handlebars: Handlebars.js: Minimal Templating on Steroids

Jade: Jade – Template Engine

Velocity: Apache Velocity Site

  1. 测试框架

Jasmine: pivotal.github.io/jasmi

QUnit: QUnit

mocha: visionmedia.github.io/m

  1. 版本控制

Git: git-scm.com/

Subversion: Apache Subversion

Mercurial(Hg): mercurial.selenic.com/

  1. WEB框架/服务器

Node: nodejs.org/

Express: Express – Node.js web application framework

Apache: Welcome! – The Apache HTTP Server Project

Nginx: nginx news

  1. CommonJS

Component: component.io/

  1. WEB安全

XSS(跨站脚本攻击)

CSRF(跨站点伪造请求攻击)

跨iframe攻击

Clickjacking安全漏洞

  1. 代码规范

Code Guide: alloyteam.github.io/cod

编写可维护的CSS: 编写可维护的CSS

GJS编码规范指南: alloyteam.github.io/JX/

jQueryJS规范: contribute.jquery.org/s

  1. HTML模块化

html5boilerplate: html5boilerplate.com/

  1. CSS模块化

Normalize.css: Normalize.css: Make browsers render all elements more consistently.

LESS:用法 | Less.js

OOCSS:oocss.cc/Object-oriented CSS

CssReset:cssreset.com/

  1. HTML5 Canvas

D3:d3js.org/

文章来源于互联网:本科生如何系统地学习前端开发?

发表评论