首頁 > web前端 > css教學 > #DaysOfCode 週:Flexbox、排版、輔助使用等等!

#DaysOfCode 週:Flexbox、排版、輔助使用等等!

DDD
發布: 2024-09-24 06:19:19
原創
331 人瀏覽過

Week f #DaysOfCode: Flexbox, Typography, Accessibility, and More!

第 8 天:今天我完成了 #freeCodeCamp 上的「透過建立照片庫學習 CSS Flexbox」模組! ? Flexbox 是響應式佈局的重要工具,我學會如何對齊影像、建立靈活的網格以及建立漂亮的響應式照片庫。令人興奮的是,Flexbox 在使佈局變得靈活和適應性方面有多麼強大。現在感覺更有信心了! ?

第 9 天:今天的主題是網頁設計中的版面。我深入研究了字體系列、字體粗細和字母間距,以增強可讀性,並使我的設計看起來更加精緻、專業。版式有很多微妙的細節,我開始理解字體大小和間距等因素如何顯著改善使用者體驗。 ?

第 10 天:完成測驗項目以了解 #freeCodeCamp 的可訪問性。這個項目要求我思考網路可訪問性以及如何使網站可供所有人(無論是否殘疾)使用。確保所有元素的樣式正確是很困難的,但知道我正在製作更具包容性的網頁設計,我感到很滿意。這也讓我意識到我需要更深入地研究 HTML 和 CSS 來掌握核心概念。 ?

第 11 天:花了幾個小時透過 #W3Schools 深入研究 HTML 和 CSS。我從來沒有意識到 CSS 有多龐大——它比我想像的要廣泛得多!從基本的樣式到複雜的動畫,有很多東西要學習。仍在閱讀,但我很高興能夠應用迄今為止所學到的知識。 ?

第 12 天:使用 HTML 和 CSS 完成了向 Norman Borlaug 博士致敬的頁面專案! ?這是#freeCodeCamp 的另一個挑戰。我學到了很多關於佈局、圖像標題和響應式設計的知識。這很有挑戰性,但也很有回報,我對結果很滿意。這些天,我透過 #W3Schools 深入研究了 CSS,它幫助我更清晰地理解了以前對我來說很難的概念。 CSS 很大,但到目前為止我很享受這趟旅程! ?

第 13 天:完成我的「透過建立資產負債表來了解偽」項目。這個專案向我介紹了 CSS 中的偽元素和偽類。這是一個相當新的概念,但學習如何在不添加額外 HTML 的情況下設定元素的特定部分的樣式是令人興奮的。這個專案讓我更深入地了解了 CSS 選擇器以及它們的強大功能。

第 14 天:結束了我的「透過建造貓畫來學習中級 css」專案。這是一個超級有創意的挑戰!使用 CSS 建立藝術品是一種獨特的體驗。我花了一些時間才得到正確的形狀和顏色,但這個過程讓我對 CSS 除了佈局和樣式之外的功能有了新的認識——它也是一種藝術工具!

挑戰:
Flexbox 花了一些時間來掌握,但現在我對它的響應式設計更有信心了。
排版雖然看似簡單,但需要大量微調才能使文字既可讀又具有視覺吸引力。
可訪問性是最大的挑戰 - 很難平衡良好的設計和可訪問性標準,但我正在取得進展。
偽元素一開始很棘手,但我開始理解它們如何在不添加額外標記的情況下改進樣式。
迄今為止的進展:
我更喜歡使用 Flexbox 進行響應式佈局。
排版開始變得更加直觀,我正在實施更好的實踐。
我對無障礙網頁設計有了更深的認識,並且在我的專案中更加關注它。
我對 CSS 偽元素和 CSS 藝術的理解得到了擴展,我渴望在未來的專案中應用這些技能。
隨著我在 #100DaysOfCode 之旅中不斷前進,請繼續關注更多更新! ??

這是我迄今為止所處理的 HTML 和 CSS 程式碼的一瞥。您可以查看我的 GitHub 儲存庫,其中記錄了我的所有進度:https://github.com/heritech9/100-days-of-code.git

以上是#DaysOfCode 週:Flexbox、排版、輔助使用等等!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板