从文科生到前端工程师：用AIGC思维打造你的第一份技术简历
大家好，我是小文。曾经是一名历史系学生，如今是一名靠写代码吃饭的前端工程师。我写这篇教程，是因为在我自学转码的初期，总被“技术探索”和“实践解决方案”这类高大上的词吓到——它们听起来像是只有CS科班出身的人才能玩转的东西。
但事实并非如此。今天，我就用最直白的语言，带你完成一个技术探索与实践解决方案的完整闭环：用前端技术，做一个能展示你技能、还能动态更新的个人简历页面。这个项目不仅能帮你理解前端开发的核心逻辑，还能直接放进你的求职作品集！
一、前端是什么？它和“简历”有什么关系？
简单说，前端（Frontend）就是用户看到并能交互的网页部分。比如你打开一个招聘网站，看到的按钮、文字、动画，都是前端工程师写的代码渲染出来的。
而“简历”在这里不仅是求职工具，更是你技术能力的可视化载体。传统PDF简历是静态的，但如果你能做一个可交互、能自动更新技能标签、甚至集成AI推荐岗位功能的在线简历，面试官一定会眼前一亮。
我当初学的时候，第一个作品就是自己的简历页面。虽然简陋，但它帮我拿到了第一份实习offer！
二、环境准备：5分钟搭建你的开发“工坊”
别担心，前端开发不需要复杂的安装。我们只需要三样东西：
| 工具 | 作用 | 安装方式 |
|---|---|---|
| 浏览器（推荐 Chrome） | 运行和调试网页 | 系统自带或官网下载 |
| 代码编辑器（推荐 VS Code） | 写代码的地方 | code.visualstudio.com 下载安装 |
| Git（可选） | 代码版本管理 | 安装后终端输入 git --version 验证 |
操作步骤：
- 打开 VS Code
- 点击
文件 > 新建文件夹，命名为my-resume - 在该文件夹中新建三个文件：
index.htmlstyle.cssscript.js
恭喜！你的前端开发环境已就绪。
三、核心概念：HTML + CSS + JavaScript 是什么？
前端开发有三大基石，我用“盖房子”来比喻：
- HTML = 房子的骨架（结构）
- CSS = 墙纸、油漆、家具样式（外观）
- JavaScript = 电灯开关、智能门锁（交互行为）
1. HTML：定义内容结构
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的技术简历</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>张三</h1>
<p>自学转码的前端新人</p>
<div id="skills">技能标签将在这里显示</div>
<script src="script.js"></script>
</body>
</html>
注意：
<link>引入 CSS，<script>引入 JS，顺序不能错！
2. CSS：美化页面
/* style.css */
body {
font-family: "微软雅黑", sans-serif;
background-color: #f5f5f5;
padding: 40px;
}
h1 {
color: #2c3e50;
font-size: 36px;
}
#skills {
margin-top: 20px;
padding: 10px;
background: white;
border-radius: 8px;
}
3. JavaScript：让页面“活”起来
// script.js
const skills = ["HTML", "CSS", "JavaScript", "Git"];
const skillsDiv = document.getElementById("skills");
skills.forEach(skill => {
const span = document.createElement("span");
span.textContent = skill;
span.style.margin = "5px";
span.style.padding = "4px 8px";
span.style.backgroundColor = "#3498db";
span.style.color = "white";
span.style.borderRadius = "4px";
skillsDiv.appendChild(span);
});
现在，打开 index.html 文件（用浏览器打开），你会看到一个带技能标签的简历页面！这就是你的第一个“技术探索与实践解决方案”——用代码动态生成内容，而不是手动写死。
四、实战项目：打造一个可扩展的简历系统
接下来，我们升级这个简历页面，让它具备“探索”和“解决实际问题”的能力。
目标功能：
- 技能标签从本地数组读取 → 可配置
- 点击“添加技能”按钮，动态新增 → 交互性
- 数据保存到浏览器本地 → 持久化
步骤 1：改造 HTML，加入输入框和按钮
<!-- 在 index.html 的 <body> 中增加 -->
<input type="text" id="newSkill" placeholder="输入新技能">
<button onclick="addSkill()">添加技能</button>
步骤 2：重构 JavaScript 逻辑
// script.js（完整版）
// 从 localStorage 读取技能，若无则用默认值
let skills = JSON.parse(localStorage.getItem("skills")) ||
["HTML", "CSS", "JavaScript"];
function renderSkills() {
const skillsDiv = document.getElementById("skills");
skillsDiv.innerHTML = ""; // 清空旧内容
skills.forEach(skill => {
const span = document.createElement("span");
span.textContent = skill;
span.style.margin = "5px";
span.style.padding = "4px 8px";
span.style.backgroundColor = "#3498db";
span.style.color = "white";
span.style.borderRadius = "4px";
skillsDiv.appendChild(span);
});
}
function addSkill() {
const input = document.getElementById("newSkill");
const newSkill = input.value.trim();
if (newSkill && !skills.includes(newSkill)) {
skills.push(newSkill);
localStorage.setItem("skills", JSON.stringify(skills)); // 保存到本地
renderSkills();
input.value = ""; // 清空输入框
}
}
// 页面加载时渲染
renderSkills();
步骤 3：测试效果
- 刷新页面，技能依然存在（因为用了
localStorage） - 输入 “React”，点击“添加技能”，新标签立刻出现
- 关闭浏览器再打开，数据还在！
这就是“实践解决方案”的体现：用户需要动态管理技能，我们用前端技术实现了低成本、高可用的方案。
五、新手常见问题解答（FAQ）
Q1：为什么我的页面在浏览器里是空白的？
- 检查文件名是否正确（
index.html，不是Index.html） - 检查
<script>标签路径是否正确（应为src="script.js"） - 打开浏览器开发者工具（F12），看 Console 是否有报错
Q2：localStorage 是什么？安全吗？
localStorage是浏览器提供的本地存储，只保存在你自己的电脑上，不会上传到服务器。- 适合存非敏感数据（如技能列表、主题偏好）。不要存密码！
Q3：能不能把简历部署到网上让人访问？
当然可以！推荐两个零成本方案：
- GitHub Pages：免费、简单，适合静态页面
- Vercel：一键部署，支持自定义域名
我的第一份简历就是用 GitHub Pages 发布的，链接直接写在求职邮件里，HR点开就能看到会动的简历！
六、学习建议：下一步怎么走？
你已经完成了从“零”到“能做出有用产品”的跨越。接下来，建议按以下路径深入：
1. 夯实基础（1-2周）
- 学习 HTML 表单、语义化标签（
<header>,<section>） - 掌握 CSS Flexbox / Grid 布局
- 理解 JavaScript 变量、函数、事件处理
2. 引入现代工具（2-4周）
- 学习使用 VS Code 插件（如 Live Server，实时刷新页面）
- 尝试 Git 基础命令（
git init,git add,git commit） - 了解 响应式设计，让你的简历在手机上也好看
3. 向 AIGC 融合进阶（长期）
- 用 AI 工具生成简历内容初稿（如用大模型总结项目经历）
- 接入 API 获取最新岗位信息（如爬取招聘网站关键词）
- 用 自然语言控制简历样式（例如：“把技能标签改成绿色”）
技术探索的本质，不是追逐最新框架，而是用现有工具解决真实问题。你的简历页面，就是最好的起点。
结语：你的代码，就是你的简历
作为一名从文科转码的工程师，我深知“技术探索”听起来很遥远，但其实它就藏在你每一次尝试、每一次调试、每一次解决问题的过程中。
今天你做的这个简历页面，虽然只有几十行代码，但它代表了一种用技术主动创造价值的思维方式——这正是所有科技公司最看重的能力。
所以，别等“准备好”才开始。写一行代码，胜过十篇观望。你的第一个作品，可能粗糙，但它是你技术生涯的真正起点。
现在，打开你的 VS Code，写下第一行 <h1>Hello, Future Developer!</h1> 吧。你的未来简历，正等着你亲手构建。
评论 0