fm recipe page

前端導師 - 食譜頁解決方案

這是對前端導師的食譜頁面挑戰的解決方案。前端導師挑戰通過構建現實的項目來幫助您提高編碼技巧。

目錄

• 概述
  • 挑戰
  • 螢幕截圖
  • 鏈接
• 我的過程
  • 建立
  • 我學到了什麼
  • 持續發展
  • 有用的資源
• 作者
• 致謝

概述

挑戰

該項目的簡介是構建食譜頁面，並從以下資產開始，使其看起來盡可能接近設計：

• JPEG設計文件和桌面佈局
• 字體，顏色等的樣式指南。
• 優化的圖像資產
• 可變和靜態字體文件
• 帶有預先撰寫內容的HTML文件

螢幕截圖

鏈接

• 前端導師解決方案
• GitHub存儲庫
• 直播站點

我的過程

建立

• 語義HTML5標記
• CSS自定義屬性
• 移動優先的工作流程

我學到了什麼

該解決方案包括我新的三件事：

• 造型列表標記
• 造型HTML表
• 使用媒體查詢

食譜頁麵包含兩個帶有準備時間和成分的無序列表，以及帶有指令的有序列表。

對於訂購列表，我使用::marker pseudo-element設計了計數器：

. instructions li :: marker {
  font-weight : 700 ;
  color : var ( --brown-800 );
}

為無序列表造型列表標記更具挑戰性。在移動佈局的JPEG設計文件中，標記不位於文本的第一行旁邊，而是在列表項目的文本內容上包裝在兩行上的文本內容。我使用::before使用自定義標記，以將標記與Flexbox放置：

. unordered {
  list-style : none;
  padding-left : 0 ;
}

. unordered li {
  display : flex;
  align-items : center;
  gap : 1.75 rem ;
  padding-left : 0.25 rem ;
}

. unordered li :: before {
  content : "•" ;
  font-weight : 700 ;
}

為了獲得更好的可訪問性，我在html中的<ul>元素上使用了role="list" 。沒有它， list-style: none會導致Safari瀏覽器不再識別可訪問性樹中的列表，而屏幕讀取器將不再宣布信息，例如項目數量。

持續發展

我需要學習圖像優化！目前，該項目中最大的文件是我為此讀取文件拍攝的屏幕截圖。我學會瞭如何優化字體文件。現在，屏幕截圖的文件大小要大於所有字體文件的大小。

有用的資源

• 米歇爾·巴克（Michelle Barker）的創意列表樣式。
• MDN上的造型桌 - 本文對於基本的桌面造型技術是一個很好的複習。

作者

• 前端導師 - @SabineEmden
• Mastodon- @SabineEmden

致謝

該項目使用Josh Comeau的CSS重置。

該項目中使用的字體家庭是年輕的襯線和服裝。這些字體是根據開放字體許可證的。