如何自学前端找到一份工作

建议先看下鱼皮的两个视频 + 如何学习技术文章：

1. https://bcdh.yuque.com/staff-wpxfif/resource/rito86b49l53w1w2（前端 1 小时 - 1 小时 16 分钟）

2. https://www.bilibili.com/video/BV1nh411e7oG，超级详情的前端学习路线

3. https://bcdh.yuque.com/staff-wpxfif/resource/nxkhhu

4. https://www.bilibili.com/video/BV1Ax4y1m72q

下面分享一下，一个新人成为前端开发工程师的路线。可以将学习前端开发类比为建造一座房子。

课程特点：我会推荐视频教程和文字教程，这样无论是喜欢视频还是文字都可以无痛学习（我推荐在后面学习过程中渐渐转为文字教程）

学习目标：

1. 构建一个网站，并将其发布到网络上

2. 写出一份好的简历，并找到满意的工作

搭建前端开发环境

工欲善其事，必先利其器。所以搭建一个好的开发环境能让学习更加高效

编辑器：（推荐 vscode）

• Visual Studio Code：一款轻量级但功能强大的源代码编辑器，支持 Windows、macOS 和 Linux 平台。它内置了对 JavaScript、TypeScript 和 Node.js 的支持，并通过丰富的扩展生态系统支持更多语言和运行时环境。

• webStorm：WebStorm 是由 JetBrains 开发的一款强大的商业化集成开发环境（IDE），专为现代 JavaScript生态系统设计，支持如 React、Angular 和 Vue.js 等前端框架和库。它提供了诸如代码自动完成、重构、强大的调试器以及与各种构建工具和版本控制系统的紧密集成等高级功能，以提升 Web 开发的效率和体验。

游览器：（推荐 chrome）

• edge：微软的，基于 Chromium

• firefox：火狐

• chrome：最推荐，谷歌的

代码版本控制工具 Git 和 代码托管平台 Github

git 和 github 的关系，就像图书管理系统和图书馆，git 管理代码，GitHub 存储代码 在真正开始写代码之前，我建议先把 Git 和 Github 了解一下， 学习 Git 基础，掌握版本控制的概念和基本操作

1. 视频教程：【GeekHour】一小时Git教程_哔哩哔哩_bilibili

2. 文字教程：介绍 - 《阮一峰 Git 教程》 - 书栈网 · BookStack

使用GitHub进行代码托管和协作开发：

1. 视频教程：『教程』一看就懂！Github基础教程_哔哩哔哩_bilibili

2. 文字教程：GitHub 入门文档 - GitHub 文档

如果有时间最好看一下这两个教程：

1. Linux 系统的登录工具 SSH：https://wangdoc.com/ssh

2. Linux 命令行 Bash 的基本用法和脚本编程：https://wangdoc.com/bash

为什么要先学会使用 git 和 github 的原因是： 学习的过程就是一个不断写代码的过程，那么有一个工具帮你记录你写的所有代码，这不仅仅有利于找工作中，别人能快速看到你的代码提交记录，还能让你每天提交代码后，能清晰感受到自己的进步，满满的成就感。

前端三大基石

HTML

构建网页的结构。类比于建造房子的框架

• 视频教程：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

• 文章教程：HTML 语言简介 - HTML 教程 - 网道

相关资源：

1. MDN：使用 HTML 组织网站内容 - 学习 Web 开发 | MDN

2. 菜鸟教程 ：HTML 教程 | 菜鸟教程

从基础标签开始学习，一定要多敲代码，对每个标签都有一些印象，如果在开发中遇到问题？那推荐使用 AI 工具进行询问，推荐 AI 工具如下，后面不再重复：

1. 鱼聪明 AI：yucongming.com

2. devv.ai 更适合程序员的 AI 工具

3. 通义千问（他还有对应的 vscode 和 webstorm 插件）

CSS

网页样式设计，包括布局、颜色、字体等。类比于房子的内外装修

• 视频教程：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

• 文章教程：CSS 教程 | 菜鸟教程

相关资源：

1. 一份 css 规范和代码风格指导：GitHub - chadluo/CSS-Guidelines: a zh-CN translation

css 其实还是很复杂的，学习过程中，不需要把所有都记住，只要留个印象就好，后面遇到了知道使用哪种属性实现即可 如果你按照顺序学习完 HTML 和 CSS 后，那你可以稍作休息，检验一下是否真的掌握了这些知识，这里有两个任务：

