City Skyline - Step 33: Clarify instructions

[dinahess]

Describe the Issue

The instructions for Step 33 for the City Skyline project in the Responsive Web Design curriculum could use clarification. I interpreted them as asking me to move the position and top properties to the .background-buildings selector then create a new selector to target both .background-buildings and .foreground-buildings with just the position and top properties. So, I did that, but did not move the position and top properties into .background-buildings because it didn't make sense. When I submitted that code, the test passed! Then, lo and behold, on the next step, I see that the instructions meant for me to move the position and top properties into .background-buildings and CHANGE that selector to include the .foreground-buildings class! So, two issues here, IMO. 1) Clarify instructions, and 2) Fix the tests.

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-variables-by-building-a-city-skyline/step-33

Steps to Reproduce

Navigate to Step 33 of the City Skyline project and notice that the instructions could be misinterpreted.

Recommended fix or suggestions

Change the wording in the instruction from:

You should optimize your code. Move the position and top properties and values from .foreground-buildings to .background-buildings. Then select both .background-buildings and .foreground-buildings there, effectively applying those styles to both of the elements. You can use a comma (,) to separate selectors like this: selector1, selector2.

to:

To begin optimizing your code, first move the position and top properties and values from .foreground-buildings to .background-buildings, then change the existing .background-buildings selector to also target .foreground-buildings, so the styles will be applied to both. You can use a comma (,) to separate selectors like this: selector1, selector2.

Screenshots

No response

[majestic-owl448]

the tests are missing the check for .background-buildings, that the selector is not present I would say, everything else seems to be tested

[Nouridin]

Make sure that the automated tests check that the position and top properties are only present in the combined selector, not on a separate .foreground-buildings rule.

[ZaamiAhmed]

• Moved position: absolute and top from .foreground-buildings to .background-buildings for better structure.
• Removed duplicate styles by grouping .foreground-buildings and .background-buildings under a single CSS rule.
• Improves code readability and maintainability.