让前端飞Web前端之路网页前端后台技巧(CSS+HTML)

作为前端开发,如何写好一个简历

2020-04-18  本文已影响0人  IT技术时代

通常在各个招聘网站,我们填写完一些信息后,网站就可以帮助我们生成一个很不错的简历。但是作为一名开发者,尤其是前端开发者,可能对这种简历并不满意。

这时候,相信有很多同胞们就希望能自己动手做一个很漂亮的web版的简历:

设计

有了需求,接下来就是设计了。包括界面的设计,和具体展示内容的设计。
在界面设计方面,我们可以去:Pinterest、Behance、Dribbble、花瓣、站酷等知名的设计展搜索简历或者resume,然后综合一下,做出一个适合自己的风格。
内容方面,我们可以看看传统简历的内容划分。我在制作的过程中将内容划分成了:

由于在浏览器中展示,为了好看,页面可能会很长。所以这里我把联系方式放在首屏展示,页脚也展示了一下。这样可以让浏览者便捷的联系到我。

环境搭建

Git,做代码管理版本控制。在这里我选择把源码托管在Github上,并创建了一个Github Page。
webpack,做自动化构建。包括对js、scss的打包,还可以创建一个基于nodejs的http server已经热部署能众多功能。webstrom,前端开发神器。不解释。

架构与编码

这 里,我采用了restful的开发风格。先做出了一个纯html的版本,然后再把里边展示的个人信息放在了一个json文件中。然后引入zepto和 vue.js两个js库。当然,如果你有耐心,也可以选择自己造轮子用原生的来写。这里我不想折腾,所以用了第三方。在这方面很赞同一个群友的说法:有轮 子就用呗,只要不是方的就好-.-
vue.js是用来渲染数据到html页面中的。zepto是用来发请求,获取数据用的。
编码调试,是最为机械的部分了,只要你是老司机,都是手起刀落嘛!

完善与点缀

做完上述功能,能不能添加点花样呢?时下css3这么火热,何不用css3添加一些过度动画,让页面中的信息展示的更自然。于是,设计一些过度效果,添加到页面中。这里我选择引入了wow.js。css3动画是自己写的。一共也没多少效果。

于是,就有了页面加载时的加载动画,有了页面滚动时,元素出现的动画。

web 版的基本上是由了。那么实际中如果需要纸质版呢?so easy,打印web版呗。于是基于上边的版本做了一个打印测试,结果不尽人意。于是我查了一下,有css3的媒体查询可以控制打印样式(@media print)。如此神器,便又是一番啪啪啪的编码调试。

最后,为了保护隐私。我选择了把真实名字在打印的时候才显示。在通常只显示了昵称。

总结

比起看书,可能我更习惯于这种以需求为驱动的学习吧。通过制作这个resume,学习了webpack的使用,学习了vue的使用。学习了css3的一些新特性。学习了flex布局。多动手吧-.-

从事全栈6年,专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)点:学习前端,我们是认真的

上一篇下一篇

猜你喜欢

热点阅读