iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 40

Day40 網頁前端-持續練習(終極試煉)

Day40 終極試煉

https://ithelp.ithome.com.tw/upload/images/20201009/20129161MuuObXBNBN.png
https://ithelp.ithome.com.tw/upload/images/20201009/20129161ZzbxBDMGc9.png

簡單小語

終極試煉拖了好久啊啊啊,工作忙,家裡忙,又有連假,一切都是藉口,小魯是不會多說的,寫這篇心得當下可是在花蓮民宿裡苦苦地寫,為的就是不能放棄的精神啊,連電腦都帶來了,努力的練習及學習,時間一拉長又覺得開始懷疑自己是為了什麼,錢?工作?生活?雖然很難找到答案,但我仍然覺得可以找到一件事情學習,讓生活有目標有動力,就是一件很有意義的事情,當然健康也很重要(真的要減肥運動學網頁並行)。

中點雞湯

40天的旅程不是結束而是另一個學習的啟程,十月開始網頁切版直播班,加強並精進自己的能力,即便知道不能一直學習,上戰場殺敵磨刀才是真理,但目前工作上能存活(苦啊苦啊),但又有什麼工作是不苦的呢,機會是留給準備好的人,更重要的意義是,機會是留給正在並且用心準備的人,不如想想準備另一把武器的心態,等待武器一亮出,劃出一道漂亮的劍鞘,得到令人刮目相看的眼神,或許浮誇或許不切實際,值得嗎?學到就是自己的,您說呢?,學而不思則罔,思而不學則殆。

筆記分享

  1. 太久沒練習,偽元素的權重及應用不熟悉,利用try and error找出手感並製作hover後的動畫效果。
  2. Button1,2無大問題利用偽元素製造疊層並在hover後顯示,其中Button2可是兩個疊在一起呢。
  3. Button3,4在找回手感後練習就無大礙,發現在腦袋中想到做法並實現,是件有趣的事情,當然也會發現差異,從錯誤中發現正確。
  4. Button5在看了Amos老師的金魚系列才發現linear-gradient是不能用transition進行轉換的動畫(哭ing),最慘的是知道後還是不知道要怎麼產生漸變背景(求教學)。
  5. Button6就有趣了,一開始想到用滑動加上overflow:hidden可以處理,後來才發現使用transform:skew後會導致overflow:hidden覆蓋部分區域,最後就是用lia去區分製作了。
  6. 好久不見的header,這次沒有漢堡選單,值得注意的是每個物件的空間分配,練習就是思考的好機會。
  7. item就是做好一個完成全部的意思,不過在位置的推移及擺放,學問不深,好看要緊。
  8. 雖然做不到樣本的拖拉放置,至少可以做到點擊收合,而且在小尺寸還附加點擊收合及siblings收合,練習啊都是眼淚。
  9. 遠本說好的餐廳網頁,寫到一半難產卡關,不是不會,是不知道怎麼設計,小魯我是設計製杖。
  10. flex運用得好,煩惱排版先少一半,擺左擺右放置奇兵,完全沒問題。

終極試煉

Practice(201004 Day 40#1)

樣板來源

Buttons hover effects
Kanban Board


2020 iT邦幫忙鐵人賽 Day40 網頁前端-持續練習(終極試煉)


上一篇
Day39 網頁前端-持續練習(刻不容緩)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

1 則留言

1
CSScoke
iT邦新手 4 級 ‧ 2020-10-14 01:33:50

既然都提到金魚了,幫補個金魚都能懂的教學文

偽元素的權重及應用

Background-image 之一 - 金魚都能懂的CSS必學屬性

https://ithelp.ithome.com.tw/articles/10247622

Background-image 之二- 金魚都能懂的CSS必學屬性

https://ithelp.ithome.com.tw/articles/10248148

結論...看來基礎還不太熟,要不要直接來報名暴力班重新打基礎算了

TerryYu iT邦新手 5 級 ‧ 2020-10-14 11:17:37 檢舉

哈哈老師你會不會太專業了

想報名

但是有點插翅難飛阿.....

CSScoke iT邦新手 4 級 ‧ 2020-10-14 11:40:40 檢舉

線上視訊上課阿,不用跑XD

TerryYu iT邦新手 5 級 ‧ 2020-10-14 16:38:39 檢舉

小魯正職太操

只能望洋興嘆

我要留言

立即登入留言