25应届-从0开始前端开发学习记录（0419-学习路线整理）

原创 已于 2024-04-21 12:32:22 修改 · 1.2k 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#学习 #前端 #前端框架 #javascript

于 2024-04-21 12:11:38 首次发布

目录

0 国外开源项目roadmap

1. 初识前端

2. 学习路线

3. 国内up整理的开源项目

4. 代码编辑器

5. 前端详细学习路线（2020）

5.1. 阶段一：三驾马车

5.1.1. HTML+CSS

5.1.2. JavaScript（JS）

5.1.3. GitHub

5.2. 阶段二：Node.JS+打包工具

5.3. 阶段三：库和框架（开始快乐喽）

5.4. 阶段三点五：查漏补缺

5.5. 阶段四：提升知识的深度和广度（重在思考）

5.6. 阶段五：熟练度（思维永远是最最最牛的）

写在最后

0 国外开源项目roadmap

国外开源项目罗列了开发学习的roadmap：GitHub - kamranahmedse/developer-roadmap: Interactive roadmaps, guides and other educational content to help developers grow in their careers.

注册账号-->选择前端开发，即可看到学习界面：

1. 初识前端

前端是对用户直接交互的网站视觉和交互元素的开发。常说的前端三驾马车：

    1. HTML：提供网页结构
    2. CSS：提供网页样式和布局
    3. JavaScript：提供网页动态行为和交互性

作为前端开发人员的职责：负责创建网站的用户界面，以确保其美观且易于使用，并重点关注设计原则和用户体验。与设计师、后端开发人员和项目经理密切合作，以确保最终产品满足客户的需求并为最终用户提供最佳的体验。

2. 学习路线

初学者（0基础）：选择“Beginner Version”

想要提升个人前端开发能力：选择“Detailed Version”

3. 国内up整理的开源项目

GitHub - ObjTube/front-end-roadmap: Tell you how to learn front end development ~

由于国外开源项目集合了尽可能多的技术栈知识，有时候看起来可能会眼花缭乱，这里可以直接使用国内up主整理的开源项目进行分阶段学习

4. 代码编辑器

市面上比较好用的有WebStorm、Atom、Sublime、VS Code（推荐）

5. 前端详细学习路线（2020）

与上述国内开源项目对应的B站前端学习路线分享（2020）

这里将学习路线分为了更详细的五个阶段，该五个阶段与项目中的阶段并不一一对应。

5.1. 阶段一：三驾马车

5.1.1. HTML+CSS

可以在菜鸟教程上很快学会HTML、CSS的使用

  • HTML：掌握一些常用标签的使用方法即可
  • CSS：比HTML稍微复杂一些，知识点更零碎一些；

除了需要掌握基本属性外，还要掌握如何灵活布局节点，这需要用到float定位和模型flex等

💡基础要扎实

不能因为自己CSS写的多烂或者界面有多难看，而拿起bootstrap或者类似的CSS框架直接使用。CSS没有真正学会，UI库的使用也还一知半解，这样会导致基础不扎实。

要坚持

目录

0 国外开源项目roadmap

1. 初识前端

2. 学习路线

3. 国内up整理的开源项目

4. 代码编辑器

5. 前端详细学习路线（2020）

5.1. 阶段一：三驾马车

5.1.1. HTML+CSS

