iT邦幫忙

2024 iThome 鐵人賽

DAY 30
1
Modern Web

CSS的預處理器-SASS/SCSS系列 第 30

DAY 30.SCSS實作小品

  • 分享至 

  • xImage
  •  

昨天的文章中提到我要實作網站,於是在時間有限的情況下,我寫了一個心理測驗(惡搞版),每一頁的設計終於不用複製、貼上,真的像來到了天堂,來看看我的成果吧!

一、網站介紹

首先是我的起始頁面

https://ithelp.ithome.com.tw/upload/images/20241006/20169140ee4LrHwGZ6.png

然後是測驗內容(其一)

https://ithelp.ithome.com.tw/upload/images/20241006/20169140Vund6lCFoV.png

測驗內容(其二)

https://ithelp.ithome.com.tw/upload/images/20241006/20169140WW7PTyO7FS.png

測驗結果

https://ithelp.ithome.com.tw/upload/images/20241006/201691405giI0zWw6x.png

二、製作心得

你會發現你的測驗解果只跟你在第五頁選擇的冰淇淋有關,所以本測驗算是很準確的(除非你真的不喜歡冰淇淋),本人也不太會設計心理測驗所以就想出了惡趣味網站,也算是聰明的做法吧!HTML跟SCSS的部分我比較熟悉,所以幾乎是自己完成的,JS的部分還是有請ChatGPT幫忙,因為我真的不熟悉,以後有機會我會再學習這個部分的,最後這30天其實比我想像中還要短,我以為會很漫長呢,過稱中我學到很多實用技巧使我在網頁製作上更流暢更有效率,還有收集資料的能力,對未來學習技巧也有幫助,這些都是我最大的收獲。(然後終於可以關掉提醒我發文的鬧鐘了)

最後附上網址

1.遊戲網址

https://tinaaaaa0311.github.io/test.github.io/

2.程式碼,包含註解

https://codepen.io/tinaaaaa0311/pen/QWeNERo

3.我的Github(?)

https://github.com/tinaaaaa0311/test.github.io

/images/emoticon/emoticon08.gif謝謝大家的觀看,後會有期啦!


上一篇
DAY 29.SCSS學習心得
系列文
CSS的預處理器-SASS/SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言