秋招实习季,教你制作在线简历
这篇教程教你制作的简历本质上是部署在Gitee上,依赖Gitee Pages服务的静态页面,制作它需要的知识仅包括前端三件套,即HTML
、CSS
和Javascript
。当然,即使你没有任何代码基础,也可以按照这篇教程的步骤制作出自己的在线简历。
提前看看我们的简历效果:传送门
本文参考了镜花水月大佬的开源项目:传送门,感谢开源!
西柚西的校友可以访问我的个人博客,有一些按钮和相关示例的优化!
准备工作
在开始之前,你需要进行一定的准备,包括:
- 注册一个Gitee账号,并完成实名认证
- 准备你的简历素材:
- 一张证件照
- 一张背景图片(可以用默认的)
- 相关文案
注册Gitee并实名
Gitee是一款基于Git的代码托管和研发协作平台,地址是:传送门
注册你的gitee账号,注册成功后自动登录,进入工作台,点击右上角的头像-账号设置-实名认证:
仔细阅读实名认证的相关要求,需要注意的是:
- “身份证照片”必须是照片,而不能是扫描件
- 手持身份证照片须严格按要求拍摄
- 单幅图像大小不超过2MB
实名认证通常在1个工作日内审核完毕,周末不算工作日。
网站工具箱
这里给出两个本教程中可以用到的工具性网站:
菜鸟教程——前端三件套现学现用
阿里巴巴矢量素材库——可以找到一些icon
项目的拉取与部署
进入我的仓库:传送门
点击右上角的Fork:
如果能顺便点一下右侧的Star就好了。
代码拉取完成后,点击页面右侧的管理,进入项目的基本信息页面:
在基本信息页面,你可以根据自己的需要调整项目的名称和访问路径,并点击下方的保存:
最终的访问路径就是https://xxx.gitee.io/resume/
修改完成后,点击右侧的服务,选择其中的Gitee Pages:
勾选强制使用HTTPS,点击启动,即可完成部署:
至此,你已经完成了部署,如一切操作无误,可以直接点击上方的网站地址,访问我们在教程开始时访问过的页面:
调整内容
在调整内容之前,有些必要的HTML
知识和基本工具可以提前了解一下,使你后续的简历编辑工作更加顺利。
Google Chrome开发者工具
如果你使用的是谷歌浏览器(火狐和Microsoft Edge类似),在简历的页面中单击右键,选择检查:
点击左侧小方块中的按钮,再点击网页中的某个元素,即可查看该元素在源代码中的位置:
尝试在这里修改文案,发现网页上的内容确实会随之改变:
但是,在开发者工具里进行的修改并不会被保存,因而它起到的作用只是帮我们找到某个想修改的元素在源代码中的位置。真正的源代码文件是项目中的index.html
,后续会对其进行详细介绍。
HTML知识储备
一定的html基础可以让你更加灵活地编辑你的简历,如果看不懂也不要紧,可以跳过本部分。
与大家比较熟悉的python
和C++
不同,HTML
不是逻辑语言,而是一种标记语言,即不涉及逻辑关系的语言,仅使用某些约定好的标记,区分不同的网页结构。我们平时阅览的网页内容,可以理解为存放在一个个不同的标签里。
既然是标记语言,就应该有一种规定的标记规则——标签使用尖括号<>
包裹,分为单标签和双标签:
- 双标签较为常见,一般用于储存文本内容或规定网页结构,比如
<p></p>
标签中包裹了段落内容,<ul></ul>
标签中包裹了无序列表等,可以参考下面的案例; - 单标签一般用于储存多媒体元素,如图片、视频等,比如
<img src="link.jpg">
是一个图片标签,可以显示图片link.jpg
,可以参考下面的案例;
文本标签
代码:
<span>纯文本标签span</span>
<p>段落标签p</p>
<b>加粗文本标签b</b>
<ul>无序列表ul<li>列表的行li</li><li>列表的行li</li>
</ul>
分割线<hr/>
换行符<br/>
<mark>标记</mark>
对应的效果依次如下:
纯文本标签span
段落标签p
加粗文本标签b
- 无序列表ul
- 列表的行li
- 列表的行li
分割线
换行符
标记
媒体标签
本项目中应用到的媒体标签主要有两种:图像标签<img>
和矢量图标签<svg>
,其中:
- 图像标签
<img>
的属性包括src
即图像的地址,本项目中采用相对路径的形式引用图片alt
即图像的描述,本项目中可有可无
给出一个完整的图像标签案例以供参考:
<img src="https://img-1306037672.cos.ap-beijing.myqcloud.com/avatar.jpeg" alt="avatar">
- 矢量图标签
<svg>
在本项目中主要通过之前提到的iconfonts获取,我们可能需要调整的只有它的宽和高,即width
和height
属性。
在iconfonts中选择想要的素材后,点击下载图标:
预设合适的矢量图大小,点击复制SVG代码,后续插入到index.html
中即可。
编辑index.html
编辑文件index.html
有两种方式——下载编辑和在线编辑,由于本文的定位是“零基础”,因而采用在线编辑的方式给出参考教程,如有合适的代码编辑器,可以选择下载后编辑,下载方式:
下载到本地编辑的好处是,可以在本地使用浏览器打开
index.html
,实时地查看你的修改给它带来了什么变化,而如果采用在线修改的方式,每次都要重新部署后才可以通过链接访问,因此我建议对html语言没有太多了解的朋友,优先选择下载编辑,一边改一边看着。
本教程中考虑到工作量和后续微调的需要,采用在线编辑的方式展示基本流程。
我们点击Web IDE,进入在线编辑页面:
选择右侧的index.html
文件,开始编辑:
别紧张,不是要你写代码,是要你改文案。
到这一步,我们可以结合之前提到过的Google Chrome开发者工具,定点修改自己想调整的内容,如之前查看的标题:
代码源文件中,我写了很多注释,可以参考注释修改内容。
修改时,点击编辑器左上方的小加号,可以实现代码的暂存,点击下方的提交,可以将所有修改保存到项目,需要注意,每次提交的时候,都需要在“提交信息”栏中记录本次的更新内容,且每次提交前都需要先暂存,再提交:
每次修改,要想生效,都需要重新部署Gitee Pages服务,具体方法是点击服务-更新。
由于Gitee Pages服务的违规内容检测非常敏感,建议你在调整内容的时候进行频繁的更新,以防改了一堆内容,结果违规了,还要一点点去找违规在哪里。
插入图片
由于本文的定位是“零成本”,因此没有租对象存储,而是采用将图片放置在项目路径assets/images/
中,再采用相对路径的方式调用,如简历中的头像,在源代码中是这样的:
我们可以看到,<img>
标签的属性src
值为assets/images/avatar.jpeg
,对应我们项目中的:
因此,如果我们需要修改图片,或插入新图片,只需要将图片上传到项目中,再使用<img>
标签引用即可。为方便管理,我们统一将图片存放在assets/images/
路径下,图片名尽量不含中文。
修改图标
由于上传图片有点麻烦,且万一图床崩了,icon也无法正常显示,因此简历中采用矢量图的形式加载icon,矢量图素材主要来源于阿里巴巴矢量素材库,使用时只要将其添加到对应的文本之前,即可正常显示。
以“个人能力”旁边的图表为例,首先找到它的位置:
在编辑器中,可以使用快捷键
control+f
实现查找功能,以便找到对应的位置,macOS用户的快捷键是command+f
向右滚动少许,可以看出它的宽和高都是25px,为免影响整体的布局和logo大小的一致性,新的logo大小也应该是25px:
我们在iconfonts中找到合适的图标,复制SVG代码:
像这样从下往上选择一整行,直接粘贴即可:
学习与进阶
如果你有一定的前端基础,可以自行调整assets/css
路径下的CSS样式。想学习的话,也可以参考下面的教程:
- html教程:传送门,决定了网页的基本结构;
- CSS教程:传送门,决定了网页的样式;
- JavaScript教程:传送门,决定了网页的交互;
上面的教程讲解非常清晰,并且具有直观、可运行的代码示例,可供参考学习。
如有问题,可直接在评论区留言!
秋招实习季,教你制作在线简历相关推荐
- 求职特训营火热来袭 阿里大咖教你制作专业简历
**简介:**金三银四黄金求职季,阿里专家倾心打造五节求职精品课程,从面试官角度切入讲解,帮助同学们五天快速掌握简历过关的技能,更有资深专家直播在线答疑! 一份高通过率的简历是什么样子?为什么你投了这 ...
- 求职特训营火热来袭,阿里大咖教你制作专业简历
**简介:**金三银四黄金求职季,阿里专家倾心打造五节求职精品课程,从面试官角度切入讲解,帮助同学们五天快速掌握简历过关的技能,更有资深专家直播在线答疑! 一份高通过率的简历是什么样子?为什么你投了这 ...
- 【C++】秋招实习面经汇总篇
C++面经汇总 系列综述: 目的:本系列是个人整理为了秋招和实习面试的,整理期间苛求每个知识点,平衡背诵量与深入程度. 来源:材料主要源于阿秀的笔记和<王道考研复习指导>进行的,每个知识点 ...
- 秋招实习招聘面经、笔经,攒人品啦
2020~面筋.笔试 笔试.面试 建信金融科技公司 移动研究院秋招 百度测开秋招 美团测开秋招正式---基础平台 京东测开秋招 网易有道测开秋招 搜狗测开秋招 字节跳动测开实习生 农行信息科技岗秋招笔 ...
- 【字节跳动】秋招/实习转正,总有一种方法适合你
秋招太难?实习转正也能加入字节跳动! 公司介绍: 成长环境: 秋招: ⚠️内推码:EJSDRMT 工作地点: 薪资福利: 招聘职位: 投递邮箱: 公司介绍: 字节跳动是全球增长最快的科技公司之一,月活 ...
- 2018秋招求职地图 | 教你如何打造重量级求职敲门砖
专栏 | 九章算法 网址 | www.jiuzhang.com 秋招已经打响,还在犹豫该投哪家公司?这里为你绘出一份2018求职地图,含括美国几个主要互联网领域的Top5 家 IT 公司,快来看有你喜 ...
- 【校招VIP】秋招进行中,时间来不及?简历投递过不去?你需要有特色亮点的项目
VIP的服务不一样的校招,大家好,我是校招VIP的大拿老师.今天介绍一下我们进行校招项目的两种模式,第一种是老用户知道的特色业务,在线实习模式,另外一种,就是课程模式. 目前我们对在线实习业务的项目体 ...
- 制作在线简历(二)——基本信息
一.头像 1.先在顶部来个头像,头像再做几个动画特效,就是鼠标移上去的时候边框转180°,需要注意的是图片不能随着边框也转动 所以得把图片和边框放在两个标签中,两个标签都用绝对定位来控制位置,我以前也 ...
- 静态网页托管_求职季,教你制作一份精美的在线网页简历,程序员必看!!
引言 近期和学弟交流了一下找实习的相关的话题,谈到了简历这块.虽然近期没有找工作的打算,但还是会不定期的更新自己的简历. 于是将自己的简历分享了一下,没想到得到了这样的评价,心里还是挺高兴的. 简历的 ...
最新文章
- 对List中对象的去重
- git本地ben远程分支_Git本地分支和远程分支关联
- Java_异常_04_ OutOfMemoryError系列
- 计算机函数公式中怎么合并合并,Excel用函数和公式瞬间实现把表格全部合并到一个表中去...
- Linux 统计文件行数,字节数。
- python的三维图片_python如何做三维图
- 浙江电信网上营业厅的一个BUG(有更新)
- 伯努利数 + 自然数幂( Zoj2865 + 51Nod1228 + 51Nod1258 + 51Nod1822)
- 【UCOSIII操作系统】软件定时器篇
- Cmake编译时无法打开包括文件: “pthread.h”
- hbuilderX连接雷电模拟器
- [canvas] 万有引力
- 怎么打造云计算的碎片计算方式
- 拨测技术确保网络稳定性和服务质量
- 如何修改、缩小截图图片大小,压缩图片。
- 小心肝队-冲刺日志(第七天)
- 27岁从业软件测试5年的我被无情的辞退了
- 四轴无人机那些事 番外篇 2 加速度计
- Java基础知识之静态
- 2022年第31届中国国际信息通信展览会