feat(curriculum): add magazine layout lab #57174
Conversation
github-actions
bot
added
scope: curriculum
…m/larymak/freeCodeCamp into feat/magazine-layout-css-grid-lab
Add tests for grid layout styles in magazine cover
There was a problem hiding this comment.
I had a brief look and remembered that we have a workshop and a lab in this module with almost the same title. We briefly discussed about modifying this lab in some way. See this conversation: https://chat.google.com/room/AAAAVgjQ1iA/TYbRFIcNm5E/TYbRFIcNm5E?cls=10
Do we still want to do that? @jdwilkin4 I hope there's time.
| "In this lab, you will design a magazine layout using CSS Grid, including concepts like grid rows and grid columns." | ||
| ] | ||
| }, | ||
| "harp": { "title": "115", "intro": [] }, |
There was a problem hiding this comment.
| "harp": { "title": "115", "intro": [] }, |
block 115 is already there
| demoType: onClick | ||
| --- | ||
|
|
||
| # --description-- |
There was a problem hiding this comment.
| # --description-- | |
| # --description-- | |
| title: Design a Magazine Layout Using CSS Grid | ||
| challengeType: 14 | ||
| dashedName: design-a-magazine-layout-using-css-grid | ||
| # demoType can either be 'onClick' or 'onLoad'. If the project or lab doesn't have a preview, delete the property |
There was a problem hiding this comment.
| # demoType can either be 'onClick' or 'onLoad'. If the project or lab doesn't have a preview, delete the property |
| @@ -2447,7 +2447,13 @@ | |||
| "In this workshop, you'll build a magazine article. You'll practice how to use CSS Grid, including concepts like grid rows and grid columns." | |||
| ] | |||
| }, | |||
| "ogko": { "title": "114", "intro": [] }, | |||
| "lab-magazine-layout": { | |||
| "title": "Design a Magazine Layout Using CSS Grid", | |||
There was a problem hiding this comment.
The naming convention we are using is: lab-x -> build-x or design-x (not build-x-by-using-y).
| const featureArticle = document.querySelector('section.feature-article'); | ||
| const smallArticle1 = document.querySelector('section.small-article1'); | ||
| const smallArticle2 = document.querySelector('section.small-article2'); | ||
| const coverImage = document.querySelector('section.cover-image'); |
There was a problem hiding this comment.
missing asserts in this test
| assert.exists(document.querySelector('main')); | ||
| ``` | ||
|
|
||
| You should have a `.magazine-cover` class. |
There was a problem hiding this comment.
This is not checking that the main element has the requested class
| You should have a `header` element for the title. | ||
|
|
||
| ```js | ||
| assert.exists(document.querySelector('header')); |
There was a problem hiding this comment.
This should check that the header is a child of the main element
| assert.exists(document.querySelector('header')); | ||
| ``` | ||
|
|
||
| You should have a `section` element for each article and the cover image, with classes `feature-article`, `small-article1`, `small-article2`, and `cover-image` respectively. |
There was a problem hiding this comment.
Users stories don't specify exactly what you need to do with articles and classes. It should be clarified from the beginning.
|
Thanks for bringing that up. I forgot about that conversation. Here is what we should do. For the MVP launch, let's just leave this as is. This isn't the first lab they will encounter in the curriculum. They have to get through all of HTML and most of CSS before they reach this part. Even if some want to randomly jump to the grid that would be tiny minority that it is not much of a concern. As long as the refactor happens in January of next year, then most campers will only ever see the revised newspaper version anyway. |
Checklist:
mainbranch of freeCodeCamp.Closes #XXXXX