Web-Dev-For-Beginners 课程作业实战使用 VSCode.dev 从零构建并部署个人简历网站【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本篇技术指南对应仓库内 8-code-editor/1-using-a-code-editor/assignment.md 这一动手作业。它以个人简历网站为载体把浏览器端代码编辑器 VSCode.dev 的完整开发链路串联起来从 GitHub 建仓、语义化 HTML 结构、现代 CSS 响应式布局到扩展实时预览、Git 版本控制与 GitHub Pages 部署。完成全部步骤后你将得到一份可直接分享给招聘方、可随时更新的在线简历同时掌握不依赖本地环境、随时随地的 Web 开发工作流。作业定位把 VSCode.dev 技能落到真实产物上这一份作业并不是孤立练习它承接自课程中的 “使用代码编辑器掌握 VSCode.dev”一课。在该课的末尾“Assignment”一节明确指出你需要把本课掌握的技能投入真实测试——用 VSCode.dev 在浏览器中构建一个专业的简历网站并用好课程涉及的各项编辑器能力。完成作业后你得到的不只是“会操作编辑器”的抽象知识而是一个兼备求职价值与代码说服力的真实项目。与其他模块如 Terrarium 植物养护小应用、太空射击游戏一样本作业遵循“先有教程、后有项目”的课程节奏教程负责讲解操作与原理作业负责把你推向完整的工作流演练。整个任务的目标可以被拆解为六项能力使用 VSCode.dev创建并管理一个完整的 Web 开发项目使用语义化 HTML 元素搭建专业的页面结构使用现代 CSS 技巧设计响应式布局使用基础 Web 技术实现可交互特性通过可分享 URL部署上线一个实时网站在整个开发过程中践行Git 版本控制最佳实践。开始前的前置条件一个 GitHub 账号在 github.com 注册免费已完成 VSCode.dev 课程中关于界面导航与基本操作的学习对 HTML 结构与 CSS 样式概念有基本了解。第一步创建 GitHub 仓库并初始化项目骨架真实世界的开发项目都从规范化的仓库初始化开始本次作业同样如此。Step 1在 GitHub 上创建专属仓库打开 github.com 并登录账号点击右上角的绿色 “New” 按钮或 “” 图标将仓库命名为my-resume也可以取john-smith-resume这类个性化名称添加简短描述Professional resume website built with HTML and CSS选择 “Public”公开确保招聘方能直接访问你的简历勾选 “Add a README file”先生成一份初始项目说明点击 “Create repository” 完成创建。仓库命名建议尽量使用能清楚表达项目用途的、专业化的描述性名称。无论是在求职分享还是在作品集评审中一个命名清晰的仓库都能给雇主留下好印象。Step 2在 GitHub 上创建入口文件 index.htmlVSCode.dev 要打开一个远程仓库前提是仓库里至少存在一个文件。因此我们需要先在 GitHub 网页端创建主 HTML 文件再切换到浏览器编辑器在新仓库页面点击 “creating a new file” 链接将文件名输入为index.html粘贴如下的最小 HTML5 骨架!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleYour Name - Professional Resume/title /head body h1Your Name/h1 pProfessional Resume Website/p /body /html填写提交信息Add initial HTML structure点击 “Commit new file” 保存。这段初始代码完成了哪些铺垫建立了规范 HTML5 文档结构包含语义化元素引入viewport meta 标签为响应式设计打下基础设置描述性页面标题会显示在浏览器标签页中形成专业内容组织的起点。第二步在 VSCode.dev 中打开项目仓库基础就绪后主要开发工作转移到 VSCode.dev——这个网页版编辑器提供专业 Web 开发所需的全部工具且不需要安装任何软件。Step 3通过远程仓库入口加载项目在新浏览器标签页中访问 vscode.dev在欢迎页点击 “Open Remote Repository”从 GitHub 复制仓库 URL粘贴到输入框中格式为https://github.com/your-username/my-resumeyour-username换成你的实际 GitHub 用户名按回车键加载项目。✅成功标志你应当能在左侧资源管理器中看到项目文件并且index.html已在主编辑区打开可编辑。如果你记不清精确 URL也可以用课程中讲过的命令面板按CtrlShiftPmacOS 为CmdShiftP打开命令面板输入 “open remote” 即可调出仓库打开器它还会记住你最近打开过的仓库。此外还有“URL 改写”技巧把任意 GitHub 仓库地址中的github.com替换为vscode.dev/github其余路径保持不变即可一键直达编辑模式。进入工作区后你会看到这些界面区域资源管理器侧边栏展示仓库文件与目录结构编辑区展示并编辑当前选中的文件活动栏提供源代码管理、扩展等功能的入口状态栏指示连接状态与当前分支等信息。第三步编写语义化的简历内容结构Step 4替换占位内容建立完整简历结构把index.html中的占位内容替换为下面的完整结构这份 HTML 为专业展示你的资质提供了坚实基础完整 HTML 简历结构点击展开!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 link hrefstyle.css relstylesheet link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css titleYour Name - Professional Resume/title /head body header idheader h1Your Full Name/h1 hr p classroleYour Professional Title/p hr /header main article idmainLeft section h2CONTACT/h2 p i classfa fa-envelope aria-hiddentrue/i a hrefmailto:your.emaildomain.comyour.emaildomain.com/a /p p i classfab fa-github aria-hiddentrue/i a hrefhttps://github.com/your-usernamegithub.com/your-username/a /p p i classfab fa-linkedin aria-hiddentrue/i a hrefhttps://linkedin.com/in/your-profilelinkedin.com/in/your-profile/a /p /section section h2SKILLS/h2 ul liHTML5 CSS3/li liJavaScript (ES6)/li liResponsive Web Design/li liVersion Control (Git)/li liProblem Solving/li /ul /section section h2EDUCATION/h2 h3Your Degree or Certification/h3 pInstitution Name/p pStart Date - End Date/p /section /article article idmainRight section h2ABOUT/h2 pWrite a compelling summary that highlights your passion for web development, key achievements, and career goals. This section should give employers insight into your personality and professional approach./p /section section h2WORK EXPERIENCE/h2 div classjob h3Job Title/h3 p classcompanyCompany Name | Start Date – End Date/p ul liDescribe a key accomplishment or responsibility/li liHighlight specific skills or technologies used/li liQuantify impact where possible (e.g., Improved efficiency by 25%)/li /ul /div div classjob h3Previous Job Title/h3 p classcompanyPrevious Company | Start Date – End Date/p ul liFocus on transferable skills and achievements/li liDemonstrate growth and learning progression/li liInclude any leadership or collaboration experiences/li /ul /div /section section h2PROJECTS/h2 div classproject h3Project Name/h3 pBrief description of what the project accomplishes and technologies used./p a href# target_blankView Project/a /div /section /article /main /body /html注意这段结构蕴含的几点设计意图页面被切分为header身份信息main主区域两大部分main内使用两个article——#mainLeft承载联系信息、技能、教育背景#mainRight承载个人简介、工作经历与项目作品每个区块都用sectionh2构成可读性很强的语义分组CONTACT 区借助 Font Awesome 图标类如fa-envelope、fab fa-github渲染邮箱、GitHub、LinkedIn 图标图标元素带有aria-hiddentrue声明其为装饰性内容这正呼应本课程关于可访问性的最佳实践。个性化定制指南将全部占位文本替换为真实信息根据你的经验水平与职业方向调整区块按需增删区块例如 Certifications、Volunteer Work、Languages为联系人、项目链接指向你的真实主页与作品。第四步创建配套样式与配置文件一个专业的网站需要有序的文件组织。在资源管理器中把鼠标悬停在项目文件夹名上点击出现的“新建文件”图标依次创建style.css负责样式与布局和codeswing.json用于预览扩展的配置。完整的 style.css现代简历样式代码点击展开/* Modern Resume Styling */ body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; line-height: 1.6; max-width: 960px; margin: 0 auto; padding: 20px; color: #333; background-color: #f9f9f9; } /* Header Styling */ header { text-align: center; margin-bottom: 3em; padding: 2em; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } h1 { font-size: 3em; letter-spacing: 0.1em; margin-bottom: 0.2em; font-weight: 300; } .role { font-size: 1.3em; font-weight: 300; margin: 1em 0; } /* Main Content Layout */ main { display: grid; grid-template-columns: 35% 65%; gap: 3em; margin-top: 3em; background: white; padding: 2em; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } /* Typography */ h2 { font-size: 1.4em; font-weight: 600; margin-bottom: 1em; color: #667eea; border-bottom: 2px solid #667eea; padding-bottom: 0.3em; } h3 { font-size: 1.1em; font-weight: 600; margin-bottom: 0.5em; color: #444; } /* Section Styling */ section { margin-bottom: 2.5em; } #mainLeft { border-right: 1px solid #e0e0e0; padding-right: 2em; } /* Contact Links */ section a { color: #667eea; text-decoration: none; transition: color 0.3s ease; } section a:hover { color: #764ba2; text-decoration: underline; } /* Icons */ i { margin-right: 0.8em; width: 20px; text-align: center; color: #667eea; } /* Lists */ ul { list-style: none; padding-left: 0; } li { margin: 0.5em 0; padding: 0.3em 0; position: relative; } li:before { content: ▸; color: #667eea; margin-right: 0.5em; } /* Work Experience */ .job, .project { margin-bottom: 2em; padding-bottom: 1.5em; border-bottom: 1px solid #f0f0f0; } .company { font-style: italic; color: #666; margin-bottom: 0.5em; } /* Responsive Design */ media (max-width: 768px) { main { grid-template-columns: 1fr; gap: 2em; } #mainLeft { border-right: none; border-bottom: 1px solid #e0e0e0; padding-right: 0; padding-bottom: 2em; } h1 { font-size: 2.2em; } body { padding: 10px; } } /* Print Styles */ media print { body { background: white; color: black; font-size: 12pt; } header { background: none; color: black; box-shadow: none; } main { box-shadow: none; } }这份 CSS 用到了哪些现代技术点用CSS Grid实现专业排版main { display: grid; grid-template-columns: 35% 65%; }让左栏联系方式/技能与右栏工作经历/项目形成固定比例分栏用线性渐变linear-gradient(135deg, #667eea 0%, #764ba2 100%)绘制页头横幅配合border-radius圆角与box-shadow阴影形成现代卡片质感通过transition与:hover实现链接颜色的平滑过渡提升交互反馈借助media (max-width: 768px)响应式断点把双栏布局折叠为单栏、去掉左栏分割线并缩放标题字号确保手机阅读体验借助media print打印样式去掉渐变色与阴影、转黑白色并调整字号让浏览器“打印成 PDF”时仍能得到干净的纸质简历效果——这是针对“拒绝 PDF 求职”叙事的一个务实补充用li:before { content: ▸; }的自定义列表符号与 Font Awesome 图标统一了视觉语言。如果你希望微调配色只需要替换两处主色#667eea品牌主紫蓝与#764ba2渐变深紫及其在h2、链接、图标上的衍生引用整站风格就会随之改变。codeswing.json 的作用CodeSwing 会在工作区根目录寻找codeswing.json作为挥杆swing的配置文件。作业给出的最小可用配置如下{ scripts: [], styles: [] }从作业中的用法可以推断scripts与styles两个数组分别用于把外部的 JavaScript 文件与 CSS 样式表注入到实时预览环境中例如把后文会用到的 Font Awesome CDN 链接声明进来对纯 HTML 本地style.css的简历项目而言使用空数组即可正常运行。保留此文件的意义在于它明确告诉 CodeSwing 当前目录是一个可预览的项目swing从而触发预览面板的加载。第五步安装 CodeSwing 扩展获得实时预览扩展为开发体验注入“实时预览”与更顺畅的工作流CodeSwing 就是 Web 项目中尤其实用的一个。Step 5/6安装 CodeSwing 扩展点击活动栏中的Extensions扩展图标在市场搜索框中输入 “CodeSwing”从结果中选中 CodeSwing 扩展点击蓝色 “Install” 按钮完成安装。CodeSwing 能为你提供什么编辑的同时实时预览网站效果修改即时反映无需手动刷新支持 HTML、CSS、JavaScript 等多种文件类型提供一站式的集成开发体验。安装后的立竿见影效果编辑器内会出现简历网站的实时预览你可以一边改代码一边看到页面如何变化。从上面的实际效果可以看到安装后编辑器变为分屏视图左侧是index.html、style.css的代码右侧是 CodeSwing 实时渲染出的简历页面页头、CONTACT、ABOUT、SKILLS 等区块一目了然。这意味着代码与预览同屏展示所见即所得输入即更新交互与样式调整立刻可见你可以在预览中直接测试链接与交互借助预览工具还可以模拟不同设备尺寸进行响应式测试。 关于扩展生态上一课内容 8-code-editor/1-using-a-code-editor/README.md 还介绍过 Live Server、Prettier、Auto Rename Tag、Bracket Pair Colorizer、GitLens 等入门推荐以及禁用、卸载、更新的管理技巧。基本原则是扩展虽好不宜堆砌——保持环境轻量只保留真正提升效率的工具。第六步Git 版本控制与发布简历网站完成后用 Git 保存你的工作成果并推送到线上。Step 7提交更改点击活动栏中的Source Control源代码管理图标在 “Changes” 区检查所有新建与修改过的文件点击每个文件旁的 “” 号把改动暂存staging编写描述性提交信息例如Add complete resume website with responsive designImplement professional styling and content structure点击对勾✓提交并推送改动。推荐的提交信息示例Add professional resume content and stylingImplement responsive design for mobile compatibilityUpdate contact information and project links专业提示良好的提交信息能帮助你追踪项目演进也向雇主展示你对细节的把控——这些都是企业看重的素质。写提交信息时用 “Add / Fix / Update / Remove” 等动词开头保持“短句而非长文”的克制风格即可。回到仓库查看在线结果提交完成后使用左上角的汉堡菜单☰即可返回 GitHub 仓库查看已提交的变更。至此你的简历网站已经处于版本控制之下随时可以部署或分享。成果验收与部署上线恭喜你已经用 VSCode.dev 创建了一个专业简历网站。它证明你掌握了以下技术能力仓库管理创建并组织了一个完整的项目结构Web 开发用现代 HTML5 与 CSS3 构建了响应式站点版本控制用有意义的提交实践了规范 Git 流程工具熟练度高效运用 VSCode.dev 的界面与扩展体系。在职业层面的收获包括可分享 URL 带来的在线形象、替代传统 PDF 的现代化呈现、可验证的技能证据以及可不断迭代优化的易维护基础。部署方案让简历真正可被访问GitHub Pages推荐进入 GitHub 仓库的 Settings滚动到 “Pages” 区块选择 “Deploy from a branch”分支选择main站点将发布在https://your-username.github.io/my-resume形式的地址上。其他备选平台Netlify支持自动部署与自定义域名Vercel部署迅速、托管特性现代GitHub Codespaces提供内置预览的云开发环境。进阶增强清单技术向改进JavaScript 交互加入平滑滚动或交互元素可与课程 2-js-basics 的函数与逻辑知识衔接深色模式切换实现跟随用户偏好的主题切换联系表单让招聘方可直接与你沟通SEO 优化补充 meta 标签与结构化数据提升搜索可见度。内容向增强项目作品集链接到你的 GitHub 仓库与在线演示技能可视化加入进度条或技能评级系统推荐语区块收录同事或导师的评价博客集成用博客栏目记录学习历程。GitHub Copilot Agent 模式挑战作业还鼓励使用 Agent 模式完成一次综合挑战在现有简历网站上实现下列高级特性——加入带平滑过渡的深色/浅色主题切换制作带动画进度条的交互式技能区实现带表单校验的联系表单添加带悬停效果与模态弹窗的项目作品集板块新增含至少 3 篇学习心得文章的博客栏目通过 meta 标签、结构化数据与性能优化达成SEO 目标使用 GitHub Pages 或 Netlify部署增强版站点在 README.md 中配图记录所有新特性。这份增强成果应当体现对响应式设计、JavaScript 交互与现代部署流程的熟练掌握。挑战扩展方向 Mobile-First 重构用 CSS Grid 与 Flexbox 以移动优先思路彻底重建站点 SEO 全面优化落实 meta 标签、结构化数据与性能优化 多语言支持引入国际化机制支持多种语言 分析接入接入流量统计以了解访客行为并优化内容 性能优化在各评分维度上争取更高的 Lighthouse 分数。复习与自学建议进阶 VSCode.dev 能力系统阅读官方 vscode.dev / VSCode Web 文档熟悉命令面板、键盘快捷键、工作区设置、多根工作区与浏览器内终端集成进阶者可以进一步学习 GitHub Codespaces 等云开发环境。Web 开发最佳实践响应式设计研究 CSS Grid 与 Flexbox本仓库 3-terrarium/2-intro-to-css/README.md 提供了配套讲解可访问性可对照 WCAG 指南复习课程 1-getting-started-lessons/3-accessibility/README.md性能与 SEO 可以借助 Lighthouse 等工具实践。职业发展持续创作作品来充实作品集参与开源项目积累协作经验把简历网站分享到开发者社区征求意见保持对 Web 技术趋势的持续跟进。下一步行动把你的简历网站分享给朋友、家人或导师征求意见根据反馈迭代改进。请记住这个项目不只是一份简历——它是你作为 Web 开发者成长轨迹的实证。相关完整任务说明可随时回查 8-code-editor/1-using-a-code-editor/assignment.md。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考