Update index.md where an assessment page is restructured correctly (v2)

[glmvc]

Summary

I'm referring to PR #13704 because I screwed up quite a bit there and couldn't fix the errors.

With this PR everything should work now (I really hope).

Changed following like discussed in Issue #11932 :

• first moved document using "yarn content move..."
• title changed (I couldn't think of anything better and didn't really find a consistent pattern in the naming of the assessment pages - but I'm open to other suggestions :)
• added two additional tags
• content adjusted in a few places
• content/sections rearranged to fit with the pattern of the other assessment pages
• added assessments section to the modules overview page

I think the mistake was that instead of moving the document at the beginning (before changes in the md files where made), I moved it at the very end....

What remains to be determined:

• I've had the question several times and still don't know where the "Assessment:" prefix in the navigation/sidebar left of the page comes from? Is this added automatically or must something be done here?
• In the issue we also mentioned the marking guides, but tbh I don't know much about them and what the requirements are etc. so I haven't done anything on that

Motivation

This PR should replace the one mentioned.

Supporting details

PR #13704 & Issue #11932

Related issues

Metadata

• Adds a new document
• Rewrites (or significantly expands) a document
• Fixes a typo, bug, or other error

[github-actions]

Preview URLs

• https://pr13781.content.dev.mdn.mozit.cloud/en-US/docs/Learn/CSS/First_steps/Getting_started
• https://pr13781.content.dev.mdn.mozit.cloud/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
• https://pr13781.content.dev.mdn.mozit.cloud/en-US/docs/Learn/CSS/First_steps/How_CSS_works
• https://pr13781.content.dev.mdn.mozit.cloud/en-US/docs/Learn/CSS/First_steps/Styling_a_biography_page
• https://pr13781.content.dev.mdn.mozit.cloud/en-US/docs/Learn/CSS/First_steps/What_is_CSS
• https://pr13781.content.dev.mdn.mozit.cloud/en-US/docs/Learn/CSS/First_steps

Flaws

Note! 1 document with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Learn/CSS/First_steps/What_is_CSS
Title: What is CSS?
on GitHub
Flaw count: 2

• macros:
  • /en-US/docs/Web/HTML/Element/h1 redirects to /en-US/docs/Web/HTML/Element/Heading_Elements
• broken_links:
  • Link points to the page it's already on

---

URL: /en-US/docs/Learn/CSS/First_steps/Getting_started
Title: Getting started with CSS
on GitHub
Flaw count: 1

• broken_links:
  • Link points to the page it's already on

---

URL: /en-US/docs/Learn/CSS/First_steps/Styling_a_biography_page
Title: Styling a biography page
on GitHub
Flaw count: 1

• broken_links:
  • Link points to the page it's already on

---

URL: /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
Title: How CSS is structured
on GitHub
Flaw count: 1

• broken_links:
  • Link points to the page it's already on

---

URL: /en-US/docs/Learn/CSS/First_steps/How_CSS_works
Title: How CSS works
on GitHub
Flaw count: 1

• broken_links:
  • Link points to the page it's already on

External URLs

URL: /en-US/docs/Learn/CSS/First_steps
Title: CSS first steps
on GitHub

No new external URLs

---

URL: /en-US/docs/Learn/CSS/First_steps/What_is_CSS
Title: What is CSS?
on GitHub

No new external URLs

---

URL: /en-US/docs/Learn/CSS/First_steps/Getting_started
Title: Getting started with CSS
on GitHub

No new external URLs

---

URL: /en-US/docs/Learn/CSS/First_steps/Styling_a_biography_page
Title: Styling a biography page
on GitHub

• https://codepen.io/ (2 times) (Note! This may be a new URL 👀)
• https://glitch.com/ (2 times) (Note! This may be a new URL 👀)
• https://jigsaw.w3.org/css-validator/ (1 time) (Note! This may be a new URL 👀)
• https://jsfiddle.net/ (2 times) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
Title: How CSS is structured
on GitHub

No new external URLs

---

URL: /en-US/docs/Learn/CSS/First_steps/How_CSS_works
Title: How CSS works
on GitHub

No new external URLs

(this comment was updated 2022-03-17 20:02:42.127014)

[wbamberg]

Thanks for this PR, @glmvc ! It looks good.

You will see that every article in this module should have an "In this module" section (e.g. https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured#in_this_module) and because you've renamed one of the articles, you'll need to update all of these.

You'll also need to update the PreviousMenuNext macro calls in the page before this one (e.g.

content/files/en-us/learn/css/first_steps/how_css_works/index.md

Line 11 in ea032ab

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

and

content/files/en-us/learn/css/first_steps/how_css_works/index.md

Line 174 in ea032ab

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

) so they have the new URL in them. It will works as it is because of the redirect but it's good for it to be right.

I've had the question several times and still don't know where the "Assessment:" prefix in the navigation/sidebar left of the page comes from? Is this added automatically or must something be done here?

The Learn sidebar is built using a macro: LearnSidebar.ejs. That macro really consists of two things:

• a big dictionary called text (https://github.com/mdn/yari/blob/201f6155c973c6864367d0f123f6176f4ccbf38a/kumascript/macros/LearnSidebar.ejs#L14) which maps string identifiers like "Using_your_new_knowledge" onto strings in various languages
• an HTML template thing that describes what should appear in the sidebar. You need to update this bit: https://github.com/mdn/yari/blob/201f6155c973c6864367d0f123f6176f4ccbf38a/kumascript/macros/LearnSidebar.ejs#L1888 ...

That would be a separate PR, to mdn/yari.

I hope this helps!

[wbamberg]

Suggested change

	5. [Styling a biography page](/en-US/docs/Learn/CSS/First_steps/Styling_a_biography_page)
	5. **Styling a biography page**

(we should not link to the current page)

[hamishwillee]

@wbamberg IMO we should fix this with infrastructure. A same page link should be black and unclickable in any case. But these kinds of navigation elements should actually be pushed into the sidebar proper or rendered in place with special handling.

[wbamberg]

Yeah, I agree. Having spent some time updating the Learning Area recently, the amount of manual work involved for fixing up links and stuff is ridiculous.

[hamishwillee]

@schalkneethling see ^^^ . Self links are currently OK except that they report a flaw in this case- I believe there is a PR somewhere to say that they should only report a flaw if the value is a redirect. Otherwise the self link should be considered deliberate.

Note that really what should happen is that these move into the sidebar. However really can't do this unless we fix the sidebar problems outlined here mdn/yari#5547 (comment)

[glmvc]

@wbamberg Oh, I totally forgot about this 😵 Should be fixed now with the new commit.
Next time I know I need to check out the flaws more....
Also, thank you very much for the explanation about the sidebar! Now I finally understand 😄 thanks - will have a look at it as soon as I have time.

[wbamberg]

OK, this looks good to me. Thank you @glmvc ! If you don't feel comfortable updating the sidebar, let me know and I'll do it. If you would like to update the sidebar, and have any questions about what to do, please feel free to ask 👍 .

[glmvc]

@wbamberg I'd like to take a look at it myself and read up a bit on this topic :) Thanks for your offer, appreciate it 👍 If I get completely stuck, I would get back to you - thanks!