1. 像玩游戏一样通关 freeCodeCamp中【响应式网页设计认证】关卡

2. 自己在不看视频教程的情况下，自己独立完成一个静态网站的开发（例如：仿京东 pc 端）。给大家看一下github star 很多的一个 纯 HTML + CSS 的网站：GitHub - codewithsadee/vcard-personal-portfolio: vCard is a fully responsive personal portfolio website, responsive for all devices.

完成这两个任务，我们要开始攀登第三座大山：JavaScript，也是编程语言排行榜常年前十的语言，有图为证：

JavaScript

实现网页交互的脚本语言，让网页“活起来”的魔法，类比于房子的电气和智能家居系统

• 视频教程：黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_哔哩哔哩_bilibili

• 文章教程：

1. 基础：JavaScript 教程 - 网道

2. es6：ES6 入门教程

相关资源：

1. mdn 学习 JavaScript：JavaScript - 学习 Web 开发 | MDN

2. freeCodeCamp JavaScript 通关：https://www.freecodecamp.org/chinese/learn/javascript-algorithms-and-data-structures-v8/

JavaScript 是前端核心技术，所以一定要多敲代码练习。遇到问题可及时询问 AI，或者其他人。如果有时间可以看以下书籍，提高 JavaScript 水平（非必需）：

• JavaScript 高级程序设计

• 你不知道的 JavaScript

• JavaScript 语言精粹

• Eloquent JavaScript

• JavaScript 权威指南

当学习完前端三件套后，这时候可以把之前做的静态作品添加上一些事件，让网站“活”起来。这时候如果你真的使用原始的技术（HTML，CSS，JavaScript）来做网站开发，你会发现开发好慢，尤其是开发一个复杂的网站的时候那就更慢，并且代码不好维护。那这时候就迫切需要提高效率的框架，那接下来就可以学习一套框架，来感受框架的魅力。

现代前端开发

必备环境：包管理工具

在学习框架之前，需要先学习一下包管理工具的知识，例如：npm ， yarn，pnpm 等等，要学习包的基本使用，包括安装、更新和管理依赖。学习过程中，你会发现你需要切换 node 版本 和 npm 镜像，推荐：

• node 版本管理：https://juejin.cn/post/7000652162950758431

• npm 镜像源切换：https://juejin.cn/post/7327937033321463820

前端框架

Vue（推荐学习）

学习 Vue 就学习 Vue3 就好，并且 Vue 2 也不再维护

• 视频教程：https://www.bilibili.com/video/BV1Za4y1r7KE

• 文字教程：Vue.js - 渐进式 JavaScript 框架 | Vue.js

• 组件库推荐：element plus：一个 Vue 3 UI 框架 | Element Plus

vue 我觉得官网就是最好的教程，也是最好的文档，没有之一，vue 更容易上手，推荐学习 Vue

vue 服务端框架学习（非必需）：

nuxt：Nuxt 中文站 - 直观的Web框架 Nuxt3文档 · Nuxt

有能力的请阅读英文文档：Nuxt: The Intuitive Vue Framework · Nuxt，

因为文档更准确，是最新的

参考资源：

1. Vue 源码学习：https://juejin.cn/post/6925668019884523534

2. vue 社区两个大神：

• 尤雨溪：Evan You

• antfu：Anthony Fu

React（目前大厂使用最多的）

• 视频教程：黑马程序员前端React18入门到实战视频教程，从react+hooks核心基础到企业级项目开发实战（B站评论、极客园项目等）及大厂面试全通关_哔哩哔哩_bilibili

• 文字教程：React 官方中文文档

• 组件库推荐：ant-design：Ant Design - 一套企业级 UI 设计语言和 React 组件库

新官方文档是 dan 大神重新写的，非常好，有条件的看英文版：React

react 服务端框架：

Next.js：Next.js - React 应用开发框架 | Next.js中文网 ，

有能力请阅读英文文档：Next.js by Vercel - The React Framework

参考资源

1. 阮一峰的 React 体系教程：React 技术栈系列教程 - 阮一峰的网络日志

2. 极客时间 React hooks 课程：React Hooks 核心原理与实战_王沛_前端_React Hooks_函数组件_面试_实战_原理_开发-极客时间

3. dan 神：overreacted — A blog by Dan Abramov

