[前端实作] Alpha Shop电商网页

[前端实作] Alpha Shop电商网页

你为何会选择这个专案？

这个专案是模仿前端工程师切版画面的情境，从拿到设计师的figma出图后，到HTML wireframe规划、HTML/CSS、及JavaScript实作的过程。 (尚未包含后端资料流串接)

因为之前练习的coding比较多完成小部分，这次是整个专案自己完整实作，觉得很有挑战性，所以选择这个专案。

你使用了什么技术？

1. 使用 Sass的 @mixin 、 @每个 配置不同的元素，增加CSS语法结构化
2. 使用BEM命名，搭配Sass的&符号达成巢状结构，增加程式码可读性
3. 使用display grid做mobile和宽萤幕的RWD排版
4. 使用伪元素做汉堡、step线、计数按钮，让HTML更加简洁
5. 因为画面有很多相似元素，用nth-child() selector选取
6. 使用position relative, absolute调整元素位置，像调整是step线的对齐
7. JS因为要切换step、form样式，常使用classList.add、classList.remove

哪部分你相对能掌握？哪里花了最多时间？

一开始拿到设计稿时，觉得这个专案好巨大！一次要把很多元素组合起来，脑袋快要burn out了… 后来先列出自己不熟悉的部分并且复习后，就比较知道要怎么实作这个专案。

在前置作业是我花比较多时间的。

我会先想HTML wireframe架构，会用ppt或手绘把mobile及宽萤幕不同的地方列出来，再想要怎么去切换版面。

另外Dark mode切换的颜色，因为设计稿没有列出来，所以也花时间一个一个比对挑出来。

Dark mode 列表收集

觉得前面有投入这时间是很需要的，这样后面实作比较不会慌，因为该准备的素材都有了。

过程中碰到什么困难？又如何克服？ （例如：查找网路文件）

手机版step的circle 及line

Input radio checked没有切换

input radio資料： https://www.w3schools.com/tags/att_input_type_radio.asp

上一步按钮在宽萤幕、Step1排版

过程中你有对哪个前端技术有特别深刻的学习？

对flex使用有特别深刻。

在调整「下一步」button时，因为step1在mobile及宽萤幕是不同的排列，在这里卡关很久，还想过要改HTML架构，后来才想到可以使用row-reverse把顺序调换。

过程纪录

总共花9天实作，一共花31.37个小时。因为有纪录每个区块实作时间及撷取画面，看到画面一个个长出来，最后还可以动，真的是又想哭又满足！

Header(4.4hr)

Stepper(2.6hr)

Form(6.18hr)

Cart(3.2hr)

Button(2.05hr)

Footer(1.17hr) only for 寬螢幕

Dark mode(1.48hr)

最后是这次实作Alpha Shop的 链接

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1550/35142917