2020前端分阶段学习路线和方法

最新推荐文章于 2025-11-02 16:34:11 发布
原创 最新推荐文章于 2025-11-02 16:34:11 发布 · 195 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文提供了一套全面的前端开发学习路线，包括开发环境搭建、基础语法、HTML、CSS、JavaScript、网络基础、浏览器知识及工具库使用等方面，推荐了相关学习资源，如黑马、鱼c小甲鱼、尚硅谷的教程以及《犀牛书》等经典教材。

前端分阶段学习路线和方法

  • 第一个阶段（看看能不能学走）

  • 开发环境搭建

    • 开发工具
      • vscode
      • webstorm
      • hbuilder
    • 基础的计算机命令

  • html

    • 常用标签（不同刻意去背）
    • 表单
    • 语义化
    • 多媒体
      • audio
      • video
    • 一些常用的api
      • 文件读取
      • 网络状态
      • 本地缓存
      • 拖放
      • 定位
    • Dom（重点）
    • 自定义属性

  • css

    • 基础语法
    • 几种样式定义的区别和优先顺序
      • 行内
      • 行外
      • 外部样式
    • css层叠规则
    • 盒模型
    • 常见的布局方式
    • 响应式布局
      • 媒体查询
      • bootstrap
    • 动画和过渡效果

  • JavaScript（重中之重）

    • 基础语法

    • 常用的数据结构（必须先学）

      • 数组
      • 集合
      • 堆栈
      • 队列
      • 链表
      • 哈希
      • 树
      • 此处算法和数据结构在一起

    • JavaScript的执行机制（了解一下）

    • 面向对象（重点，多语言通用知识点）

    • 原型链

    • 实现继承的几个方式

    • 几个重点

      • 类型转换
      • 作用域
      • 闭包
      • 深浅拷贝

    • 正则表达式

    • 操作Dom和canvas绘制

    • 常见的工具库的使用（可以参考一下我上一期发的推荐视屏）

      • jquery（2020要学，花不了多少时间，了解一下链式编程和操作dom）
      • loadsh

  • 网络相关基础（重要）

    • 常见的通信
    • 常见的响应方式和状态码
      • Json
      • xml
      • 1xx 2xx 3xx
    • ajax通信（重要）
    • restful风格接口
    • rpc风格
    • GraphQL拓展
    • 使用postman调试接口
    • mock数据（重要）

  • 最好还是学一点设计和切图

  • 浏览器相关知识

  • 学习资料