无论学习 Vue 还是 React ，学完后，都应该使用对应技术完成一个单页面应用，例如搭建自己的 blog，然后发布到互联网，哦对了，发布到互联网，并作为简历的个人项目。可以参考以下文章和视频教程：

1. 手把手带你从0搭建个人网站，小白可懂的保姆级教程 | 2种方法让你拥有个人博客，程序员自学编程必备_哔哩哔哩_bilibili

2. 项目下载、运行、配置、构建、打包、部署：全步骤实战演示。前后端分离式项目实战部署（含nginx、tomcat部署配置）视频教程_哔哩哔哩_bilibili

3. 用最简单的方式部署一个前端项目（全流程） - 知乎

构建工具和 CSS 预处理工具

构建工具

webpack（推荐学习）

• 视频教程：尚硅谷Webpack5入门到原理（面试开发一条龙）_哔哩哔哩_bilibili

• 文字教程：深入浅出 Webpack · 深入浅出 Webpack

• webpack 官网：webpack

• 阮一峰的 webpack demo 代码：GitHub - ruanyf/webpack-demos: a collection of simple demos of Webpack

vite

• 视频教程：前端构建工具（webpack&vite）教程 李立超_哔哩哔哩_bilibili

• 文字教程：开始 | Vite 官方中文文档

vite 是新一代打包工具，更快更简单，目前 vite 底层打包依赖于 gulp（打包工具），所以了解一下 gulp 对使用 vite 有帮助 学习目标：从 0 到 1 使用构建工具来打包发布一个项目，例如：写一个自己的脚手架，写一个自己 npm 包等等

CSS 预处理工具

less

• 视频课程：『CSS预处理器』7 分钟极速入门 LESS_哔哩哔哩_bilibili

• 文字教程：https://juejin.cn/post/6844903520441729037

• 官网：Getting started | Less.js

sass

• 视频课程：【Udemy排名第一的高级CSS课程】Advanced CSS and Sass - 高级 CSS 和 Sass：Flexbox、网格、动画（中英文字幕）_哔哩哔哩_bilibili

学习课程的以下章

• 文字教程：SASS用法指南 - 阮一峰的网络日志

• 官网：Sass: Syntactically Awesome Style Sheets

学习目标：使用预处理语言来重构项目，提高 css 编写效率

进阶学习

在前面学习中，你肯定会发现你有些知识没了解，例如：typescript，node.js，eslint，prettier 等等；这写知识现在也很重要，是开发大型项目必备的技能，接下来让我们开始吧！

TypeScript

• 视频教程：尚硅谷TypeScript教程（李立超老师TS新课）_哔哩哔哩_bilibili

• 文字教程：TypeScript 教程 - 网道

参考资料

1. 冴羽老师的 ts 课程：TypeScript中文文档_入门进阶必备

2. ts 入门教程：TypeScript 入门教程

学习目标：将项目使用 ts 进行重构

Node.js

• 视频教程：尚硅谷Node.js零基础视频教程，nodejs新手到高手_哔哩哔哩_bilibili

• 文字教程：Express/Node 入门 - 学习 Web 开发 | MDN

参考：

1. 阮一峰的 node 教程（未完结）：GitHub - wangdoc/nodejs-tutorial: Node.js 教程

2. node 极简教程：极简 Node.js 入门教程 · 语雀

学习目标：写一个自己的脚手架，使用 node-puppeteer 来完成一些工作

css 框架

• tailwind css：Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.（实用优先的 CSS 框架）

• Bootstrap：Bootstrap · The most popular HTML, CSS, and JS library in the world.（前端开发框架，旨在确保网站应用具有响应性和移动友好性）

选择使用 Tailwind CSS 还是 Bootstrap 取决于项目需求和开发经验。Tailwind CSS 适合需要高度定制和独特样式的项目，而 Bootstrap 适合需要快速开发和标准化的项目。我们可以根据项目要求和团队特点选择最适合的框架。 学习目标：使用 CSS 框架简化样式编程，提高页面搭建效率

小程序开发

这里我就默认指：微信小程序，那无论是哪个技术栈都需要过一遍微信官方的小程序文档：微信开放文档

vue 技术栈：原生就是和 vue 很像

• 视频教程：千锋教育前端uniapp入门到实战项目教程(微信小程序+H5+安卓APP+IOS APP)_哔哩哔哩_bilibili

• 文字教程：uni-app官网

参考资料

1. https://juejin.cn/post/6899642866693423111

React 技术栈：Taro，大型小程序开发这是使用这个框架

