iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

勇者Jason和前端之鑰 系列

「勇者...勇者...」耳邊傳來睿智長者的輕語
「我...我這是在哪?」勇者感到不解
「我剛剛不是才在Monospace喝著有獸醫把關牛乳,怎麼現在出現在這裏?」
看著四周環繞者一堆張牙舞抓、蓄勢待發的iT鐵人,勇者不禁嘎了一下冷筍,將褲頭往上勒緊了些
「歡迎來到第九屆iT鐵人賽!」台上穿著制服的女性機器人立刻吸引了大家的目光
「那可是全球限量的機器人呢!」
「據說那是iT邦老闆的私人珍藏呢!」
女性機器人的出現讓台下引起一陣不小的騷動
「你們將要挑戰自我,參加一項為期30天的鐵人競賽,勇往直前吧!鐵人們」

我叫Jason
剛接觸網頁前端30天
未來的三十天請多多指教

鐵人鍊成 | 共 32 篇文章 | 63 人訂閱 訂閱系列文 RSS系列文 團隊Lorem100+tab
DAY 21

【DAY21】緊急事件!01/08是A同學生日!也是我第一次寫JavaScript的日子。用if else開啟我的第一個JS!

緣起 我的好朋友,Arel,準備要過生日啦!有著台南美猴王之稱的他,底下有許多猴子猴孫們,以夜喧猴為首,想幫Arel開個生日party。但是他必須防止藉機暗殺A...

2018-01-09 ‧ 由 JasonYang 分享
DAY 22

【DAY22】bootstrap 4 的grid system

DAY20用手切出不同螢幕大小下,欄數會不一樣的效果。但是醜醜的。今天我們換個方式切切看。將昨天的index.html拿出來,同時將style.scss內,只保...

2018-01-10 ‧ 由 JasonYang 分享
DAY 23

【DAY23】今晚不寫code!聊聊設計師合作體驗!

邁入第23天了,也意味著鐵人三項進入了第三階段,跑步。騎著自行車的時候至少還有迎風而來的感覺,跑步卻是硬漢的體現,不靠左手輔助,只靠雙腳。 公路車騎完20km後...

2018-01-11 ‧ 由 JasonYang 分享
DAY 24

【DAY24】transform,進入視覺系的CSS第一步,網頁要動起來了!(一)

之前聽過css可以做一些動畫效果,其實是跟昨天的transform有關,啃過w3c的定義,昨天那個設計師的難題是我第一次實作transform,接續著昨天,我想...

2018-01-12 ‧ 由 JasonYang 分享
DAY 25

【DAY25】我選擇死亡!Ai初體驗...

還記得【DAY23】A同學說陰影如果沒有圖,去學svg自己畫嗎?我上網查了一下,能產svg的有一樣是Adobe illustrator,當然工程師也可以自己寫。...

2018-01-13 ‧ 由 JasonYang 分享
DAY 26

【DAY26】用transform跟transition讓網頁動起來!

GitHubpage拿來練習的小東西 兩天前用transfrom學了許多種方法讓網頁動起來,今天想把他們串起來,因此做了一些不明所以的效果XDDDD。可是好有趣...

2018-01-14 ‧ 由 JasonYang 分享
DAY 27

【DAY27】到底是誰偷吃了薯條?(用CSS實現名片翻轉效果)

在開始前我想先分享一段小故事,昨天的鐵人文有點混,因為我忙著玩效果,卻忘了可以放到內文的東西少的可憐。是為了今天的效果做準備,不過這就是人生,誰說每天都要精彩,...

2018-01-15 ‧ 由 JasonYang 分享
DAY 28

【DAY28】transform的matrix屬性

transform的一個屬性:matrix(矩陣) 這個是很多人所懼怕的,因為沒有學過,或者學過不懂。我會盡力以簡單的方式講給大家懂。 目前也在看svg,雖然還...

2018-01-16 ‧ 由 JasonYang 分享
DAY 29

【DAY29】準備收官,使用transform做出3D效果

還不會轉的旋轉木馬完整程式碼 跟著網路上的範例,做出旋轉木馬的效果。首先再幫大家複習一下rotateY,使用rotateY,就像鋼管女郎旋轉的樣子。這邊他轉給你...

2018-01-17 ‧ 由 JasonYang 分享
DAY 30

【DAY30】旋轉吧!國民老婆!

昨天做了一個不會旋轉的旋轉木馬!A同學看到了表示有趣,在洗澡之後,跟我說:「旋轉木馬的這個主題很不錯!」輕鬆的用一刻鐘的時間寫出了旋轉的木馬!不得不承認挫折感很...

2018-01-18 ‧ 由 JasonYang 分享