El último contenido de este artículo, actualizado el 2021-10-09 . No tiene que preocuparse de que este artículo esté desactualizado, ya que a medida que se actualice la tecnología front-end, este artículo se actualizará en consecuencia.
El contenido más reciente de este artículo también se actualizará en vivo en GitHub . Bienvenido a seguirme en GitHub para comenzar y avanzar en el front-end juntos.
Escribí un artículo antes: "Dos meses de pura resignación, un mes de inversión en el mar, el camino a la búsqueda de empleo de Android a la parte delantera de la Web" . Este artículo cuenta mi experiencia personal y mis sentimientos durante el proceso de transformación Muchos zapatos para niños me preguntaron en privado cómo comenzar con la parte delantera, así que obtuve este artículo.
Ruta de autoaprendizaje para entrada web front-end
Hay una gran cantidad de contenido básico que los principiantes deben aprender para comenzar con el front-end, de la siguiente manera.
1. Fundamentos de la sintaxis de HTML, CSS y JavaScript. Después de aprender los conceptos básicos, puede imitar el diseño de la página de inicio de los sitios web de comercio electrónico (como JD.com y Xiaomi).
2. Sintaxis de JavaScript avanzada. Incluyendo: alcance y cierre, este y objeto prototipo, etc. Confía en mí, la sintaxis JS siempre será la parte más importante de una entrevista.
3. jQuery, Ajax, etc. jQuery no está obsoleto, sigue siendo parte de la base del front-end.
Cuarto, sintaxis ES6. Esta parte pertenece a la nueva gramática de JS, que debe ser preguntada en la entrevista. Entre ellos, se debe prestar especial atención a las promesas, async, etc.
5. HTML5 y CSS3. Familiarícese con las nuevas características.
Seis, lona. Al entrevistar, algunas empresas pueden no pedir lienzo, pero confían en la suerte. Si no hay suficiente tiempo, esta parte del contenido se puede omitir. Pero si puedes, definitivamente es una ventaja.
7. Desarrollo web móvil, Bootstrap, etc. Preste atención a los problemas de adaptación y compatibilidad en el desarrollo móvil.
Ocho, framework front-end: Vue.js y React. Se requiere al menos uno de estos dos marcos. Al comenzar, se recomienda aprender primero Vue.js, que es relativamente fácil de comenzar. Pero en cualquier caso, dominar Vue y React al mismo tiempo es un compañero de clase front-end calificado.
九、UI框架：Ant Design、Element UI。在做管理后台的时候，这两个UI框架使用的比较多的。Element UI 是基于 Vue.js技术栈的。Ant Design 既有基于 React技术栈的，也有基于 Vue.js技术栈的 Ant Design Vue 。
九、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 Node 环境的配置，以及 Node 的一些基础知识。
十、前端工程化：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass、自动化测试、持续集成 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。
十一、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。
十二、编辑器相关。Visual Studio Code 是每个学前端的人都要用到的编辑器。另外，前端常见的编辑器、IDE有两个：Sublime Text 和 WebStorm 。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多，但是比较占内存。个人总结一下：用VS Code 的人越来越多，用 WebStorm 的人越来越少。具体可以看：《第一次使用VS Code时你应该知道的一切配置》
十三、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。
十四、小程序开发。学会基本的JS语法，再了解小程序独有的API（参考小程序的官方文档），就已经掌握了小程序开发，没有你想象的那么难，so easy。小程序在商业上是成功的，但我个人认为它是 Web 技术的倒退，也完全体现不出开源精神和开放精神。而且小程序的开发效率贼低，IDE也卡到了极点，卡爆了。
当然，不得不承认，小程序开发让很多人找到了编程的工作。但你要一路谨记：不要做小程序开发工程师，要做Web前端开发工程师。
十五、总结——框架有时候很虚；熟练掌握 JavaScript 基础、核心源码，才是行走江湖、驰骋千里的关键。
推荐的前端图文教程
我在GitHub上有一个Web前端入门的学习教程，非常详细，地址是：
非常详细和贴心，你值得star。这个前端教程主要有三个作用：
-
网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位入门者的同理心。
-
帮助前端同学提供一个精品学习路线和资源，提高学习效率，少走很多弯路。
-
可以当做前端字典，随时翻阅，查漏补缺。
推荐的技术博客
推荐的书籍
1、基础知识相关书籍
- 《网络是怎样连接的》
程序员面试的时候，经常会被问的一个问题是：“在浏览器的地址栏输入url，按下回车后，发生了什么？”
为了清楚这个问题，看上面这本书，足够了。如果你想入门计算机网络，这本书也是必读的。评价非常高。
关于这个问题，也可以看下面这篇文章：浏览器输入 URL 后发生了什么？
2、JS相关书籍
上面这套书有上、中、下三本，你都可以读一读。如果时间不够，那就先读第一本。
周爱民的书，谁能不爱？这本书不但完整解析了 JavaScript 语言，还逐一剖析了相关特性在多个开源项目中的编程实践与应用。
红宝书，人人都知道。
本书首先介绍JavaScript的基本知识：命名、数值、布尔值和字符串等，并展示了其缺陷和局限性，但随后展示了如何解决这些问题；接着继续研究数据结构和函数，探索底层机制，并使用高阶函数来实现面向对象编程。
本书的翻译是@死月，
3、CSS相关书籍
- 《CSS世界》
关于 CSS 的书籍，首先推荐这本书，我身边的大佬们都说这本书好。虽然我不是大牛，但我也觉得这本书很好。
如果 js 熟练，说明你是有技术深度的前端；如果 css 熟练，说明你是有经验的前端。
- 《CSS新世界》
这是一本关于CSS的进阶读物，专门讲CSS3及其之后版本的新特性。
- 《精通 CSS》
CSS 进阶书籍。
4、面试相关书籍
JS基础、ES6语法、Vue源码、React源码、前端性能优化等等，这些话题都是面试必问。
作者@亚里士朱德 是慕课网讲师，博客和课程都写的好。这本书讲述了开发者使用JavaScript在各种Web开发场景下所需要掌握的重点知识和概念。
5、Vue.js、React 源码书籍
Este libro habla sobre el principio de implementación de Vue.js 2.0, que es muy bueno. La puntuación no es alta, no porque el libro no sea bueno, sino porque no lo entiendes.
Enlace recomendado
- Navegación frontal: www.cnblogs.com/qianguyihao…
Esta navegación enumera muchos sitios web comunes, blogs, herramientas, etc., que es relativamente autorizada en su conjunto.
El aprendizaje es un aspecto y el aspecto más importante; pero también hay otro rol, como "No conoces este marco de front-end", "Nunca has oído hablar de este maestro de front-end". Aquí es donde entra en juego la lista. Si puede comprender todos los contenidos enumerados en la lista, el nivel de fuerza será mucho mayor.
- Documentación oficial de MDN: developer.mozilla.org/zh-CN/docs/…
Si desea ver la documentación de la API de front-end, vaya primero a MDN. Muy oficial, muy formal.
No vayas a ningún tutorial de w3school o rookie, hay muchos errores en ellos.
Fuente de noticias de front-end
Muchos blogs técnicos en China son conocimientos de segunda mano relativamente superficiales, y los verdaderos peces gordos no menosprecian estas cosas.
Para comprender las últimas tendencias en tecnología de front-end y la información de front-end, debe consultar sitios web extranjeros. Se recomiendan encarecidamente los siguientes dos sitios web de información frontal. Todos pueden suscribirse por correo electrónico, que creo que deben suscribir los desarrolladores front-end:
- Daily JS: medium.com/dailyjs - Blog en medium.
- JavaScript Weekly: javascriptweekly.com/ - Tecnología agregada semanalmente.
mi cuenta publica
¿Quieres aprender más habilidades ? Es posible que desee prestar atención a mi cuenta pública de WeChat: Qiangu No.1 .
Descubrirás otro mundo completamente nuevo, y será un hermoso accidente.