• 视频教程：用这个方法开发小程序，快到飞起！手把手教程_哔哩哔哩_bilibili

• 文字教程：https://docs.taro.zone/docs/

学习目标：做一个自己的微信小程序，并且上线微信小程序

设计模式

了解常见的设计模式能够写出更好，更容易维护的代码 参考资料：

1. https://juejin.cn/post/7306459858127732786

2. https://juejin.cn/post/7211026540129157180

3. GitHub - lxj/javascript.patterns: javascript设计模式

前端工程化

代码质量工具（ESLint、Prettier，SonarLint）

eslint

• 视频教程：【建议收藏】全网最全的讲清eslint和prettier关系的视频！！！前端开发的利器！！！_哔哩哔哩_bilibili

• 文字教程：https://juejin.cn/post/6990929456382607374

• 官网：Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

prettier

• 视频教程：【建议收藏】全网最全的讲清eslint和prettier关系的视频！！！前端开发的利器！！！_哔哩哔哩_bilibili

• 文字教程：https://juejin.cn/post/6990929456382607374

• 官网：Prettier · Opinionated Code Formatter

SonarLint

非必需，我觉得很有帮助，一个能实时检测并高亮代码中的错误、漏洞和代码异味，帮助开发者提升代码质量。 学习目标：给项目添加 ESLint + Prettier 让项目保持统一的代码风格

前端性能优化

• 视频教程：前端性能优化方法与实战_哔哩哔哩_bilibili

• 文字教程：前端性能优化--归纳篇 | 被删的前端游乐场

这里我也没有实践，从互联网找到了我觉得我未来会学习的资源，如果你有好的资源，感谢反馈 参考资料：

1. 入门前端工程：简介 | 带你入门前端工程

实战 & 参与社区开源

个人项目

• blog

• 其他

目标：做一个（多个）自己的项目，并且上线，写到自己的简历上

社区

• 给开源仓库提交 pr

• 发布文章到 掘金，思否，51CTO ，CSDN 等等

如果给知名开源仓库贡献代码，还可以写到简历上

自学（新人）可能会遇到的问题？

在我的自学中，曾经遇到了很多问题

HTML CSS 属性那么多记不住怎么办？前面学后面忘记怎么办？

前面学，后面忘记，是很正常的，那其实在最初学习的时候，就是要多写代码，留下相对深的印象，在使用的时候查询文档或者询问 AI 即可，不要说刚学习，即使一线前端开发，没有搜索引擎也是寸步难行（至少我是这样）

学习一段时间后没有热情怎么办？

创造一些有成就感的事情，记录，输出式的学习，学习本身是正反馈很少的，需要我们主动创建一些正反馈机制，那学习就会和打游戏一样快乐

遇到 bug 怎么办？学习遇到卡点怎么办？

1. 询问 Google

2. 询问 AI

3. 加入一些社区，例如编程导航知识星球，询问有前端经验的人

JavaScript 需要深入吗？

需要，但是一口吃不吃胖子，我觉得我 JavaScript 能力一般，如今框架为主的生态，JavaScript 即使能力一般，也能胜任日常工作。分享一个大佬的学习技术方法：“学会这门技术的基础，然后做一个项目，然后写一份对应工作的简历，入职后带薪学习”，我是认同的，因为工作会遇到很多场景，对技术提升是最快的，而且有压力，不得不学

如何准备面试

目前我理解的面试就是销售自己，那就是需要包装，需要渲染，让面试官觉得，我靠这个人我必须留下来，那面试前疯狂背八股文，刷算法，面试题等等都是需要的，面试和工作是两个事情 参考资料：

1. 程序员鱼皮的保姆级教程：输入密码 · 编程导航

2. 阮一峰的如何写一份有效技术简历：如何写一份有效的技术简历？ - 阮一峰的网络日志

3. 简历的本质：GitHub - Wscats/CV: :see_no_evil:Front End Engineer Curriculum Vitae - 面试宝典和简历生成器

后端如何快速入门前端？

我询问了我的后端搭档 松柏，问他如何快速入门前端，他的回答是：

我非常赞同，后端本身有编程基础，再学习一门语言是相对简单的，那前端 html + css 都是很简单的，JavaScript 又不是问题，那要学习的就是一个框架语言了，Vue 官方文档写的那么好，还有什么好说的呢！

关注我，有任何问题都可以免费问我！如果你想要免费学习资源，关注我，私我免费发给你