responsive recipe page using Grid CSS and semantic HTML.

Solution retrospective
What I am most proud of is just being able to complete this challenge using my own knowledge (after completing some HTML and CSS tutorials).
What I would do differently is writing clearer and efficient CSS code (sometimes I can't even understand what I did there).
What challenges did you encounter, and how did you overcome them?I was having some problems when structuring the "nutrition grid" in the last part of the challenge design. First, I created a "div" tag with a class = "nutrition-grid" with two columns. inside that "div" I put two "p" tags: one with "calories" and the other with "277kcal" in order for one of the "p" tags to go to the left and the other one to the right side of the grid. it seemed right, but as I wanted to add the border bottom to each row (4 rows in total) of the grid, the border bottom was only appearing under "calories" and "277kcal" separately but I wanted a uniform line across the row. then I modify the structure of the "nutrition grid" in order for "calories" and "277kcal" to be in their own inline grid simulating a row in the parent grid (nutrition grid). and it worked!
- later that day I realized I was applying border bottom directly to the "p" tags and not to the grid rows :skull-emoji:
I would like help understanding the grid system and its true potential. once I finished the challenge, I realized that I could've contained the whole thing in a grid.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Polariz625's solution.
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