How I Mastered Front-End Development: A 4‑Step Book List & Study Plan

If you don't mind a bit of humor, here's a candid guide on how I taught myself front‑end development step by step.

Step 1: Intro to HTML & CSS (2 weeks)

Recommended book: Head First HTML & CSS (2nd Edition)

The book is beginner‑friendly, full of illustrations and examples; you can finish it in about two weeks by following the code examples and reproducing the small projects.

Step 2: Intro to JavaScript (3 weeks)

Recommended book: JavaScript DOM Programming Art (2nd Edition)

Although thin (≈280 pages), the book is written for web designers rather than programmers, making it accessible even with only basic C programming experience. It guides you through practical examples that let you add interactive effects to web pages.

Step 3: Intro to jQuery (3‑4 weeks)

Recommended book: Sharp jQuery

Reading chapters 1‑9 (≈290 pages) teaches you the “write less, do more” philosophy of jQuery, which simplifies many repetitive JavaScript tasks. Combine it with the previous book and online searches to overcome most obstacles.

Step 4: Review & Consolidate (6‑12 weeks)

After completing the basics, spend ample time reviewing, reproducing existing pages, experimenting with third‑party plugins, and building projects. Consistent practice is essential to turn knowledge into skill.

Additional Tool Books

JavaScript 高级程序设计 (3rd Edition) – A comprehensive guide covering both basic and advanced native JavaScript topics.

精通 CSS (2nd Edition) – Collects useful CSS techniques; although a bit dated, it still offers valuable references.

Useful Online Resources

Ruanyifeng’s personal site (http://www.ruanyifeng.com/home.html) – Explains many intermediate‑level JavaScript topics in plain language.

Si Tu Zhengmei’s blog (http://www.cnblogs.com/rubylouvre/) – Offers deep dives into front‑end concepts, occasionally mentioning Avalon.

W3School tutorials – A comprehensive reference for HTML, CSS, and JavaScript.

Zhang Xinxu’s blog (http://www.zhangxinxu.com/wordpress/) – Focuses on advanced CSS techniques.

Bootstrap Chinese site (http://www.bootcss.com/) – Provides the UI component library and its LESS source code.

p.s. LESS is a CSS‑like language that compiles to CSS.

After finishing these steps, you’ll be ready to look for front‑end jobs and start exploring advanced concepts such as workflow, MVC, MVVM, Flux, and SPA.