csjsz
关注
转行人必看：数字IC前端设计学习路线与方法（内附学习视频）
coachip的博客
12-22 6038
众所周知，数字前端设计对于工程师的能力要求比较高，不仅有学历上的要求，还要求掌握很多的知识技能。不少跨专业想要转行的小伙伴对数字前端设计这个岗位不是很了解，下面IC修真院就带大家全面了解一下数字前端设计的学习方法。
25应届-从0开始前端开发学习记录（0419-学习路线整理）
POPORORO的博客
04-21 1224
由于实验室时间少，前端开发的方向可能能更快的帮助自己在秋招找工作，调研了一天，还是觉得这个up视频质量更高，就是年限久了点（2020），这个up主也不知为何，很久没更新了，想要以此路线学习的小伙伴（当然也包括我自己）也不知道适用与否，欢迎并且期待交流！所以决定通过将自己前端开发的学习日常都以博客的形式记录下来，还能和广大云coder能够随时交流，能指正更好~
大前端完整学习路线（详解）
热门推荐
麻子、你高了博客
09-20 15万+
大前端完整学习路线（详解） 第一阶段： HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效： 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片
前端学习路线【转】
weixin_34034670的博客
05-11 344
前端要学习三个部分：HTML，CSS，JavaScript（简称JS），因此首先明确三个概念：HTML是内容层，它的目的是表示一个HTML标签在页面里是个什么角色。 CSS是样式层，它的目的是表示一块内容以什么样的样式（字体、大小、颜色、宽高等）显示。 JS是行为层，它要做的是当用户触发某些行为时，会给内容和样式带来什么样的改变。1，HTML，CSS部分。HTML/CSS初学，就照着http://...
前端学习路线
最新发布
2303_80433826的博客
11-02 775
基于当前前端技术发展趋势制定的完整学习路径。
前端学习路线1
HIMOJITO的博客
05-20 277
第一 CSS篇 2个小时的时间去看html，就学会html,head,body,div,lable,input,p,input就够了 4个小时的时间去看CSS 就学会 color,position就够了，花点时间看一下盒子模型 2个小时的时间，开始写一个九宫格的小程序 很简单，用Div，画出九个格子，心情好就随便给点颜色 2个小时的时间，去配置一下Nginx 很简单，配置好了之后就可以在PC上打开，也可以在手机上访问了 4个小时的时间，去学习一下 px,em,rem和百分比。确保不同手机屏幕
前端学习路线（一）
海风依旧
11-14 7789
前端三剑客怎么学？css的重点在哪？可以不学js直接学jq吗？js应该怎么学？你想要的问题都在这里，资深前端开发工程师的经验之谈！
前端学习路线(一)
forget_fly的博客
02-28 1480
自从毕业以后，很多人都不知道要干什么，也没有一个规划和方向。可能觉得前端比较简单，然后就想从事这个行业，毕竟这个行业的薪资水平还是ok的嘛。 接下来就是给初学者的一些建议和学习路线，相比于后端来说，前端还是比较好入门的。 众所周知，前端的三大基础，html\css\js,前端的框架也好，实现的功能也好，都是基于次实现的。 1、HTML（视频+文档+项目） HTML的全称为超文本标记语言，是一种标记语言。类似于div,p,li标签等等。 2、CSS（视频+文档+项目） 层叠样式表(英文全称：Cascading
精选资源
高级前端工程师学习路线（完整版）.rar
01-18
本压缩包“高级前端工程师学习路线（完整版）.rar”提供了一个全面的学习路径，旨在帮助开发者从入门到精通，掌握前端领域的核心技术。下面将详细解读这个学习路线的组成部分，并涵盖移动开发、Vue.js、React.js以及...
2024年Java最新学习路线，本文档整理了学习Java的七个阶段
06-30
### 2024年Java最新学习路线 随着信息技术的快速发展，Java作为一门经典且广泛使用的编程语言，其重要性不言而喻。为了更好地掌握Java，并能够在实际工作中灵活运用，这里提供了一份针对2024年的Java学习路线，旨在...
前端学习之路——分阶段详细分析 （必看！）
javadaozhu的博客
06-25 642
今天给大家介绍的是前端你需要学习的全部内容—— 让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。若是觉得有用记得给点个赞哦！无论你是刚入门的小白，还是已经工作的前端开发者都能从中获取到你想要的资料！ 第一阶段：准备篇 第二阶段：基础篇 第三阶段：核心篇 第四阶段：进阶篇 图片说明参考 接下来我们详细分析： 一、准备篇 1、学习周期：20天 2、学后目标： 2.1、熟悉媒体查询和响应式设计...
前端学习路线和文档和学习时间
04-19
<think>好的，我现在需要处理用户关于前端学习路线、文档推荐和学习时长规划的问题。首先，回顾用户的问题，他们希望得到结构清晰的回答，包括路线图、文档资源和时间建议。同时，用户提到了之前的引用内容，但需要正确关联这些引用。 首先，我要整理前端学习的基础部分。根据引用[1]，HTML、CSS和JavaScript是核心基础，所以这部分要放在最前面。需要分阶段说明，每个阶段的学习内容和时间分配。例如，基础阶段建议1-2个月，并推荐MDN文档作为参考资料。 接下来是框架学习。用户提到的引用[1]和[3]都涉及Vue和React的选择，以及Node.js的应用。这里需要说明两个框架的学习顺序，并强调理解原理的重要性。同时，Node.js作为后端技术，需要单独列出，时间建议1个月左右。 然后是工程化与工具链。引用[2]提到开发流程中的细节，如Webpack、Git等工具的使用，这部分需要涵盖构建工具、版本控制和协作流程，时间建议1-2个月。 进阶部分包括性能优化、TypeScript和服务端渲染，这些内容在引用[1]和[2]中都有涉及。特别是性能优化和TypeScript的重要性需要强调，时间安排各1个月。 实战项目部分，引用[3]提到Node.js在项目中的应用，所以可以推荐全栈项目，并强调项目经验的重要性，时间建议3个月以上。 文档推荐方面，MDN、官方文档和书籍都是可靠来源，需要列出具体资源，如《JavaScript高级程序设计》和Vue/React官方文档。 学习时长方面，根据各个阶段的时间总和，总时长大约6-12个月，分阶段说明，并建议每日投入时间。 最后，生成相关问题，确保问题与学习路线相关，如学习方法、框架对比、项目经验等。 检查是否符合系统级指令：使用正确的中文回答，数学公式暂无需要，分点清晰，引用标注正确。确保引用的内容自然融入回答，例如在框架选择部分引用[1]，开发流程引用[2]，Node.js部分引用[3]。 确认没有使用任何Markdown格式，段落间用空行分隔，代码块用三个反引号包裹，相关问题部分明确标出。完成后再次检查结构是否清晰，信息是否准确，引用是否正确。</think>### 前端开发学习路线图与规划 根据主流技术发展和行业需求，以下是系统化的学习路线及建议，结合实践经验和学习效率优化设计： --- #### **一、基础阶段（1-2个月）** 1. **HTML/CSS** - 学习标签语义化、盒模型、Flex/Grid布局、响应式设计 - 推荐文档：[MDN Web Docs](https://developer.mozilla.org/) 2. **JavaScript** - 掌握变量、函数、DOM操作、事件循环、ES6+语法（如Promise、模块化） - 推荐书籍：《JavaScript高级程序设计》（第4版）[^1] ```javascript // 示例：ES6模块化 import { fetchData } from './api.js'; fetchData().then(data => console.log(data)); ``` --- #### **二、框架与工具（2-3个月）** 1. **前端框架** - **Vue.js**或**React**任选其一（根据公司需求优先）[^1] - 核心：组件化开发、状态管理（Vuex/Redux）、路由（Vue Router/React Router） - 推荐文档：[Vue官方文档](https://vuejs.org/)、[React官方文档](https://react.dev/) 2. **Node.js基础** - 学习模块系统、Express/Koa框架、RESTful API设计[^3] --- #### **三、工程化与工具链（1-2个月）** 1. **构建工具** - Webpack/Vite配置、Babel转译、代码压缩 2. **版本控制** - Git工作流（分支管理、冲突解决） 3. **协作规范** - 代码风格（ESLint/Prettier）、CI/CD流程[^2] --- #### **四、进阶方向（2-3个月）** 1. **性能优化** - 减少首屏加载时间、懒加载、Web Vitals指标 2. **TypeScript** - 类型系统、泛型、与框架结合（如Vue 3 + TS） 3. **服务端渲染（SSR）** - Next.js（React）或Nuxt.js（Vue） --- #### **五、实战项目（3个月以上）** - **推荐项目类型** 1. 电商后台管理系统（全栈：前端+Node.js API）[^3] 2. 数据可视化大屏（ECharts/D3.js） 3. 移动端H5应用（Vant/React Native） --- ### **文档推荐** 1. **权威指南** - [MDN Web Docs](https://developer.mozilla.org/)（全面覆盖Web技术） - [JavaScript.info](https://javascript.info/)（深入JS核心） 2. **框架官方文档** - Vue/React官方教程（优先阅读） 3. **开源社区** - GitHub Trending项目、Stack Overflow问题库 --- ### **学习时长建议** - **零基础入门**：6-8个月（每日3-4小时） - 基础：1-2个月 - 框架：2-3个月 - 项目实战：3个月 - **有编程经验**：3-4个月（重点突破框架和工程化） ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值