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重置。

该项目中使用的字体家庭是年轻的衬线和服装。这些字体是根据开放字体许可证的。