最低0.47元/天 解锁文章
从零开始学习前端开发：完整的前端自学指南
Z__7Gk的博客
06-21 4687
作为一个曾经的前端RD和TL，现在的教育工作者，我觉得我能回答这个问题。前端是一个看似入门门槛不高，但要学好很难的领域。前端的知识体系庞杂又松散，技术演进快，如果摸不清脉络的话很容易陷入盲人摸象的困境甚至跑偏。
从零开始学习前端开发：一步步带你成为专家
2401_82881178的博客
05-17 1146
在布局方面，掌握display属性的不同值，如block使元素以块级形式显示，独占一行；例如，<html>标签定义整个 HTML 文档，<head>标签包含文档的元信息，如标题、字符编码等，<title>标签用于设置网页的标题，它嵌套在<head>标签内，<body>标签则包含网页的可见内容，如文本、图片、链接等。在学习过程中，通过实际编写简单的网页，如个人简介页面，运用不同标签构建页面的标题、正文、图片展示及链接跳转等部分，逐步熟悉 HTML 的语法规则和文档结构，为后续的前端开发学习奠定基础。
从零开始学前端开发：最简单的入门指南
xsgfksh的博客
05-17 1415
看着别人轻松制作出精美的网页、炫酷的 App，你是否也心痒痒，想踏入前端开发的大门？可一打开编程书籍，密密麻麻的代码瞬间让人望而却步。“零基础真的能学会前端开发吗？”“从哪里开始学才不会走弯路？” 别担心！其实前端开发并没有想象中那么难，只要找对方法，小白也能快速入门。今天就为你送上这份最简单的入门指南，手把手带你开启前端学习之旅，让你从 “编程小白” 变身 “前端小能手”！通过这份从零开始学前端开发的入门指南，我们了解了前端开发是什么，明确了学习路径，认识了实用工具，也知道了如何通过实战项目提升能力。
web前端自学路线(b站web好评排行课程汇总)
kobe_back的博客
11-18 2015
网络知识 (Internet) 网络工作原理 计算机网络原理：https://www.bilibili.com/video/BV1xJ41137Q3 什么是HTTP HTTP协议详解：https://www.bilibili.com/video/BV1js411g7Fw 浏览器及工作方式 浏览器是如何运作的?：https://www.bilibili.com/video/BV1x54y1B7RE DNS 及其工作原理 DNS基本工作原理：https://www.bilibili.com/vi
Web前端学习之路
前端栈开发
06-22 6093
随着Web2.0思想的日益普及，让企业都慢慢认识到前端的重要性。前端开发人员的地位也日益提高，相应的技术要求要是越来越高，那么现在想成为一名合格的Web前端工程师应该怎样学习呢?下面陕西优就业小编推荐一个Web前端学习路线图，希望对初学者有帮助。1.Javascript 语言全栈开发中，用的编程语言就是 javascript2.HTML5 标签和 DOM这是前端最核心技术，为之后学习各种开发框架，...
AI Agent开发宝典：前端工程师必备，建议收藏学习
2401_85325726的博客
09-25 862
AI Agent是AI应用落地的关键技术，通过LLM大语言模型实现智能决策，结合Prompt Engineering优化交互质量。前端开发者可借助LangChain.js构建Agent工作流，集成RAG技术实现知识检索，利用MCP协议扩展功能。多模态AI支持文本、图像等多种输入输出形式。随着"人工智能+"政策推动，AI Agent将在各行业广泛应用，开发者需掌握Multi-agent架构、A2A协议等新兴技术，持续学习以应对AI领域快速迭代的发展趋势。
前端面试与数据结构学习笔记整理
“luopangda_front-end-interview-_1741872929.zip”这一压缩文件的标题明确指向了前端面试相关的学习资料，而其描述“数据结构笔记学习”则进一步揭示了该资料的核心内容之一：对数据结构的系统性整理与深入理解。...
熬夜肝了这一份C++开发详细学习路线
Linuxhus的博客
08-12 1243
C/C++后台开发相关视频，文档代码资料包，学习路线思维导图免费领取学了之后要验证自己学得如何，可以来小编的网站看看这些面试题，通过面试题查漏补缺技术视频讲解，总之，关于校招，学习路线，面试题等等，很多我在网站都更新了，包括个人经历，大家迷茫没事做时，可以多打开看看。最后，大家加油，努力学两年，争取日后那个好的 offer原文链接：https://juejin.cn/post/6997248187413037070。.....................
后端路线指导（2）：后端基础版学习路线
qq_33445788的博客
06-19 1483
JVM这部分学习完以后，你可能明白了某些语法或者某些原理是怎么实现的，比如可以学习到Java中的对象是如何存储在堆栈中的，存储的结构到底是怎样的，都可以在JVM的课程中找到答案。语法方面，如果有C/C++的语法基础，那么在Java语法的学习上可以加快学习速度（2倍速播放），缩短到10-14天，老白本人就是有C/C++的语法基础，在学习Java语法时花费的时间就大概是10-14天左右。，入门阶段还是建议先学习纯语法，参考韩老师分的阶段，老白列出每个阶段的重点内容，没有说明就是可跳过的内容。
HarmonyOS Next开发学习手册——应用上下文Context
maniuT的博客
06-24 1665
Context 是应用中对象的上下文，其提供了应用的一些基础信息，例如resourceManager（资源管理）、applicationInfo（当前应用信息）、dir（应用文件路径）、area（文件分区）等，以及应用的一些基本方法，例如createBundleContext()、getApplicationContext()等。UIAbility组件和各种ExtensionAbility派生类组件都有各自不同的Context类。
分享两个月自学前端学习路线（附学习教程来源）
weixin_48723546的博客
06-08 3017
前端学习一条龙，包含自学教程来源，想学前端但又迷茫的小白可以参考～
超详细：前端 2019 学习路线（B站视频）
qq_39380155的博客
09-06 1238
觉得还不错可以点个赞哦~ 谢谢(๑•ᴗ•๑)
在B站找的前端学习路线
weixin_42290123的博客
03-13 727
在B站找的前端学习路线 在B站找到的前端学习路线，觉得up主们讲得很好，做个笔记： lookroot博主的： https://www.lookroot.cn/views/article/webstudy.html objtube的卢克儿博主的： https://objtube.gitee.io/front-end-roadmap/#/ ...
学习笔记097——Ubuntu系统中如何通过service服务的方式启动 jar 包？
code__bee的博客
01-06 122
【代码】学习笔记097——Ubuntu系统中如何通过service服务的方式启动 jar 包？
Kubernetes 学习总结（49）—— Kubernetes 本地目录挂载详解
科技D人生
01-04 844
本文介绍了Kubernetes中实现本地目录挂载的核心方法。通过hostPath卷类型和VolumeMounts挂载点，可将节点本地目录映射到Pod容器内部。详细说明了两种场景的实现步骤：单节点直接挂载和多节点通过nodeSelector指定目标节点挂载。强调了hostPath的type参数校验规则及常见问题解决方案，包括目录权限、调度错误等。建议生产环境避免宽权限配置，并指出本地挂载仅适用于非核心数据场景。如需高可用或多节点共享，应考虑NFS或PV/PVC方案。
0基础开发学习python工具_____一键打包！用 PyInstaller 将 Python 烟花程序转为 .exe（无需 Python 环境）
mg668的博客
01-01 699
本文介绍如何使用PyInstaller将Python程序打包成可执行文件。首先通过pip安装PyInstaller，然后使用pyinstaller --onefile --windowed命令将Python脚本打包成独立.exe文件，无需安装Python环境即可运行。文章详细说明了打包步骤、常见问题解决方法（如闪退、文件过大等），并提供了添加自定义图标的技巧，帮助初学者轻松分享Python程序。
MySQL初阶学习日记（8）--- JDBC
good_afternoon6的博客
01-05 1006
JDBC--java针对不同数据库上的API不同给出的一个解决方案JDBC本质上是Java标准库提供的一套类/方法，通过这组类/方法，把数据库C的原生API 进行封装，转换成Java版本的，同时也对不同数据库厂商的API进行了风格的统一安全‌：总是安全的，因为子类对象包含父类的所有属性和方法隐式‌：自动进行，无需显式转换操作符用途‌：实现多态性，通过父类引用调用子类方法风险‌：可能抛出，需确保对象实际类型匹配显式‌：需要使用 ( 子类类型 ) 父类引用 语法。
元旦学习了两种全新的拍摄手法
卢松松
01-05 388
（3）尝试把视频控制在40秒以内，绝不拖沓。这一年这个日常号让我学习多种拍摄手法。（1）尝试在人多的地方拍视频。（2）尝试全身出境拍短视频。
不同就业方向（如AI、网络安全、前端开发）的具体学习路径和技能要求是什么？
最新发布
2401_85029001的博客
01-06 287
热门IT就业方向对比：AI、网络安全与前端开发 AI方向侧重算法与数据建模，需扎实数学基础，适合对理论推导感兴趣者；网络安全注重实操经验，适合具备攻防思维的学习者；前端开发门槛较低，适合追求视觉交互效果的从业者。 选择建议： 评估兴趣特长：AI重理论、安全重实战、前端重交互 结合知识背景：数学强选AI，系统理解选安全，零基础可考虑前端 规划发展路径：AI需持续学习，安全经验增值，前端可拓展全栈 各方向均需持续更新技能，建议根据个人特质选择赛道。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值