Solution-recipe-main-page using mobile-first

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

1.How to import google fonts from the link and use variable weight to reduce code

:root {
  --font-young-serif: "Young Serif", serif;
  --font-outfit: "Outfit", sans-serif;
}

And apply font-weight to specific class.

html {
  font-family: var(--font-outfit);
  font-weight: 400;
}

2.How to change the markers' color of list items

ol::marker {
  color:red;
}

3.How to set a divider

using "border" to set its styles:

hr {
  border: none;
  border-bottom: 0.0625rem solid var(--color-light-grey); /* 1px converted to rem */
}

4.Mobile-first design : try to start from min-width

To make it responsive to all screen sizes, the better way is to design the styles starting from the min-width. Adjust to the screen as it scales up.

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

1.Mobile-first design : try to start from min-width

To make it responsive to all screen sizes, the better way is to design the styles starting from the min-width. Adjust to the screen as it scales up.

What specific areas of your project would you like help with?

How to adjust the padding between main and body when it is in mobile size?