Remove remaining active learning and old editors

[chrisdavidmills]

Description

There were a few more instances of "Active learning" language around MDN, plus a couple of old live code editors lying around. This PR:

• Gets rid of the "Active learning" wording, replacing it with appropriate alternatives.
• Replaces the old live code editors with MDN playground-based solutions.

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs (19 pages)

• /en-US/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies
• /en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML
• /en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata
• /en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
• /en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics
• /en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form
• /en-US/docs/Learn_web_development/Howto/Design_and_accessibility/Common_web_layouts
• /en-US/docs/Learn_web_development/Howto/Design_and_accessibility/Design_for_all_types_of_users
• /en-US/docs/Learn_web_development/Howto/Design_and_accessibility/Thinking_before_coding
• /en-US/docs/Learn_web_development/Howto/Design_and_accessibility/What_is_accessibility
• /en-US/docs/Learn_web_development/Howto/Tools_and_setup/Available_text_editors
• /en-US/docs/Learn_web_development/Howto/Tools_and_setup/Checking_that_your_web_site_is_working_properly
• /en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_software_do_I_need
• /en-US/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work
• /en-US/docs/Web/HTML/Guides/Responsive_images
• /en-US/docs/Web/MathML/Tutorials/For_beginners/Fractions_and_roots
• /en-US/docs/Web/MathML/Tutorials/For_beginners/Getting_started
• /en-US/docs/Web/MathML/Tutorials/For_beginners/Scripts
• /en-US/docs/Web/MathML/Tutorials/For_beginners/Text_containers

Flaws (4)

Note! 17 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies
Title: From object to iframe — general embedding technologies
Flaw count: 1

• broken_links:
  • /en-US/docs/Learn_web_development/Core/Structuring_content/ is a redirect

---

URL: /en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata
Title: What's in the head? Web page metadata
Flaw count: 3

• unknown:
  • No generic content config found
  • no blog root
  • no blog root

External URLs (54)

URL: /en-US/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies
Title: From object to iframe — general embedding technologies

• https://www.google.com/maps/ (1 time) (Note! This may be a new URL 👀)
• https://www.youtube.com/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML
Title: Including vector graphics in HTML

• https://en.wikipedia.org/wiki/Adobe_Illustrator (1 time) (Note! This may be a new URL 👀)
• https://inkscape.org/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
Title: Cascade layers

• https://drafts.csswg.org/css-cascade-5/ (1 time)

---

URL: /en-US/docs/Learn_web_development/Howto/Design_and_accessibility/Common_web_layouts
Title: What do common web layouts contain?

• https://www.mica.edu/about-mica/ (1 time)

---

URL: /en-US/docs/Learn_web_development/Howto/Design_and_accessibility/Design_for_all_types_of_users
Title: How can we design for all types of users?

• https://caniuse.com/ (1 time)
• https://en.wikipedia.org/wiki/Universal_design (1 time)
• https://imageoptim.com/api (1 time)
• https://optipng.sourceforge.net/ (1 time)
• https://pmt.sourceforge.io/pngcrush/ (1 time)
• https://webaim.org/resources/contrastchecker/ (1 time)
• https://www.tpgi.com/color-contrast-checker/ (1 time)
• https://www.w3.org/TR/html-longdesc/ (1 time)

---

URL: /en-US/docs/Learn_web_development/Howto/Design_and_accessibility/Thinking_before_coding
Title: How do I start to design my website?

• https://en.wikipedia.org/wiki/Ideation_(idea_generation) (1 time)
• https://en.wikipedia.org/wiki/Project_management (1 time)
• https://en.wikipedia.org/wiki/Project_planning (1 time)

---

URL: /en-US/docs/Learn_web_development/Howto/Design_and_accessibility/What_is_accessibility
Title: What is accessibility?

• https://en.wikipedia.org/wiki/Accessibility (1 time)
• https://www.w3.org/WAI/ (1 time)

---

URL: /en-US/docs/Learn_web_development/Howto/Tools_and_setup/Checking_that_your_web_site_is_working_properly
Title: How do you make sure your website works properly?

• https://github.com/marcelduran/yslow (1 time)
• https://www.webpagetest.org/ (1 time)

---

URL: /en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_software_do_I_need
Title: What software do I need to build a website?

• https://apps.gnome.org/en/Nautilus/ (1 time)
• https://brackets.io/ (3 times)
• https://cyberduck.de/ (1 time)
• https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site (1 time)
• https://dolphin.com/ (1 time)
• https://en.wikipedia.org/wiki/Gedit (1 time)
• https://en.wikipedia.org/wiki/Kate_%28text_editor%29 (1 time)
• https://en.wikipedia.org/wiki/Leafpad (1 time)
• https://en.wikipedia.org/wiki/List_of_web_browsers (1 time)
• https://en.wikipedia.org/wiki/Notepad_%28software%29 (1 time)
• https://en.wikipedia.org/wiki/Rsync (1 time)
• https://en.wikipedia.org/wiki/TextEdit (1 time)
• https://en.wikipedia.org/wiki/Text_(Chrome_app) (1 time)
• https://en.wikipedia.org/wiki/Vi_(text_editor) (1 time)
• https://filezilla-project.org/ (1 time)
• https://mobaxterm.mobatek.net/ (1 time)
• https://notepad-plus-plus.org/ (1 time)
• https://shiftedit.net/ (5 times)
• https://visualstudio.microsoft.com/ (3 times)
• https://winscp.net (1 time)
• https://www.apple.com/safari/ (1 time)
• https://www.barebones.com/products/textwrangler/ (1 time)
• https://www.browsershots.at/ (1 time)
• https://www.browserstack.com/ (1 time)
• https://www.browserstack.com/app-live (1 time)
• https://www.firefox.com/en-US/ (1 time)
• https://www.gnu.org/software/emacs/ (1 time)
• https://www.google.com/chrome/ (1 time)
• https://www.jetbrains.com/webstorm/ (1 time)
• https://www.opera.com/mini (1 time)
• https://www.sublimetext.com/ (3 times)
• https://www.ucweb.com/ (1 time)
• https://www.vim.org/ (1 time)

(comment last updated: 2025-08-22 09:27:11)

[bsmth]

I guess we don't need the code blocks at all, you can link to https://developer.mozilla.org/en-US/play directly instead of saying "press the play button"

[bsmth]

Unless you wanted to have the HTML block hidden with a finished iframe embed, and have people replace it with a new one to see what's involved

[chrisdavidmills]

This is a really good idea. I've removed the code blocks as suggested and tweaked the wording to suit.

[bsmth]

Somewhere on this page, would write "SVG is easy to hand code" as "SVG is easy to hand-code"

[chrisdavidmills]

done

[bsmth]

Some comments to consider, but a +1 for you for when you've had a look 👀

TY!