title: 个人 Web 前端学习路线
date: 2015-8-28
categories:
- 术业专攻
tags:
- HTML
- CSS
- JavaScript
- Git
permalink: Front-End-Study
original: 
temp: 入门 basic 熟悉 intermediate 进阶 advanced 精通 proficiency

---

<h2 id="intro">前言</h2>简单记录个人学习 Web 前端过程中使用的教程和书籍。仅列出较系统和专业化的资料，不包括网上零散的文章和教程。

 - **资源样式**：[完成日期]. [教程标题（带链接）] `[投入时间]`；
 - 资源简介 + 个人学习方式 + 有关配图。

**PS: 学习前端前的一些个人相关信息和经验：**

 1. 非计算机类专业，文科生，编程经验基本为零；
 1. 能流畅阅读大部分英文资料；
 1. 经常折腾各种系统、软件和手机 APP；
 1. 善用利用搜索解决各类问题；
 1. 追求“秩序”，喜欢把各种事物变得井井有条。

<!-- more -->

## 入门级别 Basic `35h`
### 2015-08-10. [Codecademy: HTML & CSS][1.1] `10h` 
Learn how to create websites by structuring and styling your pages with HTML and CSS.

 - 理解所有背景介绍内容，不看提示通过所有测验。

![Codecademy-HTML][1.2]

[1.1]: https://www.codecademy.com/en/tracks/web
[1.2]: /resources/Codecademy-HTML.jpg

### 2015-08-31. [Codecademy: JavaScript][1.3] `20h` 
Learn the fundamentals of JavaScript, the programming language of the Web.

 - 理解所有背景介绍内容，不看提示通过所有测验。

[1.3]: https://www.codecademy.com/en/tracks/javascript

### 2015-11-05. [Code School: Try Git][1.4] `2h`
Learn how to use Git by reviewing the basic concepts of Git version control. Try out this introductory course that was created with GitHub.

 - 熟悉介绍的基础概念和基本命令

 [1.4]: https://www.codeschool.com/courses/try-git

 ### 2015-11-11. [Codecademy: Make a Website][1.5] `3h`
 Build a recent version of Airbnb's home page and learn the fundamentals of web development in the process.

 - 不看提示通过所有测验。
 - 教程里用的是 Bootstrap，是个不错的 CSS 样式集，写页面挺方便，不过我还是更喜欢自己写样式，这个看看源码参考好了。

[1.5]: https://www.codecademy.com/en/skills/make-a-website