chore: add lab project for CSS grid in frontend cert

[larymak]

Checklist:

• I have read freeCodeCamp's contribution guidelines.
• My pull request has a descriptive title (not a vague title like Update index.md)

Closes #404

[moT01]

This will be shown to campers as an example project that fulfills all the user stories. Do you think you could come up with some fun content to put in this instead of placeholder stuff @larymak? GPT can be really helpful with this. Maybe "Cats Monthly" or something.

[larymak]

This will be shown to campers as an example project that fulfills all the user stories. Do you think you could come up with some fun content to put in this instead of placeholder stuff @larymak? GPT can be really helpful with this. Maybe "Cats Monthly" or something.

Done

[moT01]

This looks good @ihechikara 👍

I would be fine getting this in - but I'm wondering if there's any way we can word some of the user stories so that it doesn't give away the answer. For instance, instead of "The .magazine-cover should have a grid-template-columns property of 1fr 1fr 1fr.", maybe "The .magazine-cover should have a grid-template-columns property that divides the space into three equal parts." Similar with the others if possible, specifically the grid stuff - but it doesn't have to be like that either. What do you think?

[larymak]

This looks good @ihechikara 👍

I would be fine getting this in - but I'm wondering if there's any way we can word some of the user stories so that it doesn't give away the answer. For instance, instead of "The .magazine-cover should have a grid-template-columns property of 1fr 1fr 1fr.", maybe "The .magazine-cover should have a grid-template-columns property that divides the space into three equal parts." Similar with the others if possible, specifically the grid stuff - but it doesn't have to be like that either. What do you think?

I think it's a good idea. Let me reword the sections that need change

[moT01]

I have some more suggestions...

Instead of using divs, we should use main and section elements to be more semantic?

I also suggested to get rid of a number of the user stories and just include the ones I think are necessary - e.g. just keep the ones that provide a little boilerplate and the ones related to grid. I don't really see the others adding much benefit - it will make the projects easier for users to follow and make it easier for us to write the tests. Let me know what you think @larymak.

[larymak]

I have some more suggestions...

Instead of using divs, we should use main and section elements to be more semantic?

I also suggested to get rid of a number of the user stories and just include the ones I think are necessary - e.g. just keep the ones that provide a little boilerplate and the ones related to grid. I don't really see the others adding much benefit - it will make the projects easier for users to follow and make it easier for us to write the tests. Let me know what you think @larymak.

I have updated the user stories as well as the code, let me know what you think

[Dario-DC]

I left a few comments. Once they are resolved I think this can be merged 👍