Submitted about 2 months ago

Recipe page CSS grid

Weyehn Reeves•190

@WeyehnR

A solution to the Recipe page challenge

Preview Code

Solution retrospective

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

I am proud of splitting styling guide sheets into sub-problems for styling, and it was way easier to manage them.

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

Ironically, using underscores at the beginning of file names since GitHub pages don't like underscores as the string's first character. so I ended up changing it to no underscore as a first character

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

maybe how to simplify more of the different style in style guide?

Code

Please log in to post a comment

Community feedback

Gregor de Cillia•190
@GregorDeCillia
Posted about 1 month ago
Nice work!

It seems the design doesn't scale down to width of 375px though. You could try setting a max-width on your .card.
```
.card { 
  max-width: calc(100% + 80px);
}
```
From a semantic/accessibility perspective, I think it makes a lot of sense to replace the the ordered list with <h3> elements. Very nice use of <article> and aria-labels.
Seyed Ahmad•80
@seyedahmaddv
Posted about 1 month ago
hi, you can use color: var(--brown-800) fro: .nutrition h2 .instructions h2 .ingredients h2

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord