前几天在澳门大三巴论坛上，有个朋友发了个帖子问“零基础想学前端的，到底从哪一步开始”，底下跟了几十层楼，有人推荐看视频，有人建议直接抄代码，还有人甩了个某培训组织的链接。我正好那几天在论坛上跟人聊技术聊得比较多，就顺手回了一长段。没想到第二天起来一看，私信爆了，好多人还在问细节。索性就把那些回复整理一下，写成一篇稍微系统点的东西，也算对得起“码神”这个论坛里大家瞎叫的称号。

先说说我自己的情况。我不是科班出身，大学学的是跟计算机八竿子打不着的专业，后来阴差阳错进了这行，从切图仔做起，到现在带团队做前端架构，满打满算也快八年了。这八年里踩过的坑、绕过的弯路，比我在大三巴牌坊下面吃过的猪扒包还多。所以下面要讲的东西，不是什么官方教程，就是一个老码农的碎碎念，能帮你少走点冤枉路就值了。

前端到底是个啥，别被那些花里胡哨的名词吓到

很多人一上来就问“学前端要不要先学算法”“React和Vue选哪个”“TypeScript是不是必须的”。这些问题本身没错，但问得太早了。就好比你还没学会走路，就在纠结买耐克还是阿迪达斯。前端说白了，就是做用户能看到、能摸到的那部分东西。你打开任何一个网页或者App，上面那些按钮、图片、输入框、动画效果，背后都是前端代码在撑着。它最核心的三样东西：HTML、CSS、JavaScript。HTML是骨架，CSS是皮肤和衣服，JavaScript是肌肉和神经。这三样东西没搞明白之前，别的都是空中楼阁。

我在论坛上看到有人发帖说“HTML三天就学完了，是不是可以学框架了”，底下还有人点赞。说实话，三天学完HTML，你顶多记住了几个标签。<div>和<span>的区别是什么？什么时候用<section>而不是<div>？表单里的label标签跟input怎么关联？这些细节不搞清楚，后面写出来的东西就是一堆没有语义的垃圾堆。CSS更是这样，很多人觉得CSS简单，不就是改个颜色调个位置嘛。结果一遇到浮动塌陷、垂直居中、响应式断点，立马抓瞎。CSS的水深得很，你写三年都不敢说精通。

HTML不是背标签，是理解结构

我刚开始学的时候，也犯过这个毛病，把W3School上的标签列表从头到尾背了一遍，觉得胸有成竹了。结果真要写一个页面，发现根本不知道从哪下手。后来才明白，HTML的核心不是标签本身，而是文档结构。你得先想清楚这个页面分几块，头部、导航、主体内容、侧边栏、底部，每一块里面又包含什么。这就像盖房子，你得先画图纸，知道哪里是承重墙，哪里是隔断，而不是一上来就搬砖。语义化标签的意义就在这里，它让机器和人都能看懂你的结构。搜索引擎爬虫看不懂你的<div class="header lr0m-8795-4759-ml9ce3">，但它认识<header>。屏幕阅读器也是靠这些标签来给视障用户读页面的。所以别偷懒，该用什么标签就用什么标签。

CSS的坑，踩过才知道疼

CSS这个东西，入门容易精通难。你写个红色按钮很简单，但你要写一个在iPhone SE上不换行、在iPad上居中、在桌面端靠右对齐的按钮，就得跟媒体查询、flexbox、grid这些玩意儿打交道了。我印象特别深，刚工作那会儿接了个活，要给一个电商网站做商品列表。设计稿上每行四个，间距20像素，图片自适应。我心想这还不简单，float加百分比宽度就搞定了。结果上线之后，在小屏幕上图片全挤在一起，文字都叠到一块去了。后来才知道要用flex-wrap，还得处理盒模型。那时候才明白，CSS不是画画，是布局。布局就得考虑各种极端情况，考虑内容多少、屏幕大小、字体缩放。这些经验，你看再多教程也学不会，必须自己动手写，写错了再改，改完再测，反复折腾。

说到JavaScript，这是前端里最像编程的部分。变量、函数、循环、条件判断，这些基础语法跟其他语言差不多。但JavaScript的坑在于它的异步特性和浏览器环境。你写个setTimeout，以为它会按时执行，结果发现它被后面的代码插队了。你操作DOM，以为改了就能看到，结果页面卡住不动。这些都不是语法问题，是运行机制的问题。我建议新手先把基础语法过一遍，然后马上动手写一些小东西，比如点击按钮改变文字颜色、根据输入框内容实时显示字数、做一个简单的待办事项列表。别小看这些，它们能帮你把变量、函数、事件监听、DOM操作这些核心概念串起来。等你把这些玩熟了，再去理解闭包、原型链、事件循环，会顺畅很多。

工具链别贪多，够用就行

