2020网页切版直播班-心得

前言
今年四月离了职，开始了调光freelancer和转职计画...
这个决定已经前前後後思考了一年，毕竟要从一个熟悉的环境离开真的有满满的未知和恐惧。

在思考转职的同时也找了很多关於前端的资料，
从w3schools和youtube上看了一些很基础的HTML,CSS运用，并尝试写点东西。

确定自己不仅仅是一头热地栽进去，也确定自己不会三分钟热度遇到困难就打退堂鼓後。
开始考虑是要上资策会还是找一间线上课程自学...
经过几番考虑，最後购买了六角学院的前端工程师课程！

从新手HTML,CSS开始，一直到js,vue满满的课程可以学习。

前前後後大概花了五个月，看完了HTML,CSS,bootstrap,js学徒,js核心...
本来想说可以开始着手准备作品集，但总对自己没什麽自信，对於前端的知识感觉也还一知半解。

无意间看到了网页切版直播课程，想着！如果真能好好磨练一番。或许对於找工作会自信一些。
但又怕自己程度不够好，会不会上课到一半完全跟不上进度...那这样挫折感一定更大！

就这样抱着这样的犹豫，卡就刷下去了！
反正开课是一个月後的事！好好再来复习准备准备吧！

就这样，第一次的直播班就这样开始了！

第一周：1px也不差的版型控制术
第一次上课意外的很轻松，大部分原因也是因为我都听得懂，
课程上更深入了解了padding,margin的一些运用，像是推挤方向要一致、或用%取代px的用法。
或是img会有额外的padding,要使用display-block拿掉等等...

这些小小的技巧让我在第一周就开了眼见，原来魔鬼藏在细解里这句话是真的啊！

第一周作业
第一周作业让我更熟悉了对版面的控制，还有对一些重复的样式去做初步的管理。

第二周：flexbox网页排版术
不得不说flexbox的排版方式解决了初期我在学习的很多困难。
起初我在看前端课程时上面只教到float，一直到我看完HTML的课程时，才刚好更新了flexbox的部分。
所以那时候我的flexbox是上网学的 flexbox froggy
这也让我了解到，未来职业的路上，不只是课程上可以给你帮助，自己上网查找资料一样也可以让自己成长。

这次课程学到了container！
这时老师还没有教我们使用套件，只告诉了我们命名的方式要正确，要语意化...
并提醒我们在一些满版或图片排版时要使用上container

第二周作业
第二周作业在写的时间上其实跟第一周差不多，css还是用途法炼钢的方式撰写。
那周活用了flex的排版及container的运用，让整个版面排版起来更加的愉快方便。

第三周：响应式网页设计
终於来到了第三周！这时脑袋里一直浮出当时老师给我们看的难度表

RWD算是一个小魔王关！我本来想说这关我大概就卡死了！因为我重来没有做过RWD
课程上讲解了权重的观念，在浏览器缩小後可以改变新的样式。
还有宽度的单位要如何用%配置，在写RWD上才比较不会把自己的code写死了。

第三周作业
第三周的作业我做了足足一个星期多
记得我的CSS很乱，写到後来都快搞不清楚自己在写什麽。
不过也算是超乎了我的预期！居然完成了作业！

第四周：多页式网页设计
第四周开始觉得难度有点提升，课程内容多了很多东西，在下课之後才能慢慢吸收。
用了助教帮大家写的gulp去做多页式的管理，并使用scss去撰写样式。
本来只想用scss去做作业，但被小组队员们督促要去载入gulp!

花了一个早上摸索居然也让我学会了如何使用gulp!!
也问了队员们怎麽使用GitHub Pages好让我能顺利上传作业!!!
手把手GitHub Pages教学

这才发现学习路上有队员们的神助攻真的会让自己更努力，
毕竟队员们有些都是在工作的工程师了！还这麽努力！我这只菜鸟不能不加把劲。

第四周作业
第四周作业算是第三周的延伸版，要有基本的首页、商品页、登录页面等等。基本就是完成一个网站架构。
因为前一周已经把最难的首页写完了，剩下的商品页觉得蛮得心应手。
但也因为第一次使用了scss，所以一并把上周写得乱七八糟的code修改了一下。

课程到这时才发现对自己的要求慢慢的变高了，不仅想要准时交上作业，也想准时跟上每周的助教分享。
想把每次新学习到的东西都尝试运用在网页上，
虽然第一次使用错误率很高，花上的时间也比较久。但每次写完都会有满满的成就感！

也开始写文章记录我作业的心得，假日也会在youtube上找一些有趣的side project来练习。

