HTML interactive examples - help wanted


As you might know, we’ve been recently working on a project to add interactive examples to the tops of MDN reference pages.

We just finished adding examples to the JavaScript and CSS pages, and it’s time to add them to our HTML reference.

When we needed CSS examples we asked for help from our volunteers and got an amazing response, so this post is to ask if anyone wants to help us write HTML examples.

We’ve written a few HTML examples already, so you can see what they look like:

If you’re interested in helping out, please:

Finally: there’s a spreadsheet listing all the HTML elements and attribute pages on MDN. This is what I’m using to track the work. So if you’re not inspired by any of the items that already have GitHub issues, then you’re welcome to work on any of the items in this spreadsheet that don’t already have an issue filed, and that are up for grabs (meaning, that the “status” column is “Not started”).

If you do decide to work on one of the spreadsheet items, please file an issue for it, and in the issue, comment that you are intending to work on it. This will help us to avoid collisions.

(Eric Shepherd) #2

@Schalk_Neethling, I have a question for you — if we want to use a web font in an interactive example, is it okay to just @import() it from Google Fonts, or should we put a copy of it into the repository and use it from there?

Actually, I wonder if it would be worth having a couple of specialty fonts available for examples to use, like a couple of fun ones for handwriting or script styled text, some extra-bold stuff like Impact or whatever, and that kind of thing. Unless we should just use them from Google Fonts. :slight_smile:


(Schalk Neethling) #3

Hey @sheppy - I would not want to depend on additional external services for this if we can avoid it. Just too many moving parts :wink:

I reckon it is not a bad idea to have a few options ready to roll. Please open an issue for this on the repo and let’s get other people’s opinion there. Thanks!

(ganesh) #4

Hey MDN Team,

Thanks a lot! this is amazing…