前端工程师学习路线分析

简介: 首先学习的时候,不要想着大而全;很多知乎上包括网上列举的学习路线都是想着大而全,什么都去搞,恨不得把前面5年的学习路线都安排好的;我觉得新手不应该这么做,新手学习的时候应该有自己的主要方向;不要贪心,不要想着大而全,前端是很繁荣,是新技术层出不穷,但是新手的大部分时间应该死磕核心部分;

首先学习的时候,不要想着大而全;

很多知乎上包括网上列举的学习路线都是想着大而全,什么都去搞,恨不得把前面5年的学习路线都安排好的;

我觉得新手不应该这么做,新手学习的时候应该有自己的主要方向;

不要贪心,不要想着大而全,前端是很繁荣,是新技术层出不穷,但是新手的大部分时间应该死磕核心部分;

01.环境搭建

前端环境很好搭建,编辑器+浏览器即可

浏览器推荐使用 Chrome

行业内主流的编辑器有下面三个

  • 也有人用IDEA,属于一个妈的工具,没有啥大区别;WebStorm是针对前端开发优化过的,比较推荐这个;

初学者随便找一个就好,喜欢轻量级的使用vscode,喜欢工业风一样的使用webstorm;

我个人是两个工具都有使用;

还有一个说明的,VScode是开源免费的,webstorm是收费的;

更多的前端开发环境的效率工具,可以参考我分享了一个 搭建WEB前端开发环境,有哪些常用软件需要安装呢,感兴趣的可以看看,了解前端开发中都使用什么软件;

02.HTML

如果要做网页,HTML是基础骨架,必须要掌握的;

  • 1.先通过 HTML 教程 学习大概
  • 2.再通过 HTML5 教程 学习哪些新属性,这在做浏览器兼容低版本的时候特别有用
  • 3.最后通过 HTML 标签 加深对每个标签的印象

到这里,你的HTML就算可以熟练掌握了,注意本篇文章说的,都是你一步一步跟着动手敲代码的基础上说的;如果你只是大概浏览下,没有真正动手敲代码,那是不行的;

这是一段非常枯燥无味的阶段,如果你感觉枯燥无味,不要紧的,你可以学完 HTML 教程HTML5 教程 后直接进入CSS的学习阶段,这样会让你学习的乐趣增加不少;

等以后合适的时候,再回头看逐个研究 html 标签也是一个不错的选择;

03.CSS

做网页,如果光有HTML会感觉好像一个半成品一样,加上适当的CSS美化,会更符合用户体验;

这个阶段,你会稍微有点成就感,毕竟是可以做出一些看起来高档上的网页了;

如果你以后打算做出漂亮的网页,那么你最好老老实实把上面三个都按部就班的学习一遍;

如果你是打算更加偏重于JS的方向,那么第三个 CSS 样式表参考手册 可以稍微浏览就好,等遇到不会写的样式,百度搜索下问题,然后再重点看下当时场景用到的CSS属性也是可以的;

04.仿一个你经常浏览的网站,最少重复3次

学习玩HTML和CSS之后,你写的代码,都是这一部分,那一部分的,没有一个整体的概念;

这个时候,非常推荐你仿制一个你经常浏览的网站,只用HTML和CSS去实现,遇到JS效果,直接不做;

在动手之前,我强烈推荐你一定要开通一个自己的技术博客

开通一个技术博客

可以使用第三方的博客,比如 cnbolg/CSDN/简书/掘金/知乎,这些都是国内不错的博客平台;

开通博客的是用来把你容易忘记和有体会的技术都记录下来,不要感觉有些知识点特别low,所有的技术大牛,也都是一点点的积累才能脱变的;

学会Github的简单使用(如果影响学习兴趣了,可以直接跳过)

注册一个Github账号:https://github.com/

注册这个是用来管理你的代码,因为你下面要模仿一个常去的网站,并且不止实现一遍,如果有一个版本控制还是非常赞的;

注意:使用Github,需要学习基本的Git使用

如果通过练习仿站来提高技术

推荐你把整个网页截图下来,然后根据图片来实现;一般的网页都最低会有 首页详情页 这两个页面;

然后用你学会的知识,根据截图来写出这些网页

注意:同一个网站最少做3遍!!!!

注意:同一个网站最少做3遍!!!!

注意:同一个网站最少做3遍!!!!

我个人认为,写东西不是越多越好的,而是通过敲代码,能总结出来的东西越多越多!可以逐渐提高自己的技术才是最终目的;

比如你把小米,京东,腾讯网等等都写了一边,我认为这样是很傻的行为,真的就是纯粹搬砖的了,对技术的提高并不是很好!

