前言
我是一枚一心只想“搞钱”的,2021年应届的程序媛,毕业于南方某二本院校,长相一般,成绩一般,考研失利。
从二月份开始,自学了四个月的前端,在这个学习过程中,我关注了一个前端公众号“程序员黑叔”,于是加了黑叔的微信,总是请教黑叔,有耐心,能力很强。
2021年6月,我毕业了,拿着毕业证和闺蜜,搭上了从长沙南开往深圳北的列车,从此踏上了猪脚饭和房租的日子。
初来乍到,简历海投
对于没有收入的我来说,房租1500,有点贵,和闺蜜合租在了宝安区。开始投简历,石沉大海,没人理会,以至于我晚上一个人躲在厕所里偷偷的哭了,不敢出声,不想让闺蜜知道,担心影响她的心态。
大晚上的,我给黑叔发了一条微信:“能帮我看看简历并指导一下吗?谢谢!“
黑叔竟然回我了:“那你发过了来吧!”
过了几分钟,黑叔:“把学历-本科至前,毕业学校写最后,不要专门写是应届生,删掉,毕竟不是校招了,项目经验的就不要写烂大街的高仿XXX了。换个具体的项目名。然后找待遇低一点的公司投投看,反正你也没有实习经历,最好是那种最高都只能10k的,别看招聘写着一到三年经验,其实HR会给你机会的!”
我:“为什么?”
黑叔:“因为深圳一大批挣不到钱的小公司,有的甚至靠着融资维持生计,而且你价格低,有利于这类公司的长远发展。”
果然第二天上午投出去的简历,下午真有HR打电话给我约面试了。(我是海投,看见5-10k的区间就都投了一遍)
offer到手
陆陆续续,约了六场面试,都是一些不知名的公司,我就不一一列举了,我拿到了一个offer。
我想分享来了,把我的经历讲给毕业还未找到工作的人听。
我每次去都会反问自己,妆画好了没有?出门头发洗了没有?面试时脸上有没有微笑?我要面试官留下好的印象,毕竟未来我可能是他的同事。
拿到这个offer,面试的场景还是历历在目。
面试地点是中国储能大厦XX楼,需要前台登记扫码进去,进去后我到了指定楼层,打电话给HR,HR给我安排了面试室,到了一杯水,我静静的等着的。过了数分钟,面试官敲了一下门,是一个胖胖的,有点油腻,胡子毛孔很粗的大哥,我礼貌的问了一声好。
面试开始了,面试官:”你简单介绍一下你自己?“
我:”我是...,省略几百字...“
面试官:“HTML5和CSS3有哪些新特性”
我:“HTML5新增有canvas,video和audio标签,其属性有autoplay/controls/height/loop/width/preload等,还有语义化标签,article/nav/header/p/aside/footer/hgroup等,还有表单控件,Type属性值的新增。CSS3新增有新选择器,过渡(transition),动画(animation),旋转(transform),flex, @media媒体查询,新文本属性,新边框属性,渐变属性等”
面试官:“那你说说你对Flex的使用”
我:“Flex有主轴和交叉轴,其属性有flex-direction,flex-wrap ,justify-content ,align-items ,align-content等,应用场景比如各类居中,或者左边固定,右边自适应。”
面试官:“那你随意挑一个,手写一下水平垂直居中或者左边固定,右边自适应的代码”
我从包,拿出笔,一分钟不到就写完了。
(以下是水平垂直居中的参考答案)
第1种
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
}
第2种
/** 2 **/
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
第3种
/** 3 **/
.wraper {
.box {
display: flex;
justify-content:center;
align-items: center;
height: 100px;
}
}
第4种
/** 4 **/
.wraper {
display: table;
.box {
display: table-cell;
vertical-align: middle;
}
}
(以下是左侧宽度固定,右侧宽度自适应的参考答案)
第1种
/*方法一:BFC(块级格式化上下文)*/
.container{
width:1000px;height:400px;border: 1px solid red;
}
.left{
width:200px;height:100%;background: gray;
float: left;
}
.right{
overflow:hidden; /* 触发bfc */
background: green;
}
第2种
/*方法二:flex布局 */
.container{
width:1000px;height:400px;border:1px solid red;
display:flex; /*flex布局*/
}
.left{
width:200px; height:100%;background:gray;
flex:none;
}
.right{
height:100%;background:green;
flex:1; /*flex布局*/
}
第3种
/* 方法三:table布局 */
.container{
width:1000px;height:400px;border:1px solid red;
display:table; /*table布局*/
}
.left{
width:200px; height:100%;background:gray;
display:table-cell;
}
.right{
height:100%;background:green;
display: table-cell;
}
第4种
/*方法四:css计算宽度calc*/
.container{
width:1000px;height:400px;border:1px solid red;
}
.left{
width:200px;height:100%;background:gray;
float:left;
}
.right{
height:100%;background:green;
float:right;
width:calc(100% - 200px);
}
第5种
/*方法五:margin-left方式*/
.container{
width:1000px;height:400px;border:1px solid red;
}
.left{
float:left;width:200px;border:1px solid red;height:100%;background:gray;
}
.right{
height:100%;border:1px solid blue;width:auto;margin-left:200px;
}
面试官:“你做过移动端适配吗?原理是什么?”
我:“一般使用rem或vw进行适配,caniuse网站,显示rem支持性更好,rem适配的本质是通过动态设置html的font-size来改变大小,其随之而变,rem用于移动端网站,如门户网等,而vw用于简单的活动页,如邀请页等,vw+rem可结合使用,”
面试官:“移动端1px问题,你听说过吗?你之前是怎么解决的?”
我:“其实有很多种方法,媒体查询(dpr)+物理像素,使用1px的边框图片或者背景图片,伪类 + 媒体查询(dpr)+ transform:scale(),viewport + rem,box-shadow,postcss-write-svg插件等”
面试官:“你看过对vue能熟练使用吗?”
我:“能!”
面试官微微一笑:“我们这边是这样的,我们公司呢,现在是为商家提供活动服务的,以H5动画页面为主,管理系统为辅,如果你能够接受的话,我们继续下一面。”
我:“接受”
面试官:“你等等,我出去一趟。”
过了五分钟,HR来了,开始聊人生,聊规划,万变不离其宗就是为了那句“回家等通知”。
HR:“聊了这么多,已经七点了,我们这边已经下班一个小时,等我和面试官再沟通一下,明天给你回复,你先回去吧。”
我:“谢谢”,拿起我包,口水都讲干了,拖着疲惫的身子,和干饭人挤地铁回家,该死的死亡一号线。
第二天,电话打来了,HR:“给你定位的是初级前端,你是应届生,没什么经验,可以给到的薪资是6k,五险一金按3000是基数缴纳,朝九晚六,不加班,不知道你接不接受?”
我:“感谢你们的认可,可以让我考虑一天可以吗?”
HR:“可以的。”
虚心请教
考研失利,自学四个月,一个没有真实经验的应届女孩,我到底要不要接受这6k的offer呢?
亲,点这涨工资