iT邦幫忙

2023 iThome 鐵人賽

DAY 1
1

Super Easy CSS

本系列同步發表於我的 Hashnode 部落格:
Eva Chen | 網頁設計師下班後 (hashnode.dev)

參賽前言

本系列文章目標是學習 CSS 基本知識,並且研究 The State of CSS 中值得令人期待新屬性,讓想要學習 CSS 的人也能一起學到新知識,不用再零零散散地去爬文搜尋。此外,還會提及一些前端基本知識、版本控制、開發經驗等必要概念,讓新手對於前端開發有全面的認識。


這 30 天我想做什麼?

這 30 天我的方向主要是:

  • 自我挑戰:研究新穎的 CSS 屬性

    每年都有的 The State of CSS 統計,討論了許多新提出的 CSS 屬性(例如:color-mix():hasmax()min()clamp()container query 等等),我覺得很有趣,卻未曾實際深究,我想趁此機會加以了解。

  • 作為筆記:供自己日後參考
    延續上一點,將這些新學到的東西統整起來。再來是,過去在學習的時候有些容易混淆的部分,我希望也能藉此機會一起釐清。

  • 作為紀念:留下些什麼吧!

    工作了多年,我想留下個紀念,統整這些我所學到的知識,並且透過分享,在網路上留下一些痕跡。

  • 幫助他人:讓人跨出學習網頁的第一步
    除了統整好基礎前端與 CSS 知識外,並且上述所說未來能變得實用,且目前瀏覽器支援度還不差的新屬性(支援的瀏覽器>=3),一併整理在所有基礎知識中。這樣想學的人也能一起學到新知識,不用再零零散散地去爬文搜尋。

本系列文章會以 CSS 為主,HTML、Git 等網頁開發概念為輔。


這個主題適合誰閱讀?

  • 主要目標族群是完全小白新手。無論你是想要學習網頁成為前端工程師,或是想要了解網頁如何運作的 PM 或設計師,都很適合。

    我會介紹基礎的前端知識,因為我發現有時在開發上,PM、設計師或是業主,容易因為不懂前端或網頁上的 Domain Knowledge,造成上工作上的溝通成本或重工,而這往往只是缺乏了幾個簡單的概念。

  • 次要則是已經會了,但是想了解 CSS 新屬性的人。

就讓我們開始這 30 天的前端基礎之旅吧!


文章目錄

(這 30 天內持續更新中)

基礎知識 / 共用觀念

版面編排

響應式 RWD

文字

雜記

顏色

多媒體:圖片/影片/音訊處理

雜記

繪製漸層與圖形

特效

互動 - Transition

(X) CSS Tab 動畫, tooltip (anchor positioning)

互動 - Animation

互動 - click toggle 行為

互動 - scroll 行為

(X) 純 CSS 視差捲動 animation-timeline

互動 - 其他

  • #?? 用 resize 製作 before & after 對比圖

其他

  • #?? 數學被當掉的我,挑戰 CSS 三角函數,能成功嗎? sin() cos() (繞著圓周、面對方向永遠正面、改變顏色?)

  • #?? 偽元素的妙用 ::before::after:HTML data-...、裝飾性元素、CSS 計數器 counter()

SEO 與其他實用工具

  • #?? SEO 基本概念:語意化標籤、Open Graph、結構化資料

  • #?? 多種 SEO 檢測工具:Google Console、GA 分析、Bing Webmaster Tools、Ahrefs

  • #?? 多種實用前端工具總整理,任務完成,打開百寶箱!

雜記

  • #?? 真結局,感言

  • #?? 本系列文章的更新補充紀錄


↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

如果你喜歡我的創作,還想看看其他有趣的分享與日常,
可以追蹤我的 IG @im1010ioio,或者是🧋送杯珍奶鼓勵我,謝謝你🥰。

送杯珍奶鼓勵我 (Eva Chen)


下一篇
#01 網頁的基本名詞:UI/UX?切版&切圖?前端&後端?靜態&動態?RWD or Mobile First?
系列文
Super Easy CSS,極度簡單:寫出好的 CSS,從零開始前端生涯37
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言