CSS學習資源分享

更新於 發佈於 閱讀時間約 1 分鐘

本章節不教新東西,這邊提供一個學習資源給各位。如果你看完了前面章節的教學,相信你對於網頁的基礎知識已經有一定程度的熟練,而如果要繼續進步,實際操作、多看其他人的程式碼都是很好的學習方式,所以推薦一個網站給想繼續精進的人。

freeCodeCamp是一個開放式學習平台,目前他有許多平台提供大家來學習,包含Youtube網站等,而在freeCodeCamp學習網站平台上, freeCodeCamp 推出許多免費的核心課程,完成後還可以獲得免費的認證書,是相當不錯的學習平台。

以HTML、CSS為教學為內容的 Responsive Web Design Certification (300 hours)響應式設計課程,透過交互性的學習方式,逐步完成多項專案,最後完成5個自己的小專案,即可以獲得免費認證(如下所示),證明你的學習與精進。

raw-image

透過自學得到的證書,不但精進自身能力,相信對你未來求職也有小小的加分!

內容總結
freeCodeCamp開放式免費學習平台
5
/5
在當今數位時代,電資領域人才需求爆發式成長,不論是前端網頁設計、嵌入式開發、人工智慧、物聯網還是軟硬體整合,這些技術都在改變世界。而掌握 C/C++、Python、數位邏輯、電路學與嵌入式開發等大學電資領域的課程,正是進入這個高薪、高需求產業的關鍵!
留言
avatar-img
留言分享你的想法!

































































響應式設計是一種前端設計技術,用於讓網頁在不同裝置(例如:桌面、平板、手機)上顯示效果良好。 本章節將全面解析響應式設計(RWD),學習如何讓網頁適應不同裝置與螢幕大小,確保良好的使用者體驗。這些技術涵蓋 媒體查詢 、彈性佈局 、網格佈局,透過實作範例強化概念。
本章節將介紹 CSS 基本動畫 (CSS Animations),並透過 實作一個月球軌道旋轉效果,學習如何利用 CSS 動畫屬性 來創造流暢的視覺效果。 透過本章的實作,你將能夠運用 CSS 動畫技術 來打造 更生動、動態化的網頁元素,提升前端開發與 UI 設計能力!
在本章節,我們將製作圖書館庫存表格,複習關於表格的觀念並學習屬性選擇器、變數的觀念。 ✅ 徹底熟悉 HTML 表格標籤與結構 ✅ 掌握 CSS 屬性選擇器 來提高設定樣式的靈活性 ✅ 利用 CSS 變數 來提升 樣式管理與維護效率
CSS Grid Layout(網格佈局)是一種二維布局系統,比 Flexbox 更適合複雜的頁面佈局,特別是在設計網格化的內容區塊時。 本節我們將實作一個活動流程表,讓讀者了解如何實際使用,啟發 Grid 佈局的基礎使用能力。
Flexbox一種強大佈局技術,主要用於一維排列 的元素。它提供了更靈活的對齊方式,能夠輕鬆控制子元素的方向、對齊方式、間距與自適應能力,適用於現代網頁設計與響應式開發。使用方式為在 HTML 的父元素當中,透過寫入 display:flex; 這行語法,即能夠讓子元素產生各種排列的方式。
本章介紹 HTML & CSS 中的表格 、列表 、表單以及偽類與偽元素 ,這些是 網頁結構與互動設計 的重要組成部分。透過這篇內容,你將學會如何有效地使用這些 HTML 元素,並透過 CSS 來 美化樣式與提升使用者體驗。
響應式設計是一種前端設計技術,用於讓網頁在不同裝置(例如:桌面、平板、手機)上顯示效果良好。 本章節將全面解析響應式設計(RWD),學習如何讓網頁適應不同裝置與螢幕大小,確保良好的使用者體驗。這些技術涵蓋 媒體查詢 、彈性佈局 、網格佈局,透過實作範例強化概念。
本章節將介紹 CSS 基本動畫 (CSS Animations),並透過 實作一個月球軌道旋轉效果,學習如何利用 CSS 動畫屬性 來創造流暢的視覺效果。 透過本章的實作,你將能夠運用 CSS 動畫技術 來打造 更生動、動態化的網頁元素,提升前端開發與 UI 設計能力!
在本章節,我們將製作圖書館庫存表格,複習關於表格的觀念並學習屬性選擇器、變數的觀念。 ✅ 徹底熟悉 HTML 表格標籤與結構 ✅ 掌握 CSS 屬性選擇器 來提高設定樣式的靈活性 ✅ 利用 CSS 變數 來提升 樣式管理與維護效率
CSS Grid Layout(網格佈局)是一種二維布局系統,比 Flexbox 更適合複雜的頁面佈局,特別是在設計網格化的內容區塊時。 本節我們將實作一個活動流程表,讓讀者了解如何實際使用,啟發 Grid 佈局的基礎使用能力。
Flexbox一種強大佈局技術,主要用於一維排列 的元素。它提供了更靈活的對齊方式,能夠輕鬆控制子元素的方向、對齊方式、間距與自適應能力,適用於現代網頁設計與響應式開發。使用方式為在 HTML 的父元素當中,透過寫入 display:flex; 這行語法,即能夠讓子元素產生各種排列的方式。
本章介紹 HTML & CSS 中的表格 、列表 、表單以及偽類與偽元素 ,這些是 網頁結構與互動設計 的重要組成部分。透過這篇內容,你將學會如何有效地使用這些 HTML 元素,並透過 CSS 來 美化樣式與提升使用者體驗。
你可能也想看
Google News 追蹤
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
前言 終於要到這個振奮人心的章節了,我們終於要來學習,如何讓自己的網頁更加美觀。 但在這之前,我們肯定得先學習,如何將我們的 CSS 檔案,連接到 HTML 當中。 連結分類 首先,我們在連結 CSS 的方法中,有分為三種: 內聯連結 在 .html 當中,任一標籤的裡面,用屬性 s
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
如果你也是從事軟體相關工作的人,一定會遭遇突然需要你去學習一套你不熟悉的程式語言狀況吧,此時你會怎麼做呢? 是趕快去買書來看嗎? 還是趕快找一門程式課來上? 又或者乾脆去找會的同事來教學?
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
前言 終於要到這個振奮人心的章節了,我們終於要來學習,如何讓自己的網頁更加美觀。 但在這之前,我們肯定得先學習,如何將我們的 CSS 檔案,連接到 HTML 當中。 連結分類 首先,我們在連結 CSS 的方法中,有分為三種: 內聯連結 在 .html 當中,任一標籤的裡面,用屬性 s