大学生速通前端之入门【第一篇】

为什么我想介绍一下前端如何入门？

入行四年多，动机很简单，就是想把这个不是那么复杂的事情说清楚，说明白。回想自己当初无助的样子，还是想发自内心的做一个简单的教程或者指引。

跟着这篇指引走完，相信我，在这个市场上你已经是一名合格的前端了，面试90%以内的公司都不在话下。

面对前端入门，大部分大学生一开始都是懵逼、无助的状态，学校也不教啊！不知道该找谁？网上查询？网上的文章、视频很多很丰富，但是说实话太多了太杂乱了，没有一个导航地图一样的东西来做引导，知识大纲很多，但是一下子给人罗列到整个屏幕都放不下，是想故意吓走我们吗？

另外我建议入门的话，先在慕课网买一门课，跟着老师一边写一边学习基础知识，别怕那么多，先做起来再说。

1. 前端最重要的三件套JS/HTML/CSS

不过我觉得HTML/CSS/JS是正确打开顺序，如同建造一座房子的逻辑：

• HTML是钢筋骨架 （用<div>划分空间结构，堆砌整个页面内容）

• CSS是装修设计 （整个结构有了以后，我想改改样式怎么办，这个时候自然就引出了CSS，用flex布局实现响应式陈列，用color、backgroundColor来改改颜色）

• JS是智能家居系统（最后想做一些点击页面、增删改查页面的事情怎么办，自然而然就引出了JS）

2. 学JS看《JavaScript高级程序设计》就够了

别堆砌书单，专注专注还是tm的专注（姜文JPG），这本书被戏称为前端界的「九阴真经」，刚开始看完前15章就够了，然后试着经常读一读翻一翻，刚开始的理解，和你写一段时间、工作一段时间的理解可能会完全不同。很多刚开始不理解的作用域、闭包、原型链的设计思想在使用一段时间以后会有更深的理解。

常听到的设计模式刚开始学习了解的时候觉得真是没啥用啊，在你实际使用一段时间以后会发现，这些东西早已经被应用到你使用的各种工具包括你的代码中了。

另外注意，遇到卡壳别怕，继续往后看，带着疑问看，有问题随时网上查或者问chatgpt。

3. HTML的入门建议直接百度菜鸟教程即可

菜鸟教程的精华在于即时可视化 ，试着在本地创建一个index.html，用开发者工具做这些实验：

html 复制代码

<!-- 试着用语义化标签重构一个新闻网站 -->
<section>
  <article>
    <h1>标题</h1>
    <p id="content">旧内容</p>
  </article>
</section>
<script>
  document.getElementById('content').innerHTML = '新内容'; 
</script>

了解一些基础的标签，然后先把行内元素和块级元素搞清楚再说，然后试着去看看一些操作DOM的API，比如querySelector和createElement等等。

5. CSS的几个方面

样式的修改、如何布局、定位、层级、文档流。

6. 必须了解浏览器的工作原理

了解清楚当你在浏览器中输入一个url到页面展示的全过程：

dns怎么解析域名拿到IP地址的
https怎么建立客户端和服务端的连接的？三次握手、四次挥手、TLS是什么？
连接建立好以后，拿到请求的HTML，后面做了什么，DOM、CSSOM、渲染书、布局、绘制，DOMContentLoaded和Load有什么区别？
渲染阶段 ：重排（reflow）与重绘（repaint）的区别
缓存策略：http请求的缓存，浏览器的缓存

7. 怎么还不说框架，最后的最后在看框架

记住：框架主要解决的是工程复杂度问题，当你发现原生开发要写2000行代码却难以维护时，就是该拥抱它们的时候。

建议先掌握一门比如React，当你熟练掌握了React以后，Vue也就没什么难点了。

了解React的话需要了解怎么使用以及React背后的原理，它相比原生开发到底改善了什么？以及React周边Redux状态管理，为什么要有状态管理？

8. 前端工程化之打包工具Webpack、Vite

Webpack的配置可能让人抓狂，但它的核心思想很简单：

js 复制代码

// 想象你有个神奇盒子：
module.exports = {
  entry: './src/index.js', // 把散落的JS文件
  plugins: [new HtmlWebpackPlugin()], // 自动插入<script>标签
  module: {
    rules: [
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } // 把SCSS变CSS
    ]
  }
};

而Vite的崛起揭示了新趋势：利用ES Modules和原生浏览器特性，让冷启动速度提升10倍以上。

9. CI/CD：代码提交后的「自动驾驶」之旅

想象这样一个场景：你提交代码到GitHub后，自动完成：

✅ ESLint代码风格检查 → 失败则阻止合并

✅ Jest单元测试 → 覆盖率不足时发出警报

✅ 自动构建并部署到AWS S3 → 用户即刻看到更新

CI/CD其实就是说这件事情的。

章节结语

本章为你绘制了简单的知识地图，但真正的成长始于打开编辑器，亲手写下<h1>Hello World</h1>的那一刻。下一章，讲介绍一下工作中实际上怎么用HTML的。