大三前端实习日志

大三暑期选择实习:

工作内容:前端web实习
实习地点:武汉光谷
公司规模:创业型公司,前端开发人数为9人,实习生5名

1.实习内容总结:

1.前端html+css页面结构培训

实习内容:为完成UI设计稿到页面的实现。使用Photoshop切图,html+css完成页面制作
实习完成时间:5天
实习过程


前期: 到达公司,完成了基本的人事报到。找到自己座位,连接好电脑。公司中为迎接新人开了一个迎新会,大家各自介绍了自己,说明了这周的工作计划,就散会了。前端带实习的负责人找我进行了一次简单的谈话,问了我从面试以后的学习状况,和对我接下的学习给予一定指导:
1. 学会使用搜索引擎
2. 遇到问题自己先想解决的方法,再与他人交流
3. 学习新的技术多练多想
接到任务,安装工作需要的一些基本软件,
1. 学习使用SVN
SVN(版本控制器)在工作中方便协作和版本控制,基本的使用还算简单,主要学习方式是查看微博
2. 安装Apache
之前浏览页面的都是直接点击制作好的页面,老大让改掉这个习惯,方便后面的开发,还有页面通过服务器端访问可能不一样
3. 前端小工具
EclipsePalette(颜色吸取,查看)
Calipers(像素测量)


页面制作:
可以说,在学校有学习HTML+CSS,但是一直不动手写代码。写也只是简单关于一个知识的练习,而这次是一个完整的页面,自己是不知道怎么下手。就和你背了单词,但不一定会写文章。


第一次提交:来实习之前就学习了一些bootstrap的基础,就想用bootstrap来写,大概一天半的基本上完成,提交代码,问题:
1. 页面布局没有按照UI 设计来,字体,字号,边距不相符
2. 不许用bootstrap,练习基础最基础。
自我改进方法:
1.1在Photoshop中字体查看:
 (1)如果字体用文字书写,直接点击工具栏中的「T」查看
  切图查看方法
 (2)测试行高,用矩形选择框选择来能行文字
   line-height= 两行文字height-文字(font-size)
1.2切图
 (1) 我使用的是将其转换为智能对象,然后储存为web所用格式,后来在闲的时候学习了相关课程
前端工程师必备的ps技能

1.3 间距
(1)间距可以使用”标尺”+”参考线”+”矩形选框工具”;
(2)或者使用前面介绍的小工具进行测量
2. 彻底不用bootstrap


第二次提交:更改了上述问题,提交后本次问题:
1.css中百分比和像素混用,在本机页面显示正常,到不同分辨率下显示混乱
2.布局不合理,margin和position等胡乱使用
自我改进的方法:
 1.由于制作页面为简单的展示页面,先不必考虑响应式,所以完全采用像素作为单位,另外设置了页面最小宽度
 2.自己之前对布局等还是理解不过,导致胡乱使用,通过查看《精通css 高级Web标准的解决方案》再次学习,更改了页面的不足;
后来学习了相关的课程:
CSS深入理解之margin_张鑫旭
CSS深入理解之absolute_张鑫旭
CSS深入理解之relative_张鑫旭


第三次提交 页面从布局上基本可以看得过去了,接下来老大查看了我的代码/(ㄒoㄒ)/~~,一大堆问题:
1. 命名不规范
2. 多类,多不必要的div
3. 注释不规范,代码缩进不合理
4. 兼容性没有考虑
自我改进方法:
 1.命名具有意义,不可以是area1 ,area2,以序号命名。前端命名,书写规范可以查看如下文档:
  前端书写命名规范
  可以最好按照上面的来写,老大说了写代码是要有一些强迫症的
 2.删,通过调试工具来删去不必要的类,精简代码,每个div要有其意义,并且在css中可以使用元素选择器控制的就不要给他在添加格外的类
 3.”代码首先是给人看的,再是给机器看的”—-老大说的
   3.1用一个tab 代表四个空格进行
   3.2注释简明扼要
 4.浏览器兼容性问题还是要靠平时多积累的。这个我遇到的问题也仅仅是:
  IE8不支持html5新的标签,还有margin清除的问题


我自己页面到这里算是正式提交完成,老大将其他实习生写的代码给我作为参考学习,自己相对比之下,不得不说自己的代码写的实在有些烂,多改正。


实习阶段总结:
1. 勤于动手
  我们看完了书面他人的东西,想要变成自己的内在的知识是需要练习的,如果一直像之前学完,我知道了有这个内容,而不去使用是不会成长的。我们将例子自己动手打一遍,自己再拓展一下才能掌握。前端是需要经验的,而经验的累计是需要靠自己摸索的。背完单词,试着写写文章,才可以说真正理解单词了
2. 代码首先是给人看的,再是给机器看的
  这句话对于前端来说很重要,和服务器的对接,和其他伙伴的合作,符合规范、书写注释都是很必要的,养成良好的习惯,利己利人。
3.多学习
  网上博客,免费的课程都很多,不会了自己多想办法解决。
针对于这段时间的学习,页面制作,可以参考从psd到html学习完感觉对自己帮助很大,知道了页面的布局的一个简单流程

stay hungry stay foolish

猜你喜欢

转载自blog.csdn.net/qq1301709072/article/details/52229585