All solutions

What challenges did you encounter, and how did you overcome them?

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

What are you most proud of, and what would you do differently next time?

@font-face {
      font-family: Outfit-Medium;
      src: url("./font/outfit/Outfit-Medium.ttf");
    }

通过这种方式引入并定义本地字体，在项目中可以直接使用

What challenges did you encounter, and how did you overcome them?

CSS 实现盒子模型水平垂直居中 方法一： position定位（适用于盒子有宽度和高度的时候）

.parent {
  position: relative;
}
.child {
 position: absolute;
 top: 50%
 left: 50%
 margin-left: -25px; /* 自身高度的一半 */
 margin-top: -25%;
}

方法二：position + transform (子盒子没有固定宽高)css

....position的代码同上
transform: translate(-50%, -50%)

方法三：flex布局 （父子 都没有宽高时使用）

.parent {
display: flex
justify-content: center
align-items: center 
}

子元素就是水平垂直居中显示的