2022Ey
主要是了解大家前端当前掌握的情况，然后根据每个人具体情况结合大纲提一些建议。如果完全是 0 基础就不用写了，可以根据训练营的大纲开始学习。
是否题直接答是否，如果有a补充的并且补充下。选择题在选项后补一个 ✅。
完全0基础
其他
是否有自己的项目？有 github 仓库链接吗
否,有仓库
是否自己总结过文章，有的话可以贴一下地址。
否
参加训练营的最终目标，校招找工作 or 社招找工作 or 仅兴趣或者其他，并且写一下预计达成目标的时间，其他想补充的也想到这里
个人规划是这样:
1.目前专科,1年半后会去读全日制本科(广东有一种全日制大专考全日制本科的途径,叫普通专升本,与考成人本科的区别是,普通专升本读的是全日制本科,到时候第一学历由专科改为本科)
2.学前端,是为了本科出来之后做打算,时间上属于为校招做准备
3.目前有计算机相关工作,软件测试,但对前端感兴趣,现实上有可以接触的项目帮助我在实操中理解前端
基于以上情况,本人对本次前端训练营的期望是:目前尽可能不以速成的方式学前端,而是尽可能深入地,系统地学习好前端
如果加上时间的话,预期1年半时间,想至少到前端进阶阶段完成
辛苦导师了!
【windliang：大纲目前就是前端工程师所需要的基本能力了，未来就跟着大纲一步一步进行，每周在这篇文章做一下学习进度的更新，我再根据具体情况和你沟通】
2022.12.31日更新
因为上班一些事情,加上个人的原因,日志迟来很久,很惭愧,但是接下来无特殊情况,会实时周更
首先总结一下个人博客+html/css三个项目遇到的一些问题和总结
1.个人博客
个人博客,按照教程算是基本搭出来了,但是因为运行指令的路径依附在个人博客的路径上,导致在绑定github之后无法运行指令
但是但是思路都已经清晰了,接下来我的计划是:html+css+js整体学完之后,再重新搭blog,预计1月底
2.html+css
(1).项目1:计算器
这是这三个项目里我觉得最难的,也是最没完成好的,但是基本思路都算清楚,目前先做总结,后续学完js有时间的话,我打算再重新优化
实现思路是:大的div盒子里面套取四部分小盒子
分别是:头部,标题,转换按钮,和计算按钮
这其中的挑战点有几处:
* 运用flex布局,对计算按钮进行均匀换行排列
flex-wrap:wrap;
* 计算机的样式,如何从外部引入,并控制它的大小
link引入zeal.exe工具,然后通过i标签的class”fas xxx”说明引用对象
* 所有item都居中显示
justify-content: center;
(2). 项目2:卡片
卡片可能是我还原这三个项目中觉得完成得最好的了
整体的布局如下:
图片,价格说明,和推广按钮分别外套三个大div去控制里面的内容
这其中有挑战的几处是:
* 控制行内元素对齐
vertical-align:middle;
* 在图片上面的播放图标
父相子绝
* 划掉字体的制作
s标签的运用
（3）. 项目3:导航栏
实现效果如下:
实现思路是:
同样是大盒子去控制里面的元素,基本采用flex布局
这里面有挑战的几处是:
* 如何让导航栏停留之后出现下方内容
主要是对:display:none和hover的运用
* 如何让下方内容停留在鼠标处
这个是在老师的指定下恍然大悟的:transform: translateX(-30%);
* 如何让”>”实现动画效果
transform: rotate(0.5turn);
以上项目的制作,个人认为还有很多可以优化的地方,后续也会考虑继续优化,但是在制作的过程中,关于布局,样式,动画的实现都有了一定的认识了
3.js
因为疫情感染和公司事务的影响,js目前已经一周没学习了,
停留在:
对函数的理解
今天已经正式开始学习了
目标是:
这个月底完成对js的学习,上手项目,重新搭建blog
思考1:css定义一个图标,浏览器就能将其识别显示的原理
举例:
.fa-calculator::before {
content:”\4eae”; }
首先第一点,content中定义的内容为Unicode码的16进制的格式,
html通过当前引入的字体库查找content定义的内容,将渲染出来
而content属性配合:before/:after伪元素,可以将内容插入
关于写法:
可以通过以下语法引入:
@font-face {
font-family: ;
src: [],[ []], *;
[font-weight: ];
[font-style: ];
}
其作用是:可以将自定义字体引入到网页中
font-family为自定义字体的名称(自命名)
src为引入字体的路径
以下是我首次使用改语法的不规范样式:
.test:before {
content:”\e6a0″;
}
@font-face {
font-family: dd;
src: url(‘../element-icons.woff’)
}
.test-o::before {
content:”\e6a0″;
font-family:dd;
}
作为对比,以下是老师为我提供的样式:
.test:before {
content: “\1F602”;
}
@font-face {
font-family: “element-icons”;
src: url(“./element-icons.woff”) format(“woff”);
}
.el-icon {
font-family: “element-icons”;
}
.el-icon-ice-cream-round:before {
content: “\e6a0”;
}
以上是关于引入自定义icon的一些思考,关于老师在群里给的思考题,我认为也有必要总结道这里,稍后进行补充,以及关于js的进度