零基础前端学习路径：别一上来就“啃框架”，先把地基打牢
很多人刚学前端就问“Vue和React哪个好”，就像刚学走路就纠结穿运动鞋还是皮鞋——鞋再好，不会走也没用。前端开发的“走路”就是HTML、CSS、JavaScript这三样基础，少一样都走不稳。我之前带过一个学员小林，她是设计转前端，觉得自己审美在线，想直接学UI框架快速出效果，结果写了个按钮组件，改个颜色都要查半天文档，因为她连CSS选择器优先级都没搞懂。后来逼着她花两周重学基础，再回头用框架，简直像开了挂，“原来框架就是把这些基础操作封装好了啊！”她当时恍然大悟的样子我现在还记得。
到底该按什么顺序学？我 了一个“3:2:5”节奏，亲测对零基础特别友好：先花30%的时间学HTML，搞懂标签语义化（比如
和
包起来）、表单元素（注册页面那些输入框、下拉菜单怎么写）、多媒体嵌入（怎么在网页放图片和视频）；再用20%的时间攻CSS，重点掌握盒模型（每个元素就像个带 padding、border、margin 的盒子）、Flex/Grid布局（现在90%的网页布局靠这俩，比 float 简单10倍）、响应式设计（用 media query 让网页在手机和电脑上都好看）；最后50%的时间留给JavaScript，这是前端的“灵魂”——变量、函数、条件判断这些基础语法要会，DOM操作（比如点击按钮弹出对话框）、事件监听（滑动页面加载更多内容）是核心，异步编程（用fetch调用接口拿数据）是进阶，这些都得亲手敲代码练。
可能你会说“免费教程太多挑花眼”，我整理了一份靠谱的学习资源对比表，都是我自己或学员用过的，你可以按需求选：
资源类型
推荐平台
优点
适合人群
文档教程
MDN Web Docs
最权威，例子能直接在页面运行，更新快
喜欢看文字、想深入原理的人
视频课程
B站“技术胖”前端入门
免费，老师讲得细，每个步骤都演示
零基础、喜欢跟着视频操作的人
互动练习
freeCodeCamp
边学边做题，完成任务有成就感
自律性强、需要即时反馈的人
这里插一句，MDN Web Docs是 Mozilla 基金会维护的，前端圈公认的“字典”，它上面明确写着“前端开发的核心是HTML（结构）、CSS（样式）、JavaScript（行为）”，所以别再被那些“7天学会前端”的标题骗了，基础打牢了，后面学什么框架都快。
5个实战项目：从“看懂”到“会写”，用作品检验学习效果
光看教程不动手，就像学游泳只看视频不下水，永远学不会。我带学员时，每学完一个阶段就逼他们做项目，做完后还要自己复盘：“这个功能我用了什么知识点？有没有更简单的实现方法？”这样下来，知识才能真正变成自己的。下面这5个项目是我精挑细选的，从易到难，覆盖了前端开发80%的常用场景，你跟着做一遍，保准比光看一个月教程有用。
第一个项目：响应式个人博客页面（HTML+CSS实战）。别觉得“博客”老套，这个项目能让你一次性练会HTML语义化标签（用
放导航，
放版权信息）、CSS Flex布局（让导航栏在手机上变成汉堡菜单）、媒体查询（屏幕宽度小于768px时调整字体大小和间距）。我之前让学员小王做这个项目，他一开始把所有文字都用
包起来，我让他对照MDN的“HTML语义化”章节重写，改完后他自己都说：“原来这样写代码，屏幕阅读器都能识别内容结构，对SEO也友好啊！”你可以模仿 Medium 的简约风格，重点是把“移动端优先”的思想刻在脑子里——现在70%的用户用手机上网，页面在小屏幕上乱掉可不行。
第二个项目：TodoList待办事项工具（JavaScript交互实战）。这个项目能帮你吃透JS核心语法：用数组存待办事项，用循环渲染列表，用事件监听实现“添加任务”“标记完成”“删除任务”功能，最重要的是学会localStorage本地存储——刷新页面后任务不丢失，这个小细节能让用户体验提升一大截。我记得小李做这个项目时，卡在“删除按钮点击事件绑定”上，因为他是动态生成的列表项，直接用getElementById找不到元素。后来教他用事件委托（把点击事件绑在父元素上，通过event.target判断点的是哪个按钮），他拍着大腿说：“原来还能这么玩！”做完这个项目，你就会明白“交互”到底是怎么回事，不再是只会写静态页面的“前端切图仔”。
第三个项目：仿电商首页（综合布局实战）。到这里可以挑战复杂一点的了：用Grid布局做商品列表（一行显示4个商品，手机端变成2个），用CSS动画实现“加入购物车”按钮的悬停效果（按钮变色+轻微放大），用JS实现导航栏滚动时的样式变化（背景从透明变成白色）。这个项目能让你接触到真实开发中的“兼容性”问题——比如有些老浏览器不支持Grid，怎么办？可以用@supports检测，不支持就降级用Flex。我之前帮一个电商客户改首页，就遇到过IE11不认识Grid的情况，最后用“Flex+媒体查询”兼容，虽然麻烦但很有成就感。做完这个，你可以把作品放到GitHub上，后面找工作时这就是你的“敲门砖”。
第四个项目：天气查询应用（API调用实战）。前端开发离不开和后端接口打交道，这个项目正好练手：用公开的天气API（比如和风天气API，免费额度够用）获取城市天气数据，用fetch发送请求，处理JSON格式的返回数据，再渲染到页面上（显示温度、天气状况、 3天预报）。这里要注意“跨域问题”，如果API不支持跨域，记得用JSONP或者找个代理服务器。我第一次调用API时，因为没处理好异步加载，页面老是显示“undefined”，后来学会用async/await，代码一下清爽多了。这个项目能让你明白“前端不只做界面，还能和服务器‘对话’”，离真正的开发又近了一步。
第五个项目：简易后台管理系统（框架入门实战）。前面基础打牢了，终于可以碰框架了！推荐从Vue入手，因为它的文档对新手更友好。这个项目不用太复杂，实现“用户列表展示”“添加/编辑用户”“删除用户”这几个功能就行，重点是理解Vue的“数据驱动”思想——不用手动操作DOM，改数据页面就自动更新。我带的学员小张，学完Vue后感慨：“以前用原生JS改个列表，要写半天DOM操作，现在直接this.users.push(newUser)就完事了，太爽了！”你可以用Vue CLI搭建项目，再用Element UI组件库快速开发，感受一下“工业化”开发的效率。
做项目时记得“先实现再优化”，别一开始就追求完美。我见过有人写个按钮，纠结用px还是rem调了半小时，其实先把功能跑起来，再回头优化细节，效率更高。遇到卡壳别死磕，去Stack Overflow搜“如何用JS实现待办事项删除功能”，看看别人怎么写的，模仿不是抄，是学习思路。
最后想说，前端开发是个“边做边学”的行业，我自己做了8年前端，现在还在学新东西（比如最近在看Web Assembly）。你不用追求“学完所有知识再动手”，就从今天开始，打开VS Code，跟着第一个项目敲代码——哪怕一开始只会写个
我的博客
，也是进步。如果做完第一个项目，欢迎在评论区贴出你的GitHub链接，我会抽几个帮你看看哪里可以改进。记住，真正的前端大神，都是从写“丑丑的第一个网页”开始的。
你别觉得“展示项目”是做完项目后的小事，现在企业招前端，简历里光写“熟练掌握HTML/CSS”没人信，得有实打实的东西摆在那儿——就像你说自己会做饭，光说没用，得端出一盘菜让人尝尝。我带过一个叫小周的学员，他第一个项目仿电商首页做得挺不错，功能完整、响应式也适配了，但就直接把代码压缩包发给HR，结果石沉大海。后来我让他把代码传到GitHub上，手把手教他改README文件：开头放项目在线预览链接（后面会说怎么弄），中间分“项目功能”“技术栈”“实现难点”三块写——比如“用Flex布局实现商品列表响应式，在320px-1440px宽度下自动调整排列数量”“解决了图片加载时的布局抖动问题（用padding-top占位）”，最后配上3张截图：PC端效果、手机端效果、核心功能动图（比如加入购物车的动画）。改完投出去，第二天就有HR回复：“你的项目文档比其他人清晰多了，约个面试聊聊？”
除了GitHub，在线演示链接也特别重要——总不能让别人下载代码本地跑吧？推荐几个免费又好用的工具：如果是纯静态页面（HTML/CSS/JS写的，没有后端接口），CodePen和CodeSandbox最方便，直接把代码复制进去，点保存就生成链接，还能设置私密分享。要是项目稍微复杂点，比如用了Vue或React框架，试试Vercel或Netlify，这俩平台能直接关联你的GitHub仓库，点一下“部署”，2分钟不到就生成一个带域名的链接，比CodePen更像“真实网站”。我之前帮朋友把他的天气查询项目部署到Vercel上，他在技术群里分享后，有个做产品的朋友居然找他：“你这页面挺清爽，能不能帮我公司官网改改样式？”——你看，展示项目不光是为了找工作，还可能带来意想不到的机会呢。记得把这些链接统一放在GitHub的README最显眼的地方，再附一句“点击链接可直接体验”，别人一点就能看到你的成果，比千言万语都管用。
零基础学前端需要数学或英语基础吗？
完全不需要担心！前端开发对数学要求很低，初中数学知识（比如加减乘除、简单逻辑判断）就够用了，除非你要做3D可视化或复杂算法，那是进阶内容。英语方面，记住常见的代码关键词（比如function“函数”、class“类”）就行，现在很多文档（像MDN）都有中文版本，浏览器插件也能实时翻译英文报错，我带过英语四级没过的学员，照样3个月入门。
每天学多久才能3个月入门前端？
不用追求“每天8小时”，关键是“有效学习时间”。我 零基础每天保持2-3小时专注学习，比如1小时看教程+2小时动手敲代码。亲测这样比“泡在电脑前6小时但边学边刷手机”效率高10倍。之前有个学员每天固定晚上7-10点学习，周末多花2小时做项目，3个月后不仅做完了文中5个项目，还独立接了个静态网页的兼职，所以“专注+坚持”比时长更重要。
学完HTML/CSS/JS后，选Vue还是React框架？
不用纠结“哪个更好”，两者都是主流框架，就业市场需求都很大。如果你喜欢“写起来像写HTML”的风格，选Vue（文档对新手友好，中文资料多）；如果想往大厂或复杂应用方向发展，React生态更成熟。我带学员时会 先学一个（比如Vue），用它做1-2个完整项目，再学另一个就很快了——框架底层逻辑相通，学会一个再学第二个就像“换了种方言说话”，没那么难。
实战项目做完后，怎么展示给别人看？
两个免费又实用的渠道：一是GitHub（代码托管平台），把项目代码传上去，写清楚“实现了什么功能”“用了哪些技术”，面试时直接甩链接，比空口说“我会做项目”有说服力；二是CodePen或CodeSandbox（在线代码编辑器），可以直接在线运行项目，生成链接分享给别人看效果。我之前帮学员优化GitHub主页，加了项目截图和演示链接，他投简历时HR直接说“你的项目比别人详细多了”。
遇到bug卡壳时，该去哪里求助？
分享3个我自己常用的“救命渠道”：首先是MDN Web Docs（查基础语法，比如“CSS选择器不生效”直接搜关键词，90%的问题这里有答案）；其次是Stack Overflow（英文社区，搜“问题+关键词”，比如“JavaScript删除数组元素失败”，记得看投票最高的回答）；中文用户可以去掘金或segmentfault，里面有很多前端开发者分享踩坑经验。但要注意：提问前先自己用console.log调试，把报错信息复制下来搜，描述问题时说清楚“我想实现什么，试了什么方法，现在哪里不对”，这样别人才好帮你。
