iT邦幫忙

鐵人檔案

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

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

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







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

Day11 網頁排版好朋友 - Flexbox

Flexbox的組成 Flexbox 是由外容器(flex container)與內元件(flex items)兩部份組成,如下圖 而外容器與內元件分別有不同的...

2021-09-11 ‧ 由 ptsai129 分享
DAY 12

Day12 經常搞混的CSS Position

每次要用到絕對定位和相對定位時,我都會忘記他們分別代表的是什麼,又再google一次,這次決定好好把概念整理清楚,希望不要再混淆啦~ CSS Position屬...

2021-09-12 ‧ 由 ptsai129 分享
DAY 13

Day13 原來Background可以有這麼多設定

Background包含哪些屬性? Background是縮寫,包含了以下幾個CSS屬性 background-color background-image...

2021-09-13 ‧ 由 ptsai129 分享
DAY 14

Day14 font-family 字型發揮吧

剛開始學習的時候,我在font-family寫的值都只會設定一個,完全不知道需要加上通用字型,也不知道不同的作業系統會有不同的預設字型設定,看過一些資料後,才...

2021-09-14 ‧ 由 ptsai129 分享
DAY 15

Day15 Pseudo Element 眼見不一定為真

什麼是偽元素(Pseudo Element)? 偽元素就如同它的名字一樣,不是一個實際存在於網頁裡的元素,行為與表現卻又和真正網頁元素一樣,使用時必須搭配一個...

2021-09-15 ‧ 由 ptsai129 分享
DAY 16

Day16 CSS Specificity 樣式拍賣會

權重的概念讓我聯想到拍賣會,HTML元素的樣式就像是拍賣會上被競標的商品,而選擇器們就像是競標的買家一樣,只有出價最高的人才能獲得競標商品。 Cascadi...

2021-09-16 ‧ 由 ptsai129 分享
DAY 17

Day17 CSS Media Query

在了解Media Queries的用法之前,先來了解一些RWD的觀念吧。 RWD是什麼? RWD是Responsive Web Design的縮寫,中文是翻譯...

2021-09-17 ‧ 由 ptsai129 分享
DAY 18

Day18 用CSS做出動畫效果

還沒學到這個屬性之前,一直以為必須使用到JavaScript,才能讓網頁有動畫的效果,沒想到用CSS也可以做出動畫的效果。只要會運用transition和an...

2021-09-18 ‧ 由 ptsai129 分享
DAY 19

Day19 CSS Transform

設定transform屬性可以使文字或圖像有旋轉(rotate)、縮放(scale)、傾斜(skew)、移動(translate)這四種類型的變形效果。 tr...

2021-09-19 ‧ 由 ptsai129 分享
DAY 20

Day20 CSS預處理器是什麼?

CSS preprocessor(預處理器)是什麼? CSS 預處理器是個能透過使用預處理器語法,編譯產生純 CSS 的程式。要使用 CSS 預處理器,必需安...

2021-09-20 ‧ 由 ptsai129 分享