大家好，我是山山而川，一位零基础转行前端的小白，很荣幸受 freeCodeCamp邀请给大家分享一下有关零基础学习前端的内容。为什么写这篇文章呢我是95年的，非CS专业，很早之前就接触到了编程这一块（当14年IOS开发特别火），但是那个时候并没有太多意向或兴趣去学深入了解，只是觉得看着挺有意思看过几眼就没后续了，现在想想挺遗憾的。如果当时身边有个人可以指点一下，说不定现在也是个六七年的“老程序员”了。不过现在也不算太迟，现在正在学习前端转行中，完完全全的零基础，所以踩过的坑有很多。相信有不少跟我类似经历的伙伴在这个过程中应该会有不少困惑，比如：网上教程这么多，到底该学哪个？看不懂怎么办？学到什么程度才能找到第一份工作呢？那么我们今天的主题就是给大家分享一下我总结的学习路线。前端入门概述首先说明一下，前端学习是一个螺旋上升的过程，既要反复地看书，也要抓紧时间进行实战。只看书，看了就会忘，所以必须将看书和写代码相结合。然后大家最关心的入门前端开发到找工作3～6个月左右就可以了，主要需要学习 HTML、CSS 和 JavaScript 三大件。之后学习前端主流框架的使用，并基于已学内容开发一个小项目进行实战。以上内容学习并理解透彻以后，就算真正地入门前端了。当然如果是全职学习，那么时间可以缩短为3-4个月，反之零零散散的学习可能6-8个月，甚至一年之后，具体的学习时间大家自己去规划，重要的是合理计划时间及坚持不懈执行（这点很重要，很多人就是死在了这里）。下面是具体的学习教程我这篇教程是从有想法转前端开始就从各种渠道汇总总结的，期间不知道入了多少坑，比如百度随便搜索下前端教程、前端怎么学，然后立马一大推营销号推荐免费领取基础课程，其实多看几家你就知道本质上都是给你卖课的；另外有很多大佬推荐的教程要么是时间比较久了（意味着教程老了），要么就是比较零散，不系统（作为正在学习的我来说，能稳定找到第一份工作就是好教程），所以一下内容都是我整理了好久才总结的，综合了微信公众号作者“技术漫谈”丁哥、“若川视野”川哥、运营转前端成功的年年、网上各种资源等总结而成的，希望可以帮助到大家（几位大佬和公司前端同事一致认为，以下内容好好学，全部学完，找到一份工作不难。前提是你坚持下去）。阶段一：HTML + CSS一、学习资料首先是前端三大件 HTML、CSS 部分的学习，入门阶段不需要学的多深入，只需要抓住几块核心内容，快速过一遍就行，例如选择器、层叠、继承、盒模型、Flex 页面布局和网格等。太细节的内容不用记，之后需要了再回来查。1、《Head First HTML and CSS》：这本书比较简单，适合新手入门2、MDN：学习 HTML 学习路径部分，整体浏览一遍，不需要死记硬背3、W3school：学习 HTML 部分，整体浏览一遍，不需要死记硬背4、《HTML5 与 CSS3 基础教程》（第8版）：这本书里面有非常多 HTML 标签，整体浏览一遍，不需要死记硬背，知道有哪些标签以及各自的作用是什么，整体有一个印象即可。5、《精通CSS（第3版）》 或 《深入解析CSS》：第一本书是目前最适合 CSS 入门的书，大家可以优先考虑看这个；第二本书是2020年的新书，内容和第一本差不多，奇虎团工程师翻译质量也有保证，讲得也非常详细，不想看第一本看这本也行。二、代码实战学习完了 HTML、CSS，下面就进入到代码实际练习和巩固阶段了，freeCodeCamp可以很好的帮我们实现，在freeCodeCamp的“响应式网页设计”部分，可以把前面学到的知识整体练习一遍，最后还有五个小项目练习来确认基础掌握情况。在做项目练习的时候如果发现静态页面写不出来很正常，可以先去看别人写的代码，看完后就知道怎么写了。全部写完之后可以根据百度前端代码规范，重写这五个项目的代码。重写之后，再跟原网页代码对比对比，看看还有哪方面的不足。阶段二：JavaScript一、学习资料学习完HTML、CSS之后我们就可以进入JavaScript的学习了，JS非常重要，也有一定的学习难度，同学们在这里花费的时间可能会有点多，JS主要包括语言基础（ECMAScript）、DOM 和 BOM。这个时候我们肯定不清楚这到底是是什么东西，可以用作什么，没关系，先学就是咯。1、现代 JavaScript 教程：JS 推荐从这个教程学起，这是我无意间发现的一个宝藏网站，这个网站是依托于 learn.javascript.ru 而来的（中文翻译的主要主要负责人是leviding，阿里前端工程师，很强），而 learn.javascript.ru 是俄罗斯最大的 JavaScript 教程和学习平台之一，质量有保障，而且是在线学习，教程都是实时更新且免费的，不像书籍可能存在看的技术过时的问题。现代 JavaScript 教程是 React 官方文档中与 MDN 并列推荐的 JavaScript 学习教程，学完整个教程，相当于已经学完了所有JavaScript内容。2、《JavaScript 高级程序设计（第 4 版）》：这本是速成红宝书，很经典，推荐先看现代 JavaScript 教程再看这本红宝书，或者搭配着看。红宝书可以和现代 js 教程相互补充取长补短，同时还可以巩固知识点，加深对 JavaScript 的理解。书中有大量 API 的章节，不用死记硬背，浏览一下就行，用到再回来查。（1）第 1~11 章讲的是语言特性，必须掌握；（2）第 12、14-17 和 23-26 章是重点内容重点看；（3）第 13、19 和 21 章是次重点内容，尽量看一下；（4）第 28 章是最佳实践，看完前面内容后来学习如何写出更好的代码；（5）第 18 章 Canvas、第 20 章 API、第 22 章 XML 和第 27 章工作者线程，可以在学有余力或者用到的时候看一下，不是初期重点内容。3、《JavaScript DOM 编程艺术》：DOM 学习书籍，主要讲 DOM 知识，以及通过实战深入理解相关知识，其实这本书的内容现代JS和红宝书都讲过了，有时间的同学可以考虑看一下。二、代码实战又到了我们的代码实战环节，学以致用理论和实践相结合才是王道，这个时候fCC依然是我们的首选。1、freeCodeCamp：练习“JavaScript 算法和数据结构”部分，做完后同样有5个练习项目实战，希望大家可以完成。2、百度前端技术学院 2021：这是百度前几年推出的免费前端入门教程，里面有非常详细的HTML、CSS和JavaScript教程，不过现在正在内容更新，暂时还打不开，练习到这一步的同学发现还不能打开的话可以去Github上找（GitHub上有20年前的内容）阶段三：入门前端框架前端的主流框架目前主要为 React，Vue 和 Angular。一般是在 React 和 Vue 中选一个。React 的开发体验更偏向于通过写原生 JS 的那种方式写页面，使得逻辑和页面分离开来，要求你有较好的 JavaScript 基础。Vue 则引入了模版，相对来讲偏向通过模板的方式也就是调用 API 来写页面（当然现在 Vue 3.0 也正在跟进 Vue 的 JSX 写法，类似于 React），将很多实现封装成了 API，需要记住并调用 API 来进行开发，因为很多都是封装好的，所以学习起来较为简单，相对的编程的感觉会弱一些。推荐先学React，对找第一份工作比较友好，下面是详细的教程一、React 学习 + 实战（推荐先学）在这个过程中你会学到很多知识，会用到 React 的高阶知识，把 React 官方文档中的高级指引，API Reference，Hooks 等部分的内容学完。还会学到 React Router，Redux 等内容。会学到从零开发一个完整项目，从项目配置到组件拆分，到项目打包和上线的完整流程，还会学到 React 框架的一些底层源码级知识。1、入门：入门推荐学习哔哩哔哩“尚硅谷2021版React技术全家桶全套”视频，播放量很高，老师讲解的不错，可以用来入门学习。2、React 官方文档：先学习文档中核心概念部分，然后跟着官方文档写出文档中的井字棋，最后再自己写一个 Todo App。3、慕课网：下面到了实战环节，可以考虑慕课网的付费课程“React 17 系统精讲 结合TS打造旅游电商平台”，价格不高，既可以当做代码练习，又可以作为简历上的项目点。二、Vue 学习 + 实战1、Vue 官方文档2、慕课网：（1） Vue 2.5 入门（2） Vue 2.5 -> 2.6 -> 3.0 开发去哪儿网 App 从零基础入门到实战项目开发阶段四：项目实战恭喜你，能够学习到这步，离找工作就不远了，现在就是利用时间多做几个项目，放到个人简历上，可以做个自己的个人博客，租个服务器上线，这样的优势是博客风格完全由你个人来打造，可以让面试官看到你的实战能力，且不同于常见的电商网页项目（主要这个大家都在做）。1、独立完成个人博客的上线2、自己选择做其他项目阶段五：刷算法题 + 面试题到这步就可以刷刷面试题找工作了，推荐以下刷题工具：1、小程序：高级前端面试，特别推荐，题型比较新颖，题库里的题也适合面试梳理，选择题不算特别多。2、小程序：前端面试星球，有些题型有点多，涉及的面挺广的，可以后面慢慢刷。3、牛客网：题型偏老，有时间可以刷刷。谢谢你阅读这篇文章，私信我【资料】领取最新Python学习资源 Happy coding!
本文出自快速备案，转载时请注明出处及相应链接。