最好的方式,是一个网站,你重复的写,重复的写,然后每一遍都有不错的心得体会

  • 第一遍,你只需要仿制的和原来完全一样就可以!
  • 注意:这里说的是完全一样!!!最好的是1Px的误差都没有
  • 不会写的HTML标签,和不会用的CSS属性,可以回头查查
  • 然后总结出这次写的内容中,有哪些可以优化的,哪些可以重复使用的元素,那些设计的不合理,需要重新布局
  • 第二遍:总结你第一遍的不合理和思路重新设计
  • 一般初学者第一遍写的东西,基本都是面目全非的;避免掉一些不合理的地方,抽出一些复用的元素,重新设计你的实现思路
  • 这一步能不查资料,就尽量不要查资料
  • 注意这一步是从0开始,一定不要在你第一遍的内容上修改来实现
  • 实现完成以后,记得总结下这一边还有哪些瑕疵
  • 第三遍:断网并且关掉智能提示再实现一遍
  • 这一遍再对第二遍的优化,并且需要断网和关闭智能提示来实现,可以增强记忆;

通过上面的3次练习,你对静态网页的书写,一般会有自己的心得了,最好每次都用博客的形式记录下来;

05.JavaScript

通过前面4步的情况下,你对静态网页,基本算是略有小成了,这时候不要骄傲,你的水平可能刚刚够得着"切图仔"的水平,前端的大杀器是JavaScript,你前面学的那些只能算个热身运动;

作为一个web前端工程师,js是很核心的部分,也是相对来说很难的一部分(其实你写着写着会发现,JS其实和CSS一样,基本就是那些事情,做项目的时候重点反而是复杂场景下的逻辑处理)。

学JS的时候一定要跟着敲;

学JS的时候一定要跟着敲;

学JS的时候一定要跟着敲;

学习的目的并不是把教程看完,而是慢慢学,遇到不会的第一遍不行就第二遍写;上面2个教程全部学完以后,记得再回头看一遍巩固一下,中间把推荐的2本书也多翻翻;

上面两个教程看完以后,你的原生JS已经算可以的了;

这时候推荐你看看 ECMAScript文档,因为前端一直在发展,书上和教程上并没有后面新增的 JS标准(比如2020年出的ES11这些标准);ECMAScript文档还可以帮助你定点研究

上面如果是一步一步代码写到现在的话,全部搞完,时间最好是在4个月-5个月的样子完成,不要追求快;按部就班的搞,你后面会越学越兴奋的;如果这之前学的不牢固,后面容易凉;

06.用原生JS写一个带AJAX获取信息的项目

有些网站会提供对外的API,比如天气预报啊,便民查询之类的东西;

你可以用公开的API做一个项目,你可以自己选择下;不要担心自己的技术,这时候你已经很厉害了;

07.学一套主流mv*框架

vue,react,angular2选一种;

如果想大厂工作,我推荐React,如果是小公司工作建议从vue开始;

当然这是一个很模糊的界限,大厂小厂vue,react都有用的,但是因为项目的原因和成员规模不同,所以团队的抉择还是有重点偏向的;

vue学起来平滑些,结合vue,学一下vue-routervuex,axios,webpack

React更符合函数式编程,结合 React,学一下 React Redux

08.用mv*框架实现第6步的项目

这个时候再重新做一遍第6步的项目,注意是从HTML/CSS开始写的那种重做;

用你第9步学习的知识来实现;

完美撒花,这时候,你已经是一名基础不错的前端开发了;

到这里已经不需要别人告诉你怎么学了,你自己会有自己的学习方式了,所以就没有固定死一定要怎么学;

对了,在学习mv*框架的时候,一定不要因为别人说React难学所以选择Vue,那些说React难学的,基本都是原生JS学习的时候,偷懒没有跟着一步一步敲代码,导致原生JS半桶水;

nodejs这个,你原生JS学的稳,这个都是小事情;

目录
相关文章
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
539 3
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
527 0
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
708 0
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
1310 1
|
人工智能 前端开发 架构师
2025年前端局势分析,我该不该转行?
2024年,前端领域经历了快速变化,AIGC的兴起和市场HC减少使得前端工程师面临挑战。尽管AI工具如通义灵码和Cursor能高效生成代码,但AI无法完全取代前端工程师,因其缺乏逻辑、沟通和创新能力。前端工作不仅限于编码,还包括需求分析、代码评审等。未来,前端不会“死亡”,而是持续演变。面对大环境的压力,提升综合能力、拥抱变化、持续学习和保持身心健康是关键。转型方向包括升管理、做架构师或转讲师等。稳住2025年,需适应变化、不断学习并探索更多可能性。
2856 16
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
733 1
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
581 1
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
872 2
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
3103 0
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
571 1

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1209
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    539
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    419
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    414
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    527
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    708
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1310
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    302
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1097
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    491