iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
自我挑戰組

文組視角的初學前端筆記 系列

疫情爆發的時候,多出了許多宅在家的時間,看新聞看得很厭煩,於是決定來學個新技能。
好奇心驅使下買了一堂關於網頁開發的線上課程,沒想到因為這個舉動,讓文組的我有了像是去異國旅行的新奇體驗。每當學到一個以前都不知道的知識時,都讓我覺得很有趣,原本一開始連HTML和CSS是什麼的我,漸漸地想要知道更多這方面的知識。
第一次知道鐵人賽,也是第一次參加鐵人賽,打算好好利用這30天把過去學過的內容整理得更清楚。
雖然覺得這件事跟連續30天運動的困難度不相上下,但不去嘗試怎麼知道自己有多少能耐、能堅持多久。







鐵人鍊成 | 共 30 篇文章 | 6 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day21 切版筆記- 圖文滿版區塊

鐵人賽的前20天,把常常混淆的那些觀念重新理解過一遍之後,後面的10天打算來練習切版,希望透過實際練習來加深對HTML&CSS觀念的印象 今天來練習切這...

2021-09-21 ‧ 由 ptsai129 分享
DAY 22

Day22 切版筆記- 互動圖文卡片

運用到的觀念: 利用vertical-align: middle;調整圖片預設多餘的空間 使用position:absolute;絕對定位和相對定位posi...

2021-09-22 ‧ 由 ptsai129 分享
DAY 23

Day23 切版筆記- 人員介紹卡片

運用到的觀念 border搭配偽元素製作出三角形區塊 絕對定位&相對定位 用:hover 搭配transform、transition作出互動效果...

2021-09-23 ‧ 由 ptsai129 分享
DAY 24

Day24 切版筆記-超通用橫式版面

學過的內容沒有實際在VS CODE上寫過,很難不去忘記。透過切版練習,逼自己每天都進步一點點,相信有一天,自己也可以寫出結構清楚又不跑版的網頁。 運用到的觀念...

2021-09-24 ‧ 由 ptsai129 分享
DAY 25

Day25 切版筆記 - 導覽列

運用到的觀念 行內元素與區塊元素特性 flexbox 利用margin: auto;會平均分配剩餘空間的特性來設定元素的排列位置 使用:focus 改掉點到...

2021-09-25 ‧ 由 ptsai129 分享
DAY 26

Day26 切版筆記- 方塊酥版面

今天來練習下面這個版面~ 運用到的觀念: 使用float排版 :first-child ~選取器 相對定位&絕對定位 盒模型& box-...

2021-09-26 ‧ 由 ptsai129 分享
DAY 27

Day27 切版筆記 - 破格式設計

今天來練習切這個版面 運用到的觀念 flexbox box model 區塊大小的計算 margin設定負值調整版面 border-radius調整外框的角...

2021-09-27 ‧ 由 ptsai129 分享
DAY 28

Day28 切版筆記 - 側邊選單

今天來練習切側邊選單 運用到的觀念: 使用font awesome圖示 使用google fonts字體 flexbox linear-gradient設定...

2021-09-28 ‧ 由 ptsai129 分享
DAY 29

Day29 切版筆記 -訂單進度條

今天來練習切這個畫面 運用到的觀念 flexbox google fonts 字體& icon font圖示載入 加號選取器 ~選取器 偽元素使用...

2021-09-29 ‧ 由 ptsai129 分享
DAY 30

Day30 切版筆記 - 文字排版

沒想到30天這麼快就過去了 還記得決定學習前端知識的時候,帶給我的都是新奇的體驗,但隨著學習的內容越來越多,因為記不住的也多了,無力感就隨之而來了。還好當初沒有...

2021-09-30 ‧ 由 ptsai129 分享