现在的培训班特别喜欢贩卖焦虑，一上来就给你列一长串工具：Webpack、Vite、Babel、ESLint、Prettier、Sass、Less、PostCSS……好像你不会这些就找不到工作似的。我承认这些工具在生产环境里很重要，但对初学者来说，它们就是干扰项。你连CSS选择器都没写利索，去配Webpack不是自找麻烦吗？我建议前三个月就用最朴素的方式：一个HTML文件，一个CSS文件，一个JS文件，用浏览器直接打开。等你觉得手动刷新太麻烦，再去装个Live Server插件。等你觉得CSS变量不够用，再去分析Sass。工具是解决问题的，不是用来炫耀的。你遇到问题了，自然就知道该学什么了。

编辑器也一样，VS Code现在是主流，插件装几个常用的就行：Chinese语言包、Live Server、Prettier、ESLint。别一上来装几十个插件，启动都卡半天。我见过有人光配置编辑器就花了一星期，代码没写几行，快捷键倒是背了一堆。这不是本末倒置嘛。

框架要不要学，什么时候学

这是论坛里问得最多的问题。我的回答很直接：先把原生JS写够五千行，再考虑框架。为什么是五千行？因为五千行差不多能让你把DOM操作、事件处理、异步请求、数据渲染这些基本套路都走一遍。你会遇到重复代码，会感受到手动操作DOM的痛苦，会想“要是有个东西能帮我自动更新页面就好了”。这时候你再去学Vue或React，就会有一种“原来如此”的感觉。如果你一上来就学框架，你学到的只是框架的API，换一个框架就傻眼了。而且框架更新那么快，Vue 2到Vue 3，React 16到18，很多写法都变了。但底层的JS原理没变，你对DOM的理解没变，你对数据驱动的理解没变。这些才是真正值钱的东西。

至于选Vue还是React，我的建议是都行，看你所在城市的招聘需求。国内中小公司用Vue的多，大厂和海外用React的多。但不管你选哪个，学精一个比两个都懂一点强。别今天看Vue教程，明天又去写React demo，最后两个都半吊子。我当年就是吃了这个亏，简历上写“熟悉Vue和React”，面试官一问深了就露馅。后来专心搞React，把生态里的路由、状态管理、服务端渲染都摸了一遍，才算真正入门。

项目怎么做，别老跟着教程抄

很多人学完基础就不知道干嘛了，于是去网上找项目教程，跟着视频一行一行敲。敲完了觉得很有成就感，但关掉视频自己写，又不知道从哪开始。这是因为你只是在抄，没有在思考。我的建议是，教程可以看，但看完之后一定要自己重新写一遍，而且要做改动。比如教程里做的是个电影列表，你改成图书列表。教程里用的是静态数据，你改成从公开API获取。教程里只有列表页，你加个详情页。这样你才会遇到真正的问题，才会去查文档、搜Stack Overflow、调试代码。这个过程很痛苦，但成长最快。

我自己带新人的时候，会让他们做一个“个人工具箱”页面，功能很简单：一个待办清单、一个计算器、一个天气查询。但要求用原生JS写，不许用框架，不许抄代码。做出来的东西不需要多好看，但必须能跑通。很多人卡在天气查询的API调用上，跨域、异步、错误处理，这些问题一出来，他们就明白之前看的教程里为什么要有那些“多余”的代码了。这种项目做完，比你看一百集视频都有用。

关于学习路径和心态

前端这个领域，变化快是出了名的。今天流行这个，明天流行那个，你永远追不上。但你别慌，万变不离其宗。浏览器的工作原理、HTTP协议、JavaScript语言核心、CSS布局模型，这些东西十年都没怎么变过。你把根基打牢了，上面长什么枝叶都不怕。我见过太多人，今天学Angular，明天学Svelte，后天又去搞WebAssembly，最后啥也没学精。反倒是那些踏踏实实写HTML、CSS、JS的人，后来不管学什么框架都快。

还有一点，别闭门造车。多上论坛看看别人在聊什么，多加点技术群，哪怕不说话，看看别人遇到的问题和解决方案，也能学到不少。我在澳门大三巴论坛上就认识了好几个同行，有时候遇到一个诡异的bug，群里问一句，五分钟就有人给出思路。这种研讨比自己闷头查半天效率高多了。当然，群里吹水的也多，你得学会筛选信息。

最后说个扎心的事实：前端入门容易，但找工作不容易。现在初级前端卷得厉害，会写个页面已经没什么竞争力了。你得有拿得出手的项目，得能说清楚你解决了什么问题，得懂一点工程化、性能优化、浏览器兼容性。这些都不是看几篇教程能学会的，得在真实项目里摸爬滚打。所以如果你还在犹豫要不要入行，先问问自己能不能接受前三个月每天写代码写到想砸键盘，能不能接受一个bug调一下午最后发现是个拼写错误。如果能，那就别废话了，打开编辑器，从<!DOCTYPE html>开始写吧。大三巴牌坊下面每天那么多人拍照，但真正走进去看里面那个小博物馆的人没几个。前端也一样，表面热闹，底下的功夫才是真东西。