这时的心态跟一开始上课时有些不一样，不再那麽害怕会跟不上进度。
反而是更想好好的跟上进度，然後准备下次又有新的东西可以吸收和运用！

第五周：後台表单设计
这周开始使用了Bootstrap和学习使用scss的@import让css模组化。
从一开始语意画的命名，再到原件组成的方式命名有些许不习惯。
但学习Bootstrap其实不难，运用得当让写画面变快很多！

第五周作业
第五周作业是我做的最满意的作业之一
不只速度有提升，作业完成度自己也很满意！在一周内顺利交出了四页的内容。

手写 SCSS 结构参考

@import "variable";// 变数  
@import "reset";  // reset.css  
@import "base"; // 全站设定
@import "util"; // 工具类 class，.mb-1、.pr-3

// layout 共同框架,第一层
@import "layout/header";
@import "layout/footer";
@import "layout/menu";
@import "layout/aisde";

// 页面设计
@import "pages/index";     
@import "pages/cart"; 

第六周：格线系统
这周重新认识了Bootstrap的container如何运用，以及如何运用Gird去排版！
另外还整合了Bootstrap到自己的scss中，这又是另外一个境界了！
不仅可以去改变它原本的设定，连padding、margin等等这些通用元件都可以自己更改。
灵活性和使用性更是大大的提升！

第六周作业
第六周作业自己做得很开心。
因为觉得Gird的排版真的快速很多，也越来越能掌握Bootstrap要如何运用於RWD上。
这周也是我第一次使用@import的方式去引入scss，
虽然一开始有遇到连接不到，或是觉得在跑网页时会要等待许久的问题...
但习惯之後就会发现你的scss终於也可以好好的整理，不会再变成很长一串了。

第七周：视差滚动
这次课程带我们介绍了AOS视差滚动触及
瞬间让你的网页像是提升了一个档次！！

载入几行的程序码，就可以让网页动起来。
不只更加见识了套件的强大之处，也发现要做好网页真的还有很多无穷无尽的东西可以钻研和学习！

第七周作业
第七周老师说可以拿之前的作业来套，
但因为看到网页做得很漂亮，就激起了我也想要写写看的慾望。

从一开始觉得会跟不上进度的我，到现在会想尝试做做看！真的差很多
也对自己要完成100%的课程有了些自信！
有点不敢相信自己可以完成，也很开心自己做到了！

第八周：CSS模组化管理
最後一周分享了很多同学的模组化结构，比起自己才尝试没几次真的是落差很大啊ˊˋ
也讲了我们从第一周上课时，老师一直说要语意画的命名，到现在进阶成结构化的命名...
这些都让我更了解如何去让你的code可以重复的使用，而不用再花时间一个一个刻。

再加上scss的管理，引入Bootatrap等等，
即使网页越做越大，但code还是可以有方法的去管理、归纳。

第八周作业
第八周作业大概花了一周多的时间才处理完毕！
首先观察那些相同的样式，相同的组件要怎麽先去制定。
光是整理好那些相同的参数，更改Bootstrap的通用元件等等...就花上一天的时间。
排版的部分也比起之前驾轻就熟了很多...
整体来说把之前所学的运用了进去，也认识了一个新的套件swiper...

虽然觉得自己的最终作业不尽完美。但也算是给自己好好的磨练了一番！

总结
就这样！八周的时间...
好多学员都觉得不够不够！我也这样觉得！！
因为学到了好多新的东西，才真的发现还有好多可以精进的地方！！

一开始我只会写css，还是个写单页式网页都会把css搞到好多行的菜鸟
到现在会使用scss，引入不同套件使用，加快了自己写网页的速度等等...
都是我意想不到的收获，也是在这个菜鸟阶段的我收获最大的部分！

也在短短八周遇到了好多的第一次
第一次写RWD、第一次写scss、第一次使用GitHub...
还有课堂之外的改变
开始写学习blog、开始上网看别的教学做side project...

这些满满的收获居然都在短短两个月内做到了，
超感谢老师时时刻刻体醒我们要刻意练习，
超感谢助教群们的作业提醒，还有每周的助教分享，
超感谢同期学员和队员的督促和作业讨论！

也因为我菜鸟的经验，其实还有好多好多学习资源我都还看不懂，
觉得只学到课程的70%左右而已，但已经觉得自己进步了很多！

未来期许
现在的新目标是着手整理之前的作品，然後好好的把履历上线，
虽然js还只有菜菜的程度，也还不会vueˊˋ但希望能尝试投递履历，把自己丢上市场检讨还缺少什麽！

希望未来的学习之路可以让自己变得更强大！
也报名了2月的js课程，希望能再度给自己磨练一番！！

2021期许自己转职成功